You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
11 KiB
324 lines
11 KiB
<template>
|
|
<el-dialog
|
|
v-if="dialogVisible"
|
|
v-el-drag-dialog
|
|
:title="showTitle"
|
|
:visible.sync="dialogVisible"
|
|
width="650px"
|
|
class="custom-dialog"
|
|
>
|
|
<el-form
|
|
v-if="dialogVisible"
|
|
:rules="rules"
|
|
ref="editForm"
|
|
size="mini"
|
|
:model="form"
|
|
label-position="right"
|
|
label-width="120px"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="预警编号" prop="id">
|
|
<el-input v-model="form.id" placeholder="主键，唯一"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="系统ID" prop="equipinfoId">
|
|
<el-input v-model="form.equipinfoId" placeholder="请输入系统ID"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="数据接入标识" prop="dataId">
|
|
<el-input v-model="form.dataId" placeholder="请输入数据接入标识"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="预警等级" prop="warningRank">
|
|
<el-select v-model="form.warningRank" placeholder="请选择预警等级" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in options.rankOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="反馈时间" prop="realTime">
|
|
<el-date-picker
|
|
v-model="form.realTime"
|
|
type="datetime"
|
|
placeholder="选择反馈时间"
|
|
style="width: 100%;"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="填报人" prop="fillBy">
|
|
<el-input v-model="form.fillBy" placeholder="请输入填报人"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="有效标记" prop="actived">
|
|
<el-select v-model="form.actived" placeholder="请选择有效标记" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in options.activedOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="删除标记" prop="delFlag">
|
|
<el-select v-model="form.delFlag" placeholder="请选择删除标记" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in options.delFlagOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="创建人" prop="creatorName">
|
|
<el-input v-model="form.creatorName" placeholder="请输入创建人"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="修改人" prop="updatorName">
|
|
<el-input v-model="form.updatorName" placeholder="请输入修改人"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="企业反馈信息" prop="warnFeedback">
|
|
<el-input v-model="form.warnFeedback" type="textarea" placeholder="请输入企业反馈信息" :rows="3"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false"> 取消 </el-button>
|
|
<el-button type="primary" :loading="loading" @click="onSubmit">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
url: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
};
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
dialogVisible: false,
|
|
|
|
loading: false,
|
|
form: {
|
|
id:"",
|
|
equipinfoId:"",
|
|
dataId:"",
|
|
warningRank:"",
|
|
warnFeedback:"",
|
|
realTime:"",
|
|
fillBy:"",
|
|
actived:"1", // 默认为有效
|
|
creatorName:"",
|
|
createTime:"",
|
|
updatorName:"",
|
|
updateTime:"",
|
|
},
|
|
editType:"add", //add或edit
|
|
rules: {
|
|
equipinfoId: [
|
|
{ required: true, message: '请输入系统ID', trigger: 'blur' }
|
|
],
|
|
dataId: [
|
|
{ required: true, message: '请输入数据接入标识', trigger: 'blur' }
|
|
],
|
|
warningRank: [
|
|
{ required: true, message: '请选择预警等级', trigger: 'change' }
|
|
],
|
|
warnFeedback: [
|
|
{ required: true, message: '请输入企业反馈信息', trigger: 'blur' }
|
|
],
|
|
realTime: [
|
|
{ required: true, message: '请选择反馈时间', trigger: 'change' }
|
|
],
|
|
fillBy: [
|
|
{ required: true, message: '请输入填报人', trigger: 'blur' }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
showTitle() {
|
|
return this.editType=='edit' ? "编辑" + this.title : "新增" + this.title;
|
|
},
|
|
},
|
|
methods: {
|
|
reset() {
|
|
this.editType='add'
|
|
// this.$refs.elForm.resetFields();
|
|
this.loading=false;
|
|
this.form = this.$options.data().form;
|
|
},
|
|
show(form) {
|
|
this.reset();
|
|
if (form) {
|
|
this.editType='edit'
|
|
this.form = { ...this.$options.data().form, ...form };
|
|
}
|
|
this.dialogVisible = true;
|
|
},
|
|
onSubmit() {
|
|
this.$refs.editForm.validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
this.loading = true;
|
|
let q;
|
|
if (this.editType=='edit') {
|
|
q = this.$axios.put( this.url.edit, this.form);
|
|
} else {
|
|
q = this.$axios.post(this.url.add, this.form);
|
|
}
|
|
q.then(({ message }) => {
|
|
this.$message({ type: "info", message: message });
|
|
this.dialogVisible = false;
|
|
this.$emit("refresh");
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-dialog {
|
|
::v-deep .el-dialog {
|
|
background-color: rgba(4, 0, 79, 0.98);
|
|
border: 1px solid rgba(75, 72, 178, 0.5);
|
|
border-radius: 4px;
|
|
|
|
.el-dialog__header {
|
|
background-color: rgba(0, 8, 59, 0.9);
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid rgba(75, 72, 178, 0.5);
|
|
|
|
.el-dialog__title {
|
|
color: #e0e0ff;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
color: #e0e0ff;
|
|
}
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: 20px;
|
|
color: #e0e0ff;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 10px 20px;
|
|
border-top: 1px solid rgba(75, 72, 178, 0.5);
|
|
background-color: rgba(0, 8, 59, 0.7);
|
|
}
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 15px;
|
|
|
|
::v-deep .el-form-item__label {
|
|
color: #c0c4cc;
|
|
font-size: 13px;
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
background-color: rgba(25, 22, 104, 0.7);
|
|
border-color: rgba(75, 72, 178, 0.5);
|
|
color: #e0e0ff;
|
|
|
|
&::placeholder {
|
|
color: rgba(195, 195, 219, 0.5);
|
|
}
|
|
}
|
|
|
|
::v-deep .el-textarea__inner {
|
|
background-color: rgba(25, 22, 104, 0.7);
|
|
border-color: rgba(75, 72, 178, 0.5);
|
|
color: #e0e0ff;
|
|
|
|
&::placeholder {
|
|
color: rgba(195, 195, 219, 0.5);
|
|
}
|
|
}
|
|
|
|
::v-deep .el-select .el-input .el-select__caret {
|
|
color: #e0e0ff;
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
text-align: right;
|
|
|
|
.el-button {
|
|
background-color: rgba(30, 27, 110, 0.7);
|
|
border-color: rgba(75, 72, 178, 0.5);
|
|
color: #e0e0ff;
|
|
|
|
&:hover {
|
|
background-color: rgba(40, 36, 124, 0.8);
|
|
}
|
|
|
|
&[type="primary"] {
|
|
background-color: #1976d2;
|
|
border-color: #1565c0;
|
|
color: #ffffff;
|
|
|
|
&:hover {
|
|
background-color: #1e88e5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|