<template>
|
<div>
|
<av-page-header title="高级表单">
|
<div slot="breadcrumb">
|
<a-breadcrumb>
|
<a-breadcrumb-item>
|
<a >首页</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>
|
<a >表单页</a>
|
</a-breadcrumb-item>
|
<a-breadcrumb-item>高级表单</a-breadcrumb-item>
|
</a-breadcrumb>
|
</div>
|
<div slot="content">
|
高级表单常见于一次性输入和提交大批量数据的场景。
|
</div>
|
</av-page-header>
|
<a-form layout="vertical" hideRequiredMark :autoFormCreate="handlerFormCreate">
|
<a-card title="仓库管理" class="card" :bordered="false">
|
<a-row :gutter="16">
|
<a-col :lg="6" :md="12" :sm="24">
|
<a-form-item label="仓库名"
|
fieldDecoratorId="name"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称' }]}"
|
>
|
<a-input placeholder="请输入仓库名称" />
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 6, offset: 2 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
|
<a-form-item label="仓库域名"
|
fieldDecoratorId="url"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择' }]}"
|
>
|
<a-input
|
:style="{ width: '100%' }"
|
addonBefore="http://"
|
addonAfter=".com"
|
placeholder="请输入"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
|
<a-form-item label="仓库管理员"
|
fieldDecoratorId="owner"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员' }]}"
|
>
|
<a-select placeholder="请选择管理员">
|
<a-select-option value="xiao">付晓晓</a-select-option>
|
<a-select-option value="mao">周毛毛</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16">
|
<a-col :lg="6" :md="12" :sm="24">
|
<a-form-item label='审批人'
|
fieldDecoratorId="approver"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员' }]}"
|
>
|
<a-select placeholder="请选择审批员">
|
<a-select-option value="xiao">付晓晓</a-select-option>
|
<a-select-option value="mao">周毛毛</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 6, offset: 2 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
|
<a-form-item label="生效日期"
|
fieldDecoratorId="dateRange"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期' }]}"
|
>
|
<a-range-picker :placeholder="['开始日期', '结束日期']" :style="{ width: '100%' }" />
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
|
<a-form-item label='仓库类型'
|
fieldDecoratorId="type"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型' }]}"
|
>
|
<a-select placeholder="请选择仓库类型">
|
<a-select-option value="private">私密</a-select-option>
|
<a-select-option value="public">公开</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-card>
|
<a-card title="任务管理" class="card" :bordered="false">
|
<a-row :gutter="16">
|
<a-col :lg="6" :md="12" :sm="24">
|
<a-form-item label="任务名"
|
fieldDecoratorId="name2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入' }]}"
|
>
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 6, offset: 2 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
|
<a-form-item label="任务描述"
|
fieldDecoratorId="url2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入' }]}"
|
>
|
<a-input placeholder="请输入" />
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
|
<a-form-item label="管理员"
|
fieldDecoratorId="owner2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员' }]}"
|
>
|
<a-select placeholder="请选择管理员">
|
<a-select-option value="xiao">付晓晓</a-select-option>
|
<a-select-option value="mao">周毛毛</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16">
|
<a-col :lg="6" :md="12" :sm="24">
|
<a-form-item label="审批员"
|
fieldDecoratorId="approver2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员' }]}"
|
>
|
<a-select placeholder="请选择审批员">
|
<a-select-option value="xiao">付晓晓</a-select-option>
|
<a-select-option value="mao">周毛毛</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 6, offset: 2 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
|
<a-form-item label="提醒时间"
|
fieldDecoratorId="dateRange2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入' }]}"
|
>
|
<a-time-picker
|
placeholder="提醒时间"
|
:style="{ width: '100%' }"
|
:getPopupContainer="trigger => trigger.parentNode"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
|
<a-form-item label="仓库类型"
|
fieldDecoratorId="type2"
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型' }]}"
|
>
|
<a-select placeholder="请选择仓库类型">
|
<a-select-option value="private">私密</a-select-option>
|
<a-select-option value="public">公开</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-card>
|
|
<a-card title="成员管理" :bordered="false">
|
<table-form :value="tableData"></table-form>
|
</a-card>
|
<av-footer-toolbar>
|
<div slot="children">
|
|
<span class="errorIcon" v-if="errorCount>0">
|
<a-popover title="表单校验信息"
|
overlayClassName="errorPopover"
|
trigger="click"
|
>
|
<template slot="content">
|
<li v-for="(item,index) in errors" :key="index" class="errorListItem" @click="scrollToField(item.key)">
|
<a-icon type="cross-circle-o" class="errorIcon" />
|
<div class="errorMessage">{{item.msg}}</div>
|
<div class="errorField">{{item.label}}</div>
|
</li>
|
</template>
|
|
<a-icon type="exclamation-circle" />
|
{{errorCount}}
|
</a-popover>
|
</span>
|
<a-button type="primary" slot="children"
|
@click="validate"
|
>
|
提交
|
</a-button>
|
</div>
|
</av-footer-toolbar>
|
</a-form>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.card {
|
margin-bottom: 24px;
|
}
|
|
.errorIcon {
|
cursor: pointer;
|
color: #f5222d;
|
margin-right: 24px;
|
i {
|
margin-right: 4px;
|
}
|
}
|
|
.errorListItem {
|
list-style: none;
|
border-bottom: 1px solid #e8e8e8;
|
padding: 8px 16px;
|
cursor: pointer;
|
transition: all 0.3s;
|
&:hover {
|
background: rgba(24, 144, 255, 0.1);
|
}
|
&:last-child {
|
border: 0;
|
}
|
.errorIcon {
|
color: #f5222d;
|
float: left;
|
margin-top: 4px;
|
margin-right: 12px;
|
padding-bottom: 22px;
|
}
|
.errorField {
|
font-size: 12px;
|
color: rgba(0, 0, 0, 0.45); //@text-color-secondary;
|
margin-top: 2px;
|
}
|
}
|
</style>
|
|
<style lang="less">
|
.errorPopover {
|
.ant-popover-inner-content {
|
padding: 0;
|
max-height: 290px;
|
overflow: auto;
|
min-width: 256px;
|
}
|
}
|
</style>
|
|
<script lang="ts">
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
import { State, Mutation, namespace } from 'vuex-class';
|
|
import * as _ from 'lodash';
|
|
import TableForm from './components/TableForm.vue';
|
|
const fieldLabels: any = {
|
name: '仓库名',
|
url: '仓库域名',
|
owner: '仓库管理员',
|
approver: '审批人',
|
dateRange: '生效日期',
|
type: '仓库类型',
|
name2: '任务名',
|
url2: '任务描述',
|
owner2: '执行人',
|
approver2: '责任人',
|
dateRange2: '生效日期',
|
type2: '任务类型',
|
};
|
|
@Component({
|
components: {
|
TableForm,
|
},
|
})
|
export default class AdvancedForm extends Vue {
|
private tableData: any[] = [
|
{
|
key: '1',
|
workId: '00001',
|
name: 'John Brown',
|
department: 'New York No. 1 Lake Park',
|
},
|
{
|
key: '2',
|
workId: '00002',
|
name: 'Jim Green',
|
department: 'London No. 1 Lake Park',
|
},
|
{
|
key: '3',
|
workId: '00003',
|
name: 'Joe Black',
|
department: 'Sidney No. 1 Lake Park',
|
},
|
];
|
|
private form: any = null;
|
|
private errorCount: number = 0;
|
private errors: any[] = [];
|
|
constructor() {
|
super();
|
}
|
|
private handlerFormCreate(form: any) {
|
this.form = form;
|
}
|
|
private validate(e: any) {
|
e.preventDefault();
|
|
this.form.validateFieldsAndScroll((err: any, values: any) => {
|
if (err) {
|
this.formError();
|
}
|
});
|
}
|
|
private formError() {
|
if (this.form == null) {
|
return;
|
}
|
const errors = this.form.getFieldsError();
|
this.errors = Object.keys(errors)
|
.map((key: any) => {
|
if (!errors[key]) {
|
return;
|
}
|
const message = errors[key][0];
|
const label = fieldLabels[key];
|
return {
|
[key]: key,
|
msg: message,
|
[label]: label,
|
};
|
})
|
.filter((item: any) => item != null);
|
|
const errorCount = Object.keys(errors).filter((key: any) => errors[key])
|
.length;
|
this.errorCount = errorCount;
|
}
|
|
private scrollToField(fieldKey: any) {
|
const labelNode = document.querySelector(`label[for='${fieldKey}']`);
|
if (labelNode) {
|
labelNode.scrollIntoView(true);
|
}
|
}
|
}
|
</script>
|
