310 lines
9.5 KiB
Vue
310 lines
9.5 KiB
Vue
<template>
|
|
<!-- 工程管理 新增、编辑 表单组件 -->
|
|
<div >
|
|
<el-form
|
|
v-loading="open"
|
|
label-width="100px"
|
|
size="medium"
|
|
ref="deviceParamsRef"
|
|
:model="deviceParams"
|
|
:rules="deviceParamsRules"
|
|
>
|
|
<el-form-item label="设备类型" prop="devType">
|
|
<el-select
|
|
v-model="deviceParams.devType"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择设备类型"
|
|
>
|
|
<el-option
|
|
v-for="item in deviceTypeRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="设备名称" prop="devName">
|
|
<el-input v-model="deviceParams.devName" :maxlength="50" placeholder="请输入设备名称" />
|
|
</el-form-item>
|
|
<el-form-item label="设备编码" prop="devCode">
|
|
<el-input v-model="deviceParams.devCode" :maxlength="50" placeholder="请输入设备编码" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="所属边带" prop="bdId">
|
|
<el-select
|
|
v-model="deviceParams.bdId"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择所属边带"
|
|
>
|
|
<el-option
|
|
v-for="item in bdIdRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="预警配置" prop="configId">
|
|
<el-select
|
|
v-model="deviceParams.configId"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择预警配置"
|
|
>
|
|
<el-option
|
|
v-for="item in configRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="设备状态" prop="devStatus">
|
|
<el-select
|
|
v-model="deviceParams.devStatus"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择设备状态"
|
|
>
|
|
<el-option
|
|
v-for="item in this.deviceStatusRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="display: flex; justify-content: right">
|
|
<el-button type="success" @click="onSubmit">确认</el-button>
|
|
<el-button
|
|
@click="
|
|
() => {
|
|
this.$emit('closeDialog')
|
|
}
|
|
"
|
|
>取消</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryDeviceTypeApi,
|
|
queryBdIdApi,
|
|
queryConfigApi,
|
|
addDeviceApi,
|
|
editDeviceApi
|
|
} from '@/api/base/device'
|
|
export default {
|
|
name: 'FormDevice',
|
|
props: {
|
|
editParams: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
},
|
|
components: { },
|
|
created() {
|
|
|
|
},
|
|
async mounted() {
|
|
this.open = true
|
|
await this.getRanges()
|
|
if (this.editParams) {
|
|
await Object.assign(this.deviceParams, this.editParams)
|
|
this.subSort = 2
|
|
} else {
|
|
this.subSort = 1
|
|
}
|
|
this.open = false
|
|
},
|
|
data() {
|
|
return {
|
|
subSort: '', // 提交类型：新增 1 / 修改 2
|
|
open: false,
|
|
deviceParams: {
|
|
// devId: undefined, // 设备id
|
|
devType: undefined, //设备类型
|
|
devName: undefined, //设备名称
|
|
devCode: undefined, // 设备编码
|
|
bdId: undefined, // 所属边带
|
|
configId: undefined, //预警配置
|
|
devStatus: undefined, //设备状态
|
|
},
|
|
deviceTypeRange: [], // 设备类型下拉选
|
|
bdIdRange: [], // 所属边带下拉选
|
|
configRange: [], // 预警配置下拉选
|
|
// 校验规则
|
|
deviceParamsRules: {
|
|
devType: [
|
|
{
|
|
required: true,
|
|
message: '请选择设备类型',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
devName: [
|
|
{
|
|
required: true,
|
|
message: '请输入设备名称',
|
|
trigger: 'blur',
|
|
},
|
|
{ validator: this.validateInput, trigger: 'blur' }
|
|
],
|
|
devCode: [
|
|
{
|
|
required: true,
|
|
message: '请输入设备编码',
|
|
trigger: 'blur',
|
|
},
|
|
{ validator: this.validateInput, trigger: 'blur' }
|
|
],
|
|
bdId: [
|
|
{
|
|
required: true,
|
|
message: '请选择所属边带',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
configId: [
|
|
{
|
|
required: true,
|
|
message: '请选择预警配置',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
devStatus: [
|
|
{
|
|
required: true,
|
|
message: '请选择设备状态',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
},
|
|
deviceStatusRange:[
|
|
{
|
|
label: '在线',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '离线',
|
|
value: 0
|
|
}
|
|
],
|
|
// 各类下拉
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
validateInput(rule, value, callback) {
|
|
const regex = /[!@#$%^&*()_,.?":{}|<>+\//\\]/g; // 特殊字符
|
|
if (!value) {
|
|
callback(new Error('输入不能为空'));
|
|
} else if (regex.test(value)) {
|
|
callback(new Error('输入不能包含特殊字符'));
|
|
} else {
|
|
callback(); // 验证通过
|
|
}
|
|
},
|
|
/** 获取各类下拉框 */
|
|
async getRanges() {
|
|
// 获取设备类型下拉选
|
|
const params = {'dictType': 'dev_type'}
|
|
const paramsTwo = {'isAll': 0}
|
|
let deviceTypeRes = await queryDeviceTypeApi(params)
|
|
this.deviceTypeRange = deviceTypeRes.data.map(item => {
|
|
return {
|
|
label: item.dictLabel,
|
|
value: item.dictCode+''
|
|
}
|
|
})
|
|
console.log(this.deviceTypeRange)
|
|
// 获取所属边带下拉选
|
|
let bdIdRes = await queryBdIdApi()
|
|
this.bdIdRange = bdIdRes.data.map(item => {
|
|
return {
|
|
label: item.devName,
|
|
value: item.id
|
|
}
|
|
})
|
|
// 获取预警配置下拉选
|
|
let configRes = await queryConfigApi(paramsTwo)
|
|
this.configRange = configRes.data.map(item => {
|
|
return {
|
|
label: item.configName+" "+item.typeName,
|
|
value: item.id,
|
|
}
|
|
})
|
|
},
|
|
/** 改变树结构 */
|
|
changeTree(leaf) {
|
|
leaf.map(item => {
|
|
item.value = item.id
|
|
if(item.children) {
|
|
this.changeTree(item.children)
|
|
}
|
|
})
|
|
return leaf
|
|
},
|
|
// /** 项目部名称改变 */
|
|
// departNameChange(e) {
|
|
// this.projRange.forEach(item => {
|
|
// if(e === item.label) {
|
|
// this.deviceParams.departType = item.departType
|
|
// this.deviceParams.areaId = item.areaId
|
|
// this.deviceParams.headUser = item.headUser
|
|
// this.deviceParams.headUserPhone = item.headUserPhone
|
|
// this.deviceParams.remarks = item.remarks
|
|
// }
|
|
// })
|
|
// },
|
|
/** 级联选择器改变 */
|
|
handleCas(e) {
|
|
this.deviceParams.impUnit = e[e.length - 1]
|
|
},
|
|
/** 确认按钮 */
|
|
onSubmit() {
|
|
console.log(this.deviceParams)
|
|
this.$refs.deviceParamsRef.validate(valid => {
|
|
if (valid) {
|
|
// 1. 表单校验通过后调后台 Api
|
|
if(this.subSort === 1) {
|
|
addDeviceApi(this.deviceParams).then(res => {
|
|
this.$modal.msgSuccess('操作成功')
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog', true)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
} else if(this.subSort === 2) {
|
|
editDeviceApi(this.deviceParams).then(res => {
|
|
this.$modal.msgSuccess('操作成功')
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog', true)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-form-item__label{
|
|
font-weight: normal;
|
|
}
|
|
</style>
|