xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理表单在关闭时没有清空数据的问题

Browse Source 
修改状态字段的下拉options
下拉框在前面增加label
页面布局调整
This commit is contained in:
renpy 2023-07-27 11:56:50 +08:00
parent 26c3862828
commit 86094215b3
1 changed files with 123 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
View File

@ -2,15 +2,20 @@
<div style="height: 100%;"> <div style="height: 100%;">
<div class="rules-header"> <div class="rules-header">
<div> <div>
<a-row type="flex" :gutter="10">
<a-col flex="190px">
<a-button class="rules-add" @click="handleAdd"> <a-button class="rules-add" @click="handleAdd">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px;">
Create Alert Rule Create Alert Rule
</span> </span>
</a-button> </a-button>
</a-col>
<a-col flex="300px">
<span class="item-label">Rule Status</span>
<a-select <a-select
style="width: 200px;margin-left: 10px;" style="width: 180px;display: inline-block;"
:value="queryParams.station" v-model="queryParams.station"
:options="stateOptions" :options="stateOptions"
show-arrow show-arrow
allowClear allowClear
@ -19,10 +24,12 @@
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select> </a-select>
</a-col>
<a-col flex="300px">
<span class="item-label">Source Type</span>
<a-select <a-select
style="width: 200px;margin-left: 10px;" style="width: 180px;display: inline-block;"
:value="queryParams.type" v-model="queryParams.type"
:options="typeOptions" :options="typeOptions"
show-arrow show-arrow
allowClear allowClear
@ -31,10 +38,12 @@
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select> </a-select>
</a-col>
<a-col flex="255px">
<span class="item-label">Source</span>
<a-select <a-select
style="width: 200px;margin-left: 10px;" style="width: 180px;display: inline-block;"
:value="queryParams.name" v-model="queryParams.name"
:options="nameOptions" :options="nameOptions"
show-arrow show-arrow
allowClear allowClear
@ -43,19 +52,23 @@
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select> </a-select>
</a-col>
<a-col>
<a-button class="search-btn" @click="onSearch"> <a-button class="search-btn" @click="onSearch">
<img class="icon-add" src="@/assets/images/global/search.png" alt="" /> <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px;">
Search Search
</span> </span>
</a-button> </a-button>
</a-col>
</a-row>
</div> </div>
<a-button class="rules-reset" @click="resetQuery" style="display:none"> <!-- <a-button class="rules-reset" @click="resetQuery" style="display:none">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" /> <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px;">
Refresh Refresh
</span> </span>
</a-button> </a-button> -->
</div> </div>
<div class="rules-content"> <div class="rules-content">
<div class="monitor-list"> <div class="monitor-list">
@ -113,12 +126,11 @@
<a-modal <a-modal
:title="isAdd ? 'Add Rule' : 'Edit Rule'" :title="isAdd ? 'Add Rule' : 'Edit Rule'"
:width="845" :width="845"
:key= modalKey
v-model="visible" v-model="visible"
@cancel="onCancel" @cancel="onCancel"
> >
<a-form-model <a-form-model
ref="ruleForm" ref="al_ruleForm"
:model="form" :model="form"
:rules="rules" :rules="rules"
layout="vertical" layout="vertical"
@ -127,7 +139,7 @@
<a-col :span="12"> <a-col :span="12">
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType"> <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
<a-select <a-select
:value="form.sourceType" v-model="form.sourceType"
:options="typeOptions" :options="typeOptions"
show-arrow show-arrow
allowClear allowClear
@ -139,7 +151,7 @@
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-model-item ref="source" label="Source" prop="sourceId"> <a-form-model-item ref="sourceId" label="Source" prop="sourceId">
<a-select <a-select
v-model="form.sourceId" v-model="form.sourceId"
:options="sourceOptions" :options="sourceOptions"
@ -157,7 +169,7 @@
<a-row :gutter="[15,0]"> <a-row :gutter="[15,0]">
<a-col :span="12"> <a-col :span="12">
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name"> <a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
<a-input v-model="form.name" /> <a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
@ -192,7 +204,7 @@
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-model-item ref="threshold" label="Threshold" prop="threshold"> <a-form-model-item ref="threshold" label="Threshold" prop="threshold">
<a-input v-model="form.threshold" :suffix="units" /> <a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
</a-row> </a-row>
@ -248,7 +260,6 @@ export default {
}, },
data() { data() {
return { return {
modalKey:"",
isAdd:true, isAdd:true,
ipagination:{ ipagination:{
current: 1, current: 1,
@ -270,11 +281,11 @@ export default {
}, },
stateOptions: [ stateOptions: [
{ {
label: "禁用", label: "Disabled",
value: "0" value: "0"
}, },
{ {
label: "启用", label: "Enable",
value: "1" value: "1"
} }
], ],
@ -296,14 +307,14 @@ export default {
monitorList: [], monitorList: [],
// 表单 // 表单
form: { form: {
sourceType: "", sourceType: undefined,
sourceId: "", sourceId: undefined,
name: "", name: "",
itemId: "", itemId: undefined,
operator: "", operator: undefined,
threshold: "", threshold: "",
silenceCycle: "", silenceCycle: undefined,
contactId: "", contactId: undefined,
}, },
currId:"", currId:"",
units: "", units: "",
@ -368,28 +379,28 @@ export default {
contactGroupOptions: [], contactGroupOptions: [],
rules: { rules: {
sourceType: [ sourceType: [
{ required: true, message: 'Please select a sourceType'}, { required: true, message: 'Please select a sourceType', trigger: 'change'},
], ],
sourceId: [ sourceId: [
{ required: true, message: 'Please select a source'}, { required: true, message: 'Please select a source', trigger: 'change'},
], ],
name: [ name: [
{ required: true, message: 'Please input alarmRule name'}, { required: true, message: 'Please input alarmRule name'},
], ],
itemId: [ itemId: [
{ required: true, message: 'Please select a monitorItem'}, { required: true, message: 'Please select a monitorItem', trigger: 'change'},
], ],
operator: [ operator: [
{ required: true, message: 'Please select a logicSymbol'}, { required: true, message: 'Please select a logicSymbol', trigger: 'change'},
], ],
threshold: [ threshold: [
{ required: true, message: 'Please input threshold'}, { required: true, message: 'Please input threshold'},
], ],
silenceCycle: [ silenceCycle: [
{ required: true, message: 'Please select a silenceCycle'}, { required: true, message: 'Please select a silenceCycle', trigger: 'change'},
], ],
contactId: [ contactId: [
{ required: true, message: 'Please select a contactGroup'}, { required: true, message: 'Please select a contactGroup', trigger: 'change'},
], ],
} }
} }
@ -482,9 +493,8 @@ export default {
return (Math.random()+new Date().getTime()).toString(32).slice(0,8) return (Math.random()+new Date().getTime()).toString(32).slice(0,8)
}, },
handleAdd() { handleAdd() {
this.modalKey = this.getUid()
this.visible = true
this.isAdd = true this.isAdd = true
this.visible = true
}, },
onSourceTypeChange(val) { onSourceTypeChange(val) {
this.form.sourceType = val this.form.sourceType = val
@ -497,9 +507,14 @@ export default {
this.sourceOptions=[] this.sourceOptions=[]
} }
}, },
onSourceChange(val,option) { onSourceChange(val, option) {
if (val) {
this.form.sourceId = val this.form.sourceId = val
this.getItems(val.label) this.getItems(val.label)
} else {
this.form.sourceId = {}
this.form.itemId = undefined
}
}, },
getItems(val) { getItems(val) {
getAction("/alarmRule/getItems", {sourceName:val}).then(res => { getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
@ -582,7 +597,6 @@ export default {
}, },
onCancel() { onCancel() {
this.resetForm() this.resetForm()
this.units = ""
this.visible = false this.visible = false
}, },
editItem(id) { editItem(id) {
@ -611,12 +625,11 @@ export default {
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning("This operation fails. Contact your system administrator")
} }
this.visible = true
this.isAdd = false this.isAdd = false
this.form.sourceType = res.result.sourceType this.form.sourceType = res.result.sourceType
this.form.sourceId = { this.form.sourceId = {
key: res.result.sourceId, key: res.result.sourceId||"",
label: res.result.sourceName label: res.result.sourceName||""
} }
this.form.name = res.result.name this.form.name = res.result.name
this.form.itemId = { this.form.itemId = {
@ -629,6 +642,7 @@ export default {
this.form.silenceCycle = res.result.silenceCycle this.form.silenceCycle = res.result.silenceCycle
this.form.contactId = res.result.contactId this.form.contactId = res.result.contactId
this.currId = res.result.id this.currId = res.result.id
this.visible = true
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning("This operation fails. Contact your system administrator")
} }
@ -654,14 +668,30 @@ export default {
}); });
}, },
resetForm() { resetForm() {
this.$refs.ruleForm.resetFields(); this.$refs.al_ruleForm.resetFields();
}, this.form= {
sourceType: undefined,
sourceId: undefined,
name: "",
itemId: undefined,
operator: undefined,
threshold: "",
silenceCycle: undefined,
contactId: undefined,
}
this.sourceOptions =[]
this.itemOptions = []
this.units = ""
}
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ant-row-flex{
flex-flow: nowrap;
}
.operators { .operators {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
@ -690,12 +720,21 @@ export default {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 1px solid rgba(13, 235, 201, 0.3); border-bottom: 1px solid rgba(13, 235, 201, 0.3);
margin: 0 0 15px 20px; margin: 0 0 0px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 10px; padding: 0 10px;
background: rgba(12, 235, 201, 0.05); background: rgba(12, 235, 201, 0.05);
.item-label{
display: inline-block;
font-size: 16px;
font-family: ArialMT;
color: #ade6ee;
line-height: 32px;
height: 32px;
margin-right: 10px;
}
.rules-add{ .rules-add{
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
@ -731,12 +770,12 @@ export default {
align-content: flex-start; align-content: flex-start;
&-item{ &-item{
width: 32.76%; width: 32.76%;
height: 275px; height: 224px;
// margin-top: 15px; // margin-top: 15px;
background-color: rgba(2, 40, 43, 0.5); background-color: rgba(2, 40, 43, 0.5);
border: solid 1px rgba(65, 111, 127, 0.5); border: solid 1px rgba(65, 111, 127, 0.5);
position: relative; position: relative;
margin-bottom: 15px; margin-top: 15px;
&-title{ &-title{
height: 50px; height: 50px;
padding: 0 15px 0 20px; padding: 0 15px 0 20px;