Merge remote-tracking branch 'origin/dev_third_stage' into dev_third_stage

This commit is contained in:
liyawei
2022-06-20 17:19:45 +08:00
3 changed files with 203 additions and 1 deletions
@@ -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------forLOWCOD-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------forLOWCOD-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>
+2
View File
@@ -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"