zhangherong
2025-03-31 67000bf11ea45f2f29177e203e91d42f524faa59
src/views/eam/equipment/modules/LxSearchEquipmentSelect.vue
@@ -13,148 +13,110 @@
    @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)
        }
      })
@@ -162,53 +124,34 @@
    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: {