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="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>
    </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 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,
    FileList,
    DeliveryTable,
    OrderDetail,
    OrderEdit,
    ReceiveTable,
    OrderObjection,
    OrderRecord
  },
  props: {
    orderId: {
      type: [Number, String],
      default: null
    },
    coilList: {
      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"
    };
  },
  methods: {
    // 解析时间
    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>