设备大类

src/views/device/class/detail.vue

@@ -1,104 +1,130 @@
 <template>
   <div class='app-container'>
-    <el-form :model="form" ref="form" :rules="rules" label-width="auto">
-      <el-form-item label="大类名称：">
+    <el-form :model="form" ref="form" :rules="rules" label-width="auto" :disabled="disabled">
+      <el-form-item label="大类名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入大类名称" />
       </el-form-item>
-      <el-form-item label="设备分类：">
+      <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类">
-          <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="设备类型：">
-        <el-select v-model="form.deviceType" placeholder="请选择设备类型">
+      <el-form-item label="设备类型：" prop="type">
+        <el-select v-model="form.type" placeholder="请选择设备类型">
           <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="是否热门：">
+      <el-form-item label="是否热门：" prop="isHot">
         <el-select v-model="form.isHot" placeholder="请选择是否热门">
           <el-option v-for="item in yesOrNoOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
-      <el-form-item label="关联设备：">
-        <el-select v-model="form.deviceIds" placeholder="请选择要关联的设备">
+      <el-form-item label="关联设备：" prop="deviceIds">
+        <el-select v-model="form.deviceIds" filterable multiple placeholder="请选择关联的设备">
           <el-option v-for="item in devOptions" :key="item.clientTypeId" :value="item.clientTypeId" :label="item.name" />
         </el-select>
       </el-form-item>
-      <el-form-item label="可见用户：">
+      <el-form-item label="可见用户：" prop="userType">
         <el-select v-model="form.userType" placeholder="请选择可见用户">
           <el-option v-for="item in pushOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="form.userType === 3" label="指定用户：">
+      <el-form-item v-if="form.userType === 3" label="指定用户：" prop="user">
         <el-input v-model="form.user" placeholder="请输入指定用户" />
       </el-form-item>
-      <el-row :gutter="10">
+      <el-row :gutter="70">
         <el-col :span="12">
-          <el-form-item label="在线图片：">
-            <Upload listType="picture-card" :url="form.img" @upload="upload($event, 'img')" />
+          <el-form-item label="在线图片：" prop="img">
+            <Upload listType="picture-card" :url="form.img" @upload="upload($event, 'img')" :disabled="disabled" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="离线图片：">
-            <Upload listType="picture-card" :url="form.offlineImg" @upload="upload($event, 'offlineImg')" />
+          <el-form-item label="离线图片：" prop="offlineImg">
+            <Upload listType="picture-card" :url="form.offlineImg" @upload="upload($event, 'offlineImg')"
+              :disabled="disabled" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-button type="primary" icon="el-icon-plus" @click="getAdd">新增</el-button>
-      <div class="sub-form" v-for="(i, index) in form.typeList" :key="index">
-        <el-link class="close" v-if="form.typeList.length > 1" :underline="false" icon="el-icon-close" />
-        <el-form-item label="设备模式：">
-          <el-select v-model="i.categorytype" placeholder="请选择设备模式" @change="getTypeChange(i)">
-            <el-option v-for="item in devModeOptions" :key="item.value" :value="item.value" :label="item.label" :disabled="item.disabled" />
+      <el-button v-if="disabled === false && form.typeList.length < 4" type="primary" icon="el-icon-plus"
+        @click="getAdd">新增</el-button>
+      <div class="sub-form" v-for="(i, index) in form.typeList" :key="i.id">
+        <el-form-item label="设备模式：" :prop="`typeList.${index}.type`"
+          :rules="{ required: true, message: '请选择设备模式', trigger: 'change' }">
+          <el-select v-model="i.type" placeholder="请选择设备模式" @change="getTypeChange(i)">
+            <el-option v-for="item in devModeOptions" :key="item.value" :value="item.value" :label="item.label"
+              :disabled="item.disabled" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="i.categorytype !== 3" label="功能权限：">
-          <el-select v-model="i.functionId" placeholder="请选择功能权限">
-            <el-option v-for="item in devFucOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-form-item v-if="i.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
+          :rules="{ type: 'array', required: true, message: '请选择功能权限', trigger: 'change' }">
+          <el-select v-model="i.functionList" multiple placeholder="请选择功能权限">
+            <el-option v-for="item in devFucOptions" :key="item.value" :value="item.value.toString()"
+              :label="item.label" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="i.categorytype == 2" label="连接方式：">
+        <el-form-item v-if="i.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`"
+          :rules="{ required: true, message: '请选择连接方式', trigger: 'change' }">
           <el-select v-model="i.connectType" placeholder="请选择连接方式">
             <el-option v-for="item in connectOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
-        <el-row :gutter="30">
+        <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="[1, 3].includes(i.categorytype) ? '连接引导图：' : '开机引导图：'">
-              <Upload listType="picture-card" :url="i.icon1" @upload="upload($event, i, 'icon1')" />
+            <el-form-item :label="[1, 3].includes(i.type) ? '连接引导图：' : '开机引导图：'" :prop="`typeList.${index}.icon1`"
+              :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
+              <Upload listType="picture-card" :url="i.icon1" @upload="upload($event, 'icon1', index)"
+                :disabled="disabled" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="配对引导图：">
-              <Upload listType="picture-card" :url="i.icon2" @upload="upload($event, i, 'icon2')" />
+            <el-form-item label="配对引导图：" :prop="`typeList.${index}.icon2`"
+              :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
+              <Upload listType="picture-card" :url="i.icon2" @upload="upload($event, 'icon2', index)"
+                :disabled="disabled" />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item v-if="[1, 3].includes(i.categorytype)" label="引导页：">
-          <Editor v-model="i.guidePageContent" :min-height="250" />
+        <el-form-item v-if="[1, 3].includes(i.type)" label="引导页：">
+          <Editor v-model="i.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(i.type, index)" :disabled="disabled" />
       </div>
     </el-form>
     <div>
-      <el-button>取消</el-button>
-      <el-button type="primary">确定</el-button>
+      <el-button @click="close">取消</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import { devList } from '@/api/device/class'
+import { devList, submit, detail } from '@/api/device/class'
 import { devModeMixin, yesOrNoMixin, devTypeMixin, devCategoryMixin, devFucMixin } from '@/mixin/index'
 export default {
   mixins: [devModeMixin, yesOrNoMixin, devTypeMixin, devCategoryMixin, devFucMixin],
   data() {
     return {
+      // 表单
       form: {
         id: this.$route.query.id,
-        typeList: [{}]
+        deviceIds: [],
+        typeList: [{
+          functionList: []
+        }]
       },
       // 校验
-      rules: {},
+      rules: {
+        name: [{ required: true, message: '请输入大类名称', trigger: 'blur' }],
+        categoryId: [{ required: true, message: '请选择设备分类', trigger: 'chang' }],
+        type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+        isHot: [{ required: true, message: '请选择是否热门', trigger: 'change' }],
+        deviceIds: [{ required: true, message: '请选择关联的设备', trigger: 'change' }],
+        userType: [{ required: true, message: '请选择可见用户', trigger: 'change' }],
+        user: [{ required: true, message: '请输入指定用户', trigger: 'blur' }],
+        img: [{ required: true, message: '请上传在线图片', trigger: 'change' }],
+        offlineImg: [{ required: true, message: '请上传离线图片', trigger: 'change' }],
+      },
       // 设备列表
       devOptions: [],
       // 可见用户
@@ -118,7 +144,7 @@ export default {
         label: 'MQTT'
       }],
       // 只读
-      disabled: false
+      disabled: Boolean(this.$route.query.boolean)
     }
   },
   mounted() {
@@ -132,17 +158,21 @@ export default {
     getDetail() {
       detail(this.form.id).then(res => {
         if (res.code === 0) {
-          // this.form.typeList.map((i) => {
-          //     this.devModeOptions[i.type - 1].disabled = true;
-          //   });
+          this.form = res.data
+          this.form.deviceIds = res.data.deviceIds.split(',')
+          this.form.typeList.map((i) => {
+            this.devModeOptions[i.type - 1].disabled = true;
+          })
         }
       })
     },
 
     // 设备列表
     getDevList() {
-      let type = this.form.id ? 2 : 1
-      devList(type).then(res => {
+      devList({
+        type: 2,
+        id: this.form.id
+      }).then(res => {
         if (res.code === 0) {
           this.devOptions = res.data
         }
@@ -151,16 +181,71 @@ export default {
 
     // 新增子表单
     getAdd() {
-      this.form.typeList.push({})
+      this.form.typeList.push({
+        type: null,
+        functionList: [],
+        connectType: null,
+        icon1: '',
+        icon2: '',
+        guidePageContent: ''
+      })
+    },
+
+    // 删除子表单
+    getDelete(type, index) {
+      this.form.typeList.splice(index, 1)
+      this.devModeOptions.find(i => i.value == type).disabled = false
     },
 
     // 修改设备模式
     getTypeChange(i) {
-      // for (let index in this.devModeOptions) {
-      //   this.devModeOptions[index].disabled = false
-      // }
-      let index = this.devModeOptions.findIndex(j => j.value == i.categorytype)
-      this.devModeOptions[index].disabled = true
+      for (let key in this.devModeOptions) {
+        this.devModeOptions[key].disabled = false
+      }
+      // 选中的设备模式禁止再选
+      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
+        }
+      })
+    },
+
+    // 上传图片
+    upload(e, key, index) {
+      if (index == undefined) {
+        this.form[key] = e.file
+      } else {
+        this.form.typeList[index][key] = e.file
+      }
+    },
+
+    // 提交
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.deviceIds = this.form.deviceIds.join(',')
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.close()
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    },
+
+    // 取消
+    close() {
+      this.$tab.closeOpenPage('/device/class')
     }
   }
 }
@@ -168,16 +253,16 @@ export default {
 
 <style lang="scss" scoped>
 .el-form {
-  width: 550px;
+  width: 580px;
 }
 
 .sub-form {
   position: relative;
   border: 1px solid #e8e8e8;
-  padding: 25px 25px 0 0;
+  padding: 25px 25px 0 25px;
   margin-bottom: 20px;
 
-  .close {
+  .el-icon-close {
     position: absolute;
     top: 5px;
     right: 5px;

src/views/device/class/index.vue

@@ -3,20 +3,20 @@
     <!-- 搜索 -->
     <el-form inline size="mini">
       <el-form-item label="大类名称：">
-        <el-input v-model="form.name" placeholder="请输入大类名称" />
+        <el-input v-model="form.name" placeholder="请输入大类名称" clearable />
       </el-form-item>
       <el-form-item label="设备分类：">
-        <el-select v-model="form.categoryId" placeholder="请选择设备分类">
+        <el-select v-model="form.categoryId" placeholder="请选择设备分类" clearable>
           <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="当前状态：">
-        <el-select v-model="form.status" placeholder="请选择当前状态">
+        <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
           <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="是否热门：">
-        <el-select v-model="form.isHot" placeholder="请选择是否热门">
+        <el-select v-model="form.isHot" placeholder="请选择是否热门" clearable>
           <el-option v-for="item in yesOrNoOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
@@ -24,23 +24,21 @@
         <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="getDetail()">新增</el-button>
-        <el-button type="primary">批量上架</el-button>
-        <el-button type="primary">批量下架</el-button>
+        <el-button type="primary" :disabled="ids === ''" @click="getChange(ids, 2, '批量上架')">批量上架</el-button>
+        <el-button type="primary" :disabled="ids === ''" @click="getChange(ids, 2, '批量下架')">批量下架</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading">
-      <el-table-column type="selection" />
+    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelection">
+      <el-table-column type="selection" align="center" />
       <el-table-column label="大类Id" prop="id" align="center" show-overflow-tooltip />
       <el-table-column label="大类名称" prop="name" align="center" />
       <el-table-column label="设备图片" align="center" width="100px">
-        <template slot-scope="scope">
-          <el-image :src="scope.row.img" />
-        </template>
+        <template slot-scope="scope"><el-image :src="scope.row.img" /></template>
       </el-table-column>
       <el-table-column label="设备分类" prop="categoryId" align="center" :formatter="categoryIdFormatter" />
-      <el-table-column label="设备类型" prop="deviceType" align="center" :formatter="typeFormatter" />
-      <el-table-column label="是否热门" prop="isHot" align="center" />
+      <el-table-column label="设备类型" prop="type" align="center" :formatter="typeFormatter" />
+      <el-table-column label="是否热门" prop="isHot" align="center" :formatter="isHotFormatter" />
       <el-table-column label="关联设备" prop="deviceIds" align="center" :formatter="deviceFormatter" show-overflow-tooltip />
       <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
       <el-table-column label="更新时间" prop="updateTime" align="center" />
@@ -51,7 +49,7 @@
           <el-button v-if="scope.row.status === 1" type="text" @click="getChange(scope.row.id, 2, '下架')">下架</el-button>
           <span v-else style="margin-left: 10px;">
             <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
-            <el-button type="text" @click="getChange(scope.row.width, 1, '上架')">上架</el-button>
+            <el-button type="text" @click="getChange(scope.row.id, 1, '上架')">上架</el-button>
             <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
           </span>
         </template>
@@ -75,7 +73,9 @@ export default {
         pageSize: 10
       },
       // 列表
-      tableData: []
+      tableData: [],
+      // 批量上下架
+      ids: ''
     }
   },
   mounted() {
@@ -96,12 +96,17 @@ export default {
 
     // 搜索
     getSearch() {
-
+      this.form.pageNum = 1
+      this.getList()
     },
 
     // 重置
     getRefresh() {
-
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
     },
 
     // 新增
@@ -115,9 +120,22 @@ export default {
       })
     },
 
+    // 多选
+    handleSelection(e) {
+      if (e.length > 0) {
+        let arr = []
+        e.filter(i => {
+          arr.push(i.id)
+          this.ids = arr.join(',')
+        })
+      } else {
+        this.ids = ''
+      }
+    },
+
     // 上架 下架 删除
-    getChange(id, status, title) {
-      change(id, status).then(res => {
+    getChange(ids, status, title) {
+      change(ids, status).then(res => {
         if (res.code === 0) {
           this.$message.success(`${title}成功！`)
           this.getList()
@@ -139,7 +157,10 @@ export default {
       return this.selectDictLabel(this.categoryOptions, row.categoryId)
     },
     typeFormatter(row) {
-      return this.selectDictLabel(this.devTypeOptions, row.deviceType)
+      return this.selectDictLabel(this.devTypeOptions, row.type)
+    },
+    isHotFormatter(row) {
+      return this.selectDictLabel(this.yesOrNoOptions, row.isHot)
     },
     deviceFormatter(row) {
       return row.deviceIds.split(',').map(i => this.selectDictLabel(this.devOptions, i))