组织机构学习数据报表

优化 列表点击数据弹出层
每个列表添加分页操作

src/views/report/Overvoewnew.vue

@@ -239,6 +239,18 @@
             style="width: 100%; margin-right: 0px"
         />
       </div>
+      <div class="select">
+        <a-select
+          mode="multiple"
+          style="width: 100%"
+          placeholder="Please select"
+          @change="getReportSelectedValues"
+        >
+          <a-select-option v-for="item in reportSelectOptions" :key="item.name">
+            {{ item.title }}
+          </a-select-option>
+        </a-select>
+      </div>
       <div style="display: flex; margin-bottom: 20px">
         <div class="btnzx btnzx1" @click="searchClick">
           <div class="search"></div>
@@ -351,6 +363,7 @@
 
       <!-- 弹出层代码 -->
       <a-modal
+          class="custom-modal"
           title="Title"
           :visible="isModalVisible"
           @cancel="onCancel"
@@ -362,6 +375,7 @@
           :data-source="modelColumnsTableData"
           :scroll="{ x: 400 }"
           :pagination="false"
+          class="custom-table"
         >
           <!--          :loading="tableLoading"-->
           <template v-slot:header>
@@ -372,11 +386,23 @@
                 :group="{ name: 'columns', pull: 'clone', put: false }"
             >
               <template #item="{ element }">
-                <a-table-column :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
+                <a-table-column class="draggable-column" :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
               </template>
             </draggable>
           </template>
         </a-table>
+        <a-pagination
+            :showSizeChanger="false"
+            showQuickJumper="true"
+            hideOnSinglePage="true"
+            :pageSize="modelPageSize"
+            v-model:current="modelPageNo"
+            :total="modelTableDataTotal"
+            class="pagination"
+            @change="modelChangePagination"
+            rowKey="id"
+            :show-total="total => `共 ${total} 条`"
+        />
       </a-modal>
     </div>
   </div>
@@ -407,15 +433,58 @@ export default {
   name: "OvervoeW",
   components: {OwnerTableModelStudent, CommonStudent, DropDown, OfficeSelect, PostSelectNew, draggable},
   setup() {
+    // 弹出框分页参数
+    const model = reactive({
+      modelPageSize:10,
+      modelPageNo:1,
+      modelTableDataTotal:0,
+      dataIndexValues:[],
+    })
+    // 监听弹出层分页变化方法
+    const modelChangePagination = (page) =>{
+      model.dataIndexValues = modelColumns.value.map(item => item.dataIndex);
+      if (model.dataIndexValues[0] === 'studentUserNo'){
+        modelColumns.value = [];
+        model.modelPageNo = page;
+        getTaskCountTableData()
+      }else {
+        modelColumns.value = [];
+        model.modelPageNo = page;
+        getModelColumnsTableData()
+      }
+    }
 
-    const handleCell = (record) => {
-      console.log('Cell clicked:', record);
-      // 在这里添加你的单击事件逻辑
-    };
-
-    // 组织树数据
-    const orgId = ref(null);
+    // 选择导出列下拉框数据
+    const reportSelectOptions = ref([
+      {title:'项目名称',name:'projectName'},
+      {title:'归属组织',name:'sourceBelongName'},
+      {title:'分类',name:'category'},
+      {title:'创建人',name:'createName'},
+      {title:'创建时间',name:'createDate'},
+      {title:'发布时间',name:'publishTime'},
+      {title:'状态',name:'status'},
+      {title:'项目经理',name:'manager'},
+      {title:'报名人数',name:'totalStudentNum'},
+      {title:'学习人数',name:'studentLearnNum'},
+      {title:'参与率',name:'joinRate'},
+      {title:'完成人数',name:'completedParticipantNum'},
+      {title:'完成率',name:'completeRate'},
+      {title:'阶段数',name:'stageCount'},
+      {title:'任务总数',name:'taskCount'},
+      {title:'必修任务数',name:'bxCount'},
+      {title:'必修任务完成人数',name:'bxCompCount'},
+      {title:'必修任务完成人率',name:'bxCompRate'},
+      {title:'整体课程完成率',name:'courseCompRate'},
+      {title:'整体考试通过率',name:'examPassRate'},
+      {title:'整体作业完成率',name:'homeworkCompRate'}
+    ])
 
+    // 用户选中的导出列
+    const reportSelectedValues = ref([])
+    // 获取用户选中的导出列
+    const getReportSelectedValues = (value) =>{
+      reportSelectedValues.value = value
+    }
     // 漏斗图数据
     const funnelChart = ref(null);
     let myFunnelChart = null;
@@ -434,8 +503,6 @@ export default {
     }
 
     onMounted(() => {
-      console.log(88888888888)
-      console.log(funnelChart.value)
       // 初始化漏斗图
       myFunnelChart = echarts.init(funnelChart.value);
       const funnelOption = {
@@ -774,11 +841,8 @@ export default {
         method: "get",
         url: "/reportsnake/report/projectTaskReportList",
         // params: { manager: true },
-        data: {
-          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
-          createName: state.creator,
-          startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
-          endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
+        params: {
+          page:model.modelPageNo,
         },
         // headers: {
         //   token: Cookies.get("token"),
@@ -892,19 +956,14 @@ export default {
           ellipsis: true,
         },
       ]
-
       axios({
         method: "get",
         url: "/reportsnake/report/projectStudentReportList",
-        // params: { manager: true },
-        data: {
-          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
-          createName: state.creator,
-          startCreateTime: state.publishTime && state.publishTime[0] ? state.publishTime[0] + " 00:00:00" : null,
-          endCreateTime: state.publishTime && state.publishTime[1] ? state.publishTime[1] + " 23:59:59" : null,
+        params: {
+          page:model.modelPageNo,
         },
         // headers: {
-        //   token: Cookies.get("token"),
+        //   // "XBOR-Access-token": Cookies.get("token"),
         // },
       }).then((res) => {
         console.log(res)
@@ -923,7 +982,7 @@ export default {
             ...item,
           };
         });
-        console.log(modelColumnsTableData)
+        model.modelTableDataTotal = resData.data.total
       });
     }
 
@@ -1148,10 +1207,10 @@ export default {
 
     // 导出按钮
     const exportClick = async () => {
-      if (!state.selectedRowKeys?.length) {
+      if (!reportSelectedValues.value?.length) {
         return message.warning("请至少选择一条数据进行导出");
       } else {
-        fetchExportReport({ids: state.selectedRowKeys, type: state.currentTab});
+        fetchExportReport({type:0,fields:reportSelectedValues.value,ids:[]});
       }
     };
     // 全部导出接口
@@ -2603,6 +2662,7 @@ export default {
       state.isModalVisible = false
       modelColumns.value = null
       modelColumnsTableData.value = null
+      model.modelPageNo=1
     }
 
     return {
@@ -2636,6 +2696,11 @@ export default {
       modelColumns,
       modelColumnsTableData,
       getModelColumnsTableData,
+      reportSelectOptions,
+      reportSelectedValues,
+      getReportSelectedValues,
+      ...toRefs(model),
+      modelChangePagination,
     };
   },
 };
@@ -3002,4 +3067,47 @@ export default {
     }
   }
 }
+
+.custom-modal {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.custom-modal :deep(.ant-modal-header) {
+  background: #1890ff;
+  color: white;
+  border-radius: 8px 8px 0 0;
+}
+
+.custom-modal :deep(.ant-modal-title) {
+  color: white;
+  font-weight: 500;
+}
+
+.custom-modal :deep(.ant-modal-close-x) {
+  color: white;
+}
+
+.custom-modal :deep(.ant-modal-footer) {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px 24px;
+}
+
+.custom-table {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.custom-table :deep(.ant-table-thead > tr > th) {
+  background-color: #fafafa;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  transition: all 0.3s;
+}
+
+.custom-table :deep(.ant-table-tbody > tr:hover > td) {
+  background: #e6f7ff !important;
+}
+
 </style>