luoshan_web/library/components/RemoteSelect/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2023-05-31 16:51:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-13 09:24:52
-->
<template>
  <div>
    <el-select
      v-model="classfy_id"
      clearable
      :disabled="disabled"
      filterable
      :loading="loading"
      :multiple="multiple"
      placeholder="请输入来源部门"
      remote
      :remote-method="remoteMethod"
      reserve-keyword
      style="width: 100%"
      @change="changeFactory"
    >
      <el-option
        v-for="item in selectList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
  import { getSelectList } from './api/index'
  export default defineComponent({
    name: 'BatchSend',
    props: {
      classfy: {
        type: String,
        default: '',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      multiple: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        selectList: [],
        classfy_id: '', //工厂id
        loading: true,
      })
      watch(
        () => props.classfy,
        () => {
          if (props.classfy) {
            state.classfy_id = props.classfy
          } else {
            state.classfy_id = ''
          }
        }
      )
      const remoteMethod = (e) => {
        classfyList(e)
      }
      const classfyList = async (e) => {
        state.loading = true
        const { data } = await getSelectList({ name: e, status: 1 })
        console.log(data, 'shuju')
        const list = data.data
        if (list && list.length > 0) {
          state.selectList = list
        } else {
          state.selectList = []
        }
        state.loading = false
      }
      //选择工厂
      const changeFactory = () => {
        emit('fetch-data', state.classfy_id)
      }
      onMounted(() => {
        classfyList()
      })
      return {
        ...toRefs(state),
        remoteMethod,
        classfyList,
        changeFactory,
      }
    },
  })
</script>