fanfan
9 months ago
parent
e515715a05
commit
317945a636
@ -0,0 +1,115 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="560" |
||||
:visible="visible" |
||||
:isLoading="isLoading" |
||||
:confirmLoading="isLoading" |
||||
:maskClosable="false" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="isLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item |
||||
label="京东链接" |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
> |
||||
<a-textarea |
||||
placeholder="请输入京东链接" |
||||
:auto-size="{ minRows: 2, maxRows: 5 }" |
||||
v-decorator="['jd_link', { rules: [{ required: true, message: '请输入京东链接' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import _ from 'lodash' |
||||
import * as Api from '@/api/order/event' |
||||
import { Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
Ueditor, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 对话框标题 |
||||
title: '商家备注', |
||||
// 标签布局属性 |
||||
labelCol: { span: 6 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 14 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
isLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {}, |
||||
} |
||||
}, |
||||
created() {}, |
||||
methods: { |
||||
// 显示对话框 |
||||
show(record) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
|
||||
// 设置默认值 |
||||
setFieldsValue() { |
||||
const { |
||||
record, |
||||
$nextTick, |
||||
form: { setFieldsValue }, |
||||
} = this |
||||
$nextTick(() => { |
||||
setFieldsValue({ jd_link: record.jd_link }) |
||||
}) |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
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.isLoading = true |
||||
Api.updateRemark({ orderId: this.record.order_id, form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue