设备列表

src/views/device/list/detail.vue

@@ -93,10 +93,11 @@
           <Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
         </el-form-item>
         <!-- 删除按钮 -->
-        <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false" @click="getDelete(index)" />
+        <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
+          @click="getDelete(item.type, index)" />
       </div>
     </el-form>
-    <div style="margin-left: 120px;">
+    <div>
       <el-button @click="getCancel">取消</el-button>
       <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
     </div>
@@ -106,23 +107,15 @@
 <script>
 import { create, detail, edit } from "@/api/device/list";
 import { devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin } from "@/mixin/index";
-import Editor from "@/components/Editor/index";
 export default {
   mixins: [devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin],
-  components: {
-    Editor
-  },
   data() {
     return {
-      // 能否编辑
-      disabled: false,
       // 表单
       form: {
-        typeList: [
-          {
-            functionList: [],
-          },
-        ],
+        typeList: [{
+          functionList: [],
+        }],
         bluetoothNames: []
       },
       // 显示蓝牙输入框
@@ -161,11 +154,12 @@ export default {
       }, {
         value: 'QiXinWei',
         label: 'QiXinWei'
-      }]
+      }],
+      // 只读
+      disabled: Boolean(this.$route.query.boolean)
     };
   },
   mounted() {
-    this.disabled = this.$route.query.key === "查看" ? true : false
     this.getList()
   },
   methods: {
@@ -226,35 +220,41 @@ export default {
     },
 
     // 选中一个设备类型就从数组中去掉
-    getTypeChange(item) {
-      for (let i in this.devModeOptions) {
-        this.devModeOptions[i].disabled = false
+    getTypeChange(i) {
+      for (let key in this.devModeOptions) {
+        this.devModeOptions[key].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.devModeOptions.findIndex(j => j.value == i.type)
+      // 选中的设备模式禁止再选
+      this.form.typeList.map(item => {
+        if (item.type) {
+          let index = this.devModeOptions.findIndex(j => j.value == item.type)
           this.devModeOptions[index].disabled = true
         }
       })
+      // 除了设备模式都为空
+      Object.keys(i).map(e => {
+        if (!['type', 'icon1', 'icon2'].includes(e)) {
+          i[e] = e === 'functionList' ? [] : null
+        }
+      })
     },
 
     // 新增子表单
     getAdd() {
       this.form.typeList.push({
-        type: "",
+        type: null,
         functionList: [],
-        icon1: "",
-        icon2: "",
+        connectType: null,
+        icon1: '',
+        icon2: '',
+        guidePageContent: ''
       });
     },
 
     // 删除子表单
-    getDelete(index) {
+    getDelete(type, index) {
       this.form.typeList.splice(index, 1);
-      this.devModeOptions[index].disabled = false;
+      this.devModeOptions.find(i => i.value == type).disabled = false
     },
 
     // 取消
@@ -297,12 +297,6 @@ export default {
   width: 580px;
 }
 
-.sub-add {
-  position: absolute;
-  top: 0;
-  right: -100px;
-}
-
 .sub-form {
   position: relative;
   border: 1px solid #e8e8e8;

src/views/device/list/index.vue

@@ -59,7 +59,7 @@
       <el-table-column label="创建时间" prop="createTimeText" align="center" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getChange(scope.row.id, '查看')">查看</el-button>
+          <el-button type="text" @click="getChange(scope.row.id, true)">查看</el-button>
           <el-button v-if="scope.row.status === 2" type="text" @click="getChange(scope.row.id)"
             v-hasPermi="['device:list:edit']">
             编辑
@@ -160,12 +160,12 @@ export default {
     },
 
     // 新增 / 编辑 / 查看
-    getChange(id, key) {
+    getChange(id, boolean) {
       this.$router.push({
         path: `/device/list/detail`,
         query: {
           id: id,
-          key: key
+          boolean: boolean
         }
       })
     },