style:学习路径项目管理弹窗

src/components/drawers/router/RouterProjectManage.vue

@@ -0,0 +1,700 @@
+<template>
+    <a-drawer
+        v-if="PjModelVisible"
+        :visible="PjModelVisible"
+        class="drawerStyle RouterProjectManage"
+        placement="right"
+        width="80%"
+        @after-visible-change="afterVisibleChange"
+    >
+        <div class="drawerMain">
+        <div class="header">
+            <div class="headerTitle">
+            【项目】{{ title }}
+            </div>
+            <img
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
+            />
+        </div>
+        <div class="main">
+            <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" style="justify-content:flex-start;">
+            <div class="sealeft">
+                <div class="namecon" style="margin-right: 30px">
+                <div class="name">姓名：</div>
+                <a-input
+                    v-model:value="name"
+                    style="width: 200px; height: 40px; border-radius: 8px"
+                    placeholder="请输入姓名"
+                />
+                </div>
+                <div v-if="datasource.type !==1" class="namecon" style="margin-right: 50px">
+                <div class="name">任务状态：</div>
+                <div class="select">
+                    <a-select
+                    v-model:value="projectName"
+                    style="width: 200px"
+                    placeholder="请选择"
+                    :options="projectNameList"
+                    @change="selectProjectName"
+                    
+                    ></a-select>
+                </div>
+                </div>
+            </div>
+            <div class="btns">
+                <div
+                class="btn btn1"
+                style="margin-right: 20px"
+                @click="searchTaskList"
+                >
+                <div class="img1"></div>
+                <div class="wz">搜索</div>
+                </div>
+                <div class="btn btn2" @click="resetTaskList">
+                <div class="img2"></div>
+                <div class="wz">重置</div>
+                </div>
+            </div>
+            </div>
+            <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>-->
+            <div class="btn btn2" @click="exportTaskStu">
+                <div class="img2"></div>
+                <div class="wz">导出数据</div>
+            </div>
+            </div>
+            <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
+            <a-table
+                style="border: 1px solid #f2f6fe"
+                :columns="tableDataFunc()"
+                :data-source="tabledata"
+                :loading="tableDataTotalLoading"
+                :scroll="{ x: 900 }"
+                :pagination="false"
+            />
+            <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" @click="closeDrawer">取消</button>
+            <button class="btn2" @click="closeDrawer">确定</button>
+        </div>-->
+        </div>
+    </a-drawer>
+    <CVote 
+        v-model:CVvisible="CVvisible"
+        :voteID="voteID"
+        :courseID="courseID"
+        />
+</template>
+  
+  <script>
+  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";
+  import CVote from "../CheckVote.vue"
+
+  export default {
+    name: "RouterProjectManage",
+    components:{
+        CVote,
+    },
+    props: {
+      PjModelVisible: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: "",
+      },
+      levelName: {
+        type: String,
+        default: "",
+      },
+      projectTaskId: {
+        type: Number,
+        default: null,
+      },
+      itemsType: {
+        type: Number,
+        default: null,
+      },
+      datasource: {
+        type: Object,
+        default: function () {
+          return {};
+        },
+      },
+    },
+  
+    setup(props, ctx) {
+      const state = reactive({
+        visible: props.PjModelVisible,
+        name: "",
+        pageNo: 1,
+        pageSize: 10,
+        currentPage: 1,
+        tableDataTotal: 0,
+        projectName: undefined,
+        projectNameList: [
+          
+            {
+              id: 1,
+              value: "1",
+              label: "未开始",
+            },
+            {
+              id: 2,
+              value: "2",
+              label: "进行中",
+            },
+            {
+              id: 3,
+              value: "3",
+              label: "已完成",
+            },
+            {
+              id: 4,
+              value: "4",
+              label: "未完成",
+            },
+        ],
+        tabledata: [],
+        tableDataTotalLoading: true, // 表格loading加载配置
+        CVvisible:false, //查看投票抽屉
+        voteID: "",
+        courseID: ""
+      });
+      const tableDataFunc = () => {
+        const columns = [
+          {
+            title: "工号",
+            dataIndex: "studentUserNo",
+            key: "studentUserNo",
+            width: "20%",
+            align: "center",
+            ellipsis: true,
+            className: "h head",
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.studentUserNo?text.record.studentUserNo:"-"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "姓名",
+            dataIndex: "studentName",
+            key: "studentName",
+            width: "10%",
+            align: "center",
+            ellipsis: true,
+            className: "h head",
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.studentName?text.record.studentName:"-"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "所在部门",
+            dataIndex: "studentDepartName",
+            key: "studentDepartName",
+            width: "20%",
+            align: "center",
+            
+            className: "h",
+            ellipsis: true,
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.studentDepartName?text.record.studentDepartName:"-"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "所在岗位",
+            dataIndex: "studentJobName",
+            key: "studentJobName",
+            width: "10%",
+            align: "center",
+            ellipsis: true,
+            className: "h",
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.studentJobName?text.record.studentJobName:"-"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "学员关卡",
+            dataIndex: "currentStageName",
+            key: "currentStageName",
+            width: "10%",
+            align: "center",
+            ellipsis: true,
+            className: "h",
+            customRender: () => {
+              return (
+                <div class="racona">
+                  <span> {props.levelName}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "完成时间",
+            dataIndex: "lastStudyTime",
+            key: "lastStudyTime",
+            width: "15%",
+            align: "center",
+            ellipsis: true,
+            className: "h",
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.lastStudyTime?text.record.lastStudyTime:"-"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "任务状态",
+            dataIndex: "finishStatus",
+            key: "finishStatus",
+            width: "10%",
+            align: "center",
+            ellipsis: true,
+            className: "h",
+            customRender: (text) => {
+              return (
+                <div class="racona">
+                  <span> {text.record.finishStatus == 1 || text.record.finishStatus == 0 || text.record.finishStatus==null  ? "未开始" :text.record.finishStatus == 2 ?"进行中":text.record.finishStatus == 3 ? "已完成" :"未完成"}</span>
+                </div>
+              );
+            },
+          },
+          {
+            title: "操作",
+            dataIndex: "voteSubmitId",
+            key: "voteSubmitId",
+            width: "10%",
+            align: "center",
+            ellipsis: true,
+            className: "h",
+            customRender: (value) => {
+                return (
+                <div
+                    style="color:#387df7;cursor:pointer"
+                    onClick={
+                        () => {
+                            if(value.record.finishStatus !== 3){
+                                message.destroy()
+                                message.error("当前任务未完成")
+                                return
+                            }
+                            {/* 当前投票提交的ID 用来查看投票详情 */}
+                            console.log(value.record.voteSubmitId);
+                            state.voteID = value.record.voteSubmitId;
+                            state.CVvisible = true;
+                    }}>
+                    {value.record.finishStatus == 3 ?
+                    <span style='color:#387df7;'> 查看 </span>
+                    :
+                    <span style='color:#999;'> 查看 </span>}
+                </div>
+                );
+            },
+          },
+        ];
+        return columns;
+      };
+  
+      const closeDrawer = () => {
+        ctx.emit("update:PjModelVisible", false);
+        state.currentPage = 1;
+        state.name = "";
+        state.projectName = undefined;
+        state.tabledata = [];
+      };
+      const afterVisibleChange = (bol) => {
+        if (bol == true) {
+          console.log("当前是什么类型", props.datasource.type);
+          state.tableDataTotalLoading = true;
+          {/* getData(); */}
+        }
+      };
+      const selectProjectName = (value) => {
+        state.projectName = value;
+      };
+      //催促
+      const godie = () => {
+        message.destroy();
+        message.success("催促" + props.title + "成功");
+      };
+      const onChange = (pageNumber) => {
+        console.log("Page: ", pageNumber);
+      };
+  
+      // 获取数据
+      function getData() {
+        if(props.datasource.type == 12){
+            console.log("我是传递的查询参数", {
+            "pageNo": state.currentPage,
+            "pageSize": state.pageSize,
+            "chapterId": props.datasource.stageId=="0"?"":props.datasource.stageId,
+            "status": state.projectName,
+            "studentName": state.name,
+            "targetId":props.datasource.projectId,
+            "taskId": props.datasource.courseId,
+            "type": 1
+          });
+          api.QueryVoteManagementDetail({
+            "pageNo": state.currentPage,
+            "pageSize": state.pageSize,
+            "chapterId": props.datasource.chapterId,
+            "status": state.projectName,
+            "studentName": state.name,
+            "targetId":props.datasource.routerId,
+            "taskId": props.datasource.courseId,
+            "type": 1
+          }).then(res=>{
+            console.log('投票数据获取', res)
+            if(res.data.code==200){
+              state.tableDataTotalLoading = false;
+              let newData = []
+              for(let i=0;i<res.data.data.rows.length;i++){
+                // 处理在线课字段和表格中字段保持一致
+                let obj = {
+                  studentUserNo: res.data.data.rows[i].studentCode,
+                  studentName: res.data.data.rows[i].studentName, 
+                  studentDepartName: res.data.data.rows[i].studentDepartName, 
+                  studentJobName: res.data.data.rows[i].studentJobName, 
+                  lastStudyTime: res.data.data.rows[i].submitTime,
+                  finishStatus: res.data.data.rows[i].status?res.data.data.rows[i].status:0,
+                  voteSubmitId: res.data.data.rows[i].voteSubmitId
+                }
+                newData.push(obj)
+              }
+              state.tabledata = newData;
+              state.courseID = props.datasource.courseId;
+              state.tableDataTotal = res.data.data.total;
+            }
+          }).catch(err=>{
+            console.log(err)
+            state.tableDataTotalLoading = false;
+          })
+        }else{
+          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 = undefined;
+        getData();
+      }
+  
+      //分页
+      const changePaginationStu = (page) => {
+        state.tableDataTotalLoading = true;
+        state.currentPage = page;
+        getData();
+      };
+  
+      // 导出数据
+      function exportTaskStu() {
+        console.log(`${process.env.VUE_APP_BASE_API}/admin/vote/manage/export/vote?type=${1}&voteId=${props.datasource.routerTaskId}`)
+        window.open(`${process.env.VUE_APP_BASE_API}/admin/vote/manage/export/vote?type=${1}&voteId=${props.datasource.routerTaskId}`)
+      }
+  
+      return {
+        ...toRefs(state),
+        selectProjectName,
+        closeDrawer,
+        afterVisibleChange,
+        tableDataFunc,
+        godie,
+        onMounted,
+        onUnmounted,
+        onChange,
+        searchTaskList,
+        resetTaskList,
+        changePaginationStu,
+        exportTaskStu,
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .RouterProjectManage {
+    // 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%;
+        // 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;
+  
+          .sealeft {
+            display: flex;
+            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;
+  
+            .btn {
+              cursor: pointer;
+              width: 100px;
+              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/courseManage/reset1.png);
+                background-size: 100% 100%;
+                margin-right: 7px;
+              }
+            }
+  
+            .btn1 {
+              background: #4ea6ff;
+  
+              color: #ffffff;
+            }
+            .btn2 {
+              background: #ffffff;
+  
+              color: #4ea6ff;
+              border: 1px solid #4ea6ff;
+            }
+          }
+        }
+        .btnss {
+          display: flex;
+          flex-wrap: nowrap;
+  
+          .btn {
+            cursor: pointer;
+            width: 130px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .img1 {
+              width: 18px;
+              height: 18px;
+              background-image: url(../../../assets/images/basicinfo/call.png);
+              background-size: 100% 100%;
+              margin-right: 7px;
+            }
+            .img2 {
+              width: 17px;
+              height: 16px;
+              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;
+          }
+        }
+        .tab {
+          th.h {
+            background-color: #eff4fc !important;
+          }
+  
+          .ant-table-tbody
+            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+            > td {
+            background: #f6f9fd;
+          }
+          .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;
+              }
+            }
+          }
+        }
+      }
+  
+      .btnn {
+        height: 72px;
+        width: 100%;
+        position: absolute;
+        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;
+          border: 1px solid #4ea6ff;
+          border-radius: 8px;
+          color: #4ea6ff;
+          background-color: #fff;
+          cursor: pointer;
+        }
+        .btn2 {
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          background: #4ea6ff;
+          border-radius: 8px;
+          border: 0;
+          margin-left: 15px;
+          color: #fff;
+        }
+      }
+    }
+  }
+  </style>
+    

src/views/learningpath/LevelAdd.vue

@@ -500,6 +500,8 @@
                             ? evaluationModel(item, value.name)
                             : item.type === 12
                             ? voteModel(item, value.name)
+                            : item.type === 13
+                            ? projectModel(item, value.name)
                             : null
                         "
                       >
@@ -1273,6 +1275,15 @@
       :levelName="voteLevelName"
     />
     <!-- 投票管理抽屉 结束-->
+
+    <!-- 项目管理抽屉 开始-->
+    <router-project-manage
+      v-model:PjModelVisible="pjModelVisible"
+      :title="pjModelVisibleTitle"
+      :datasource="pjData"
+      :levelName="pjLevelName"
+    />
+    <!-- 项目管理抽屉 结束-->
   </div>
 </template>
 <script>
@@ -1310,6 +1321,7 @@ import RouterEvaluationManage from "../../components/drawers/router/RouterEvalua
 import RouterHomeworkManage from "../../components/drawers/router/RouterHomeworkManage";
 import RouterCommonManage from "../../components/drawers/router/RouterCommonManage";
 import RouterVoteManage from "../../components/drawers/router/RouterVoteManage";
+import RouterProjectManage from "../../components/drawers/router/RouterProjectManage";
 
 export default {
   name: "LevelAdd",
@@ -1333,7 +1345,8 @@ export default {
     RouterEvaluationManage,
     RouterHomeworkManage,
     RouterCommonManage,
-    RouterVoteManage
+    RouterVoteManage,
+    RouterProjectManage
   },
   setup() {
     const router = useRouter();
@@ -1511,12 +1524,16 @@ export default {
       homeworkModelVisible: false,
       commonModelVisible: false,
       voteModelVisible: false,
+      projectModelVisible: false,
+      PjModelVisible: false,
       faceTeachModelVisibleTitle: "",
       examinationModelVisibleTitle: "",
       evaluationModelVisibleTitle: "",
       homeworkModelVisibleTitle: "",
       commonModelVisibleTitle: "",
       voteModelVisibleTitle: "",
+      projectModelVisibleTitle: "",
+      pjModelVisibleTitle: "",
 
       faceData: "",
       examinationData: "",
@@ -1525,10 +1542,14 @@ export default {
       commonData: "",
       liveData: "",
       voteData: "",
+      projectData: "",
+      pjData: "",
       commonLevelName: "",
       examLevelName: "",
       evaluationLevelName: "",
       voteLevelName: "",
+      projectLevelName: "",
+      pjLevelName: "",
 
       facestudent: "",
       locationHref:
@@ -1843,6 +1864,15 @@ export default {
       state.voteData = data;
       // 投票弹框名称 RouterVoteManage
     };
+    // 项目点击管理弹框
+    const projectModel = (data, levelsName) => {
+      console.log(data, levelsName);
+      state.pjModelVisible = true;
+      state.pjLevelName = levelsName;
+      state.pjModelVisibleTitle = data.name;
+      state.pjData = data;
+      // 项目弹框名称 RouterProjectManage
+    }
     // 作业点击管理弹框
     const homeworkModel = (data) => {
       console.log(data);
@@ -2635,6 +2665,7 @@ export default {
       examinationModel,
       evaluationModel,
       voteModel,
+      projectModel,
       homeworkModel,
       commonModel,
       downloadFile,