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

<template>
  <div class="contract-preview">
    <div v-if="contract" class="preview-content">
      <h3 style="margin-bottom: 20px; color: #303133; display: flex; justify-content: space-between; align-items: center;">
        {{ contract.contractName }}
        <el-select v-hasPermi="['crm:contract:status']" v-model="contract.status" placeholder="请选择合同状态" style="width: 150px;" @change="handleStatusChange">
          <el-option label="草稿" :value="0" />
          <el-option label="已生效" :value="1" />
          <el-option label="已作废" :value="2" />
          <el-option label="已完成" :value="3" />
        </el-select>
      </h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="合同编号">{{ contract.contractCode }}</el-descriptions-item>
        <el-descriptions-item label="合同状态">
          <el-tag :type="contract.status == 0 ? 'info' : contract.status == 1 ? 'success' : contract.status == 2 ? 'danger' : 'primary'">
            {{ contract.status == 0 ? '草稿' : contract.status == 1 ? '已生效' : contract.status == 2 ? '已作废' : '已完成' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="供方">{{ contract.supplier }}</el-descriptions-item>
        <el-descriptions-item label="需方">{{ contract.customer }}</el-descriptions-item>
        <el-descriptions-item label="签订时间">{{ parseTime(contract.signTime, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="交货日期">{{ parseTime(contract.deliveryDate, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="签订地点">{{ contract.signLocation }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ contract.remark }}</el-descriptions-item>
      </el-descriptions>
      
      <div style="margin-top: 20px;">
        <h4 style="margin-bottom: 10px; color: #606266;">一、产品内容</h4>
        <OrderDetail :orderId="contract.orderId" :remark="contract.remark" readonly />
        <!-- <ProductContent v-model="contract.productContent" readonly /> -->
        <!-- <div v-html="contract.productContent" style="border: 1px solid #e4e7ed; padding: 10px; border-radius: 4px;"></div> -->
      </div>
      
      <div>
        <div v-html="contract.contractContent" style="border: 1px solid #e4e7ed; padding: 10px; border-radius: 4px;"></div>
      </div>

      <div style="border: 1px solid #e4e7ed; padding: 10px; border-radius: 4px;">
        <el-descriptions :column="2">
          <el-descriptions-item label="供方（甲方）">{{ contract.supplier }}</el-descriptions-item>
          <el-descriptions-item label="需方（乙方）">{{ contract.customer }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ contract.supplierAddress }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ contract.customerAddress }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ contract.supplierPhone }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ contract.customerPhone }}</el-descriptions-item>
          <el-descriptions-item label="开户行">{{ contract.supplierBank }}</el-descriptions-item>
          <el-descriptions-item label="开户行">{{ contract.customerBank }}</el-descriptions-item>
          <el-descriptions-item label="账号">{{ contract.supplierAccount }}</el-descriptions-item>
          <el-descriptions-item label="账号">{{ contract.customerAccount }}</el-descriptions-item>
          <el-descriptions-item label="税号">{{ contract.supplierTaxNo }}</el-descriptions-item>
          <el-descriptions-item label="税号">{{ contract.customerTaxNo }}</el-descriptions-item>
        </el-descriptions>
      </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 ProductContent from './ProductContent.vue';
import OrderDetail from './OrderDetail.vue';

export default {
  name: "ContractPreview",
  components: {
    ProductContent,
    OrderDetail
  },
  props: {
    contract: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      statusOptions: [
        { label: '草稿', value: '0' },
        { label: '已生效', value: '1' },
        { label: '已作废', value: '2' },
        { label: '已完成', value: '3' }
      ],
    }
  },
  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);
    },
    handleStatusChange(value) {
      this.$emit('updateStatus', value);
    }
  }
};
</script>

<style scoped>
.contract-preview {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.preview-content {
  height: 100%;
  overflow-y: auto;
}

.no-selection {
  height: 100%;
}
</style>