From 41e640c8d1f852cc6e34dd14285ed0342f40151c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=98=8A=E5=A4=A9?=
 <15984976+n2319_0@user.noreply.gitee.com>
Date: Wed, 8 Jul 2026 16:04:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=BF=BD=E8=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/views/wms/post/aps/orderTrack.vue | 490 +++++++++++++++++++
 1 file changed, 490 insertions(+)
 create mode 100644 klp-ui/src/views/wms/post/aps/orderTrack.vue

diff --git a/klp-ui/src/views/wms/post/aps/orderTrack.vue b/klp-ui/src/views/wms/post/aps/orderTrack.vue
new file mode 100644
index 000000000..3942bc3f5
--- /dev/null
+++ b/klp-ui/src/views/wms/post/aps/orderTrack.vue
@@ -0,0 +1,490 @@
+<template>
+  <div class="app-container" style="height: calc(100vh - 84px); display: flex;">
+    <div class="left-panel" v-loading="orderLoading"
+      style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
+      <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
+          <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
+            <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable @keyup.enter.native="handleSearch"
+              style="width: 160px;" />
+            <el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
+            <el-button icon="el-icon-sort" size="mini" @click="toggleMoreFilter"
+              :class="showMoreFilter ? 'aps-btn-red' : 'aps-btn-silver'"></el-button>
+          </div>
+          <div style="font-size: 12px; color: #909399;">
+            共 <span class="aps-total-count">{{ total }}</span> 条记录
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px;">
+          <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
+            <span style="white-space: nowrap;">签订日期：</span>
+            <el-date-picker clearable v-model="queryParams.signDateStart" type="date" value-format="yyyy-MM-dd"
+              placeholder="签订开始" style="width: 150px;" @change="handleSearch" />
+            <span>~</span>
+            <el-date-picker clearable v-model="queryParams.signDateEnd" type="date" value-format="yyyy-MM-dd"
+              placeholder="签订结束" style="width: 150px;" @change="handleSearch" />
+          </div>
+          <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
+            <span style="white-space: nowrap;">交货日期：</span>
+            <el-date-picker clearable v-model="queryParams.deliveryDateStart" type="date" value-format="yyyy-MM-dd"
+              placeholder="交货开始" style="width: 150px;" @change="handleSearch" />
+            <span>~</span>
+            <el-date-picker clearable v-model="queryParams.deliveryDateEnd" type="date" value-format="yyyy-MM-dd"
+              placeholder="交货结束" style="width: 150px;" @change="handleSearch" />
+          </div>
+        </div>
+        <div v-show="showMoreFilter" class="more-filter"
+          style="margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
+            <el-form-item label="订单编号" prop="orderCode">
+              <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
+                @keyup.enter.native="handleSearch" />
+            </el-form-item>
+            <el-form-item label="销售员" prop="salesman">
+              <el-select v-model="queryParams.salesman" placeholder="请选择销售员" clearable style="width: 140px;">
+                <el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="订单状态" prop="orderStatus">
+              <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 140px;">
+                <el-option v-for="(value, key) in ORDER_STATUS" :key="value" :label="key" :value="value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="aps-btn-silver" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="custom-list">
+        <div class="list-body">
+          <div v-for="item in orderList" :key="item.orderId" class="list-item"
+            :class="{ 'list-item-active': currentOrder && currentOrder.orderId === item.orderId }"
+            @click="handleOrderClick(item)">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <div style="font-weight: bold;">{{ item.contractName }}</div>
+              </div>
+              <div style="font-size: 12px; color: #606266;">{{ item.companyName }}</div>
+            </div>
+            <div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
+              <span>销售员: {{ item.salesman }}</span>
+              <span style="margin-left: 20px;">合同号: {{ item.contractCode }}</span>
+            </div>
+            <div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
+              <span>签订时间: {{ item.signTime }}</span>
+              <span style="margin-left: 20px;">交货日期: {{ item.deliveryDate }}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <div style="font-size: 12px; color: #909399;">
+                签订地点: {{ item.signLocation || '-' }}
+              </div>
+              <el-tag :type="statusTagType(item.orderStatus)" size="small">{{ statusLabel(item.orderStatus) }}</el-tag>
+            </div>
+          </div>
+          <div v-if="orderList.length === 0 && !orderLoading"
+            style="padding: 40px; text-align: center; color: #909399;">
+            暂无订单数据
+          </div>
+        </div>
+      </div>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" style="padding: 10px; margin-bottom: 10px !important;" />
+    </div>
+    <div class="right-panel" v-if="currentOrder && currentOrder.orderId"
+      style="flex: 1; display: flex; flex-direction: column;">
+      <div class="detail-panel">
+        <div class="detail-card progress-card">
+          <div class="detail-card-header">
+            <span>完成进度</span>
+          </div>
+          <div class="detail-card-body progress-body">
+            <div class="progress-row">
+              <div class="progress-title">
+                已完成：{{ formatTon(completedKg) }} 吨 / {{ formatTon(plannedKg) }} 吨
+              </div>
+              <div class="progress-percent">{{ completionPercent.toFixed(2) }}%</div>
+            </div>
+            <el-progress :percentage="Number(completionPercent.toFixed(2))" :stroke-width="14"
+              :color="['#e6a23c', '#f56c6c', '#67c23a']" />
+          </div>
+        </div>
+        <div class="detail-card">
+          <div class="detail-card-header">
+            <span>合同总览 - 生产成果</span>
+          </div>
+          <div class="detail-card-body" style="padding: 12px;">
+            <div v-loading="productCoilLoading">
+              <CoilTable ref="productCoilTable" :data="productCoilList || []" :showSelection="true"
+                :pagination="productPagination" :total-statistics="productTotalStatistics"
+                @selection-change="handleProductSelectionChange" @page-change="handleProductPageChange">
+                <template slot="filter-actions" slot-scope="{ selectedRows }">
+                  <el-button class="aps-btn-red" size="mini" icon="el-icon-refresh"
+                    :disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
+                    批量转单
+                  </el-button>
+                </template>
+              </CoilTable>
+            </div>
+          </div>
+        </div>
+        <div class="detail-card">
+          <div class="detail-card-header">
+            <span>订单明细（{{ productList.length }} 条）</span>
+          </div>
+          <div class="detail-card-body" style="padding:0;">
+            <div v-if="productList.length > 0" class="aps-product-table-wrap">
+              <div class="aps-product-summary">
+                <span>产品名称：{{ productName }}</span>
+                <span>总数量：{{ totalQuantity }} 吨</span>
+                <span>含税总额：{{ totalTaxTotal }}</span>
+              </div>
+              <el-table :data="productList" border size="small" class="aps-product-table">
+                <el-table-column label="规格" prop="spec" min-width="120" />
+                <el-table-column label="材质" prop="material" width="100" align="center" />
+                <el-table-column label="数量(吨)" prop="quantity" width="90" align="right" />
+                <el-table-column label="含税单价" prop="taxPrice" width="100" align="right" />
+                <el-table-column label="含税总额" prop="taxTotal" width="100" align="right" />
+                <el-table-column label="无税单价" prop="noTaxPrice" width="100" align="right" />
+                <el-table-column label="无税总额" prop="noTaxTotal" width="100" align="right" />
+                <el-table-column label="税额" prop="taxAmount" width="90" align="right" />
+                <el-table-column label="备注" prop="remark" min-width="120" />
+              </el-table>
+            </div>
+            <el-empty v-else description="暂无产品明细" />
+          </div>
+        </div>
+      </div>
+      <el-dialog title="批量转单" :visible.sync="batchTransferDialogVisible" width="500px" append-to-body
+        @closed="batchTargetContractId = ''">
+        <div style="margin-bottom: 12px;">
+          已选择 <strong>{{ (batchTransferCoilIds || []).length }}</strong> 卷钢卷，请选择目标合同：
+        </div>
+        <ContractSelect v-model="batchTargetContractId" mode="all" />
+        <span slot="footer">
+          <el-button @click="batchTransferDialogVisible = false">取消</el-button>
+          <el-button class="aps-btn-red" :disabled="!batchTargetContractId" :loading="batchTransferLoading"
+            @click="confirmBatchTransfer">确认转单</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div v-else style="flex: 1; display: flex; flex-direction: column;">
+      <el-empty description="选择订单后查看内容" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listCrmOrder } from '@/api/aps/order'
+import { parseProductContent } from '@/utils/productContent'
+import { ORDER_STATUS } from '@/views/crm/js/enum'
+import CoilTable from '@/views/crm/components/CoilTable.vue'
+import ContractSelect from '@/components/KLPService/ContractSelect'
+import { batchUpdateContractCoil } from '@/api/wms/coil'
+import { listProductCoilsByContract, getProductCoilsStatisticsByContract } from '@/api/crm/coil'
+
+export default {
+  name: 'ApsOrderTrack',
+  components: { CoilTable, ContractSelect },
+  dicts: ['wip_pack_saleman'],
+  data() {
+    return {
+      ORDER_STATUS,
+      showMoreFilter: false,
+      orderLoading: false,
+      orderList: [],
+      total: 0,
+      currentOrder: null,
+      productList: [],
+      productName: '',
+      totalQuantity: 0,
+      totalTaxTotal: 0,
+      productCoilList: [],
+      selectedProductRows: [],
+      productCoilStatistics: {},
+      productPagination: { total: 0, currentPage: 1, pageSize: 20 },
+      productCoilLoading: false,
+      batchTransferDialogVisible: false,
+      batchTargetContractId: '',
+      batchTransferCoilIds: [],
+      batchTransferLoading: false,
+      queryParams: {
+        keyword: '',
+        orderCode: '',
+        salesman: '',
+        orderStatus: undefined,
+        signDateStart: undefined,
+        signDateEnd: undefined,
+        deliveryDateStart: undefined,
+        deliveryDateEnd: undefined,
+        pageNum: 1,
+        pageSize: 10
+      }
+    }
+  },
+  computed: {
+    productTotalStatistics() {
+      const stats = this.productCoilStatistics
+      if (!stats || Object.keys(stats).length === 0) return null
+      return {
+        totalCoils: stats.total_count || 0,
+        totalNetWeight: stats.total_net_weight || 0
+      }
+    },
+    plannedKg() {
+      const v = Number(this.totalQuantity) || 0
+      return v * 1000
+    },
+    completedKg() {
+      const stats = this.productCoilStatistics || {}
+      return Number(stats.total_net_weight) || 0
+    },
+    completionPercent() {
+      const planned = this.plannedKg
+      if (!planned) return 0
+      const percent = (this.completedKg / planned) * 100
+      if (!isFinite(percent) || isNaN(percent)) return 0
+      return Math.max(0, Math.min(100, percent))
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    toggleMoreFilter() {
+      this.showMoreFilter = !this.showMoreFilter
+    },
+    handleSearch() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.queryParams.orderCode = ''
+      this.queryParams.salesman = ''
+      this.queryParams.orderStatus = undefined
+      this.queryParams.signDateStart = undefined
+      this.queryParams.signDateEnd = undefined
+      this.queryParams.deliveryDateStart = undefined
+      this.queryParams.deliveryDateEnd = undefined
+      this.handleSearch()
+    },
+    getList() {
+      this.orderLoading = true
+      listCrmOrder(this.queryParams).then(res => {
+        this.orderList = res.rows || []
+        this.total = res.total || 0
+      }).catch(() => {
+        this.orderList = []
+        this.total = 0
+      }).finally(() => {
+        this.orderLoading = false
+      })
+    },
+    handleOrderClick(order) {
+      this.currentOrder = order
+      this.productPagination.currentPage = 1
+      this.parseProductContent(order)
+      this.fetchProductCoils()
+      this.fetchProductCoilStatistics()
+    },
+    parseProductContent(order) {
+      if (!order || !order.productContent) {
+        this.productList = []
+        this.productName = ''
+        this.totalQuantity = 0
+        this.totalTaxTotal = 0
+        return
+      }
+      const parsed = parseProductContent(order.productContent)
+      this.productList = parsed.products || []
+      this.productName = parsed.productName || ''
+      this.totalQuantity = parsed.totalQuantity || 0
+      this.totalTaxTotal = parsed.totalTaxTotal || 0
+    },
+    statusTagType(status) {
+      const map = { 0: 'info', 1: 'warning', 2: 'primary', 3: 'success', 4: 'success' }
+      return map[status] || 'info'
+    },
+    statusLabel(status) {
+      const labels = { 0: '待生产', 1: '生产中', 2: '部分发货', 3: '已发货', 4: '已签收' }
+      return labels[status] || '未知'
+    },
+    formatTon(kg) {
+      const v = Number(kg) || 0
+      return (v / 1000).toFixed(3)
+    },
+    fetchProductCoils() {
+      if (!this.currentOrder || !this.currentOrder.orderId) return
+      this.productCoilLoading = true
+      listProductCoilsByContract(this.currentOrder.orderId, {
+        pageNum: this.productPagination.currentPage,
+        pageSize: this.productPagination.pageSize
+      }).then(res => {
+        this.productCoilList = res.rows || []
+        this.productPagination.total = res.total || 0
+      }).finally(() => {
+        this.productCoilLoading = false
+      })
+    },
+    fetchProductCoilStatistics() {
+      if (!this.currentOrder || !this.currentOrder.orderId) return
+      getProductCoilsStatisticsByContract(this.currentOrder.orderId).then(res => {
+        this.productCoilStatistics = res.data || {}
+      })
+    },
+    handleProductSelectionChange(selection) {
+      this.selectedProductRows = selection
+    },
+    handleProductPageChange({ currentPage, pageSize }) {
+      this.productPagination.currentPage = currentPage
+      this.productPagination.pageSize = pageSize
+      this.fetchProductCoils()
+    },
+    handleBatchTransferContract(selectedRows) {
+      if (!selectedRows || !selectedRows.length) {
+        this.$message.warning('请先选择需要转单的钢卷')
+        return
+      }
+      this.batchTransferCoilIds = selectedRows.map(row => row.coilId)
+      this.batchTargetContractId = ''
+      this.batchTransferDialogVisible = true
+    },
+    confirmBatchTransfer() {
+      const contractId = this.batchTargetContractId
+      if (!contractId) {
+        this.$message.warning('请选择目标合同')
+        return
+      }
+      const coilIds = this.batchTransferCoilIds || []
+      if (!coilIds.length) {
+        this.$message.warning('未选择任何钢卷')
+        return
+      }
+      this.batchTransferLoading = true
+      batchUpdateContractCoil(contractId, coilIds).then(() => {
+        this.$message.success('转单成功')
+        this.batchTransferDialogVisible = false
+        this.fetchProductCoils()
+        this.fetchProductCoilStatistics()
+      }).finally(() => {
+        this.batchTransferLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import './scss/aps-theme.scss';
+
+.app-container {
+  overflow: hidden;
+  padding: 0;
+}
+
+.left-panel {
+  height: calc(100vh - 84px);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.right-panel {
+  height: calc(100vh - 84px);
+  overflow: hidden;
+  min-height: 0;
+}
+
+.custom-list {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.list-item {
+  padding: 10px;
+  border-bottom: 2px solid #dddddd;
+  cursor: pointer;
+}
+
+.list-item:hover {
+  background-color: $aps-silver-1;
+}
+
+.list-item-active {
+  background-color: $aps-red-1;
+  border-left: 3px solid $aps-red-2;
+}
+
+.aps-total-count {
+  color: $aps-red-2;
+  font-weight: bold;
+}
+
+.aps-btn-red {
+  @include aps-btn-red;
+}
+
+.aps-btn-silver {
+  @include aps-btn-silver;
+}
+
+.detail-panel {
+  flex: 1;
+  overflow-y: scroll;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: $aps-bg;
+  min-height: 0;
+}
+
+.detail-card {
+  background: $aps-white;
+  border: 1px solid $aps-border;
+  border-radius: $aps-radius;
+  box-shadow: $aps-shadow-sm;
+}
+
+.detail-card-header {
+  background: linear-gradient(to right, $aps-red-2, $aps-red-3);
+  color: white;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.detail-card-body {
+  padding: 14px;
+}
+
+.progress-body {
+  padding: 12px 14px;
+}
+
+.progress-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: #606266;
+  font-size: 12px;
+}
+
+.progress-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.progress-percent {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: $aps-red-2;
+}
+</style>