feat:增加项目/学习路径图 测评学员列表及数据导出

src/components/drawers/router/RouterEvaluationManage.vue

@@ -2,14 +2,16 @@
     <a-drawer
       v-if="EvaluationModelVisible"
       :visible="EvaluationModelVisible"
-      class="drawerStyle ProjectEvalManage"
+      class="drawerStyle ProjectOnlineManage"
       placement="right"
       width="60%"
       @after-visible-change="afterVisibleChange"
     >
       <div class="drawerMain">
         <div class="header">
-          <div class="headerTitle">【测评】{{ title }}</div>
+          <div class="headerTitle">
+            【测评】{{ title }}
+          </div>
           <img
             style="width: 29px; height: 29px; cursor: pointer"
             src="../../../assets/images/basicinfo/close.png"
@@ -17,28 +19,38 @@
           />
         </div>
         <div class="main">
-          <div class="endtime">起止时间：2022-07-21 14:00 ～ 2022-7-30 14:00</div>
+          <div
+            v-if="datasource.type !== 6 && datasource.type !== 9"
+            class="endtime"
+          >
+            起止时间：—
+          </div>
+          <div v-else class="endtime">
+            起止时间：{{ datasource.startTime }} ～ {{ datasource.endTime }}
+          </div>
           <div class="search">
-            <div class="namecon" style="margin-right: 30px">
-              <div class="name">姓名：</div>
-              <a-input
-                v-model:value="name"
-                style="width: 270px; height: 40px; border-radius: 8px"
-                placeholder="请输入姓名"
-              />
-            </div>
-            <div class="namecon" style="margin-right: 50px">
-              <div class="name">任务状态：</div>
-              <div class="select">
-                <a-select
-                  v-model:value="projectName"
-                  style="width: 270px"
-                  placeholder="请选择"
-                  :options="projectNameList"
-                  @change="selectProjectName"
-                  allowClear
-                  showSearch
-                ></a-select>
+            <div class="sealeft">
+              <div class="namecon" style="margin-right: 30px">
+                <div class="name">姓名：</div>
+                <a-input
+                  v-model:value="name"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="请输入姓名"
+                />
+              </div>
+              <div class="namecon" style="margin-right: 50px">
+                <div class="name">任务状态：</div>
+                <div class="select">
+                  <a-select
+                    v-model:value="projectName"
+                    style="width: 270px"
+                    placeholder="请选择"
+                    :options="projectNameList"
+                    @change="selectProjectName"
+                    allowClear
+                    showSearch
+                  ></a-select>
+                </div>
               </div>
             </div>
             <div class="btns">
@@ -59,69 +71,54 @@
           <div class="btnss" style="margin-top: 20px">
             <div class="btn btn1" @click="godie" style="margin-right: 20px">
               <div class="img1"></div>
-              <div class="wz">催促测评</div>
+              <div class="wz">催促学习</div>
             </div>
-            <div class="btn btn2">
+            <div class="btn btn2" @click="exportTaskStu">
               <div class="img2"></div>
               <div class="wz">导出数据</div>
             </div>
           </div>
-          <!-- <div class="line">
-            <div class="inline">
-              <div class="left">
-                <div class="img"></div>
-                <div class="text" style="margin-left: 10px">已选择</div>
-                <div class="text2">{{ selectedRowKeys.length }}</div>
-                <div class="text">项</div>
-                <div class="text3">列表选项总计：</div>
-                <div class="text4">{{ tableDataTotal }}条</div>
-              </div>
-              <div class="right" @click="clearLine">清空</div>
-            </div>
-          </div> -->
-          <div class="tableBox" style="margin-top: 20px; margin-bottom: 100px">
+          <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
             <a-table
               style="border: 1px solid #f2f6fe"
-              :columns="tablecolumns"
+              :columns="tableDataFunc()"
               :data-source="tabledata"
-              :loading="tableDataTotal === -1 ? true : false"
+              :loading="tableDataTotalLoading"
               :scroll="{ x: 900 }"
               :pagination="false"
-              :row-selection="{
-                selectedRowKeys: selectedRowKeys,
-                onChange: onSelectChange,
-              }"
             />
-  
-            <div class="pa">
-              <a-pagination
-                :showSizeChanger="false"
-                showQuickJumper="true"
-                hideOnSinglePage="true"
-                :pageSize="pageSize"
-                :current="currentPage"
-                :total="tableDataTotal"
-                class="pagination"
-                v-if="tableDataTotal > 10"
-              />
+            <div class="tableBox">
+              <div class="pa">
+                <a-pagination
+                  :showSizeChanger="false"
+                  showQuickJumper="true"
+                  hideOnSinglePage="true"
+                  :pageSize="pageSize"
+                  :current="currentPage"
+                  :total="tableDataTotal"
+                  class="pagination"
+                  @change="changePaginationStu"
+                  v-if="tableDataTotal > 10"
+                />
+              </div>
             </div>
           </div>
         </div>
         <div class="btnn">
-          <button class="btn1">取消</button>
-          <button class="btn2">确定</button>
+          <button class="btn1" @click="closeDrawer">取消</button>
+          <button class="btn2" @click="closeDrawer">确定</button>
         </div>
       </div>
     </a-drawer>
   </template>
   
   <script>
-  import { toRefs, reactive } from "vue";
+  import { toRefs, reactive, onMounted, onUnmounted } from "vue";
   import { message } from "ant-design-vue";
-  
   // import * as api from "../../../api/index";
+  import * as api from "../../../api/indexTaskManage";
   export default {
-    name: "RouterCommonManage",
+    name: "RouterEvaluationManage",
   
     props: {
       EvaluationModelVisible: {
@@ -132,10 +129,18 @@
         type: String,
         default: "",
       },
+      levelName: {
+        type: String,
+        default: "",
+      },
       projectTaskId: {
         type: Number,
         default: null,
       },
+      itemsType: {
+        type: Number,
+        default: null,
+      },
       datasource: {
         type: Object,
         default: function () {
@@ -146,89 +151,87 @@
   
     setup(props, ctx) {
       const state = reactive({
+        visible: props.EvaluationModelVisible,
         name: "",
-  
-        open: false,
-        projectName: null,
+        pageNo: 1,
+        pageSize: 10,
+        currentPage: 1,
+        tableDataTotal: 0,
+        projectName: "",
         projectNameList: [
+          // {
+          //   id: 1,
+          //   value: "-1",
+          //   label: "未开始",
+          // },
           {
             id: 1,
-            value: "-1",
-            label: "未开始",
-          },
-          {
-            id: 2,
             value: "0",
             label: "未完成",
           },
           {
-            id: 3,
+            id: 2,
             value: "1",
             label: "已完成",
           },
         ],
-        selectedRowKeys: [],
-  
-        pageNo: 1,
-        pageSize: 10,
-        currentPage: 1,
-        tableDataTotal: 1,
-        tabledata: [
-          {
-            workNum: "123",
-            userName: "li",
-            deptName: "开发",
-            jobName: "前端开发",
-            submitTime: "2022-07-22 14:00:30",
-            status: "已完成",
-            PDFstatus: "未生成",
-          },
-        ],
-        tablecolumns: [
+        tabledata: [],
+        tableDataTotalLoading: true, // 表格loading加载配置
+      });
+      const tableDataFunc = () => {
+
+        const columns = [
           {
             title: "工号",
-            dataIndex: "workNum",
-            key: "workNum",
+            dataIndex: "studentUserNo",
+            key: "studentUserNo",
             width: 50,
-            align: "left",
+            align: "center",
             className: "h head",
           },
           {
             title: "姓名",
-            dataIndex: "userName",
-            key: "userName",
+            dataIndex: "studentName",
+            key: "studentName",
             width: 50,
             align: "left",
             className: "h head",
           },
           {
             title: "所在部门",
-            dataIndex: "deptName",
-            key: "userName",
+            dataIndex: "studentDepartName",
+            key: "studentDepartName",
             width: 60,
             align: "center",
             className: "h",
           },
           {
             title: "所在岗位",
-            dataIndex: "jobName",
-            key: "jobName",
+            dataIndex: "studentJobName",
+            key: "studentJobName",
             width: 60,
             align: "center",
             className: "h",
           },
           {
             title: "学员关卡",
-            dataIndex: "level",
-            key: "level",
+            dataIndex: "currentStageName",
+            key: "currentStageName",
             width: 60,
             align: "center",
             className: "h",
+            customRender: () => {
+              return (
+                <div class="racona">
+                  <span> {props.levelName}</span>
+                </div>
+              );
+            },
           },
           {
             title: "提交时间",
-            dataIndex: "submitTime",
-            key: "submitTime",
+            dataIndex: "endStudyTime",
+            key: "endStudyTime",
             width: 60,
             align: "center",
             className: "h",
@@ -249,123 +252,212 @@
             width: 60,
             align: "center",
             className: "h",
-          },
-        ],
-      });
+          }
+        ]
+
+        return columns;
+      };
   
       const closeDrawer = () => {
         ctx.emit("update:EvaluationModelVisible", false);
+        state.currentPage = 1;
         state.name = "";
         state.projectName = "";
-        state.selectedRowKeys = [];
-        state.currentPage = 1;
         state.tabledata = [];
       };
       const afterVisibleChange = (bol) => {
         if (bol == true) {
+          console.log("当前是什么类型", props.datasource.type);
+          state.tableDataTotalLoading = true;
           getData();
         }
       };
       const selectProjectName = (value) => {
         state.projectName = value;
       };
-      const onSelectChange = (selectedRowKeys) => {
-        if (selectedRowKeys.length > 2) {
-          return;
-        }
-        state.selectedRowKeys = selectedRowKeys;
-      };
-  
-      //催促学员学习
+      //催促
       const godie = () => {
         message.destroy();
         message.success("催促" + props.title + "成功");
       };
-      //表头清空
-      const clearLine = () => {
-        state.selectedRowKeys = [];
+      const onChange = (pageNumber) => {
+        console.log("Page: ", pageNumber);
       };
-
+  
       // 获取数据
       function getData() {
-        state.tabledata =  [
-          {
-            workNum: "123",
-            userName: "li",
-            deptName: "开发",
-            jobName: "前端开发",
-            submitTime: "2022-07-22 14:00:30",
-            status: "已完成",
-            PDFstatus: "未生成",
-          },
-        ]
+        // 此处为获取评估学员的接口 - 如后续还有用到此接口的公共任务可直接在if里面加||判断即可
+        console.log("我是传递的查询参数", {
+          pageNo: state.currentPage,
+          pageSize: state.pageSize,
+          currentStageId: props.datasource.chapterId,
+          type: 2,
+          pid: props.datasource.routerId,
+          taskId: props.datasource.routerTaskId, 
+          taskType: props.datasource.type, 
+          status: state.projectName,
+          studentName: state.name,
+        });
+        api
+          .AssessmentManagementMessage({
+            pageNo: state.currentPage,
+            pageSize: state.pageSize,
+            currentStageId: props.datasource.chapterId,
+            type: 2,
+            pid: props.datasource.routerId,
+            taskId: props.datasource.routerTaskId, 
+            taskType: props.datasource.type,
+            status: state.projectName,
+            studentName: state.name,
+          })
+          .then((res) => {
+            console.log(res);
+            if (res.status == 200) {
+              state.tabledata = res.data.data.records;
+              state.tableDataTotal = res.data.data.total;
+              state.tableDataTotalLoading = false;
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            state.tableDataTotalLoading = false;
+            state.tabledata = [];
+          });
       }
-
+  
+      // 搜索按钮
+      function searchTaskList() {
+        state.currentPage = 1;
+        state.tableDataTotalLoading = true;
+        getData();
+      }
+      // 重置按钮
+      function resetTaskList() {
+        state.tableDataTotalLoading = true;
+        state.currentPage = 1;
+        state.name = "";
+        state.projectName = "";
+        getData();
+      }
+  
+      //分页
+      const changePaginationStu = (page) => {
+        state.tableDataTotalLoading = true;
+        state.currentPage = page;
+        getData();
+      };
+  
+      // 导出数据
+      function exportTaskStu() {
+        console.log(`${process.env.VUE_APP_PROXY_URL}admin/student/exportTaskStudent?currentStageId=${props.datasource.chapterId}&type=${2}&pid=${props.datasource.routerId}&taskId=${props.datasource.routerTaskId}&taskType=${props.datasource.type}`)
+        window.open(`${process.env.VUE_APP_PROXY_URL}admin/student/exportTaskStudent?currentStageId=${props.datasource.chapterId}&type=${2}&pid=${props.datasource.routerId}&taskId=${props.datasource.routerTaskId}&taskType=${props.datasource.type}`)
+        // window.open(`${process.env.VUE_APP_PROXY_URL}admin/student/exportTaskStudent?pageNo=${state.currentPage}&pageSize=${state.pageSize}&currentStageId=${props.datasource.chapterId}&type=${2}&pid=${props.datasource.routerId}&taskId=${props.datasource.routerTaskId}&status=${state.name}&studentName=${state.projectName}`)
+      }
+  
       return {
         ...toRefs(state),
         selectProjectName,
         closeDrawer,
         afterVisibleChange,
-        onSelectChange,
+        tableDataFunc,
         godie,
-        clearLine,
+        onMounted,
+        onUnmounted,
+        onChange,
+        searchTaskList,
+        resetTaskList,
+        changePaginationStu,
+        exportTaskStu,
       };
     },
   };
   </script>
   
   <style lang="scss">
-  .ProjectEvalManage {
+  // .drawerStyle {
+  //   .ant-drawer-content-wrapper {
+  //     // max-width: 1000px;
+  //     .ant-drawer-header {
+  //       display: none !important;
+  //     }
+  //     .ant-drawer-body {
+  //       padding: 0;
+  //     }
+  //   }
+  // }
+  .ProjectOnlineManage {
+    // overflow-x: auto;
     .drawerMain {
       min-width: 550px;
       margin: 0px 32px 0px 32px;
       overflow-x: auto;
       display: flex;
       flex-direction: column;
-  
+      .noticebox {
+        width: 240px;
+        height: 64px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        position: absolute;
+        top: 161px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .notext {
+          color: rgba(51, 51, 51, 1);
+          font-size: 14px;
+          font-weight: 500;
+          margin-left: 20px;
+        }
+      }
       .header {
         height: 73px;
         border-bottom: 1px solid #e8e8e8;
         display: flex;
+        flex-shrink: 0;
         justify-content: space-between;
         align-items: center;
+        // background-color: red;
         margin-bottom: 20px;
-  
         .headerTitle {
           font-size: 18px;
           font-weight: 600;
           color: #333333;
           line-height: 25px;
+          // margin-left: 24px;
         }
       }
-  
       .main {
         width: 100%;
         height: 100%;
-        overflow: auto;
+        // background-color: #bfa;
+        overflow-y: auto;
         padding-right: 10px;
         .endtime {
           font-size: 16px;
           font-weight: 500;
           color: #333333;
         }
-  
         .search {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           margin-top: 20px;
+          justify-content: space-between;
   
-          .namecon {
+          .sealeft {
             display: flex;
-            flex-wrap: nowrap;
-            margin-bottom: 10px;
-  
-            .name {
-              margin-top: 8px;
+            flex-wrap: wrap;
+            .namecon {
+              display: flex;
+              flex-wrap: nowrap;
+              margin-bottom: 10px;
+              .name {
+                margin-top: 8px;
+                white-space: nowrap;
+              }
             }
           }
-  
           .btns {
             display: flex;
             flex-wrap: nowrap;
@@ -378,7 +470,6 @@
               display: flex;
               justify-content: center;
               align-items: center;
-  
               .img1 {
                 width: 15px;
                 height: 17px;
@@ -386,7 +477,6 @@
                 background-size: 100% 100%;
                 margin-right: 7px;
               }
-  
               .img2 {
                 width: 16px;
                 height: 18px;
@@ -401,7 +491,6 @@
   
               color: #ffffff;
             }
-  
             .btn2 {
               background: #ffffff;
   
@@ -410,7 +499,6 @@
             }
           }
         }
-  
         .btnss {
           display: flex;
           flex-wrap: nowrap;
@@ -423,15 +511,13 @@
             display: flex;
             justify-content: center;
             align-items: center;
-  
             .img1 {
-              width: 15px;
-              height: 17px;
+              width: 18px;
+              height: 18px;
               background-image: url(../../../assets/images/basicinfo/call.png);
               background-size: 100% 100%;
               margin-right: 7px;
             }
-  
             .img2 {
               width: 17px;
               height: 16px;
@@ -446,127 +532,41 @@
   
             color: #ffffff;
           }
-  
           .btn2 {
             background: #ffffff;
-            margin-right: 20px;
+  
             color: #4ea6ff;
             border: 1px solid #4ea6ff;
           }
         }
-  
-        .line {
-          width: 100%;
-          height: 40px;
-          background-color: #e9f6fe;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-top: 20px;
-          border: 1px solid #c3e6fc;
-  
-          .inline {
-            width: 95%;
-            height: 100%;
-            display: flex;
-            justify-content: space-between;
-  
-            .left {
-              height: 100%;
-              display: flex;
-              align-items: center;
-  
-              .img {
-                width: 14px;
-                height: 15px;
-                background-image: url(../../../assets/images/leveladd/gan.png);
-                background-size: 100% 100%;
-              }
-  
-              .text {
-                color: #999ba3;
-              }
-  
-              .text2 {
-                color: #4ea6ff;
-                margin-left: 5px;
-                margin-right: 5px;
-              }
-  
-              .text3 {
-                color: #999ba3;
-                margin-left: 20px;
-              }
-            }
-  
-            .right {
-              font-size: 14px;
-              font-weight: 400;
-              color: #387df7;
-              height: 100%;
-              display: flex;
-              align-items: center;
-              cursor: pointer;
-            }
-          }
-        }
-  
-        .tableBox {
-          .ant-table-selection-column {
-            padding: 0px !important;
-          }
-          .ant-pagination-item,
-          .ant-pagination-prev,
-          .ant-pagination-next,
-          .ant-pagination-options {
-            margin-bottom: 10px;
-          }
-          .ant-table-thead > tr > th {
-            background-color: rgba(239, 244, 252, 1) !important;
-          }
-          .ant-table-selection-column {
-            padding: 0 !important;
-          }
-  
+        .tab {
           th.h {
             background-color: #eff4fc !important;
           }
   
-          .head {
-            padding-left: 0px !important;
-          }
-  
           .ant-table-tbody
             > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
             > td {
             background: #f6f9fd;
           }
-  
-          .studentopea1 {
-            font-size: 14px;
-            font-weight: 400;
-            color: #387df7;
-            line-height: 22px;
-            padding-right: 8px;
-            border-right: 1px solid #e9e9e9;
-            cursor: pointer;
-          }
-          .studentopea2 {
-            font-size: 14px;
-            font-weight: 400;
-            color: #387df7;
-            line-height: 22px;
-            padding-right: 8px;
-            padding-left: 8px;
-            border-right: 1px solid #e9e9e9;
-            cursor: pointer;
-          }
-  
-          .pa {
-            margin-top: 15px;
-            width: 100%;
-            display: flex;
-            justify-content: center;
+          .tableBox {
+            .pa {
+              // left: 0;
+              margin-top: 15px;
+              width: 100%;
+              // height: 20px;
+              // background-color: red;
+              display: flex;
+              justify-content: center;
+              // position: absolute;
+              // bottom: 20px;
+              .ant-pagination-prev,
+              .ant-pagination-next,
+              .ant-pagination-item,
+              .ant-pagination-options {
+                margin-bottom: 10px;
+              }
+            }
           }
         }
       }
@@ -575,14 +575,13 @@
         height: 72px;
         width: 100%;
         position: absolute;
-        background-color: #fff;
         bottom: 0;
         left: 0;
+        background-color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
-  
         .btn1 {
           width: 100px;
           height: 40px;
@@ -592,7 +591,6 @@
           background-color: #fff;
           cursor: pointer;
         }
-  
         .btn2 {
           cursor: pointer;
           width: 100px;
@@ -607,4 +605,4 @@
     }
   }
   </style>
-  
+