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

update 更新种子文件

Browse Source
This commit is contained in:
自带大佬气场
2021-06-03 17:52:45 +08:00
parent f919511ebd
commit 2c712ddd04
4 changed files with 128 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<template> <template>
<!-- <!--
整页表单的外框架 整页表单的外框架
v 1.0 v 1.2
2021-05-12 2021-06-03
Lufthafen Lufthafen
--> -->
<div class="yo-form-page"> <div class="yo-form-page">
@@ -56,7 +56,7 @@
</span> </span>
<span> <span>
<a-button @click="closeContentWindow()">取消</a-button> <a-button @click="closeContentWindow()">取消</a-button>
<a-button @click="onSubmit" type="primary">保存</a-button> <a-button :loading="saving" @click="onSubmit" type="primary">保存</a-button>
</span> </span>
</div> </div>
</container> </container>
@@ -69,12 +69,14 @@ export default {
data() { data() {
return { return {
saving: false,
parts: [ parts: [
/** /**
* { {
* title: '标题', title: '标题',
* component: () => import('...'), component: () => import('...'),
* } }
*/ */
], ],
}; };
@@ -91,14 +93,16 @@ export default {
...formData, ...formData,
...data, ...data,
}; };
} catch { } catch (e) {
return; return;
} }
} }
this.saving = true;
/** /**
* 对表单提交进行处理 * 对表单提交进行处理
*/ */
this.saving = false;
}, },
}, },
}; };

45
Web/public/doc-code/seed/form-page/only-form/part.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<!-- <!--
整页表单的分片表单 整页表单的分片表单
v 1.0 v 1.2
2021-05-12 2021-06-03
Lufthafen Lufthafen
--> -->
<a-form-model <a-form-model
@@ -26,7 +26,7 @@ const defaultForm = {
}; };
export default { export default {
props: ['param'], props: ['param', 'frame'],
data() { data() {
return { return {
@@ -34,7 +34,9 @@ export default {
wrapperCol: { flex: '1' }, wrapperCol: { flex: '1' },
/** 表单数据 */ /** 表单数据 */
form: {}, form: {
...defaultForm,
},
/** 验证格式 */ /** 验证格式 */
rules: { rules: {
/* ... */ /* ... */
@@ -48,8 +50,7 @@ export default {
}; };
}, },
async created() { created() {
await this.onInit();
this.onFillData(); this.onFillData();
}, },
@@ -58,16 +59,19 @@ export default {
* 必要的方法 * 必要的方法
* 在打开编辑页时允许填充数据 * 在打开编辑页时允许填充数据
*/ */
onFillData() { async onFillData() {
/** 将默认数据覆盖到form */ this.loading = true;
const record = this.param && this.param.record; {
const record = this.param && this.param.record;
const form = this.$_.cloneDeep(defaultForm);
this.form = this.$_.cloneDeep({ if (record) {
...defaultForm, this.$_.giveDeep(form, record);
...record, }
/** 在此处添加其他默认数据转换 */
/* ... */ this.form = form;
}); }
this.loading = false;
}, },
/** /**
@@ -112,17 +116,6 @@ export default {
}, 300); }, 300);
}, },
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */ /** 当前组件的其他方法 */
/* ... */ /* ... */
}, },

136
Web/public/doc-code/seed/form-page/tab-form/tab.vue
View File

@@ -1,56 +1,69 @@
<template> <template>
<!-- <!--
整页表单的页签外框架 整页表单的页签外框架
v 1.1 v 1.2
2021-05-17 2021-06-03
Lufthafen Lufthafen
--> -->
<div class="yo-form-page"> <div class="yo-form-page">
<!-- 底部工具栏(需放在前面) --> <a-spin :spinning="loading" class="w-100-p h-100-p" tip="表单加载中..." v-if="loading">
<div class="yo-form-page--bar yo-form-page--bar--with-tab"> <a-icon slot="indicator" spin type="loading" />
<container> <div title="用于撑高spin"></div>
<div class="yo-form-page--bar-inner"> </a-spin>
<span>
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
<!-- ... -->
</span>
<span>
<a-button @click="closeContentWindow()">取消</a-button>
<a-button @click="onSubmit" type="primary">保存</a-button>
</span>
</div>
</container>
</div>
<!-- 表单主体 --> <div class="yo-form-page-layout" v-else>
<!-- <!-- 底部工具栏(需放在前面) -->
<div class="yo-form-page--bar yo-form-page--bar--with-tab">
<container>
<div class="yo-form-page--bar-inner">
<span>
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
<!-- ... -->
</span>
<span>
<a-button @click="closeContentWindow()">取消</a-button>
<a-button :loading="saving" @click="onSubmit" type="primary">保存</a-button>
</span>
</div>
</container>
</div>
<!-- 头部,默认不使用 -->
<!-- <div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
<container>
</container>
</div>-->
<!-- 表单主体 -->
<!--
挂载了一个content到tab后面 挂载了一个content到tab后面
如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿 如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
现在只使用其tab卡片,重写了一个tab内容 现在只使用其tab卡片,重写了一个tab内容
--> -->
<div class="yo-tab-external-mount"> <div class="yo-tab-external-mount">
<a-tabs @change="onTabChange" type="card"> <a-tabs @change="onTabChange" type="card">
<template v-for="(tab, index) in tabs"> <template v-for="(tab, index) in tabs">
<a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane> <a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane>
</template> </template>
</a-tabs> </a-tabs>
<div class="yo-tab-external-mount-content"> <div class="yo-tab-external-mount-content">
<template v-for="(tab, index) in tabs"> <template v-for="(tab, index) in tabs">
<div <div
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'" :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
:key="index" :key="index"
class="yo-tab-external-tabpane" class="yo-tab-external-tabpane"
> >
<component <component
:frame="self" :frame="self"
:id="id" :id="id"
:is="tab.component" :is="tab.component"
:param="param" :param="param"
ref="forms" ref="forms"
v-if="tab.component" v-if="tab.component"
/> />
</div> </div>
</template> </template>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -61,18 +74,31 @@ export default {
data() { data() {
return { return {
saving: false,
loading: true,
tabs: [ tabs: [
/** /**
* { {
* title: '标题', title: '标题',
* component: () => import('...'), component: () => import('...'),
* active: false, active: false,
* } }
*/ */
], ],
}; };
}, },
computed: {
self() {
return this;
},
},
created() {
this.loading = false;
},
methods: { methods: {
async onSubmit() { async onSubmit() {
let formData = {}, let formData = {},
@@ -85,7 +111,7 @@ export default {
...formData, ...formData,
...data, ...data,
}; };
} catch { } catch (e) {
flag = false; flag = false;
} }
} }
@@ -94,9 +120,11 @@ export default {
return; return;
} }
this.saving = true;
/** /**
* 对表单提交进行处理 * 对表单提交进行处理
*/ */
this.saving = false;
}, },
onTabChange(key) { onTabChange(key) {
@@ -104,6 +132,16 @@ export default {
p.active = i === key; p.active = i === key;
}); });
}, },
/**
* 控制标签页的显隐性
*/
onTogglePane(show, name) {
const pane = this.tabs.find((p) => p.name === name);
if (pane) {
pane.show = show;
}
},
}, },
}; };
</script> </script>

19
Web/public/doc-code/seed/form-page/tab-form/tabPane.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<!-- <!--
整页表单的页签内框架,整合分片表单 整页表单的页签内框架,整合分片表单
v 1.0 v 1.2
2021-05-12 2021-06-03
Lufthafen Lufthafen
--> -->
<container> <container>
@@ -15,6 +15,7 @@
<section :id="`form-${index}-${id}`" :key="index"> <section :id="`form-${index}-${id}`" :key="index">
<h5 v-if="part.title">{{part.title}}</h5> <h5 v-if="part.title">{{part.title}}</h5>
<component <component
:frame="frame"
:is="part.component" :is="part.component"
:key="index" :key="index"
:param="param" :param="param"
@@ -47,16 +48,16 @@
</template> </template>
<script> <script>
export default { export default {
props: ['id', 'param'], props: ['id', 'param', 'frame'],
data() { data() {
return { return {
parts: [ parts: [
/** /**
* { {
* title: '标题', title: '标题',
* component: () => import('...'), component: () => import('...'),
* } }
*/ */
], ],
}; };
@@ -77,8 +78,8 @@ export default {
...formData, ...formData,
...data, ...data,
}; };
} catch { } catch (e) {
reject(); reject(e);
return; return;
} }
} }