feature/0423
parent
13282cb4cd
commit
fb247d34f9
@ -0,0 +1,323 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 加载中 --> |
||||
<a-spin :spinning="isLoading" /> |
||||
<!-- 订单内容 --> |
||||
<div v-if="!isLoading" class="order-content"> |
||||
<!-- 订单信息 --> |
||||
<a-card class="mt-20" :bordered="false"> |
||||
<!-- 订单信息 --> |
||||
<a-descriptions title="订单信息"> |
||||
<a-descriptions-item label="订单号">{{ record.order_no }}</a-descriptions-item> |
||||
<a-descriptions-item label="期望价格">￥{{ record.expect_price }}</a-descriptions-item> |
||||
<a-descriptions-item label="实际价格">￥{{ record.real_price }}</a-descriptions-item> |
||||
<a-descriptions-item label="回收方式">{{ record.recovery_type_text }}</a-descriptions-item> |
||||
<a-descriptions-item label="订单状态"> |
||||
{{ record.order_status_text }} |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="买家信息"> |
||||
<a-tooltip> |
||||
<template slot="title">会员ID: {{ record.user.user_id }}</template> |
||||
<span class="c-p">{{ record.user.nick_name }}</span> |
||||
</a-tooltip> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="买家留言"> |
||||
<span>{{ record.remake ? record.remake : '-' }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="服务时间">{{ record.server_time }}</a-descriptions-item> |
||||
<a-descriptions-item label="服务地址" v-if="record.shipping_address">{{ |
||||
record.shipping_address |
||||
}}</a-descriptions-item> |
||||
<a-descriptions-item label="联系人">{{ record.username }}</a-descriptions-item> |
||||
<a-descriptions-item label="联系电话">{{ record.mobile }}</a-descriptions-item> |
||||
<a-descriptions-item label="微信联系方式">{{ record.wx_account }}</a-descriptions-item> |
||||
<a-descriptions-item label="订单操作" v-if="record.order_status == 10" |
||||
><a v-if="record.order_status == 10" style="margin-right: 8px" @click="handleAcceptance(record)" |
||||
>验收</a |
||||
></a-descriptions-item |
||||
> |
||||
</a-descriptions> |
||||
</a-card> |
||||
|
||||
<!-- 回收信息 --> |
||||
<a-card class="mt-20" :bordered="false"> |
||||
<!-- 订单信息 --> |
||||
<a-descriptions title="回收信息" :column="2"> |
||||
<a-descriptions-item label="回收ID">{{ record.recovery_id }}</a-descriptions-item> |
||||
<a-descriptions-item label="回收名称">{{ record.recovery_name }}</a-descriptions-item> |
||||
<a-descriptions-item label="图片集"> |
||||
<div v-for="item in record.images" :key="item.id"> |
||||
<a title="点击查看原图" :href="item.file.preview_url" target="_blank"> |
||||
<img width="50" height="50" :src="item.file.preview_url" alt="图片" /> |
||||
</a> |
||||
</div> |
||||
</a-descriptions-item> |
||||
</a-descriptions> |
||||
</a-card> |
||||
<!-- 门店信息 --> |
||||
<a-card class="mt-20" :bordered="false" v-if="record.shop"> |
||||
<!-- 门店信息 --> |
||||
<a-descriptions title="门店信息"> |
||||
<a-descriptions-item label="门店名称">{{ record.shop.shop_name }}</a-descriptions-item> |
||||
<a-descriptions-item label="门店ID">{{ record.shop.shop_id }}</a-descriptions-item> |
||||
<a-descriptions-item label="门店联系人">{{ record.shop.linkman }}</a-descriptions-item> |
||||
<a-descriptions-item label="门店电话">{{ record.shop.phone }}</a-descriptions-item> |
||||
<a-descriptions-item label="门店地址">{{ record.shop.full_address }}</a-descriptions-item> |
||||
<a-descriptions-item label="门店营业时间">{{ record.shop.shop_hours }}</a-descriptions-item> |
||||
</a-descriptions> |
||||
</a-card> |
||||
</div> |
||||
<acceptance ref="acceptance" @handleSubmit="handleRefresh" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { inArray } from '@/utils/util' |
||||
import * as Api from '@/api/server/recovery' |
||||
import Acceptance from './modules/Acceptance' |
||||
export default { |
||||
name: 'RecoveryOrderDetail', |
||||
components: { Acceptance }, |
||||
data() { |
||||
return { |
||||
// 外部方法 |
||||
inArray, |
||||
// 正在加载 |
||||
isLoading: true, |
||||
// 订单ID |
||||
orderId: null, |
||||
// 订单详情 |
||||
record: {}, |
||||
} |
||||
}, |
||||
created() { |
||||
// 记录订单ID |
||||
this.orderId = this.$route.query.orderId |
||||
// 刷新页面 |
||||
this.handleRefresh() |
||||
}, |
||||
methods: { |
||||
// 刷新页面 |
||||
handleRefresh() { |
||||
// 获取当前记录 |
||||
this.getDetail() |
||||
}, |
||||
// 验收 |
||||
handleAcceptance(item) { |
||||
this.$refs.acceptance.add(item) |
||||
}, |
||||
// 获取当前记录 |
||||
getDetail() { |
||||
const { orderId } = this |
||||
this.isLoading = true |
||||
Api.orderDetail({ orderId }) |
||||
.then((result) => { |
||||
// 当前记录 |
||||
this.record = result.data.detail |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
|
||||
// 初始化数据 |
||||
initData() {}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
@import '~ant-design-vue/es/style/themes/default.less'; |
||||
// 订单详情页 |
||||
.order-content { |
||||
margin-bottom: 70px; |
||||
|
||||
/deep/.ant-descriptions-item > span { |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
// 分割线 |
||||
.o-divider { |
||||
margin-bottom: 32px; |
||||
} |
||||
|
||||
// 步骤条 |
||||
.order-progress { |
||||
height: 26px; |
||||
line-height: 26px; |
||||
background: #f8f8f8; |
||||
border-radius: 13px; |
||||
font-size: @font-size-base; |
||||
text-align: center; |
||||
position: relative; |
||||
|
||||
&:before, |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
z-index: 2; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
border-radius: 13px; |
||||
background: @primary-color; |
||||
} |
||||
|
||||
&:after { |
||||
background: ~`colorPalette('@{primary-color}', 3) `; |
||||
z-index: 1; |
||||
} |
||||
|
||||
&.progress-1 { |
||||
&:before { |
||||
width: 0; |
||||
} |
||||
|
||||
&:after { |
||||
width: 20%; |
||||
} |
||||
} |
||||
|
||||
&.progress-2 { |
||||
&:before { |
||||
width: 20%; |
||||
} |
||||
|
||||
&:after { |
||||
width: 40%; |
||||
} |
||||
} |
||||
|
||||
&.progress-3 { |
||||
&:before { |
||||
width: 40%; |
||||
} |
||||
|
||||
&:after { |
||||
width: 60%; |
||||
} |
||||
} |
||||
|
||||
&.progress-4 { |
||||
&:before { |
||||
width: 60%; |
||||
} |
||||
|
||||
&:after { |
||||
width: 80%; |
||||
} |
||||
} |
||||
|
||||
&.progress-5 { |
||||
&:before { |
||||
width: 100%; |
||||
} |
||||
|
||||
&:after { |
||||
width: 100%; |
||||
} |
||||
|
||||
li { |
||||
&:nth-child(5) { |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
li { |
||||
width: 20%; |
||||
float: left; |
||||
border-radius: 13px; |
||||
position: relative; |
||||
z-index: 3; |
||||
} |
||||
|
||||
.tip { |
||||
font-size: 12px; |
||||
padding-top: 10px; |
||||
color: #8c8c8c; |
||||
} |
||||
|
||||
&.progress-1 li:nth-child(1), |
||||
&.progress-2 li:nth-child(1), |
||||
&.progress-3 li:nth-child(1), |
||||
&.progress-4 li:nth-child(1), |
||||
&.progress-5 li:nth-child(1) { |
||||
color: #fff; |
||||
} |
||||
|
||||
&.progress-2 li:nth-child(2), |
||||
&.progress-3 li:nth-child(2), |
||||
&.progress-4 li:nth-child(2), |
||||
&.progress-5 li:nth-child(2) { |
||||
color: #fff; |
||||
} |
||||
|
||||
&.progress-3 li:nth-child(3), |
||||
&.progress-4 li:nth-child(3), |
||||
&.progress-5 li:nth-child(3) { |
||||
color: #fff; |
||||
} |
||||
|
||||
&.progress-4 li:nth-child(4), |
||||
&.progress-5 li:nth-child(4) { |
||||
color: #fff; |
||||
} |
||||
} |
||||
// 商品列表 |
||||
.goods-list { |
||||
/deep/table { |
||||
table-layout: auto; |
||||
} |
||||
.order-price { |
||||
padding: 8px 20px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
// 操作栏 |
||||
.actions { |
||||
.action-item { |
||||
float: left; |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 隐藏tab的标签 |
||||
.hide-bar { |
||||
/deep/.ant-tabs-bar { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
/deep/.ant-tabs-bar { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
// 已发货的商品列表 |
||||
.deliver-goods-list { |
||||
.goods-item { |
||||
position: relative; |
||||
border-radius: 4px; |
||||
overflow: hidden; |
||||
width: 65px; |
||||
height: 65px; |
||||
float: left; |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.goods-img { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.title { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.6); |
||||
color: #fff; |
||||
padding: 2px 0; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,103 @@ |
||||
<template> |
||||
<a-modal |
||||
title="回收验收" |
||||
:width="400" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="实际回收价" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number :min="0" v-model="real_price" /> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
export default { |
||||
components: {}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
engineerList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
order_id: '', |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
real_price: 0, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
add(item) { |
||||
// 显示窗口 |
||||
this.order_id = item.order_id |
||||
this.real_price = item.expect_price |
||||
this.visible = true |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
values.order_id = this.order_id |
||||
values.real_price = this.real_price |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.completeOrder({ form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -1,162 +0,0 @@ |
||||
<template> |
||||
<a-modal |
||||
title="新增回收" |
||||
:width="920" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="回收名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input |
||||
v-decorator="['recovery_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="回收分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
:step="10" |
||||
v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="90" |
||||
:step="1" |
||||
:max="100" |
||||
v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" |
||||
/> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="100" |
||||
v-decorator="['sold', { initialValue: 100, rules: [{ required: true, message: '请输入销量价格' }] }]" |
||||
/> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<a-form-item label="回收图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage v-decorator="['image_id', { rules: [{ required: true, message: '请上传图片' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number |
||||
:min="0" |
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="详情" :labelCol="labelCol" :wrapperCol="{ span: 16 }"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
import { SelectImage, Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
Ueditor, |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
add() { |
||||
// 显示窗口 |
||||
this.getCategoryList() |
||||
this.visible = true |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList() { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.addRecovery({ form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -1,190 +0,0 @@ |
||||
<template> |
||||
<a-modal |
||||
title="编辑回收" |
||||
:width="920" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="回收名称" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input |
||||
v-decorator="['recovery_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="回收分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['category_id', { initialValue: 0, rules: [{ required: true, message: '请选择分类' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择分类</a-select-option> |
||||
<a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.category_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
</a-form-item> |
||||
<a-form-item label="评论数量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
:step="10" |
||||
v-decorator="['comment_num', { initialValue: 10, rules: [{ required: true, message: '请输入评论数量' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="好评率" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="90" |
||||
:step="1" |
||||
:max="100" |
||||
v-decorator="['comment_rate', { initialValue: 90, rules: [{ required: true, message: '请输入好评率' }] }]" |
||||
/> |
||||
<span class="ml-10">%</span> |
||||
</a-form-item> |
||||
<a-form-item label="销量" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input-number |
||||
:min="10" |
||||
v-decorator="['sold', { initialValue: 10, rules: [{ required: true, message: '请输入销量价格' }] }]" |
||||
/> |
||||
<span class="ml-10">个</span> |
||||
</a-form-item> |
||||
<a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<SelectImage :defaultList="record.image ? [record.image] : []" v-decorator="['image_id']" /> |
||||
</a-form-item> |
||||
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">上架</a-radio> |
||||
<a-radio :value="2">下架</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number |
||||
:min="0" |
||||
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
<a-form-item label="详情" :labelCol="labelCol" :wrapperCol="{ span: 16 }"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server/recovery' |
||||
import { SelectImage, Ueditor } from '@/components' |
||||
export default { |
||||
components: { |
||||
SelectImage, |
||||
Ueditor, |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 当前记录 |
||||
record: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
edit(record) { |
||||
this.getCategoryList() |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前分类记录 |
||||
this.record = record |
||||
// 设置默认值 |
||||
this.setFieldsValue() |
||||
}, |
||||
// 获取分类列表 |
||||
getCategoryList() { |
||||
this.isLoading = true |
||||
Api.categoryList() |
||||
.then((result) => { |
||||
this.categoryList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 设置默认值 |
||||
setFieldsValue() { |
||||
const { |
||||
form: { setFieldsValue }, |
||||
} = this |
||||
// 设置表单内容 |
||||
this.$nextTick(() => { |
||||
setFieldsValue( |
||||
_.pick(this.record, [ |
||||
'recovery_name', |
||||
'image_id', |
||||
'category_id', |
||||
'status', |
||||
'sold', |
||||
'comment_rate', |
||||
'sort', |
||||
'comment_num', |
||||
'content', |
||||
]) |
||||
) |
||||
}) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.editRecovery({ recoveryId: this.record['recovery_id'], form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue