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

<template>
  <div class="contract-tabs">
    <div v-if="contractId" class="tabs-content">
      <el-tabs v-model="activeTab" type="card" tab-position="top" v-loading="tabLoading">
        <el-tab-pane label="下发订单" name="second">
          <OrderPage v-if="activeTab === 'second'" :contractId="contractId" :customerId="customerId" />
        </el-tab-pane>
        <el-tab-pane label="财务状态" name="third">
          <KLPTable v-loading="loading" :data="financeList">
            <el-table-column label="收款日期" align="center" prop="dueDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="收款金额" align="center" prop="amount" />
            <el-table-column label="备注" align="center" prop="remark" />
          </KLPTable>
        </el-tab-pane>
        <el-tab-pane label="订单异议" name="fourth">
          <el-table v-loading="loading" :data="objectionList">
            <el-table-column label="编号" align="center" prop="objectionCode" />
            <el-table-column label="状态" align="center" prop="objectionStatus">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.objectionStatus === 0" type="danger">待处理</el-tag>
                <el-tag v-else-if="scope.row.objectionStatus === 1" type="success">已处理</el-tag>
                <el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="处理人" align="center" prop="handleUser" />
            <el-table-column label="处理时间" align="center" prop="handleTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="发货配卷" name="fifth">
          <CoilTable :data="coilList" />
        </el-tab-pane>
        <el-tab-pane label="合同附件" name="sixth">
          <div class="attachment-section">
            <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>
        </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";

export default {
  name: "ContractTabs",
  components: {
    OrderPage,
    CoilTable,
    FileList
  },
  props: {
    contractId: {
      type: [Number, String],
      default: null
    },
    customerId: {
      type: String,
      default: ''
    },
    financeList: {
      type: Array,
      default: () => []
    },
    objectionList: {
      type: Array,
      default: () => []
    },
    coilList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    tabLoading: {
      type: Boolean,
      default: false
    },
    // 附件字段
    contractAttachment: {
      type: String,
      default: ''
    },
    technicalAgreement: {
      type: String,
      default: ''
    },
    otherAttachment: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 活动tab
      activeTab: "second"
    };
  },
  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>

<style scoped>
.contract-tabs {
  height: 100%;
  overflow-y: auto;
}

.attachment-section {
  padding: 20px;
}

.attachment-item {
  margin-bottom: 10px;
}

.attachment-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.attachment-item .file-list-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}
</style>