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

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

@ -3,11 +3,28 @@
<a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
</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-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="" />
<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">
@ -21,26 +38,27 @@
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
export default {
name: "JDictSelectTag",
name: 'JDictSelectTag',
props: {
modeType: String,
dictCode: String,
placeholder: String,
disabled: Boolean,
value: [String, Number],
value: [String, Number, Array],
type: String,
getPopupContainer: {
type: Function,
default: (node) => node.parentNode
default: (node) => node.parentNode,
},
allowClear: {
type: Boolean,
default: true
}
default: true,
},
},
data() {
return {
dictOptions: [],
tagType:""
tagType: '',
}
},
watch: {
@ -49,12 +67,12 @@
handler() {
this.initDictData()
},
}
},
},
created() {
// console.log(this.dictCode);
if(!this.type || this.type==="list"){
this.tagType = "select"
if (!this.type || this.type === 'list') {
this.tagType = 'select'
} else {
this.tagType = this.type
}
@ -65,7 +83,8 @@
getValueSting() {
// update-begin author:wangshuai date:20200601 for: 不显示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的文字 ------
},
},
@ -73,7 +92,7 @@
initDictData() {
//优先从缓存中读取字典配置
if (getDictItemsFromCache(this.dictCode)) {
this.dictOptions = getDictItemsFromCache(this.dictCode);
this.dictOptions = getDictItemsFromCache(this.dictCode)
return
}
@ -81,33 +100,34 @@
ajaxGetDictItems(this.dictCode, null).then((res) => {
if (res.success) {
// console.log(res.result);
this.dictOptions = res.result;
this.dictOptions = res.result
}
})
},
handleInput(e = '') {
let val;
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);
console.log(val)
this.$emit('change', val ? val : undefined)
//LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
this.$emit('input', val? val: undefined);
this.$emit('input', val ? val : undefined)
},
setCurrentDictOptions(dictOptions) {
this.dictOptions = dictOptions
},
getCurrentDictOptions() {
return this.dictOptions
}
},
},
model: {
prop: 'value',
event: 'change'
}
event: 'change',
},
}
</script>

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

@ -18,12 +18,11 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
<a-divider style="margin: 0" />
<div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
<a-checkbox v-model="allVal" @change="handleAllClickBox"
><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>
</a-select>
@ -44,12 +43,11 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
<a-divider style="margin: 0" />
<div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
<a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"
><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>
</a-select>
@ -57,7 +55,8 @@
</a-col>
<a-col flex="270px" v-if="type === 'analysisMonitor'">
<a-form-model-item label="Station">
<a-select style="width:180px"
<a-select
style="width: 180px"
:value="queryParams.stations"
mode="multiple"
placeholder="select..."
@ -71,20 +70,26 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
<a-divider style="margin: 0" />
<div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
<a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"
><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>
</a-select>
</a-form-model-item>
</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-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"
mode="multiple"
placeholder="select..."
@ -105,7 +110,7 @@
<a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
</div>
</div>
</a-select>
</a-select> -->
</a-form-model-item>
</a-col>
<a-col flex="380px">
@ -129,17 +134,17 @@
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment';
import moment from 'moment'
export default {
props: {
type: {
type: String,
default: ''
default: '',
},
options: {
type: Array,
default:()=>[]
}
default: () => [],
},
},
components: {
VNodes: {
@ -155,36 +160,36 @@ export default {
allVal_source: false,
typeOptions: [
{
label: "Server",
value: "Server"
label: 'Server',
value: 'Server',
},
{
label: "Database",
value: "Database"
label: 'Database',
value: 'Database',
},
{
label: "E-MAIL",
value: "Email"
label: 'E-MAIL',
value: 'Email',
},
],
sourceOptions: [
{
label: "IDC",
value: "idc"
label: 'IDC',
value: 'idc',
},
{
label: "ARMD",
value: "armd"
}
label: 'ARMD',
value: 'armd',
},
],
queryParams: {
types: ["Server","Database","Email"],
types: ['Server', 'Database', 'Email'],
names: undefined,
stations: undefined,
sources: undefined,
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
}
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
},
}
},
methods: {
@ -199,7 +204,7 @@ export default {
},
setSelectVal() {
if (this.allVal) {
this.queryParams.types = this.typeOptions.map(item => item.value)
this.queryParams.types = this.typeOptions.map((item) => item.value)
} else {
this.queryParams.types = []
}
@ -214,7 +219,7 @@ export default {
},
setSelectVal_name() {
if (this.allVal_name) {
this.queryParams.names = this.options.map(item => item.value)
this.queryParams.names = this.options.map((item) => item.value)
} else {
this.queryParams.names = []
}
@ -229,15 +234,13 @@ export default {
},
setSelectVal_station() {
if (this.allVal_station) {
this.queryParams.stations = this.options.map(item => item.value)
this.queryParams.stations = this.options.map((item) => item.value)
} else {
this.queryParams.stations = []
}
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
handleAllClickBox_source(e) {
this.allVal_source = e.target.checked
@ -249,7 +252,7 @@ export default {
},
setSelectVal_source() {
if (this.allVal_source) {
this.queryParams.sources = this.sourceOptions.map(item => item.value)
this.queryParams.sources = this.sourceOptions.map((item) => item.value)
} else {
this.queryParams.sources = []
}
@ -282,6 +285,7 @@ export default {
}
},
onSourceChange(val) {
console.log(val)
this.queryParams.sources = val
let length = this.sourceOptions.length
if (val.length === length) {
@ -295,8 +299,8 @@ export default {
this.queryParams.endDate = dateString[1]
},
onSearch() {
this.$emit("search",this.queryParams)
}
this.$emit('search', this.queryParams)
},
},
}
</script>
@ -331,7 +335,8 @@ export default {
.ant-form-item {
display: flex;
margin-bottom: 0;
.ant-form-item-label,.ant-form-item-control {
.ant-form-item-label,
.ant-form-item-control {
line-height: 32px;
height: 32px;
}
@ -352,7 +357,7 @@ export default {
}
.ant-form-item-control-wrapper {
width: 100%;
overflow: hidden;
// overflow: hidden;
}
}
}