ohplay_system/src/views/device/category/detail.vue

<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>