设备列表

src/views/device/list/detail.vue

@@ -21,17 +21,17 @@
       </el-form-item>
       <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类">
-          <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id" />
+          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="设备类型：" prop="deviceType">
         <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-          <el-option v-for="item in deviceTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option v-for="item in devTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="是否热门：" prop="isHot">
         <el-select v-model="form.isHot" placeholder="请选择是否热门">
-          <el-option v-for="item in hotOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
+          <el-option v-for="item in yesOrNoOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
         </el-select>
       </el-form-item>
       <el-row>
@@ -55,14 +55,14 @@
         <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 modeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
+            <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
               :disabled="item.disabled" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="item.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
           :rules="{ type: 'array', required: true, message: '请选择功能权限', trigger: 'change' }">
           <el-select v-model="item.functionList" placeholder="请选择功能权限" multiple>
-            <el-option v-for="item in functionOptions" :key="item.id" :label="item.name" :value="item.type" />
+            <el-option v-for="item in devFucOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="item.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`"
@@ -104,14 +104,11 @@
 </template>
 
 <script>
-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 { devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin } from "@/mixin/index";
 import Editor from "@/components/Editor/index";
-
 export default {
-  mixins: [devModeMixin],
+  mixins: [devModeMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin, devFucMixin],
   components: {
     Editor
   },
@@ -119,7 +116,6 @@ export default {
     return {
       // 能否编辑
       disabled: false,
-      functionOptions: [],
       // 表单
       form: {
         typeList: [
@@ -144,14 +140,6 @@ export default {
         img: [{ required: true, message: "请上传在线图片", trigger: "change" }],
         offlineImg: [{ required: true, message: "请上传离线图片", trigger: "change" }],
       },
-      // 是否热门
-      hotOptions: [{
-        value: 0,
-        label: '否'
-      }, {
-        value: 1,
-        label: '是'
-      }],
       // 设备连接
       connectTypeOptions: [{
         value: 2,
@@ -173,40 +161,12 @@ export default {
       }, {
         value: 'QiXinWei',
         label: 'QiXinWei'
-      }],
-      functionOptions: [],
-      categoryOptions: [],
-      deviceTypeOptions: [{
-        value: 0,
-        label: '音响'
-      }, {
-        value: 1,
-        label: '耳机'
-      }, {
-        value: 2,
-        label: '穿戴'
       }]
     };
   },
   mounted() {
     this.disabled = this.$route.query.key === "查看" ? true : false
     this.getList()
-    // 权限列表
-    functionList({
-      isDelete: 0
-    }).then((res) => {
-      if (res.code === 0) {
-        this.functionOptions = res.data;
-      }
-    });
-    // 设备类型
-    classList({
-      status: 1,
-    }).then((res) => {
-      if (res.code === 0) {
-        this.categoryOptions = res.data;
-      }
-    });
   },
   methods: {
     // 详情
@@ -218,7 +178,7 @@ export default {
           if (res.code === 0) {
             this.form = res.data;
             this.form.typeList.map((i) => {
-              this.modeOptions[i.type - 1].disabled = true;
+              this.devModeOptions[i.type - 1].disabled = true;
             });
           }
         });
@@ -267,16 +227,16 @@ export default {
 
     // 选中一个设备类型就从数组中去掉
     getTypeChange(item) {
-      for (let i in this.modeOptions) {
-        this.modeOptions[i].disabled = false
+      for (let i in this.devModeOptions) {
+        this.devModeOptions[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.modeOptions.findIndex(j => j.value == i.type)
-          this.modeOptions[index].disabled = true
+          let index = this.devModeOptions.findIndex(j => j.value == i.type)
+          this.devModeOptions[index].disabled = true
         }
       })
     },
@@ -294,7 +254,7 @@ export default {
     // 删除子表单
     getDelete(index) {
       this.form.typeList.splice(index, 1);
-      this.modeOptions[index].disabled = false;
+      this.devModeOptions[index].disabled = false;
     },
 
     // 取消

src/views/device/list/index.vue

@@ -12,7 +12,7 @@
       </el-form-item>
       <el-form-item label="设备分类：">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类" clearable>
-          <el-option v-for="item in categoryOptions" :key="item.id" :value="item.id" :label="item.name" />
+          <el-option v-for="item in categoryOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
@@ -22,7 +22,7 @@
       </el-form-item>
       <el-form-item label="是否热门：">
         <el-select v-model="form.isHot" placeholder="请选择是否热门" clearable>
-          <el-option v-for="item in hotOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option v-for="item in yesOrNoOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -85,10 +85,9 @@
 
 <script>
 import { list, remove, change } from '@/api/device/list'
-import { devMixin, onOrOffMixin } from '@/mixin/index'
-import { list as classList } from "@/api/device/class";
+import { devMixin, onOrOffMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin } from '@/mixin/index'
 export default {
-  mixins: [devMixin, onOrOffMixin],
+  mixins: [devMixin, onOrOffMixin, devTypeMixin, devCategoryMixin, yesOrNoMixin],
   data() {
     return {
       // 遮罩层
@@ -106,32 +105,11 @@ export default {
       changeForm: {
         ids: '',
         type: null
-      },
-      // 是否热门
-      hotOptions: [{
-        value: 0,
-        label: '否'
-      }, {
-        value: 1,
-        label: '是'
-      }],
-      deviceTypeOptions: [{
-        value: 0,
-        label: '音响'
-      }, {
-        value: 1,
-        label: '耳机'
-      }, {
-        value: 2,
-        label: '穿戴'
-      }],
-      // 设备分类
-      categoryOptions: []
+      }
     }
   },
   mounted() {
     this.getList()
-    this.getClass()
   },
   methods: {
     // 列表
@@ -166,13 +144,6 @@ export default {
       return this.changeForm.ids === '' ? true : false
     },
 
-    // 设备分类
-    getClass() {
-      classList().then(res => {
-        this.categoryOptions = res.data
-      })
-    },
-
     // 上下架
     getShelves(key, e) {
       if (e) {
@@ -228,11 +199,11 @@ export default {
 
     // 字典翻译
     hotFormatter(row) {
-      return this.selectDictLabel(this.hotOptions, row.isHot)
+      return this.selectDictLabel(this.yesOrNoOptions, row.isHot)
     },
 
     deviceTypeFormatter(row) {
-      return this.selectDictLabel(this.deviceTypeOptions, row.deviceType)
+      return this.selectDictLabel(this.devTypeOptions, row.deviceType)
     }
   }
 }