设备列表区分新 旧版本蓝牙名称

src/views/device/list/detail.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" :rules="rules" ref="form" label-width="120px" :disabled="disabled">
+    <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="disabled">
       <el-form-item label="设备型号：" prop="clientType">
         <el-input v-model="form.clientType" placeholder="请输入设备型号" />
       </el-form-item>
       <el-form-item label="设备名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入设备名称" />
       </el-form-item>
-      <el-form-item label="蓝牙名称：" prop="bluetoothName">
-        <el-input v-model="form.bluetoothName" placeholder="请输入蓝牙名称" />
+      <el-form-item label="旧版蓝牙名称：" prop="bluetoothName">
+        <el-input v-model="form.bluetoothName" placeholder="请输入蓝牙名称" :disabled="form.id" />
+      </el-form-item>
+      <el-form-item label="蓝牙名称：" prop="bluetoothNameList">
+        <el-tag v-for="(item, index) in form.bluetoothNameList" :key="item" closable :disable-transition="false"
+          @close="handleClose(index)" style="margin-right: 10px;">{{ item }}</el-tag>
+        <el-input v-if="inputVisible" v-model="bluetoothName" ref="saveTagInput" @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm" style="width: 100px" />
+        <el-button v-else @click="showInput" size="mini">+ 新增</el-button>
       </el-form-item>
       <el-form-item label="制造商：" prop="manufacturer">
         <el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
@@ -50,7 +57,7 @@
       <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
         <el-form-item label="设备模式：" :prop="`typeList.${index}.type`"
           :rules="{ required: true, message: '请选择设备模式', trigger: 'change' }">
-          <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange">
+          <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange(item)">
             <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
               :disabled="item.disabled" />
           </el-select>
@@ -70,8 +77,8 @@
         </el-form-item>
         <el-row>
           <el-col :span="12">
-            <el-form-item :label="item.type === 1 || item.type === 3 ? '连接引导图：' : '开机引导图：'" :prop="`typeList.${index}.icon1`"
-              :rules="{ required: true, message: '请上传引导图片', trigger: 'change' }">
+            <el-form-item :label="item.type === 1 || item.type === 3 ? '连接引导图：' : '开机引导图：'"
+              :prop="`typeList.${index}.icon1`" :rules="{ required: true, message: '请上传引导图片', trigger: 'change' }">
               <Upload listType="picture-card" :url="item.icon1" @upload="handleUploadIcon($event, index, 'icon1')"
                 :disabled="disabled" />
             </el-form-item>
@@ -123,7 +130,12 @@ export default {
             functionList: [],
           },
         ],
+        bluetoothNameList: []
       },
+      // 显示蓝牙输入框
+      inputVisible: false,
+      // 蓝牙名称
+      bluetoothName: '',
       // 表单验证
       rules: {
         clientType: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
@@ -216,6 +228,29 @@ export default {
       }
     },
 
+    // 删除蓝牙名称
+    handleClose(index) {
+      this.form.bluetoothNameList.splice(index, 1)
+    },
+
+    // 显示输入框
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(() => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+
+    // 保存蓝牙名称
+    handleInputConfirm() {
+      let inputValue = this.bluetoothName
+      if (inputValue) {
+        this.form.bluetoothNameList.push(inputValue)
+      }
+      this.inputVisible = false
+      this.bluetoothName = ''
+    },
+
     // 上传设备图片
     handleUploadImg(e, key) {
       key === "online"
@@ -229,14 +264,14 @@ export default {
     },
 
     // 选中一个设备类型就从数组中去掉
-    getTypeChange() {
+    getTypeChange(item) {
       for (let i in this.typeOptions) {
         this.typeOptions[i].disabled = false
       }
+      this.$set(item, 'functionList', [])
+      this.$set(item, 'connectType', null)
+      this.$set(item, 'guidePageContent', '')
       this.form.typeList.map(i => {
-        i.functionList = []
-        i.connectType = null
-        i.guidePageContent = ''
         if (i.type) {
           let index = this.typeOptions.findIndex(j => j.value == i.type)
           this.typeOptions[index].disabled = true
@@ -319,8 +354,4 @@ export default {
     color: #c0c4cc;
   }
 }
-
-::v-deep .editor {
-  background: #000;
-}
 </style>