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

<!-- 评估管理-管理页面 -->
<template>
  <div class="managepage">
    <div class="up">
      <div class="header">
        <div style="width: 100%">
          <div class="export">
            <img src="../../assets/images/research/export.png" />
            <span style="color: #4ea6ff; font-size: 14px; margin-left: 3px">
              导出信息
            </span>
          </div>
          <router-link to="/manage/researchmanage" class="goback">
            <span class="return"></span>
            <router-link class="returntext" to="/manage/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">课程评估</span>
          </div>
          <div style="width: 103px; margin-right: 126px; float: left">
            <span class="name">创建人:</span>
            <span class="descript">管理员</span>
          </div>
          <div style="width: 88px; margin-right: 126px; float: left">
            <span class="name">状态:</span>
            <span class="descript">已发布</span>
          </div>
          <div style="width: 192px; margin-right: 126px; float: left">
            <span class="name">创建时间:</span>
            <span class="descript">2022-07-22 9:30</span>
          </div>
          <div style="width: 192px; margin-right: 126px; float: left">
            <span class="name">发布时间:</span>
            <span class="descript">2022-07-22 9:30</span>
          </div>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <div class="up down">
      <div class="header">
        <div class="text">学员情况</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 getInfoDate = async () => {
      let res = await queryAssessmentDetailList({
        assessmentId: router.currentRoute.value.params.id,
      });
      console.log(res);
    };
    getInfoDate();

    const state = reactive({
      Assessvisible: false,
    });
    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: column;
      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;
      }
    }
  }
}
</style>