master
fanfan
4 months ago
parent
39e416a9e7
commit
321b1fc341
@ -0,0 +1,93 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="560" |
||||
:visible="visible" |
||||
:isLoading="isLoading" |
||||
:confirmLoading="isLoading" |
||||
:maskClosable="false" |
||||
@cancel="handleCancel" |
||||
:footer="null" |
||||
> |
||||
<a-spin :spinning="isLoading" style="padding-bottom: 30px"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="备注内容" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-textarea |
||||
v-decorator="['remark', { rules: [{ required: true, message: '备注内容不能为空' }] }]" |
||||
:autoSize="{ minRows: 4, maxRows: 6 }" |
||||
autocomplete="off" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
<a-form :form="form"> |
||||
<a-form-item label="备注图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage |
||||
ref="childComponent" |
||||
:defaultList="record.image_url" |
||||
multiple |
||||
:maxNum="10" |
||||
v-decorator="['image_id']" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import _ from 'lodash' |
||||
import * as Api from '@/api/order/event' |
||||
import { SelectImage } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
}, |
||||
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 { |
||||
form: { setFieldsValue }, |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
// eslint-disable-next-line no-undef |
||||
_.pick(this.record, ['remark']) |
||||
) |
||||
}) |
||||
}, |
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,128 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="800" |
||||
:visible="visible" |
||||
:isLoading="isLoading" |
||||
:confirmLoading="isLoading" |
||||
:destroyOnClose="true" |
||||
@cancel="handleCancel" |
||||
:footer="null" |
||||
> |
||||
<a-spin :spinning="isLoading" style="padding-bottom:30px"> |
||||
<table style="width: 100%"> |
||||
<thead class="ant-table-thead"> |
||||
<tr> |
||||
<th v-for="(item, index) in columns" :key="index"> |
||||
<span class="ant-table-header-column"> |
||||
<div> |
||||
<span class="ant-table-column-title">{{ item.title }}</span> |
||||
</div> |
||||
</span> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody class="ant-table-tbody"> |
||||
<template> |
||||
<!-- <div :key="`order_${item.order_id}_1`">{{ item.copy_text }}</div> --> |
||||
<tr v-for="(item, goodsIdx) in remarkList" :key="item.id"> |
||||
<td> |
||||
<img width="50" height="50" :src="item.image_url[0].preview_url" alt="备注图片" /> |
||||
</td> |
||||
<td>{{ item.remark }}</td> |
||||
<td>{{ item.create_time }}</td> |
||||
<td><a @click="handleLookRemarkDetails(item)">详情</a></td> |
||||
</tr> |
||||
</template> |
||||
</tbody> |
||||
</table> |
||||
</a-spin> |
||||
<RemarkFormDetails ref="RemarkFormDetails" /> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import _ from 'lodash' |
||||
import * as Api from '@/api/order/event' |
||||
import { SelectImage, STable } from '@/components' |
||||
import RemarkFormDetails from './RemarkFormDetails.vue' |
||||
const columns = [ |
||||
{ |
||||
title: '备注图片', |
||||
dataIndex: 'image_url', |
||||
scopedSlots: { customRender: 'image_url' }, |
||||
}, |
||||
{ |
||||
title: '备注名称', |
||||
dataIndex: 'remark', |
||||
}, |
||||
{ |
||||
title: '添加时间', |
||||
width: '180px', |
||||
dataIndex: 'create_time', |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: '150px', |
||||
scopedSlots: { customRender: 'action' }, |
||||
}, |
||||
] |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
STable, |
||||
RemarkFormDetails, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 对话框标题 |
||||
title: '商家备注', |
||||
// 标签布局属性 |
||||
labelCol: { span: 6 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 14 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
isLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {}, |
||||
columns, |
||||
remarkList: [], |
||||
} |
||||
}, |
||||
created() {}, |
||||
methods: { |
||||
handleLookRemarkDetails(record) { |
||||
this.$refs.RemarkFormDetails.show(record) |
||||
}, |
||||
// 显示对话框 |
||||
show(record) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.getRemark() |
||||
}, |
||||
// 获取列表数据 |
||||
getRemark() { |
||||
this.isLoading = true |
||||
return Api.getRemark({ orderId: this.record.order_id }) |
||||
.then((response) => { |
||||
this.remarkList = response.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue