fanfan
2 months ago
parent
c6699af397
commit
33e35c425c
@ -0,0 +1,162 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
:width="680" |
||||||
|
:visible="visible" |
||||||
|
:isLoading="isLoading" |
||||||
|
:confirmLoading="isLoading" |
||||||
|
:maskClosable="false" |
||||||
|
@ok="handleSubmit" |
||||||
|
@cancel="handleCancel" |
||||||
|
> |
||||||
|
<a-spin :spinning="isLoading"> |
||||||
|
<a-form-model ref="ruleForm" :model="record" :rules="rules" :label-col="labelCol" :wrapperCol="wrapperCol"> |
||||||
|
<div> |
||||||
|
<a-form-model-item label="物流公司" prop="express_id"> |
||||||
|
<a-select v-model="record.express_id" placeholder="请选择物流公司"> |
||||||
|
<a-select-option v-for="(item, index) in expressList" :key="index" :value="item.express_id">{{ |
||||||
|
item.express_name |
||||||
|
}}</a-select-option> |
||||||
|
</a-select> |
||||||
|
<div class="form-item-help"> |
||||||
|
<router-link target="_blank" :to="{ path: '/setting/delivery/express/index' }">物流公司管理</router-link> |
||||||
|
</div> |
||||||
|
</a-form-model-item> |
||||||
|
<a-form-model-item label="物流单号" prop="express_no" extra="请手动录入物流单号或快递单号"> |
||||||
|
<a-input v-model="record.express_no" /> |
||||||
|
</a-form-model-item> |
||||||
|
</div> |
||||||
|
</a-form-model> |
||||||
|
</a-spin> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { assignment } from '@/utils/util' |
||||||
|
import * as Api from '@/api/order/delivery' |
||||||
|
import * as ExpressApi from '@/api/setting/express' |
||||||
|
import ClientEnum from '@/common/enum/Client' |
||||||
|
import { PaymentMethodEnum } from '@/common/enum/payment' |
||||||
|
import { DeliveryStatusEnum } from '@/common/enum/order' |
||||||
|
import { GoodsItem } from '@/components/Table' |
||||||
|
|
||||||
|
const rules = { |
||||||
|
expressId: [{ required: true, message: '请选择物流公司', trigger: 'blur' }], |
||||||
|
expressNo: [{ required: true, message: '请填写物流单号', trigger: 'blur' }], |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
GoodsItem, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 对话框标题 |
||||||
|
title: '订单发货', |
||||||
|
// 标签布局属性 |
||||||
|
labelCol: { span: 7 }, |
||||||
|
// 输入框布局属性 |
||||||
|
wrapperCol: { span: 13 }, |
||||||
|
// modal(对话框)是否可见 |
||||||
|
visible: false, |
||||||
|
// modal(对话框)确定按钮 loading |
||||||
|
isLoading: false, |
||||||
|
// 验证规则 |
||||||
|
rules, |
||||||
|
// 当前tab索引 |
||||||
|
// 物流公司列表 |
||||||
|
expressList: [], |
||||||
|
// 当前记录 |
||||||
|
record: {}, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
beforeCreate() { |
||||||
|
// 批量给当前实例赋值 |
||||||
|
assignment(this, { |
||||||
|
ClientEnum, |
||||||
|
PaymentMethodEnum, |
||||||
|
}) |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 获取物流公司列表 |
||||||
|
this.getExpressList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 显示对话框 |
||||||
|
show(record) { |
||||||
|
console.log(record, 'AAAAAAAAAAAAAAAAAA') |
||||||
|
// 当前记录 |
||||||
|
this.record = record |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取物流公司列表 |
||||||
|
getExpressList() { |
||||||
|
this.isLoading = true |
||||||
|
ExpressApi.all() |
||||||
|
.then((result) => (this.expressList = result.data.list)) |
||||||
|
.finally(() => (this.isLoading = false)) |
||||||
|
}, |
||||||
|
|
||||||
|
// 确认按钮 |
||||||
|
handleSubmit(e) { |
||||||
|
e.preventDefault() |
||||||
|
// 表单验证 |
||||||
|
this.$refs.ruleForm.validate((valid) => { |
||||||
|
// 提交到后端api |
||||||
|
valid && this.onFormSubmit() |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 关闭对话框事件 |
||||||
|
handleCancel() { |
||||||
|
this.visible = false |
||||||
|
if (this.$refs.ruleForm) { |
||||||
|
this.$refs.ruleForm.resetFields() |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 提交到后端api |
||||||
|
onFormSubmit() { |
||||||
|
this.isLoading = true |
||||||
|
Api.updateDelivery({ |
||||||
|
delivery_id: this.record.delivery_id, |
||||||
|
form: { express_no: this.record.express_no, express_id: this.record.express_id }, |
||||||
|
}) |
||||||
|
.then((result) => { |
||||||
|
// 显示成功 |
||||||
|
this.$message.success(result.message, 1.5) |
||||||
|
// 关闭对话框事件 |
||||||
|
this.handleCancel() |
||||||
|
// 通知父端组件提交完成了 |
||||||
|
this.$emit('handleSubmit', true) |
||||||
|
}) |
||||||
|
.finally(() => (this.isLoading = false)) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
/deep/.ant-modal-header { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
/deep/.ant-modal-footer { |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
/deep/.ant-modal-body { |
||||||
|
padding: 0px 24px; |
||||||
|
} |
||||||
|
/deep/.ant-tabs-bar { |
||||||
|
margin-bottom: 22px; |
||||||
|
} |
||||||
|
.ant-table-wrapper { |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.ant-form-item { |
||||||
|
margin-bottom: 15px; |
||||||
|
&:last-child { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue