335 lines
8.8 KiB
Vue
335 lines
8.8 KiB
Vue
<template>
|
||
<div class="app-container customer-control">
|
||
<div class="container-custom">
|
||
<!-- 表格 -->
|
||
<div class="table-cont">
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<!-- <el-table-column type="selection" width="55" /> -->
|
||
<el-table-column property="productId" label="商品ID" width="100" />
|
||
<el-table-column
|
||
property="productName"
|
||
label="商品名称"
|
||
width="300"
|
||
/>
|
||
<el-table-column label="图片" width="">
|
||
<template #default="scope">
|
||
<div class="tree-goods-subOrder-image">
|
||
<img
|
||
style="width: 60px; height: 60px"
|
||
:src="scope.row.productImage"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="购买数量" width="">
|
||
<template #default="scope">{{ scope.row.quantity }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品单价" width="">
|
||
<template #default="scope">{{ scope.row.unitPrice }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="规格" width="">
|
||
<template #default="scope">{{ scope.row.unit }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品总价" width="">
|
||
<template #default="scope">{{ scope.row.subtotalAmount }}</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="收货地址" width="">
|
||
<template #default="scope">{{ scope.row.date }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="最晚发货时间" width="">
|
||
<template #default="scope">{{ scope.row.date }}</template>
|
||
</el-table-column> -->
|
||
</el-table>
|
||
<div class="select-send">
|
||
<el-radio-group v-model="radio1">
|
||
<el-radio value="2" size="large">平台物流</el-radio>
|
||
<el-radio value="1" size="large">第三方物流</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div
|
||
v-if="radio1 == '2'"
|
||
style="
|
||
padding: 10px 0;
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
"
|
||
>
|
||
<div>
|
||
<el-button class="el-button-gry" @click="send()" type="primary"
|
||
>发货</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div v-else class="sendGoods">
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
"
|
||
>
|
||
<div>
|
||
<div class="logistics">
|
||
<div>选择物流：</div>
|
||
<el-select
|
||
v-model="optionsValue"
|
||
placeholder="选择物流"
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div
|
||
v-for="(item, index) in inputData"
|
||
:key="index"
|
||
style="align-items: center"
|
||
class="logistics"
|
||
>
|
||
<div>物流单号：</div>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<el-input
|
||
style="margin: 5px 0px; width: 240px"
|
||
v-model="inputData[index].content"
|
||
placeholder="输入物流单号"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<div style="display: flex; align-items: center">
|
||
<div v-if="index == 0" style="margin-left: 10px">
|
||
<el-button
|
||
class="el-button-gry"
|
||
type="primary"
|
||
@click="addInput()"
|
||
>新增包裹</el-button
|
||
>
|
||
</div>
|
||
<div v-if="index !== 0" style="margin-left: 10px">
|
||
<el-button type="danger" @click="deleteList(index)"
|
||
>删除</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>共计{{ inputData.length }}个包裹</div>
|
||
<div>
|
||
<el-button class="el-button-gry" @click="send()" type="primary"
|
||
>发货</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ElMessage } from "element-plus";
|
||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||
import { createLogisticOrder } from "../../api/order/list";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const tableData = ref([]);
|
||
const radio1 = ref("2");
|
||
onMounted(() => {
|
||
tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
||
});
|
||
|
||
watch(
|
||
() => route.query.data,
|
||
(newSearch) => {
|
||
if (route.query.data) {
|
||
tableData.value = JSON.parse(route.query.data).orderItemInfos;
|
||
}
|
||
}
|
||
);
|
||
|
||
const inputData = reactive([
|
||
{
|
||
content: "",
|
||
},
|
||
]);
|
||
|
||
let list = ref([]);
|
||
|
||
const options = [
|
||
{
|
||
label: "申通快递",
|
||
value: "shentong",
|
||
},
|
||
{
|
||
label: "韵达快递",
|
||
value: "yunda",
|
||
},
|
||
{
|
||
label: "京东快递",
|
||
value: "jd",
|
||
},
|
||
];
|
||
let optionsValue = ref("申通快递");
|
||
|
||
const column = ref([
|
||
{ prop: "goodId", label: "ID", width: "150" },
|
||
{
|
||
prop: "productImage",
|
||
label: "商品图片",
|
||
width: "150",
|
||
},
|
||
{ prop: "productName", label: "商品名称", width: "150" },
|
||
{ prop: "goodPrice", label: "商品单价", width: "150" },
|
||
{ prop: "salesVolume", label: "购买数量", width: "150" },
|
||
{ prop: "pageView", label: "订单总价", width: "150" },
|
||
{ prop: "stock", label: "子订单数量", width: "150" },
|
||
{ prop: "isListed", label: "状态", width: "150" },
|
||
{ prop: "action", label: "操作", slotName: "action" },
|
||
]);
|
||
|
||
const addInput = () => {
|
||
inputData.push({
|
||
content: "",
|
||
});
|
||
};
|
||
|
||
const deleteList = (index) => {
|
||
inputData.splice(index, 1);
|
||
};
|
||
|
||
const send = async () => {
|
||
inputData.forEach((res) => {
|
||
list.value.push(res.content);
|
||
});
|
||
try {
|
||
let response = await createLogisticOrder({
|
||
orderId: JSON.parse(route.query.data).id,
|
||
waybillName: radio1.value == 2 ? "" : optionsValue.value,
|
||
waybillCode: radio1.value == 2 ? "" : list.value.join(","),
|
||
type: radio1.value,
|
||
});
|
||
console.log(response);
|
||
if (response.code == 200) {
|
||
ElMessage({
|
||
message: "发货成功",
|
||
type: "success",
|
||
plain: true,
|
||
});
|
||
router.back();
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.select-send {
|
||
padding: 5px 10px;
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
}
|
||
.tree-goods-subOrder-image {
|
||
width: 135px;
|
||
height: 60px;
|
||
}
|
||
.table-cont {
|
||
height: 85vh;
|
||
overflow-y: scroll !important;
|
||
background-color: #f5f5f5 !important;
|
||
}
|
||
.sendGoods {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 10px 10px 30px 10px;
|
||
}
|
||
.logistics {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.address {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
font-size: 15px;
|
||
color: #000000;
|
||
margin: 20px 0px;
|
||
padding: 20px 10px;
|
||
}
|
||
.send-button {
|
||
text-align: center;
|
||
width: 60px;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
border-radius: 5px;
|
||
font-size: 15px;
|
||
color: #fff;
|
||
background-color: #409eff;
|
||
cursor: pointer;
|
||
}
|
||
.tree-goods {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-left: 300px;
|
||
align-items: center;
|
||
.sendGoods {
|
||
margin-left: 15px;
|
||
padding: 5px 10px;
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.tree-goods-subOrder {
|
||
// display: flex;
|
||
// width: 1510px;
|
||
height: 60px;
|
||
.tree-goods-subOrder-list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
.tree-goods-subOrder-image {
|
||
width: 135px;
|
||
height: 60px;
|
||
}
|
||
.tree-goods-subOrder-name {
|
||
width: 150px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
padding: 0 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table-toolbar {
|
||
width: 300px;
|
||
height: 50px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
display: flex;
|
||
justify-content: end;
|
||
padding: 14px 16px 0 0;
|
||
}
|
||
</style>
|