fe-manage/src/components/project/ProjectManager.vue

<!--<template>-->
<!--  <a-select-->
<!--    :getPopupContainer="-->
<!--      (triggerNode) => {-->
<!--        return triggerNode.parentNode || document.body;-->
<!--      }-->
<!--    "-->
<!--    v-model:value="managerArray"-->
<!--    :placeholder="placeholder"-->
<!--    :filterOption="false"-->
<!--    style="width: 100%"-->
<!--    :options="options"-->
<!--    allowClear-->
<!--    showSearch-->
<!--    :mode="mode"-->
<!--    :disabled="disabled"-->
<!--    @popupScroll="memberScroll"-->
<!--    @search="searchMember"-->
<!--    @change="change"-->
<!--  >-->
<!--    <template v-if="loading" #notFoundContent>-->
<!--      <a-spin size="small" />-->
<!--    </template>-->
<!--  </a-select>-->
<!--</template>-->
<!--<script>-->
<!--import { onMounted, reactive, toRefs, watch } from "vue";-->
<!--import { scrollLoad, throttle } from "@/api/method";-->
<!--import * as api1 from "@/api/index1";-->

<!--export default {-->
<!--  name: "ProjectClass",-->

<!--  props: {-->
<!--    value: {-->
<!--      type: String,-->
<!--      default: "",-->
<!--    },-->
<!--    name: {-->
<!--      type: String,-->
<!--      default: "",-->
<!--    },-->
<!--    disabled: {-->
<!--      type: Boolean,-->
<!--      default: false,-->
<!--    },-->
<!--    placeholder: {-->
<!--      type: String,-->
<!--      default: "请选择",-->
<!--    },-->
<!--    // 'multiple' | 'tags'-->
<!--    mode: {-->
<!--      type: String,-->
<!--      default: "select",-->
<!--    },-->
<!--  },-->
<!--  setup(props, ctx) {-->
<!--    const state = reactive({-->
<!--      options: [],-->
<!--      managerArray: [],-->
<!--      memberParam: { keyWord: "", pageNo: 1, pageSize: 10 },-->
<!--      loading: false,-->
<!--      init: false,-->
<!--    });-->

<!--    watch(() => state.memberParam.keyWord, throttle(getMember, 500));-->
<!--    watch(() => state.memberParam.pageNo, throttle(getPushMember, 500));-->
<!--    watch(props, init);-->

<!--    onMounted(() => {-->
<!--      console.log("onMounted");-->
<!--      init();-->
<!--    });-->

<!--    function getMember() {-->
<!--      state.loading = true;-->
<!--      state.options = [];-->
<!--      getMemberData();-->
<!--    }-->

<!--    function getPushMember() {-->
<!--      state.loading = true;-->
<!--      getMemberData();-->
<!--    }-->

<!--    function getMemberData() {-->
<!--      console.log("getMemberData");-->
<!--      api1.getMemberInfo(state.memberParam).then((res) => {-->
<!--        const list = res.data.data.rows-->
<!--          .filter((e) => !(props.value + "")?.includes(e.id + ""))-->
<!--          .map((e) => ({-->
<!--            label: e.realName,-->
<!--            value: e.id,-->
<!--          }));-->
<!--        if (state.memberParam.pageNo === 1 && props.value) {-->
<!--          const arrManagerId = (props.value + "").split(",");-->
<!--          const arrManager = props.name.split(",");-->
<!--          state.options = [-->
<!--            ...arrManager.map((e, i) => ({ label: e, value: arrManagerId[i] })),-->
<!--            ...list,-->
<!--          ];-->
<!--        } else state.options.push(...list);-->
<!--        state.loading = false;-->
<!--      });-->
<!--    }-->

<!--    const memberScroll = (e) => {-->
<!--      let num = scrollLoad(e);-->
<!--      if (num === 2) {-->
<!--        // 如果滑到底部，则加载下一页-->
<!--        state.memberParam.pageNo++;-->
<!--      }-->
<!--    };-->

<!--    //搜索学员-->
<!--    const searchMember = (keyWord) => {-->
<!--      keyWord && (state.memberParam = { keyWord, pageNo: 1, pageSize: 10 });-->
<!--    };-->

<!--    function init() {-->
<!--      console.log("init&#45;&#45;", props);-->
<!--      console.log(Array.isArray(state.managerArray));-->
<!--      if (-->
<!--        props.value + "" !==-->
<!--        (Array.isArray(state.managerArray)-->
<!--          ? state.managerArray.join(",")-->
<!--          : state.managerArray + "")-->
<!--      ) {-->
<!--        if (props.value) {-->
<!--          const arrManager = props.name.split(",");-->
<!--          const arrManagerId = (props.value + "").split(",");-->
<!--          state.managerArray =-->
<!--            props.mode === "select" ? props.value : arrManagerId;-->
<!--          state.options = arrManager.map((e, i) => ({-->
<!--            label: e,-->
<!--            value: arrManagerId[i],-->
<!--          }));-->
<!--        } else {-->
<!--          state.managerArray = [];-->
<!--        }-->
<!--        // getMemberData();-->
<!--        return;-->
<!--      }-->
<!--      if (!props.value) {-->
<!--        if (!(state.options && state.options.length)) {-->
<!--          state.options = [];-->
<!--          // getMember();-->
<!--        }-->
<!--        return;-->
<!--      }-->
<!--    }-->

<!--    function change(e, l) {-->
<!--      console.log("change", l);-->
<!--      if (Array.isArray(l)) {-->
<!--        ctx.emit("update:value", l.map((t) => t.value).join(","));-->
<!--        ctx.emit("update:name", l.map((t) => t.label).join(","));-->
<!--      } else {-->
<!--        ctx.emit("update:value", l.value);-->
<!--        ctx.emit("update:name", l.label);-->
<!--      }-->
<!--    }-->

<!--    return {-->
<!--      ...toRefs(state),-->
<!--      searchMember,-->
<!--      memberScroll,-->
<!--      change,-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->