187 lines
4.3 KiB
Vue
187 lines
4.3 KiB
Vue
<!--
|
|
filename: dialogForm.vue
|
|
author: liubin
|
|
date: 2023-09-11 15:55:13
|
|
description: DialogForm for equipmentBindSection only
|
|
-->
|
|
|
|
<template>
|
|
<el-form
|
|
ref="form"
|
|
:model="dataForm"
|
|
label-width="100px"
|
|
v-loading="formLoading">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="报警编码"
|
|
prop="code"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="dataForm.code"
|
|
@change="$emit('update', dataForm)"
|
|
placeholder="请输入工段排序" />
|
|
</el-form-item>
|
|
<!--
|
|
<el-form-item
|
|
label="报警编码"
|
|
prop="code"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-select
|
|
v-model="dataForm.code"
|
|
placeholder="请选择产线"
|
|
@change="handleProductlineChange">
|
|
<el-option
|
|
v-for="opt in productionLineList"
|
|
:key="opt.value"
|
|
:label="opt.label"
|
|
:value="opt.value" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="报警类型"
|
|
prop="type"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-select
|
|
:disabled="disabled"
|
|
v-model="dataForm.type"
|
|
placeholder="请选择报警类型"
|
|
@change="handleTypeChange">
|
|
<el-option
|
|
v-for="opt in [
|
|
{ label: '布尔型', value: 2 },
|
|
{ label: '字符型', value: 1 },
|
|
]"
|
|
:key="opt.value"
|
|
:label="opt.label"
|
|
:value="opt.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="报警级别"
|
|
prop="grade"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-select
|
|
:disabled="disabled"
|
|
v-model="dataForm.grade"
|
|
placeholder="请选择报警级别"
|
|
@change="$emit('update', dataForm)">
|
|
<el-option
|
|
v-for="opt in getDictDatas(DICT_TYPE.EQU_ALARM_LEVEL)"
|
|
:key="opt.value"
|
|
:label="opt.label"
|
|
:value="opt.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
v-if="+dataForm.type == 1"
|
|
label="设备报警编码"
|
|
prop="alarmCode">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="dataForm.alarmCode"
|
|
@change="$emit('update', dataForm)"
|
|
placeholder="请输入设备报警编码" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="参数列名"
|
|
prop="plcParamName"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="dataForm.plcParamName"
|
|
placeholder="请输入参数列名"
|
|
@change="$emit('update', dataForm)"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="报警内容"
|
|
prop="alarmContent"
|
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
|
<el-input
|
|
:disabled="disabled"
|
|
v-model="dataForm.alarmContent"
|
|
placeholder="请输入报警内容"
|
|
@change="$emit('update', dataForm)"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DialogForm',
|
|
model: {
|
|
prop: 'dataForm',
|
|
event: 'update',
|
|
},
|
|
emits: ['update'],
|
|
components: {},
|
|
props: {
|
|
dataForm: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
formLoading: true,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getCode('/base/equipment-group-alarm/getCode').then((code) => {
|
|
this.formLoading = false;
|
|
this.$emit('update', {
|
|
...this.dataForm,
|
|
code,
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
/** 模拟透传 ref */
|
|
validate(cb) {
|
|
return this.$refs.form.validate(cb);
|
|
},
|
|
resetFields(args) {
|
|
return this.$refs.form.resetFields(args);
|
|
},
|
|
async handleTypeChange(id) {
|
|
this.dataForm.alarmCode = '';
|
|
this.$emit('update', this.dataForm);
|
|
},
|
|
async getCode(url) {
|
|
const response = await this.$axios(url);
|
|
return response.data;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-date-editor,
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
</style>
|