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

字典数据组件调整支持下拉多选，

Browse Source 
Analysis Monitor 模块 Alarm History 搜索字段调整，Data Sources 使用字典数据
This commit is contained in:
任珮宇 2023-12-11 15:19:27 +08:00
parent 29d45c82e9
commit 487418b23a
2 changed files with 194 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/components/dict/JDictSelectTag.vue
View File

@ -1,16 +1,33 @@
<template> <template>
<a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled"> <a-radio-group v-if="tagType == 'radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
<a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio> <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
</a-radio-group> </a-radio-group>
<a-radio-group v-else-if="tagType=='radioButton'" buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled"> <a-radio-group
v-else-if="tagType == 'radioButton'"
buttonStyle="solid"
@change="handleInput"
:value="getValueSting"
:disabled="disabled"
>
<a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button> <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
</a-radio-group> </a-radio-group>
<a-select v-else-if="tagType=='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" :allowClear="allowClear" @change="handleInput"> <a-select
v-else-if="tagType == 'select'"
:getPopupContainer="getPopupContainer"
:placeholder="placeholder"
:disabled="disabled"
:value="getValueSting"
:allowClear="allowClear"
show-arrow
:mode="modeType"
:maxTagCount="1"
@change="handleInput"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value"> <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
<span style="display: inline-block;width: 100%" :title=" item.text || item.label "> <span style="display: inline-block; width: 100%" :title="item.text || item.label">
{{ item.text || item.label }} {{ item.text || item.label }}
</span> </span>
</a-select-option> </a-select-option>
@ -18,97 +35,100 @@
</template> </template>
<script> <script>
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api' import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
export default { export default {
name: "JDictSelectTag", name: 'JDictSelectTag',
props: { props: {
dictCode: String, modeType: String,
placeholder: String, dictCode: String,
disabled: Boolean, placeholder: String,
value: [String, Number], disabled: Boolean,
type: String, value: [String, Number, Array],
getPopupContainer:{ type: String,
type: Function, getPopupContainer: {
default: (node) => node.parentNode type: Function,
}, default: (node) => node.parentNode,
allowClear: {
type: Boolean,
default: true
}
}, },
data() { allowClear: {
return { type: Boolean,
dictOptions: [], default: true,
tagType:""
}
}, },
watch:{ },
dictCode:{ data() {
immediate:true, return {
handler() { dictOptions: [],
this.initDictData() tagType: '',
},
}
},
created() {
// console.log(this.dictCode);
if(!this.type || this.type==="list"){
this.tagType = "select"
}else{
this.tagType = this.type
}
//获取字典数据
// this.initDictData();
},
computed: {
getValueSting(){
// update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
// 当有null或“” placeholder不显示
return this.value != null ? this.value.toString() : undefined;
// update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
},
},
methods: {
initDictData() {
//优先从缓存中读取字典配置
if(getDictItemsFromCache(this.dictCode)){
this.dictOptions = getDictItemsFromCache(this.dictCode);
return
}
//根据字典Code, 初始化字典数组
ajaxGetDictItems(this.dictCode, null).then((res) => {
if (res.success) {
// console.log(res.result);
this.dictOptions = res.result;
}
})
},
handleInput(e='') {
let val;
if(Object.keys(e).includes('target')){
val = e.target.value
}else{
val = e
}
console.log(val);
this.$emit('change', val? val: undefined);
//LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
this.$emit('input', val? val: undefined);
},
setCurrentDictOptions(dictOptions){
this.dictOptions = dictOptions
},
getCurrentDictOptions(){
return this.dictOptions
}
},
model:{
prop: 'value',
event: 'change'
} }
} },
watch: {
dictCode: {
immediate: true,
handler() {
this.initDictData()
},
},
},
created() {
// console.log(this.dictCode);
if (!this.type || this.type === 'list') {
this.tagType = 'select'
} else {
this.tagType = this.type
}
//获取字典数据
// this.initDictData();
},
computed: {
getValueSting() {
// update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
// 当有null或“” placeholder不显示
// return this.value != null ? this.value.toString() : undefined
return Array.isArray(this.value) ? this.value : this.value != null ? this.value.toString() : undefined
// update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
},
},
methods: {
initDictData() {
//优先从缓存中读取字典配置
if (getDictItemsFromCache(this.dictCode)) {
this.dictOptions = getDictItemsFromCache(this.dictCode)
return
}
//根据字典Code, 初始化字典数组
ajaxGetDictItems(this.dictCode, null).then((res) => {
if (res.success) {
// console.log(res.result);
this.dictOptions = res.result
}
})
},
handleInput(e = '') {
console.log('qweq', e)
let val
if (Object.keys(e).includes('target')) {
val = e.target.value
} else {
val = e
}
console.log(val)
this.$emit('change', val ? val : undefined)
//LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
this.$emit('input', val ? val : undefined)
},
setCurrentDictOptions(dictOptions) {
this.dictOptions = dictOptions
},
getCurrentDictOptions() {
return this.dictOptions
},
},
model: {
prop: 'value',
event: 'change',
},
}
</script> </script>
<style scoped> <style scoped>

125
src/views/abnormalAlarm/components/searchBar.vue
View File

@ -4,7 +4,7 @@
<a-col flex="190px"> <a-col flex="190px">
<a-input placeholder="search..." /> <a-input placeholder="search..." />
</a-col> </a-col>
<a-col flex="310px" v-if="type=='alarmCenter'"> <a-col flex="310px" v-if="type == 'alarmCenter'">
<a-form-model-item label="Type"> <a-form-model-item label="Type">
<a-select <a-select
:value="queryParams.types" :value="queryParams.types"
@ -18,18 +18,17 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu"> <div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" /> <v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" /> <a-divider style="margin: 0" />
<div <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
style="padding: 4px 12px; cursor: pointer;" <a-checkbox v-model="allVal" @change="handleAllClickBox"
@mousedown="e => e.preventDefault()" ><span @click.prevent="handleAllClick">ALL</span></a-checkbox
> >
<a-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
</div> </div>
</div> </div>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'&& type!=='alarmAnalysis'"> <a-col flex="310px" v-if="type !== 'alarmCenter' && type !== 'analysisMonitor' && type !== 'alarmAnalysis'">
<a-form-model-item label="Name"> <a-form-model-item label="Name">
<a-select <a-select
:value="queryParams.names" :value="queryParams.names"
@ -44,20 +43,20 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu"> <div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" /> <v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" /> <a-divider style="margin: 0" />
<div <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
style="padding: 4px 12px; cursor: pointer;" <a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"
@mousedown="e => e.preventDefault()" ><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox
> >
<a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
</div> </div>
</div> </div>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col flex="270px" v-if="type ==='analysisMonitor'"> <a-col flex="270px" v-if="type === 'analysisMonitor'">
<a-form-model-item label="Station"> <a-form-model-item label="Station">
<a-select style="width:180px" <a-select
style="width: 180px"
:value="queryParams.stations" :value="queryParams.stations"
mode="multiple" mode="multiple"
placeholder="select..." placeholder="select..."
@ -71,20 +70,26 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu"> <div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" /> <v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" /> <a-divider style="margin: 0" />
<div <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
style="padding: 4px 12px; cursor: pointer;" <a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"
@mousedown="e => e.preventDefault()" ><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox
> >
<a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
</div> </div>
</div> </div>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col flex="310px" v-if="type ==='analysisMonitor'"> <a-col flex="375px" v-if="type === 'analysisMonitor'">
<a-form-model-item label="Data Sources"> <a-form-model-item label="Data Sources">
<a-select style="width:180px" <j-dict-select-tag
placeholder="select..."
:value="queryParams.sources"
dict-code="alarm_analyse_rule_source"
modeType="multiple"
@change="onSourceChange"
/>
<!-- <a-select style="width:180px"
:value="queryParams.sources" :value="queryParams.sources"
mode="multiple" mode="multiple"
placeholder="select..." placeholder="select..."
@ -105,7 +110,7 @@
<a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox> <a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
</div> </div>
</div> </div>
</a-select> </a-select> -->
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col flex="380px"> <a-col flex="380px">
@ -129,17 +134,17 @@
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment'; import moment from 'moment'
export default { export default {
props: { props: {
type: { type: {
type: String, type: String,
default: '' default: '',
}, },
options: { options: {
type: Array, type: Array,
default:()=>[] default: () => [],
} },
}, },
components: { components: {
VNodes: { VNodes: {
@ -155,36 +160,36 @@ export default {
allVal_source: false, allVal_source: false,
typeOptions: [ typeOptions: [
{ {
label: "Server", label: 'Server',
value: "Server" value: 'Server',
}, },
{ {
label: "Database", label: 'Database',
value: "Database" value: 'Database',
}, },
{ {
label: "E-MAIL", label: 'E-MAIL',
value: "Email" value: 'Email',
}, },
], ],
sourceOptions: [ sourceOptions: [
{ {
label: "IDC", label: 'IDC',
value: "idc" value: 'idc',
}, },
{ {
label: "ARMD", label: 'ARMD',
value: "armd" value: 'armd',
} },
], ],
queryParams: { queryParams: {
types: ["Server","Database","Email"], types: ['Server', 'Database', 'Email'],
names: undefined, names: undefined,
stations: undefined, stations: undefined,
sources: undefined, sources: undefined,
startDate: dateFormat(new Date(), 'yyyy-MM-dd'), startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd') endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
} },
} }
}, },
methods: { methods: {
@ -199,7 +204,7 @@ export default {
}, },
setSelectVal() { setSelectVal() {
if (this.allVal) { if (this.allVal) {
this.queryParams.types = this.typeOptions.map(item => item.value) this.queryParams.types = this.typeOptions.map((item) => item.value)
} else { } else {
this.queryParams.types = [] this.queryParams.types = []
} }
@ -214,7 +219,7 @@ export default {
}, },
setSelectVal_name() { setSelectVal_name() {
if (this.allVal_name) { if (this.allVal_name) {
this.queryParams.names = this.options.map(item => item.value) this.queryParams.names = this.options.map((item) => item.value)
} else { } else {
this.queryParams.names = [] this.queryParams.names = []
} }
@ -229,15 +234,13 @@ export default {
}, },
setSelectVal_station() { setSelectVal_station() {
if (this.allVal_station) { if (this.allVal_station) {
this.queryParams.stations = this.options.map(item => item.value) this.queryParams.stations = this.options.map((item) => item.value)
} else { } else {
this.queryParams.stations = [] this.queryParams.stations = []
} }
}, },
filterOption(input, option) { filterOption(input, option) {
return ( return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
}, },
handleAllClickBox_source(e) { handleAllClickBox_source(e) {
this.allVal_source = e.target.checked this.allVal_source = e.target.checked
@ -249,7 +252,7 @@ export default {
}, },
setSelectVal_source() { setSelectVal_source() {
if (this.allVal_source) { if (this.allVal_source) {
this.queryParams.sources = this.sourceOptions.map(item => item.value) this.queryParams.sources = this.sourceOptions.map((item) => item.value)
} else { } else {
this.queryParams.sources = [] this.queryParams.sources = []
} }
@ -282,6 +285,7 @@ export default {
} }
}, },
onSourceChange(val) { onSourceChange(val) {
console.log(val)
this.queryParams.sources = val this.queryParams.sources = val
let length = this.sourceOptions.length let length = this.sourceOptions.length
if (val.length === length) { if (val.length === length) {
@ -295,14 +299,14 @@ export default {
this.queryParams.endDate = dateString[1] this.queryParams.endDate = dateString[1]
}, },
onSearch() { onSearch() {
this.$emit("search",this.queryParams) this.$emit('search', this.queryParams)
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search-bar{ .search-bar {
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);
@ -310,13 +314,13 @@ export default {
padding: 8px 10px; padding: 8px 10px;
background: rgba(12, 235, 201, 0.05); background: rgba(12, 235, 201, 0.05);
} }
.ant-input{ .ant-input {
width: 166px; width: 166px;
} }
.ant-select{ .ant-select {
width: 240px; width: 240px;
} }
.ant-calendar-picker{ .ant-calendar-picker {
width: 270px; width: 270px;
} }
.search-btn { .search-btn {
@ -331,7 +335,8 @@ export default {
.ant-form-item { .ant-form-item {
display: flex; display: flex;
margin-bottom: 0; margin-bottom: 0;
.ant-form-item-label,.ant-form-item-control { .ant-form-item-label,
.ant-form-item-control {
line-height: 32px; line-height: 32px;
height: 32px; height: 32px;
} }
@ -347,12 +352,12 @@ export default {
} }
} }
} }
.ant-calendar-range-picker-separator{ .ant-calendar-range-picker-separator {
color: white; color: white;
} }
.ant-form-item-control-wrapper { .ant-form-item-control-wrapper {
width: 100%; width: 100%;
overflow: hidden; // overflow: hidden;
} }
} }
} }
@ -366,7 +371,7 @@ export default {
} }
} }
} }
.ant-select-dropdown-content{ .ant-select-dropdown-content {
position: relative; position: relative;
background: #03353f; background: #03353f;
} }