设备列表蓝牙名称优化

src/views/device/list/detail.vue

@@ -7,14 +7,11 @@
       <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="请输入蓝牙名称" :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"
+      <el-form-item label="蓝牙名称：" prop="bluetoothNames">
+        <el-tag v-for="(item, index) in form.bluetoothNames" :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-input v-if="inputVisible" v-model="bluetoothName" ref="saveTagInput" @input="handleInput"
+          @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">
@@ -58,7 +55,7 @@
         <el-form-item label="设备模式：" :prop="`typeList.${index}.type`"
           :rules="{ required: true, message: '请选择设备模式', trigger: 'change' }">
           <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)"
+            <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
               :disabled="item.disabled" />
           </el-select>
         </el-form-item>
@@ -107,14 +104,14 @@
 </template>
 
 <script>
-import { categoryList } from "@/api/device/category";
-import { functionList } from "@/api/device/function";
-import { Add, Detail, Edit } from "@/api/device/list";
-import { devTypeMixin } from "@/mixin/index";
+import { list as classList } from "@/api/device/class";
+import { list as functionList } from "@/api/device/function";
+import { create, detail, edit } from "@/api/device/list";
+import { devModeMixin } from "@/mixin/index";
 import Editor from "@/components/Editor/index";
 
 export default {
-  mixins: [devTypeMixin],
+  mixins: [devModeMixin],
   components: {
     Editor
   },
@@ -130,7 +127,7 @@ export default {
             functionList: [],
           },
         ],
-        bluetoothNameList: []
+        bluetoothNames: []
       },
       // 显示蓝牙输入框
       inputVisible: false,
@@ -140,7 +137,7 @@ export default {
       rules: {
         clientType: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
         name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
-        bluetoothName: [{ required: true, message: '请输入蓝牙名称', trigger: 'blur' }],
+        bluetoothNames: [{ type: 'array', required: true, message: '请输入蓝牙名称', trigger: 'blur' }],
         isHot: [{ required: true, message: "是否热门", trigger: "change" }],
         categoryId: [{ required: true, message: "请选择设备分类", trigger: "change" }],
         deviceType: [{ required: true, message: "请选择设备类型", trigger: 'change' }],
@@ -203,7 +200,7 @@ export default {
       }
     });
     // 设备类型
-    categoryList({
+    classList({
       status: 1,
     }).then((res) => {
       if (res.code === 0) {
@@ -215,13 +212,13 @@ export default {
     // 详情
     getList() {
       if (this.$route.query.id) {
-        Detail({
+        detail({
           id: this.$route.query.id,
         }).then((res) => {
           if (res.code === 0) {
             this.form = res.data;
             this.form.typeList.map((i) => {
-              this.typeOptions[i.type - 1].disabled = true;
+              this.modeOptions[i.type - 1].disabled = true;
             });
           }
         });
@@ -230,7 +227,7 @@ export default {
 
     // 删除蓝牙名称
     handleClose(index) {
-      this.form.bluetoothNameList.splice(index, 1)
+      this.form.bluetoothNames.splice(index, 1)
     },
 
     // 显示输入框
@@ -241,11 +238,16 @@ export default {
       })
     },
 
+    // 禁止输入逗号
+    handleInput(e) {
+      this.bluetoothName = e.replace(/[,，]/g, "")
+    },
+
     // 保存蓝牙名称
     handleInputConfirm() {
       let inputValue = this.bluetoothName
       if (inputValue) {
-        this.form.bluetoothNameList.push(inputValue)
+        this.form.bluetoothNames.push(inputValue)
       }
       this.inputVisible = false
       this.bluetoothName = ''
@@ -265,16 +267,16 @@ export default {
 
     // 选中一个设备类型就从数组中去掉
     getTypeChange(item) {
-      for (let i in this.typeOptions) {
-        this.typeOptions[i].disabled = false
+      for (let i in this.modeOptions) {
+        this.modeOptions[i].disabled = false
       }
       this.$set(item, 'functionList', [])
       this.$set(item, 'connectType', null)
       this.$set(item, 'guidePageContent', '')
       this.form.typeList.map(i => {
         if (i.type) {
-          let index = this.typeOptions.findIndex(j => j.value == i.type)
-          this.typeOptions[index].disabled = true
+          let index = this.modeOptions.findIndex(j => j.value == i.type)
+          this.modeOptions[index].disabled = true
         }
       })
     },
@@ -292,7 +294,7 @@ export default {
     // 删除子表单
     getDelete(index) {
       this.form.typeList.splice(index, 1);
-      this.typeOptions[index].disabled = false;
+      this.modeOptions[index].disabled = false;
     },
 
     // 取消
@@ -306,7 +308,7 @@ export default {
         if (valid) {
           if (this.$route.query.id) {
             // 编辑
-            Edit(this.form).then((res) => {
+            edit(this.form).then((res) => {
               if (res.code === 0) {
                 this.$message.success("修改成功！");
                 this.getCancel();
@@ -314,7 +316,7 @@ export default {
             });
           } else {
             // 新建
-            Add(this.form).then((res) => {
+            create(this.form).then((res) => {
               if (res.code === 0) {
                 this.$message.success("提交成功！");
                 this.getCancel();