feat: 添加新的受众选择和报名功能，新增多个API请求，更新样式以优化用户体验

src/api/signup/commonStudent.js

@@ -0,0 +1,37 @@
+import ajax2 from "../unionAjax.js";
+
+export const STUDENT_LIST = "/manageApi/admin/student/getStudent";
+export const USER_LIST_PAGE = "/manageApi/admin/thirdApi/user/list";
+export const ORG_LIST = "/manageApi/admin/thirdApi/org/list";
+export const ORG_CHILD_LIST = "/manageApi/admin/thirdApi/org/info";
+// 查询受众中的用户列表
+export const AUDIENCE_LIST = "/userbasic/audience/memberList";
+
+export const USER_AUDIENCES = "/manageApi/admin/thirdApi/audience/userAudiences";
+export const fetchUserAudiences = (params) =>
+  ajax2.get1(USER_AUDIENCES, params);
+// 保存学员信息（走 manageApi，POST）
+export const saveStu = (data) =>
+  ajax2.postJson("/manageApi", "/admin/student/addStudent", data);
+
+// 获取项目学员列表（走 manageApi，GET）弃用
+export const fetchProjectStudents = (params = {}) => {
+  return ajax2.get1(STUDENT_LIST, params);
+};
+
+// 快速学员搜索（走 manageApi，POST）
+export const fetchQuickStudents = (params) =>
+  ajax2.get1(USER_LIST_PAGE, params);
+
+// 组织列表（走 manageApi，POST）
+export const fetchOrgList = (params) =>
+  ajax2.get1(ORG_LIST, params);
+
+// 子组织列表（走 manageApi，POST）
+export const fetchOrgChildren = (params) =>
+  ajax2.get1(ORG_CHILD_LIST, params);
+
+// 受众中的用户列表（POST，application/json）
+export const fetchAudienceList = (data) =>
+  ajax2.postJson("", AUDIENCE_LIST, data);
+

src/api/unionAjax.js

@@ -106,6 +106,15 @@ const get = function (baseURL, url) {
   })
 }
 
+const get1= function (baseURL, params) {
+  return request({
+    baseURL,
+    method: 'get',
+    params: params,
+    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+  })
+}
+
 /**
  * post请求
  * @param {Object} url
@@ -199,6 +208,7 @@ export default {
   tokenName: TokenName,
   request,
   get,
+  get1,
   post,
   postJson,
   postJsonToFile,

src/assets/styles/index.scss

@@ -486,6 +486,150 @@ li{
   }
 }
 
-.custom-message-dialog {
+.use-table {
+    td.el-table__cell {
+      border-bottom: 1px solid rgba(0, 0, 0, .1);
+    }
+    th.el-table__cell {
+      background: rgba(66, 132, 247, 0.1);
+    //   padding: 3px 0;
+  
+      .cell {
+        font-weight: bold;
+        font-size: 14px;
+        color: #60769D;
+      }
+      .caret-wrapper {
+        .sort-caret {
+          border: 4px solid transparent;
+          &.ascending {
+            border-bottom-color: #C0C4CC;
+            top: 8px;
+          }
+          &.descending {
+            border-top-color: #C0C4CC;
+            bottom: 8px;
+          }
+        }
+      }
+      &.ascending .sort-caret.ascending {
+        border-bottom-color: #409EFF;
+      }
+      &.descending .sort-caret.descending{
+        border-top-color: #409EFF;
+      }
+  
+      &.el-table--medium .el-table__cell {
+        padding: 5px 0;
+      }
+    }
+  
+    .course-name {
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+    }
+  
+    .common-cell {
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+    }
+    .common-cell-right {
+      padding-right: 20px;
+    }
+  
+    .single-line-ellipsis {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+    }
+  
+    ::v-deep .el-table--medium .el-table__cell {
+      padding: 5px 0;
+    }
+  }
 
-}
+  .pagination {
+    text-align: right;
+    padding-top: 20px;
+    .el-pagination {
+      .el-pagination__total {
+        font-size: 14px;
+        color: #000000;
+      }
+      .el-pagination__sizes {
+        margin-right: 4px;
+        .el-input{
+          margin: 0;
+          width: 89px;
+          
+        }
+        .el-input__inner {
+          width: 89px;
+          background: #F5F9FF;
+          border-radius: 4px;
+          border: 1px solid #DFDFDF;
+          height: 28px;
+          font-size: 14px;
+          color: #000000;
+        }
+      }
+      .btn-prev, .btn-next {
+        width: 28px;
+        height: 28px;
+        background: #F5F9FF;
+        border-radius: 4px;
+        border: 1px solid #DFDFDF;
+        // &:hover {
+        //   background: #4284F7;
+        //   color: #FFFFFF;
+        // }
+      }
+      .btn-quicknext{
+        background-color: transparent !important;
+        border: none;
+        line-height: 44px;
+        &:before {
+          content: '......';
+        }
+    
+      }
+      .el-pager {
+        .number {
+          min-width: 28px;
+          height: 28px;
+          background: #F5F9FF;
+          border-radius: 4px;
+          border: 1px solid #DFDFDF;
+          font-weight: normal;
+          color: #000000;
+          margin: 0 4px;
+          &.active {
+            background-color: #4284F7 !important;
+            color: #FFFFFF;
+            border: none;
+          }
+        }
+      }
+      .el-pagination__jump {
+        font-size: 14px;
+        color: #000000;
+        margin-left: 4px;
+        .el-input__inner {
+          width: 28px;
+          height: 28px;
+          background: #F5F9FF;
+          border-radius: 4px;
+          border: 1px solid #DFDFDF;
+          font-size: 14px;
+          color: #000000;
+        }
+      }
+  
+    }
+  }

src/components/signup/AudienceModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-dialog title="添加报名" :visible.sync="visibleSync" width="1200px" top="8vh" append-to-body @close="handleClose">
+    <el-tabs v-model="activeTab">
+     <el-tab-pane label="从受众中选择" name="quick">
+		</el-tab-pane>
+		</el-tabs>
+    <div class="tab-search">
+      <el-input
+        v-model="keyword"
+        placeholder="姓名"
+        size="small"
+        clearable
+        class="input"
+        @keyup.enter.native="onSearch"
+      />
+      <el-button type="primary" size="small" @click="onSearch">查询</el-button>
+      <el-button type="primary" size="small" @click="onReset">重置</el-button>
+    </div>
+    <el-table
+      class="use-table"
+      border
+      v-loading="loading"
+      :data="tableData"
+      @selection-change="onSelectionChange"
+      :row-key="row => row.id"
+      max-height="420"
+    >
+      <el-table-column type="selection" width="50" />
+      <el-table-column prop="userName" label="姓名" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="workNum" label="工号" width="120" />
+      <el-table-column prop="departName" label="部门" width="120" />
+      <el-table-column prop="orgPath" label="组织路径" min-width="200" show-overflow-tooltip />
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="total, prev, pager, next, jumper"
+        :pager-count="5"
+        :page-size="pageSize"
+        :current-page="pageNo"
+        :total="total"
+        @current-change="onPageChange"
+      />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { fetchAudienceList, saveStu } from "@/api/signup/commonStudent";
+
+export default {
+  name: "AudienceModal",
+  props: {
+    visible: { type: Boolean, default: false },
+    pageSize: { type: Number, default: 10 },
+    // 从课程详情中传入的受众ID列表
+    audienceIds: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      activeTab: 'quick',
+      courseDetail: JSON.parse(sessionStorage.getItem("courseDetail") || "{}"),
+      visibleSync: this.visible,
+      loading: false,
+      keyword: "",
+      tableData: [],
+      total: 0,
+      pageNo: 1,
+      selectedRows: [],
+    };
+  },
+  watch: {
+    visible(val) {
+      this.visibleSync = val;
+      if (val) {
+        this.resetAndFetch();
+      }
+    },
+    visibleSync(val) {
+      this.$emit("update:visible", val);
+    },
+  },
+  methods: {
+    resetAndFetch() {
+      this.keyword = "";
+      this.pageNo = 1;
+      this.selectedRows = [];
+      this.fetchList();
+    },
+    fetchList() {
+      this.loading = true;
+      fetchAudienceList({
+        keyword: this.keyword,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        audienceIdList: this.audienceIds || [],
+      })
+        .then((res) => {
+          const data = res.data || res.result || res || {};
+          this.tableData = data.list || [];
+          this.total = data.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    onSearch() {
+      this.pageNo = 1;
+      this.fetchList();
+    },
+    onReset() {
+      this.keyword = "";
+      this.onSearch();
+    },
+    onPageChange(page) {
+      this.pageNo = page;
+      this.fetchList();
+    },
+    onSelectionChange(list) {
+      this.selectedRows = list;
+    },
+    handleClose() {
+      this.visibleSync = false;
+    },
+    handleConfirm() {
+      const targetId = this.courseDetail?.id;
+      if(!this.selectedRows.length) {
+        this.$showMessage('请添加学员', 'error');
+        return
+      }
+      saveStu({
+        targetId,
+        type: 13,
+        deptIds: [],
+        groupIds: [],
+        studentList: this.selectedRows.map((e) => ({ id: e.userId })),
+      }).then(() => {
+        this.$showMessage("添加成功", 'success');
+        this.$emit("confirm", this.selectedRows);
+        this.handleClose();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  .label {
+    margin-right: 8px;
+    color: #666;
+  }
+
+  .input {
+    width: 240px;
+    margin-right: 12px;
+  }
+}
+::v-deep .el-dialog__body {
+  padding: 0 20px 30px 20px;
+}
+
+::v-deep .el-tabs__nav {
+  .el-tabs__item {
+    color: #3b7cff;
+  }
+  .el-tabs__active-bar {
+    width: 60px !important;
+    height: 1px;
+    left: 12px;
+  }
+}
+
+
+::v-deep .el-dialog__footer {
+
+.el-button {
+  min-width: 120px;
+  height: 40px;
+  font-size: 16px;
+  border-radius: 6px;
+  padding: 0 18px;
+}
+
+.el-button--default {
+  color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(0, 0, 0, 0.3);
+  background-color: #ffffff;
+}
+
+.el-button--primary {
+  background-color: #3b7cff;
+  border-color: #3b7cff;
+  color: #fff;
+}
+}
+</style>
+

src/components/signup/SignupModal.vue

@@ -0,0 +1,766 @@
+<template>
+  <div v-if="visible">
+    <el-dialog :visible="visible" :title="dialogTitle" width="1200px" top="8vh" append-to-body destroy-on-close
+      class="signup-dialog" @close="handleClose">
+      <div class="signup-wrap">
+        <el-tabs v-model="activeTab">
+          <!-- <el-tab-pane v-if="infoType" label="项目内学员" name="project">
+            <div class="tab-search">
+              <span class="label">姓名：</span>
+              <el-input v-model="projectParams.studentName" placeholder="请输入姓名" size="small" clearable class="input" />
+              <el-button type="primary" size="small" @click="getProjectStu">
+                搜索
+              </el-button>
+              <el-button size="small" @click="resetProjectStu">重置</el-button>
+            </div>
+            <el-table height="360" border :data="projectStu.list" style="width: 100%"
+              @selection-change="onProjectSelectionChange">
+              <el-table-column type="selection" width="50" />
+              <el-table-column prop="studentName" label="姓名" width="120" />
+              <el-table-column prop="studentUserNo" label="工号" width="140" />
+              <el-table-column prop="studentOrgName" label="归属组织" show-overflow-tooltip />
+              <el-table-column prop="studentDepartName" label="部门" />
+            </el-table>
+            <div class="pager">
+              <el-pagination background layout="total, prev, pager, next, jumper" :page-size="projectStu.pageSize"
+                :current-page="projectStu.pageNo" :total="projectStu.total" @current-change="onProjectPageChange" />
+            </div>
+          </el-tab-pane> -->
+
+          <el-tab-pane label="快速选人" name="quick">
+            <div class="tab2">
+              <div class="tab-search">
+                <span class="label">姓名：</span>
+                <el-input v-model="nameSearch.keyword" placeholder="请输入姓名" size="small" clearable class="input" />
+                <el-button type="primary" size="small" @click="onSearchStu">
+                  搜索
+                </el-button>
+                <el-button type="primary" size="small" @click="resetStu">重置</el-button>
+              </div>
+            <div class="split">
+                <div class="left-tree">
+                  <el-tree :data="treeData" :props="treeProps" node-key="id" highlight-current lazy :load="loadOrgNode"
+                    @node-click="onOrgSelect" />
+                </div>
+                <div class="table-area">
+                  <el-table class="use-table" border :data="stuTable.list" 
+                    @selection-change="onStuSelectionChange" :row-key="row => row.id || row.userId">
+                    <el-table-column type="selection" width="50" />
+                    <el-table-column prop="realName" label="姓名" width="120" />
+                    <el-table-column prop="userNo" label="工号" width="120" />
+                    <el-table-column prop="orgName" label="归属组织" min-width="160" show-overflow-tooltip />
+                    <el-table-column prop="departName" label="部门" min-width="140" />
+                  </el-table>
+                   <div class="pager pagination">
+                     <el-pagination background :pager-count="5" layout="total, prev, pager, next, jumper" :page-size="stuTable.pageSize"
+                      :current-page="stuTable.pageNo" :total="stuTable.total" @current-change="onStuPageChange" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane v-if="!selectStu" label="添加组织" name="org">
+            <div class="tab-search">
+              <span class="label">组织：</span>
+              <el-input v-model="searchOrgName.keyword" placeholder="请输入组织" size="small" clearable class="input"
+                @change="onOrgKeywordChange" />
+              <el-button type="primary" size="small" @click="searchOrg">
+                搜索
+              </el-button>
+              <el-button size="small" @click="resetOrg">重置</el-button>
+            </div>
+            <el-tree class="org-tree" show-checkbox node-key="id" :data="orgList" :props="orgTreeProps" lazy
+              :load="loadOrgNodeFull" @check-change="onOrgCheckChange" :default-checked-keys="selectedOrgKeys" />
+          </el-tab-pane>
+
+          <el-tab-pane v-if="!selectStu" label="受众关联" name="audience">
+            <div class="tab-search">
+              <span class="label">受众名称：</span>
+              <el-input v-model="audienceName.keyword" placeholder="请输入受众名称" size="small" clearable class="input" />
+              <el-button type="primary" size="small" @click="searchAudience">
+                搜索
+              </el-button>
+              <el-button size="small" @click="resetAudienceInfo">重置</el-button>
+            </div>
+            <el-table class="use-table" border :data="audienceTable.list" @selection-change="onAudienceSelectionChange"
+              :row-key="row => row.id">
+              <el-table-column type="selection" width="50" />
+              <el-table-column prop="audienceName" label="受众名称" min-width="220" />
+              <el-table-column prop="totalMember" label="总人数" width="100" />
+              <el-table-column prop="workMember" label="在职人数" width="120" />
+            </el-table>
+            <div class="pager pagination">
+              <el-pagination background :pager-count="5" layout="total, prev, pager, next, jumper" :page-size="audienceTable.pageSize"
+                :current-page="audienceTable.pageNo" :total="audienceTable.total"
+                @current-change="onAudiencePageChange" />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <div class="right1">
+          <div class="onerow">
+            <div class="onleft">
+              <div class="already">已选</div>
+            </div>
+          </div>
+          <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
+            <div class="selecteds" v-if="infoType">
+              <div class="person">项目内学员</div>
+              <div v-for="(item, i) in projectSelectRows" :key="item.id || item.studentId">
+                <div v-if="i < 11">
+                  <div class="chose">
+                    {{ item.studentName }}
+                    <div class="ch" @click="removeProject(item)"></div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div v-if="member">
+                    <div class="chose">
+                      {{ item.studentName }}
+                      <div class="ch" @click="removeProject(item)"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-if="!member && projectSelectRows.length > 10" class="ifsw">
+                <div @click="member = !member" class="sw">查看更多></div>
+              </div>
+              <div v-if="member && projectSelectRows.length > 10" class="ifsw">
+                <div @click="member = !member" class="sw">收起&lt;</div>
+              </div>
+            </div>
+            <div class="selecteds">
+              <div class="person">快速选人</div>
+              <div v-for="(item, i) in stuSelectRows" :key="item.id || item.userId">
+                <div v-if="i < 11">
+                  <div class="chose">
+                    {{ item.realName }}
+                    <div class="ch" @click="removeStu(item)"></div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div v-if="person">
+                    <div class="chose">
+                      {{ item.realName }}
+                      <div class="ch" @click="removeStu(item)"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-if="!person && stuSelectRows.length > 10" class="ifsw">
+                <div @click="person = !person" class="sw">查看更多></div>
+              </div>
+              <div v-if="person && stuSelectRows.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 deptList" :key="item.id">
+                <div v-if="i < 11">
+                  <div class="chose1">
+                    <div class="span">{{ item.name }}</div>
+                    <div class="ch1" @click="removeOrg(item)" style="cursor: pointer;"></div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div v-if="dept">
+                    <div class="chose1">
+                      <div class="span">{{ item.name }}</div>
+                      <div class="ch1" @click="removeOrg(item)"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-if="!dept && deptList.length > 10" class="ifsw">
+                <div @click="dept = !dept" class="sw">查看更多></div>
+              </div>
+              <div v-if="dept && deptList.length > 10" class="ifsw">
+                <div @click="dept = !dept" class="sw">收起&lt;</div>
+              </div>
+            </div>
+            <div v-if="!selectStu" class="selecteds">
+              <div class="group">受众关联</div>
+              <div v-for="(item, i) in auditSelectRows" :key="item.id">
+                <div v-if="i < 11">
+                  <div class="chose2">
+                    <div class="span">{{ item.audienceName }}</div>
+                    <div class="ch2" @click="removeAudience(item)"></div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div v-if="group">
+                    <div class="chose2">
+                      <div class="span">{{ item.audienceName }}</div>
+                      <div class="ch2" @click="removeAudience(item)"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-if="!group && auditSelectRows.length > 10" class="ifsw">
+                <div @click="group = !group" class="sw">查看更多></div>
+              </div>
+              <div v-if="group && auditSelectRows.length > 10" class="ifsw">
+                <div @click="group = !group" class="sw">收起&lt;</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="submitAuth">确 定</el-button>
+      </span>
+
+      <el-dialog :visible.sync="stageVisible" title="选择阶段" width="420px" append-to-body center>
+        <div class="stage-body">
+          <el-select v-model="stageId" placeholder="选择阶段" filterable style="width:100%">
+            <el-option v-for="item in stageIds" :key="item.id" :label="item.name || '默认'" :value="item.id" />
+          </el-select>
+          <div class="tip">已在其他关卡的学员，不会被添加到该关卡</div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="stageVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleDialogOk">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import {
+  fetchOrgChildren,
+  fetchOrgList,
+  fetchProjectStudents,
+  fetchQuickStudents,
+  fetchUserAudiences,
+  saveStu,
+} from "@/api/signup/commonStudent";
+
+export default {
+  name: "SignupModal",
+  props: {
+    visible: { type: Boolean, default: false },
+    mode: { type: String, default: "plain" },
+    type: Number,
+    infoType: Number,
+    infoId: 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: () => [] },
+    isGroup: { type: Boolean, default: false },
+    projectId: { type: Number, default: null },
+    groupId: { type: Number, default: null },
+    groupName: { type: String, default: null },
+    groupMemberCount: { type: Number, default: null },
+    groupMemberNumber: { type: Number, default: null },
+    activeKey1: { type: String, default: null },
+  },
+  data() {
+    return {
+      courseDetail: JSON.parse(sessionStorage.getItem("courseDetail") || "{}"),
+      activeTab: this.infoType ? "project" : "quick",
+      stageVisible: false,
+      stageId: undefined,
+      projectParams: {
+        pid: this.infoId,
+        type: this.infoType,
+        studentName: "",
+      },
+      projectStu: { list: [], pageNo: 1, pageSize: 10, total: 0 },
+      stuTable: { list: [], pageNo: 1, pageSize: 10, total: 0 },
+      audienceTable: { list: [], pageNo: 1, pageSize: 10, total: 0 },
+      treeData: [],
+      orgList: [],
+      treeProps: { children: "treeChildList", label: "name" },
+      orgTreeProps: { children: "directChildList", label: "name" },
+      nameSearch: { keyword: "", departId: "" },
+      audienceName: { keyword: "" },
+      searchOrgName: { keyword: "", pageNo: 1, pageSize: 200 },
+      projectSelectRows: [],
+      stuSelectRows: [],
+      auditSelectRows: [],
+      deptList: [],
+      selectedOrgKeys: [],
+      // 右侧“已选”区域展开/收起控制，与 CommonStudent.vue 保持一致
+      member: false,
+      dept: false,
+      person: false,
+      group: false,
+      screenHeight: document.body.clientHeight,
+    };
+  },
+  computed: {
+    dialogTitle() {
+      return { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[this.type] || this.title || "添加学员";
+    },
+    stageIds() {
+      return this.stage || [];
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.initData();
+      }
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.initData();
+    }
+  },
+  methods: {
+    initData() {
+      this.courseDetail = JSON.parse(sessionStorage.getItem("courseDetail") || "{}");
+      this.projectParams = {
+        pid: this.infoId,
+        type: this.infoType,
+        studentName: "",
+      };
+      this.nameSearch = { keyword: "", departId: "" };
+      this.audienceName = { keyword: "" };
+      this.searchOrgName = { keyword: "", pageNo: 1, pageSize: 200 };
+      this.projectSelectRows = [];
+      this.stuSelectRows = [];
+      this.auditSelectRows = [];
+      this.deptList = [];
+      this.selectedOrgKeys = [];
+      this.activeTab = this.infoType ? "project" : "quick";
+      // this.getProjectStu();
+      this.fetchOrgTree();
+      this.onSearchStu();
+      this.searchAudience();
+      this.searchOrg();
+    },
+    handleClose() {
+      // 通过父组件的 :visible.sync 控制关闭
+      this.$emit("update:visible", false);
+    },
+    getProjectStu() {
+      fetchProjectStudents({
+        ...this.projectParams,
+        pageNo: this.projectStu.pageNo,
+        pageSize: this.projectStu.pageSize,
+      }).then((res) => {
+        this.projectStu.list = res.data?.list || [];
+        this.projectStu.total = res.data?.total || 0;
+      });
+    },
+    onProjectPageChange(page) {
+      this.projectStu.pageNo = page;
+      this.getProjectStu();
+    },
+    onProjectSelectionChange(list) {
+      this.projectSelectRows = list;
+    },
+    resetProjectStu() {
+      this.projectParams.studentName = "";
+      this.getProjectStu();
+    },
+    onSearchStu() {
+      fetchQuickStudents({
+        ...this.nameSearch,
+        pageNo: this.stuTable.pageNo,
+        pageSize: this.stuTable.pageSize,
+      }).then((res) => {
+        console.log("res", res);
+        this.stuTable.list = res.data?.list || [];
+        this.stuTable.total = res.data?.total || 0;
+      });
+    },
+    onStuPageChange(page) {
+      this.stuTable.pageNo = page;
+      this.onSearchStu();
+    },
+    onStuSelectionChange(list) {
+      this.stuSelectRows = list;
+    },
+    resetStu() {
+      this.nameSearch = { keyword: "", departId: "" };
+      this.onSearchStu();
+    },
+    fetchOrgTree() {
+      fetchOrgList({ keyword: "" }).then((res) => {
+        this.treeData = res.data || res.result || res || [];
+      });
+    },
+    loadOrgNode(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.treeData);
+      }
+      fetchOrgChildren({ orgId: node.data.id, keyword: "" }).then((res) => {
+        resolve(res.data || res.result || res || []);
+      });
+    },
+    onOrgSelect(node) {
+      this.nameSearch.departId = node.id;
+      this.onSearchStu();
+    },
+    searchOrg() {
+      fetchOrgList(this.searchOrgName).then((res) => {
+        this.orgList = res.data || res.result || res || [];
+      });
+    },
+    resetOrg() {
+      // 重置组织搜索条件并刷新组织树
+      this.searchOrgName = { keyword: "", pageNo: 1, pageSize: 200 };
+      this.searchOrg();
+    },
+    onOrgKeywordChange() {
+      this.searchOrg();
+    },
+    loadOrgNodeFull(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.orgList);
+      }
+      fetchOrgChildren({ orgId: node.data.id, keyword: "" }).then((res) => {
+        resolve(res.data || res.result || res || []);
+      });
+    },
+    onOrgCheckChange(data, checked) {
+      if (checked) {
+        if (!this.deptList.find((d) => d.id === data.id)) {
+          this.deptList.push(data);
+        }
+      } else {
+        this.deptList = this.deptList.filter((d) => d.id !== data.id);
+      }
+      this.selectedOrgKeys = this.deptList.map((d) => d.id);
+    },
+    searchAudience() {
+      fetchUserAudiences({
+        ...this.audienceName,
+        pageNo: this.audienceTable.pageNo,
+        pageSize: this.audienceTable.pageSize,
+      }).then((res) => {
+        console.log('searchAudience', res);
+        this.audienceTable.list = res.data?.list || [];
+        this.audienceTable.total = res.data?.total || 0;
+      });
+    },
+    onAudiencePageChange(page) {
+      this.audienceTable.pageNo = page;
+      this.searchAudience();
+    },
+    onAudienceSelectionChange(list) {
+      this.auditSelectRows = list;
+    },
+    resetAudienceInfo() {
+      this.audienceName.keyword = "";
+      this.searchAudience();
+    },
+    onOrgSelectChange() { },
+    removeProject(item) {
+      this.projectSelectRows = this.projectSelectRows.filter(
+        (i) => (i.id || i.studentId) !== (item.id || item.studentId)
+      );
+    },
+    removeStu(item) {
+      this.stuSelectRows = this.stuSelectRows.filter(
+        (i) => (i.id || i.userId) !== (item.id || item.userId)
+      );
+    },
+    removeOrg(item) {
+      this.deptList = this.deptList.filter((i) => i.id !== item.id);
+      this.selectedOrgKeys = this.deptList.map((d) => d.id);
+    },
+    removeAudience(item) {
+      this.auditSelectRows = this.auditSelectRows.filter((i) => i.id !== item.id);
+    },
+    submitAuth() {
+      if (this.type === 2) {
+        this.stageVisible = true;
+      } else {
+        this.handleDialogOk();
+      }
+    },
+    handleDialogOk() {
+      if (
+        this.type === 1 &&
+        this.groupId &&
+        this.groupMemberCount &&
+        this.groupMemberNumber &&
+        this.groupMemberCount < this.groupMemberNumber + this.projectSelectRows.length + this.stuSelectRows.length
+      ) {
+        return this.$showMessage("添加小组学员超过最大值", 'error');
+      }
+      saveStu({
+        targetId: this.courseDetail?.id || this.id,
+        type: 13,
+        deptIds: this.deptList.map((e) => e.id),
+        groupIds: this.auditSelectRows.map((e) => e.id),
+        studentList: this.stuSelectRows.map((e) => ({id: e.id})),
+      }).then((res) => {
+        console.log('res', res);
+        this.$showMessage("添加成功", 'success');
+        this.$emit("confirm");
+        this.handleClose();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.signup-dialog ::v-deep .el-dialog__body {
+  padding-top: 10px;
+  padding: 10px 20px 30px 20px;
+}
+::v-deep .el-tabs__nav {
+  .el-tabs__item {
+    color: #3b7cff;
+  }
+  .el-tabs__active-bar {
+    // width: 60px !important;
+    height: 1px;
+    background-color: #3b7cff;
+  }
+}
+.signup-dialog ::v-deep .el-dialog__footer {
+
+  .el-button {
+    min-width: 120px;
+    height: 40px;
+    font-size: 16px;
+    border-radius: 6px;
+    padding: 0 18px;
+  }
+
+  .el-button--default {
+    color: rgba(0, 0, 0, 0.3);
+    border-color: rgba(0, 0, 0, 0.3);
+    background-color: #ffffff;
+  }
+
+  .el-button--primary {
+    background-color: #3b7cff;
+    border-color: #3b7cff;
+    color: #fff;
+  }
+}
+
+.signup-wrap {
+  display: flex;
+  gap: 16px;
+}
+
+.el-tabs {
+  flex: 1;
+}
+
+.tab-search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  .label {
+    margin-right: 8px;
+    color: #666;
+  }
+
+  .input {
+    width: 240px;
+    margin-right: 12px;
+  }
+}
+
+.split {
+  display: grid;
+  grid-template-columns: 250px minmax(0, 660px);
+  gap: 12px;
+}
+
+.left-tree {
+  height: 100%;
+  border: 1px solid #f0f0f0;
+  padding: 8px;
+  overflow: auto;
+}
+
+.table-area {
+}
+
+.pager {
+  margin-top: 10px;
+  text-align: right;
+}
+
+.right1 {
+  border-left: 1px solid #f2f6fe;
+  margin-left: 20px;
+  min-width: 200px;
+
+  .onerow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 40px;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .onleft {
+      display: flex;
+      text-align: center;
+
+      .already {
+        color: rgba(51, 51, 51, 1);
+        font-size: 16px;
+        font-weight: 500;
+        margin-left: 32px;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .selecteds {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: 32px;
+
+    .person {
+      width: 100%;
+      margin-top: 20px;
+      border-top: 1px solid #f2f6fe;
+    }
+
+    .chose {
+      width: 64px;
+      height: 24px;
+      margin-top: 25px;
+      margin-right: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2px;
+      border: 1px solid rgba(56, 139, 225, 1);
+      color: rgba(56, 139, 225, 1);
+      font-size: 12px;
+      position: relative;
+
+      .ch {
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        background-image: url(../../assets/images/basicinfo/ch.png);
+        background-size: 100%;
+        right: -8px;
+        top: -8px;
+      }
+    }
+
+    .ifsw {
+      display: flex;
+      align-items: end;
+      justify-content: center;
+      color: #4ea6ff;
+    }
+
+    .sw {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: justify;
+      color: #4ea6ff;
+      margin-top: 23px;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+    .dept {
+      width: 100%;
+      margin-top: 30px;
+      border-top: 1px solid #f2f6fe;
+    }
+
+    .chose1 {
+      height: 24px;
+      margin-top: 25px;
+      margin-right: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2px;
+      border: 1px solid rgba(56, 139, 225, 1);
+      color: rgba(56, 139, 225, 1);
+      font-size: 12px;
+      position: relative;
+
+      .span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .ch1 {
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        background-image: url(../../assets/images/basicinfo/ch.png);
+        background-size: 100%;
+        right: -8px;
+        top: -8px;
+      }
+    }
+
+    .group {
+      width: 100%;
+      margin-top: 30px;
+      border-top: 1px solid #f2f6fe;
+    }
+
+    .chose2 {
+      height: 24px;
+      margin-top: 25px;
+      margin-right: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2px;
+      border: 1px solid rgba(56, 139, 225, 1);
+      color: rgba(56, 139, 225, 1);
+      font-size: 12px;
+      position: relative;
+
+      .span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .ch2 {
+        position: absolute;
+        width: 18px;
+        height: 18px;
+        background-image: url(../../assets/images/basicinfo/ch.png);
+        background-size: 100%;
+        right: -8px;
+        top: -8px;
+      }
+    }
+  }
+}
+
+.org-tree {
+  max-height: 520px;
+  overflow: auto;
+  padding: 8px 12px;
+  border: 1px solid #f0f0f0;
+}
+
+.stage-body {
+  .tip {
+    margin-top: 12px;
+    color: #999;
+    font-size: 12px;
+  }
+}
+
+</style>

src/views/course/CourseManageRemote.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="app-main xuc-content">
     <div class="main-body">
-      <CourseManage />
+      <CourseManage :show-signup-actions="true" />
     </div>
   </section>
 </template>