Merge remote-tracking branch 'origin/dev_third_stage' into dev_third_stage
This commit is contained in:
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
|
||||
<a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">
|
||||
<span :title='item.text||item.label'>
|
||||
{{ (item.text && item.text.length > 6 ? item.text.slice(0, 5) + '...' : item.text) || (item.label && item.label.length > 6 ? item.label.slice(0, 5) + '...' : item.label) }}
|
||||
</span>
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
|
||||
<a-select
|
||||
v-else-if="tagType=='select'"
|
||||
:value="arrayValue"
|
||||
@change="onChange"
|
||||
:disabled="disabled"
|
||||
mode="multiple"
|
||||
:placeholder="placeholder"
|
||||
:getPopupContainer="getParentContainer"
|
||||
optionFilterProp="children"
|
||||
:filterOption="filterOption">
|
||||
<a-select-option
|
||||
v-for="(item,index) in dictOptions"
|
||||
:key="index"
|
||||
:value="item.value">
|
||||
<span class="itemOption" :title="item.text || item.label">
|
||||
{{ item.text || item.label }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: 'JMultiSelectTag',
|
||||
props: {
|
||||
dictCode: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
db_field_name: String,
|
||||
type: String,
|
||||
options: Array,
|
||||
spliter: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ','
|
||||
},
|
||||
popContainer: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dictOptions: [],
|
||||
tagType: '',
|
||||
arrayValue: !this.value ? [] : this.value.split(this.spliter),
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.type || this.type === 'list_multi') {
|
||||
this.tagType = 'select'
|
||||
} else {
|
||||
this.tagType = this.type
|
||||
}
|
||||
//获取字典数据
|
||||
//this.initDictData();
|
||||
},
|
||||
watch: {
|
||||
options: function(val) {
|
||||
this.setCurrentDictOptions(val)
|
||||
},
|
||||
dictCode: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.initDictData()
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
if (!val) {
|
||||
this.arrayValue = []
|
||||
} else {
|
||||
this.arrayValue = this.value.split(this.spliter)
|
||||
let arrayValue = JSON.parse(JSON.stringify(this.arrayValue))
|
||||
let item = []
|
||||
this.dictOptions.forEach(res => {
|
||||
arrayValue.forEach((val, index) => {
|
||||
if (res.value == val && index != 0) {
|
||||
item.push(res.text || res.label)
|
||||
}
|
||||
|
||||
})
|
||||
this.content = item.join(',')
|
||||
})
|
||||
let arrayLabel = []
|
||||
this.dictOptions.forEach((item) => {
|
||||
this.arrayValue.forEach((val) => {
|
||||
if (item.value === val) {
|
||||
arrayLabel.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('changelabel', arrayLabel)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDictData() {
|
||||
if (this.options && this.options.length > 0) {
|
||||
this.dictOptions = [...this.options]
|
||||
} else {
|
||||
//优先从缓存中读取字典配置
|
||||
let cacheOption = getDictItemsFromCache(this.dictCode)
|
||||
if (cacheOption && cacheOption.length > 0) {
|
||||
this.dictOptions = cacheOption
|
||||
return
|
||||
}
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems(this.dictCode, null).then((res) => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onChange(selectedValue) {
|
||||
let content = []
|
||||
let item = []
|
||||
this.dictOptions.forEach(res => {
|
||||
selectedValue.forEach((val, index) => {
|
||||
if (res.value == val) {
|
||||
content.push(res.text || res.label)
|
||||
if (index != 0) {
|
||||
item.push(res.text || res.label)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
this.content = item.join(',')
|
||||
})
|
||||
this.$emit('change', selectedValue.join(this.spliter))
|
||||
this.$emit('changeQuery', content.join(this.spliter), this.db_field_name)
|
||||
},
|
||||
setCurrentDictOptions(dictOptions) {
|
||||
this.dictOptions = dictOptions
|
||||
|
||||
},
|
||||
getCurrentDictOptions() {
|
||||
return this.dictOptions
|
||||
},
|
||||
getParentContainer(node) {
|
||||
if (!this.popContainer) {
|
||||
return node.parentNode
|
||||
} else {
|
||||
return document.querySelector(this.popContainer)
|
||||
}
|
||||
},
|
||||
// update--begin--autor:lvdandan-----date:20201120------for:LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
// update--end--autor:lvdandan-----date:20201120------for:LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.itemOption {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/*.ant-select-selection__choice{*/
|
||||
/* max-width: 50% !important;*/
|
||||
/*}*/
|
||||
.ant-select-selection--multiple {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ant-select-selection--multiple::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
import JDictSelectTag from './JDictSelectTag.vue'
|
||||
import JMultiSelectTag from './JMultiSelectTag.vue'
|
||||
import JMultiSelectTagOnlyRz from './JMultiSelectTagOnlyRz.vue'
|
||||
import JSearchSelectTag from './JSearchSelectTag.vue'
|
||||
import { filterMultiDictText,filterDictText,initDictOptions,filterDictTextByCache } from './JDictSelectUtil'
|
||||
|
||||
@@ -7,6 +8,7 @@ export default {
|
||||
install: function (Vue) {
|
||||
Vue.component('JDictSelectTag',JDictSelectTag);
|
||||
Vue.component('JMultiSelectTag',JMultiSelectTag);
|
||||
Vue.component('JMultiSelectTagOnlyRz',JMultiSelectTagOnlyRz);
|
||||
Vue.component('JSearchSelectTag',JSearchSelectTag);
|
||||
Vue.prototype.$initDictOptions = (dictCode) => initDictOptions(dictCode)
|
||||
Vue.prototype.$filterMultiDictText = (dictOptions, text) => filterMultiDictText(dictOptions, text)
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
:title="$t('ParameterName')">{{$t('certificationCategory')}}</span>
|
||||
</div>
|
||||
<a-form-model-item class="itemModel-multi" prop="certCategory">
|
||||
<j-multi-select-tag class="box-input" v-model="formInline.certCategory"
|
||||
<j-multi-select-tag-only-rz class="box-input" v-model="formInline.certCategory"
|
||||
@change='Onchange'
|
||||
v-on:changelabel='Onchangelabel'
|
||||
:disabled="disabled"
|
||||
|
||||
Reference in New Issue
Block a user