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

<template>
  <div class='app-container'>
    <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="设备分类：" prop="categoryId">
        <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="设备类型：" 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="是否热门：" 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="关联设备：" 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="可见用户：" 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="指定用户：" prop="user">
        <el-input v-model="form.user" placeholder="请输入指定用户(逗号隔开)" />
      </el-form-item>
      <el-row :gutter="70">
        <el-col :span="12">
          <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="离线图片：" prop="offlineImg">
            <Upload listType="picture-card" :url="form.offlineImg" @upload="upload($event, 'offlineImg')"
              :disabled="disabled" />
          </el-form-item>
        </el-col>
      </el-row>
      <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.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.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-form-item label="引导图：" :prop="`typeList.${index}.icon`"
          :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
          <Upload listType="picture-card" :url="i.icon" @upload="upload($event, 'icon', index)" :disabled="disabled" />
        </el-form-item>
        <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 @click="close">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
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,
        deviceIds: [],
        typeList: [{
          functionList: [],
          icon: ''
        }],
      },
      // 校验
      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: [],
      // 可见用户
      pushOptions: [{
        value: 1,
        label: '全部'
      }, {
        value: 3,
        label: '指定'
      }],
      // 设备连接
      connectOptions: [{
        value: 2,
        label: 'UPnP'
      }, {
        value: 3,
        label: 'MQTT'
      }],
      // 只读
      disabled: Boolean(this.$route.query.boolean)
    }
  },
  mounted() {
    this.getDevList()
    if (this.form.id) {
      this.getDetail()
    }
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.form.deviceIds = res.data.deviceIds.split(',')
          this.form.typeList.map((i) => {
            this.devModeOptions[i.type - 1].disabled = true;
          })
        }
      })
    },

    // 设备列表
    getDevList() {
      devList({
        type: 2,
        id: this.form.id
      }).then(res => {
        if (res.code === 0) {
          this.devOptions = res.data
        }
      })
    },

    // 新增子表单
    getAdd() {
      this.form.typeList.push({
        type: null,
        functionList: [],
        connectType: null,
        icon: '',
        guidePageContent: ''
      })
    },

    // 删除子表单
    getDelete(type, index) {
      this.form.typeList.splice(index, 1)
      this.devModeOptions.find(i => i.value == type).disabled = false
    },

    // 修改设备模式
    getTypeChange(i) {
      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', 'icon'].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')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 580px;
}

.sub-form {
  position: relative;
  border: 1px solid #e8e8e8;
  padding: 25px 25px 0 25px;
  margin-bottom: 20px;

  .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
  }
}
</style>