<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
|
<!-- <el-form-item label="关联订单" prop="aboutId">
|
<el-input v-model="queryParams.aboutId" placeholder="请输入关联订单号" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item> -->
|
<el-form-item label="关联类型" prop="aboutType">
|
<el-select v-model="queryParams.aboutType" placeholder="请选择关联订单类型" clearable style="width: 200px">
|
<el-option key="1" label="普通订单" value="1" />
|
<el-option key="2" label="寄存单" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="收货人" prop="receiverName">
|
<el-input v-model="queryParams.receiverName" placeholder="请输入收货人" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="电话" prop="receiverPhone">
|
<el-input v-model="queryParams.receiverPhone" placeholder="请输入收货人电话" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="收货地址" prop="receiverAddress">
|
<el-input v-model="queryParams.receiverAddress" placeholder="请输入收货地址" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="快递公司" prop="deliverCompany">
|
<el-input v-model="queryParams.deliverCompany" placeholder="请输入快递公司" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="快递单号" prop="deliverCode">
|
<el-input v-model="queryParams.deliverCode" placeholder="请输入快递单号" clearable style="width: 200px" @keyup.enter="getDataList"></el-input>
|
</el-form-item>
|
<el-form-item label="发货状态" prop="deliverState">
|
<el-select v-model="queryParams.deliverState" placeholder="请选择发货状态" clearable style="width: 200px">
|
<el-option key="0" label="待发货" value="0" />
|
<el-option key="1" label="已发货" value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="收货状态" prop="receiverState">
|
<el-select v-model="queryParams.receiverState" placeholder="请选择收货状态" clearable style="width: 200px">
|
<el-option key="0" label="待收货" value="0" />
|
<el-option key="1" label="已收货" value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="核销状态" prop="verifyState">
|
<el-select v-model="queryParams.verifyState" placeholder="请选择核销状态" clearable style="width: 200px">
|
<el-option key="0" label="待核销" value="0" />
|
<el-option key="1" label="已核销" value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<!-- <el-col :span="1.5">
|
<el-button type="primary" plain :disabled="power.add" @click="handleRate">解冻</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
</el-col> -->
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable" @cell-dblclick="handleInfo">
|
<el-table-column type="index" width="50" />
|
<el-table-column label="关联类型" align="center" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.aboutType == 1 ? "普通订单" : "寄存单" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="关联订单" align="center" width="120">
|
<template #default="scope">
|
<el-button type="primary" link @click="handleAboutInfo(scope.row.aboutId)">{{ scope.row.aboutId }}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="配送类型" align="center" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.sendType == 1 ? "快递" : "自提" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="收货人" align="center" key="receiverName" prop="receiverName" width="150" />
|
<el-table-column label="收货人电话" align="center" key="receiverPhone" prop="receiverPhone" width="150" />
|
<el-table-column label="收货地址" align="center" key="receiverAddress" prop="receiverAddress" width="250" />
|
<el-table-column label="收货状态" align="center" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.receiverState == 0 ? "待收货" : "已收货" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货状态" align="center" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.deliverState == 0 ? "待发货" : "已发货" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="快递公司" align="center" key="deliverCompany" prop="deliverCompany" width="200" />
|
<el-table-column label="快递单号" align="center" key="deliverCode" prop="deliverCode" width="200" />
|
<el-table-column label="发货时间" align="center" key="deliverTime" prop="deliverTime" width="200" />
|
<el-table-column label="核销状态" align="center" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.verifyState == 0 ? "待核销" : "已核销" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" fixed="right">
|
<template #default="scope">
|
<el-tooltip content="发货" placement="top">
|
<el-button link type="success" icon="Box" :disabled="scope.row.deliverState != 0" @click="handleDeliver(scope.row)"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
<el-dialog title="配送单详情" v-model="isOpenInfo" width="1000px" draggable :close-on-click-modal="false">
|
<el-descriptions :column="3">
|
<el-descriptions-item label="关联类型">{{ _dataInfo.aboutType == 1 ? "普通订单" : "寄存单" }}</el-descriptions-item>
|
<el-descriptions-item label="关联订单">{{ _dataInfo.aboutId }}</el-descriptions-item>
|
<el-descriptions-item label="配送类型">{{ _dataInfo.sendType == 1 ? "快递" : "自提" }}</el-descriptions-item>
|
<el-descriptions-item label="收货人">{{ _dataInfo.receiverName }}</el-descriptions-item>
|
<el-descriptions-item label="收货人电话">{{ _dataInfo.receiverPhone }}</el-descriptions-item>
|
<el-descriptions-item label="收货地址">{{ _dataInfo.receiverAddress }}</el-descriptions-item>
|
<el-descriptions-item label="收货状态">{{ _dataInfo.receiverState == 0 ? "待收货" : "已收货" }}</el-descriptions-item>
|
<el-descriptions-item label="发货状态">{{ _dataInfo.deliverState == 0 ? "待发货" : "已发货" }}</el-descriptions-item>
|
<el-descriptions-item label="快递公司">{{ _dataInfo.deliverCompany }}</el-descriptions-item>
|
<el-descriptions-item label="快递单号">{{ _dataInfo.deliverCode }}</el-descriptions-item>
|
<el-descriptions-item label="发货时间">{{ _dataInfo.deliverTime }}</el-descriptions-item>
|
<el-descriptions-item label="核销状态">{{ _dataInfo.verifyState == 0 ? "待核销" : "已核销" }}</el-descriptions-item>
|
</el-descriptions>
|
<el-row style="align-items: flex-start" v-if="_dataInfo.sendGoodsVoList && _dataInfo.sendGoodsVoList.length > 0">
|
<el-col :span="2">商品列表</el-col>
|
<el-col :span="20">
|
<div style="display: flex">
|
<div style="display: block; width: 100%">
|
<el-row class="_el-row" v-for="(item, index) in _dataInfo.sendGoodsVoList" :key="index">
|
<el-col :span="4">
|
<ImagePreview :src="item.goodsImg" width="80px" height="80px"></ImagePreview>
|
</el-col>
|
<el-col :span="20" style="overflow: hidden">{{ item.goodsName }} × 1</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
|
<el-dialog title="订单详情" v-model="isOpenAboutInfo" width="1000px" draggable :close-on-click-modal="false">
|
<el-descriptions :column="3">
|
<el-descriptions-item label="订单号">{{ dataInfo.orderNo }}</el-descriptions-item>
|
<el-descriptions-item label="推荐人">{{ dataInfo.recommendName }}</el-descriptions-item>
|
<el-descriptions-item label="购买人">{{ dataInfo.buyName }}</el-descriptions-item>
|
<el-descriptions-item label="订单类型">{{ dispOrderType(dataInfo.orderType) }}</el-descriptions-item>
|
<el-descriptions-item label="配送类型">{{ dispSendType(dataInfo.sendType) }}</el-descriptions-item>
|
<el-descriptions-item label="订单状态">{{ dispOrderState(dataInfo.orderState) }}</el-descriptions-item>
|
<el-descriptions-item label="支付方式">{{ dispPayType(dataInfo.payType) }}</el-descriptions-item>
|
<el-descriptions-item label="订单金额">{{ dataInfo.orderMoney }}</el-descriptions-item>
|
<el-descriptions-item label="支付金额">{{ dataInfo.money }}</el-descriptions-item>
|
<el-descriptions-item label="余额">{{ dataInfo.balance }}</el-descriptions-item>
|
<el-descriptions-item label="灵玉">{{ dataInfo.integral }}</el-descriptions-item>
|
<el-descriptions-item label="支付金额">{{ dataInfo.money }}</el-descriptions-item>
|
<el-descriptions-item label="支付时间">{{ dataInfo.payTime }}</el-descriptions-item>
|
<el-descriptions-item label="下单时间">{{ dataInfo.addTime }}</el-descriptions-item>
|
<template v-if="dataInfo.send">
|
<el-descriptions-item label="收货人">{{ dataInfo.send.receiverName }}</el-descriptions-item>
|
<el-descriptions-item label="收货电话">{{ dataInfo.send.receiverPhone }}</el-descriptions-item>
|
<el-descriptions-item label="收货地址">{{ dataInfo.send.receiverAddress }}</el-descriptions-item>
|
</template>
|
<el-descriptions-item label="订单备注">{{ dataInfo.orderRemark }}</el-descriptions-item>
|
</el-descriptions>
|
<el-row style="align-items: flex-start" v-if="dataInfo.goodsList && dataInfo.goodsList.length > 0">
|
<el-col :span="2">商品列表</el-col>
|
<el-col :span="20">
|
<div style="display: flex">
|
<div style="display: block; width: 100%">
|
<el-row class="_el-row" v-for="(item, index) in dataInfo.goodsList" :key="index">
|
<el-col :span="4">
|
<ImagePreview :src="item.goodsImg" width="80px" height="80px"></ImagePreview>
|
</el-col>
|
<el-col :span="20" style="overflow: hidden">{{ item.goodsName }} ×{{ item.buyNum }}</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
|
<el-dialog title="发货" :close-on-click-modal="false" v-model="isOpenRate" width="400px" top="20vh" draggable>
|
<el-form ref="deliverFormRef" :model="deliverObj" :rules="deliverRules" label-width="80px">
|
<el-form-item label="快递单号" prop="deliverCode">
|
<el-input v-model="deliverObj.deliverCode" placeholder="请填写快递单号" style="width: 200px"></el-input>
|
</el-form-item>
|
<el-form-item label="快递公司" prop="deliverCompany">
|
<el-input v-model="deliverObj.deliverCompany" placeholder="请填写快递公司" style="width: 200px"></el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="closeDeliver">取消</el-button>
|
<el-button type="primary" @click="sumbitDeliver()"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from "vue";
|
import { GetDataInfo } from "@/api/orders/index";
|
import { getList, getInfo, saveDeliver } from "@/api/orders/delivery";
|
import type { FormInstance } from "element-plus";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { order_type, pay_type } = proxy.useDict("order_type", "pay_type");
|
const state = reactive({
|
dataTable: [] as any[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: true,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
dataInfo: {} as any, //关联订单数据详情
|
_dataInfo: {} as any, //配送单详情
|
showSearch: true, //是否显示分类
|
isOpenInfo: false,
|
isOpenAboutInfo: false,
|
isOpenRate: false,
|
});
|
const { dataTable, total, tableOption, power, showSearch, isOpenInfo, dataInfo, isOpenAboutInfo, _dataInfo, isOpenRate } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region 查询
|
|
const queryRef = ref<FormInstance>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
aboutId: "", //订单号
|
aboutType: "",
|
deliverCode: "",
|
deliverCompany: "",
|
receiverName: "",
|
receiverAddress: "",
|
receiverPhone: "",
|
deliverState: "",
|
receiverState: "",
|
verifyState: "",
|
});
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
await getList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.total = res.total;
|
state.tableOption.loading = false;
|
}
|
});
|
};
|
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
|
//#endregion
|
|
//#region 发货
|
|
const deliverObj = reactive({
|
deliverCode: "",
|
deliverCompany: "",
|
id: 0,
|
});
|
const deliverFormRef = ref();
|
|
const deliverRules = {
|
deliverCode: [{ required: true, message: "请填写快递单号", trigger: "change" }],
|
deliverCompany: [{ required: true, message: "请填写快递公司", trigger: "change" }],
|
};
|
|
const handleDeliver = (e: any) => {
|
deliverObj.id = e.id;
|
state.isOpenRate = true;
|
};
|
|
const closeDeliver = () => {
|
deliverObj.deliverCode = "";
|
deliverObj.deliverCompany = "";
|
state.isOpenRate = false;
|
};
|
|
/**
|
* 校验
|
*/
|
const sumbitDeliver = () => {
|
deliverFormRef.value!.validate((valid: any) => {
|
if (valid) {
|
sumbitDeliverOutorder();
|
}
|
});
|
};
|
|
/**
|
* 发货
|
*/
|
const sumbitDeliverOutorder = async () => {
|
await saveDeliver(deliverObj).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("发货成功");
|
closeDeliver();
|
getDataList();
|
} else {
|
proxy.$modal.msgError(res.msg);
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 配送单详情
|
|
const handleInfo = (e: any) => {
|
getDataInfo(e.id, () => {
|
state.isOpenInfo = true;
|
});
|
};
|
|
const getDataInfo = (e: number, f: () => void) => {
|
getInfo(e).then((res) => {
|
if (res.code == 200) {
|
state._dataInfo = res.data;
|
if (f != null) {
|
f();
|
}
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 关联订单详情
|
|
const orderState = [
|
{ label: "待支付", value: "1" },
|
{ label: "待发货", value: "2" },
|
{ label: "待收货", value: "3" },
|
{ label: "已完成", value: "4" },
|
{ label: "已取消", value: "5" },
|
];
|
const sendTypes = [
|
{ label: "快递", value: "1" },
|
{ label: "自提", value: "2" },
|
{ label: "寄存", value: "3" },
|
];
|
|
//#region commonDisp
|
/**
|
* 发货类型
|
* @param e
|
*/
|
const dispSendType = (e: string) => {
|
return sendTypes.find((f) => f.value == e)?.label;
|
};
|
/**
|
* 订单状态
|
* @param e
|
*/
|
const dispOrderState = (e: string) => {
|
return orderState.find((f) => f.value == e)?.label;
|
};
|
|
/**
|
* 订单类型
|
* @param e
|
*/
|
const dispOrderType = (e: string) => {
|
let stt = order_type.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
/**
|
* 支付方式
|
* @param e
|
*/
|
const dispPayType = (e: string) => {
|
let stt = pay_type.value.find((f: Dict.dictType) => f.value == e);
|
return stt ? stt.label : "";
|
};
|
|
//#endregion
|
|
/**
|
* 查看详情
|
*/
|
const handleAboutInfo = (e: number) => {
|
getAboutInfo(e, () => {
|
state.isOpenAboutInfo = true;
|
});
|
};
|
|
/**
|
* 查看详情
|
*/
|
const getAboutInfo = (e: number, f: () => void) => {
|
GetDataInfo(e).then((res) => {
|
if (res.code == 200) {
|
state.dataInfo = res.data;
|
f();
|
}
|
});
|
};
|
//#endregion
|
</script>
|
|
<style scoped lang="scss">
|
.el-table :deep(.danger-row) {
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
}
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
// margin-left: 20px;
|
align-items: center;
|
.el-input__wrapper {
|
padding: 0px !important;
|
}
|
}
|
// .td {
|
// overflow: hidden;
|
// }
|
// :deep(.el-descriptions__table) {
|
// table-layout: fixed;
|
// }
|
:deep(.el-descriptions__cell) {
|
padding: 8px 0px !important;
|
}
|
// .custom-item-sty {
|
// color: #333;
|
// padding: 8px 0px;
|
// font-weight: bold;
|
// overflow-x: hidden;
|
// }
|
</style>
|
