zhengbasai/library/components/SelectDaili/index.vue

<template>
  <div>
    <el-select
      v-model="supplier_id"
      clearable
      :disabled="disabled"
      filterable
      :loading="loading"
      placeholder="请输入供应商简称"
      remote
      :remote-method="remoteMethod"
      reserve-keyword
      style="width: 100%"
      @change="changeFactory"
    >
      <el-option
        v-for="item in supplierList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
  import { getSupplierList } from './api/index'
  export default defineComponent({
    name: 'BatchSend',
    props: {
      supplier: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        supplierList: [],
        supplier_id: '', //工厂id
        loading: true,
      })
      watch(
        () => props.supplier,
        () => {
          console.log(props.supplier, ' props.supplierId')
          if (props.supplier) {
            state.supplier_id = props.supplier
          } else {
            state.supplier_id = ''
          }
        }
      )
      const remoteMethod = (e) => {
        factoryList(e)
      }
      const factoryList = async (e) => {
        state.loading = true
        const { data } = await getSupplierList({ s_name: e, status: 1 })
        const arr = []
        if (data && data.length > 0) {
          data.map((item) => {
            arr.push({
              id: item.id,
              name:
                '【' + (item.s_name ? item.s_name : '未知') + '】' + item.name,
            })
          })
        }
        state.supplierList = arr
        state.loading = false
      }
      //选择工厂
      const changeFactory = () => {
        emit('fetch-data', state.supplier_id)
      }
      onMounted(() => {
        factoryList()
      })
      return {
        ...toRefs(state),
        remoteMethod,
        factoryList,
        changeFactory,
      }
    },
  })
</script>