mozhe
/
school_file_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
jiangzhe 2024-05-29 17:09:44 +08:00
parent 61cd232c40
commit c90dfc56cf
4 changed files with 226 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/resource/catalogResource/index.ts
View File

@ -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 * @param catalogId

8
src/api/resource/catalogTextbook/index.ts
View File

@ -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 * @param catalogId

144
src/views/resource/catalogResource/index.vue
View File

@ -17,40 +17,68 @@
</div> </div>
</transition> </transition>
<el-card shadow="never"> <el-row :gutter="20">
<template #header> <el-col :span="8">
<el-row :gutter="10" class="mb8"> <el-card shadow="never">
<el-col :span="1.5"> <template #header>
<el-button type="primary" plain icon="Plus" @click="handleAdd()" <el-row :gutter="10" class="mb8">
v-hasPermi="['catalog:resource:add']">新增</el-button> <el-col :span="1.5">
</el-col> <el-button type="primary" plain icon="Plus" @click="handleAdd()"
<el-col :span="1.5"> v-hasPermi="['catalog:resource:add']">新增</el-button>
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> </el-col>
</el-col> <el-col :span="1.5">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-row> </el-col>
</template> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
<el-table ref="catalogResourceTableRef" v-loading="loading" :data="catalogResourceList" row-key="catalogId" </el-row>
: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">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['catalog:resource:edit']" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
v-hasPermi="['catalog:resource:add']" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['catalog:resource:remove']" />
</el-tooltip>
</template> </template>
</el-table-column> <el-table ref="catalogResourceTableRef" @row-click="handleNodeClick" v-loading="loading"
</el-table> :data="catalogResourceList" row-key="catalogId" :default-expand-all="isExpandAll"
</el-card> :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">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['catalog:resource:edit']" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
v-hasPermi="['catalog:resource:add']" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['catalog:resource:remove']" />
</el-tooltip>
</template>
</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-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="catalogResourceFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="catalogResourceFormRef" :model="form" :rules="rules" label-width="80px">
@ -79,7 +107,7 @@
</template> </template>
<script setup name="CatalogResource" lang="ts"> <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'; import { CatalogResourceVO, CatalogResourceQuery, CatalogResourceForm } from '@/api/resource/catalogResource/types';
type CatalogResourceOption = { type CatalogResourceOption = {
@ -103,22 +131,22 @@ const catalogResourceFormRef = ref<ElFormInstance>();
const catalogResourceTableRef = ref<ElTableInstance>() const catalogResourceTableRef = ref<ElTableInstance>()
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false, visible: false,
title: '' title: ''
}); });
const initFormData: CatalogResourceForm = { const initFormData: CatalogResourceForm = {
catalogId: undefined, catalogId: undefined,
parentId: undefined, parentId: undefined,
ancestors: undefined, ancestors: undefined,
catalogName: undefined, catalogName: undefined,
orderNum: undefined, orderNum: undefined,
cover: undefined, cover: undefined,
} }
const data = reactive<PageData<CatalogResourceForm, CatalogResourceQuery>>({ const data = reactive<PageData<CatalogResourceForm, CatalogResourceQuery>>({
form: {...initFormData}, form: { ...initFormData },
queryParams: { queryParams: {
parentId: undefined, parentId: undefined,
ancestors: undefined, ancestors: undefined,
@ -132,7 +160,7 @@ const data = reactive<PageData<CatalogResourceForm, CatalogResourceQuery>>({
parentId: [ parentId: [
{ required: true, message: "父目录id不能为空", trigger: "blur" } { required: true, message: "父目录id不能为空", trigger: "blur" }
], ],
catalogName: [ catalogName: [
{ required: true, message: "专题名称不能为空", trigger: "blur" } { required: true, message: "专题名称不能为空", trigger: "blur" }
], ],
@ -172,7 +200,7 @@ const cancel = () => {
// 表单重置 // 表单重置
const reset = () => { const reset = () => {
form.value = {...initFormData} form.value = { ...initFormData }
catalogResourceFormRef.value?.resetFields(); catalogResourceFormRef.value?.resetFields();
} }
@ -253,6 +281,32 @@ const handleDelete = async (row: CatalogResourceVO) => {
proxy?.$modal.msgSuccess("删除成功"); 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(() => { onMounted(() => {
getList(); getList();
}); });

157
src/views/resource/catalogTextbook/index.vue
View File

@ -17,51 +17,89 @@
</div> </div>
</transition> </transition>
<el-card shadow="never"> <el-row :gutter="20">
<template #header> <el-col :span="8">
<el-row :gutter="10" class="mb8"> <el-card shadow="never">
<el-col :span="1.5"> <template #header>
<el-button type="primary" plain icon="Plus" @click="handleAdd()" <el-row :gutter="10" class="mb8">
v-hasPermi="['catalog:textbook:add']">新增</el-button> <el-col :span="1.5">
</el-col> <el-button type="primary" plain icon="Plus" @click="handleAdd()"
<el-col :span="1.5"> v-hasPermi="['catalog:textbook:add']">新增</el-button>
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> </el-col>
</el-col> <el-col :span="1.5">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-row> </el-col>
</template> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
<el-table ref="catalogTextbookTableRef" v-loading="loading" :data="catalogTextbookList" row-key="catalogId" </el-row>
: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">
<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> </template>
</el-table-column> <el-table ref="catalogTextbookTableRef" @row-click="handleNodeClick" v-loading="loading"
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> :data="catalogTextbookList" row-key="catalogId" :default-expand-all="isExpandAll"
<template #default="scope"> :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-tooltip content="修改" placement="top"> <el-table-column label="教材名称" align="center" prop="catalogName" />
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" <el-table-column label="目录类型" align="center" prop="type">
v-hasPermi="['catalog:textbook:edit']" /> <template #default="scope">
</el-tooltip> <el-tag v-if="scope.row.type === 1" type="success">暂定</el-tag>
<el-tooltip content="新增" placement="top"> <el-tag v-if="scope.row.type === 2" type="success">学段</el-tag>
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" <el-tag v-if="scope.row.type === 3" type="success">年级</el-tag>
v-hasPermi="['catalog:textbook:add']" /> <el-tag v-if="scope.row.type === 4" type="success">学科</el-tag>
</el-tooltip> <el-tag v-if="scope.row.type === 5" type="success">版本</el-tag>
<el-tooltip content="删除" placement="top"> <el-tag v-if="scope.row.type === 6" type="success">教材</el-tag>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" <el-tag v-if="scope.row.type === 7" type="success">目录</el-tag>
v-hasPermi="['catalog:textbook:remove']" /> </template>
</el-tooltip> </el-table-column>
</template> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
</el-table-column> <template #default="scope">
</el-table> <el-tooltip content="修改" placement="top">
</el-card> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['catalog:textbook:edit']" />
</el-tooltip>
<el-tooltip content="新增" placement="top">
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
v-hasPermi="['catalog:textbook:add']" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['catalog:textbook:remove']" />
</el-tooltip>
</template>
</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-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="catalogTextbookFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="catalogTextbookFormRef" :model="form" :rules="rules" label-width="80px">
@ -90,7 +128,7 @@
</template> </template>
<script setup name="CatalogTextbook" lang="ts"> <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'; import { CatalogTextbookVO, CatalogTextbookQuery, CatalogTextbookForm } from '@/api/resource/catalogTextbook/types';
type CatalogTextbookOption = { type CatalogTextbookOption = {
@ -99,8 +137,7 @@ type CatalogTextbookOption = {
children?: CatalogTextbookOption[]; children?: CatalogTextbookOption[];
} }
const { proxy } = getCurrentInstance() as ComponentInternalInstance;; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const catalogTextbookList = ref<CatalogTextbookVO[]>([]); const catalogTextbookList = ref<CatalogTextbookVO[]>([]);
const catalogTextbookOptions = ref<CatalogTextbookOption[]>([]); const catalogTextbookOptions = ref<CatalogTextbookOption[]>([]);
@ -294,6 +331,32 @@ const handleDelete = async (row: CatalogTextbookVO) => {
proxy?.$modal.msgSuccess("删除成功"); 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(() => { onMounted(() => {
getList(); getList();
}); });