102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
|
<cn>
|
|||
|
|
#### 弹出层中的新建表单
|
|||
|
|
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
|
|||
|
|
</cn>
|
|||
|
|
|
|||
|
|
<us>
|
|||
|
|
#### Form in Modal to Create
|
|||
|
|
When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
|
|||
|
|
</us>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<a-button type="primary" @click="showModal">
|
|||
|
|
New Collection
|
|||
|
|
</a-button>
|
|||
|
|
<collection-create-form
|
|||
|
|
ref="collectionForm"
|
|||
|
|
:visible="visible"
|
|||
|
|
@cancel="handleCancel"
|
|||
|
|
@create="handleCreate"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const CollectionCreateForm = {
|
|||
|
|
props: ['visible'],
|
|||
|
|
beforeCreate() {
|
|||
|
|
this.form = this.$form.createForm(this, { name: 'form_in_modal' });
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<a-modal
|
|||
|
|
:visible="visible"
|
|||
|
|
title='Create a new collection'
|
|||
|
|
okText='Create'
|
|||
|
|
@cancel="() => { $emit('cancel') }"
|
|||
|
|
@ok="() => { $emit('create') }"
|
|||
|
|
>
|
|||
|
|
<a-form layout='vertical' :form="form">
|
|||
|
|
<a-form-item label='Title'>
|
|||
|
|
<a-input
|
|||
|
|
v-decorator="[
|
|||
|
|
'title',
|
|||
|
|
{
|
|||
|
|
rules: [{ required: true, message: 'Please input the title of collection!' }],
|
|||
|
|
}
|
|||
|
|
]"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label='Description'>
|
|||
|
|
<a-input
|
|||
|
|
type='textarea'
|
|||
|
|
v-decorator="['description']"
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item class='collection-create-form_last-form-item'>
|
|||
|
|
<a-radio-group
|
|||
|
|
v-decorator="[
|
|||
|
|
'modifier',
|
|||
|
|
{
|
|||
|
|
initialValue: 'private',
|
|||
|
|
}
|
|||
|
|
]"
|
|||
|
|
>
|
|||
|
|
<a-radio value='public'>Public</a-radio>
|
|||
|
|
<a-radio value='private'>Private</a-radio>
|
|||
|
|
</a-radio-group>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-modal>
|
|||
|
|
`,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { CollectionCreateForm },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
showModal() {
|
|||
|
|
this.visible = true;
|
|||
|
|
},
|
|||
|
|
handleCancel() {
|
|||
|
|
this.visible = false;
|
|||
|
|
},
|
|||
|
|
handleCreate() {
|
|||
|
|
const form = this.$refs.collectionForm.form;
|
|||
|
|
form.validateFields((err, values) => {
|
|||
|
|
if (err) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
console.log('Received values of form: ', values);
|
|||
|
|
form.resetFields();
|
|||
|
|
this.visible = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|