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

100
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: {
modeType: String,
dictCode: String, dictCode: String,
placeholder: String, placeholder: String,
disabled: Boolean, disabled: Boolean,
value: [String, Number], value: [String, Number, Array],
type: String, type: String,
getPopupContainer:{ getPopupContainer: {
type: Function, type: Function,
default: (node) => node.parentNode default: (node) => node.parentNode,
}, },
allowClear: { allowClear: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
dictOptions: [], dictOptions: [],
tagType:"" tagType: '',
} }
}, },
watch:{ watch: {
dictCode:{ dictCode: {
immediate:true, immediate: true,
handler() { handler() {
this.initDictData() this.initDictData()
}, },
} },
}, },
created() { created() {
// console.log(this.dictCode); // console.log(this.dictCode);
if(!this.type || this.type==="list"){ if (!this.type || this.type === 'list') {
this.tagType = "select" this.tagType = 'select'
}else{ } else {
this.tagType = this.type this.tagType = this.type
} }
//获取字典数据 //获取字典数据
// this.initDictData(); // this.initDictData();
}, },
computed: { computed: {
getValueSting(){ getValueSting() {
// update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------ // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
// 当有null或“” placeholder不显示 // 当有null或“” placeholder不显示
return this.value != null ? this.value.toString() : undefined; // 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的文字 ------ // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
}, },
}, },
methods: { methods: {
initDictData() { initDictData() {
//优先从缓存中读取字典配置 //优先从缓存中读取字典配置
if(getDictItemsFromCache(this.dictCode)){ if (getDictItemsFromCache(this.dictCode)) {
this.dictOptions = getDictItemsFromCache(this.dictCode); this.dictOptions = getDictItemsFromCache(this.dictCode)
return return
} }
//根据字典Code, 初始化字典数组 //根据字典Code, 初始化字典数组
ajaxGetDictItems(this.dictCode, null).then((res) => { ajaxGetDictItems(this.dictCode, null).then((res) => {
if (res.success) { if (res.success) {
// console.log(res.result); // console.log(res.result);
this.dictOptions = res.result; this.dictOptions = res.result
} }
}) })
}, },
handleInput(e='') { handleInput(e = '') {
let val; console.log('qweq', e)
if(Object.keys(e).includes('target')){ let val
if (Object.keys(e).includes('target')) {
val = e.target.value val = e.target.value
}else{ } else {
val = e val = e
} }
console.log(val); console.log(val)
this.$emit('change', val? val: undefined); this.$emit('change', val ? val : undefined)
//LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格 //LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
this.$emit('input', val? val: undefined); this.$emit('input', val ? val : undefined)
}, },
setCurrentDictOptions(dictOptions){ setCurrentDictOptions(dictOptions) {
this.dictOptions = dictOptions this.dictOptions = dictOptions
}, },
getCurrentDictOptions(){ getCurrentDictOptions() {
return this.dictOptions return this.dictOptions
}
}, },
model:{ },
model: {
prop: 'value', prop: 'value',
event: 'change' event: 'change',
} },
} }
</script> </script>
<style scoped> <style scoped>

119
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;
} }