字典数据组件调整支持下拉多选，
Analysis Monitor 模块 Alarm History 搜索字段调整，Data Sources 使用字典数据
This commit is contained in:
parent
29d45c82e9
commit
487418b23a
|
|
@ -1,16 +1,33 @@
|
|||
<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-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 ">
|
||||
<span style="display: inline-block; width: 100%" :title="item.text || item.label">
|
||||
{{ item.text || item.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
|
|
@ -18,97 +35,100 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
|
||||
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "JDictSelectTag",
|
||||
props: {
|
||||
dictCode: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
value: [String, Number],
|
||||
type: String,
|
||||
getPopupContainer:{
|
||||
type: Function,
|
||||
default: (node) => node.parentNode
|
||||
},
|
||||
allowClear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
export default {
|
||||
name: 'JDictSelectTag',
|
||||
props: {
|
||||
modeType: String,
|
||||
dictCode: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
value: [String, Number, Array],
|
||||
type: String,
|
||||
getPopupContainer: {
|
||||
type: Function,
|
||||
default: (node) => node.parentNode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dictOptions: [],
|
||||
tagType:""
|
||||
}
|
||||
allowClear: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
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;
|
||||
// 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'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dictOptions: [],
|
||||
tagType: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -4,87 +4,92 @@
|
|||
<a-col flex="190px">
|
||||
<a-input placeholder="search..." />
|
||||
</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-select
|
||||
:value="queryParams.types"
|
||||
mode="multiple"
|
||||
:maxTagCount="1"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
<a-select
|
||||
:value="queryParams.types"
|
||||
mode="multiple"
|
||||
:maxTagCount="1"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<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-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</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-select
|
||||
:value="queryParams.names"
|
||||
mode="multiple"
|
||||
<a-select
|
||||
:value="queryParams.names"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
show-arrow
|
||||
:maxTagCount="1"
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="options"
|
||||
:options="options"
|
||||
@change="onNameChange"
|
||||
>
|
||||
<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-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</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-select style="width:180px"
|
||||
:value="queryParams.stations"
|
||||
mode="multiple"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
:value="queryParams.stations"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="options"
|
||||
:options="options"
|
||||
@change="onStationChange"
|
||||
>
|
||||
<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-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
|
||||
<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
|
||||
>
|
||||
</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">
|
||||
|
|
@ -113,7 +118,7 @@
|
|||
<a-range-picker
|
||||
dropdownClassName="asd"
|
||||
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
|
|
@ -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,14 +299,14 @@ export default {
|
|||
this.queryParams.endDate = dateString[1]
|
||||
},
|
||||
onSearch() {
|
||||
this.$emit("search",this.queryParams)
|
||||
}
|
||||
this.$emit('search', this.queryParams)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-bar{
|
||||
.search-bar {
|
||||
height: 50px;
|
||||
border-top: 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;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
}
|
||||
.ant-input{
|
||||
.ant-input {
|
||||
width: 166px;
|
||||
}
|
||||
.ant-select{
|
||||
.ant-select {
|
||||
width: 240px;
|
||||
}
|
||||
.ant-calendar-picker{
|
||||
.ant-calendar-picker {
|
||||
width: 270px;
|
||||
}
|
||||
.search-btn {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -347,12 +352,12 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-calendar-range-picker-separator{
|
||||
.ant-calendar-range-picker-separator {
|
||||
color: white;
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -366,7 +371,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-select-dropdown-content{
|
||||
.ant-select-dropdown-content {
|
||||
position: relative;
|
||||
background: #03353f;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user