learning-system-portal/src/components/signup/AudienceModal.vue

<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>