设备大类

src/views/device/class/detail.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class='app-container'>
+    <el-form :model="form" ref="form" :rules="rules" label-width="auto">
+      <el-form-item label="大类名称：">
+        <el-input v-model="form.name" placeholder="请输入大类名称" />
+      </el-form-item>
+      <el-form-item label="设备分类：">
+        <el-select v-model="form.categoryId" placeholder="请选择设备分类">
+          <el-option v-for="item in categoryOptions" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备类型：">
+        <el-select v-model="form.deviceType" 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-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-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-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-input v-model="form.user" placeholder="请输入指定用户" />
+      </el-form-item>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="在线图片：">
+            <Upload listType="picture-card" :url="form.img" @upload="upload($event, 'img')" />
+          </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>
+        </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-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-select>
+        </el-form-item>
+        <el-form-item v-if="i.categorytype == 2" label="连接方式：">
+          <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-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>
+          </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>
+          </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>
+      </div>
+    </el-form>
+    <div>
+      <el-button>取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { devList } 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: [{}]
+      },
+      // 校验
+      rules: {},
+      // 设备列表
+      devOptions: [],
+      // 可见用户
+      pushOptions: [{
+        value: 1,
+        label: '全部'
+      }, {
+        value: 3,
+        label: '指定'
+      }],
+      // 设备连接
+      connectOptions: [{
+        value: 2,
+        label: 'UPnP'
+      }, {
+        value: 3,
+        label: 'MQTT'
+      }],
+      // 只读
+      disabled: false
+    }
+  },
+  mounted() {
+    this.getDevList()
+    if (this.form.id) {
+      this.getDetail()
+    }
+  },
+  methods: {
+    // 详情
+    getDetail() {
+      detail(this.form.id).then(res => {
+        if (res.code === 0) {
+          // this.form.typeList.map((i) => {
+          //     this.devModeOptions[i.type - 1].disabled = true;
+          //   });
+        }
+      })
+    },
+
+    // 设备列表
+    getDevList() {
+      let type = this.form.id ? 2 : 1
+      devList(type).then(res => {
+        if (res.code === 0) {
+          this.devOptions = res.data
+        }
+      })
+    },
+
+    // 新增子表单
+    getAdd() {
+      this.form.typeList.push({})
+    },
+
+    // 修改设备模式
+    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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 550px;
+}
+
+.sub-form {
+  position: relative;
+  border: 1px solid #e8e8e8;
+  padding: 25px 25px 0 0;
+  margin-bottom: 20px;
+
+  .close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+}
+</style>

src/views/device/class/index.vue

@@ -1,180 +1,152 @@
 <template>
-  <div class="app-container">
+  <div class='app-container'>
     <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini" @submit.native.prevent>
+    <el-form inline size="mini">
+      <el-form-item label="大类名称：">
+        <el-input v-model="form.name" placeholder="请输入大类名称" />
+      </el-form-item>
+      <el-form-item label="设备分类：">
+        <el-select v-model="form.categoryId" placeholder="请选择设备分类">
+          <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-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-option v-for="item in yesOrNoOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
-          v-hasPermi="['device:category:add']">新增</el-button>
+        <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-form-item>
     </el-form>
-
-    <!-- 表格 -->
+    <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
-      <el-table-column label="分类ID" prop="id" align="center" />
-      <el-table-column label="分类名称" prop="name" align="center" />
-      <el-table-column label="状态" align="center">
+      <el-table-column type="selection" />
+      <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-tag :type="scope.row.status === 1 ? '' : 'danger'">{{ selectDictLabel(statusOptions, scope.row.status)
-          }}</el-tag>
+          <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="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" />
+      <el-table-column label="创建时间" prop="createTime" align="center" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getChange(scope.row)" v-hasPermi="['device:category:edit']">
-            编辑
-          </el-button>
-          <el-button type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['device:category:delete']">
-            删除
-          </el-button>
+          <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
+          <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="delete" @click="getDelete(scope.row)">删除</el-button>
+          </span>
         </template>
       </el-table-column>
     </el-table>
-
-    <!-- 新增弹窗 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="getCancel">
-      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
-        <el-form-item label="分类名称：" prop="name">
-          <el-input v-model="form.name" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="启用状态：" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="2">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button size="mini" @click="getCancel">取消</el-button>
-        <el-button type="primary" size="mini" @click="getCreate">确定</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  list,
-  create,
-  edit,
-  remove,
-} from "@/api/device/class";
+import { list, change } from '@/api/device/class'
+import { devCategoryMixin, devMixin, onOrOffMixin, devTypeMixin, yesOrNoMixin } from '@/mixin/index'
 export default {
+  mixins: [devCategoryMixin, devMixin, onOrOffMixin, devTypeMixin, yesOrNoMixin],
   data() {
     return {
       // 遮罩层
-      loading: true,
-      // 表格数据
-      tableData: [],
-      // 弹窗
-      dialogVisible: false,
-      title: "",
-      // 提交表单
+      loading: false,
+      // 表单
       form: {
-        name: '',
-        status: 1
+        pageNum: 1,
+        pageSize: 10
       },
-      // 表单验证
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入分类名称",
-            trigger: "blur",
-          },
-        ],
-        status: [
-          {
-            required: true,
-            message: "请选择状态",
-            trigger: "change",
-          },
-        ],
-      },
-      // 设备状态
-      statusOptions: [{
-        value: 1,
-        label: '正常'
-      }, {
-        value: 2,
-        label: '停用'
-      }]
-    };
+      // 列表
+      tableData: []
+    }
   },
   mounted() {
-    this.getList();
+    this.getList()
   },
   methods: {
-    // 分类列表
+    // 列表
     getList() {
-      this.loading = true;
-      list().then((res) => {
+      this.loading = true
+      list(this.form).then(res => {
         if (res.code === 0) {
-          this.tableData = res.data;
-          this.loading = false;
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
         }
-      });
+      })
     },
 
-    // 新增 / 编辑按钮
-    getChange(row) {
-      this.dialogVisible = true;
-      this.form = row ? row : {
-        name: '',
-        status: 1
-      };
-      this.title = row ? "编辑" : "新增";
+    // 搜索
+    getSearch() {
+
     },
 
-    // 取消
-    getCancel() {
-      this.$refs.form.clearValidate();
-      this.dialogVisible = false;
+    // 重置
+    getRefresh() {
+
     },
 
-    // 确定
-    getCreate() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (this.form.id) {
-            // 编辑
-            edit(this.form).then((res) => {
-              if (res.code === 0) {
-                this.$message.success("修改成功！");
-                this.dialogVisible = false;
-                this.getList();
-              }
-            });
-          } else {
-            // 新增
-            create(this.form).then((res) => {
-              if (res.code === 0) {
-                this.$message.success("创建成功！");
-                this.dialogVisible = false;
-                this.getList();
-              }
-            });
-          }
-        } else {
-          return false;
+    // 新增
+    getDetail(id, boolean) {
+      this.$router.push({
+        path: '/device/class/detail',
+        query: {
+          id: id,
+          boolean: boolean
         }
-      });
+      })
+    },
+
+    // 上架 下架 删除
+    getChange(id, status, title) {
+      change(id, status).then(res => {
+        if (res.code === 0) {
+          this.$message.success(`${title}成功！`)
+          this.getList()
+        }
+      })
     },
 
     // 删除
-    getDelete(id) {
-      this.$confirm("确定要删除?", {
-        type: "warning",
+    getDelete(e) {
+      this.$confirm(`是否删除${e.name}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.getChange(e.id, 0, '删除')
       })
-        .then(() => {
-          remove(id).then((res) => {
-            if (res.code === 0) {
-              this.getList();
-              this.$message.success("删除成功！");
-            }
-          });
-        })
-        .catch(() => { });
     },
-  },
-};
+
+    // 字典翻译
+    categoryIdFormatter(row) {
+      return this.selectDictLabel(this.categoryOptions, row.categoryId)
+    },
+    typeFormatter(row) {
+      return this.selectDictLabel(this.devTypeOptions, row.deviceType)
+    },
+    deviceFormatter(row) {
+      return row.deviceIds.split(',').map(i => this.selectDictLabel(this.devOptions, i))
+    },
+    statusFormatter(row) {
+      return this.selectDictLabel(this.onOrOffOptions, row.status)
+    }
+  }
+}
 </script>