Skip to content

A
ant-design-pro-vue
Commit 27545c49 by Sendya
Options

fix: advancedForm

parent ff39204c
Showing with 214 additions and 212 deletions
src/views/form/advancedForm/RepositoryForm.vue
<template> <template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form"> <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
<a-row class="form-row"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="仓库名" label="仓库名"
fieldDecoratorId="repository.name" fieldDecoratorId="repository.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
> >
<a-input placeholder="请输入仓库名称" /> <a-input placeholder="请输入仓库名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="仓库域名" label="仓库域名"
fieldDecoratorId="repository.domain" fieldDecoratorId="repository.domain"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
> >
<a-input addonBefore="http://" addonAfter=".github.io" placeholder="请输入"/> <a-input addonBefore="http://" addonAfter=".com" placeholder="请输入"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="仓库管理员" label="仓库管理员"
fieldDecoratorId="repository.manager" fieldDecoratorId="repository.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
> >
<a-select placeholder="请选择管理员"> <a-select placeholder="请选择管理员">
<a-select-option value="王同学">王同学</a-select-option> <a-select-option value="王同学">王同学</a-select-option>
<a-select-option value="李同学">李同学</a-select-option> <a-select-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option> <a-select-option value="黄同学">黄同学</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row class="form-row"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="审批人" label="审批人"
fieldDecoratorId="repository.auditor" fieldDecoratorId="repository.auditor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
> >
<a-select placeholder="请选择审批员"> <a-select placeholder="请选择审批员">
<a-select-option value="王晓丽">王晓丽</a-select-option> <a-select-option value="王晓丽">王晓丽</a-select-option>
<a-select-option value="李军">李军</a-select-option> <a-select-option value="李军">李军</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="生效日期" label="生效日期"
fieldDecoratorId="repository.effectiveDate" fieldDecoratorId="repository.effectiveDate"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
> >
<a-range-picker style="width: 100%" /> <a-range-picker style="width: 100%" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="仓库类型" label="仓库类型"
fieldDecoratorId="repository.type" fieldDecoratorId="repository.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
> >
<a-select placeholder="请选择仓库类型"> <a-select placeholder="请选择仓库类型">
<a-select-option value="公开">公开</a-select-option> <a-select-option value="公开">公开</a-select-option>
<a-select-option value="私密">私密</a-select-option> <a-select-option value="私密">私密</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item v-if="showSubmit"> <a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button> <a-button htmlType="submit" >Submit</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</template> </template>
<script> <script>
export default { export default {
name: "RepositoryForm", name: "RepositoryForm",
props: { props: {
showSubmit: { showSubmit: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
methods: { methods: {
handleSubmit (e) { handleSubmit (e) {
e.preventDefault() e.preventDefault()
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
this.$notification['error']({ this.$notification['error']({
message: 'Received values of form:', message: 'Received values of form:',
description: values description: values
}) })
} }
}) })
}, },
validate (rule, value, callback) { validate (rule, value, callback) {
const regex = /^user-(.*)$/ const regex = /^user-(.*)$/
if (!regex.test(value)) { if (!regex.test(value)) {
callback('需要以 user- 开头') callback('需要以 user- 开头')
} }
callback() callback()
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
src/views/form/advancedForm/TaskForm.vue
<template> <template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form"> <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
<a-row class="form-row"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="任务名" label="任务名"
fieldDecoratorId="task.name" fieldDecoratorId="task.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
> >
<a-input placeholder="请输入任务名称" /> <a-input placeholder="请输入任务名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="任务描述" label="任务描述"
fieldDecoratorId="task.description" fieldDecoratorId="task.description"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
> >
<a-input placeholder="请输入任务描述"/> <a-input placeholder="请输入任务描述"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="执行人" label="执行人"
fieldDecoratorId="task.executor" fieldDecoratorId="task.executor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
> >
<a-select placeholder="请选择执行人"> <a-select placeholder="请选择执行人">
<a-select-option value="黄丽丽">黄丽丽</a-select-option> <a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option> <a-select-option value="李大刀">李大刀</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row class="form-row"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="责任人" label="责任人"
fieldDecoratorId="task.manager" fieldDecoratorId="task.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
> >
<a-select placeholder="请选择责任人"> <a-select placeholder="请选择责任人">
<a-select-option value="王伟">王伟</a-select-option> <a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option> <a-select-option value="李红军">李红军</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="提醒时间" label="提醒时间"
fieldDecoratorId="task.time" fieldDecoratorId="task.time"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
> >
<a-time-picker style="width: 100%" /> <a-time-picker style="width: 100%" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="任务类型" label="任务类型"
fieldDecoratorId="task.type" fieldDecoratorId="task.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
> >
<a-select placeholder="请选择任务类型"> <a-select placeholder="请选择任务类型">
<a-select-option value="定时执行">定时执行</a-select-option> <a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option> <a-select-option value="周期执行">周期执行</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item v-if="showSubmit"> <a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button> <a-button htmlType="submit" >Submit</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</template> </template>
<script> <script>
export default { export default {
name: "TaskForm", name: "TaskForm",
props: { props: {
showSubmit: { showSubmit: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
methods: { methods: {
handleSubmit (e) { handleSubmit (e) {
e.preventDefault() e.preventDefault()
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
this.$notification['error']({ this.$notification['error']({
message: 'Received values of form:', message: 'Received values of form:',
description: values description: values
}) })
} }
}) })
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment