xiaozhan
/
tobacco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat：修改目录相关代码

Browse Source
dev-theme
username 1 week ago
parent 736e077dce
commit 681fb3fdb0
3 changed files with 332 additions and 233 deletions
Show Stats Download Patch File Download Diff File

38
bs-admin/src/main/java/com/bs/ct/controller/CtGalleryCataController.java
Unescape View File

@ -1,6 +1,9 @@
package com.bs.ct.controller; package com.bs.ct.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List; import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpServletResponse;
import io.swagger.annotations.Api; import io.swagger.annotations.Api;
@ -50,7 +53,9 @@ public class CtGalleryCataController extends BaseController {
LambdaQueryWrapper<CtGalleryCata> queryWrapper = new LambdaQueryWrapper(); LambdaQueryWrapper<CtGalleryCata> queryWrapper = new LambdaQueryWrapper();
condition(queryWrapper,ctGalleryCata); condition(queryWrapper,ctGalleryCata);
List<CtGalleryCata> list = ctGalleryCataService.list(queryWrapper); List<CtGalleryCata> list = ctGalleryCataService.list(queryWrapper);
return getDataTable(list); List<CtGalleryCata> ctGalleryCatas = buildTree(list);
return getDataTable(ctGalleryCatas);
} }
/** /**
@ -62,7 +67,36 @@ public class CtGalleryCataController extends BaseController {
LambdaQueryWrapper<CtGalleryCata> queryWrapper = new LambdaQueryWrapper(); LambdaQueryWrapper<CtGalleryCata> queryWrapper = new LambdaQueryWrapper();
condition(queryWrapper,ctGalleryCata); condition(queryWrapper,ctGalleryCata);
List<CtGalleryCata> list = ctGalleryCataService.list(queryWrapper); List<CtGalleryCata> list = ctGalleryCataService.list(queryWrapper);
return success(list); List<CtGalleryCata> ctGalleryCatas = buildTree(list);
return success(ctGalleryCatas);
}
public List<CtGalleryCata> buildTree(List<CtGalleryCata> list) {
Map<Long, CtGalleryCata> map = new HashMap<>();
List<CtGalleryCata> tree = new ArrayList<>();
// 先将所有节点放入 map 中
for (CtGalleryCata node : list) {
map.put(node.getId(), node);
}
// 构建树结构
for (CtGalleryCata node : list) {
Long parentId = node.getParentId();
if (parentId == null ||!map.containsKey(parentId)) {
tree.add(node);
} else {
CtGalleryCata parent = map.get(parentId);
// 假设 CtGalleryCata 类中有一个 children 属性来存储子节点
// 你需要在 CtGalleryCata 类中添加相应的属性和方法
// 这里简单模拟添加子节点
List<CtGalleryCata> children = parent.getChildren();
if (children == null) {
children = new ArrayList<>();
parent.setChildren(children);
}
children.add(node);
}
}
return tree;
} }
/** /**

5
bs-admin/src/main/java/com/bs/ct/domain/CtGalleryCata.java
Unescape View File

@ -11,6 +11,8 @@ import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName; import com.baomidou.mybatisplus.annotation.TableName;
import io.swagger.annotations.ApiModelProperty; import io.swagger.annotations.ApiModelProperty;
import java.util.List;
/** /**
* 图库目录对象 ct_gallery_cata * 图库目录对象 ct_gallery_cata
* *
@ -54,6 +56,7 @@ public class CtGalleryCata extends BaseEntity{
private String remarks; private String remarks;
@TableField(exist = false)
private List<CtGalleryCata> children;
} }

522
bs-ui/src/views/gallery/cata/index.vue
Unescape View File

@ -1,28 +1,40 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <!-- 搜索条件 -->
<el-form-item label="目录名称" prop="cataName"> <el-form
<el-input :model="queryParams"
v-model="queryParams.cataName" ref="queryForm"
placeholder="请输入目录名称" size="small"
clearable :inline="true"
@keyup.enter.native="handleQuery" v-show="showSearch"
/> label-width="68px"
</el-form-item> >
<el-form-item label="父级id" prop="parentId"> <el-form-item label="目录名称" prop="cataName">
<el-input <el-input
v-model="queryParams.parentId" v-model="queryParams.cataName"
placeholder="请输入父级id" placeholder="请输入目录名称"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索
</el-button>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 操作按钮 -->
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -32,50 +44,52 @@
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['gallery:cata:add']" v-hasPermi="['gallery:cata:add']"
>新增</el-button> >新增
</el-col> </el-button>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['gallery:cata:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['gallery:cata:remove']"
>删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="warning" type="info"
plain plain
icon="el-icon-download" icon="el-icon-sort"
size="mini" size="mini"
@click="handleExport" @click="toggleExpandAll"
v-hasPermi="['gallery:cata:export']" >展开/折叠
>导出</el-button> </el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="cataList" @sort-change="handleSortChange" @selection-change="handleSelectionChange"> <!-- 树状表格 -->
<el-table-column type="selection" width="55" align="center" /> <el-table
<el-table-column label="id" align="center" prop="id" sortable='custom' /> v-if="refreshTable"
<el-table-column label="目录名称" align="center" prop="cataName" sortable='custom' /> v-loading="loading"
<el-table-column label="父级id" align="center" prop="parentId" sortable='custom' /> :data="cataList"
<el-table-column label="类型" align="center" prop="type" sortable='custom' /> row-key="id"
<el-table-column label="备注" align="center" prop="remarks" sortable='custom' /> :default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column
label="目录名称"
prop="cataName"
sortable="custom"
/>
<el-table-column
label="类型"
align="center"
prop="type"
sortable="custom"
/>
<el-table-column
label="备注"
align="center"
prop="remarks"
sortable="custom"
/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -84,18 +98,21 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['gallery:cata:edit']" v-hasPermi="['gallery:cata:edit']"
>修改</el-button> >修改
</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['gallery:cata:remove']" v-hasPermi="['gallery:cata:remove']"
>删除</el-button> >删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页 -->
<pagination <pagination
hide-on-single-page hide-on-single-page
:total="total" :total="total"
@ -104,27 +121,58 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改图库目录对话框 --> <!-- 添加/修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body :close-on-click-modal="false"> <el-dialog
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> :title="title"
<el-col :span="12"> :visible.sync="open"
<el-form-item label="目录名称" prop="cataName"> width="70%"
<el-input v-model="form.cataName" placeholder="请输入目录名称" /> append-to-body
</el-form-item> :close-on-click-modal="false"
</el-col> >
<el-col :span="12"> <el-form
<el-form-item label="父级id" prop="parentId"> ref="form"
<el-input v-model="form.parentId" placeholder="请输入父级id" /> :model="form"
</el-form-item> :rules="rules"
</el-col> label-width="100px"
<el-col :span="12"> >
<el-form-item label="备注" prop="remarks"> <!-- 新增条件渲染：只有当parentId存在（非根目录）时显示父级目录选择框 -->
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" /> <el-col :span="24" v-if="form.parentId !== undefined && form.parentId !== 0">
</el-form-item> <el-form-item label="父级目录" prop="parentId">
</el-col> <treeselect
v-model="form.parentId"
:options="cataOptions"
:normalizer="normalizer"
placeholder="选择父级目录"
:allow-empty="true"
/>
</el-form-item>
</el-col>
<!-- 其他表单项保持不变 -->
<el-col :span="12">
<el-form-item label="目录名称" prop="cataName">
<el-input
v-model="form.cataName"
placeholder="请输入目录名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remarks">
<el-input
v-model="form.remarks"
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
</el-form> </el-form>
<!-- 对话框底部按钮保持不变 -->
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button
type="primary"
@click="submitForm"
>确 定
</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -132,166 +180,180 @@
</template> </template>
<script> <script>
import { pageListCata, getCata, delCata, addCata, updateCata } from "@/api/gallery/cata"; import {pageListCata, getCata, delCata, addCata, updateCata} from "@/api/gallery/cata";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {mapGetters} from "vuex";
export default { export default {
name: "Cata", name: "Cata",
data() { components: {Treeselect},
return { data() {
// 遮罩层 return {
loading: true, // 重新渲染表格状态
// 选中数组 refreshTable: true,
ids: [], // 加载状态
// 选中名字 loading: false,
names: [], // 搜索条件显示
// 非单个禁用 showSearch: true,
single: true, // 树状表格数据
// 非多个禁用 cataList: [],
multiple: true, // 对话框父级目录选项
// 显示搜索条件 cataOptions: [],
showSearch: true, // 弹出层标题
// 总条数 title: "",
total: 0, // 弹出层显示状态
// 图库目录表格数据 open: false,
cataList: [], // 展开/折叠状态
// 弹出层标题 isExpandAll: true,
title: "", // 总条数
// 是否显示弹出层 total: 0,
open: false, // 查询参数
// 查询参数 queryParams: {
queryParams: { pageNum: 1,
pageNum: 1, pageSize: 10,
pageSize: 10, cataName: null,
cataName: null, },
parentId: null, // 表单数据
type: null, form: {
remarks: null, id: null,
}, cataName: null,
// 表单参数 parentId: null,
form: {}, remarks: null,
// 表单校验 type: null, // 若有类型字段需补充
rules: { },
cataName: [ // 表单校验规则
{ required: true, message: "目录名称不能为空", trigger: "blur" } rules: {
], cataName: [
parentId: [ {required: true, message: "目录名称不能为空", trigger: "blur"}
{ required: true, message: "父级id不能为空", trigger: "blur" } ],
], // 父级目录允许为空（根节点）
type: [ remarks: [
{ required: true, message: "类型不能为空", trigger: "change" } {required: false, message: "备注长度不超过500字", trigger: "blur"}
], ]
remarks: [ },
{ required: true, message: "备注不能为空", trigger: "blur" } // 选中项
], ids: [],
} names: [],
single: true,
multiple: true,
};
},
computed: {
...mapGetters(["getToken"]) // 若需权限控制
},
created() {
this.getList();
},
methods: {
/** 获取目录列表 */
getList() {
this.loading = true;
pageListCata(this.queryParams).then(({rows, total}) => {
this.cataList = rows;
this.cataOptions = rows; // 父级目录选项使用全量数据
this.total = total;
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
/** 展开/折叠所有节点 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 重置表单 */
reset() {
this.form = {
id: null,
cataName: null,
parentId: null,
remarks: null,
type: null,
}; };
this.resetForm("form");
}, },
created() { /** 搜索 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList(); this.getList();
}, },
methods: { /** 重置搜索 */
/** 查询图库目录列表 */ resetQuery() {
getList() { this.resetForm("queryForm");
this.loading = true; this.handleQuery();
pageListCata(this.queryParams).then(response => { },
this.cataList = response.rows; /** 处理选中项 */
this.total = response.total; handleSelectionChange(selection) {
this.loading = false; this.ids = selection.map((item) => item.id);
}).catch(e => { this.names = selection.map((item) => item.cataName);
this.loading = false; this.single = selection.length !== 1;
}); this.multiple = !selection.length;
}, },
// 取消按钮 /** 新增 */
cancel() { handleAdd() {
this.open = false; this.reset();
this.reset(); this.open = true;
}, this.title = "新增目录";
// 表单重置 },
reset() { /** 修改 */
this.form = { handleUpdate(row) {
id: null, this.reset();
cataName: null, const id = row.id;
parentId: null, getCata(id).then(({data}) => {
type: null, this.form = data;
remarks: null,
};
this.resetForm("form");
},
//排序
handleSortChange(col) {
this.$sortBy(col, this.queryParams);
this.getList();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.names = selection.map(item => item.id);
this.single = selection.length!==1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true; this.open = true;
this.title = "添加图库目录"; this.title = "修改目录";
}, });
/** 修改按钮操作 */ },
handleUpdate(row) { /** 提交表单 */
this.reset(); submitForm() {
const id = row.id || this.ids; this.$refs.form.validate((valid) => {
getCata(id).then(response => { if (valid) {
this.form = response.data; const api = this.form.id ? updateCata : addCata;
this.open = true; api(this.form).then(() => {
this.title = "修改图库目录"; this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功");
}); this.open = false;
}, this.getList();
/** 提交按钮 */ });
submitForm() { }
this.$refs["form"].validate(valid => { });
if (valid) { },
if (this.form.id != null) { /** 删除 */
updateCata(this.form).then(response => { handleDelete(row) {
this.$modal.msgSuccess("修改成功"); // 校验是否存在子节点
this.open = false; if (row.children && row.children.length > 0) {
this.getList(); // 使用与成功提示统一的提示方法（假设警告提示为 msgWarning）
}); this.$modal.msgWarning("该目录存在下级目录，无法直接删除，请先删除下级目录");
} else { return; // 终止删除流程
addCata(this.form).then(response => { }
this.$modal.msgSuccess("新增成功"); // 无下级目录时执行原删除逻辑
this.open = false; const id = row.id;
this.getList(); const name = row.cataName;
}); this.$modal.confirm(`是否确认删除“${name}”？`).then(() => {
} delCata(id).then(() => {
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
const names = row.id || this.names;
this.$modal.confirm('是否确认删除图库目录为"' + names + '"的数据项？').then(function() {
return delCata(ids);
}).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功"); // 保持原有成功提示
}).catch(() => {}); });
}, });
/** 导出按钮操作 */ },
handleExport() { // 取消按钮
this.download('gallery/cata/export', { cancel() {
...this.queryParams this.open = false;
}, `cata_${new Date().getTime()}.xlsx`) this.reset();
} },
/** Treeselect 节点格式化（若字段名不一致时使用） */
normalizer(node) {
return {
id: node.id,
label: node.cataName,
children: node.children,
};
}
} }
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save