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

<template>
  <div class="contract-tabs">
    <div v-if="contractId" class="tabs-content">
      <div class="custom-tabbar" v-loading="tabLoading">
        <div 
          v-for="tab in tabs" 
          :key="tab.name" 
          class="tab-item"
          :class="{ active: activeTab === tab.name }"
          @click="activeTab = tab.name"
        >
          {{ tab.label }}
        </div>
      </div>
      <div class="tab-content">
        <OrderPage v-if="activeTab === 'second'" :contractId="contractId" :customerId="customerId" />
        <KLPTable v-else-if="activeTab === 'third'" 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-table v-else-if="activeTab === 'fourth'" 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>
        <CoilTable v-else-if="activeTab === 'fifth'" :data="coilList" />
        <div v-else-if="activeTab === 'sixth'" 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>
      </div>
    </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",
      // 标签页配置
      tabs: [
        { label: "下发订单", name: "second" },
        { label: "财务状态", name: "third" },
        { label: "订单异议", name: "fourth" },
        { label: "发货配卷", name: "fifth" },
        { label: "合同附件", name: "sixth" }
      ]
    };
  },
  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;
}

.tabs-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.custom-tabbar {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: #f5f7fa;
  padding: 4px;
  border-radius: 4px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.tab-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-item:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.tab-item.active {
  color: #409eff;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px;
}

.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>