128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<a-modal
|
|
class="noborder"
|
|
:title="title"
|
|
:width="520"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
:maskClosable="false"
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
>
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<template>
|
|
<a-form-item label="兑换卡数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
18
|
|
</a-form-item>
|
|
<a-form-item label="兑换卡金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-select v-decorator="['amount', { initialValue: -1 }]">
|
|
<a-select-option :value="-1">全部</a-select-option>
|
|
<a-select-option
|
|
v-for="(item, index) in moneyList"
|
|
:key="index"
|
|
:value="item.value"
|
|
>{{ item.name }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</template>
|
|
</a-form>
|
|
</a-spin>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
// import pick from 'lodash.pick'
|
|
import * as Api from '@/api/card'
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
props: {
|
|
// 金额列表
|
|
moneyList: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
// 对话框标题
|
|
title: '创建实体兑换卡',
|
|
// 标签布局属性
|
|
labelCol: { span: 7 },
|
|
// 输入框布局属性
|
|
wrapperCol: { span: 13 },
|
|
// modal(对话框)是否可见
|
|
visible: false,
|
|
// modal(对话框)确定按钮 loading
|
|
confirmLoading: false,
|
|
// 当前表单元素
|
|
form: this.$form.createForm(this),
|
|
// 当前记录
|
|
record: {}
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 显示对话框
|
|
handle () {
|
|
// 显示窗口
|
|
this.visible = true
|
|
},
|
|
|
|
/**
|
|
* 确认按钮
|
|
*/
|
|
handleSubmit (e) {
|
|
e.preventDefault()
|
|
// 表单验证
|
|
const { form: { validateFields } } = this
|
|
validateFields((errors, values) => {
|
|
// 提交到后端api
|
|
!errors && this.onFormSubmit(values)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 关闭对话框事件
|
|
*/
|
|
handleCancel () {
|
|
this.visible = false
|
|
this.form.resetFields()
|
|
},
|
|
|
|
/**
|
|
* 提交到后端api
|
|
*/
|
|
onFormSubmit (values) {
|
|
this.confirmLoading = true
|
|
Api.addCards({ form: values })
|
|
.then((result) => {
|
|
// 显示成功
|
|
this.$message.success(result.message, 1.5)
|
|
// 关闭对话框事件
|
|
this.handleCancel()
|
|
// 通知父端组件提交完成了
|
|
this.$emit('handleSubmit', values)
|
|
})
|
|
.finally(() => {
|
|
this.confirmLoading = false
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.ant-modal-body {
|
|
padding-top: 0 !important;
|
|
}
|
|
.ant-form-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
.ant-tabs-nav .ant-tabs-tab {
|
|
padding: 10px 16px;
|
|
}
|
|
</style>
|