update 构成表单页的种子
This commit is contained in:
105
Web/public/doc-code/seed/form-page/only-form/index.vue
Normal file
105
Web/public/doc-code/seed/form-page/only-form/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的外框架
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<div class="yo-form-page">
|
||||
<!-- 表单主体 -->
|
||||
<!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
|
||||
<container>
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col flex="1">
|
||||
<br />
|
||||
<a-card class="yo-form-page--body">
|
||||
<template v-for="(part, index) in parts">
|
||||
<section :id="`form-${index}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
:is="part.component"
|
||||
:key="index"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="part.component"
|
||||
/>
|
||||
</section>
|
||||
<a-divider :key="`divider-${index}`" v-if="index < parts.length - 1" />
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col flex="240px">
|
||||
<a-anchor
|
||||
:get-container="()=> $el.parentNode"
|
||||
:offset-top="24"
|
||||
:wrapper-style="{ backgroundColor: 'transparent' }"
|
||||
@click.prevent
|
||||
>
|
||||
<a-anchor-link
|
||||
:href="`#form-${index}`"
|
||||
:key="index"
|
||||
:title="part.title"
|
||||
v-for="(part, index) in parts"
|
||||
/>
|
||||
</a-anchor>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="yo-form-page--bar">
|
||||
<container>
|
||||
<div class="yo-form-page--bar-inner">
|
||||
<span>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
<a-button @click="onSubmit" type="primary">保存</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
*/
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
let formData = {};
|
||||
for (let i = 0; i < this.$refs.forms.length; i++) {
|
||||
const form = this.$refs.forms[i];
|
||||
try {
|
||||
const data = await form.onGetData();
|
||||
formData = {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对表单提交进行处理
|
||||
*/
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
130
Web/public/doc-code/seed/form-page/only-form/part.vue
Normal file
130
Web/public/doc-code/seed/form-page/only-form/part.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
:label-col="labelCol"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:wrapper-col="wrapperCol"
|
||||
ref="form"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<!-- 表单控件 -->
|
||||
<!-- ... -->
|
||||
</a-spin>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
/* 表单内容默认值 */
|
||||
const defaultForm = {
|
||||
/* ... */
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/* ... */
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/* ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/* ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
73
Web/public/doc-code/seed/form-page/tab-form/tab.vue
Normal file
73
Web/public/doc-code/seed/form-page/tab-form/tab.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签外框架
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<div class="yo-form-page">
|
||||
<!-- 底部工具栏(需放在前面) -->
|
||||
<div class="yo-form-page--bar yo-form-page--bar--with-tab">
|
||||
<container>
|
||||
<div class="yo-form-page--bar-inner">
|
||||
<span>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
<a-input />
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
<a-button @click="onSubmit" type="primary">保存</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<a-tabs type="card">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-for="(tab, index) in tabs">
|
||||
<component :is="tab.component" :param="param" ref="forms" v-if="tab.component" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
*/
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
let formData = {};
|
||||
for (let i = 0; i < this.$refs.forms.length; i++) {
|
||||
const form = this.$refs.forms[i];
|
||||
try {
|
||||
const data = await form.onGetData();
|
||||
formData = {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对表单提交进行处理
|
||||
*/
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
90
Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
Normal file
90
Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签内框架,整合分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
<!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col flex="1">
|
||||
<br />
|
||||
<a-card class="yo-form-page--body">
|
||||
<template v-for="(part, index) in parts">
|
||||
<section :id="`form-${index}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
:is="part.component"
|
||||
:key="index"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="part.component"
|
||||
/>
|
||||
</section>
|
||||
<a-divider :key="`divider-${index}`" v-if="index < parts.length - 1" />
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col flex="240px">
|
||||
<a-anchor
|
||||
:get-container="()=> $el.parentNode"
|
||||
:offset-top="24"
|
||||
:target-offset="48"
|
||||
:wrapper-style="{ backgroundColor: 'transparent' }"
|
||||
@click.prevent
|
||||
>
|
||||
<a-anchor-link
|
||||
:href="`#form-${index}`"
|
||||
:key="index"
|
||||
:title="part.title"
|
||||
v-for="(part, index) in parts"
|
||||
/>
|
||||
</a-anchor>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['param'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
*/
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 循环子组件中的onGetData
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let formData = {};
|
||||
for (let i = 0; i < this.$refs.forms.length; i++) {
|
||||
const form = this.$refs.forms[i];
|
||||
try {
|
||||
const data = await form.onGetData();
|
||||
formData = {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
}
|
||||
resolve(formData);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user