Skip to content

Commit 691ac8d

Browse files
author
puhui999
committed
代码生成：新增树表生成示例
1 parent 19815bf commit 691ac8d

File tree

3 files changed

+374
-0
lines changed

3 files changed

+374
-0
lines changed

‎src/api/infra/demo02.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import request from '@/utils/request'
2+
3+
// 创建示例分类
4+
export function createDemo02Category(data) {
5+
return request({
6+
url: '/infra/demo02-category/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 更新示例分类
13+
export function updateDemo02Category(data) {
14+
return request({
15+
url: '/infra/demo02-category/update',
16+
method: 'put',
17+
data: data
18+
})
19+
}
20+
21+
// 删除示例分类
22+
export function deleteDemo02Category(id) {
23+
return request({
24+
url: '/infra/demo02-category/delete?id=' + id,
25+
method: 'delete'
26+
})
27+
}
28+
29+
// 获得示例分类
30+
export function getDemo02Category(id) {
31+
return request({
32+
url: '/infra/demo02-category/get?id=' + id,
33+
method: 'get'
34+
})
35+
}
36+
37+
// 获得示例分类列表
38+
export function getDemo02CategoryList(params) {
39+
return request({
40+
url: '/infra/demo02-category/list',
41+
method: 'get',
42+
params
43+
})
44+
}
45+
// 导出示例分类 Excel
46+
export function exportDemo02CategoryExcel(params) {
47+
return request({
48+
url: '/infra/demo02-category/export-excel',
49+
method: 'get',
50+
params,
51+
responseType: 'blob'
52+
})
53+
}

‎src/views/infra/demo/demo02/Demo02CategoryForm.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<div class="app-container">
3+
<!-- 对话框(添加 / 修改) -->
4+
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
5+
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
6+
<el-form-item label="名字" prop="name">
7+
<el-input v-model="formData.name" placeholder="请输入名字" />
8+
</el-form-item>
9+
<el-form-item label="父级编号" prop="parentId">
10+
<TreeSelect
11+
v-model="formData.parentId"
12+
:options="demo02CategoryTree"
13+
:normalizer="normalizer"
14+
placeholder="请选择父级编号"
15+
/>
16+
</el-form-item>
17+
</el-form>
18+
<div slot="footer" class="dialog-footer">
19+
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
20+
<el-button @click="dialogVisible = false">取 消</el-button>
21+
</div>
22+
</el-dialog>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import * as Demo02CategoryApi from '@/api/infra/demo02'
28+
import TreeSelect from "@riophae/vue-treeselect";
29+
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
30+
export default {
31+
name: "Demo02CategoryForm",
32+
components: {
33+
TreeSelect,
34+
},
35+
data() {
36+
return {
37+
// 弹出层标题
38+
dialogTitle: "",
39+
// 是否显示弹出层
40+
dialogVisible: false,
41+
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
42+
formLoading: false,
43+
// 表单参数
44+
formData: {
45+
id: undefined,
46+
name: undefined,
47+
parentId: undefined,
48+
},
49+
// 表单校验
50+
formRules: {
51+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
52+
parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }],
53+
},
54+
demo02CategoryTree: [], // 树形结构
55+
};
56+
},
57+
methods: {
58+
/** 打开弹窗 */
59+
open(id) {
60+
this.dialogVisible = true;
61+
this.reset();
62+
const that = this;
63+
// 修改时，设置数据
64+
if (id) {
65+
this.formLoading = true;
66+
try {
67+
Demo02CategoryApi.getDemo02Category(id).then(res=>{
68+
that.formData = res.data;
69+
that.title = "修改示例分类";
70+
})
71+
} finally {
72+
this.formLoading = false;
73+
}
74+
}
75+
this.title = "新增示例分类";
76+
this.getDemo02CategoryTree()
77+
},
78+
79+
/** 提交按钮 */
80+
submitForm() {
81+
this.formLoading = true;
82+
try {
83+
const that = this;
84+
let data = this.formData;
85+
86+
this.getRef("formRef").validate(valid => {
87+
if (!valid) {
88+
return;
89+
}
90+
// 修改的提交
91+
if (data.id) {
92+
Demo02CategoryApi.updateDemo02Category(data).then(response => {
93+
that.$modal.msgSuccess("修改成功");
94+
that.dialogVisible = false;
95+
that.$emit('success');
96+
});
97+
return;
98+
}
99+
// 添加的提交
100+
Demo02CategoryApi.createDemo02Category(data).then(response => {
101+
that.$modal.msgSuccess("新增成功");
102+
that.dialogVisible = false;
103+
that.$emit('success');
104+
});
105+
});
106+
}finally {
107+
this.formLoading = false
108+
}
109+
},
110+
getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
111+
return this.$refs[refName]
112+
},
113+
/** 获得示例分类树 */
114+
getDemo02CategoryTree() {
115+
const that = this;
116+
that.demo02CategoryTree = [];
117+
Demo02CategoryApi.getDemo02CategoryList().then(res=>{
118+
const root = { id: 0, name: '顶级示例分类', children: [] };
119+
root.children = this.handleTree(res.data, 'id', 'parentId')
120+
that.demo02CategoryTree.push(root)
121+
});
122+
},
123+
/** 转换示例分类数据结构 */
124+
normalizer(node) {
125+
if (node.children && !node.children.length) {
126+
delete node.children;
127+
}
128+
return {
129+
id: node.id,
130+
label: node.name,
131+
children: node.children
132+
};
133+
},
134+
/** 表单重置 */
135+
reset() {
136+
this.formData = {
137+
id: undefined,
138+
name: undefined,
139+
parentId: undefined,
140+
};
141+
this.resetForm("formRef");
142+
},
143+
}
144+
};
145+
</script>

‎src/views/infra/demo/demo02/index.vue

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<!-- 搜索工作栏 -->
5+
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
6+
<el-form-item label="名字" prop="name">
7+
<el-input v-model="queryParams.name" placeholder="请输入名字" clearable @keyup.enter.native="handleQuery"/>
8+
</el-form-item>
9+
<el-form-item label="父级编号" prop="parentId">
10+
<el-input v-model="queryParams.parentId" placeholder="请输入父级编号" clearable @keyup.enter.native="handleQuery"/>
11+
</el-form-item>
12+
<el-form-item label="创建时间" prop="createTime">
13+
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
14+
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
15+
</el-form-item>
16+
<el-form-item>
17+
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
18+
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
19+
</el-form-item>
20+
</el-form>
21+
22+
<!-- 操作工具栏 -->
23+
<el-row :gutter="10" class="mb8">
24+
<el-col :span="1.5">
25+
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
26+
v-hasPermi="['infra:demo02-category:create']">新增</el-button>
27+
</el-col>
28+
<el-col :span="1.5">
29+
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
30+
v-hasPermi="['infra:demo02-category:export']">导出</el-button>
31+
</el-col>
32+
<el-col :span="1.5">
33+
<el-button type="danger" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
34+
展开/折叠
35+
</el-button>
36+
</el-col>
37+
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
38+
</el-row>
39+
40+
<el-table
41+
v-loading="loading"
42+
:data="list"
43+
:stripe="true"
44+
:show-overflow-tooltip="true"
45+
v-if="refreshTable"
46+
row-key="id"
47+
:default-expand-all="isExpandAll"
48+
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
49+
>
50+
<el-table-column label="编号" align="center" prop="id" />
51+
<el-table-column label="名字" align="center" prop="name" />
52+
<el-table-column label="父级编号" align="center" prop="parentId" />
53+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
54+
<template v-slot="scope">
55+
<span>{{ parseTime(scope.row.createTime) }}</span>
56+
</template>
57+
</el-table-column>
58+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
59+
<template v-slot="scope">
60+
<el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
61+
v-hasPermi="['infra:demo02-category:update']">修改</el-button>
62+
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
63+
v-hasPermi="['infra:demo02-category:delete']">删除</el-button>
64+
</template>
65+
</el-table-column>
66+
</el-table>
67+
<!-- 分页组件 -->
68+
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
69+
@pagination="getList"/>
70+
71+
<!-- 对话框(添加 / 修改) -->
72+
<Demo02CategoryForm ref="formRef" @success="getList" />
73+
</div>
74+
</template>
75+
76+
<script>
77+
import * as Demo02CategoryApi from '@/api/infra/demo02';
78+
import Demo02CategoryForm from './Demo02CategoryForm.vue';
79+
export default {
80+
name: "Demo02Category",
81+
components: {
82+
Demo02CategoryForm,
83+
},
84+
data() {
85+
return {
86+
// 遮罩层
87+
loading: true,
88+
// 导出遮罩层
89+
exportLoading: false,
90+
// 显示搜索条件
91+
showSearch: true,
92+
// 总条数
93+
// 示例分类列表
94+
list: [],
95+
// 是否展开，默认全部展开
96+
isExpandAll: true,
97+
// 重新渲染表格状态
98+
refreshTable: true,
99+
// 选中行
100+
currentRow: {},
101+
// 查询参数
102+
queryParams: {
103+
name: null,
104+
parentId: null,
105+
createTime: [],
106+
}
107+
};
108+
},
109+
created() {
110+
this.getList();
111+
},
112+
methods: {
113+
/** 查询列表 */
114+
getList() {
115+
try {
116+
this.loading = true;
117+
Demo02CategoryApi.getDemo02CategoryList(this.queryParams).then(response => {
118+
this.list = this.handleTree(response.data, 'id', 'parentId');
119+
})
120+
} finally {
121+
this.loading = false;
122+
}
123+
},
124+
/** 搜索按钮操作 */
125+
handleQuery() {
126+
this.queryParams.pageNo = 1;
127+
this.getList();
128+
},
129+
/** 重置按钮操作 */
130+
resetQuery() {
131+
this.resetForm("queryForm");
132+
this.handleQuery();
133+
},
134+
/** 添加/修改操作 */
135+
openForm(id) {
136+
this.$refs["formRef"].open(id)
137+
},
138+
/** 删除按钮操作 */
139+
handleDelete(row) {
140+
const that = this;
141+
try {
142+
const id = row.id;
143+
this.$modal.confirm('是否确认删除示例分类编号为"' + id + '"的数据项?').then(()=>{
144+
return Demo02CategoryApi.deleteDemo02Category(id);
145+
}).then(() => {
146+
that.getList();
147+
that.$modal.msgSuccess("删除成功");
148+
}).catch(() => {});
149+
} catch {}
150+
},
151+
/** 导出按钮操作 */
152+
handleExport() {
153+
const that = this;
154+
try {
155+
this.$modal.confirm('是否确认导出所有示例分类数据项?').then(() => {
156+
that.exportLoading = true;
157+
return Demo02CategoryApi.exportDemo02CategoryExcel(params);
158+
}).then(response => {
159+
that.$download.excel(response, '示例分类.xls');
160+
});
161+
} catch {
162+
} finally {
163+
that.exportLoading = false;
164+
}
165+
},
166+
/** 展开/折叠操作 */
167+
toggleExpandAll() {
168+
this.refreshTable = false
169+
this.isExpandAll = !this.isExpandAll
170+
this.$nextTick(function () {
171+
this.refreshTable = true
172+
})
173+
}
174+
}
175+
};
176+
</script>

0 commit comments

Comments
 (0)