|
@@ -12,8 +12,12 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="升级方式:" prop="upgradeType">
|
|
<el-form-item label="升级方式:" prop="upgradeType">
|
|
<el-select v-model="form.upgradeType" placeholder="请选择升级方式">
|
|
<el-select v-model="form.upgradeType" placeholder="请选择升级方式">
|
|
- <el-option v-for="item in dict.type.dev_upgrade_type" :key="item.value" :label="item.label"
|
|
|
|
- :value="Number(item.value)" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in dict.type.dev_upgrade_type"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="Number(item.value)"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="设备过滤:" prop="filter">
|
|
<el-form-item label="设备过滤:" prop="filter">
|
|
@@ -21,8 +25,12 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="制造商:" prop="manufacturer">
|
|
<el-form-item label="制造商:" prop="manufacturer">
|
|
<el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
|
|
<el-select v-model="form.manufacturer" placeholder="请选择设备制造商" clearable>
|
|
- <el-option v-for="item in dict.type.dev_manu_facturer" :key="item.value" :label="item.label"
|
|
|
|
- :value="item.value" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in dict.type.dev_manu_facturer"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="设备类型:" prop="categoryId">
|
|
<el-form-item label="设备类型:" prop="categoryId">
|
|
@@ -32,109 +40,174 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="是否热门:" prop="isHot">
|
|
<el-form-item label="是否热门:" prop="isHot">
|
|
<el-select v-model="form.isHot" placeholder="请选择是否热门">
|
|
<el-select v-model="form.isHot" placeholder="请选择是否热门">
|
|
- <el-option v-for="item in dict.type.hot_yes_no" :key="item.value" :label="item.label"
|
|
|
|
- :value="Number(item.value)" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in dict.type.hot_yes_no"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="Number(item.value)"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="在线图片:" prop="img">
|
|
<el-form-item label="在线图片:" prop="img">
|
|
- <Upload listType="picture-card" :url="form.img" @upload="handleUploadImg($event, 'online')"
|
|
|
|
- :disabled="disabled" />
|
|
|
|
|
|
+ <Upload
|
|
|
|
+ listType="picture-card"
|
|
|
|
+ :url="form.img"
|
|
|
|
+ @upload="handleUploadImg($event, 'online')"
|
|
|
|
+ :disabled="disabled"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="离线图片:" prop="offlineImg" style="float:right">
|
|
<el-form-item label="离线图片:" prop="offlineImg" style="float:right">
|
|
- <Upload listType="picture-card" :url="form.offlineImg"
|
|
|
|
- @upload="handleUploadImg($event, 'offline')" :disabled="disabled" />
|
|
|
|
|
|
+ <Upload
|
|
|
|
+ listType="picture-card"
|
|
|
|
+ :url="form.offlineImg"
|
|
|
|
+ @upload="handleUploadImg($event, 'offline')"
|
|
|
|
+ :disabled="disabled"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</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>
|
|
<Draggable v-model="form.typeList" animation="300">
|
|
<Draggable v-model="form.typeList" animation="300">
|
|
<div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
|
|
<div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
|
|
- <el-form-item label="设备模式:" :prop="`typeList.${index}.type`" :rules="{
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="设备模式:"
|
|
|
|
+ :prop="`typeList.${index}.type`"
|
|
|
|
+ :rules="{
|
|
required: true,
|
|
required: true,
|
|
message: '请选择设备模式',
|
|
message: '请选择设备模式',
|
|
trigger: 'change',
|
|
trigger: 'change',
|
|
- }">
|
|
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
<el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange($event, index)">
|
|
<el-select v-model="item.type" placeholder="请选择设备模式" @change="getTypeChange($event, index)">
|
|
- <el-option v-for="item in dict.type.dev_list_type" :key="item.value" :label="item.label"
|
|
|
|
- :value="Number(item.value)" :disabled="item.disabled" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in dict.type.dev_list_type"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="Number(item.value)"
|
|
|
|
+ :disabled="item.disabled"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</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-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-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 functionOptions" :key="item.id" :label="item.name" :value="item.type" />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item v-if="item.type !== 2 && item.type !== 4" label="连接方式:"
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ v-if="item.type !== 2 && item.type !== 4"
|
|
|
|
+ label="连接方式:"
|
|
:prop="`typeList.${index}.connectType`"
|
|
:prop="`typeList.${index}.connectType`"
|
|
- :rules="{required: true, message: '请选择连接方式', trigger: 'change'}">
|
|
|
|
|
|
+ :rules="{required: true, message: '请选择连接方式', trigger: 'change'}"
|
|
|
|
+ >
|
|
<el-select v-model="item.connectType" placeholder="请选择连接方式">
|
|
<el-select v-model="item.connectType" placeholder="请选择连接方式">
|
|
- <el-option v-for="item in dict.type.dev_connect_type" :key="item.value" :label="item.label"
|
|
|
|
- :value="Number(item.value)" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in dict.type.dev_connect_type"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="Number(item.value)"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item v-if="item.type === 1" label="引导页:" :prop="`typeList.${index}.guideUrl`"
|
|
|
|
- :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}">
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ v-if="item.type === 1"
|
|
|
|
+ label="引导页:"
|
|
|
|
+ :prop="`typeList.${index}.guideUrl`"
|
|
|
|
+ :rules="{ required: true, message: '请输入引导页网址' , trigger: 'blur'}"
|
|
|
|
+ >
|
|
<el-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
|
|
<el-input v-model="item.guideUrl" placeholder="请输入引导页网址" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
- <el-form-item :label="item.type === 1 || 3 ? '连接引导页:' : '开机引导图'"
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ :label="item.type === 1 || 3 ? '连接引导页:' : '开机引导图'"
|
|
:prop="`typeList.${index}.icon1`"
|
|
:prop="`typeList.${index}.icon1`"
|
|
- :rules="{ required: true, message: '请上传开机引导图片', trigger: 'change'}">
|
|
|
|
- <Upload listType="picture-card" :url="item.icon1"
|
|
|
|
- @upload="handleUploadIcon($event, index, 'icon1')" :disabled="disabled" />
|
|
|
|
|
|
+ :rules="{ required: true, message: '请上传开机引导图片', trigger: 'change'}"
|
|
|
|
+ >
|
|
|
|
+ <Upload
|
|
|
|
+ listType="picture-card"
|
|
|
|
+ :url="item.icon1"
|
|
|
|
+ @upload="handleUploadIcon($event, index, 'icon1')"
|
|
|
|
+ :disabled="disabled"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-col>
|
|
<el-col :span="12" v-if="item.type === 1 || item.type === 3">
|
|
<el-col :span="12" v-if="item.type === 1 || item.type === 3">
|
|
- <el-form-item label="配对键引导图:" :prop="`typeList.${index}.icon2`" style="float:right"
|
|
|
|
- :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}">
|
|
|
|
- <Upload listType="picture-card" :url="item.icon2"
|
|
|
|
- @upload="handleUploadIcon($event, index, 'icon2')" :disabled="disabled" />
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="配对键引导图:"
|
|
|
|
+ :prop="`typeList.${index}.icon2`"
|
|
|
|
+ style="float:right"
|
|
|
|
+ :rules="{ required: true, message: '请上传配对键引导图', trigger: 'change'}"
|
|
|
|
+ >
|
|
|
|
+ <Upload
|
|
|
|
+ listType="picture-card"
|
|
|
|
+ :url="item.icon2"
|
|
|
|
+ @upload="handleUploadIcon($event, index, 'icon2')"
|
|
|
|
+ :disabled="disabled"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
- <el-form-item v-if="item.type === 1" label="引导页内容:" :prop="`typeList.${index}.guidePageContent`"
|
|
|
|
- :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}">
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ v-if="item.type === 1"
|
|
|
|
+ label="引导页内容:"
|
|
|
|
+ :prop="`typeList.${index}.guidePageContent`"
|
|
|
|
+ :rules="{required: true, message: '请输入引导页内容', trigger: 'blur'}"
|
|
|
|
+ >
|
|
<Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
|
|
<Editor v-model="item.guidePageContent" :min-height="250" :readOnly="disabled" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<!-- 删除按钮 -->
|
|
<!-- 删除按钮 -->
|
|
- <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
|
|
|
|
- @click="getDelete(item.type, index)" />
|
|
|
|
|
|
+ <el-link
|
|
|
|
+ class="el-icon-close"
|
|
|
|
+ v-if="form.typeList.length > 1"
|
|
|
|
+ :underline="false"
|
|
|
|
+ @click="getDelete(item.type, index)"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</Draggable>
|
|
</Draggable>
|
|
- <el-form-item>
|
|
|
|
- <el-button @click="getCancel">取消</el-button>
|
|
|
|
- <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
|
|
|
|
- </el-form-item>
|
|
|
|
</el-form>
|
|
</el-form>
|
|
|
|
+ <div class="form-btn">
|
|
|
|
+ <el-button @click="getCancel">取消</el-button>
|
|
|
|
+ <el-button v-if="disabled === false" type="primary" @click="getSubmit">提交</el-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
|
|
import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
|
|
import { functionList } from "@/api/device/function";
|
|
import { functionList } from "@/api/device/function";
|
|
-import { category } from '../mixin/index'
|
|
|
|
|
|
+import { category } from "../mixin/index";
|
|
import Upload from "@/components/Upload/index";
|
|
import Upload from "@/components/Upload/index";
|
|
-import Editor from "@/components/Editor/index"
|
|
|
|
-import Draggable from 'vuedraggable'
|
|
|
|
|
|
+import Editor from "@/components/Editor/index";
|
|
|
|
+import Draggable from "vuedraggable";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- dicts: ['dev_upgrade_type', 'hot_yes_no', 'dev_list_type', 'dev_connect_type', 'dev_manu_facturer'],
|
|
|
|
|
|
+ dicts: [
|
|
|
|
+ "dev_upgrade_type",
|
|
|
|
+ "hot_yes_no",
|
|
|
|
+ "dev_list_type",
|
|
|
|
+ "dev_connect_type",
|
|
|
|
+ "dev_manu_facturer",
|
|
|
|
+ ],
|
|
mixins: [category],
|
|
mixins: [category],
|
|
components: {
|
|
components: {
|
|
Upload,
|
|
Upload,
|
|
Editor,
|
|
Editor,
|
|
- Draggable
|
|
|
|
|
|
+ Draggable,
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -143,60 +216,78 @@ export default {
|
|
functionOptions: [],
|
|
functionOptions: [],
|
|
// 表单
|
|
// 表单
|
|
form: {
|
|
form: {
|
|
- typeList: [{
|
|
|
|
- functionList: [],
|
|
|
|
- }],
|
|
|
|
|
|
+ typeList: [
|
|
|
|
+ {
|
|
|
|
+ functionList: [],
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
// 表单验证
|
|
// 表单验证
|
|
rules: {
|
|
rules: {
|
|
- clientType: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请输入设备型号",
|
|
|
|
- trigger: "blur",
|
|
|
|
- }],
|
|
|
|
- name: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请输入设备名称",
|
|
|
|
- trigger: "blur",
|
|
|
|
- }],
|
|
|
|
- firstVersion: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请输入初始版本号",
|
|
|
|
- trigger: "blur",
|
|
|
|
- }],
|
|
|
|
- upgradeType: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请选择升级方式",
|
|
|
|
- trigger: "change",
|
|
|
|
- }],
|
|
|
|
- isHot: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "是否热门",
|
|
|
|
- trigger: "change",
|
|
|
|
- }],
|
|
|
|
- categoryId: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请选择设备类型",
|
|
|
|
- trigger: "change",
|
|
|
|
- }],
|
|
|
|
- img: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请上传在线图片",
|
|
|
|
- trigger: "change",
|
|
|
|
- }],
|
|
|
|
- offlineImg: [{
|
|
|
|
- required: true,
|
|
|
|
- message: "请上传离线图片",
|
|
|
|
- trigger: "change"
|
|
|
|
- }]
|
|
|
|
|
|
+ clientType: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请输入设备型号",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ name: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请输入设备名称",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ firstVersion: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请输入初始版本号",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ upgradeType: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请选择升级方式",
|
|
|
|
+ trigger: "change",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ isHot: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "是否热门",
|
|
|
|
+ trigger: "change",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ categoryId: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请选择设备类型",
|
|
|
|
+ trigger: "change",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ img: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请上传在线图片",
|
|
|
|
+ trigger: "change",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ offlineImg: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请上传离线图片",
|
|
|
|
+ trigger: "change",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
// 权限列表
|
|
// 权限列表
|
|
functionList().then((res) => {
|
|
functionList().then((res) => {
|
|
- if (res.data.code === 0) {
|
|
|
|
- this.functionOptions = res.data.data;
|
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.functionOptions = res.data;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -211,11 +302,11 @@ export default {
|
|
deviceDetail({
|
|
deviceDetail({
|
|
id: this.$route.query.id,
|
|
id: this.$route.query.id,
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
- if (res.data.code === 0) {
|
|
|
|
- this.form = res.data.data
|
|
|
|
- this.form.typeList.map(i => {
|
|
|
|
- this.dict.type.dev_list_type[i.type - 1].disabled = true
|
|
|
|
- })
|
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.form = res.data;
|
|
|
|
+ this.form.typeList.map((i) => {
|
|
|
|
+ this.dict.type.dev_list_type[i.type - 1].disabled = true;
|
|
|
|
+ });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
@@ -223,7 +314,9 @@ export default {
|
|
|
|
|
|
// 上传设备图片
|
|
// 上传设备图片
|
|
handleUploadImg(e, key) {
|
|
handleUploadImg(e, key) {
|
|
- key === 'online' ? this.form.img = e.file : this.form.offlineImg = e.file
|
|
|
|
|
|
+ key === "online"
|
|
|
|
+ ? (this.form.img = e.file)
|
|
|
|
+ : (this.form.offlineImg = e.file);
|
|
},
|
|
},
|
|
|
|
|
|
// 上传设备图标
|
|
// 上传设备图标
|
|
@@ -269,7 +362,7 @@ export default {
|
|
deviceEdit(this.form).then((res) => {
|
|
deviceEdit(this.form).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
this.$message.success("修改成功!");
|
|
this.$message.success("修改成功!");
|
|
- this.getCancel()
|
|
|
|
|
|
+ this.getCancel();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
@@ -277,7 +370,7 @@ export default {
|
|
deviceAdd(this.form).then((res) => {
|
|
deviceAdd(this.form).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
this.$message.success("提交成功!");
|
|
this.$message.success("提交成功!");
|
|
- this.getCancel()
|
|
|
|
|
|
+ this.getCancel();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|