bencao-subscribe/library/components/RemoteSelect/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2023-05-31 16:51:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-13 18:06:16
-->
<template>
  <div>
    <el-select
      v-model="factory_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 companyList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
  import { getFactoryList } from './api/index'
  export default defineComponent({
    name: 'BatchSend',
    props: {
      factory: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        companyList: [],
        factory_id: '', //工厂id
        loading: true,
      })
      watch(
        () => props.factory,
        () => {
          if (props.factory) {
            state.factory_id = props.factory
          } else {
            state.factory_id = ''
          }
        }
      )
      const remoteMethod = (e) => {
        factoryList(e)
      }
      const factoryList = async (e) => {
        state.loading = true
        const { data } = await getFactoryList({ 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.name,
              s_name: item.s_name,
            })
          })
        }
        state.companyList = arr
        state.loading = false
      }
      //选择工厂
      const changeFactory = () => {
        let name = ''
        state.companyList.map((item) => {
          if (item.id == state.factory_id) {
            name = item.s_name
          }
        })
        emit('fetch-data', state.factory_id)
        emit('fetch-name', name)
      }
      onMounted(() => {
        factoryList()
      })
      return {
        ...toRefs(state),
        remoteMethod,
        factoryList,
        changeFactory,
      }
    },
  })
</script>