refactor: 更新注册和AudienceMode组件中的受众管理功能，包括API调整和UI修改。

src/api/signup/commonStudent.js

@@ -4,13 +4,17 @@ 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 = "/manageApi/admin/thirdApi/audience/userAudiences";
+// 查询受众中的用户列表
+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）
+// 获取项目学员列表（走 manageApi，GET）弃用
 export const fetchProjectStudents = (params = {}) => {
   return ajax2.get1(STUDENT_LIST, params);
 };
@@ -27,7 +31,7 @@ export const fetchOrgList = (params) =>
 export const fetchOrgChildren = (params) =>
   ajax2.get1(ORG_CHILD_LIST, params);
 
-// 受众列表（走 manageApi，POST）
+// 受众中的用户列表（POST，application/json）
-export const fetchAudienceList = (params) =>
+export const fetchAudienceList = (data) =>
-  ajax2.get1(AUDIENCE_LIST, params);
+  ajax2.postJson("", AUDIENCE_LIST, data);
 

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

@@ -1,19 +1,23 @@
 <template>
-  <el-dialog title="选择受众" :visible.sync="visibleSync" width="800px" append-to-body @close="handleClose">
+  <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">
-      <span class="label">受众名称：</span>
       <el-input
         v-model="keyword"
-        placeholder="请输入受众名称"
+        placeholder="姓名"
         size="small"
         clearable
         class="input"
         @keyup.enter.native="onSearch"
       />
       <el-button type="primary" size="small" @click="onSearch">查询</el-button>
-      <el-button size="small" @click="onReset">重置</el-button>
+      <el-button type="primary" size="small" @click="onReset">重置</el-button>
     </div>
     <el-table
+      class="use-table"
       border
       v-loading="loading"
       :data="tableData"
@@ -22,10 +26,10 @@
       max-height="420"
     >
       <el-table-column type="selection" width="50" />
-      <el-table-column prop="audienceName" label="受众名称" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="userName" label="姓名" min-width="220" show-overflow-tooltip />
-      <el-table-column prop="totalMember" label="总人数" width="120" />
+      <el-table-column prop="workNum" label="工号" width="120" />
-      <el-table-column prop="workMember" label="在职人数" width="120" />
+      <el-table-column prop="departName" label="部门" width="120" />
-      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="orgPath" label="组织路径" min-width="200" show-overflow-tooltip />
     </el-table>
     <div class="pagination">
       <el-pagination
@@ -46,16 +50,23 @@
 </template>
 
 <script>
-import ajax2 from "@/api/unionAjax.js";
+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: "",
@@ -81,16 +92,16 @@ export default {
       this.keyword = "";
       this.pageNo = 1;
       this.selectedRows = [];
-      this.fetchAudienceList();
+      this.fetchList();
     },
-    fetchAudienceList() {
+    fetchList() {
       this.loading = true;
-      ajax2
+      fetchAudienceList({
-        .get1("/manageApi/admin/audience/userAudiences", {
+        keyword: this.keyword,
-          keyword: this.keyword,
+        pageNo: this.pageNo,
-          pageNo: this.pageNo,
+        pageSize: this.pageSize,
-          pageSize: this.pageSize,
+        audienceIdList: this.audienceIds || [],
-        })
+      })
         .then((res) => {
           const data = res.data || res.result || res || {};
           this.tableData = data.list || [];
@@ -102,7 +113,7 @@ export default {
     },
     onSearch() {
       this.pageNo = 1;
-      this.fetchAudienceList();
+      this.fetchList();
     },
     onReset() {
       this.keyword = "";
@@ -110,7 +121,7 @@ export default {
     },
     onPageChange(page) {
       this.pageNo = page;
-      this.fetchAudienceList();
+      this.fetchList();
     },
     onSelectionChange(list) {
       this.selectedRows = list;
@@ -119,11 +130,22 @@ export default {
       this.visibleSync = false;
     },
     handleConfirm() {
-      if (!this.selectedRows.length) {
+      const targetId = this.courseDetail?.id;
-        return this.$message.warning("请先选择受众");
+      if(!this.selectedRows.length) {
+        this.$showMessage('请添加学员', 'error');
+        return
       }
-      this.$emit("confirm", this.selectedRows);
+      saveStu({
-      this.handleClose();
+        targetId,
+        type: 13,
+        deptIds: [],
+        groupIds: [],
+        studentList: this.selectedRows.map((e) => ({ id: e.userId })),
+      }).then(() => {
+        this.$showMessage("添加成功", 'success');
+        this.$emit("confirm", this.selectedRows);
+        this.handleClose();
+      });
     },
   },
 };
@@ -145,10 +167,43 @@ export default {
     margin-right: 12px;
   }
 }
+::v-deep .el-dialog__body {
+  padding: 0 20px 30px 20px;
+}
 
-.pagination {
+::v-deep .el-tabs__nav {
-  text-align: right;
+  .el-tabs__item {
-  margin-top: 10px;
+    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

@@ -43,7 +43,7 @@
                     @node-click="onOrgSelect" />
                 </div>
                 <div class="table-area">
-                  <el-table border :data="stuTable.list" 
+                  <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" />
@@ -83,15 +83,15 @@
               </el-button>
               <el-button size="small" @click="resetAudienceInfo">重置</el-button>
             </div>
-            <el-table height="360" border :data="audienceTable.list" @selection-change="onAudienceSelectionChange"
+            <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">
+            <div class="pager pagination">
-              <el-pagination background layout="total, prev, pager, next, jumper" :page-size="audienceTable.pageSize"
+              <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>
@@ -233,13 +233,11 @@
 
 <script>
 import {
-  AUDIENCE_LIST,
-  ORG_LIST,
-  fetchAudienceList,
   fetchOrgChildren,
   fetchOrgList,
   fetchProjectStudents,
   fetchQuickStudents,
+  fetchUserAudiences,
   saveStu,
 } from "@/api/signup/commonStudent";
 
@@ -336,7 +334,7 @@ export default {
       this.deptList = [];
       this.selectedOrgKeys = [];
       this.activeTab = this.infoType ? "project" : "quick";
-      this.getProjectStu();
+      // this.getProjectStu();
       this.fetchOrgTree();
       this.onSearchStu();
       this.searchAudience();
@@ -438,11 +436,12 @@ export default {
       this.selectedOrgKeys = this.deptList.map((d) => d.id);
     },
     searchAudience() {
-      fetchAudienceList({
+      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;
       });
@@ -491,7 +490,7 @@ export default {
         this.groupMemberNumber &&
         this.groupMemberCount < this.groupMemberNumber + this.projectSelectRows.length + this.stuSelectRows.length
       ) {
-        return this.$message.warning("添加小组学员超过最大值");
+        return this.$showMessage("添加小组学员超过最大值", 'error');
       }
       saveStu({
         targetId: this.courseDetail?.id || this.id,
@@ -501,7 +500,7 @@ export default {
         studentList: this.stuSelectRows.map((e) => ({id: e.id})),
       }).then((res) => {
         console.log('res', res);
-        this.$message.success("添加成功");
+        this.$showMessage("添加成功", 'success');
         this.$emit("confirm");
         this.handleClose();
       });
@@ -513,9 +512,18 @@ export default {
 <style lang="scss" scoped>
 .signup-dialog ::v-deep .el-dialog__body {
   padding-top: 10px;
-  padding: 30px;
+  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 {
@@ -754,122 +762,5 @@ export default {
     font-size: 12px;
   }
 }
-::v-deep.el-table {
-  // border-radius: 6px 6px 0 0;
-  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;
-    }
-  }
-}
-.pagination {
-  text-align: right;
-  padding-top: 20px;
-  ::v-deep .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: transparent;
-      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: #4284F7;
-          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;
-      }
-    }
-
-  }
-}
 </style>