k_online_ui/src/components/selectAutoSelect/src/selectAutoSelect.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import IconDropDown from '@/components/IconDropDown'
interface TypeItem {
  partyType: ''
  partyname: []
}
interface ListItem {
  value: string
  label: string
}
interface dateoptions {
  value: string
  label: string
}
interface Props {
  AddDateType: TypeItem[]
  ASPlaceholder: string
  DateTypeoptions: dateoptions[]
  selectedPartyTypeoptions: Array<string>
  ASSearchMode: String
  ASSearchObj: Object
}
interface optionsItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const loading = ref(false)
const props = withDefaults(defineProps<Props>(), {})
const AddType = ref(props.AddDateType)
watch(
  () => props.AddDateType,
  (val) => {
    AddType.value = val
  },
  {
    immediate: true,
    deep: true
  }
)
// const ErrorNumber = ref(0)
const dataTypeoptions = ref<optionsItem[]>([])
const typeSelectIndex = ref(-1)
watch(
  () => props.selectedPartyTypeoptions,
  (newV) => {
    let arr: any = []
    if (newV.length == 0) {
      arr = props.DateTypeoptions
    } else {
      props.DateTypeoptions.forEach((item: any) => {
        let index = newV.findIndex((con: any) => {
          return con == item.value
        })
        if (index < 0) {
          arr.push(item)
        }
      })
    }
    dataTypeoptions.value = arr
  },
  {
    immediate: true,
    deep: true
  }
)
const ErrorNumber = ref(true)
const str = ref()
const search_field = ref()
const InputAutoSelect = (val: any) => {
  search_field.value = val
  if (val.includes('Agent')) {
    str.value = 'apex'
  } else {
    str.value = 'sales'
  }
}
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      $api
        .getMoreFiltersData({
          term: query,
          type: str.value,
          search_field: search_field.value,
          search_mode: props.ASSearchMode,
          ...props.ASSearchObj
        })
        .then((res: any) => {
          if (res.code == 200) {
            loading.value = false
            list.value = res.data.map((item: any) => {
              return { value: item, label: item }
            })
            options.value = list.value.filter((item) => {
              return item.label.toLowerCase().includes(query.toLowerCase())
            })
          }
        })
    }, 200)
  } else {
    options.value = []
  }
}
// 删除当前more type
const deleteType = (i: any) => {
  emit('delSelect', i, AddType.value[i].partyType)
  AddType.value.splice(i, 1)
}
// 选中type改变
const changeSelect = (val: any) => {
  emit('changeAutoSelectAddType', typeSelectIndex.value, val)
}
// 选中name改变
const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
let AutoSelectObj: any = {}
let AutoSelectObj2: any = {}
const changeAutoSelect = (val: any, value: any) => {
  AutoSelectObj[val] = value.join()
  AutoSelectObj2[val] = value
  if (value.length) {
    ErrorNumber.value = true
  } else {
    ErrorNumber.value = false
  }
  emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2, ErrorNumber.value)
}
const typeSelectFocus = (index: any, e: any) => {
  typeSelectIndex.value = index
}
const typeSelectBlur = () => {
  typeSelectIndex.value = -1
  let arr: any = []
  if (props.selectedPartyTypeoptions.length == 0) {
    arr = props.DateTypeoptions
  } else {
    props.DateTypeoptions.forEach((item: any) => {
      let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
        return con == item.value
      })
      if (index < 0) {
        arr.push(item)
      }
    })
  }
  dataTypeoptions.value = arr
}
const typeSelectClick = (index: any, val: any) => {
  if (AddType.value[index].partyType) {
    let j = props.DateTypeoptions.findIndex((item: any) => {
      return item.value == AddType.value[index].partyType
    })
    let i = dataTypeoptions.value.findIndex((item: any) => {
      return item.value == AddType.value[index].partyType
    })
    if (i < 0) {
      dataTypeoptions.value.push(props.DateTypeoptions[j])
    }
  } else {
    let arr: any = []
    if (props.selectedPartyTypeoptions.length == 0) {
      arr = props.DateTypeoptions
    } else {
      props.DateTypeoptions.forEach((item: any) => {
        let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
          return con == item.value
        })
        if (index < 0) {
          arr.push(item)
        }
      })
    }
    dataTypeoptions.value = arr
  }
}
</script>
<template>
  <div class="AddType" v-for="(item, index) in AddType" :key="index">
    <div>
      <div class="Date_Title">
        <div class="ETD_title">Party Type</div>
        <span class="iconfont_icon" @click="deleteType(index)">
          <svg class="iconfont icon_delete" aria-hidden="true">
            <use xlink:href="#icon-icon_delete_b"></use>
          </svg>
        </span>
      </div>
      <el-select
        v-model="AddType[index].partyType"
        :suffix-icon="IconDropDown"
        @blur="typeSelectBlur"
        class="testname"
        @focus="typeSelectFocus(index, $event)"
        @click="typeSelectClick(index, $event)"
        @change="changeSelect(AddType[index].partyType)"
        placeholder="Please Select Party Type"
      >
        <el-option
          v-for="item in dataTypeoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="margin-top: 16px">
      <div class="ETD_title">Party Details</div>
      <el-select
        v-model="AddType[index].partyname"
        multiple
        filterable
        remote
        :class="{
          is_error: AddType[index].partyType != '' && AddType[index].partyname.length == 0
        }"
        reserve-keyword
        :placeholder="props.ASPlaceholder"
        collapse-tags
        @input="InputAutoSelect(AddType[index].partyType)"
        @change="changeAutoSelect(AddType[index].partyType, AddType[index].partyname)"
        :disabled="AddType[index].partyType ? false : true"
        collapse-tags-tooltip
        :max-collapse-tags="3"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <el-checkbox :checked="AddType[index].partyname?.includes(item.value)"></el-checkbox>
          <div class="label">{{ item.value }}</div>
        </el-option>
      </el-select>
      <div
        class="error"
        v-if="AddType[index].partyType != '' && AddType[index].partyname.length == 0"
      >
        Please Input Party Details
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.AddType {
  background-color: var(--addparties-background-color);
  margin: 0 16px 8px 16px;
  padding: 8px;
  border-radius: var(--border-radius-6);
}

.ETD_title {
  font-size: var(--font-size-2);
  color: var(--color-neutral-2);
}

.Date_Title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon_delete {
  fill: var(--color-danger);
  cursor: pointer;
}

.el-select-dropdown__item.is-selected {
  div {
    color: var(--badge__content--warning);
  }

  background-color: transparent;
}

.el-select-dropdown__item {
  padding-left: 7.7px;
  display: flex;
  align-items: center;
}

.label {
  margin-left: 8px;
}

.el-select-dropdown__item.is-hovering {
  div {
    color: var(--badge__content--warning);
  }
}

.is_error {
  :deep(.el-select__wrapper) {
    box-shadow: 0 0 0 0.5px var(--color-danger);
  }
}
.error {
  font-size: 12px;
  color: var(--color-danger);
  line-height: 14px;
  margin-top: 5px;
}
</style>