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