学习路径图、案例页面接口联调

src/views/report/Learningpathmap.vue

@@ -3,26 +3,25 @@
   <div class="learningpathmap">
     <!-- 以下为顶部搜索框 -->
     <div class="filter">
-      <div class="select addTimeBox">
-        <div class="addTime">创建时间：</div>
-        <a-range-picker
-          style="width: 100%"
-          format="YYYY-MM-DD"
-          separator="至"
-          :placeholder="['      开始时间', '        结束时间']"
-        />
-      </div>
       <div class="select">
-        <a-select
+        <a-cascader
+          :options="option"
+          v-model:value="orgId"
           style="width: 100%"
           placeholder="请选择归属组织"
-          allowClear
-        ></a-select>
+          :allowClear="allowClear"
+          :fieldNames="{
+            label: 'name',
+            value: 'id',
+            children: 'treeChildList',
+          }"
+        ></a-cascader>
       </div>
       <div class="select">
         <a-input
           style="width: 100%; height: 40px; border-radius: 8px"
           placeholder="请输入路径名称"
+          v-model:value="boeRouterInfoName"
           allowClear
           showSearch
         >
@@ -33,16 +32,17 @@
           style="width: 100%; height: 40px; border-radius: 8px"
           placeholder="请输入创建者"
           allowClear
+          v-model:value="createName"
           showSearch
         >
         </a-input>
       </div>
       <div style="display: flex; margin-bottom: 20px">
-        <div class="btnn btn1">
+        <div class="btnn btn1" @click="getTableData">
           <div class="search"></div>
           <div class="btnText">搜索</div>
         </div>
-        <div class="btn btn2">
+        <div class="btn btn2" @click="reset">
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
@@ -50,23 +50,32 @@
     </div>
     <!-- 以下为导出按钮 -->
     <div class="btns">
-      <div class="btn btn3">
-        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
+      <div class="btn btn3" @click="exportAllbtnz">
+        <div>
+          <img src="../../assets/images/coursewareManage/export1.png" alt="" />
+        </div>
         <div class="btnText">导出列表信息</div>
       </div>
-      <div class="btn btn3" style="margin-left: 20px">
-        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
+      <div class="btn btn3" @click="exportbtnz" style="margin-left: 20px">
+        <div>
+          <img src="../../assets/images/coursewareManage/export1.png" alt="" />
+        </div>
         <div class="btnText">导出详细信息</div>
       </div>
     </div>
     <!-- 以下为table表格 -->
     <div class="tableBox">
       <a-table
+        rowKey="boeRouterInfoId"
         :columns="columns"
         :data-source="tableData"
         :loading="tableLoading"
         :scroll="{ x: 700 }"
         :pagination="false"
+        :row-selection="{
+          selectedRowKeys: selectedRowKeys,
+          onChange: onSelectChange,
+        }"
       >
       </a-table>
       <div class="tableBox">
@@ -88,95 +97,131 @@
   </div>
 </template>
 <script>
-import { ref, toRefs, reactive } from "vue";
+import { message } from "ant-design-vue";
+import * as api from "../../api/indexOvervoew";
+// import * as api from "../../api/indexWay";
+import { ref, toRefs, reactive, onMounted } from "vue";
+import downLoad from "../../utils/downLoad";
+import Cookies from "vue-cookies";
+import axios from "axios";
 export default {
   name: "LearningPathMap",
   setup() {
     const state = reactive({
       tableLoading: false, // table加载图标
-      tableDataTotal: 12, // 数据总条数
+      tableDataTotal: 0, // 数据总条数
       pageSize: 10, // 每页条数
       pageNo: 1, //当前页码
+      name: "", // 名称
+      orgId: null, // 状态值
+      routerName: "", // 路径图名称
+      createName: "", // 创建者名称
+      startTime: "", // 开始时间
+      endTime: "", // 结束时间
+      option: [], // 组织列表
+      boeRouterInfoName: "", // 路径名称
+      selectedRowKeys: [], // 选中的列
+      routerId: [],
+      allowClear: true,
+      resetOrgId: [],
+      routerIdList: [],
     });
     // 表格数据
-    let tableData = ref([
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-      { name: "0000255", manager: "565656" },
-    ]);
+    let tableData = ref([]);
+    // table选中
+    const onSelectChange = (selectedRowKeys, record) => {
+      state.selectedRowKeys = selectedRowKeys;
+      state.routerId = record?.map((item) => {
+        return item.boeRouterInfoId;
+      });
+    };
+    //请求组织接口
+    const getOrgList = async () => {
+      const res = await api.userGetUserOrg({});
+      if (res) {
+        state.option = res.data?.result?.list;
+        state.orgId = res.data?.result?.treeNodeList;
+        state.resetOrgId = res.data?.result?.treeNodeList;
+        res.data?.result?.userType === 1
+          ? (state.allowClear = true)
+          : (state.allowClear = false);
+        getTableData();
+      }
+    };
+    
     // cloumns 表头
     const columns = ref([
       {
         title: "编号",
-        dataIndex: "name",
-        key: "name",
+        dataIndex: "num",
+        key: "num",
         ellipsis: true,
         align: "center",
+        width: 120,
       },
       {
         title: "路径名称",
-        dataIndex: "manager",
+        dataIndex: "boeRouterInfoName",
         ellipsis: true,
-        key: "manager",
+        key: "boeRouterInfoName",
         align: "center",
+        width: 120,
       },
       {
         title: "归属组织",
-        dataIndex: "manager",
+        dataIndex: "organizationName",
         ellipsis: true,
-        key: "manager",
+        key: "organizationName",
         align: "center",
+        width: 120,
       },
       {
         title: "关卡数",
-        dataIndex: "manager",
+        dataIndex: "levelTotal",
         ellipsis: true,
-        key: "manager",
+        key: "levelTotal",
         align: "center",
+        width: 120,
       },
       {
         title: "任务数",
-        dataIndex: "manager",
+        dataIndex: "taskTotal",
         ellipsis: true,
-        key: "manager",
+        key: "taskTotal",
         align: "center",
+        width: 120,
       },
       {
         title: "学习人数",
-        dataIndex: "manager",
+        dataIndex: "learnerNumber",
         ellipsis: true,
-        key: "manager",
+        key: "learnerNumber",
         align: "center",
+        width: 120,
       },
       {
         title: "完成人数",
-        dataIndex: "manager",
+        dataIndex: "completionNumber",
         ellipsis: true,
-        key: "manager",
+        key: "completionNumber",
         align: "center",
+        width: 120,
       },
       {
         title: "发布时间",
-        dataIndex: "manager",
+        dataIndex: "createTime",
         ellipsis: true,
-        key: "manager",
+        key: "createTime",
         align: "center",
+        width: 120,
       },
       {
         title: "路径状态",
-        dataIndex: "manager",
+        dataIndex: "status",
         ellipsis: true,
-        key: "manager",
+        key: "status",
         align: "center",
+        width: 120,
       },
       {
         title: "操作",
@@ -185,17 +230,189 @@ export default {
         width: 150,
         align: "center",
         fixed: "right",
-        customRender: () => {
-          return <a>导出历史记录</a>;
+        customRender: (record) => {
+          return (
+            <div>
+              <a
+                key="export"
+                onClick={() => {
+                  oneExport(record);
+                }}
+              >
+                导出历史记录
+              </a>
+              &nbsp;&nbsp;
+              <a
+                key="export"
+                onClick={() => {
+                  oneCurrentExport(record);
+                }}
+              >
+                导出当前数据
+              </a>
+            </div>
+          );
         },
       },
     ]);
+    // 导出历史记录
+    const oneExport = (record) => {
+      axios({
+        method: "post",
+        url: "/report/boeu/router/exportHistoryRecord",
+        data: { routerId: `${record.record.boeRouterInfoId}` },
+        responseType: "blob",
+        headers: {
+          token: Cookies.get("token"),
+        },
+      }).then((res) => {
+        downLoad(res.data, "历史学习数据.xlsx");
+      });
+    };
+    // 导出当前数据
+    const oneCurrentExport = (record) => {
+      axios({
+        method: "post",
+        url: "/report/boeu/router/exportCurrentRecord",
+        data: { routerId: `${record.record.boeRouterInfoId}` },
+        responseType: "blob",
+        headers: {
+          token: Cookies.get("token"),
+        },
+      }).then((res) => {
+        downLoad(res.data, "当前学习数据.xlsx");
+      });
+    };
     //table 分页事件
     const changePagination = (page) => {
       state.pageNo = page;
+      getTableData();
     };
-
+    // 获取数据
+    const getTableData = async () => {
+      state.tableLoading = true;
+      const res = await api.boeuRouterPlatePageList({
+        page: state.pageNo,
+        size: state.pageSize,
+        orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+        routerName: state.routerName,
+        createName: state.createName,
+        startTime: state.startTime,
+        endTime: state.endTime,
+        name: state.name,
+        boeRouterInfoName: state.boeRouterInfoName,
+      });
+      if (res) {
+        state.tableDataTotal = res.data.total;
+        const list = res.data.rows?.map((item) => {
+          return {
+            key: item.id,
+            ...item,
+          };
+        });
+        tableData.value = list;
+        state.tableLoading = false;
+      }
+    };
+    // 重置按钮
+    const reset = async () => {
+      state.tableLoading = true;
+      state.createName = "";
+      state.boeRouterInfoName = "";
+      state.orgId = state.resetOrgId;
+      getTableData();
+    };
+    //导出详细信息
+    const exportbtnz = async () => {
+      if (state.selectedRowKeys?.length > 0) {
+        axios({
+          method: "post",
+          url: "/report/boeu/router/exportCurrentRecord",
+          data: { routerIdList: state.selectedRowKeys },
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+        }).then((res) => {
+          downLoad(res.data, "详细信息.xlsx");
+        }),(err) => {
+          message.error(err)
+        }
+      } else {
+        const params = {
+          createName: state.createName,
+          boeRouterInfoName: state.boeRouterInfoName,
+          orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+        };
+        axios({
+          method: "post",
+          url: "/report/boeu/router/exportCurrentRecord",
+          data: params,
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+          }).then((res) => {
+            downLoad(res.data, "详细信息.xlsx");
+          }),(err) => {
+            message.error(err)
+        }
+      }
+    };
+    // 导出列表信息
+    const exportAllbtnz = async () => {
+      if (state.selectedRowKeys?.length > 0) {
+        axios({
+          method: "post",
+          url: "/report/boeu/router/exportList",
+          data: { routerIdList: state.selectedRowKeys },
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+        }).then((res) => {
+          downLoad(res.data, "学习路径图信息.xlsx");
+        }),(err) => {
+            message.error(err)
+        }
+      } else {
+        const params = {
+            page: state.pageNo,
+            size: state.pageSize,
+            orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
+            router: state.routerId,
+            routerName: state.routerName,
+            createName: state.createName,
+            startTime: state.startTime,
+            endTime: state.endTime,
+            name: state.name,
+          };
+        axios({
+          method: "post",
+          url: "/report/boeu/router/exportList",
+          data: params,
+          responseType: "blob",
+          headers: {
+            token: Cookies.get("token"),
+          },
+        }).then((res) => {
+          downLoad(res.data, "学习路径图信息.xlsx");
+        }),(err) => {
+            message.error(err)
+        }
+      }
+     
+    };
+    onMounted(() => {
+      getOrgList();
+      state.tableLoading = true;
+    });
     return {
+      exportAllbtnz,
+      onSelectChange,
+      exportbtnz,
+      reset,
+      getTableData,
       ...toRefs(state),
       tableData,
       columns,
@@ -219,7 +436,7 @@ export default {
     .select {
       margin-right: 20px;
       margin-bottom: 20px;
-      width: calc((100% - 76px - 360px) / 4);
+      width: calc((100% - 56px) / 4);
     }
 
     .addTimeBox {