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/src/pages/system/dict/addForm.vue
View File

@@ -1,78 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="新增字典类型"
>
<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
/** !!此处必须修改调用的接口方法 */
.sysDictTypeAdd(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/src/pages/system/dict/dictdata/addForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="新增字典数据"
>
<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(record, typeId) {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
this.formBody.onFillData(record, typeId);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictDataAdd(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/src/pages/system/dict/dictdata/editForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="编辑字典数据"
>
<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
/** !!此处必须修改调用的接口方法 */
.sysDictDataEdit(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>

30
Web/src/pages/system/dict/dictdata/form.vue
View File

@@ -21,14 +21,16 @@
</a-form-model>
</template>
<script>
const defaultForm = {
typeId: '',
sort: 100,
};
export default {
data() {
return {
/** 表单数据 */
form: {
typeId: '',
sort: 100,
},
form: {},
/** 验证格式 */
rules: {
value: [{ required: true, message: '请输入字典值' }],
@@ -48,17 +50,15 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record, typeId) {
if (typeId) {
this.form.typeId = typeId;
} else {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
});
}
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
typeId: params.typeId,
});
},
/**

21
Web/src/pages/system/dict/dictdata/index.vue
View File

@@ -8,6 +8,7 @@
ref="table"
>
<Auth auth="sysDictData:page" slot="query">
<!-- 此处添加查询表单控件 -->
<a-form-model-item label="文本">
<a-input placeholder="请输入文本" v-model="query.value" />
</a-form-model-item>
@@ -36,18 +37,21 @@
</span>
</yo-table>
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
<form-body />
</yo-modal-form>
</a-card>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
export default {
components: {
AddForm,
EditForm,
FormBody,
},
props: {
type: {
@@ -181,7 +185,10 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record, this.type.id);
this.$refs[formName].onOpen({
typeId: this.type.id,
record,
});
},
/**

79
Web/src/pages/system/dict/editForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="编辑字典类型"
>
<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
/** !!此处必须修改调用的接口方法 */
.sysDictTypeEdit(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>

4
Web/src/pages/system/dict/form.vue
View File

@@ -47,10 +47,10 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
});

20
Web/src/pages/system/dict/index.vue
View File

@@ -42,21 +42,25 @@
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import DictData from './dictdata';
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
export default {
components: {
DictData,
AddForm,
EditForm,
FormBody,
},
data() {
return {
@@ -191,7 +195,9 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
});
},
/**