--fix 选择组织

src/components/student/CommonStudent.vue

@@ -3,20 +3,20 @@
 <template>
   <div class="CommonStudent">
     <a-drawer
-      :visible="visiable"
-      class="drawerStyle ProjCheckship CommonStudent"
-      placement="right"
-      width="60%"
+        :visible="visiable"
+        class="drawerStyle ProjCheckship CommonStudent"
+        placement="right"
+        width="60%"
     >
       <div class="drawerMain" id="ProjCheckship" style="">
         <div class="header">
           <div class="headerTitle">
-            {{ { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[type] || "" }}
+            {{ {1: "添加学员", 2: "添加学员", 3: "添加学员"}[type] || "" }}
           </div>
           <img
-            style="width: 29px; height: 29px; cursor: pointer"
-            src="../../assets/images/basicinfo/close.png"
-            @click="closeDrawer"
+              style="width: 29px; height: 29px; cursor: pointer"
+              src="../../assets/images/basicinfo/close.png"
+              @click="closeDrawer"
           />
         </div>
         <div style="display: flex; overflow-x: auto; overflow-y: auto">
@@ -27,157 +27,160 @@
                   <div class="tab1">
                     <a-form-item label="姓名">
                       <a-input
-                        v-model:value="nameSearch.keyword"
-                        style="width: 270px; height: 40px; border-radius: 8px"
-                        placeholder="请输入姓名"
-                        @change="peopleName"
+                          v-model:value="nameSearch.keyword"
+                          style="width: 270px; height: 40px; border-radius: 8px"
+                          placeholder="请输入姓名"
+                          @change="peopleName"
                       />
                       <a-button
-                        type="primary"
-                        @click="onSearchStu"
-                        style="margin-left: 20px; border-radius: 4px"
+                          type="primary"
+                          @click="onSearchStu"
+                          style="margin-left: 20px; border-radius: 4px"
                       >
                         <template #icon>
-                          <SearchOutlined />
+                          <SearchOutlined/>
                         </template>
                         搜索
                       </a-button>
                       <a-button
-                        @click="resetStu"
-                        style="margin-left: 20px; border-radius: 4px"
-                        >重置
+                          @click="resetStu"
+                          style="margin-left: 20px; border-radius: 4px"
+                      >重置
                       </a-button>
                     </a-form-item>
                   </div>
                   <div
-                    class="chooseLeft"
-                    style="display: grid; grid-template-columns: 250px auto"
+                      class="chooseLeft"
+                      style="display: grid; grid-template-columns: 250px auto"
                   >
                     <div
-                      :style="{
+                        :style="{
                         height: screenHeight - 180 + 'px',
                         overflowY: 'auto',
                       }"
-                      style="border: 1px solid #f0f0f0"
+                        style="border: 1px solid #f0f0f0"
                     >
                       <div class="tree" style="margin: 10px 4px 220px 10px">
                         <a-tree
-                          allow-clear
-                          tree-default-expand-all
-                          :tree-data="treeData"
-                          :loading="orgLoading"
-                          :load-data="onLoadData"
-                          v-model:selectedKeys="stuTreeSelectKeys"
-                          v-model:expandedKeys="stuTreeExpandedKeys"
-                          :fieldNames="{
+                            allow-clear
+                            tree-default-expand-all
+                            :tree-data="treeData"
+                            :loading="orgLoading"
+                            :load-data="onLoadData"
+                            v-model:selectedKeys="stuTreeSelectKeys"
+                            v-model:expandedKeys="stuTreeExpandedKeys"
+                            :fieldNames="{
                             children: 'treeChildList',
                             key: 'id',
                             title: 'name',
                             value: 'name',
                           }"
-                          @select="stuStuOrgSelect"
+                            @select="stuStuOrgSelect"
                         >
                         </a-tree>
                       </div>
                     </div>
                     <div
-                      class="tableBox tabb"
-                      style="
+                        class="tableBox tabb"
+                        style="
                         margin: 0px 4px 120px 10px;
                         border: 1px solid #f0f0f0;
                       "
                     >
                       <a-table
-                        :columns="stuColumns"
-                        :data-source="stuData"
-                        :pagination="stuPagination"
-                        :loading="stuLoading"
-                        row-key="id"
-                        :row-selection="stuRowSelection"
+                          :columns="stuColumns"
+                          :data-source="stuData"
+                          :pagination="stuPagination"
+                          :loading="stuLoading"
+                          row-key="id"
+                          :row-selection="stuRowSelection"
                       />
                     </div>
                   </div>
                 </div>
               </a-tab-pane>
-              <!-- <a-tab-pane :key="2" tab="添加组织">
+              <a-tab-pane :key="2" tab="添加组织">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
                   <div class="tab2">
                     <a-form-item label="组织：">
                       <a-input
-                        v-model:value="searchOrgName.keyword"
-                        style="width: 230px; height: 40px; border-radius: 8px"
-                        placeholder="请输入组织"
+                          v-model:value="searchOrgName.keyword"
+                          style="width: 230px; height: 40px; border-radius: 8px"
+                          placeholder="请输入组织"
                       />
                       <a-button
-                        type="primary"
-                        @click="searchOrg"
-                        style="margin-left: 20px; border-radius: 4px"
+                          type="primary"
+                          @click="searchOrg"
+                          style="margin-left: 20px; border-radius: 4px"
                       >
                         <template #icon>
-                          <SearchOutlined />
+                          <SearchOutlined/>
                         </template>
                         搜索
                       </a-button>
                       <a-button
-                        @click="resetOrg"
-                        style="margin-left: 20px; border-radius: 4px"
-                        >重置</a-button
+                          @click="resetOrg"
+                          style="margin-left: 20px; border-radius: 4px"
+                      >重置
+                      </a-button
                       >
                     </a-form-item>
                   </div>
                   <div class="boeTree">
                     <a-tree
-                      :tree-data="searchOrgName.keyword ? orgData : treeData"
-                      @select="onOrgSelectChange"
-                      :fieldNames="{
+                        :tree-data="searchOrgName.keyword ? orgData : treeOrgData"
+                        @select="onOrgSelectChange"
+                        :loading="orgOrgLoading"
+                        :load-data="onLoadOrgData"
+                        :fieldNames="{
                         children: 'treeChildList',
                         key: 'id',
                         title: 'name',
                         value: 'name',
                       }"
-                      row-key="id"
-                      :row-selection="orgRowSelection"
-                      multiple
+                        row-key="id"
+                        :row-selection="orgRowSelection"
+                        multiple
                     >
                     </a-tree>
                   </div>
                 </div>
-              </a-tab-pane> -->
+              </a-tab-pane>
               <a-tab-pane :key="3" tab="受众关联">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
                   <div>
                     <a-form-item label="受众名称：">
                       <a-input
-                        v-model:value="audienceName.keyword"
-                        style="width: 260px; height: 40px; border-radius: 8px"
-                        placeholder="请输入受众名称"
+                          v-model:value="audienceName.keyword"
+                          style="width: 260px; height: 40px; border-radius: 8px"
+                          placeholder="请输入受众名称"
                       />
                       <a-button
-                        type="primary"
-                        @click="searchAudi"
-                        style="margin-left: 20px; border-radius: 4px"
+                          type="primary"
+                          @click="searchAudi"
+                          style="margin-left: 20px; border-radius: 4px"
                       >
                         <template #icon>
-                          <SearchOutlined />
+                          <SearchOutlined/>
                         </template>
                         搜索
                       </a-button>
                       <a-button
-                        @click="resetAudienceInfo"
-                        style="margin-left: 20px; border-radius: 4px"
-                        >重置
+                          @click="resetAudienceInfo"
+                          style="margin-left: 20px; border-radius: 4px"
+                      >重置
                       </a-button>
                     </a-form-item>
                   </div>
                   <div class="tableBox tabb">
                     <a-table
-                      style="border: 1px solid #f2f6fe"
-                      row-key="id"
-                      :columns="audiColums"
-                      :data-source="audiData"
-                      :loading="audiLoading"
-                      :pagination="auditPagination"
-                      :row-selection="auditRowSelection"
+                        style="border: 1px solid #f2f6fe"
+                        row-key="id"
+                        :columns="audiColums"
+                        :data-source="audiData"
+                        :loading="audiLoading"
+                        :pagination="auditPagination"
+                        :row-selection="auditRowSelection"
                     />
                   </div>
                 </div>
@@ -191,9 +194,9 @@
               </div>
             </div>
             <div
-              class="selecteds"
-              :style="{ 'max-height': screenHeight - 235 + 'px' }"
-              style="overflow-y: auto"
+                class="selecteds"
+                :style="{ 'max-height': screenHeight - 235 + 'px' }"
+                style="overflow-y: auto"
             >
               <div class="person">快速选人</div>
               <div v-for="(item, i) in selectsData.studentList">
@@ -213,39 +216,42 @@
                 </div>
               </div>
               <div
-                v-if="!person && selectsData.studentList.length > 10"
-                class="ifsw"
+                  v-if="!person && selectsData.studentList.length > 10"
+                  class="ifsw"
               >
                 <div @click="person = !person" class="“sw”">查看更多></div>
               </div>
               <div
-                v-if="person && selectsData.studentList.length > 10"
-                class="ifsw"
+                  v-if="person && selectsData.studentList.length > 10"
+                  class="ifsw"
               >
                 <div @click="person = !person" class="sw">收起&lt;</div>
               </div>
-              <!--组织-->
-              <!--          <div  class="dept">添加组织</div>-->
-              <!--          <div v-for="(item,i) in selectsData.deptList"  >-->
-              <!--            <div v-if="i<11">-->
-              <!--            <div class="chose1">-->
-              <!--              <div class="span"> {{ item.name }}</div>-->
-              <!--              <div class="ch1" @click="orgDel(i)"></div>-->
-              <!--            </div>-->
-              <!--            </div>-->
-              <!--            <div v-else> -->
-              <!--              <div v-if ="dept">-->
-              <!--                    <div class="chose1">-->
-              <!--                      <div class="span"> {{ item.name }}</div>-->
-              <!--                    <div class="ch1" @click="orgDel(i)"></div>-->
-              <!--                    </div>-->
-              <!--                </div>-->
-              <!--               -->
-              <!--             </div>-->
-              <!--           -->
-              <!--          </div>-->
-              <!--          <div v-if="!dept && selectsData.deptList.length >10" class="ifsw"><div @click="dept = !dept" class=“sw”>查看更多></div></div>-->
-              <!--          <div v-if="dept && selectsData.deptList.length >10" class="ifsw" ><div @click="dept = !dept" class="sw"> 收起&lt;  </div></div>-->
+              <div class="dept">添加组织</div>
+              <div v-for="(item,i) in selectsData.deptList">
+                <div v-if="i<11">
+                  <div class="chose1">
+                    <div class="span"> {{ item.name }}</div>
+                    <div class="ch1" @click="orgDel(i)"></div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div v-if="dept">
+                    <div class="chose1">
+                      <div class="span"> {{ item.name }}</div>
+                      <div class="ch1" @click="orgDel(i)"></div>
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+              <div v-if="!dept && selectsData.deptList.length >10" class="ifsw">
+                <div @click="dept = !dept" class=“sw”>查看更多></div>
+              </div>
+              <div v-if="dept && selectsData.deptList.length >10" class="ifsw">
+                <div @click="dept = !dept" class="sw"> 收起&lt;</div>
+              </div>
               <!--受众-->
               <div class="group">受众关联</div>
               <div v-for="(item, i) in selectsData.groupList">
@@ -265,8 +271,8 @@
                 </div>
               </div>
               <div
-                v-if="!group && selectsData.groupList.length > 10"
-                class="ifsw"
+                  v-if="!group && selectsData.groupList.length > 10"
+                  class="ifsw"
               >
                 <div @click="group = !group" class="“sw”">查看更多></div>
               </div>
@@ -341,13 +347,13 @@
   </a-modal>
  -->
   <a-modal
-    :style="{padding: 0,position: relative,right: '-20%'}"
-    :closable="true"
-    :visible="stageVisible"
-    :footer="null"
-    centered="true"
-    @ok="handleStageOk"
-    wrapClassName="changeModal"
+      :style="{padding: 0,position: relative,right: '-20%'}"
+      :closable="true"
+      :visible="stageVisible"
+      :footer="null"
+      centered="true"
+      @ok="handleStageOk"
+      wrapClassName="changeModal"
   >
     <div class="con">
       <div class="header">
@@ -361,34 +367,34 @@
           <!-- <div class="cur">当前关卡：关卡2</div> -->
           <div class="select">
             <a-select
-              style="width: 400px"
-              :placeholder="type === 1 ? '选择阶段' : '选择关卡'"
-              v-model:value="selectsData.stageId"
-              className="cus-select"
+                style="width: 400px"
+                :placeholder="type === 1 ? '选择阶段' : '选择关卡'"
+                v-model:value="selectsData.stageId"
+                className="cus-select"
             >
               <a-select-option
-                v-for="(item, i) in stageIds"
-                :key="i"
-                :value="item.id"
-                >{{ item.name || "默认" }}
+                  v-for="(item, i) in stageIds"
+                  :key="i"
+                  :value="item.id"
+              >{{ item.name || "默认" }}
               </a-select-option>
             </a-select>
           </div>
           <span style="color: #999999; margin-left: 10px"
-            ><minus-circle-outlined />已在其他关卡的学员，不会被添加到该关卡</span
+          ><minus-circle-outlined/>已在其他关卡的学员，不会被添加到该关卡</span
           >
           <div class="btn" style="margin-top: 50px">
             <button
-              class="sameb btn1"
-              @click="closeChangeModal"
-              style="cursor: pointer"
+                class="sameb btn1"
+                @click="closeChangeModal"
+                style="cursor: pointer"
             >
               取消
             </button>
             <button
-              class="sameb btn2"
-              @click="handleStageOk"
-              style="cursor: pointer"
+                class="sameb btn2"
+                @click="handleStageOk"
+                style="cursor: pointer"
             >
               确定
             </button>
@@ -399,15 +405,15 @@
   </a-modal>
 </template>
 <script setup>
-import { computed, defineEmits, defineProps, ref, watch } from "vue";
-import { request, useBoeApi, useBoeApiPage } from "@/api/request";
+import {computed, defineEmits, defineProps, ref, watch} from "vue";
+import {request, useBoeApi, useBoeApiPage} from "@/api/request";
 import {
   AUDIENCE_LIST,
   ORG_CHILD_LIST,
   ORG_LIST,
   USER_LIST,
 } from "@/api/ThirdApi";
-import { saveStu } from "@/api/index1";
+import {saveStu} from "@/api/index1";
 
 const emit = defineEmits({});
 const props = defineProps({
@@ -444,11 +450,11 @@ const audienceName = ref({
   page: 1,
   pageSize: 10,
 });
-// const searchOrgName = ref({
-//   keyword: '',
-//   page: 1,
-//   pageSize: 10
-// })
+const searchOrgName = ref({
+  keyword: '',
+  page: 1,
+  pageSize: 10
+})
 const stageIds = computed(() => props.stage);
 const {
   data: stuData,
@@ -464,18 +470,27 @@ const {
   totalPage: (res) => res.result.totalPage,
   total: (res) => res.result.totalElement,
 });
-// const {
-//   data: orgData,
-//   fetch: searchOrg,
-// } = useBoeApiPage(ORG_LIST, searchOrgName.value)
-const { data: treeData, loading: orgLoading } = useBoeApi(
-  ORG_LIST,
-  { keyword: "" },
-  {
-    init: true,
-    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
-  }
+const {
+  data: orgData,
+  fetch: searchOrg,
+} = useBoeApiPage(ORG_LIST, searchOrgName.value)
+const {data: treeData, loading: orgLoading} = useBoeApi(
+    ORG_LIST,
+    {keyword: ""},
+    {
+      init: true,
+      result: (res) => res.result.map((e) => ({...e, isLeaf: false})),
+    }
 );
+const {data: treeOrgData, loading: orgOrgLoading} = useBoeApi(
+    ORG_LIST,
+    {keyword: ""},
+    {
+      init: true,
+      result: (res) => res.result.map((e) => ({...e, isLeaf: false})),
+    }
+);
+
 const {
   data: audiData,
   fetch: searchAudi,
@@ -487,7 +502,7 @@ const {
 } = useBoeApiPage(AUDIENCE_LIST, audienceName.value, {
   init: true,
   result: (res) =>
-    res.result.audienceList.map((e) => ({ ...e, id: e.id + "" })),
+      res.result.audienceList.map((e) => ({...e, id: e.id + ""})),
   totalPage: (res) => res.result.totalPage,
   total: (res) => res.result.totalElement,
 });
@@ -599,14 +614,25 @@ const closeDrawer = () => {
   stuData.value = [];
   nameSearch.value.keyword = "";
 };
+
 function onLoadData(treeNode) {
-  return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
-    (r) => {
-      treeNode.dataRef.treeChildList = r.result.directChildList;
-      treeData.value = [...treeData.value];
-    }
+  return request(ORG_CHILD_LIST, {keyword: "", orgId: treeNode.id}).then(
+      (r) => {
+        treeNode.dataRef.treeChildList = r.result.directChildList;
+        treeData.value = [...treeData.value];
+      }
   );
 }
+
+function onLoadOrgData(treeNode) {
+  return request(ORG_CHILD_LIST, {keyword: "", orgId: treeNode.id}).then(
+      (r) => {
+        treeNode.dataRef.treeChildList = r.result.directChildList;
+        treeOrgData.value = [...treeOrgData.value];
+      }
+  );
+}
+
 const closeChangeModal = () => {
   stageVisible.value = false;
 };
@@ -630,7 +656,7 @@ function stuStuOrgSelect(e) {
 
 function stuDel(i) {
   stuSelectKeys.value = stuSelectKeys.value.filter(
-    (e) => e !== selectsData.value.studentList[i].id
+      (e) => e !== selectsData.value.studentList[i].id
   );
   selectsData.value.studentList.splice(i, 1);
 }
@@ -641,7 +667,7 @@ function stuDel(i) {
 // }
 function AuditDel(i) {
   auditSelectKeys.value = auditSelectKeys.value.filter(
-    (e) => e !== selectsData.value.groupList[i].id
+      (e) => e !== selectsData.value.groupList[i].id
   );
   selectsData.value.groupList.splice(i, 1);
 }
@@ -702,9 +728,9 @@ const deleteDepSelect = () => {
   stuSelectKeys.value = [];
 };
 //重置组织
-// const resetOrg = () => {
-//   searchOrgName.value = {keyword: '', page: 1, pageSize: 10}
-// };
+const resetOrg = () => {
+  searchOrgName.value = {keyword: '', page: 1, pageSize: 10}
+};
 //重置受众
 const resetAudienceInfo = () => {
   audienceName.value.keyword = "";