| | |
| | | @change="handleAsyncChange" |
| | | allowClear |
| | | :notFoundContent="loading ? undefined : null" |
| | | :mode="mode" |
| | | mode="default" |
| | | > |
| | | <template #suffixIcon> |
| | | <a-icon type="search" /> |
| | | </template> |
| | | <a-spin v-if="loading" slot="notFoundContent" size="small"/> |
| | | <a-spin v-if="loading" slot="notFoundContent" size="small" /> |
| | | <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option> |
| | | </a-select> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import { ajaxGetDictItems,getDictItemsFromCache } from '@/api/api' |
| | | import debounce from 'lodash/debounce'; |
| | | import debounce from 'lodash/debounce' |
| | | import { getAction } from '@/api/manage' |
| | | |
| | | export default { |
| | | name: 'LxSearchEquipmentSelect', |
| | | props:{ |
| | | props: { |
| | | disabled: Boolean, |
| | | value: [String, Number], |
| | | dictOptions: Array, |
| | | placeholder:{ |
| | | type:String, |
| | | default:"请选择", |
| | | required:false |
| | | placeholder: { |
| | | type: String, |
| | | default: '请选择', |
| | | required: false |
| | | }, |
| | | pageSize:{ |
| | | pageSize: { |
| | | type: Number, |
| | | default: 20, |
| | | required: false |
| | | }, |
| | | mode:{ |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | }, |
| | | data(){ |
| | | this.loadData = debounce(this.loadData, 800);//消抖 |
| | | this.lastLoad = 0; |
| | | data() { |
| | | this.loadData = debounce(this.loadData, 800)//消抖 |
| | | this.lastLoad = 0 |
| | | return { |
| | | loading:false, |
| | | selectedValue:[], |
| | | selectedAsyncValue:[], |
| | | options: [], |
| | | loading: false, |
| | | selectedValue: undefined, |
| | | selectedAsyncValue: undefined, |
| | | options: [] |
| | | } |
| | | }, |
| | | created(){ |
| | | this.initDictData(); |
| | | created() { |
| | | // this.initDictData() |
| | | }, |
| | | watch:{ |
| | | "value":{ |
| | | immediate:true, |
| | | handler(val){ |
| | | if(!val){ |
| | | if(val==0){ |
| | | this.initSelectValue() |
| | | }else{ |
| | | this.selectedValue=[] |
| | | this.selectedAsyncValue=[] |
| | | } |
| | | }else{ |
| | | watch: { |
| | | 'value': { |
| | | immediate: true, |
| | | handler(val) { |
| | | if (!val) { |
| | | this.initDictData(); |
| | | } else { |
| | | this.initSelectValue() |
| | | } |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | methods:{ |
| | | initSelectValue(){ |
| | | methods: { |
| | | initSelectValue() { |
| | | if(!this.selectedAsyncValue || !this.selectedAsyncValue.key || this.selectedAsyncValue.key!=this.value){ |
| | | console.log("这才请求后台") |
| | | //update-begin-author:taoyan date:20220112 for: 方法initSelectValue 根据下拉框实际值查询下拉框的显示的文本 因后台接口只处理3个参数,所以将过滤条件去掉 |
| | | // TODO 隐患 查询效率问题 还是应该在后台作筛选 |
| | | let itemDictStr = this.dict |
| | | let arr = itemDictStr.split(',') |
| | | if(arr && arr.length==4){ |
| | | // 删除最后一个元素 |
| | | arr.pop(); |
| | | itemDictStr = arr.join(',') |
| | | } |
| | | //update-end-author:taoyan date:20220112 for: 方法initSelectValue 根据下拉框实际值查询下拉框的显示的文本 因后台接口只处理3个参数,所以将过滤条件去掉 |
| | | getAction(`/eam/equipment/asyncLoadEquipment`,{key:this.value}).then(res=>{ |
| | | getAction(`/eam/equipment/asyncLoadEquipment`, { id: this.value }).then(res=>{ |
| | | if(res.success){ |
| | | //update-begin---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选------------ |
| | | //判断是否多选 |
| | | if(this.mode === 'multiple'){ |
| | | if(res.result && res.result.length>0){ |
| | | let itemArray = []; |
| | | let valueArray = this.value.split(",") |
| | | for (let i = 0; i < res.result.length; i++) { |
| | | itemArray.push({ |
| | | key:valueArray[i], |
| | | label:res.result[i] |
| | | }) |
| | | } |
| | | this.selectedAsyncValue = itemArray |
| | | }else{ |
| | | this.selectedAsyncValue = [] |
| | | this.selectedValue = [] |
| | | } |
| | | }else{ |
| | | if(res.result && res.result.length > 0){ |
| | | let obj = { |
| | | key:this.value, |
| | | label:res.result |
| | | key : this.value, |
| | | label: res.result[0].text |
| | | } |
| | | this.selectedAsyncValue = {...obj} |
| | | this.selectedAsyncValue = {...obj}; |
| | | } |
| | | //update-end---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选-------------- |
| | | this.options = res.result; |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | loadData(value){ |
| | | console.log("数据加载",value) |
| | | this.lastLoad +=1 |
| | | loadData(value) { |
| | | console.log('数据加载', value) |
| | | this.lastLoad += 1 |
| | | const currentLoad = this.lastLoad |
| | | this.options = [] |
| | | this.loading=true |
| | | this.loading = true |
| | | // 字典code格式:table,text,code |
| | | getAction(`/eam/equipment/asyncLoadEquipment`,{keyword:value, pageSize: this.pageSize}).then(res=>{ |
| | | this.loading=false |
| | | if(res.success){ |
| | | if(currentLoad!=this.lastLoad){ |
| | | getAction(`/eam/equipment/asyncLoadEquipment`, { keyword: value, pageSize: this.pageSize }).then(res => { |
| | | this.loading = false |
| | | if (res.success) { |
| | | if (currentLoad != this.lastLoad) { |
| | | return |
| | | } |
| | | this.options = res.result |
| | | console.log("我是第一个",res) |
| | | }else{ |
| | | console.log('我是第一个', res) |
| | | } else { |
| | | this.$message.warning(res.message) |
| | | } |
| | | |
| | | }) |
| | | |
| | | }, |
| | | initDictData(){ |
| | | initDictData() { |
| | | //异步一开始也加载一点数据 |
| | | this.loading=true |
| | | getAction(`/eam/equipment/asyncLoadEquipment`,{pageSize: this.pageSize, keyword:''}).then(res=>{ |
| | | this.loading=false |
| | | if(res.success){ |
| | | this.options = res.result |
| | | }else{ |
| | | this.loading = true |
| | | getAction(`/eam/equipment/asyncLoadEquipment`, { pageSize: this.pageSize, keyword: '' }).then(res => { |
| | | this.loading = false |
| | | if (res.success) { |
| | | this.options = [...res.result] |
| | | } else { |
| | | this.$message.warning(res.message) |
| | | } |
| | | }) |
| | |
| | | filterOption(input, option) { |
| | | return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
| | | }, |
| | | handleChange (selectedValue) { |
| | | console.log("selectedValue",selectedValue) |
| | | this.selectedValue = selectedValue |
| | | this.callback() |
| | | }, |
| | | handleAsyncChange(selectedObj){ |
| | | handleAsyncChange(selectedObj) { |
| | | //update-begin-author:scott date:20201222 for:【搜索】搜索查询组件,删除条件,默认下拉还是上次的缓存数据,不好 JT-191 |
| | | if(selectedObj){ |
| | | if (selectedObj) { |
| | | this.selectedAsyncValue = selectedObj |
| | | //update-begin---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选------------ |
| | | if(this.mode ==='multiple'){ |
| | | let keyArray = [] |
| | | for (let i = 0; i < selectedObj.length; i++) { |
| | | keyArray.push(selectedObj[i].key) |
| | | } |
| | | this.selectedValue = keyArray |
| | | }else{ |
| | | this.selectedValue = selectedObj.key |
| | | } |
| | | this.selectedValue = selectedObj.key |
| | | //update-end---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选------------ |
| | | }else{ |
| | | } else { |
| | | this.selectedAsyncValue = null |
| | | this.selectedValue = null |
| | | this.options = null |
| | | this.loadData("") |
| | | this.loadData('') |
| | | } |
| | | this.callback() |
| | | //update-end-author:scott date:20201222 for:【搜索】搜索查询组件,删除条件,默认下拉还是上次的缓存数据,不好 JT-191 |
| | | }, |
| | | callback(){ |
| | | //update-begin---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选------------ |
| | | if(this.mode === 'multiple'){ |
| | | this.$emit('change', this.selectedValue.join(",")); |
| | | }else{ |
| | | this.$emit('change', this.selectedValue); |
| | | } |
| | | //update-end---author:wangshuai ---date:20221115 for:[issues/4213]JSearchSelectTag改造支持多选------------ |
| | | callback() { |
| | | this.$emit('change', this.selectedValue) |
| | | }, |
| | | getParentContainer(node){ |
| | | if(typeof this.getPopupContainer === 'function'){ |
| | | getParentContainer(node) { |
| | | if (typeof this.getPopupContainer === 'function') { |
| | | return this.getPopupContainer(node) |
| | | } else if(!this.popContainer){ |
| | | } else if (!this.popContainer) { |
| | | return node.parentNode |
| | | }else{ |
| | | } else { |
| | | return document.querySelector(this.popContainer) |
| | | } |
| | | }, |
| | | } |
| | | |
| | | }, |
| | | model: { |