[FIX]新增受众弹窗

src/components/signup/AudienceModal.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-dialog title="选择受众" :visible.sync="visibleSync" width="800px" append-to-body @close="handleClose">
+    <div class="tab-search">
+      <span class="label">受众名称：</span>
+      <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 size="small" @click="onReset">重置</el-button>
+    </div>
+    <el-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="audienceName" label="受众名称" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="totalMember" label="总人数" width="120" />
+      <el-table-column prop="workMember" label="在职人数" width="120" />
+      <el-table-column prop="description" 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 ajax2 from "@/api/unionAjax.js";
+
+export default {
+  name: "AudienceModal",
+  props: {
+    visible: { type: Boolean, default: false },
+    pageSize: { type: Number, default: 10 },
+  },
+  data() {
+    return {
+      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.fetchAudienceList();
+    },
+    fetchAudienceList() {
+      this.loading = true;
+      ajax2
+        .get1("/manageApi/admin/audience/userAudiences", {
+          keyword: this.keyword,
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+        })
+        .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.fetchAudienceList();
+    },
+    onReset() {
+      this.keyword = "";
+      this.onSearch();
+    },
+    onPageChange(page) {
+      this.pageNo = page;
+      this.fetchAudienceList();
+    },
+    onSelectionChange(list) {
+      this.selectedRows = list;
+    },
+    handleClose() {
+      this.visibleSync = false;
+    },
+    handleConfirm() {
+      if (!this.selectedRows.length) {
+        return this.$message.warning("请先选择受众");
+      }
+      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;
+  }
+}
+
+.pagination {
+  text-align: right;
+  margin-top: 10px;
+}
+</style>
+

src/components/signup/SignupModal.vue

@@ -4,7 +4,7 @@
       class="signup-dialog" @close="handleClose">
       <div class="signup-wrap">
         <el-tabs v-model="activeTab">
-          <el-tab-pane v-if="infoType" label="项目内学员" name="project">
+          <!-- <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" />
@@ -25,7 +25,7 @@
               <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> -->
 
           <el-tab-pane label="快速选人" name="quick">
             <div class="tab2">
@@ -35,9 +35,9 @@
                 <el-button type="primary" size="small" @click="onSearchStu">
                   搜索
                 </el-button>
-                <el-button size="small" @click="resetStu">重置</el-button>
+                <el-button type="primary" size="small" @click="resetStu">重置</el-button>
               </div>
-              <div class="split">
+            <div class="split">
                 <div class="left-tree">
                   <el-tree :data="treeData" :props="treeProps" node-key="id" highlight-current lazy :load="loadOrgNode"
                     @node-click="onOrgSelect" />
@@ -51,8 +51,8 @@
                     <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">
-                    <el-pagination background layout="total, prev, pager, next, jumper" :page-size="stuTable.pageSize"
+                   <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>
@@ -267,6 +267,7 @@ export default {
   },
   data() {
     return {
+      courseDetail: JSON.parse(sessionStorage.getItem("courseDetail") || "{}"),
       activeTab: this.infoType ? "project" : "quick",
       stageVisible: false,
       stageId: undefined,
@@ -300,7 +301,7 @@ export default {
   },
   computed: {
     dialogTitle() {
-      return { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[this.type] || this.title || "添加报名";
+      return { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[this.type] || this.title || "添加学员";
     },
     stageIds() {
       return this.stage || [];
@@ -320,6 +321,7 @@ export default {
   },
   methods: {
     initData() {
+      this.courseDetail = JSON.parse(sessionStorage.getItem("courseDetail") || "{}");
       this.projectParams = {
         pid: this.infoId,
         type: this.infoType,
@@ -492,17 +494,13 @@ export default {
         return this.$message.warning("添加小组学员超过最大值");
       }
       saveStu({
-        targetId: this.id,
-        type: this.type,
-        clear: this.clear,
+        targetId: this.courseDetail?.id || this.id,
+        type: 13,
         deptIds: this.deptList.map((e) => e.id),
-        stageId: this.stageId,
         groupIds: this.auditSelectRows.map((e) => e.id),
-        studentList: this.stuSelectRows,
-        projectList: this.projectSelectRows,
-        groupName: this.groupName,
-        groupId: this.groupId,
-      }).then(() => {
+        studentList: this.stuSelectRows.map((e) => ({id: e.id})),
+      }).then((res) => {
+        console.log('res', res);
         this.$message.success("添加成功");
         this.$emit("confirm");
         this.handleClose();
@@ -518,6 +516,29 @@ export default {
   padding: 30px;
 }
 
+.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;
@@ -545,7 +566,7 @@ export default {
 
 .split {
   display: grid;
-  grid-template-columns: 250px auto;
+  grid-template-columns: 250px minmax(0, 660px);
   gap: 12px;
 }
 
@@ -567,6 +588,7 @@ export default {
 .right1 {
   border-left: 1px solid #f2f6fe;
   margin-left: 20px;
+  min-width: 200px;
 
   .onerow {
     display: flex;
@@ -732,4 +754,122 @@ 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>

src/views/course/CourseManage.vue

@@ -261,6 +261,11 @@
       :mode="addSignupMode"
       @confirm="handleSignupCreate"
     />
+    <AudienceModal
+      v-if="showSignupActions"
+      :visible.sync="audienceDialogVisible"
+      @confirm="handleAudienceConfirm"
+    />
     <!-- 学习详情 -->
     <el-dialog title="学习详情" :visible.sync="study.detailShow" width="900px" :append-to-body="true">
       <div>
@@ -484,10 +489,11 @@ import { getToken } from "@/utils/token";
 import axios from "axios";
 import NameFilterSelect from "@/components/NameFilterSelect/index.vue";
 import SignupModal from "@/components/signup/SignupModal.vue";
+import AudienceModal from "@/components/signup/AudienceModal.vue";
 
 NameFilterSelect;
 export default {
-  components: { NameFilterSelect, SignupModal },
+  components: { NameFilterSelect, SignupModal, AudienceModal },
   props: {
     showSignupActions: {
       type: Boolean,
@@ -575,6 +581,8 @@ export default {
       value: "",
       input: "",
       tabName: "second",
+      audienceDialogVisible: false,
+      selectedAudiences: [],
       learningSituation: {
         pageIndex: 1, //第几页
         pageSize: 10, // 每页多少条
@@ -677,12 +685,16 @@ export default {
     }),
 
     openAddSignup(command) {
+      if (command === "audience") {
+        this.audienceDialogVisible = true;
+        return;
+      }
       this.addSignupMode = command === "audience" ? "audience" : "plain";
       this.addSignupVisible = true;
     },
     handleSignupCreate(payload) {
       console.log("signup payload", payload);
-      this.$message.success("已记录添加报名操作（待接入后端接口）");
+      // this.$message.success("已记录添加报名操作（待接入后端接口）");
     },
     handleDeleteSignup(row) {
       this.$confirm("确定删除该报名记录吗？", "提示", {
@@ -1130,6 +1142,10 @@ export default {
       this.learningRecords.pageIndex = val;
       this.getStudyRecords();
     },
+    handleAudienceConfirm(list) {
+      this.selectedAudiences = list;
+      this.$message.success(`已选择${list.length}个受众`);
+    },
     // 报名列表
     getSignupList() {
       let params = {