|
|
@@ -0,0 +1,521 @@
|
|
|
+<template>
|
|
|
+ <div class="shipment-status-query">
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud
|
|
|
+ :option="option"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :page.sync="page"
|
|
|
+ v-model="form"
|
|
|
+ ref="crud"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @row-click="rowClick"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ @click="onLoad"
|
|
|
+ >
|
|
|
+ 刷新
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 发货状态列插槽 -->
|
|
|
+ <template slot="shipmentStatus" slot-scope="{row}">
|
|
|
+ <el-tag :type="getStatusType(row.shipmentStatus)">
|
|
|
+ {{ getStatusText(row.shipmentStatus) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 操作列插槽 -->
|
|
|
+ <template slot="menu" slot-scope="{row}">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="viewDetails(row)"
|
|
|
+ >
|
|
|
+ 查看明细
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="viewTracking(row)"
|
|
|
+ >
|
|
|
+ 物流跟踪
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+
|
|
|
+ <!-- 发货明细对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="发货明细"
|
|
|
+ :visible.sync="detailDialogVisible"
|
|
|
+ width="80%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <avue-crud
|
|
|
+ :option="detailOption"
|
|
|
+ :table-loading="detailLoading"
|
|
|
+ :data="detailData"
|
|
|
+ :page.sync="detailPage"
|
|
|
+ ref="detailCrud"
|
|
|
+ @size-change="detailSizeChange"
|
|
|
+ @current-change="detailCurrentChange"
|
|
|
+ >
|
|
|
+ </avue-crud>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 物流跟踪对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="物流跟踪信息"
|
|
|
+ :visible.sync="trackingDialogVisible"
|
|
|
+ width="80%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <avue-crud
|
|
|
+ :option="trackingOption"
|
|
|
+ :table-loading="trackingLoading"
|
|
|
+ :data="trackingData"
|
|
|
+ :page.sync="trackingPage"
|
|
|
+ ref="trackingCrud"
|
|
|
+ @size-change="trackingSizeChange"
|
|
|
+ @current-change="trackingCurrentChange"
|
|
|
+ >
|
|
|
+ <!-- 跟踪状态列插槽 -->
|
|
|
+ <template slot="trackingStatus" slot-scope="{row}">
|
|
|
+ <el-tag :type="getTrackingStatusType(row.trackingStatus)">
|
|
|
+ {{ row.trackingStatus }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 异常状态列插槽 -->
|
|
|
+ <template slot="isException" slot-scope="{row}">
|
|
|
+ <el-tag :type="row.isException ? 'danger' : 'success'">
|
|
|
+ {{ row.isException ? '异常' : '正常' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getOrderShipmentList, getShipmentItemList, getShipmentTrackingList } from '@/api/shipment'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ShipmentStatusQuery',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ query: {},
|
|
|
+ loading: true,
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+
|
|
|
+ // 明细相关
|
|
|
+ detailDialogVisible: false,
|
|
|
+ detailLoading: false,
|
|
|
+ detailData: [],
|
|
|
+ detailPage: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ currentShipment: null,
|
|
|
+
|
|
|
+ // 跟踪相关
|
|
|
+ trackingDialogVisible: false,
|
|
|
+ trackingLoading: false,
|
|
|
+ trackingData: [],
|
|
|
+ trackingPage: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+
|
|
|
+ // 主表配置
|
|
|
+ option: {
|
|
|
+ height: 'auto',
|
|
|
+ calcHeight: 30,
|
|
|
+ tip: false,
|
|
|
+ searchShow: true,
|
|
|
+ searchMenuSpan: 6,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ viewBtn: true,
|
|
|
+ editBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ addBtn: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '发货单号',
|
|
|
+ prop: 'shipmentNo',
|
|
|
+ search: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '订单编号',
|
|
|
+ prop: 'orderCode',
|
|
|
+ search: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发货日期',
|
|
|
+ prop: 'shipmentDate',
|
|
|
+ type: 'date',
|
|
|
+ format: 'YYYY-MM-DD',
|
|
|
+ valueFormat: 'YYYY-MM-DD',
|
|
|
+ search: true,
|
|
|
+ searchRange: true,
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '承运商',
|
|
|
+ prop: 'carrierName',
|
|
|
+ search: true,
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '运单号',
|
|
|
+ prop: 'trackingNo',
|
|
|
+ search: true,
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '运输方式',
|
|
|
+ prop: 'shippingMethod',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发货状态',
|
|
|
+ prop: 'shipmentStatus',
|
|
|
+ slot: true,
|
|
|
+ search: true,
|
|
|
+ type: 'select',
|
|
|
+ dicData: [
|
|
|
+ { label: '待发货', value: 1 },
|
|
|
+ { label: '已发货', value: 2 },
|
|
|
+ { label: '运输中', value: 3 },
|
|
|
+ { label: '已送达', value: 4 },
|
|
|
+ { label: '已签收', value: 5 }
|
|
|
+ ],
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '包裹数',
|
|
|
+ prop: 'totalPackages',
|
|
|
+ width: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总重量(kg)',
|
|
|
+ prop: 'totalWeight',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总体积(m³)',
|
|
|
+ prop: 'totalVolume',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发货人',
|
|
|
+ prop: 'shipperName',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '创建时间',
|
|
|
+ prop: 'createTime',
|
|
|
+ type: 'datetime',
|
|
|
+ format: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ width: 160
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 明细表配置
|
|
|
+ detailOption: {
|
|
|
+ height: 400,
|
|
|
+ tip: false,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ menu: false,
|
|
|
+ addBtn: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '物料编码',
|
|
|
+ prop: 'itemCode',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '物料名称',
|
|
|
+ prop: 'itemName',
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '规格',
|
|
|
+ prop: 'specs',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '发货数量',
|
|
|
+ prop: 'shippedQuantity',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '包装号',
|
|
|
+ prop: 'packageNo',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '批次号',
|
|
|
+ prop: 'batchNo',
|
|
|
+ width: 120
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跟踪表配置
|
|
|
+ trackingOption: {
|
|
|
+ height: 400,
|
|
|
+ tip: false,
|
|
|
+ border: true,
|
|
|
+ index: true,
|
|
|
+ menu: false,
|
|
|
+ addBtn: false,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '运单号',
|
|
|
+ prop: 'trackingNo',
|
|
|
+ width: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '跟踪状态',
|
|
|
+ prop: 'trackingStatus',
|
|
|
+ slot: true,
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '位置',
|
|
|
+ prop: 'location',
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '事件时间',
|
|
|
+ prop: 'eventTime',
|
|
|
+ type: 'datetime',
|
|
|
+ format: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ width: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '事件描述',
|
|
|
+ prop: 'eventDesc',
|
|
|
+ width: 250
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '异常状态',
|
|
|
+ prop: 'isException',
|
|
|
+ slot: true,
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '异常类型',
|
|
|
+ prop: 'exceptionType',
|
|
|
+ width: 120
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['permission'])
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 获取发货状态类型
|
|
|
+ getStatusType(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: 'info', // 待发货
|
|
|
+ 2: 'warning', // 已发货
|
|
|
+ 3: 'primary', // 运输中
|
|
|
+ 4: 'success', // 已送达
|
|
|
+ 5: 'success' // 已签收
|
|
|
+ }
|
|
|
+ return statusMap[status] || 'info'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取发货状态文本
|
|
|
+ getStatusText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: '待发货',
|
|
|
+ 2: '已发货',
|
|
|
+ 3: '运输中',
|
|
|
+ 4: '已送达',
|
|
|
+ 5: '已签收'
|
|
|
+ }
|
|
|
+ return statusMap[status] || '未知'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取跟踪状态类型
|
|
|
+ getTrackingStatusType(status) {
|
|
|
+ if (status.includes('运输中') || status.includes('在途')) {
|
|
|
+ return 'primary'
|
|
|
+ } else if (status.includes('已送达') || status.includes('已签收')) {
|
|
|
+ return 'success'
|
|
|
+ } else if (status.includes('异常') || status.includes('延误')) {
|
|
|
+ return 'danger'
|
|
|
+ }
|
|
|
+ return 'info'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载数据
|
|
|
+ onLoad() {
|
|
|
+ this.loading = true
|
|
|
+ getOrderShipmentList({
|
|
|
+ ...this.query,
|
|
|
+ current: this.page.currentPage,
|
|
|
+ size: this.page.pageSize
|
|
|
+ }).then(res => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.data = data.records
|
|
|
+ this.page.total = data.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.query = params
|
|
|
+ this.page.currentPage = 1
|
|
|
+ this.onLoad()
|
|
|
+ done()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置搜索
|
|
|
+ searchReset() {
|
|
|
+ this.query = {}
|
|
|
+ this.page.currentPage = 1
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分页大小改变
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 当前页改变
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 行点击
|
|
|
+ rowClick(row, column, event) {
|
|
|
+ this.viewDetails(row)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看明细
|
|
|
+ viewDetails(row) {
|
|
|
+ this.currentShipment = row
|
|
|
+ this.detailDialogVisible = true
|
|
|
+ this.loadShipmentDetails(row.shipmentNo)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载发货明细
|
|
|
+ loadShipmentDetails(shipmentNo) {
|
|
|
+ this.detailLoading = true
|
|
|
+ getShipmentItemList({
|
|
|
+ shipmentNo: shipmentNo,
|
|
|
+ current: this.detailPage.currentPage,
|
|
|
+ size: this.detailPage.pageSize
|
|
|
+ }).then(res => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.detailData = data.records
|
|
|
+ this.detailPage.total = data.total
|
|
|
+ this.detailLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 明细分页大小改变
|
|
|
+ detailSizeChange(pageSize) {
|
|
|
+ this.detailPage.pageSize = pageSize
|
|
|
+ this.loadShipmentDetails(this.currentShipment.shipmentNo)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 明细当前页改变
|
|
|
+ detailCurrentChange(currentPage) {
|
|
|
+ this.detailPage.currentPage = currentPage
|
|
|
+ this.loadShipmentDetails(this.currentShipment.shipmentNo)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看物流跟踪
|
|
|
+ viewTracking(row) {
|
|
|
+ this.currentShipment = row
|
|
|
+ this.trackingDialogVisible = true
|
|
|
+ this.loadTrackingInfo(row.shipmentNo)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载物流跟踪信息
|
|
|
+ loadTrackingInfo(shipmentNo) {
|
|
|
+ this.trackingLoading = true
|
|
|
+ getShipmentTrackingList({
|
|
|
+ shipmentNo: shipmentNo,
|
|
|
+ current: this.trackingPage.currentPage,
|
|
|
+ size: this.trackingPage.pageSize
|
|
|
+ }).then(res => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.trackingData = data.records
|
|
|
+ this.trackingPage.total = data.total
|
|
|
+ this.trackingLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.trackingLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跟踪分页大小改变
|
|
|
+ trackingSizeChange(pageSize) {
|
|
|
+ this.trackingPage.pageSize = pageSize
|
|
|
+ this.loadTrackingInfo(this.currentShipment.shipmentNo)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跟踪当前页改变
|
|
|
+ trackingCurrentChange(currentPage) {
|
|
|
+ this.trackingPage.currentPage = currentPage
|
|
|
+ this.loadTrackingInfo(this.currentShipment.shipmentNo)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.shipment-status-query {
|
|
|
+ padding: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .avue-crud__search .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+</style>
|
yz