合同详情

jy-ui/src/views/business/contract/info/detail.vue

@@ -0,0 +1,233 @@
+<template>
+  <div style="max-height: calc(100vh - 190px)">
+    <div style="text-align: center; font-size: 20px; color: #409eff; font-weight: bold">
+      CONTRACT
+    </div>
+    <!-- 合同基本信息表 -->
+    <table class="contract-table">
+      <tr>
+        <th style="width: 16%">合同编号:</th>
+        <td colspan="3">{{ formData.data.contractNo }}</td>
+      </tr>
+      <tr>
+        <th style="width: 16%">签订日期:</th>
+        <td style="width: 34%">{{ convertDateFormat(formData.data.signingDate) }}</td>
+        <th style="width: 16%">报价有效期:</th>
+        <td style="width: 34%">{{ formData.data.validityDate }} days</td>
+      </tr>
+    </table>
+
+    <!-- 供需方信息表 -->
+    <table class="contract-table">
+      <tr>
+        <th style="width: 50%">供方:</th>
+        <th>需方:</th>
+      </tr>
+      <tr>
+        <td>{{ formData.data.sellerCompany }}</td>
+        <td>{{ formData.data.customerName }}</td>
+      </tr>
+      <tr>
+        <td>{{ formData.data.sellerAddress }}</td>
+        <td>{{ formData.data.customerAddress }}</td>
+      </tr>
+      <tr>
+        <td>{{ formData.data.sellerCountry }}</td>
+        <td>{{ formData.data.customerCountry }}</td>
+      </tr>
+      <tr>
+        <td>{{ formData.data.sellerContact }}</td>
+        <td>{{ formData.data.customerTelNum }}</td>
+      </tr>
+    </table>
+
+    <!-- 贸易信息表 -->
+    <table class="contract-table">
+      <tr>
+        <th>原产国:</th>
+        <th>目的国:</th>
+        <th>贸易方式:</th>
+      </tr>
+      <tr>
+        <td>{{ formData.data.sellerCountry }}</td>
+        <td>{{ formData.data.customerCountry }}</td>
+        <td>{{ formData.data.deliveryTerms }}</td>
+      </tr>
+      <tr>
+        <th>付款方式:</th>
+        <th>交货期:</th>
+        <th>运输方式:</th>
+      </tr>
+      <tr>
+        <td>{{ formData.data.paymentTerms }}</td>
+        <td>{{ formData.data.deliveryTime }} days</td>
+        <td>{{ formData.data.shippingMethod }}</td>
+      </tr>
+      <tr>
+        <th>装卸港:</th>
+        <th>目的港:</th>
+        <th>质保期:</th>
+      </tr>
+      <tr>
+        <td>{{ formData.data.placeOfDischarge }}</td>
+        <td>{{ formData.data.destination }}</td>
+        <td>{{ formData.data.warrantyPeriod }} days</td>
+      </tr>
+    </table>
+
+    <!-- 产品清单表 -->
+    <table class="contract-table">
+      <tr class="header-row">
+        <th>产品编号</th>
+        <th>产品描述</th>
+        <th>颜色</th>
+        <th>数量 (Pcs)</th>
+        <th>单价</th>
+        <th>总价</th>
+      </tr>
+      <template v-if="formData.data.list && formData.data.list.length > 0">
+        <tr v-for="(item, index) in formData.data.list" :key="index">
+          <td>{{ item.itemNo }}</td>
+          <td>{{ item.spuName }} {{ item.spec }}</td>
+          <td>{{ item.colour }}</td>
+          <td>{{ item.quantity }}</td>
+          <td>{{ item.unitPrice }}</td>
+          <td>{{ formData.data.currency }} {{ item.amount }}</td>
+        </tr>
+      </template>
+      <tr>
+        <th colspan="5">小计:</th>
+        <td>{{ formData.data.currency }} {{ calculateAmount() }}</td>
+      </tr>
+      <tr>
+        <th colspan="5">保险费:</th>
+        <td>{{ formData.data.currency }} {{ formData.data.insurance }}</td>
+      </tr>
+      <tr>
+        <th colspan="5">运费:</th>
+        <td>{{ formData.data.currency }} {{ formData.data.freightPrice }}</td>
+      </tr>
+      <tr>
+        <th colspan="5">合计:</th>
+        <td>{{ formData.data.currency }} {{ formData.data.amount }}</td>
+      </tr>
+    </table>
+
+    <!-- 账户信息表（原文数据不完整，保留空表结构） -->
+    <table class="contract-table">
+      <tr>
+        <th style="width: 40%">账户信息:</th>
+        <td></td>
+      </tr>
+      <template v-if="formData.data.paymentType == 1">
+        <tr>
+          <th>账户名:</th>
+          <td>{{ formData.data.sellAccountName }}</td>
+        </tr>
+        <tr>
+          <th>银行账号:</th>
+          <td>{{ formData.data.sellBankAccount }}</td>
+        </tr>
+        <tr>
+          <th>开户银行:</th>
+          <td>{{ formData.data.sellBankName }}</td>
+        </tr>
+        <tr>
+          <th>联行号:</th>
+          <td>{{ formData.data.sellBankCnapsCode }}</td>
+        </tr>
+      </template>
+      <template v-else-if="formData.data.paymentType == 2">
+        <tr>
+          <th>支付宝:</th>
+          <td>{{ formData.data.sellAlipayAccount }}</td>
+        </tr>
+      </template>
+    </table>
+
+    <!-- 签名栏 -->
+    <div style="margin: 20px 0">签名:</div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+const props = defineProps({
+  rowData: Object,
+  detailData: Object
+})
+const formData = reactive({
+  data: {
+    items: []
+  }
+})
+const convertDateFormat = (dateString) => {
+  // 创建日期对象
+  const date = new Date(dateString)
+  // 提取日、月、年
+  const day = date.getDate()
+  // 确保月份以英文缩写形式显示
+  const monthNames = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec'
+  ]
+  const month = monthNames[date.getMonth()]
+  const year = date.getFullYear().toString().slice(-2) // 获取年份的后两位
+  // 组合成目标格式
+  return `${day}/${month}/${year}`
+}
+const calculateAmount = () => {
+  let amount = 0
+  if (formData.data.list && formData.data.list.length > 0) {
+    for (let i = 0; i < formData.data.list.length; i++) {
+      if (formData.data.list[i].quantity && formData.data.list[i].unitPrice) {
+        amount = Number(
+          Math.round(
+            (amount +
+              Number(formData.data.list[i].unitPrice) * Number(formData.data.list[i].quantity)) *
+              100
+          ) / 100
+        )
+      }
+    }
+  }
+  return amount
+}
+onMounted(() => {
+  formData.data = props.rowData
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+}
+.contract-table {
+  border-collapse: collapse;
+  margin: 20px 0;
+  width: 100%;
+}
+.contract-table th,
+.contract-table td {
+  border: 2px solid #000;
+  padding: 4px;
+  text-align: left;
+}
+.header-row {
+  font-weight: bold;
+  background-color: #f0f0f0;
+}
+::v-deep(.contract-table th) {
+  color: #409eff !important;
+}
+</style>

jy-ui/src/views/business/contract/info/index.vue

@@ -6,6 +6,7 @@ import { ColumnConfigType } from '@/components/ATable/type'
 import { StrAnyObj, StrAnyObjArr } from '@/typings'
 import { useHandleData } from '@/utils/useHandleData'
 import { getPageApi, getDetailApi, addApi, editApi, deleteApi } from '@/api/business/contract/info'
+import Detail from './detail.vue'
 
 const queryRef = ref<InstanceType<typeof AForm>>()
 const formRef = ref<InstanceType<typeof AForm>>()
@@ -87,12 +88,12 @@ const columnConfig: ColumnConfigType[] = [
     width: 120,
     handleConfig: [
       {
-        common: 'update',
+        common: 'detail',
         click(row) {
-          dialogVisible.value = true
-          dialogTitle.value = '编辑'
           getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
             formData.value = resp
+            dialogVisible.value = true
+            dialogTitle.value = '详情'
           })
         }
       }
@@ -111,7 +112,9 @@ const formConfig: FormConfigType[] = [
     type: 'input',
     prop: 'type',
     label: '合同类型 1-三梵合同，2-佰易来合同',
-    rule: [{ required: true, message: '合同类型 1-三梵合同，2-佰易来合同不能为空', trigger: 'blur' }]
+    rule: [
+      { required: true, message: '合同类型 1-三梵合同，2-佰易来合同不能为空', trigger: 'blur' }
+    ]
   },
   {
     type: 'input',
@@ -382,7 +385,7 @@ const formConfig: FormConfigType[] = [
     prop: 'tenantId',
     label: '租户id',
     rule: [{ required: true, message: '租户id不能为空', trigger: 'blur' }]
-  },
+  }
 ]
 
 onMounted(() => {
@@ -453,12 +456,14 @@ function handleRemove(idList: string[]) {
     </a-table>
 
     <a-dialog
+      v-if="dialogVisible"
       v-model="dialogVisible"
       :title="dialogTitle"
       @submit="formSubmit"
       @closed="formClosed"
+      style="width: 900px"
     >
-      <a-form ref="formRef" v-model="formData" :config="formConfig" :span="24"> </a-form>
+      <Detail :rowData="formData"></Detail>
     </a-dialog>
   </div>
 </template>