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">{{basicInfo.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">{{basicInfo.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">
          <div class="img2"></div>
          <div class="wz">导出信息</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <a-table
          style="border: 1px solid #f2f6fe"
          :columns="columns"
          :data-source="dataSource"
          :loading="tableDataTotal === -1 ? true : false"
          expandRowByClick="true"
          :scroll="{ x: 1500 }"
          @expand="expandTable"
          :pagination="false"
        />
      </div>
      <!-- 表格 -->
    </div>
  </div>
  <view-assess v-model:Assessvisible="Assessvisible" />
</template>

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

export default {
  name: "ManagePage",
  components: { ViewAssess },
  setup() {
    const router = useRouter();
    const state = reactive({
      Assessvisible: false,
      basicInfo: "" ,
      currentPage: 1,
      pageSize: 10,
      tableDataTotalLoading: true,
      tabledata: [],
      tableDataTotal: 0,

    });

    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)
      });

      // 获取学员信息
      console.log('传递的请求学员信息的参数',{
            pageNo: state.currentPage,
            pageSize: state.pageSize,
            type: 3,
            taskId: router.currentRoute.value.params.id,
            pid: router.currentRoute.value.params.id
          })
      // createName
    };

    getInfoDate();

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

      columns: [
        {
          title: "姓名",
          width: 40,
          dataIndex: "name",
          key: "name",
        },
        {
          title: "部门",
          width: 50,
          dataIndex: "department",
          key: "department",
        },
        //  {
         //   width: 50,
         //   title: "岗位",
         //   dataIndex: "post",
          //  key: "post",
        //  },
        {
          title: "项目",
          width: 50,
          dataIndex: "project",
          key: "project",
        },
        {
          title: "学习路径",
          width: 50,
          dataIndex: "learning",
          key: "learning",
        },
        {
          title: "提交时间",
          width: 50,
          dataIndex: "submit",
          key: "submit",
        },
        {
          title: "操作",
          width: 50,
          dataIndex: "opacation",
          key: "opacation",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: () => {
            return (
              <div class="opacationn">
                <span
                  onClick={() => {
                    showassess();
                  }}
                  style="cursor:pointer"
                >
                  查看
                </span>
              </div>
            );
          },
        },
      ],
      showassess,
    };
  },
};
</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/export.png);
      background-size: 100% 100%;
      margin-right: 7px;
    }
  }

  .btn1 {
    background: #4ea6ff;

    color: #ffffff;
  }

  .btn2 {
    background: #ffffff;

    color: #4ea6ff;
    border: 1px solid #4ea6ff;
  }
}
</style>