3D库房配置 绑定参数

src/views/storeManage/warehouse3DConfig/index.vue

@@ -57,6 +57,32 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
+        <el-form ref="formDom" class="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="显示位置" prop="showPosition">
+            <!-- <input-select :options="options" @selectValue="handleSelectValue" /> -->
+            <p class="form-first">{{ form.showPosition }}</p>
+          </el-form-item>
+          <el-form-item label="设备绑定" prop="devName">
+            <el-select v-model="devVal" placeholder="请选择" clearable filterable>
+              <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value">
+                <span style="float: left">{{ item.label }}&nbsp;-&nbsp;{{ item.value }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="参数绑定" prop="paramName">
+            <el-select v-model="paramsVal" filterable multiple clearable placeholder="请选择">
+              <el-option v-for="item in paramsOptions" :key="item.value" :label="item.label" :value="item.value">
+                <span style="float: left">{{ item.label }}&nbsp;-&nbsp;{{ item.value }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否显示" prop="isShow">
+            <el-radio-group v-model="form.isShow" size="mini">
+              <el-radio-button label="显示">是</el-radio-button>
+              <el-radio-button label="隐藏">否</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="handleConfirm">确定</el-button>
         </div>
@@ -79,7 +105,27 @@ export default {
       ],
       tableData: [],
       selections: [],
-      dialogVisible: false
+      dialogVisible: false,
+      form: {},
+      // 设备绑定
+      devVal: '',
+      devOptions: [
+        { value: '000', label: '空气质量检测设备' },
+        { value: '111', label: '摄像头' }
+      ],
+      // 参数绑定
+      paramsVal: [],
+      paramsOptions: [
+        { value: '0000', label: '参数0' },
+        { value: '1111', label: '参数1' },
+        { value: '2222', label: '参数2' },
+        { value: '3333', label: '参数3' }
+      ],
+      rules: {
+        devName: [
+          { required: true, message: '请选择设备', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -102,6 +148,8 @@ export default {
     },
     handleBindParam() {
       if (this.selections.length === 1) {
+        this.form = this.selections[0]
+        this.devVal = this.form.devName
         this.dialogVisible = true
       } else {
         this.$message({
@@ -141,4 +189,38 @@ export default {
   margin-top: 0;
   min-height: calc(100vh - 242px);
 }
+.form{
+  margin-left: 38px;
+  .form-first{
+    color: #fff;
+    background-color: #083177;
+    width: 510px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 4px;
+    padding-left: 16px;
+  }
+}
+::v-deep .form .el-input__inner{
+  width: 510px;
+  height: 36px;
+}
+::v-deep .el-dialog{
+  width: 720px;
+}
+::v-deep .el-tag.el-tag--info{
+  height: 26px;
+  line-height: 26px;
+  background-color: #13439E;
+  border: none;
+  color: #fff;
+}
+::v-deep .el-tag.el-tag--info .el-tag__close{
+  background-color: #fff;
+}
+::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
+    position: absolute;
+    right: -43px;
+    top: 0;
+}
 </style>