|
|
@@ -1,32 +1,68 @@
|
|
|
<template>
|
|
|
- <div class='app-container'>
|
|
|
- <el-form :model="form" ref="form" :rules="rules" label-width="auto" :disabled="disabled">
|
|
|
+ <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-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-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-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
|
|
|
+ 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-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">
|
|
|
@@ -35,154 +71,292 @@
|
|
|
<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" />
|
|
|
+ <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" />
|
|
|
+ <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>
|
|
|
+ <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-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-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-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-option
|
|
|
+ v-for="item in connectOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item :label="[1, 3].includes(i.type) ? '连接引导图：' : '开机引导图：'" :prop="`typeList.${index}.icon1`"
|
|
|
- :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
|
|
|
- <Upload listType="picture-card" :url="i.icon1" @upload="upload($event, 'icon1', index)"
|
|
|
- :disabled="disabled" />
|
|
|
+ <el-form-item
|
|
|
+ :label="[1, 3].includes(i.type) ? '连接引导图：' : '开机引导图：'"
|
|
|
+ :prop="`typeList.${index}.icon1`"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请上传引导图',
|
|
|
+ trigger: 'change',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ :url="i.icon1"
|
|
|
+ @upload="upload($event, 'icon1', index)"
|
|
|
+ :disabled="disabled"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="配对引导图：" :prop="`typeList.${index}.icon2`"
|
|
|
- :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
|
|
|
- <Upload listType="picture-card" :url="i.icon2" @upload="upload($event, 'icon2', index)"
|
|
|
- :disabled="disabled" />
|
|
|
+ <el-form-item
|
|
|
+ label="配对引导图："
|
|
|
+ :prop="`typeList.${index}.icon2`"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '请上传引导图',
|
|
|
+ trigger: 'change',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ :url="i.icon2"
|
|
|
+ @upload="upload($event, 'icon2', index)"
|
|
|
+ :disabled="disabled"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-form-item v-if="[1, 3].includes(i.type)" label="引导页：">
|
|
|
- <Editor v-model="i.guidePageContent" :min-height="250" :readOnly="disabled" />
|
|
|
+ <Editor
|
|
|
+ v-model="i.guidePageContent"
|
|
|
+ :min-height="250"
|
|
|
+ :readOnly="disabled"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-else 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
|
|
|
+ v-else
|
|
|
+ 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-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
|
|
|
- @click="getDelete(i.type, index)" :disabled="disabled" />
|
|
|
+ <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>
|
|
|
+ <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'
|
|
|
+import { devList, submit, detail } from "@/api/device/class";
|
|
|
+import {
|
|
|
+ devModeMixin,
|
|
|
+ yesOrNoMixin,
|
|
|
+ devTypeMixin,
|
|
|
+ devCategoryMixin,
|
|
|
+ devFucMixin,
|
|
|
+} from "@/mixin/index";
|
|
|
export default {
|
|
|
- name:"deviceClassDetail",
|
|
|
- mixins: [devModeMixin, yesOrNoMixin, devTypeMixin, devCategoryMixin, devFucMixin],
|
|
|
+ name: "deviceClassDetail",
|
|
|
+ mixins: [
|
|
|
+ devModeMixin,
|
|
|
+ yesOrNoMixin,
|
|
|
+ devTypeMixin,
|
|
|
+ devCategoryMixin,
|
|
|
+ devFucMixin,
|
|
|
+ ],
|
|
|
data() {
|
|
|
return {
|
|
|
// 表单
|
|
|
form: {
|
|
|
id: this.$route.query.id,
|
|
|
deviceIds: [],
|
|
|
- typeList: [{
|
|
|
- functionList: [],
|
|
|
- }],
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ functionList: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
// 校验
|
|
|
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' }]
|
|
|
+ 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: '指定'
|
|
|
- }],
|
|
|
+ pushOptions: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: "全部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: "指定",
|
|
|
+ },
|
|
|
+ ],
|
|
|
// 设备连接
|
|
|
- connectOptions: [{
|
|
|
- value: 2,
|
|
|
- label: 'UPnP'
|
|
|
- }, {
|
|
|
- value: 3,
|
|
|
- label: 'MQTT'
|
|
|
- }],
|
|
|
+ connectOptions: [
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: "UPnP",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: "MQTT",
|
|
|
+ },
|
|
|
+ ],
|
|
|
// 只读
|
|
|
- disabled: Boolean(this.$route.query.boolean)
|
|
|
- }
|
|
|
+ disabled: Boolean(this.$route.query.boolean),
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getCateGory(1)
|
|
|
- this.getDevList()
|
|
|
+ this.getCateGory(1);
|
|
|
+ this.getDevList();
|
|
|
if (this.form.id) {
|
|
|
- this.getDetail()
|
|
|
+ this.getDetail();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 详情
|
|
|
getDetail() {
|
|
|
- detail(this.form.id).then(res => {
|
|
|
+ detail(this.form.id).then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
- this.form = res.data
|
|
|
- this.form.deviceIds = res.data.deviceIds.split(',')
|
|
|
+ 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 => {
|
|
|
+ id: this.form.id,
|
|
|
+ }).then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
- this.devOptions = res.data
|
|
|
+ this.devOptions = res.data;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 新增子表单
|
|
|
@@ -191,46 +365,48 @@ export default {
|
|
|
type: null,
|
|
|
functionList: [],
|
|
|
connectType: null,
|
|
|
- icon1: '',
|
|
|
- icon2: '',
|
|
|
- guidePageContent: ''
|
|
|
- })
|
|
|
+ icon1: "",
|
|
|
+ icon2: "",
|
|
|
+ guidePageContent: "",
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 删除子表单
|
|
|
getDelete(type, index) {
|
|
|
- this.form.typeList.splice(index, 1)
|
|
|
+ this.form.typeList.splice(index, 1);
|
|
|
if (type) {
|
|
|
- this.devModeOptions.find(i => i.value == type).disabled = false
|
|
|
+ this.devModeOptions.find((i) => i.value == type).disabled = false;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 修改设备模式
|
|
|
getTypeChange(i) {
|
|
|
for (let key in this.devModeOptions) {
|
|
|
- this.devModeOptions[key].disabled = false
|
|
|
+ this.devModeOptions[key].disabled = false;
|
|
|
}
|
|
|
// 选中的设备模式禁止再选
|
|
|
- this.form.typeList.map(item => {
|
|
|
+ this.form.typeList.map((item) => {
|
|
|
if (item.type) {
|
|
|
- let index = this.devModeOptions.findIndex(j => j.value == item.type)
|
|
|
- this.devModeOptions[index].disabled = true
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ this.form[key] = e.file;
|
|
|
} else {
|
|
|
- this.form.typeList[index][key] = e.file
|
|
|
+ this.form.typeList[index][key] = e.file;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -238,25 +414,25 @@ export default {
|
|
|
getSubmit() {
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- this.form.deviceIds = this.form.deviceIds.join(',')
|
|
|
- submit(this.form).then(res => {
|
|
|
+ this.form.deviceIds = this.form.deviceIds.join(",");
|
|
|
+ submit(this.form).then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
- this.$message.success('提交成功！')
|
|
|
- this.close()
|
|
|
+ this.$message.success("提交成功！");
|
|
|
+ this.close();
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
- return false
|
|
|
+ return false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 取消
|
|
|
close() {
|
|
|
- this.$tab.closeOpenPage('/device/class')
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.$tab.closeOpenPage("/device/class");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
