设备大类模块

src/views/device/category/detail.vue

@@ -0,0 +1,201 @@
+<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>