Merge branch 'develop/3.1.2' into test

# Conflicts:
#	src/views/device/list/detail.vue

src/api/device/category.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 查询分类列表
+export function list(query) {
+  return request({
+    url: `/device/manage/category/list`,
+    method: 'get',
+    params: query
+  })
+}
+
+// 添加设备类型
+export function create(data) {
+  return request({
+    url: `/device/manage/category/add`,
+    method: 'post',
+    data: data
+  })
+}
+
+// 编辑设备类型
+export function edit(data) {
+  return request({
+    url: `/device/manage/category/edit`,
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除
+export function remove(id) {
+  return request({
+    url: `/device/manage/category/${id}`,
+    method: 'delete'
+  })
+}

src/api/device/class.js

@@ -1,36 +1,35 @@
 import request from '@/utils/request'
 
-// 查询分类列表
-export function list(query) {
+// 列表
+export function list(data) {
   return request({
-    url: `/device/manage/category/list`,
-    method: 'get',
-    params: query
+    url: `/admin/device/same/list/page`,
+    method: 'post',
+    data
   })
 }
 
-// 添加设备类型
-export function create(data) {
+// 上架 下架 删除
+export function change(id, status) {
   return request({
-    url: `/device/manage/category/add`,
-    method: 'post',
-    data: data
+    url: `/admin/device/same/hitOrSold/${id}/${status}`,
+    method: 'get'
   })
 }
 
-// 编辑设备类型
-export function edit(data) {
+// 新增
+export function submit(data) {
   return request({
-    url: `/device/manage/category/edit`,
+    url: `/admin/device/same/saveOrUpdate`,
     method: 'post',
-    data: data
+    data
   })
 }
 
-// 删除
-export function remove(id) {
+// 全部产品 和 剔除产品
+export function devList(type) {
   return request({
-    url: `/device/manage/category/${id}`,
-    method: 'delete'
+    url: `/admin/device/same/getIsExistclientTypeList/${type}`,
+    method: 'get'
   })
 }

src/mixin/index.js

@@ -1,19 +1,14 @@
-import {
-  getClientTypeList
-} from '@/api/device/version'
+import { getClientTypeList } from '@/api/device/version'
 
-import {
-  platform,
-  audioType
-} from '@/api/music/platform'
+import { platform, audioType } from '@/api/music/platform'
 
-import {
-  options
-} from '@/api/music/radio'
+import { options } from '@/api/music/radio'
 
-import {
-  channelTemplate
-} from '@/api/operation/channel'
+import { channelTemplate } from '@/api/operation/channel'
+
+import { list as categoryList } from '@/api/device/category'
+
+import { list as functionList } from '@/api/device/function'
 
 // 设备列表
 const devMixin = {
@@ -40,18 +35,95 @@ const devMixin = {
 const devModeMixin = {
   data() {
     return {
-      modeOptions: [{
+      devModeOptions: [{
         value: 1,
-        label: '蓝牙'
+        label: '蓝牙',
+        disabled: false
       }, {
         value: 2,
-        label: 'WIFI'
+        label: 'WIFI',
+        disabled: false
       }, {
         value: 3,
-        label: '传统蓝牙'
+        label: '传统蓝牙',
+        disabled: false
       }, {
         value: 4,
-        label: '4G'
+        label: '4G',
+        disabled: false
+      }]
+    }
+  }
+}
+
+// 设备分类
+const devCategoryMixin = {
+  data() {
+    return {
+      categoryOptions: []
+    }
+  },
+  mounted() {
+    categoryList().then(res => {
+      res.data.map(i => {
+        this.categoryOptions.push({
+          value: i.id,
+          label: i.name
+        })
+      })
+    })
+  }
+}
+
+// 设备类型
+const devTypeMixin = {
+  data() {
+    return {
+      devTypeOptions: [{
+        value: 0,
+        label: '音响'
+      }, {
+        value: 1,
+        label: '耳机'
+      }, {
+        value: 2,
+        label: '穿戴'
+      }]
+    }
+  }
+}
+
+// 功能权限
+const devFucMixin = {
+  data() {
+    return {
+      devFucOptions: []
+    }
+  },
+  mounted() {
+    functionList().then(res => {
+      if (res.code === 0) {
+        res.data.map(i => {
+          this.devFucOptions.push({
+            value: i.id,
+            label: i.name
+          })
+        })
+      }
+    })
+  }
+}
+
+// 是否
+const yesOrNoMixin = {
+  data() {
+    return {
+      yesOrNoOptions: [{
+        value: 0,
+        label: '否'
+      }, {
+        value: 1,
+        label: '是'
       }]
     }
   }
@@ -550,6 +622,10 @@ const systemMixin = {
 export {
   devMixin,
   devModeMixin,
+  devCategoryMixin,
+  devTypeMixin,
+  devFucMixin,
+  yesOrNoMixin,
   serviceTimeMixin,
   serviceTypeMixin,
   isFreeMixin,

src/router/index.js

@@ -205,15 +205,15 @@ export const dynamicRoutes = [{
   path: '/device',
   component: Layout,
   hidden: true,
-  permissions: ['device:category:list'],
-  name: 'category',
+  permissions: ['device:class:list'],
+  name: 'class',
   children: [{
-    path: 'category/detail',
-    component: () => import('@/views/device/category/detail'),
-    name: 'categoryDetail',
+    path: 'class/detail',
+    component: () => import('@/views/device/class/detail'),
+    name: 'classDetail',
     meta: {
       title: '大类详情',
-      activeMenu: '/device/category'
+      activeMenu: '/device/class'
     }
   }]
 },

src/views/device/category/detail.vue

@@ -1,201 +0,0 @@
-<template>
-  <div class='app-container'>
-    <el-form :model="form" ref="form" :rules="rules" label-width="auto">
-      <el-form-item label="大类名称：">
-        <el-input placeholder="请输入大类名称" />
-      </el-form-item>
-      <el-form-item label="设备分类：">
-        <el-select placeholder="请选择设备分类">
-          <el-option v-for="item in classOptions" :key="item.id" :value="item.id" :label="item.name" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备类型：">
-        <el-select placeholder="请选择设备类型">
-          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否热门：">
-        <el-select placeholder="请选择是否热门">
-          <el-option v-for="item in hotOptions" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="关联设备：">
-        <el-select placeholder="请选择要关联的设备">
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="可见用户：">
-        <el-select 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 label="指定用户：">
-        <el-input placeholder="请输入指定用户" />
-      </el-form-item>
-      <el-row :gutter="10">
-        <el-col :span="12">
-          <el-form-item label="在线图片：">
-            <Upload listType="picture-card" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="离线图片：">
-            <Upload listType="picture-card" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-button type="primary" icon="el-icon-plus" @click="getAdd">新增</el-button>
-      <div class="children">
-        <el-form-item label="设备模式：">
-          <el-select placeholder="请选择设备模式">
-            <el-option v-for="item in modeOptions" :key="item.value" :value="item.value" :label="item.label" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="功能权限：">
-          <el-select placeholder="请选择功能权限">
-            <el-option v-for="item in functionOptions" :key="item.id" :value="item.id" :label="item.name" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="连接方式：">
-          <el-select 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="连接引导图：">
-              <Upload listType="picture-card" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="配对引导图：">
-              <Upload listType="picture-card" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="引导页：">
-          <Editor :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 { list as classList } from "@/api/device/class";
-import { list as functionList } from "@/api/device/function";
-import { devModeMixin } from '@/mixin/index'
-export default {
-  mixins: [devModeMixin],
-  data() {
-    return {
-      form: {
-        id: this.$route.query.id
-      },
-      // 校验
-      rules: {},
-      // 设备分类
-      classOptions: [],
-      // 设备类型
-      typeOptions: [{
-        value: 0,
-        label: '音响'
-      }, {
-        value: 1,
-        label: '耳机'
-      }, {
-        value: 2,
-        label: '穿戴'
-      }],
-      // 是否热门
-      hotOptions: [{
-        value: 0,
-        label: '否'
-      }, {
-        value: 1,
-        label: '是'
-      }],
-      // 可见用户
-      pushOptions: [{
-        value: 1,
-        label: '全部'
-      }, {
-        value: 3,
-        label: '指定'
-      }],
-      // 功能权限
-      functionOptions: [],
-      // 设备连接
-      connectOptions: [{
-        value: 2,
-        label: 'UPnP'
-      }, {
-        value: 3,
-        label: 'MQTT'
-      }],
-    }
-  },
-  mounted() {
-    this.getClassList()
-    this.getFunctionList()
-    if (this.form.id) {
-      this.getDetail()
-    }
-  },
-  methods: {
-    // 详情
-    getDetail() {
-      detail(this.form.id).then(res => {
-        if (res.code === 0) {
-          // this.form.typeList.map((i) => {
-          //     this.modeOptions[i.type - 1].disabled = true;
-          //   });
-        }
-      })
-    },
-    // 设备分类
-    getClassList() {
-      classList({
-        status: 1,
-      }).then((res) => {
-        if (res.code === 0) {
-          this.classOptions = res.data
-        }
-      })
-    },
-
-    // 功能权限
-    getFunctionList() {
-      functionList({
-        isDelete: 0
-      }).then((res) => {
-        if (res.code === 0) {
-          this.functionOptions = res.data
-        }
-      })
-    },
-
-    // 新增子表单
-    getAdd() {
-
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-form {
-  width: 550px;
-}
-
-.children {
-  position: relative;
-  border: 1px solid #e8e8e8;
-  padding: 25px 25px 0 0;
-  margin-bottom: 20px;
-}
-</style>

src/views/device/category/index.vue

@@ -1,104 +1,180 @@
 <template>
-  <div class='app-container'>
+  <div class="app-container">
     <!-- 搜索 -->
-    <el-form inline size="mini">
-      <el-form-item label="大类名称：">
-        <el-input placeholder="请输入大类名称" />
-      </el-form-item>
-      <el-form-item label="设备分类：">
-        <el-select placeholder="请选择设备分类">
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="当前状态：">
-        <el-select placeholder="请选择当前状态">
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否热门：">
-        <el-select placeholder="请选择是否热门">
-          <el-option />
-        </el-select>
-      </el-form-item>
+    <el-form inline label-width="100px" size="mini" @submit.native.prevent>
       <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="getCreate">新增</el-button>
-        <el-button type="primary">批量上架</el-button>
-        <el-button type="primary">批量下架</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
+          v-hasPermi="['device:category:add']">新增</el-button>
       </el-form-item>
     </el-form>
-    <!-- 列表 -->
-    <el-table>
-      <el-table-column type="selection"></el-table-column>
-      <el-table-column label="大类Id" align="center"></el-table-column>
-      <el-table-column label="大类名称" align="center"></el-table-column>
-      <el-table-column label="设备图片" align="center"></el-table-column>
-      <el-table-column label="设备分类" align="center"></el-table-column>
-      <el-table-column label="设备类型" align="center"></el-table-column>
-      <el-table-column label="是否热门" align="center"></el-table-column>
-      <el-table-column label="关联设备" align="center"></el-table-column>
-      <el-table-column label="当前状态" align="center"></el-table-column>
-      <el-table-column label="更新时间" align="center"></el-table-column>
-      <el-table-column label="创建时间" align="center"></el-table-column>
+
+    <!-- 表格 -->
+    <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">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === 1 ? '' : 'danger'">{{ selectDictLabel(statusOptions, scope.row.status)
+          }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text">查看</el-button>
-          <el-button type="text">上架</el-button>
-          <el-button type="text">下架</el-button>
-          <el-button type="text" @click="getEdit(scope.row)">编辑</el-button>
-          <el-button type="delete">删除</el-button>
+          <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>
         </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/category";
 export default {
   data() {
     return {
-
-    }
+      // 遮罩层
+      loading: true,
+      // 表格数据
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      title: "",
+      // 提交表单
+      form: {
+        name: '',
+        status: 1
+      },
+      // 表单验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入分类名称",
+            trigger: "blur",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
+      },
+      // 设备状态
+      statusOptions: [{
+        value: 1,
+        label: '正常'
+      }, {
+        value: 2,
+        label: '停用'
+      }]
+    };
   },
   mounted() {
-
+    this.getList();
   },
   methods: {
-    // 列表
+    // 分类列表
     getList() {
-
+      this.loading = true;
+      list().then((res) => {
+        if (res.code === 0) {
+          this.tableData = res.data;
+          this.loading = false;
+        }
+      });
     },
 
-    // 搜索
-    getSearch() {
-
+    // 新增 / 编辑按钮
+    getChange(row) {
+      this.dialogVisible = true;
+      this.form = row ? row : {
+        name: '',
+        status: 1
+      };
+      this.title = row ? "编辑" : "新增";
     },
 
-    // 重置
-    getRefresh() {
-
+    // 取消
+    getCancel() {
+      this.$refs.form.clearValidate();
+      this.dialogVisible = false;
     },
 
-    // 新增
+    // 确定
     getCreate() {
-      this.getRouter()
+      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;
+        }
+      });
     },
 
-    // 编辑
-    getEdit(e) {
-      this.getRouter({
-        id: e.id
+    // 删除
+    getDelete(id) {
+      this.$confirm("确定要删除?", {
+        type: "warning",
       })
+        .then(() => {
+          remove(id).then((res) => {
+            if (res.code === 0) {
+              this.getList();
+              this.$message.success("删除成功！");
+            }
+          });
+        })
+        .catch(() => { });
     },
-
-    // 路由
-    getRouter(query) {
-      this.$router.push({
-        path: '/device/category/detail',
-        query: query
-      })
-    }
-  }
-}
+  },
+};
 </script>

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>

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>
@@ -54,15 +54,15 @@
       <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
         <el-form-item label="设备模式：" :prop="`typeList.${index}.type`"
           :rules="{ required: true, message: '请选择设备模式', trigger: 'change' }">
-          <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange">
-            <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="Number(item.value)"
+          <el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange(item)">
+            <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;
             });
           }
         });
@@ -266,17 +226,17 @@ export default {
     },
 
     // 选中一个设备类型就从数组中去掉
-    getTypeChange() {
-      for (let i in this.typeOptions) {
-        this.typeOptions[i].disabled = false
+    getTypeChange(item) {
+      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)
     }
   }
 }

src/views/device/version/detail.vue

@@ -8,7 +8,7 @@
       </el-form-item>
       <el-form-item prop="type" label="设备模式：">
         <el-select v-model="form.type" placeholder="请选择设备模式">
-          <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)" />
         </el-select>
       </el-form-item>
       <el-form-item prop="version" label="版本号：">

src/views/device/version/index.vue

@@ -129,7 +129,7 @@ export default {
 
     // 字典翻译
     typeFormatter(row) {
-      return row.listType.map(i => this.selectDictLabel(this.modeOptions, i)).join(',')
+      return row.listType.map(i => this.selectDictLabel(this.devModeOptions, i)).join(',')
     }
   }
 }

src/views/device/yxw/index.vue

@@ -13,7 +13,7 @@
       </el-form-item>
       <el-form-item label="设备模式：">
         <el-select v-model="form.deviceType" placeholder="请选择设备类型" clearable>
-          <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in devModeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">