设备管理 设备列表

src/views/device/list/detail.vue

@@ -12,8 +12,12 @@
       </el-form-item>
       <el-form-item label="升级方式：" prop="upgradeType">
         <el-select v-model="form.upgradeType" placeholder="请选择升级方式">
-          <el-option v-for="item in dict.type.dev_upgrade_type" :key="item.value" :label="item.label"
-            :value="Number(item.value)" />
+          <el-option
+            v-for="item in dict.type.dev_upgrade_type"
+            :key="item.value"
+            :label="item.label"
+            :value="Number(item.value)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="设备过滤：" prop="filter">
@@ -21,8 +25,12 @@
       </el-form-item>
       <el-form-item label="制造商：" prop="manufacturer">
         <el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
-          <el-option v-for="item in dict.type.dev_manu_facturer" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <el-option
+            v-for="item in dict.type.dev_manu_facturer"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="设备类型：" prop="categoryId">
@@ -32,109 +40,174 @@
       </el-form-item>
       <el-form-item label="是否热门：" prop="isHot">
         <el-select v-model="form.isHot" placeholder="请选择是否热门">
-          <el-option v-for="item in dict.type.hot_yes_no" :key="item.value" :label="item.label"
-            :value="Number(item.value)" />
+          <el-option
+            v-for="item in dict.type.hot_yes_no"
+            :key="item.value"
+            :label="item.label"
+            :value="Number(item.value)"
+          />
         </el-select>
       </el-form-item>
       <el-row>
         <el-col :span="12">
           <el-form-item label="在线图片：" prop="img">
-            <Upload listType="picture-card" :url="form.img" @upload="handleUploadImg($event, 'online')"
-              :disabled="disabled" />
+            <Upload
+              listType="picture-card"
+              :url="form.img"
+              @upload="handleUploadImg($event, 'online')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="离线图片：" prop="offlineImg" style="float:right">
-            <Upload listType="picture-card" :url="form.offlineImg"
-              @upload="handleUploadImg($event, 'offline')" :disabled="disabled" />
+            <Upload
+              listType="picture-card"
+              :url="form.offlineImg"
+              @upload="handleUploadImg($event, 'offline')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <!-- 子表单 -->
-      <el-button v-if="disabled === false && form.typeList.length < 4" type="primary" icon="el-icon-plus"
-        @click="getAdd">
-        新增
-      </el-button>
+      <el-button
+        v-if="disabled === false && form.typeList.length < 4"
+        type="primary"
+        icon="el-icon-plus"
+        @click="getAdd"
+      >新增</el-button>
       <Draggable v-model="form.typeList" animation="300">
         <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
-          <el-form-item label="设备模式：" :prop="`typeList.${index}.type`" :rules="{
+          <el-form-item
+            label="设备模式："
+            :prop="`typeList.${index}.type`"
+            :rules="{
               required: true,
               message: '请选择设备模式',
               trigger: 'change',
-            }">
+            }"
+          >
             <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange($event, index)">
-              <el-option v-for="item in dict.type.dev_list_type" :key="item.value" :label="item.label"
-                :value="Number(item.value)" :disabled="item.disabled" />
+              <el-option
+                v-for="item in dict.type.dev_list_type"
+                :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-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 functionOptions" :key="item.id" :label="item.name" :value="item.type" />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="item.type !== 2 && item.type !== 4" label="连接方式："
+          <el-form-item
+            v-if="item.type !== 2 && item.type !== 4"
+            label="连接方式："
             :prop="`typeList.${index}.connectType`"
-            :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
+            :rules="{required: true, message: '请选择连接方式', trigger: 'change'}"
+          >
             <el-select v-model="item.connectType" placeholder="请选择连接方式">
-              <el-option v-for="item in dict.type.dev_connect_type" :key="item.value" :label="item.label"
-                :value="Number(item.value)" />
+              <el-option
+                v-for="item in dict.type.dev_connect_type"
+                :key="item.value"
+                :label="item.label"
+                :value="Number(item.value)"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item v-if="item.type === 1" label="引导页：" :prop="`typeList.${index}.guideUrl`"
-            :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}">
+          <el-form-item
+            v-if="item.type === 1"
+            label="引导页："
+            :prop="`typeList.${index}.guideUrl`"
+            :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}"
+          >
             <el-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
           </el-form-item>
           <el-row>
             <el-col :span="12">
-              <el-form-item :label="item.type === 1 || 3 ? '连接引导页：' : '开机引导图'"
+              <el-form-item
+                :label="item.type === 1 || 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" />
+                :rules="{ required: true, message: '请上传开机引导图片', trigger: 'change'}"
+              >
+                <Upload
+                  listType="picture-card"
+                  :url="item.icon1"
+                  @upload="handleUploadIcon($event, index, 'icon1')"
+                  :disabled="disabled"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="item.type === 1 || item.type === 3">
-              <el-form-item label="配对键引导图：" :prop="`typeList.${index}.icon2`" style="float:right"
-                :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}">
-                <Upload listType="picture-card" :url="item.icon2"
-                  @upload="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
+              <el-form-item
+                label="配对键引导图："
+                :prop="`typeList.${index}.icon2`"
+                style="float:right"
+                :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}"
+              >
+                <Upload
+                  listType="picture-card"
+                  :url="item.icon2"
+                  @upload="handleUploadIcon($event, index, 'icon2')"
+                  :disabled="disabled"
+                />
               </el-form-item>
             </el-col>
           </el-row>
-          <el-form-item v-if="item.type === 1" label="引导页内容：" :prop="`typeList.${index}.guidePageContent`"
-            :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}">
+          <el-form-item
+            v-if="item.type === 1"
+            label="引导页内容："
+            :prop="`typeList.${index}.guidePageContent`"
+            :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}"
+          >
             <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(item.type, index)" />
+          <el-link
+            class="el-icon-close"
+            v-if="form.typeList.length > 1"
+            :underline="false"
+            @click="getDelete(item.type, index)"
+          />
         </div>
       </Draggable>
-      <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
-        <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
-      </el-form-item>
     </el-form>
+    <div class="form-btn">
+      <el-button @click="getCancel">取消</el-button>
+      <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
 import { functionList } from "@/api/device/function";
-import { category } from '../mixin/index'
+import { category } from "../mixin/index";
 import Upload from "@/components/Upload/index";
-import Editor from "@/components/Editor/index"
-import Draggable from 'vuedraggable'
+import Editor from "@/components/Editor/index";
+import Draggable from "vuedraggable";
 
 export default {
-  dicts: ['dev_upgrade_type', 'hot_yes_no', 'dev_list_type', 'dev_connect_type', 'dev_manu_facturer'],
+  dicts: [
+    "dev_upgrade_type",
+    "hot_yes_no",
+    "dev_list_type",
+    "dev_connect_type",
+    "dev_manu_facturer",
+  ],
   mixins: [category],
   components: {
     Upload,
     Editor,
-    Draggable
+    Draggable,
   },
   data() {
     return {
@@ -143,60 +216,78 @@ export default {
       functionOptions: [],
       // 表单
       form: {
-        typeList: [{
-          functionList: [],
-        }],
+        typeList: [
+          {
+            functionList: [],
+          },
+        ],
       },
       // 表单验证
       rules: {
-        clientType: [{
-          required: true,
-          message: "请输入设备型号",
-          trigger: "blur",
-        }],
-        name: [{
-          required: true,
-          message: "请输入设备名称",
-          trigger: "blur",
-        }],
-        firstVersion: [{
-          required: true,
-          message: "请输入初始版本号",
-          trigger: "blur",
-        }],
-        upgradeType: [{
-          required: true,
-          message: "请选择升级方式",
-          trigger: "change",
-        }],
-        isHot: [{
-          required: true,
-          message: "是否热门",
-          trigger: "change",
-        }],
-        categoryId: [{
-          required: true,
-          message: "请选择设备类型",
-          trigger: "change",
-        }],
-        img: [{
-          required: true,
-          message: "请上传在线图片",
-          trigger: "change",
-        }],
-        offlineImg: [{
-          required: true,
-          message: "请上传离线图片",
-          trigger: "change"
-        }]
+        clientType: [
+          {
+            required: true,
+            message: "请输入设备型号",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入设备名称",
+            trigger: "blur",
+          },
+        ],
+        firstVersion: [
+          {
+            required: true,
+            message: "请输入初始版本号",
+            trigger: "blur",
+          },
+        ],
+        upgradeType: [
+          {
+            required: true,
+            message: "请选择升级方式",
+            trigger: "change",
+          },
+        ],
+        isHot: [
+          {
+            required: true,
+            message: "是否热门",
+            trigger: "change",
+          },
+        ],
+        categoryId: [
+          {
+            required: true,
+            message: "请选择设备类型",
+            trigger: "change",
+          },
+        ],
+        img: [
+          {
+            required: true,
+            message: "请上传在线图片",
+            trigger: "change",
+          },
+        ],
+        offlineImg: [
+          {
+            required: true,
+            message: "请上传离线图片",
+            trigger: "change",
+          },
+        ],
       },
     };
   },
   created() {
     // 权限列表
     functionList().then((res) => {
-      if (res.data.code === 0) {
-        this.functionOptions = res.data.data;
+      if (res.code === 0) {
+        this.functionOptions = res.data;
       }
     });
   },
@@ -211,11 +302,11 @@ export default {
         deviceDetail({
           id: this.$route.query.id,
         }).then((res) => {
-          if (res.data.code === 0) {
-            this.form = res.data.data
-            this.form.typeList.map(i => {
-              this.dict.type.dev_list_type[i.type - 1].disabled = true
-            })
+          if (res.code === 0) {
+            this.form = res.data;
+            this.form.typeList.map((i) => {
+              this.dict.type.dev_list_type[i.type - 1].disabled = true;
+            });
           }
         });
       }
@@ -223,7 +314,9 @@ export default {
 
     // 上传设备图片
     handleUploadImg(e, key) {
-      key === 'online' ? this.form.img = e.file : this.form.offlineImg = e.file
+      key === "online"
+        ? (this.form.img = e.file)
+        : (this.form.offlineImg = e.file);
     },
 
     // 上传设备图标
@@ -269,7 +362,7 @@ export default {
             deviceEdit(this.form).then((res) => {
               if (res.code === 0) {
                 this.$message.success("修改成功！");
-                this.getCancel()
+                this.getCancel();
               }
             });
           } else {
@@ -277,7 +370,7 @@ export default {
             deviceAdd(this.form).then((res) => {
               if (res.code === 0) {
                 this.$message.success("提交成功！");
-                this.getCancel()
+                this.getCancel();
               }
             });
           }

src/views/device/list/index.vue

@@ -168,7 +168,7 @@ export default {
         type: 'warning'
       }).then(() => {
         deviceDelete(id).then(res => {
-          if (res.data.code === 0) {
+          if (res.code === 0) {
             this.getList()
             this.$message.success('删除成功！')
           }