-- 修改

src/App.vue

@@ -69,9 +69,26 @@ export default defineComponent({
       initDict("pathmapPic");
       initDict("projectClass");
       initDict("projectPic");
+      getMemberInfo();
       getOrgTree();
     }
 
+    async function getMemberInfo() {
+      const list = localStorage.getItem('memberInitInfo');
+      if (list) {
+        store.commit("SET_MEMBER_INFO", JSON.parse(list));
+        return;
+      }
+      const memberInitInfo = await api1.getMemberInfo({keyWord: '', pageNo: 1, pageSize: 10}).then((res) => (
+          res.data.data.rows.map(e => ({
+            label: e.realName,
+            value: e.id
+          }))
+      ));
+      store.commit("SET_MEMBER_INFO", memberInitInfo);
+      localStorage.setItem('memberInitInfo', JSON.stringify(memberInitInfo));
+    }
+
     async function getUserInfo() {
       const userInfo = await api2.userInfo()
       store.commit("SET_USER", userInfo);

src/components/project/OrgClass.vue

@@ -22,55 +22,30 @@
   >
   </a-tree-select>
 </template>
-<script>
-import {onMounted, reactive, toRefs, watch} from "vue";
+<script setup>
+import {computed, defineEmits, defineProps, onMounted, ref} from "vue";
 import {useStore} from "vuex";
 
-export default {
-  name: "OrgClass",
+const store = useStore();
 
-  props: {
-    value: {
-      type: String,
-    },
-    name: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-  },
-  setup(props, ctx) {
-    const store = useStore();
+const props = defineProps({
+  value: String
+})
+const emit = defineEmits({})
 
-    const state = reactive({
-      options: [],
-      id: props.value+''
-    });
+const options = ref([])
 
-    watch(props, () => {
-      console.log('props', state)
-      console.log('props', props)
-      if ((props.value + '') !== state.id) {
-        state.id = props.value + ''
-      }
-    })
-    onMounted(() => {
-      state.options = [...store.state.orgtreeList]
-      console.log(state.options)
-    })
+const id = computed(() => {
+  return props.value
+})
 
-    function change(key, obj) {
-      console.log(state)
-      ctx.emit('update:name', obj[0])
-      ctx.emit('update:value', key + '')
-    }
+onMounted(() => {
+  options.value = [...store.state.orgtreeList]
+})
+
+function change(key, obj) {
+  emit('update:name', obj[0])
+  emit('update:value', key)
+}
 
-    return {
-      ...toRefs(state),
-      change
-    };
-  },
-};
 </script>

src/components/project/ProjectClass.vue

@@ -11,50 +11,36 @@
       style="width: 100%"
       :options="options"
       allowClear
+      @change="change"
       :disabled="disabled"
   >
   </a-select>
 </template>
-<script>
-import {onMounted, reactive, toRefs, watch} from "vue";
+<script setup>
+import {computed, defineEmits, defineProps, onMounted, ref} from "vue";
 import {useStore} from "vuex";
 
-export default {
-  name: "ProjectClass",
+const store = useStore();
 
-  props: {
-    modelValue: {
-      type: Number,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-  },
-  setup(props, ctx) {
-    const store = useStore();
+const props = defineProps({
+  value: String,
+  disabled: String
+})
+const emit = defineEmits({})
 
-    const state = reactive({
-      options: [],
-      id: props.modelValue
-    });
+const options = ref([])
 
-    watch(props, () => {
-      if (props.modelValue !== state.id) {
-        state.id = props.modelValue
-      }
-    })
-    
-    watch(state.id,()=>{
-      ctx.emit('update:modelValue',state.id)
-    })
+const id = computed(() => {
+  return props.value
+})
+
+onMounted(() => {
+  options.value = store.state.projectClass.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
+})
+
+function change(key, obj) {
+  emit('update:name', obj[0])
+  emit('update:value', key)
+}
 
-    onMounted(() => {
-      state.options = store.state.projectClass.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
-    })
-    return {
-      ...toRefs(state),
-    };
-  },
-};
 </script>

src/components/project/ProjectLevel.vue

@@ -9,42 +9,34 @@
       :options="options"
       style="width: 100%"
       placeholder="请选择项目级别"
+      @change="change"
       :disabled="disabled"
   />
 </template>
-<script>
-import {onMounted, reactive, toRefs, watch} from "vue";
+<script setup>
+import {computed, defineEmits, defineProps, onMounted, ref} from "vue";
 import {useStore} from "vuex";
 
-export default {
-  name: "ProjectClass",
 
-  props: {
-    modelValue: {
-      type: Number,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-  },
-  setup(props, ctx) {
-    const store = useStore();
+const store = useStore();
+const props = defineProps({
+  value: String,
+  disabled: String
+})
 
-    const state = reactive({
-      options: [],
-      id: props.modelValue
-    });
-    watch(state.id, () => {
-      ctx.emit('update:modelValue', state.id)
-    })
+const id = computed(() => {
+  return props.value
+})
 
-    onMounted(() => {
-      state.options = store.state.projectLevel.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
-    })
-    return {
-      ...toRefs(state),
-    };
-  },
-};
+const emit = defineEmits({})
+
+const options = ref([])
+
+onMounted(() => {
+  options.value = store.state.projectLevel.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
+})
+
+function change(key) {
+  emit('update:value', key)
+}
 </script>

src/components/project/ProjectManagerNew.vue

@@ -0,0 +1,122 @@
+<template>
+  <a-select
+      :getPopupContainer="
+                          (triggerNode) => {
+                            return triggerNode.parentNode || document.body;
+                          }
+                        "
+      v-model:value="managerArray"
+      :placeholder="placeholder"
+      :filterOption="true"
+      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 setup>
+import {computed, defineEmits, defineProps, onMounted, ref, watch} from "vue";
+import {scrollLoad, throttle} from "@/api/method";
+import * as api1 from "@/api/index1";
+import {useStore} from "vuex";
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: ''
+  },
+  disabled: Boolean,
+  placeholder: String,
+  mode: String
+})
+const store = useStore();
+
+const managerArray = computed(() => {
+  return props.mode === 'select' ? props.value : props.value.split(',')
+})
+
+const emit = defineEmits({})
+
+const options = ref([])
+
+const memberParam = ref({keyWord: '', pageNo: 1, pageSize: 10})
+const loading = ref(false)
+
+
+watch(() => memberParam.value.keyWord, throttle(getSearchMember, 500))
+watch(() => memberParam.value.pageNo, throttle(getPageMember, 500))
+
+onMounted(() => {
+  console.log('onMounted')
+  if (props.value) {
+    options.value = [...(props.value + '').split(',').map((value, i) => ({
+      label: (props.name + '').split(',')[i],
+      value
+    })), ...store.state.memberInitInfo]
+  } else options.value = store.state.memberInitInfo
+})
+
+function getSearchMember() {
+  loading.value = true
+  options.value = []
+  getMemberData()
+}
+
+function getPageMember() {
+  loading.value = true
+  getMemberData()
+}
+
+
+function getMemberData() {
+  api1.getMemberInfo(memberParam.value).then((res) => {
+    const list = res.data.data.rows.filter(e => !(props.value + '').includes(e.id)).map(e => ({
+      label: e.realName,
+      value: e.id
+    }));
+    if (memberParam.value.pageNo === 1 && props.value) {
+      const arrManagerId = (props.value + '').split(',')
+      const arrManager = props.name.split(',')
+      options.value = [...arrManager.map((e, i) => ({label: e, value: arrManagerId[i]})), ...list]
+    } else options.value.push(...list)
+    loading.value = false
+  });
+}
+
+const memberScroll = (e) => {
+  let num = scrollLoad(e);
+  if (num === 2) {
+    memberParam.value.pageNo++;
+  }
+};
+
+//搜索学员
+const searchMember = (keyWord) => {
+  keyWord && (memberParam.value = {keyWord, pageNo: 1, pageSize: 10});
+};
+
+function change(e, l) {
+  console.log('change', l)
+  if (Array.isArray(l)) {
+    emit('update:value', l.map(t => t.value).join(','))
+    emit('update:name', l.map(t => t.label).join(','))
+  } else {
+    emit('update:value', l.value)
+    emit('update:name', l.label)
+  }
+}
+
+</script>

src/components/project/TrainClass.vue

@@ -9,49 +9,35 @@
       :options="options"
       style="width: 100%"
       placeholder="请选择分类"
+      @change="change"
       :disabled="disabled"
   />
 </template>
-<script>
-import {onMounted, reactive, toRefs, watch} from "vue";
+<script setup>
+import {computed, defineEmits, defineProps, onMounted, ref} from "vue";
 import {useStore} from "vuex";
 
-export default {
-  name: "TrainClass",
+const store = useStore();
 
-  props: {
-    modelValue: {
-      type: Number,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-  },
-  setup(props, ctx) {
-    const store = useStore();
+const props = defineProps({
+  value: String,
+  disabled: String
+})
 
-    const state = reactive({
-      options: [],
-      id: props.modelValue
-    });
-    watch(state.id, () => {
-      ctx.emit('update:modelValue', state.id)
-    })
+const id = computed(() => {
+  return props.value
+})
 
-    watch(props, () => {
-      if (props.modelValue !== state.id) {
-        state.id = props.modelValue
-      }
-    })
+const emit = defineEmits({})
 
+const options = ref([])
+
+onMounted(() => {
+  options.value = store.state.projectSys.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
+})
+
+function change(key) {
+  emit('update:value', key)
+}
 
-    onMounted(() => {
-      state.options = store.state.projectSys.map(e => ({value: parseInt(e.dictCode), label: e.dictName}))
-    })
-    return {
-      ...toRefs(state),
-    };
-  },
-};
 </script>

src/store/index.js

@@ -31,6 +31,7 @@ export default createStore({
         projectLevel: [],//项目级别
         projectSys: [],//培训分类
         pathmapPic: [],//学习路径背景图
+        memberInitInfo: [],//学员默认
     },
     getters: {},
     mutations: {
@@ -55,6 +56,9 @@ export default createStore({
         SET_DICT(state, {key, data}) {
             state[key] = data
         },
+        SET_MEMBER_INFO(state, data) {
+            state.memberInitInfo = data
+        },
         SET_USER(state, userInfo) {
             state.userInfo = userInfo
         },