update 更新种子文件
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的外框架
|
||||
v 1.0
|
||||
2021-05-12
|
||||
v 1.2
|
||||
2021-06-03
|
||||
Lufthafen
|
||||
-->
|
||||
<div class="yo-form-page">
|
||||
@@ -56,7 +56,7 @@
|
||||
</span>
|
||||
<span>
|
||||
<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>
|
||||
</div>
|
||||
</container>
|
||||
@@ -69,12 +69,14 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
{
|
||||
title: '标题',
|
||||
component: () => import('...'),
|
||||
}
|
||||
*/
|
||||
],
|
||||
};
|
||||
@@ -91,14 +93,16 @@ export default {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
/**
|
||||
* 对表单提交进行处理
|
||||
*/
|
||||
this.saving = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
v 1.2
|
||||
2021-06-03
|
||||
Lufthafen
|
||||
-->
|
||||
<a-form-model
|
||||
@@ -26,7 +26,7 @@ const defaultForm = {
|
||||
};
|
||||
|
||||
export default {
|
||||
props: ['param'],
|
||||
props: ['param', 'frame'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
@@ -34,7 +34,9 @@ export default {
|
||||
wrapperCol: { flex: '1' },
|
||||
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
form: {
|
||||
...defaultForm,
|
||||
},
|
||||
/** 验证格式 */
|
||||
rules: {
|
||||
/* ... */
|
||||
@@ -48,8 +50,7 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.onInit();
|
||||
created() {
|
||||
this.onFillData();
|
||||
},
|
||||
|
||||
@@ -58,16 +59,19 @@ export default {
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData() {
|
||||
/** 将默认数据覆盖到form */
|
||||
const record = this.param && this.param.record;
|
||||
async onFillData() {
|
||||
this.loading = true;
|
||||
{
|
||||
const record = this.param && this.param.record;
|
||||
const form = this.$_.cloneDeep(defaultForm);
|
||||
|
||||
this.form = this.$_.cloneDeep({
|
||||
...defaultForm,
|
||||
...record,
|
||||
/** 在此处添加其他默认数据转换 */
|
||||
/* ... */
|
||||
});
|
||||
if (record) {
|
||||
this.$_.giveDeep(form, record);
|
||||
}
|
||||
|
||||
this.form = form;
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -112,17 +116,6 @@ export default {
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/* ... */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/* ... */
|
||||
},
|
||||
|
||||
@@ -1,56 +1,69 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签外框架
|
||||
v 1.1
|
||||
2021-05-17
|
||||
v 1.2
|
||||
2021-06-03
|
||||
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>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
<a-button @click="onSubmit" type="primary">保存</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
<a-spin :spinning="loading" class="w-100-p h-100-p" tip="表单加载中..." v-if="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<div title="用于撑高spin"></div>
|
||||
</a-spin>
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<!--
|
||||
<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后面
|
||||
如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
|
||||
现在只使用其tab卡片,重写了一个tab内容
|
||||
-->
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onTabChange" type="card">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane>
|
||||
</template>
|
||||
</a-tabs>
|
||||
<div class="yo-tab-external-mount-content">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<div
|
||||
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
|
||||
:key="index"
|
||||
class="yo-tab-external-tabpane"
|
||||
>
|
||||
<component
|
||||
:frame="self"
|
||||
:id="id"
|
||||
:is="tab.component"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="tab.component"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
-->
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onTabChange" type="card">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title"></a-tab-pane>
|
||||
</template>
|
||||
</a-tabs>
|
||||
<div class="yo-tab-external-mount-content">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<div
|
||||
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
|
||||
:key="index"
|
||||
class="yo-tab-external-tabpane"
|
||||
>
|
||||
<component
|
||||
:frame="self"
|
||||
:id="id"
|
||||
:is="tab.component"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="tab.component"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,18 +74,31 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
saving: false,
|
||||
loading: true,
|
||||
|
||||
tabs: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* active: false,
|
||||
* }
|
||||
{
|
||||
title: '标题',
|
||||
component: () => import('...'),
|
||||
active: false,
|
||||
}
|
||||
*/
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
self() {
|
||||
return this;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onSubmit() {
|
||||
let formData = {},
|
||||
@@ -85,7 +111,7 @@ export default {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
} catch (e) {
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
@@ -94,9 +120,11 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
/**
|
||||
* 对表单提交进行处理
|
||||
*/
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
onTabChange(key) {
|
||||
@@ -104,6 +132,16 @@ export default {
|
||||
p.active = i === key;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 控制标签页的显隐性
|
||||
*/
|
||||
onTogglePane(show, name) {
|
||||
const pane = this.tabs.find((p) => p.name === name);
|
||||
if (pane) {
|
||||
pane.show = show;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!--
|
||||
整页表单的页签内框架,整合分片表单
|
||||
v 1.0
|
||||
2021-05-12
|
||||
v 1.2
|
||||
2021-06-03
|
||||
Lufthafen
|
||||
-->
|
||||
<container>
|
||||
@@ -15,6 +15,7 @@
|
||||
<section :id="`form-${index}-${id}`" :key="index">
|
||||
<h5 v-if="part.title">{{part.title}}</h5>
|
||||
<component
|
||||
:frame="frame"
|
||||
:is="part.component"
|
||||
:key="index"
|
||||
:param="param"
|
||||
@@ -47,16 +48,16 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['id', 'param'],
|
||||
props: ['id', 'param', 'frame'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
parts: [
|
||||
/**
|
||||
* {
|
||||
* title: '标题',
|
||||
* component: () => import('...'),
|
||||
* }
|
||||
{
|
||||
title: '标题',
|
||||
component: () => import('...'),
|
||||
}
|
||||
*/
|
||||
],
|
||||
};
|
||||
@@ -77,8 +78,8 @@ export default {
|
||||
...formData,
|
||||
...data,
|
||||
};
|
||||
} catch {
|
||||
reject();
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user