klp-oa/klp-ui/src/views/crm/contract/components/ContractTabs.vue

<template>
  <div class="contract-tabs">
    <div v-if="orderId" class="tabs-content">
      <el-tabs v-model="activeTab" type="border-card">
        <!-- <el-tab-pane label="订单编辑" name="edit" v-hasPermi="['crm:order:edit']">
          <div class="order-detail" v-if="activeTab === 'edit'">
            <el-descriptions title="订单明细" />
            <OrderDetail :orderId="currentOrder.orderId" />
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="财务状态" name="finance" v-hasPermi="['crm:order:finance']">
          <div class="order-finance" v-if="activeTab === 'finance'">
            <!-- 财务状态内容 -->
            <ReceiveTable :order="currentOrder" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="订单异议" name="dispute" v-hasPermi="['crm:order:objection']">
          <div class="order-dispute" v-if="activeTab === 'dispute'">
            <!-- 订单异议内容 -->
            <OrderObjection :order="currentOrder" />
          </div>
        </el-tab-pane>
         <el-tab-pane label="生产成果" name="product">
          <div class="order-record" v-if="activeTab === 'product'">
            <!-- 生产成果内容 -->
            <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">
          <div class="order-record" v-if="activeTab === 'coil'">
            <!-- 发货配卷内容 -->
            <CoilTable :data="coilList" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="发货单据" name="delivery">
          <div class="order-record" v-if="activeTab === 'delivery'">
            <!-- 发货单内容 -->
            <DeliveryTable :data="deliveryWaybillList" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="合同附件" name="attachment" v-hasPermi="['crm:order:record']">
          <div class="attachment-item">
            <h4>商务附件</h4>
            <FileList :oss-ids="contractAttachment" />
          </div>
          <div class="attachment-item">
            <h4>技术附件</h4>
            <FileList :oss-ids="technicalAgreement" />
          </div>
          <div class="attachment-item">
            <h4>排产函</h4>
            <FileList :oss-ids="otherAttachment" />
          </div>
          <div class="attachment-item">
            <h4>其他附件</h4>
            <FileList :oss-ids="form.annexFiles" />
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="操作记录" name="record" v-hasPermi="['crm:order:record']">
          <div class="order-record" v-if="activeTab === 'record'">
            <OrderRecord :orderId="currentOrder.orderId" />
          </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="请先选择合同" />
    </div>
  </div>
</template>

<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";

// 导入可能需要的组件
import OrderDetail from "../../components/OrderDetail.vue";
import OrderEdit from "../../components/OrderEdit.vue";
import ReceiveTable from "../../components/ReceiveTable.vue";
import OrderObjection from "../../components/OrderObjection.vue";
import OrderRecord from "../../components/OrderRecord.vue";

export default {
  name: "ContractTabs",
  components: {
    CoilTable,
    ContractSelect,
    FileList,
    DeliveryTable,
    OrderDetail,
    OrderEdit,
    ReceiveTable,
    OrderObjection,
    OrderRecord
  },
  props: {
    orderId: {
      type: [Number, String],
      default: null
    },
    coilList: {
      type: Array,
      default: () => []
    },
    productList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 附件字段
    contractAttachment: {
      type: String,
      default: ''
    },
    technicalAgreement: {
      type: String,
      default: ''
    },
    otherAttachment: {
      type: String,
      default: ''
    },
    // 新增必要的props
    form: {
      type: Object,
      default: () => ({})
    },
    currentOrder: {
      type: Object,
      default: () => ({})
    },
    deliveryWaybillList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 活动tab
      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 '';
      const d = new Date(time);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, '0');
      const day = d.getDate().toString().padStart(2, '0');
      const hours = d.getHours().toString().padStart(2, '0');
      const minutes = d.getMinutes().toString().padStart(2, '0');
      const seconds = d.getSeconds().toString().padStart(2, '0');
      return pattern
        .replace('{y}', year)
        .replace('{m}', month)
        .replace('{d}', day)
        .replace('{h}', hours)
        .replace('{i}', minutes)
        .replace('{s}', seconds);
    },
  }
};
</script>