目录修改为树形结构加表格

src/api/resource/catalogResource/index.ts

@@ -16,6 +16,15 @@ export const listCatalogResource = (query?: CatalogResourceQuery): AxiosPromise<
   });
 };
 
+export const pageCatalogResource = (query?: CatalogResourceQuery): AxiosPromise<CatalogResourceVO[]> => {
+  return request({
+    url: '/catalog/resource/pageList',
+    method: 'get',
+    params: query
+  });
+};
+
+
 /**
  * 查询目录-专题资源详细
  * @param catalogId

src/api/resource/catalogTextbook/index.ts

@@ -16,6 +16,14 @@ export const listCatalogTextbook = (query?: CatalogTextbookQuery): AxiosPromise<
   });
 };
 
+export const pageCatalogTextbook = (query?: CatalogTextbookQuery): AxiosPromise<CatalogTextbookVO[]> => {
+  return request({
+    url: '/catalog/textbook/pageList',
+    method: 'get',
+    params: query
+  });
+};
+
 /**
  * 查询目录-同步教材详细
  * @param catalogId

src/views/resource/catalogResource/index.vue

@@ -17,6 +17,8 @@
       </div>
     </transition>
 
+    <el-row :gutter="20">
+      <el-col :span="8">
         <el-card shadow="never">
           <template #header>
             <el-row :gutter="10" class="mb8">
@@ -30,8 +32,9 @@
               <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
           </template>
-      <el-table ref="catalogResourceTableRef" v-loading="loading" :data="catalogResourceList" row-key="catalogId"
+          <el-table ref="catalogResourceTableRef" @row-click="handleNodeClick" v-loading="loading"
-        :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+            :data="catalogResourceList" row-key="catalogId" :default-expand-all="isExpandAll"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
             <el-table-column label="专题名称" align="center" prop="catalogName" />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template #default="scope">
@@ -51,6 +54,31 @@
             </el-table-column>
           </el-table>
         </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-table v-loading="loadingTable" :data="catalogResourceTable">
+          <el-table-column label="分类名称" align="center" prop="catalogName" />
+          <el-table-column label="资源数量" align="center" prop="resourceNum" />
+          <el-table-column label="排序" align="center" prop="orderNum" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="修改" placement="top">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                  v-hasPermi="['resource:catalogTextbook:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                  v-hasPermi="['resource:catalogTextbook:remove']"></el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryTableParams.pageNum"
+          v-model:limit="queryTableParams.pageSize" @pagination="getTable" />
+      </el-col>
+    </el-row>
+
+
     <!-- 添加或修改目录-专题资源对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="catalogResourceFormRef" :model="form" :rules="rules" label-width="80px">
@@ -79,7 +107,7 @@
 </template>
 
 <script setup name="CatalogResource" lang="ts">
-import { listCatalogResource, getCatalogResource, delCatalogResource, addCatalogResource, updateCatalogResource } from "@/api/resource/catalogResource";
+import { listCatalogResource, pageCatalogResource, getCatalogResource, delCatalogResource, addCatalogResource, updateCatalogResource } from "@/api/resource/catalogResource";
 import { CatalogResourceVO, CatalogResourceQuery, CatalogResourceForm } from '@/api/resource/catalogResource/types';
 
 type CatalogResourceOption = {
@@ -253,6 +281,32 @@ const handleDelete = async (row: CatalogResourceVO) => {
   proxy?.$modal.msgSuccess("删除成功");
 }
 
+const queryTableParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  catalogId: undefined,
+  parentId: undefined,
+  ancestors: undefined,
+  catalogName: undefined,
+  orderNum: undefined,
+  type: undefined,
+})
+const total = ref(0);
+const loadingTable = ref(false);
+const catalogResourceTable = ref<CatalogResourceVO[]>([]);
+const getTable = async () => {
+  loadingTable.value = true;
+  const res = await pageCatalogResource(queryTableParams.value);
+  catalogResourceTable.value = res.rows;
+  total.value = res.total;
+  loadingTable.value = false;
+}
+
+const handleNodeClick = (row: any) => {
+  queryTableParams.value.catalogId = row.catalogId
+  getTable()
+}
+
 onMounted(() => {
   getList();
 });

src/views/resource/catalogTextbook/index.vue

@@ -17,6 +17,8 @@
       </div>
     </transition>
 
+    <el-row :gutter="20">
+      <el-col :span="8">
         <el-card shadow="never">
           <template #header>
             <el-row :gutter="10" class="mb8">
@@ -30,10 +32,11 @@
               <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
           </template>
-      <el-table ref="catalogTextbookTableRef" v-loading="loading" :data="catalogTextbookList" row-key="catalogId"
+          <el-table ref="catalogTextbookTableRef" @row-click="handleNodeClick" v-loading="loading"
-        :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+            :data="catalogTextbookList" row-key="catalogId" :default-expand-all="isExpandAll"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
             <el-table-column label="教材名称" align="center" prop="catalogName" />
-        <el-table-column label="类型" align="center" prop="type">
+            <el-table-column label="目录类型" align="center" prop="type">
               <template #default="scope">
                 <el-tag v-if="scope.row.type === 1" type="success">暂定</el-tag>
                 <el-tag v-if="scope.row.type === 2" type="success">学段</el-tag>
@@ -62,6 +65,41 @@
             </el-table-column>
           </el-table>
         </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-table v-loading="loadingTable" :data="catalogTextbookTable">
+          <el-table-column label="分类名称" align="center" prop="catalogName" />
+          <el-table-column label="目录类型" align="center" prop="type">
+            <template #default="scope">
+              <el-tag v-if="scope.row.type === 1" type="success">暂定</el-tag>
+              <el-tag v-if="scope.row.type === 2" type="success">学段</el-tag>
+              <el-tag v-if="scope.row.type === 3" type="success">年级</el-tag>
+              <el-tag v-if="scope.row.type === 4" type="success">学科</el-tag>
+              <el-tag v-if="scope.row.type === 5" type="success">版本</el-tag>
+              <el-tag v-if="scope.row.type === 6" type="success">教材</el-tag>
+              <el-tag v-if="scope.row.type === 7" type="success">目录</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="资源数量" align="center" prop="resourceNum" />
+          <el-table-column label="排序" align="center" prop="orderNum" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="修改" placement="top">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                  v-hasPermi="['resource:catalogTextbook:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                  v-hasPermi="['resource:catalogTextbook:remove']"></el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryTableParams.pageNum"
+          v-model:limit="queryTableParams.pageSize" @pagination="getTable" />
+      </el-col>
+    </el-row>
+
     <!-- 添加或修改目录-同步教材对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="catalogTextbookFormRef" :model="form" :rules="rules" label-width="80px">
@@ -90,7 +128,7 @@
 </template>
 
 <script setup name="CatalogTextbook" lang="ts">
-import { listCatalogTextbook, getCatalogTextbook, delCatalogTextbook, addCatalogTextbook, updateCatalogTextbook } from "@/api/resource/catalogTextbook";
+import { listCatalogTextbook, pageCatalogTextbook, getCatalogTextbook, delCatalogTextbook, addCatalogTextbook, updateCatalogTextbook } from "@/api/resource/catalogTextbook";
 import { CatalogTextbookVO, CatalogTextbookQuery, CatalogTextbookForm } from '@/api/resource/catalogTextbook/types';
 
 type CatalogTextbookOption = {
@@ -99,8 +137,7 @@ type CatalogTextbookOption = {
   children?: CatalogTextbookOption[];
 }
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
 
 const catalogTextbookList = ref<CatalogTextbookVO[]>([]);
 const catalogTextbookOptions = ref<CatalogTextbookOption[]>([]);
@@ -294,6 +331,32 @@ const handleDelete = async (row: CatalogTextbookVO) => {
   proxy?.$modal.msgSuccess("删除成功");
 }
 
+const queryTableParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  catalogId: undefined,
+  parentId: undefined,
+  ancestors: undefined,
+  catalogName: undefined,
+  orderNum: undefined,
+  type: undefined,
+})
+const total = ref(0);
+const loadingTable = ref(false);
+const catalogTextbookTable = ref<CatalogTextbookVO[]>([]);
+const getTable = async () => {
+  loadingTable.value = true;
+  const res = await pageCatalogTextbook(queryTableParams.value);
+  catalogTextbookTable.value = res.rows;
+  total.value = res.total;
+  loadingTable.value = false;
+}
+
+const handleNodeClick = (row: any) => {
+  queryTableParams.value.catalogId = row.catalogId
+  getTable()
+}
+
 onMounted(() => {
   getList();
 });