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 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">
@ -21,26 +38,27 @@
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: {
@ -49,12 +67,12 @@
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
} }
@ -65,7 +83,8 @@
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的文字 ------
}, },
}, },
@ -73,7 +92,7 @@
initDictData() { initDictData() {
//优先从缓存中读取字典配置 //优先从缓存中读取字典配置
if (getDictItemsFromCache(this.dictCode)) { if (getDictItemsFromCache(this.dictCode)) {
this.dictOptions = getDictItemsFromCache(this.dictCode); this.dictOptions = getDictItemsFromCache(this.dictCode)
return return
} }
@ -81,33 +100,34 @@
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)
let val
if (Object.keys(e).includes('target')) { 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>

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

@ -18,12 +18,11 @@
<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>
@ -44,12 +43,11 @@
<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>
@ -57,7 +55,8 @@
</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,8 +299,8 @@ 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>
@ -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;
} }
@ -352,7 +357,7 @@ export default {
} }
.ant-form-item-control-wrapper { .ant-form-item-control-wrapper {
width: 100%; width: 100%;
overflow: hidden; // overflow: hidden;
} }
} }
} }