Skip to content

Commit 19815bf

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

File tree

3 files changed

+370
-0
lines changed

3 files changed

+370
-0
lines changed

‎src/api/infra/demo01.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 createDemo01Contact(data) {
5+
return request({
6+
url: '/infra/demo01-contact/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 更新示例联系人
13+
export function updateDemo01Contact(data) {
14+
return request({
15+
url: '/infra/demo01-contact/update',
16+
method: 'put',
17+
data: data
18+
})
19+
}
20+
21+
// 删除示例联系人
22+
export function deleteDemo01Contact(id) {
23+
return request({
24+
url: '/infra/demo01-contact/delete?id=' + id,
25+
method: 'delete'
26+
})
27+
}
28+
29+
// 获得示例联系人
30+
export function getDemo01Contact(id) {
31+
return request({
32+
url: '/infra/demo01-contact/get?id=' + id,
33+
method: 'get'
34+
})
35+
}
36+
37+
// 获得示例联系人分页
38+
export function getDemo01ContactPage(params) {
39+
return request({
40+
url: '/infra/demo01-contact/page',
41+
method: 'get',
42+
params
43+
})
44+
}
45+
// 导出示例联系人 Excel
46+
export function exportDemo01ContactExcel(params) {
47+
return request({
48+
url: '/infra/demo01-contact/export-excel',
49+
method: 'get',
50+
params,
51+
responseType: 'blob'
52+
})
53+
}

‎src/views/infra/demo/demo01/Demo01ContactForm.vue

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
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="sex">
10+
<el-radio-group v-model="formData.sex">
11+
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
12+
:key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
13+
</el-radio-group>
14+
</el-form-item>
15+
<el-form-item label="出生年" prop="birthday">
16+
<el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生年" />
17+
</el-form-item>
18+
<el-form-item label="简介">
19+
<Editor v-model="formData.description" :min-height="192"/>
20+
</el-form-item>
21+
<el-form-item label="头像" prop="avatar">
22+
<el-input v-model="formData.avatar" placeholder="请输入头像" />
23+
</el-form-item>
24+
</el-form>
25+
<div slot="footer" class="dialog-footer">
26+
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
27+
<el-button @click="dialogVisible = false">取 消</el-button>
28+
</div>
29+
</el-dialog>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import * as Demo01ContactApi from '@/api/infra/demo01'
35+
import Editor from '@/components/Editor';
36+
export default {
37+
name: "Demo01ContactForm",
38+
components: {
39+
Editor,
40+
},
41+
data() {
42+
return {
43+
// 弹出层标题
44+
dialogTitle: "",
45+
// 是否显示弹出层
46+
dialogVisible: false,
47+
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
48+
formLoading: false,
49+
// 表单参数
50+
formData: {
51+
id: undefined,
52+
name: undefined,
53+
sex: undefined,
54+
birthday: undefined,
55+
description: undefined,
56+
avatar: undefined,
57+
},
58+
// 表单校验
59+
formRules: {
60+
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
61+
sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
62+
birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
63+
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
64+
},
65+
};
66+
},
67+
methods: {
68+
/** 打开弹窗 */
69+
open(id) {
70+
this.dialogVisible = true;
71+
this.reset();
72+
const that = this;
73+
// 修改时，设置数据
74+
if (id) {
75+
this.formLoading = true;
76+
try {
77+
Demo01ContactApi.getDemo01Contact(id).then(res=>{
78+
that.formData = res.data;
79+
that.title = "修改示例联系人";
80+
})
81+
} finally {
82+
this.formLoading = false;
83+
}
84+
}
85+
this.title = "新增示例联系人";
86+
},
87+
88+
/** 提交按钮 */
89+
submitForm() {
90+
this.formLoading = true;
91+
try {
92+
const that = this;
93+
let data = this.formData;
94+
95+
this.getRef("formRef").validate(valid => {
96+
if (!valid) {
97+
return;
98+
}
99+
// 修改的提交
100+
if (data.id) {
101+
Demo01ContactApi.updateDemo01Contact(data).then(response => {
102+
that.$modal.msgSuccess("修改成功");
103+
that.dialogVisible = false;
104+
that.$emit('success');
105+
});
106+
return;
107+
}
108+
// 添加的提交
109+
Demo01ContactApi.createDemo01Contact(data).then(response => {
110+
that.$modal.msgSuccess("新增成功");
111+
that.dialogVisible = false;
112+
that.$emit('success');
113+
});
114+
});
115+
}finally {
116+
this.formLoading = false
117+
}
118+
},
119+
getRef(refName){ // TODO puhui999: 获得表单 ref，提取出来的目的呢是解决 $ 在 if 中 end闭合不了的问题，代码生成后可删除此方法
120+
return this.$refs[refName]
121+
},
122+
/** 表单重置 */
123+
reset() {
124+
this.formData = {
125+
id: undefined,
126+
name: undefined,
127+
sex: undefined,
128+
birthday: undefined,
129+
description: undefined,
130+
avatar: undefined,
131+
};
132+
this.resetForm("formRef");
133+
},
134+
}
135+
};
136+
</script>

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

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

0 commit comments

Comments
 (0)