<template> <a-drawer :title="title" :width="width" placement="right" :closable="false" @close="close" destroyOnClose :visible="visible"> <customer-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></customer-form> <div class="drawer-footer"> <a-button @click="handleCancel" style="margin-bottom: 0;">{{$t('button.close')}}</a-button> <a-button v-if="!disableSubmit" @click="handleOk" type="primary" style="margin-bottom: 0;">{{$t('button.submit')}}</a-button> </div> </a-drawer> </template> <script> import CustomerForm from './CustomerForm' export default { name: 'CustomerModal', components: { CustomerForm }, data() { return { title: this.$t('system.options'), width: 800, visible: false, disableSubmit: false } }, methods: { add() { this.visible = true this.$nextTick(() => { this.$refs.realForm.add(); }) }, edit(record) { this.visible = true this.$nextTick(() => { this.$refs.realForm.edit(record); }); }, close() { this.$emit('close'); this.visible = false; }, submitCallback() { this.$emit('ok'); this.visible = false; }, handleOk() { this.$refs.realForm.submitForm(); }, handleCancel() { this.close() } } } </script> <style lang="less" scoped> /** Button按钮间距 */ .ant-btn { margin-left: 30px; margin-bottom: 30px; float: right; } .drawer-footer { position: absolute; bottom: -8px; width: 100%; border-top: 1px solid #e8e8e8; padding: 10px 16px; text-align: right; left: 0; background: #fff; border-radius: 0 0 2px 2px; } </style>