<template>
|
<GlobalWindow
|
title="手动派单"
|
:visible.sync="visible"
|
width="60%"
|
@confirm="handleConfirm"
|
@close="handleClose"
|
>
|
<div class="dispatch-info">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">订单编号：</span>
|
<span class="value" v-if="orderInfo.order">{{ orderInfo.order.code || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">实付金额：</span>
|
<span class="value" v-if="orderInfo.order">¥{{ ((orderInfo.order.payAmount ||0) / 100).toFixed(2) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">配送方式：</span>
|
<span class="value" v-if="orderInfo.order">
|
<span v-if="orderInfo.order.type === 0">就地寄存</span>
|
<span v-if="orderInfo.order.type === 1">同城配送</span>
|
<span style="margin-left: 20px;border: 1px solid #0c6ce3;border-radius: 5px;font-size: 12px;padding:2px 10px;color: #0c6ce3 " v-if="orderInfo.order.type === 1 && orderInfo.order.isUrgent === 0">普通配送</span>
|
<span style="margin-left: 20px;border: 1px solid orange;border-radius: 5px;font-size: 12px;padding:2px 10px;color: orange " v-if="orderInfo.order.type === 1 && orderInfo.order.isUrgent === 1">急速达</span>
|
</span>
|
</div>
|
<div class="info-item">
|
<el-button type="primary" @click="showLogList" >加急日志</el-button>
|
</div>
|
</div>
|
</div>
|
<el-table style="border: 1px solid #f2f2f2;" :data="orderInfo.detailList" stripe class="goods-table">
|
<el-table-column prop="luggageName" label="物品名称" min-width="100px"></el-table-column>
|
<el-table-column prop="luggageDetail" label="物品尺寸" min-width="80px"></el-table-column>
|
<el-table-column label="配送价（元）" min-width="100px">
|
<template slot-scope="{row}"><span >¥{{ ((row.unitPrice||0) / 100).toFixed(2) }}</span></template>
|
</el-table-column>
|
<el-table-column prop="num" label="数量" min-width="60px"></el-table-column>
|
<el-table-column label="小计（元）" min-width="100px">
|
<template slot-scope="{row}"><span class="yellowstate">¥{{ (((row.subtotal || 0)) / 100).toFixed(2) }}</span></template>
|
</el-table-column>
|
</el-table>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" class="dispatch-form" inline>
|
<el-form-item label="配送司机" prop="driverId">
|
<el-select v-model="form.driverId" placeholder="请选择配送司机" filterable style="width: 400px;">
|
<el-option v-for="item in driverList" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="加急费" prop="urgentFee">
|
<el-input-number v-model="form.urgentFee" :min="0" :precision="2" controls-position="right" style="width: 400px;"></el-input-number>
|
</el-form-item>
|
<el-form-item label="备注说明" prop="remark">
|
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注说明" style="width: 400px;" :rows="3"></el-input>
|
</el-form-item>
|
</el-form>
|
<orderProgress ref ='orderProgress'></orderProgress>
|
</GlobalWindow>
|
</template>
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById, dispatch as dispatchOrder, logListPage } from '@/api/business/orderManagement'
|
import { paidDepositList } from '@/api/business/driver'
|
import orderProgress from '@/components/business/orderProgress'
|
|
export default {
|
name: 'OperaDispatch',
|
components: { GlobalWindow, orderProgress },
|
data () {
|
const numRule = (rule, value, callBack) => {
|
if (value ==='') {
|
callBack(new Error('加急费不能为空'))
|
} else if (value < 0.1) {
|
callBack(new Error('请输入正确的加急费'))
|
} else {
|
callBack()
|
}
|
}
|
return {
|
visible: false,
|
orderInfo: {
|
orderNo: '',
|
payAmount: 0,
|
deliveryType: '',
|
goodsList: []
|
},
|
driverList: [],
|
form: {
|
driverId: 0,
|
orderId: 0,
|
remark: '',
|
urgentFee: 10
|
},
|
rules: {
|
urgentFee: [{ required: true,validator:numRule, trigger: 'change' }]
|
}
|
}
|
},
|
methods: {
|
open (row) {
|
var that = this
|
this.form = {
|
driverId: null,
|
orderId: row.id,
|
remark: '',
|
urgentFee: 0
|
}
|
this.orderInfo = { order: row }
|
that.orderInfo.detailList = that.orderInfo.detailList || []
|
getById(row.id).then(res => {
|
res = res || {}
|
res.detailList = res.detailList || []
|
res.order = res.order || {}
|
that.orderInfo = res
|
that.orderInfo.order = that.orderInfo.order || {}
|
that.loadDriverList()
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
this.visible = false
|
})
|
this.visible = true
|
},
|
showLogList () {
|
var that = this
|
if (!this.orderInfo.order || !this.orderInfo.order.id) {
|
return
|
}
|
logListPage({
|
capacity: 10000,
|
model: {
|
objTypeList: [2, 3],
|
orderId: this.orderInfo.order.id
|
},
|
page: 1
|
}).then(res => {
|
var orderLogList = res.records || []
|
if (orderLogList.length) {
|
this.$refs.orderProgress.open('订单派单日志', orderLogList || [])
|
} else {
|
this.$message.warning('未查询到任何派单记录！')
|
}
|
}).catch(e => {
|
})
|
},
|
loadDriverList () {
|
var that = this
|
paidDepositList().then(res => {
|
that.driverList = res || []
|
}).catch(e => {
|
})
|
},
|
handleClose () {
|
this.visible = false
|
},
|
handleConfirm () {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
dispatchOrder(this.form).then(res => {
|
this.$tip.apiSuccess(res || '派单成功')
|
this.$emit('success')
|
this.visible = false
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dispatch-info {
|
margin-bottom: 20px;
|
}
|
.info-row {
|
display: flex;
|
gap: 30px;
|
padding: 15px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
.info-item {
|
/*display: flex;*/
|
font-size: 14px;
|
}
|
.info-item .label {
|
color: #909399;
|
}
|
.info-item .value {
|
color: #606266;
|
}
|
.goods-table {
|
margin-bottom: 20px;
|
}
|
.dispatch-form {
|
margin-top: 20px;
|
}
|
</style>
|
