ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source 
重新封装了表单窗体,支持关闭时变更检测;
优化模版代码及内部注释,更快速开发;
开发文档中的代码片段可以复制成用户片段模版
This commit is contained in:
自带大佬气场
2021-04-30 21:58:31 +08:00
parent a41311327c
commit 03a88be5ce
30 changed files with 562 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
Web/public/doc-code/seed/addForm.vue
View File

@@ -1,78 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="新增XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testAddApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

79
Web/public/doc-code/seed/editForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="编辑XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testEditApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

38
Web/public/doc-code/seed/form.vue
View File

@@ -1,27 +1,41 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group">
<!-- 表单控件 -->
<!-- ... -->
</div>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
data() {
return {
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {},
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/** ... */
/* ... */
};
},
@@ -30,12 +44,13 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
@@ -50,7 +65,7 @@ export default {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/** ... */
/* ... */
reslove(record);
} else {
@@ -77,7 +92,7 @@ export default {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/** ... */
/* ... */
}, 300);
},
@@ -85,16 +100,15 @@ export default {
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
/** ...END */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/** ... */
/* ... */
},
};
</script>

56
Web/public/doc-code/seed/query.vue
View File

@@ -1,4 +1,10 @@
<template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container>
<br />
<a-card :bordered="false">
@@ -11,11 +17,13 @@
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
<a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
@@ -28,35 +36,52 @@
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'testPageApi',
delete: 'testDeleteApi',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
AddForm,
EditForm,
FormBody,
},
data() {
return {
...api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
@@ -64,10 +89,11 @@ export default {
};
},
created() {
/** 按需加载字典编码 */
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -127,10 +153,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -151,7 +179,11 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
},
/**

62
Web/public/doc-code/seed/treeLayout.vue
View File

@@ -1,4 +1,10 @@
<template>
<!--
普通树查询表格
v 1.2
2021-04-30
Lufthafen
-->
<yo-tree-layout
:load-data="loadTreeData"
@select="onSelect"
@@ -16,11 +22,13 @@
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
@@ -33,41 +41,62 @@
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
</container>
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="`新增${name}`" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="`编辑${name}`" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</yo-tree-layout>
</template>
<script>
/* 需要引用YoTreeLayout组件 */
import YoTreeLayout from '@/components/yoTreeLayout';
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
tree: 'testTreeApi',
page: 'testPageApi',
delete: 'testDeleteApi',
tree: 'testTreeApi...',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
YoTreeLayout,
AddForm,
EditForm,
FormBody,
},
data() {
return {
...api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
},
};
},
@@ -75,7 +104,7 @@ export default {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -102,7 +131,7 @@ export default {
* 选择树节点事件
*/
onSelect([id]) {
/* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
this.query = {
pid: id,
};
@@ -163,10 +192,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -187,7 +218,12 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record, this.query['pid']);
this.$refs[formName].onOpen({
record,
pid: this.query.pid,
/* 按需添加其他参数 */
/* ... */
});
},
/**