zhengbasai/library/components/RemoteSelect/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2023-05-31 16:51:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-20 13:51:54
-->
<template>
  <div>
    <el-select
      v-model="selectId"
      clearable
      :disabled="disabled"
      filterable
      :loading="loading"
      :placeholder="placeholder"
      remote
      :remote-method="remoteMethod"
      reserve-keyword
      @change="handleSelect"
      style="width: 100%;"
    >
      <el-option
        v-for="item in selectList"
        :key="item.id"
        :label="item[searchName]"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
  import { getSelectApi } from './api/index'
  export default defineComponent({
    name: 'BatchSend',
    props: {
      id: {
        type: String,
        default: '', //回选id
      },
      url: {
        type: String,
        default: '', //请求地址
      },
      searchName: {
        type: String,
        default: '', //搜索字段名称
      },
      placeholder: {
        type: String,
        default: '请输入筛选数据', //筛选提示文字
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        selectList: [],
        selectId: '', //工厂id
        loading: true,
        queryParams: {},
      })
      watch(
        () => props.id,
        () => {
          if (props.id) {
            state.selectId = props.id
          } else {
            state.selectId = ''
          }
        }
      )
      const remoteMethod = (e) => {
        state.queryParams[props.searchName] = e
        factoryList()
      }
      const factoryList = async () => {
        state.loading = true
        const { data } = await getSelectApi(props.url, props.queryParams)
        state.selectList = data
        state.loading = false
      }
      //选择工厂
      const handleSelect = (e) => {
        emit('fetch-data', e)
      }
      onMounted(() => {
        setTimeout(() => {
          factoryList()
        }, 1000)
      })
      return {
        ...toRefs(state),
        remoteMethod,
        factoryList,
        handleSelect,
      }
    },
  })
</script>