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

Revert "update 构成表单页的种子"

Browse Source 
This reverts commit c74448b1fc.
This commit is contained in:
自带大佬气场
2021-05-12 23:20:00 +08:00
parent c74448b1fc
commit 43a3184bba
32 changed files with 980 additions and 1475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
Web/public/doc-code/seed/form-page/only-form/index.vue
View File

@@ -1,105 +0,0 @@
<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
View File

@@ -1,130 +0,0 @@
<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
View File

@@ -1,73 +0,0 @@
<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
View File

@@ -1,90 +0,0 @@
<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>

0
Web/public/doc-code/seed/query-form/form.vue → Web/public/doc-code/seed/form.vue
View File

0
Web/public/doc-code/seed/query-form/query.vue → Web/public/doc-code/seed/query.vue
View File

0
Web/public/doc-code/seed/query-form/treeLayout.vue → Web/public/doc-code/seed/treeLayout.vue
View File