<template>
|
<GlobalWindow
|
title="手动派单"
|
:visible.sync="visible"
|
width="700px"
|
@confirm="handleConfirm"
|
@close="handleClose"
|
>
|
<div class="dispatch-info">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">订单编号：</span>
|
<span class="value">{{ orderInfo.orderNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">实付金额：</span>
|
<span class="value">¥{{ (orderInfo.payAmount / 100).toFixed(2) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">配送方式：</span>
|
<span class="value">
|
<span v-if="orderInfo.deliveryType === 1">普通配送</span>
|
<span v-else-if="orderInfo.deliveryType === 2">急速达</span>
|
<span v-else-if="orderInfo.deliveryType === 3">异地寄送</span>
|
<span v-else>-</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<el-table :data="orderInfo.goodsList" stripe class="goods-table">
|
<el-table-column prop="goodsName" label="物品名称" min-width="100px"></el-table-column>
|
<el-table-column prop="goodsSize" label="物品尺寸" min-width="80px"></el-table-column>
|
<el-table-column label="配送价（元）" min-width="100px">
|
<template slot-scope="{row}">¥{{ (row.deliveryPrice / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column prop="quantity" label="数量" min-width="60px"></el-table-column>
|
<el-table-column label="小计（元）" min-width="100px">
|
<template slot-scope="{row}">¥{{ ((row.deliveryPrice * row.quantity) / 100).toFixed(2) }}</template>
|
</el-table-column>
|
</el-table>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" class="dispatch-form">
|
<el-form-item label="配送司机" prop="driverId">
|
<el-select v-model="form.driverId" placeholder="请选择配送司机" style="width: 100%">
|
<el-option label="司机A" :value="1"></el-option>
|
<el-option label="司机B" :value="2"></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: 100%"></el-input-number>
|
</el-form-item>
|
<el-form-item label="备注说明" prop="remark">
|
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注说明" :rows="3"></el-input>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
|
export default {
|
name: 'OperaDispatch',
|
components: { GlobalWindow },
|
data () {
|
return {
|
visible: false,
|
orderInfo: {
|
orderNo: '',
|
payAmount: 0,
|
deliveryType: '',
|
goodsList: []
|
},
|
form: {
|
driverId: '',
|
urgentFee: 0,
|
remark: ''
|
},
|
rules: {
|
driverId: [{ required: true, message: '请选择配送司机', trigger: 'change' }]
|
}
|
}
|
},
|
methods: {
|
open (row) {
|
this.orderInfo = {
|
orderNo: row.orderNo,
|
payAmount: row.payAmount || 0,
|
deliveryType: row.deliveryType || '',
|
goodsList: row.goodsList || []
|
}
|
this.form = {
|
driverId: '',
|
urgentFee: 0,
|
remark: ''
|
}
|
this.visible = true
|
},
|
handleClose () {
|
this.visible = false
|
},
|
handleConfirm () {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
this.$emit('confirm', {
|
orderId: this.orderInfo.id,
|
...this.form
|
})
|
this.visible = false
|
})
|
}
|
}
|
}
|
</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>
|
