feat: 新增多项功能并优化多个页面交互

1. 新增批量修改钢卷合同接口与合同批量转单功能 2. 优化KLPTable多选列默认位置与物料预警查询交互 3. 升级CoilTable支持多选与自定义操作栏 4. 新增菜单导出功能 5. 优化钢卷面板列宽与操作按钮文案
2026-06-24 17:51:14 +08:00
parent fa84bae4f2
commit a4f8ecb48b
8 changed files with 255 additions and 75 deletions
--- a/klp-ui/src/views/crm/components/CoilTable.vue
+++ b/klp-ui/src/views/crm/components/CoilTable.vue
@@ -1,11 +1,17 @@
 <template>
  <div>
-    <!-- 统计信息 -->
-    <div class="coil-stats" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
-      <span style="margin-right: 20px;"><strong>总卷数：{{ totalCoils }}</strong></span>
-      <span><strong>总净重：{{ totalNetWeight }} kg</strong></span>
+    <!-- 统计信息 + 操作栏 -->
+    <div class="coil-toolbar" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px; display: flex; align-items: center; justify-content: space-between;">
+      <div class="coil-stats">
+        <span style="margin-right: 20px;"><strong>总卷数：{{ totalCoils }}</strong></span>
+        <span><strong>总净重：{{ totalNetWeight }} kg</strong></span>
+      </div>
+      <div class="coil-actions">
+        <slot name="filter-actions" :selectedRows="selectedRows" :clearSelection="clearSelection" />
+      </div>
    </div>
-    <KLPTable :data="data" :floatLayer="true" :floatLayerConfig="floatLayerConfig" :height="tableHeight">
+    <KLPTable ref="klpTable" :data="data" :floatLayer="true" :floatLayerConfig="floatLayerConfig" :height="tableHeight"
+      :selectionColumn="showSelection" @selection-change="handleSelectionChange">
      <el-table-column label="入场卷号" align="center" prop="enterCoilNo">
        <template slot-scope="scope">
          <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
@@ -90,6 +96,10 @@ export default {
    tableHeight: {
      type: [String, Number],
      default: ''
+    },
+    showSelection: {
+      type: Boolean,
+      default: false
    }
  },
  components: {
@@ -113,6 +123,7 @@ export default {
  },
  data() {
    return {
+      selectedRows: [],
      floatLayerConfig: {
        columns: [
          { label: '入场卷号', prop: 'enterCoilNo' },
@@ -151,6 +162,16 @@ export default {
    }
  },
  methods: {
+    handleSelectionChange(selection) {
+      this.selectedRows = selection;
+      this.$emit('selection-change', selection);
+    },
+    clearSelection() {
+      if (this.$refs.klpTable) {
+        this.$refs.klpTable.clearSelection();
+      }
+      this.selectedRows = [];
+    },
    /** 预览标签 */
    handlePreviewLabel(row) {
      this.labelRender.visible = true;
--- a/klp-ui/src/views/crm/contract/components/ContractTabs.vue
+++ b/klp-ui/src/views/crm/contract/components/ContractTabs.vue
@@ -24,7 +24,15 @@
         <el-tab-pane label="生产成果" name="product">
          <div class="order-record" v-if="activeTab === 'product'">
            <!-- 生产成果内容 -->
-            <CoilTable :data="productList || []" />
+            <CoilTable ref="productCoilTable" :data="productList || []" :showSelection="true"
+              @selection-change="handleProductSelectionChange">
+              <template slot="filter-actions" slot-scope="{ selectedRows }">
+                <el-button type="primary" size="mini" icon="el-icon-refresh"
+                  :disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
+                  批量转单
+                </el-button>
+              </template>
+            </CoilTable>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发货配卷" name="coil">
@@ -63,6 +71,20 @@
          </div>
        </el-tab-pane> -->
      </el-tabs>
+
+      <!-- 批量转单 - 选择目标合同弹窗 -->
+      <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 type="primary" :disabled="!batchTargetContractId" :loading="batchTransferLoading"
+            @click="confirmBatchTransfer">确认转单</el-button>
+        </span>
+      </el-dialog>
    </div>
    <div v-else class="no-selection" style="display: flex; align-items: center; justify-content: center; height: 100%;">
      <el-empty description="请先选择合同" />
@@ -73,6 +95,8 @@
 <script>
 // import OrderPage from "@/views/crm/order/index.vue";
 import CoilTable from "../../components/CoilTable.vue";
+import ContractSelect from "@/components/KLPService/ContractSelect";
+import { batchUpdateContractCoil } from "@/api/wms/coil";
 import FileList from "@/components/FileList";
 import DeliveryTable from "../../components/DeliveryTable.vue";

@@ -87,6 +111,7 @@ export default {
  name: "ContractTabs",
  components: {
    CoilTable,
+    ContractSelect,
    FileList,
    DeliveryTable,
    OrderDetail,
@@ -142,10 +167,51 @@ export default {
  data() {
    return {
      // 活动tab
-      activeTab: "finance"
+      activeTab: "finance",
+      selectedProductRows: [],
+      batchTransferDialogVisible: false,
+      batchTargetContractId: '',
+      batchTransferCoilIds: [],
+      batchTransferLoading: false
    };
  },
  methods: {
+    handleProductSelectionChange(selection) {
+      this.selectedProductRows = selection;
+    },
+    handleBatchTransferContract(selectedRows) {
+      if (!selectedRows || !selectedRows.length) {
+        this.$message.warning('请先选择需要转单的钢卷');
+        return;
+      }
+      this.batchTransferCoilIds = selectedRows.map(row => row.coilId);
+      this.batchTargetContractId = '';
+      this.batchTransferDialogVisible = true;
+    },
+    confirmBatchTransfer() {
+      const coilIds = this.batchTransferCoilIds;
+      const contractId = this.batchTargetContractId;
+      if (!contractId) {
+        this.$message.warning('请选择目标合同');
+        return;
+      }
+      this.batchTransferLoading = true;
+      batchUpdateContractCoil(contractId, coilIds).then(res => {
+        this.$message.success(`成功将 ${coilIds.length} 卷钢卷转入目标合同`);
+        this.batchTransferDialogVisible = false;
+        // 刷新生产成果列表
+        this.$emit('refresh-product');
+        // 清除选中
+        if (this.$refs.productCoilTable) {
+          this.$refs.productCoilTable.clearSelection();
+        }
+      }).catch(err => {
+        console.error('批量转单失败：', err);
+        this.$message.error('批量转单失败，请重试');
+      }).finally(() => {
+        this.batchTransferLoading = false;
+      });
+    },
    // 解析时间
    parseTime(time, pattern) {
      if (!time) return '';
--- a/klp-ui/src/views/crm/contract/index.vue
+++ b/klp-ui/src/views/crm/contract/index.vue
@@ -27,7 +27,8 @@
      <!-- 右侧下方：Tab标签页 -->
      <div class="tab-panel" ref="tabPanel" style="flex: 1; overflow-y: auto;">
        <ContractTabs :orderId="form.orderId" :deliveryWaybillList="wmsDeliveryWaybills" :coilList="coilList" :contract-attachment="form.businessAnnex" :technical-agreement="form.techAnnex"
-          :other-attachment="form.productionSchedule" :currentOrder="form" :productList="form.coilList" />
+          :other-attachment="form.productionSchedule" :currentOrder="form" :productList="form.coilList"
+          @refresh-product="handleRefreshProduct" />
      </div>
    </div>
    <div v-else style="flex: 1; display: flex; flex-direction: column;">
@@ -508,6 +509,17 @@ export default {
        this.coilList = response.data || [];
      })
    },
+    /** 刷新生产成果列表（批量转单后调用） */
+    handleRefreshProduct() {
+      if (!this.form.orderId) return;
+      getOrder(this.form.orderId).then(res => {
+        if (res.data) {
+          this.form.coilList = res.data.coilList || [];
+        }
+      }).catch(err => {
+        console.error('刷新生产成果失败：', err);
+      });
+    },
    /** 表单重置 */
    reset() {
      this.form = {