fe-manage/src/views/research/ManagePage.vue

<!-- 评估管理-管理页面 -->
<template>
  <div class="managepage">
    <div class="up">
      <div class="header">
        <!-- 2022-11-30注释 后面放开 新增display: flex; justify-content: space-between  评估管理的div更改位置-->
        <div style="width: 100%; display: flex; justify-content: space-between">
          <!-- 2022-11-30注释 后面放开 -->
        <!-- <div class="export">
            <img src="../../assets/images/research/export.png" />
            <span style="color: #4ea6ff; font-size: 14px; margin-left: 3px">
              导出信息
            </span>
            </div> -->
          <div class="text">评估管理</div>
          <router-link to="/researchmanage" class="goback">
            <span class="return"></span>
            <router-link class="returntext" to="/researchmanage">
              返回
            </router-link>
          </router-link>
        </div>
        <!-- <div class="text">评估管理</div> -->
      </div>
      <div class="message">
        <div class="title">基本信息</div>
        <div class="messagebox">
          <div style="width: 186px; margin-right: 126px; float: left">
            <span class="name">评估名称:</span>
            <span class="descript">{{ basicInfo.assessmentName }}</span>
          </div>
          <div style="width: 103px; margin-right: 126px; float: left">
            <span class="name">创建人:</span>
            <span class="descript">{{ createName }}</span>
          </div>
          <div style="width: 88px; margin-right: 126px; float: left">
            <span class="name">状态:</span>
            <span
              class="descript">{{ basicInfo.releaseStatus ? basicInfo.releaseStatus == 1 ? "待发布" : basicInfo.releaseStatus == 2 ? "已发布" : "已结束" : '' }}</span>
          </div>
          <div style="width: 192px; margin-right: 126px; float: left">
            <span class="name">创建时间:</span>
            <span class="descript">{{ createTime }}</span>
          </div>
          <div style="width: 192px; margin-right: 126px; float: left">
            <span class="name">发布时间:</span>
            <span class="descript">{{ basicInfo.releaseTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <div class="up down">
      <div class="header">
        <div class="text">学员情况</div>
        <div class="btn btn2" @click="exportStudentInfo">
          <div class="img2"></div>
          <div class="wz">导出信息</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <a-table style="border: 1px solid #f2f6fe" :columns="columns" :data-source="evalStuListData"
          :loading="evalStuListLoading" expandRowByClick="true" :scroll="{ x: 1500 }" @expand="expandTable"
          :pagination="false" />
      </div>
      <!-- 表格 -->
      <!-- 分页 -->
      <div style="width:100%;display:flex;justify-content:center;align-items:center;">
        <a-pagination v-if="evalStuListDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
          hideOnSinglePage="true" :pageSize="pageSize" :current="evalCurrentPage" :total="evalStuListDataTotal"
          class="pagination" @change="changePaginationStu" />
      </div>
      <!-- 分页 -->
    </div>
  </div>
  <view-assess v-model:Assessvisible="Assessvisible" :datasource="evalDataSource" :evalName="basicInfo.assessmentName"
    :basicdata="basicInfo" />
</template>

<script>
import ViewAssess from "../../components/drawers/ViewAssess";
import { reactive, toRefs } from "vue";
import { queryAssessmentDetailList } from "@/api/indexResearch";
import { useRouter, useRoute } from "vue-router";
import * as api from "@/api/indexTaskManage";

export default {
  name: "ManagePage",
  components: { ViewAssess },
  setup() {
    const router = useRouter();
    const { query: { createName, createTime }} = useRoute();
    const state = reactive({
      Assessvisible: false,
      basicInfo: "",
      currentPage: 1,
      pageSize: 10,
      tableDataTotalLoading: true,
      tabledata: [],
      tableDataTotal: 0,
      evalDataSource: "",
      evalStuListData: [],
      evalStuListLoading: true,
      evalStuListDataTotal: 0,
      evalCurrentPage: 1
    });

    const getInfoDate = async () => {
      state.tableDataTotalLoading = true;
      await queryAssessmentDetailList({
        assessmentId: router.currentRoute.value.params.id,
      }).then(res => {
        console.log('获取评估信息', res);
        if (res.data.code == 200) {
          state.basicInfo = res.data.data;
        }
      }).catch(err => {
        console.log(err)
      });

      // 获取学员信息
      state.evalStuListLoading = true;
      api.QueryAssessmentManageMessage({
        "assessmentId": router.currentRoute.value.params.id,
        "pageNo": state.evalCurrentPage,
        "pageSize": state.pageSize
      }).then(res => {
        console.log('获取学员信息', res)
        // evalStuListDataTotal evalCurrentPage
        state.evalStuListLoading = false;
        if (res.data.code == 200) {
          state.evalStuListDataTotal = res.data.data.total;
          state.evalStuListData = res.data.data.rows;
          state.evalStuListLoading = false;
        }
      }).catch(err => {
        console.log(err)
        state.evalStuListLoading = false;
      })
    };

    getInfoDate();

    // 导出学员信息
    function exportStudentInfo() {
      window.open(`${process.env.VUE_APP_BASE_API}/admin/assessment/manage/exportAssessmentMessage?courseId=${router.currentRoute.value.params.id}`)
    }

    //分页
    const changePaginationStu = (page) => {
      state.evalStuListLoading = true;
      state.evalCurrentPage = page;
      getInfoDate();
    };

    const showassess = (data) => {
      state.evalDataSource = data;
      state.Assessvisible = true;
    };
    return {
      ...toRefs(state),
      dataSource: [
        {
          key: "1",
          userNo: 112231234,
          dataSource: "XXX项目",
          name: "张三",
          department: "产品部",
          post: "产品经理",
          project: "产品经理进阶-腾飞班1",
          learning: "产品经理学习路径",
          submit: "2022-07-22 9:30",
        },
        {
          key: "2",
          userNo: 114631234,
          dataSource: "XXX路径图",
          name: "李四",
          department: "产品部",
          post: "产品经理",
          project: "产品经理进阶-腾飞班1",
          learning: "高级产品经理学习路径",
          submit: "2022-07-22 9:30",
        },
        {
          key: "3",
          userNo: 23465232,
          dataSource: "XXX路径图",
          name: "王五",
          department: "产品部",
          post: "产品经理",
          project: "产品经理进阶-腾飞班1",
          learning: "-",
          submit: "2022-07-22 9:30",
        },
        {
          key: "4",
          userNo: 7283234,
          dataSource: "XXX路径图",
          name: "赵六",
          department: "产品部",
          post: "产品经理",
          project: "产品经理进阶-腾飞班1",
          learning: "HR学习路径",
          submit: "2022-07-22 9:30",
        },
      ],

      columns: [
        {
          title: "工号",
          width: 40,
          dataIndex: "studentCode",
          key: "studentCode",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentCode ? text.record.studentCode : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "姓名",
          width: 40,
          dataIndex: "studentName",
          key: "studentName",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentName ? text.record.studentName : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "部门",
          width: 50,
          dataIndex: "studentDepartName",
          key: "studentDepartName",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentDepartName ? text.record.studentDepartName : "-"}</span>
              </div>
            );
          },
        },
        {
          width: 50,
          title: "岗位",
          dataIndex: "studentJobName",
          key: "studentJobName",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentJobName ? text.record.studentJobName : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "数据来源",
          width: 50,
          dataIndex: "source",
          key: "source",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.source ? text.record.source : "-"}</span>
              </div>
            );
          },
        },
        // {
        //   title: "项目",
        //   width: 50,
        //   dataIndex: "project",
        //   key: "project",
        // },
        // {
        //   title: "学习路径",
        //   width: 50,
        //   dataIndex: "learning",
        //   key: "learning",
        // },
        {
          title: "提交时间",
          width: 50,
          dataIndex: "submitTime",
          key: "submitTime",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.submitTime ? text.record.submitTime : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "操作",
          width: 50,
          dataIndex: "opacation",
          key: "opacation",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (data) => {
            return (
              <div class="opacationn">
                <span
                  onClick={() => {
                    console.log('iyiy', data.record)
                    showassess(data.record);
                  }}
                  style="cursor:pointer"
                >
                  查看
                </span>
              </div>
            );
          },
        },
      ],
      showassess,
      changePaginationStu,
      exportStudentInfo,
      createName,
      createTime
    };
  },
};
</script>

<style lang="scss" >
.managepage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .up {
    width: 100%;
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-right: 38px;
      border-bottom: 1px solid #f2f6fc;

      .text {
        font-size: 16px;
        color: #363636;
        margin-top: 23px;
        margin-left: 38px;
        margin-bottom: 10px;
      }

      .export {
        float: left;
        width: 130px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        margin-top: 29px;
        margin-left: 38px;
        text-align: center;
        padding-top: 7px;
      }

      .goback {
        float: right;
        padding-right: 70px;
        //padding-top: 37px;
        position: relative;

        .return {
          display: inline-block;
          width: 42px;
          height: 42px;
          margin-top: 17px;
          margin-right: 10px;
          background-image: url("../../assets/images/projectadd/return.png");
        }

        .returntext {
          display: inline-block;
          position: absolute;
          top: 27px;
          color: #4ea6ff;
          font-size: 14px;
        }
      }
    }

    .message {
      width: 100%;
      display: flex;
      flex-direction: column;

      .title {
        color: #4f5156;
        font-size: 14px;
        margin-left: 38px;
        margin-top: 20px;
        font-weight: 500;
      }

      .messagebox {
        //width: 100%;
        //display: flex;
        margin-top: 20px;
        margin-left: 38px;
        margin-bottom: 20px;

        .name {
          color: #999ba3;
          font-size: 14px;
        }

        .descript {
          color: #4f5156;
          font-size: 14px;
        }
      }
    }
  }

  .split {
    width: 100%;
    height: 20px;
    background-color: #edf0f5;
  }

  .down {
    width: 100%;
    display: flex;
    flex-direction: column;

    .tableBox {
      margin: 20px 38px 30px;

      .opacationn {
        color: #4ea6ff;
        cursor: pointer;
      }

      th.ant-table-cell {
        background-color: #eff4fc !important;
        text-align: center;
        color: #999ba3;
      }

      td.ant-table-cell {
        text-align: center;
      }

      .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
        background: #f6f9fd;
      }
    }
  }

  .btn {
    cursor: pointer;
    width: 130px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    .img1 {
      width: 15px;
      height: 17px;
      background-image: url(../../assets/images/courseManage/search0.png);
      background-size: 100% 100%;
      margin-right: 7px;
    }

    .img2 {
      width: 16px;
      height: 18px;
      background-image: url(../../assets/images/coursewareManage/export1.png);
      background-size: 100% 100%;
      margin-right: 7px;
    }
  }

  .btn1 {
    background: #4ea6ff;

    color: #ffffff;
  }

  .btn2 {
    background: #4ea6ff;

    color: #fff;
    border: 1px solid #4ea6ff;
  }

  .btn2:active {
    background: #0982ff;
  }
}</style>