feat:合并

src/components/student/CommonStudent.vue

@@ -11,7 +11,7 @@
       <div class="drawerMain" id="ProjCheckship" style="">
         <div class="header">
           <div class="headerTitle">
-            {{ {1: "添加学员", 2: "添加学员", 3: "添加学员",4: "查看权",5: "管理权"}[type] || "" }}
+            {{ {1: "添加学员", 2: "添加学员", 3: "添加学员",4: "查看权",5: "管理权"}[type] || title }}
           </div>
           <img
               style="width: 29px; height: 29px; cursor: pointer"
@@ -99,7 +99,7 @@
                   </div>
                 </div>
               </a-tab-pane>
-              <a-tab-pane :key="2" tab="添加组织">
+              <a-tab-pane v-if="!selectStu" :key="2" tab="添加组织">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
                   <div class="tab2">
                     <a-form-item label="组织：">
@@ -146,7 +146,7 @@
                   </div>
                 </div>
               </a-tab-pane>
-              <a-tab-pane :key="3" tab="受众关联">
+              <a-tab-pane v-if="!selectStu" :key="3" tab="受众关联">
                 <div :style="{ height: screenHeight - 235 + 'px' }">
                   <div>
                     <a-form-item label="受众名称：">
@@ -174,7 +174,7 @@
                   </div>
                   <div class="tableBox tabb">
                     <a-table
-                        style="border: 1px solid #f2f6fe"
+                        style="border: 1px solid #f2f6fe;width:800px"
                         row-key="id"
                         :columns="audiColums"
                         :data-source="audiData"
@@ -193,126 +193,94 @@
                 <div class="already">已选</div>
               </div>
             </div>
-            <div
-                class="selecteds"
-                :style="{ 'max-height': screenHeight - 235 + 'px' }"
-                style="overflow-y: auto"
-            >
-              <div class="person">快速选人</div>
-              <div v-for="(item, i) in selectsData.studentList">
-                <div v-if="i < 11">
-                  <div class="chose">
-                    {{ item.realName }}
-                    <div class="ch" @click="stuDel(i)"></div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div v-if="person">
+            <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
+              <div class="selecteds">
+                <div class="person">快速选人</div>
+                <div v-for="(item, i) in selectsData.studentList">
+                  <div v-if="i < 11">
                     <div class="chose">
                       {{ item.realName }}
                       <div class="ch" @click="stuDel(i)"></div>
                     </div>
                   </div>
-                </div>
-              </div>
-              <div
-                  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"
-              >
-                <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 v-else>
+                    <div v-if="person">
+                      <div class="chose">
+                        {{ item.realName }}
+                        <div class="ch" @click="stuDel(i)"></div>
+                      </div>
+                    </div>
                   </div>
                 </div>
-                <div v-else>
-                  <div v-if="dept">
+                <div
+                    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"
+                >
+                  <div @click="person = !person" class="sw">收起&lt;</div>
+                </div>
+              </div>
+              <div v-if="!selectStu" class="selecteds">
+                <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>
-
-              </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">
-                <div v-if="i < 11">
-                  <div class="chose2">
-                    <div class="span">{{ item.audienceName }}</div>
-                    <div class="ch2" @click="AuditDel(i)"></div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div v-if="group">
-                    <div class="chose2">
-                      <div class="span">{{ item.audienceName }}</div>
-                      <div class="ch2" @click="AuditDel(i)"></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>
-              <div
-                  v-if="!group && selectsData.groupList.length > 10"
-                  class="ifsw"
-              >
-                <div @click="group = !group" class="“sw”">查看更多></div>
-              </div>
-              <div v-if="group && selectsData.groupList > 10" class="ifsw">
-                <div @click="group = !group" class="sw">收起&lt;</div>
-              </div>
+              <!--受众-->
+             <div v-if="!selectStu" class="selecteds">
+               <div class="group">受众关联</div>
+               <div v-for="(item, i) in selectsData.groupList">
+                 <div v-if="i < 11">
+                   <div class="chose2">
+                     <div class="span">{{ item.audienceName }}</div>
+                     <div class="ch2" @click="AuditDel(i)"></div>
+                   </div>
+                 </div>
+                 <div v-else>
+                   <div v-if="group">
+                     <div class="chose2">
+                       <div class="span">{{ item.audienceName }}</div>
+                       <div class="ch2" @click="AuditDel(i)"></div>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+               <div
+                   v-if="!group && selectsData.groupList.length > 10"
+                   class="ifsw"
+               >
+                 <div @click="group = !group" class="“sw”">查看更多></div>
+               </div>
+               <div v-if="group && selectsData.groupList > 10" class="ifsw">
+                 <div @click="group = !group" class="sw">收起&lt;</div>
+               </div>
+             </div>
             </div>
           </div>
-          <!-- <div style="padding:100px 0 0 20px;display: grid;grid-template-rows: auto auto auto;">
-             <div>
-               <div style="margin-top: 20px">快速选人</div>
-               // eslint-disable-next-line vue/require-v-for-key
-               <div v-for="(item,i) in selectsData.studentList" >
-               <a-tag v-if="i < 10" :closable="true" color="#4ea6ff" @close="stuDel(i)"
-                      :key="i" style="margin-top:20px">
-                 {{ item.realName }}
-               </a-tag>
-               <a-tag v-else :closable="true" color="#4ea6ff" @close="stuDel(i)"
-                       style="margin-top:20px">
-                 {{ item.realName }}
-               </a-tag>
-               <div></div>
-             </div>
-             </div>
-             <div>
-               <div style="margin-top: 20px">组织添加</div>
-               <a-tag :closable="true" color="#4ea6ff" @close="orgDel(i)" v-for="(item,i) in selectsData.deptList"
-                      :key="i"
-                      style="margin-top:20px">
-                 {{ item.name }}
-               </a-tag>
-             </div>
-             <div>
-               <div style="margin-top: 20px">受众添加</div>
-               <a-tag :closable="true" color="#4ea6ff" @close="AuditDel(i)" v-for="(item,i) in selectsData.groupList"
-                      :key="i" style="margin-top:20px">
-                 {{ item.audienceName }}
-               </a-tag>
-             </div>
-           </div>-->
         </div>
         <div class="btnn">
           <button class="btn1" @click="closeDrawer">取消</button>
@@ -419,6 +387,22 @@ const emit = defineEmits({});
 const props = defineProps({
   type: Number,
   id: String,
+  title: {
+    type: String,
+    default: '',
+  },
+  clear: {
+    type: Boolean,
+    default: false,
+  },
+  selectStu: {
+    type: Boolean,
+    default: false,
+  },
+  selectOne: {
+    type: Boolean,
+    default: false,
+  },
   stage: {
     type: Array,
     default: () => [],
@@ -577,6 +561,7 @@ const auditSelectKeys = ref([]);
 const screenHeight = ref(document.body.clientHeight);
 //const screenWidth = ref(document.body.clientWidth);
 const stuRowSelection = computed(() => ({
+  type:props.selectOne?'radio':'checkbox',
   columnWidth: 20,
   selectedRowKeys: stuSelectKeys.value,
   onChange: onStuSelectChange,
@@ -764,6 +749,7 @@ function handleStageOk() {
   saveStu({
     targetId: props.id,
     type: props.type,
+    clear:props.clear,
     deptIds: selectsData.value.deptList?.map((e) => e.id),
     stageId: selectsData.value.stageId,
     groupIds: selectsData.value.groupList?.map((e) => e.id),

src/components/student/OwnerTableModelStudent.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-01-31 13:41:35
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-01-31 13:45:07
+ * @FilePath: /fe-manage/src/components/student/OwnerTableModelStudent.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <TableModelStudent :types="types" :id="id" ref="tableModelRef">
+    <template #extension="{ data: { record } }">
+      <CommonStudent
+        v-if="record.type === type"
+        :type="type"
+        :id="id"
+        @finash="submitCall"
+        :clear="true"
+        :select-stu="true"
+        :select-one="true"
+      >
+        <a-button type="link">转移归属权</a-button>
+      </CommonStudent>
+    </template>
+    <slot></slot>
+  </TableModelStudent>
+</template>
+<script setup>
+import { defineProps, ref } from "vue";
+import TableModelStudent from "@/components/student/TableModelStudent";
+import CommonStudent from "@/components/student/CommonStudent";
+
+const props = defineProps({
+  id: String,
+  type: Number,
+  types: {
+    type: Array,
+    default: () => [],
+  },
+});
+console.log("props", props.types);
+const tableModelRef = ref();
+
+function submitCall(flag) {
+  tableModelRef.value.loading = true;
+  flag && tableModelRef.value.searchStu();
+}
+</script>

src/components/student/TableModelStudent.vue

@@ -1,51 +1,61 @@
 <template>
   <div class="CommonStudent">
     <a-drawer
-        :visible="visiable"
-        class="drawerStyle ProjCheckship"
-        placement="right"
-        width="40%"
+      :visible="visiable"
+      class="drawerStyle ProjCheckship"
+      placement="right"
+      width="40%"
     >
       <div class="drawerMain" id="ProjCheckship" style="">
         <div class="header">
-          <div class="headerTitle">
-            权限名单
-          </div>
+          <div class="headerTitle">权限名单</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 class="TableStudent">
           <a-row
-              type="flex"
-              gutter="12"
-              style="padding-left: 20px; margin-right: 0px"
+            type="flex"
+            gutter="12"
+            style="padding-left: 20px; margin-right: 0px"
           >
             <a-col>
               <a-form-item title="姓名：">
                 <a-input
-                    class="cus-input"
-                    v-model:value="searchParams.studentName"
-                    placeholder="请输入姓名"
+                  class="cus-input"
+                  v-model:value="searchParams.studentName"
+                  placeholder="请输入姓名"
                 />
               </a-form-item>
             </a-col>
             <a-col>
               <a-button
-                  class="cus-btn"
-                  style="background: #4ea6ff; color: #fff; width: 100px"
-                  @click="searchStu"
+                class="cus-btn"
+                style="background: #4ea6ff; color: #fff; width: 100px"
+                @click="searchStu"
               >
-                <template #icon><img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png"/>
+                <template #icon
+                  ><img
+                    style="margin-right: 10px"
+                    src="../../assets/images/courseManage/search0.png"
+                  />
                 </template>
                 搜索
               </a-button>
             </a-col>
             <a-col :span="2">
-              <a-button class="cus-btn white" style="width: 100px" @click="reset">
-                <template #icon><img style="margin-right: 10px" src="../../assets/images/leveladd/reset.png"/>
+              <a-button
+                class="cus-btn white"
+                style="width: 100px"
+                @click="reset"
+              >
+                <template #icon
+                  ><img
+                    style="margin-right: 10px"
+                    src="../../assets/images/leveladd/reset.png"
+                  />
                 </template>
                 重置
               </a-button>
@@ -53,16 +63,18 @@
           </a-row>
           <div style="margin-top: 20px">
             <a-table
-                :columns="columns"
-                :data-source="studentList"
-                :pagination="stuPagination"
-                :loading="loading"
-                row-key="id"
+              :columns="columns"
+              :data-source="studentList"
+              :pagination="stuPagination"
+              :loading="loading"
+              row-key="id"
             >
               <template #action="{ record }">
                 <a-space :size="2">
                   <slot name="extension" v-bind:data="{ record }"></slot>
-                  <a-button @click="del(record.id)" type="link" danger>删除</a-button>
+                  <a-button @click="del(record.id)" type="link" danger
+                    >删除</a-button
+                  >
                 </a-space>
               </template>
             </a-table>
@@ -80,12 +92,19 @@
   </div>
 </template>
 <script setup>
-import {computed, createVNode, defineProps, ref, watch} from "vue";
-import {usePage} from "@/api/request";
-import {STUDENT_LIST} from "@/api/apis";
-import {delStudentList} from "@/api/index1";
-import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
-import {Modal} from "ant-design-vue";
+import {
+  computed,
+  createVNode,
+  defineProps,
+  defineExpose,
+  ref,
+  watch,
+} from "vue";
+import { usePage } from "@/api/request";
+import { STUDENT_LIST } from "@/api/apis";
+import { delStudentList } from "@/api/index1";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { Modal } from "ant-design-vue";
 
 const props = defineProps({
   type: Number,
@@ -106,12 +125,12 @@ const initParams = {
   studentName: "",
   page: 1,
   pageSize: 10,
-  type: props.type || '',
+  type: props.type || "",
   types: props.types,
-  pid: props.id || '',
-}
+  pid: props.id || "",
+};
 
-const searchParams = ref(initParams)
+const searchParams = ref(initParams);
 
 const columns = ref([
   {
@@ -144,7 +163,8 @@ const columns = ref([
     key: "type",
     width: 30,
     align: "center",
-    customRender: ({record: {type}}) => ({4: "查看权", 5: "管理权", 6: "归属权"}[type]),
+    customRender: ({ record: { type } }) =>
+      ({ 4: "查看权", 5: "管理权", 6: "归属权" }[type]),
   },
   {
     title: "操作",
@@ -152,11 +172,16 @@ const columns = ref([
     key: "operation",
     width: 50,
     align: "center",
-    slots: {customRender: "action"},
+    slots: { customRender: "action" },
   },
-])
+]);
 
-const {data: studentList, fetch: searchStu, total, loading} = usePage(STUDENT_LIST, searchParams.value)
+const {
+  data: studentList,
+  fetch: searchStu,
+  total,
+  loading,
+} = usePage(STUDENT_LIST, searchParams.value);
 
 const stuPagination = computed(() => ({
   total: total,
@@ -176,14 +201,14 @@ const changePagination = (page) => {
 
 function del(id) {
   Modal.confirm({
-    title: () => '确定删除?',
+    title: () => "确定删除?",
     icon: () => createVNode(ExclamationCircleOutlined),
-    content: () => '数据删除后不可恢复！',
-    okText: () => '确定',
-    okType: 'danger',
-    cancelText: () => '取消',
+    content: () => "数据删除后不可恢复！",
+    okText: () => "确定",
+    okType: "danger",
+    cancelText: () => "取消",
     onOk() {
-      id && delStudentList({ids: [id]}).then(() => searchStu())
+      id && delStudentList({ ids: [id] }).then(() => searchStu());
     },
   });
 }
@@ -192,14 +217,19 @@ const closeDrawer = () => {
   visiable.value = false;
 };
 
-function reset(){
-  searchParams.value = initParams
-  searchStu()
+function reset() {
+  searchParams.value = initParams;
+  searchStu();
 }
 
 watch(visiable, () => {
-  visiable.value && searchStu()
-  searchParams.value = initParams
+  visiable.value && searchStu();
+  searchParams.value = initParams;
+});
+
+defineExpose({
+  searchStu,
+  loading,
 });
 </script>
 <style lang="scss">