设备管理 设备列表 新增 批量上下架 修改设备参数

src/views/device/list/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" :rules="rules" ref="form" label-width="100px" size="small" :disabled="disabled">
+    <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small" :disabled="disabled">
       <el-form-item label="设备型号：" prop="clientType">
         <el-input v-model="form.clientType" placeholder="请输入设备型号" />
       </el-form-item>
@@ -12,46 +12,56 @@
       </el-form-item>
       <el-form-item label="升级方式：" prop="upgradeType">
         <el-select v-model="form.upgradeType" placeholder="请选择升级方式">
-          <el-option v-for="item in upgradeTypeOptions" :key="item.value" :label="item.label"
-            :value="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">
         <el-input v-model="form.filter" placeholder="请输入设备过滤内容"></el-input>
       </el-form-item>
-      <el-form-item label="引导页：" prop="guideUrl">
-        <el-input v-model="form.guideUrl" placeholder="请输入引导页网址" />
-      </el-form-item>
       <el-form-item label="制造商：" prop="manufacturer">
         <el-input v-model="form.manufacturer" placeholder="请输入设备制造商" />
       </el-form-item>
-      <el-form-item label="使用分类：" prop="deviceType">
-        <el-select v-model="form.deviceType">
-          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+      <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-select>
       </el-form-item>
-      <el-form-item label="设备分类：" prop="categoryId">
-        <el-select v-model="form.categoryId">
-          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.id" />
+      <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-select>
       </el-form-item>
-      <el-form-item label="设备图片：" prop="img">
-        <Upload listType="picture-card" :url="form.img" @upload="handleUploadImg" :disabled="disabled" />
-      </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" />
+          </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" />
+          </el-form-item>
+        </el-col>
+      </el-row>
       <!-- 子表单 -->
-      <div label-width="100px" style="position: relative">
-        <el-button class="sub-add" 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: '请选择设备类型',
+              message: '请选择设备模式',
               trigger: 'change',
             }">
-            <el-select v-model="item.type" placeholder="请选择设备类型" @change="getTypeChange($event, index)">
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"
-                :disabled="item.disabled" />
+            <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-select>
           </el-form-item>
           <el-form-item v-if="item.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
@@ -61,32 +71,43 @@
                 :value="item.type" />
             </el-select>
           </el-form-item>
-          <el-form-item label="连接方式：" :prop="`typeList.${index}.connectType`"
-          :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
+          <el-form-item v-if="item.type !== 2 && item.type !== 4" label="连接方式：" :prop="`typeList.${index}.connectType`"
+            :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
             <el-select v-model="item.connectType" placeholder="请选择连接方式">
-              <el-option v-for="item in connectTypeOptions" :key="item.value" :label="item.label" :value="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-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
+          </el-form-item>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="设备图标：">
-                <Upload listType="picture-card" :url="item.icon1" @upload="handleUploadIcon($event, index, 'icon1')" :disabled="disabled" />
+              <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" />
               </el-form-item>
             </el-col>
-            <el-col :span="12">
-              <el-form-item label-width="auto" style="float:right">
-                <Upload listType="picture-card" :url="item.icon2" @upload="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
+            <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>
             </el-col>
           </el-row>
-          <el-form-item v-if="item.type === 1" label="引导页内容：">
-            <Editor v-model="item.guidePageContent" :min-height="250"/>
+          <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)" />
         </div>
-      </div>
+      </Draggable>
     </el-form>
     <div class="form-btn">
       <el-button size="mini" @click="getCancel">取消</el-button>
@@ -97,133 +118,77 @@
 
 <script>
 import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
-import { categoryList } from "@/api/device/category";
 import { functionList } from "@/api/device/function";
+import { category } from '../mixin/index'
 import Upload from "@/components/Upload/index";
 import Editor from "@/components/Editor/index"
-import { typeMixin, deviceTypeMixin, upgradeTypeMixin } from '../mixin/index';
+import Draggable from 'vuedraggable'
 
 export default {
-  mixins: [typeMixin, deviceTypeMixin, upgradeTypeMixin],
+  dicts: ['dev_upgrade_type', 'hot_yes_no', 'dev_list_type', 'dev_connect_type'],
+  mixins: [category],
   components: {
     Upload,
-    Editor
+    Editor,
+    Draggable
   },
   data() {
     return {
       // 能否编辑
       disabled: false,
-      // 分类列表
-      categoryOptions: [],
       functionOptions: [],
-      connectTypeOptions: [{
-        value: 0,
-        label: 'bt'
-      },{
-        value: 1,
-        label: 'ble'
-      },{
-        value: 2,
-        label: 'upnp'
-      },{
-        value: 3,
-        label: 'mqtt'
-      }],
       // 表单
       form: {
-        typeList: [
-          {
-            type: "",
-            functionList: [],
-            icon1: "",
-            icon2: "",
-          },
-        ],
+        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",
-          },
-        ],
-        filter: [
-          {
-            required: true,
-            message: "请输入设备过滤内容",
-            trigger: "blur",
-          },
-        ],
-        guideUrl: [
-          {
-            required: true,
-            message: "请输入引导页网址",
-            trigger: "blur",
-          },
-        ],
-        manufacturer: [
-          {
-            required: true,
-            message: "请输入设备制造商",
-            trigger: "blur",
-          },
-        ],
-        deviceType: [
-          {
-            required: true,
-            message: "请选择使用分类",
-            trigger: "change",
-          },
-        ],
-        categoryId: [
-          {
-            required: true,
-            message: "请选择设备分类",
-            trigger: "change",
-          },
-        ],
-        img: [
-          {
-            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() {
-    // 分类列表
-    categoryList({
-      status: 1,
-    }).then((res) => {
-      if (res.data.code === 0) {
-        this.categoryOptions = res.data.data;
-      }
-    });
     // 权限列表
     functionList().then((res) => {
       if (res.data.code === 0) {
@@ -245,7 +210,7 @@ export default {
           if (res.data.code === 0) {
             this.form = res.data.data
             this.form.typeList.map(i => {
-              this.typeOptions[i.type - 1].disabled = true
+              this.dict.type.dev_list_type[i.type - 1].disabled = true
             })
           }
         });
@@ -253,8 +218,8 @@ export default {
     },
 
     // 上传设备图片
-    handleUploadImg(e) {
-      this.form.img = e.file;
+    handleUploadImg(e, key) {
+      key === 'online' ? this.form.img = e.file : this.form.offlineImg = e.file
     },
 
     // 上传设备图标
@@ -264,10 +229,10 @@ export default {
 
     // 选中一个设备类型就从数组中去掉
     getTypeChange(e) {
-      for (let i in this.typeOptions) {
-        this.typeOptions[i].disabled = false;
+      for (let i in this.dict.type.dev_list_type) {
+        this.dict.type.dev_list_type[i].disabled = false;
       }
-      this.typeOptions[e - 1].disabled = true;
+      this.dict.type.dev_list_type[e - 1].disabled = true;
     },
 
     // 新增子表单
@@ -283,7 +248,7 @@ export default {
     // 删除子表单
     getDelete(e, index) {
       this.form.typeList.splice(index, 1);
-      this.typeOptions[e - 1].disabled = false;
+      this.dict.type.dev_list_type[e - 1].disabled = false;
     },
 
     // 取消
@@ -323,7 +288,7 @@ export default {
 
 <style lang="scss" scoped>
 .el-form {
-  width: 500px;
+  width: 580px;
 }
 
 .sub-add {
@@ -333,6 +298,7 @@ export default {
 }
 
 .sub-form {
+  // width: 600px;
   position: relative;
   border: 1px solid #e8e8e8;
   padding: 25px 25px 0 0;
@@ -346,7 +312,7 @@ export default {
   }
 }
 
-::v-deep .editor{
+::v-deep .editor {
   background: #000;
 }
 </style>

src/views/device/list/index.vue

@@ -5,29 +5,39 @@
       <el-form-item label="设备名称：">
         <el-input v-model="form.name" placeholder="请输入设备名称" clearable />
       </el-form-item>
+      <el-form-item label="设备型号：">
+        <el-input v-model="form.clientType" placeholder="请输入设备型号" clearable />
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()">新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
+          v-hasPermi="['device:list:add']">新增</el-button>
+        <el-button type="primary" icon="el-icon-top" @click="getChange('', '上架')">批量上架</el-button>
+        <el-button type="primary" icon="el-icon-bottom" @click="getChange('', '下架')">批量下架</el-button>
       </el-form-item>
     </el-form>
     <!-- 表格 -->
-    <el-table :data="tableData" v-loading="loading">
+    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" />
       <el-table-column label="设备ID" prop="id" align="center" />
       <el-table-column label="设备型号" prop="clientType" align="center" />
       <el-table-column label="设备名称" prop="name" align="center" />
       <el-table-column label="设备图片" prop="img" align="center" width="100">
         <template slot-scope="scope">
-          <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]" />
+          <el-image :src="scope.row.img" />
         </template>
       </el-table-column>
-      <el-table-column label="使用分类" prop="deviceType" align="center" :formatter="deviceTypeFormatter" />
-      <el-table-column label="升级方式" prop="upgradeType" align="center" :formatter="upgradeTypeFormatter"/>
+      <el-table-column label="设备类型" prop="categoryName" align="center" />
+      <el-table-column label="是否热门" prop="isHot" align="center" :formatter="hotFormatter" />
+      <el-table-column label="升级方式" prop="upgradeType" align="center" :formatter="upgradeTypeFormatter" />
       <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)">编辑</el-button>
+          <el-button type="text" @click="getChange(scope.row.id)" v-hasPermi="['device:list:edit']">
+            编辑
+          </el-button>
           <el-button type="delete" @click="getDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
@@ -38,10 +48,9 @@
 </template>
 
 <script>
-import { listPage, deviceDelete } from '@/api/device/list'
-import { deviceTypeMixin, upgradeTypeMixin } from '../mixin/index'
+import { listPage, deviceDelete, batchChange } from '@/api/device/list'
 export default {
-  mixins: [deviceTypeMixin, upgradeTypeMixin],
+  dicts: ['hot_yes_no', 'dev_list_version'],
   data() {
     return {
       // 遮罩层
@@ -50,11 +59,14 @@ export default {
       tableData: [],
       // 总数据
       total: 0,
-      // 表单
+      // 搜索表单
       form: {
-        name: '',
         pageNum: 1,
         pageSize: 10
+      },
+      // 批量上下架
+      changeForm: {
+        ids: ''
       }
     }
   },
@@ -91,12 +103,32 @@ export default {
 
     // 新增 / 编辑 / 查看
     getChange(id, key) {
-      this.$router.push({
-        path: `/device/list/detail`,
-        query: {
-          id: id,
-          key: key
-        }
+      if (key === '上架' || key === '下架') {
+        this.changeForm.type = key === '上架' ? 1 : 2
+        batchChange(this.changeForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success(`${key}成功！`)
+            this.getList()
+          }
+        })
+      } else {
+        this.$router.push({
+          path: `/device/list/detail`,
+          query: {
+            id: id,
+            key: key
+          }
+        })
+      }
+    },
+
+    // 多选
+    handleSelectionChange(e) {
+      let arr = []
+      e.filter(i => {
+        arr.push(i.id)
+        // 拼接空字符串并未删掉 待处理
+        this.changeForm.ids = arr.join(',')
       })
     },
 
@@ -115,11 +147,12 @@ export default {
     },
 
     // 字典翻译
-    deviceTypeFormatter(row) {
-      return this.selectDictLabel(this.deviceTypeOptions, row.deviceType)
+    hotFormatter(row) {
+      return this.selectDictLabel(this.dict.type.hot_yes_no, row.isHot)
     },
+
     upgradeTypeFormatter(row) {
-      return this.selectDictLabel(this.upgradeTypeOptions, row.upgradeType)
+      return this.selectDictLabel(this.dict.type.dev_list_version, row.upgradeType)
     }
   }
 }