change: payment record 货款/国内运费 代码逻辑分离.

src/pages/payment-record/components/nav.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex">
+    <router-link
+      v-for="(item, index) in list"
+      :key="index"
+      :to="`/${item.link}?user=${route.query.user}`"
+      :class="[
+        'el-button',
+        {
+          'active-link': pageLink === item.link,
+          link: pageLink !== item.link,
+        },
+      ]"
+    >
+      {{ item.label }}
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'PaymentRecordNav',
+})
+</script>
+<script lang="ts" setup>
+import { computed, defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const list = ref([
+  {
+    label: '货款',
+    link: 'payment-record',
+  },
+  {
+    label: '国内运费',
+    link: 'payment-record2',
+  },
+  {
+    label: '国际运费',
+    link: 'payment-record3',
+  },
+  {
+    label: 'AU本地运费',
+    link: 'payment-record4',
+  },
+])
+const route = useRoute()
+const pageLink = computed(() => {
+  const index = list.value.findLastIndex((i) =>
+    new RegExp(i.link).test(route.fullPath),
+  )
+  return index > -1 ? list.value[index].link : list.value[0].link
+})
+</script>
+
+<style lang="scss" scoped>
+.link {
+  text-decoration: none;
+  color: #222;
+  margin-left: 0;
+}
+.active-link {
+  margin-left: 0;
+  background-color: #409eff;
+  text-decoration: none;
+  color: #fff;
+}
+a {
+  display: block;
+  text-align: center;
+}
+</style>

src/pages/payment-record/components/upload.vue

@@ -44,7 +44,10 @@
           </el-form-item>
 
           <el-form-item label="Payment Type">
-            <el-select v-model="form.paymentType">
+            <el-select
+              v-model="form.paymentType"
+              disabled
+            >
               <el-option
                 v-for="option in paymentOption"
                 :key="option.value"
@@ -193,7 +196,7 @@ const props = defineProps({
   },
   defaultFileType: {
     type: String,
-    default: '',
+    default: '货款',
   },
 })
 

src/pages/payment-record/index.vue

@@ -16,6 +16,7 @@
       element-loading-background="rgba(0, 0, 0, 0.3)"
     ></div>
     <div class="main-content">
+      <navPaymentRecord></navPaymentRecord>
       <div class="flex between">
         <div class="flex btn-wrap">
           <el-button
@@ -26,22 +27,7 @@
             Delete
           </el-button>
 
-          <el-dropdown
-            trigger="hover"
-            style="margin: 0 12px"
-          >
-            <el-button>Download XLSX sample</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="downloadSample">
-                  货款模板
-                </el-dropdown-item>
-                <el-dropdown-item @click="downloadSample2">
-                  国内运费模板
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <el-button @click="downloadSample">Download XLSX sample</el-button>
 
           <el-button
             type="primary"
@@ -186,186 +172,14 @@
             </div>
             <div class="flex">
               <div class="">Currency:</div>
-              <div v-if="tableData.length">
-                {{ tableData[0].currency || 'a' }}
+              <div>
+                {{ tableData[0]?.currency || '0' }}
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div
-        v-else
-        class="po-table"
-      >
-        <el-table
-          :data="computedTableData2"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column
-            fixed
-            type="selection"
-            width="55"
-          />
-          <el-table-column
-            prop="payment_type"
-            label="Payment Type"
-            width="120"
-            align="center"
-          />
-          <el-table-column
-            prop="statement_name"
-            label="Statement Name"
-            min-width="150"
-            align="center"
-          />
-          <el-table-column
-            prop="po_number"
-            label="PO Number"
-            align="center"
-            width="200"
-            label-class-name="red-font"
-          >
-            <template #default="scope">
-              {{
-                [
-                  scope.row.PO_Number,
-                  scope.row.PO_Number2,
-                  scope.row.PO_Number3,
-                ]
-                  .filter((i) => !!i)
-                  .join('; ')
-              }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="Total"
-            label="Total"
-            align="center"
-            width="110"
-            label-class-name="red-font"
-          />
-          <el-table-column
-            prop="Billable_Weight"
-            label="Billable Weight"
-            align="center"
-            width="150"
-            label-class-name="red-font"
-          />
-          <el-table-column
-            prop="Tracking_Number"
-            label="Tracking Number"
-            align="center"
-            width="150"
-          />
-          <el-table-column
-            prop="Sender"
-            label="Sender"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            prop="ATTN"
-            label="ATTN"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            prop="From_Address"
-            label="From Address"
-            align="center"
-            width="150"
-          />
-          <el-table-column
-            prop="To_Address"
-            label="To Address"
-            align="center"
-            width="150"
-          />
-          <el-table-column
-            prop="Issue_Date"
-            label="Issue Date"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            prop="Weight"
-            label="Weight"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            prop="Volume"
-            label="Volume"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            prop="Fee_Type"
-            label="Fee Type (运费/保费 etc...)"
-            align="center"
-            width="150"
-          />
-          <el-table-column
-            prop="Package_Type"
-            label="Package Type (次日达/顺丰特快 etc...)"
-            align="center"
-            width="180"
-          />
-          <el-table-column
-            prop="Director"
-            label="Director"
-            align="center"
-            width="110"
-          />
-          <el-table-column
-            fixed="right"
-            label="Action"
-            width="80px"
-          >
-            <template #default="scope">
-              <el-button
-                size="small"
-                type="warning"
-                @click="editRow(scope.row, scope.$index)"
-              >
-                Edit
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <br />
-        <div
-          class="flex between"
-          style="align-items: flex-end"
-        >
-          <el-pagination
-            v-model:currentPage="currentPage"
-            v-model:pageSize="pageSize"
-            layout="prev, pager, next, jumper, sizes"
-            :page-sizes="[5, 10, 15, 20, 40, 100]"
-            :total="tableData2.length"
-            @current-change="multipleSelection = []"
-            @size-change="multipleSelection = []"
-          />
-          <div class="total-data">
-            <div class="flex">
-              <div>Total line:</div>
-              <div>{{ tableData2.length }}</div>
-            </div>
-            <div class="flex">
-              <div class="">Sum Total:</div>
-              <div class="">{{ computedSum2 }}</div>
-            </div>
-            <div class="flex">
-              <div class="">Currency:</div>
-              <div v-if="tableData2.length">
-                {{ tableData2[0].Currency || 'b' }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="copyright">
         Copyright of Promocollection - Version 1.02 Released on 30/07/2024
       </div>
@@ -373,7 +187,6 @@
     <dialog-upload
       v-model:visible="dialogVisible"
       v-model:currencyList="currencyList"
-      v-model:defaultFileType="defaultFileType"
       @update-table-data="updateTableData"
     ></dialog-upload>
     <edit-item
@@ -387,17 +200,6 @@
       @edit="onEditRow"
       @add="onAddRow"
     ></edit-item>
-    <edit-item2
-      v-model:visible="dialogEditRowVisible2"
-      v-model:currencyList="currencyList"
-      v-model:currentEditRow="computedCurrentEditRow2"
-      v-model:editMode="editMode"
-      v-model:disableFlag="currentDisableFlag"
-      :statement-list="computedStatementList"
-      :locked-currency="tableData2.length ? tableData2[0].Currency : 'CNY'"
-      @edit="onEditRow"
-      @add="onAddRow"
-    ></edit-item2>
   </div>
 </template>
 <script lang="ts">
@@ -410,9 +212,6 @@ export default defineComponent({
 import { defineComponent, ref, computed } from 'vue'
 import {
   ElButton,
-  ElDropdown,
-  ElDropdownMenu,
-  ElDropdownItem,
   ElTable,
   ElTableColumn,
   ElPagination,
@@ -422,12 +221,13 @@ import {
 import { useRoute } from 'vue-router'
 import dialogUpload from './components/upload.vue'
 import editItem from './components/edit.vue'
-import editItem2 from './components/edit2.vue'
+
 import { IUser } from '@/interface'
 import { IPoItem, IPoItem2 } from './inteface'
 import request from '@/utils/axios'
 import utils from '@/utils/index'
 import * as XLSX from 'xlsx'
+import navPaymentRecord from './components/nav.vue'
 
 const loading = ref(false)
 
@@ -446,10 +246,6 @@ const onDelete = function () {
     tableData.value = tableData.value.filter((i) => {
       return !target.includes(i)
     })
-  } else if (tableData2.value.length) {
-    tableData2.value = tableData2.value.filter((i) => {
-      return !target.includes(i)
-    })
   }
 }
 
@@ -467,7 +263,6 @@ const sheetData = [
   },
 ]
 
-const defaultFileType = ref('货款')
 const downloadSample = function () {
   const sheet1 = XLSX.utils.json_to_sheet(sheetData)
   const wb = XLSX.utils.book_new()
@@ -484,54 +279,6 @@ const downloadSample = function () {
   XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
 
   XLSX.writeFile(wb, '货款模版.xlsx')
-  defaultFileType.value = '货款'
-}
-
-const sheetData2 = [
-  {
-    PO_Number: '',
-    PO_Number2: '',
-    PO_Number3: '',
-    Total: '',
-    Billable_Weight: '',
-    Tracking_Number: '',
-    Sender: '',
-    ATTN: '',
-    From_Address: '',
-    To_Address: '',
-    Issue_Date: '',
-    Weight: '',
-    Volume: '',
-    Fee_Type: '',
-    Package_Type: '',
-    Director: '',
-  },
-]
-const downloadSample2 = function () {
-  const sheet1 = XLSX.utils.json_to_sheet(sheetData2)
-  const wb = XLSX.utils.book_new()
-  sheet1['!cols'] = [
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 150 },
-    { wpx: 150 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-    { wpx: 100 },
-  ]
-  XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
-
-  XLSX.writeFile(wb, '国内运费模版.xlsx')
-  defaultFileType.value = '国内运费'
 }
 
 const tableData = ref([] as IPoItem[])
@@ -544,15 +291,6 @@ const computedSum = computed(() => {
     1000,
   )
 })
-const computedSum2 = computed(() => {
-  return utils.toFixed(
-    tableData2.value.reduce((total, current) => {
-      total = total + Number(current.Total)
-      return total
-    }, 0),
-    1000,
-  )
-})
 
 const tableData2 = ref([
   // Object.assign(
@@ -589,20 +327,13 @@ const updateTableData = (
   p: { data: IPoItem[] | IPoItem2[]; mode: string },
   file: any,
 ) => {
-  // console.log(p, 'p')
-  if (typeof p.data[0].ATTN !== 'undefined') {
-    tableData2.value = p.data as IPoItem2[]
-    tableData.value = []
-  } else {
-    tableData.value = p.data as IPoItem[]
-    tableData2.value = []
-  }
+  tableData.value = p.data as IPoItem[]
   currentPage.value = 1
   fileContainer.value = file
 }
 
 const currentDisableFlag = computed(() => {
-  return tableData.value.length > 0 || tableData2.value.length > 0
+  return tableData.value.length > 0
 })
 
 const currentPage = ref(1)
@@ -618,16 +349,6 @@ const computedTableData = computed(() => {
           : tableData.value.length,
       )
 })
-const computedTableData2 = computed(() => {
-  return tableData2.value.length < pageSize.value
-    ? tableData2.value
-    : tableData2.value.slice(
-        (currentPage.value - 1) * pageSize.value,
-        tableData2.value.length > currentPage.value * pageSize.value
-          ? currentPage.value * pageSize.value
-          : tableData2.value.length,
-      )
-})
 const computedStatementList = computed(() => {
   const result: any[] = []
 
@@ -637,12 +358,6 @@ const computedStatementList = computed(() => {
         result.push(i.statement_name)
       }
     })
-  } else {
-    tableData2.value.forEach((i) => {
-      if (i.statement_name?.length && !result.includes(i.statement_name)) {
-        result.push(i.statement_name)
-      }
-    })
   }
   return result.map((i, index) => {
     // statement调整成点击保存再创建了, 而不是之前的在上传对话框创建, 所以逻辑变动, 这里拿不到id, 只能拿name凑合.
@@ -653,7 +368,6 @@ const computedStatementList = computed(() => {
   })
 })
 const dialogEditRowVisible = ref(false)
-const dialogEditRowVisible2 = ref(false)
 const currentEditIndex = ref(-1) // -1新增, 其余则为当前页的行号
 const editMode = ref(1) // 1新增 2编辑
 
@@ -665,26 +379,13 @@ const computedCurrentEditRow = computed(() => {
   }
   return {}
 })
-const computedCurrentEditRow2 = computed(() => {
-  if (currentEditIndex.value > -1) {
-    return tableData2.value[
-      (currentPage.value - 1) * pageSize.value + currentEditIndex.value
-    ]
-  }
-  return {}
-})
+
 const addRow = function () {
-  // 判断要编辑哪个表
   if (tableData.value.length) {
     // console.log('货款')
     editMode.value = 1
     currentEditIndex.value = -1
     dialogEditRowVisible.value = true
-  } else if (tableData2.value.length) {
-    // console.log('国内快递')
-    editMode.value = 1
-    currentEditIndex.value = -1
-    dialogEditRowVisible2.value = true
   }
 }
 
@@ -693,8 +394,6 @@ const editRow = function (row: IPoItem, index: number) {
   currentEditIndex.value = index
   if (tableData.value.length) {
     dialogEditRowVisible.value = true
-  } else {
-    dialogEditRowVisible2.value = true
   }
 }
 
@@ -702,9 +401,6 @@ const onAddRow = function (data: IPoItem | IPoItem2) {
   if (tableData.value.length) {
     tableData.value.push(data as IPoItem)
     dialogEditRowVisible.value = false
-  } else {
-    tableData2.value.push(data as IPoItem2)
-    dialogEditRowVisible2.value = false
   }
 }
 const onEditRow = function (data: IPoItem | IPoItem2) {
@@ -715,13 +411,6 @@ const onEditRow = function (data: IPoItem | IPoItem2) {
       1,
       data as IPoItem,
     )
-  } else {
-    dialogEditRowVisible2.value = false
-    tableData2.value.splice(
-      (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
-      1,
-      data as IPoItem2,
-    )
   }
 }
 const tryCreateStatement = function () {
@@ -735,8 +424,6 @@ const tryCreateStatement = function () {
   }
   if (tableData.value.length) {
     createStatement()
-  } else {
-    createStatement2()
   }
 }
 const statementID = ref('')
@@ -913,378 +600,6 @@ const send = (
       })
   })
 }
-// 带后缀2的全部是国内运费的相关处理逻辑. 因为两个模式相同和不相同的逻辑基本参半, 干脆直接揉在一起写了
-const createStatement2 = function () {
-  loading.value = true
-  request
-    .post('/payment_request/createStatementData', [
-      {
-        Total_Amount: computedSum2.value,
-        Currency: tableData2.value[0].currency,
-        Name: tableData2.value[0].statement_name,
-        Owner: {
-          name: userInfo.value.full_name,
-          id: userInfo.value.id,
-        },
-      },
-    ])
-    .then((response) => {
-      if (response.data.code !== 1) {
-        ElMessage.error('创建statement出错')
-        return
-      }
-      statementID.value = response.data.result.data[0].details.id
-
-      splitPaymentRequestRecordForm2() // 重写splitForm, 参数几乎完全不同
-      uploadStatementFile() // 这步操作直接解开注释就行. 逻辑参数通用
-    })
-    .catch(() => {
-      loading.value = false
-    })
-}
-const splitPaymentRequestRecordForm2 = function () {
-  const formData = tableData2.value.reduce((t, i) => {
-    const temp: any = {
-      Tracking_Number: i.Tracking_Number,
-      Unit_Price: 0,
-      Quantity: '',
-      Sample_Fee: 0,
-      Setup_Service_Fee: 0,
-      Total: i.Total || 0,
-      Currency: i.Currency,
-      Description: '',
-      SKU: '',
-      Unit_Price_Non_Currency: '',
-      Payment_Type: i.payment_type,
-      Statement: { name: i.statement_name, id: statementID.value },
-      Request_Type: '月结申请',
-      Name: '/',
-      Owner: {
-        name: userInfo.value.full_name,
-        id: userInfo.value.id,
-      },
-      Payment_Status: 'Pending Verify',
-      Batch_number: new Date().getTime().toString(),
-    }
-
-    if (i.PO_Number) {
-      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
-    }
-    if (i.PO_Number2) {
-      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
-    }
-    if (i.PO_Number3) {
-      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
-    }
-    return t
-  }, [] as any[])
-  // console.log(formData, 'form data 2')
-  let size = 100
-  const dataList = utils.splitArray(formData, size)
-  const pool = []
-  for (let i = 0; i < dataList.length; i++) {
-    pool.push(
-      createPaymentRequestRecord2(
-        dataList[i],
-        i,
-        size,
-        i === dataList.length - 1 ? formData.length : 0,
-      ),
-    )
-  }
-  loading.value = true
-  Promise.all(pool).finally(() => {
-    splitDomesticTracking2()
-  })
-}
-
-const createPaymentRequestRecord2 = function (
-  data: any[],
-  currentPage = 0,
-  pageSize = 1,
-  finalValue: number,
-) {
-  return new Promise((resolve, reject) => {
-    request
-      .post('/payment_request/createPaymentRequestRecord', data)
-      .then((response) => {
-        if (response.data.code !== 1) {
-          ElNotification({
-            type: 'error',
-            duration: 0,
-            title: '创建异常',
-            message: `第 ${currentPage * pageSize + 1} ~ ${
-              finalValue || (currentPage + 1) * pageSize
-            } 行数据创建异常`,
-          })
-          reject(0)
-          return
-        }
-        const res = response.data.result
-        if (Array.isArray(res.data)) {
-          const temp = res.data.map((i: any, index: number) => {
-            return {
-              status: i.status,
-              index,
-            }
-          })
-
-          const temp2 = temp.filter((i: any) => i.status !== 'success')
-
-          if (temp2.length) {
-            ElNotification({
-              type: 'error',
-              duration: 0,
-              title: '创建异常',
-              message: `第 ${temp2
-                .map((i: any) => i.index + 1 + currentPage * pageSize)
-                .join(',')} 行数据创建异常`,
-            })
-            reject(0)
-          } else {
-            ElNotification({
-              duration: 0,
-              title: '创建成功',
-              type: 'success',
-              message: `第 ${currentPage * pageSize + 1} ~ ${
-                finalValue || (currentPage + 1) * pageSize
-              } 行数据创建成功`,
-            })
-            resolve(1)
-          }
-        }
-      })
-  })
-}
-
-const splitDomesticTracking2 = function () {
-  const formData = tableData2.value.reduce((t, i, index) => {
-    const temp: any = {
-      ...i,
-      Billable_Weight: i.Billable_Weight || 0,
-      Total: i.Total || 0,
-      Weight: i.Weight || 0,
-      Volume: i.Volume || 0,
-      Statement: { name: i.statement_name, id: statementID.value },
-      Name: `${i.Issue_Date} - ${i.Tracking_Number}`,
-      From: i.From_Address,
-      To: i.To_Address,
-      Amount: i.Total,
-      Weight_Unit: i.Weight_Unit,
-      Owner: {
-        name: userInfo.value.full_name,
-        id: userInfo.value.id,
-      },
-    }
-    // 删除不必要的参数字段. 以下几个数据有其他表示的名称
-    delete temp.PO_Number
-    delete temp.PO_Number2
-    delete temp.PO_Number3
-    delete temp.statement_name
-    delete temp.payment_type
-    delete temp.From_Address
-    delete temp.To_Address
-    delete temp.Total
-
-    if (i.PO_Number) {
-      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
-    }
-    if (i.PO_Number2) {
-      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
-    }
-    if (i.PO_Number3) {
-      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
-    }
-
-    return t
-  }, [] as any[])
-  // console.log(formData, 'domestic tracking formdata')
-  let size = 100
-  const dataList = utils.splitArray(formData, size)
-  const pool = []
-  for (let i = 0; i < dataList.length; i++) {
-    pool.push(
-      createDomesticTrackingForm2(
-        dataList[i],
-        i,
-        size,
-        i === dataList.length - 1 ? formData.length : 0,
-      ),
-    )
-  }
-  loading.value = true
-  Promise.all(pool).finally(() => {
-    spliteDomesticTrackingAndPO2()
-  })
-}
-
-const createDomesticTrackingForm2 = function (
-  data: any[],
-  currentPage = 0,
-  pageSize = 1,
-  finalValue: number,
-) {
-  return new Promise((resolve, reject) => {
-    request
-      .post('/payment_request/createDomesticTracking', data)
-      .then((response) => {
-        if (response.data.code !== 1) {
-          ElNotification({
-            type: 'error',
-            duration: 0,
-            title: 'DomesticTracking创建异常',
-            message: `第 ${currentPage * pageSize + 1} ~ ${
-              finalValue || (currentPage + 1) * pageSize
-            } 行数据创建异常`,
-          })
-          reject(0)
-          return
-        }
-        const res = response.data.result
-        if (Array.isArray(res.data)) {
-          const temp = res.data.map((i: any, index: number) => {
-            return {
-              status: i.status,
-              index,
-            }
-          })
-
-          const temp2 = temp.filter((i: any) => i.status !== 'success')
-
-          if (temp2.length) {
-            ElNotification({
-              type: 'error',
-              duration: 0,
-              title: 'DomesticTracking创建异常',
-              message: `第 ${temp2
-                .map((i: any) => i.index + 1 + currentPage * pageSize)
-                .join(',')} 行数据创建异常`,
-            })
-            reject(0)
-          } else {
-            ElNotification({
-              duration: 0,
-              title: 'DomesticTracking创建成功',
-              type: 'success',
-              message: `第 ${currentPage * pageSize + 1} ~ ${
-                finalValue || (currentPage + 1) * pageSize
-              } 行数据创建成功`,
-            })
-            resolve(1)
-          }
-        }
-      })
-  })
-}
-
-const spliteDomesticTrackingAndPO2 = function () {
-  const formData: any[] = tableData2.value.reduce((t, i, index) => {
-    const temp: any = {
-      Tracking_Number: i.Tracking_Number,
-      // 这两个是固定的玩意, 暂定.
-      Purchase_Order: {
-        id: '4791186000155027611',
-        name: 'PO11277 - 底层逻辑记录，不可删除 - 底层逻辑记录，不可删除',
-      },
-      Related_Domestic_Tracking: {
-        id: '4791186000183903233',
-        name: '底层逻辑记录，不可删除',
-      },
-    }
-    if (i.PO_Number) {
-      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
-    }
-    if (i.PO_Number2) {
-      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
-    }
-    if (i.PO_Number3) {
-      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
-    }
-    return t
-  }, [] as any[])
-  // console.log(formData, 'form DomesticTrackingAndPO 2')
-  let size = 100
-  const dataList = utils.splitArray(formData, size)
-  const pool = []
-  for (let i = 0; i < dataList.length; i++) {
-    pool.push(
-      createDomesticTrackingAndPOForm2(
-        dataList[i],
-        i,
-        size,
-        i === dataList.length - 1 ? formData.length : 0,
-      ),
-    )
-  }
-  loading.value = true
-  Promise.all(pool)
-    .then(() => {
-      tableData2.value = []
-      statementID.value = ''
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const createDomesticTrackingAndPOForm2 = function (
-  data: any[],
-  currentPage = 0,
-  pageSize = 1,
-  finalValue: number,
-) {
-  return new Promise((resolve, reject) => {
-    request
-      .post('/payment_request/createDomesticPkgandPO', data)
-      .then((response) => {
-        if (response.data.code !== 1) {
-          ElNotification({
-            type: 'error',
-            duration: 0,
-            title: 'DomesticPkg_and_PO创建异常',
-            message: `第 ${currentPage * pageSize + 1} ~ ${
-              finalValue || (currentPage + 1) * pageSize
-            } 行数据创建异常`,
-          })
-          reject(0)
-          return
-        }
-        const res = response.data.result
-        if (Array.isArray(res.data)) {
-          const temp = res.data.map((i: any, index: number) => {
-            return {
-              status: i.status,
-              index,
-            }
-          })
-
-          const temp2 = temp.filter((i: any) => i.status !== 'success')
-
-          if (temp2.length) {
-            ElNotification({
-              type: 'error',
-              duration: 0,
-              title: 'DomesticPkg_and_PO创建异常',
-              message: `第 ${temp2
-                .map((i: any) => i.index + 1 + currentPage * pageSize)
-                .join(',')} 行数据创建异常`,
-            })
-            reject(0)
-          } else {
-            ElNotification({
-              duration: 0,
-              title: 'DomesticPkg_and_PO创建成功',
-              type: 'success',
-              message: `第 ${currentPage * pageSize + 1} ~ ${
-                finalValue || (currentPage + 1) * pageSize
-              } 行数据创建成功`,
-            })
-            resolve(1)
-          }
-        }
-      })
-  })
-}
 
 const dialogVisible = ref(false)
 

src/pages/payment-record2/components/edit.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="dialog-edit-record-item">
+    <el-dialog
+      v-model="dialogVisible"
+      width="800px"
+      :title="editMode === 1 ? 'New line' : 'Edit'"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="handleClose"
+    >
+      <el-form
+        ref="mainForm"
+        :rules="formRule"
+        :model="form"
+        label-width="140px"
+      >
+        <div class="flex start form-box">
+          <div class="flex-auto">
+            <el-form-item
+              label="PO Number"
+              prop="PO_Number"
+            >
+              <el-input
+                v-model="form.PO_Number"
+                placeholder="eg: POXXXX"
+                @change="(v) => (form.PO_Number = v.toUpperCase())"
+              />
+            </el-form-item>
+            <el-form-item
+              label="PO Number2"
+              prop="PO_Number2"
+            >
+              <el-input
+                v-model="form.PO_Number2"
+                placeholder="eg: POXXXX"
+                @change="(v) => (form.PO_Number2 = v.toUpperCase())"
+              />
+            </el-form-item>
+            <el-form-item
+              label="PO Number3"
+              prop="PO_Number3"
+            >
+              <el-input
+                v-model="form.PO_Number3"
+                placeholder="eg: POXXXX"
+                @change="(v) => (form.PO_Number3 = v.toUpperCase())"
+              />
+            </el-form-item>
+            <el-form-item
+              label="Tracking_Number"
+              prop="Tracking_Number"
+            >
+              <el-input v-model="form.Tracking_Number" />
+            </el-form-item>
+            <el-form-item
+              label="Sender"
+              prop="Sender"
+            >
+              <el-input v-model="form.Sender" />
+            </el-form-item>
+
+            <el-form-item
+              label="ATTN"
+              prop="ATTN"
+            >
+              <el-input v-model="form.ATTN" />
+            </el-form-item>
+
+            <el-form-item label="From_Address">
+              <el-input v-model="form.From_Address" />
+            </el-form-item>
+            <el-form-item label="To_Address">
+              <el-input v-model="form.To_Address" />
+            </el-form-item>
+            <el-form-item
+              label="Issue_Date"
+              prop="Issue_Date"
+            >
+              <el-date-picker
+                v-model="form.Issue_Date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item
+              label="Weight"
+              prop="Weight"
+            >
+              <el-input
+                v-model="form.Weight"
+                type="number"
+                min="0"
+              />
+            </el-form-item>
+          </div>
+
+          <div class="flex-auto">
+            <el-form-item
+              label="Currency"
+              prop="currency"
+            >
+              <el-select
+                v-model="form.currency"
+                :disabled="disableFlag"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="option in currencyList as IOptionItem[]"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              label="Statement Name"
+              prop="statement_name"
+            >
+              <el-select
+                v-model="form.statement_name"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="(option, index) in statementList as IOptionItem[]"
+                  :key="index"
+                  :label="option.label"
+                  :value="option.label"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              label="Payment Type"
+              prop="payment_type"
+            >
+              <el-select
+                v-model="form.payment_type"
+                disabled
+              >
+                <el-option
+                  v-for="option in paymentOption"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              label="Billable_Weight"
+              prop="Billable_Weight"
+            >
+              <el-input v-model="form.Billable_Weight" />
+            </el-form-item>
+
+            <el-form-item
+              label="Total"
+              prop="Total"
+            >
+              <el-input
+                v-model="form.Total"
+                type="number"
+                min="0"
+              />
+            </el-form-item>
+            <el-form-item
+              label="Volume"
+              prop="Volume"
+            >
+              <el-input
+                v-model="form.Volume"
+                type="number"
+                min="0"
+              />
+            </el-form-item>
+            <el-form-item
+              label="Fee_Type"
+              prop="Fee_Type"
+            >
+              <el-input v-model="form.Fee_Type" />
+            </el-form-item>
+            <el-form-item
+              label="Package_Type"
+              prop="Package_Type"
+            >
+              <el-input v-model="form.Package_Type" />
+            </el-form-item>
+            <el-form-item
+              label="Director"
+              prop="Director"
+            >
+              <el-input v-model="form.Director" />
+            </el-form-item>
+          </div>
+        </div>
+
+        <br />
+        <div class="flex end">
+          <el-button
+            type="primary"
+            @click="save(mainForm)"
+          >
+            Save
+          </el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'EditIPoItem',
+})
+</script>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue'
+import {
+  ElMessage,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElInput,
+  ElButton,
+  ElDatePicker,
+} from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import {
+  // IPoItem,
+  IOptionItem,
+} from '../inteface'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  disableFlag: {
+    type: Boolean,
+    default: false,
+  },
+  lockedCurrency: {
+    type: String,
+    default: '',
+  },
+  currentEditRow: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+  currencyList: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  },
+  statementList: {
+    type: Array,
+    default: () => {
+      return [] as string[]
+    },
+  },
+  editMode: {
+    type: Number,
+    default: 1,
+  },
+})
+
+const paymentOption = [
+  {
+    label: '货款',
+    value: '货款',
+  },
+  {
+    label: '快递款',
+    value: '快递款',
+  },
+]
+
+const dialogVisible = ref(false)
+
+const mainForm = ref<FormInstance>()
+const form: any = ref({})
+const formRule = ref<FormRules>({
+  PO_Number: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  statement_name: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  Total: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  unit_price: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  Billable_Weight: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  Tracking_Number: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+  payment_type: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+})
+watchEffect(() => {
+  dialogVisible.value = props.visible
+  form.value = Object.assign(
+    {
+      po_number: '',
+      // po_id: '',
+      unit_price: '',
+      quantity: '',
+      sample_fee: '',
+      setup_service_fee: '',
+      total: '',
+      currency: 'CNY',
+      statement_name: '',
+      statement_id: '',
+      description: '',
+      payment_type: '国内运费',
+    },
+    JSON.parse(JSON.stringify(props.currentEditRow)),
+  )
+
+  if (props.disableFlag) {
+    form.value.currency = props.lockedCurrency
+  }
+})
+
+const emit = defineEmits(['update:visible', 'edit', 'add'])
+
+const handleClose = function (done: any) {
+  emit('update:visible', false)
+
+  if (typeof done === 'function') {
+    done()
+  }
+}
+const save = function (formEl: FormInstance | undefined) {
+  console.log('run', formEl)
+
+  if (!formEl) return
+  formEl.validate((valid, fields) => {
+    console.log(valid)
+    if (valid) {
+      if (props.editMode === 1) {
+        emit('add', form.value)
+      } else if (props.editMode === 2) {
+        emit('edit', form.value)
+      }
+    } else {
+      console.log('check form has not pass!', fields)
+      ElMessage.error('请检查表单必填项')
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.dialog-edit-record-item {
+  input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    &:hover {
+      -moz-appearance: textfield;
+      appearance: textfield;
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.form-box {
+  .flex-auto {
+    &:first-of-type {
+      padding-right: 12px;
+    }
+    & + .flex-auto {
+      padding-left: 12px;
+    }
+  }
+}
+</style>

src/pages/payment-record2/components/upload.vue

@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      width="750px"
+      title="Upload Statement"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="handleClose"
+    >
+      <div
+        v-loading="loading"
+        class="flex start"
+      >
+        <el-form
+          ref="mainForm"
+          :rules="formRule"
+          class="flex-auto"
+          :model="form"
+          label-width="150px"
+        >
+          <el-form-item
+            label="Statement Name"
+            prop="statement_name"
+          >
+            <el-input
+              v-model="form.statement_name"
+              style="width: 190px"
+              type="textarea"
+              rows="3"
+            />
+          </el-form-item>
+
+          <el-form-item label="Currency">
+            <el-select v-model="form.currency">
+              <el-option
+                v-for="option in currencyList as IOptionItem[]"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="Payment Type">
+            <el-select
+              v-model="form.paymentType"
+              disabled
+            >
+              <el-option
+                v-for="option in paymentOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="form.paymentType === '国内运费'"
+            label="Weight Unit"
+          >
+            <el-select v-model="form.weightUnit">
+              <el-option
+                v-for="option in weightOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="Upload Mode">
+            <el-select
+              v-model="form.mode"
+              disabled
+            >
+              <el-option
+                v-for="option in uploadOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div
+          class="flex-auto drag-area"
+          @dragenter="stop"
+          @dragover="stop"
+          @dragleave="stop"
+          @drop="processExcel"
+        >
+          <label for="fileInput">
+            <div
+              class="flex column stretch"
+              style="text-align: center; padding: 44px 20px; cursor: pointer"
+            >
+              <div>
+                <el-icon
+                  size="60px"
+                  color="#999"
+                >
+                  <upload-filled />
+                </el-icon>
+              </div>
+
+              <div class="el-upload__text">拖动文件到这或者点击选择</div>
+              <br />
+              <div class="el-upload__text">
+                注意, 点确认前确保Payment Type选了正确的类型;
+              </div>
+              <br />
+              <div class="el-upload">
+                单个Excel数据最好控制在100行内, 处理起来会慢;
+              </div>
+              <br />
+              <div
+                v-if="fileContainer"
+                style="color: green"
+              >
+                读取文件成功!
+              </div>
+            </div>
+          </label>
+        </div>
+      </div>
+      <br />
+      <div class="flex end">
+        <el-button
+          :loading="loading"
+          @click="handleClose"
+        >
+          关闭
+        </el-button>
+        <el-tooltip content="注意, 点确认前确保Payment Type选了正确的类型">
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="next(mainForm)"
+          >
+            确认
+          </el-button>
+        </el-tooltip>
+      </div>
+    </el-dialog>
+    <!-- multiple -->
+    <input
+      id="fileInput"
+      type="file"
+      style="display: none"
+      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+      @change="processExcel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'DialogUploadExcel',
+})
+</script>
+<script lang="ts" setup>
+import { watchEffect, ref } from 'vue'
+import {
+  ElDialog,
+  ElMessage,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElInput,
+  ElButton,
+  ElIcon,
+  ElTooltip,
+} from 'element-plus'
+
+import { UploadFilled } from '@element-plus/icons-vue'
+import * as XLSX from 'xlsx'
+import type { FormInstance, FormRules } from 'element-plus'
+import { IPoItem, IOptionItem, IPoItem2 } from '../inteface'
+// import request from '@/utils/axios'
+import utils from '@/utils/index'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  currencyList: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  },
+  defaultFileType: {
+    type: String,
+    default: '国内运费',
+  },
+})
+
+const emit = defineEmits(['update:visible', 'update-table-data'])
+
+const dialogVisible = ref(false)
+
+watchEffect(() => {
+  dialogVisible.value = props.visible
+})
+
+const tableData = ref([] as any[])
+
+const handleClose = function (done: any) {
+  emit('update:visible', false)
+  tableData.value = []
+  form.value = {
+    statement_name: '',
+    currency: 'CNY',
+    mode: 'Replace',
+    paymentType: props.defaultFileType,
+    weightUnit: 'Kg',
+  }
+  const target = document.getElementById('fileInput') as HTMLInputElement
+  if (target) {
+    target.value = ''
+  }
+  fileContainer.value = null
+
+  if (typeof done === 'function') {
+    done()
+  }
+}
+const mainForm = ref<FormInstance>()
+const formRule = ref<FormRules>({
+  statement_name: {
+    required: true,
+    message: '必填项',
+    trigger: 'blur',
+  },
+})
+const form = ref({
+  statement_name: '',
+  currency: 'CNY',
+  mode: 'Replace',
+  paymentType: props.defaultFileType,
+  weightUnit: 'Kg',
+})
+watchEffect(() => {
+  form.value.paymentType = props.defaultFileType
+})
+const uploadOption = [
+  {
+    label: '追加(Append)',
+    value: 'Append',
+  },
+  {
+    label: '替换(Replace)',
+    value: 'Replace',
+  },
+]
+
+const paymentOption = [
+  {
+    label: '货款',
+    value: '货款',
+  },
+  {
+    label: '国内运费',
+    value: '国内运费',
+  },
+]
+
+const weightOption = [
+  {
+    label: 'Kg',
+    value: 'Kg',
+  },
+  {
+    label: 'Lb',
+    value: 'Lb',
+  },
+]
+
+const stop = (e: any) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+const fileContainer = ref(null as any)
+const processExcel = (event: any) => {
+  const files = event.target.files || event.dataTransfer.files
+
+  let str = ''
+  // let arr: IPoItem[] = []
+  tableData.value = []
+  try {
+    for (let i = 0; i < files.length; i++) {
+      if (i === files.length - 1) {
+        fileContainer.value = files[i]
+      }
+      if (
+        ![
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          'application/vnd.ms-excel',
+        ].includes(files[i].type)
+      ) {
+        ElMessage.error('读取数据出错, 请确认选择了正确的Excel文件')
+        return
+      }
+      str =
+        str +
+        `${str.length ? ', ' : ''}` +
+        (files[i].name.replace(/\.xlsx?/, '') || 'unNameFile')
+    }
+
+    form.value.statement_name = str
+  } catch (error) {
+    console.log('读取文件出错:', error)
+  }
+
+  event.preventDefault()
+  event.stopPropagation()
+}
+const loading = ref(false)
+const next = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid, fields) => {
+    if (valid) {
+      loading.value = true
+
+      try {
+        const fileReader = new FileReader()
+
+        fileReader.onload = (e: any) => {
+          const data = XLSX.read(e.target.result, { type: 'binary' })
+          // 重命名列名
+          if (form.value.paymentType === '货款') {
+            data.Sheets[data.SheetNames[0]].A1.w = 'po_number'
+            data.Sheets[data.SheetNames[0]].B1.w = 'sku'
+            data.Sheets[data.SheetNames[0]].C1.w = 'description'
+            data.Sheets[data.SheetNames[0]].D1.w = 'unit_price'
+            data.Sheets[data.SheetNames[0]].E1.w = 'quantity'
+            data.Sheets[data.SheetNames[0]].F1.w = 'sample_fee'
+            data.Sheets[data.SheetNames[0]].G1.w = 'setup_service_fee'
+            data.Sheets[data.SheetNames[0]].H1.w = 'total'
+
+            const jsonData = XLSX.utils.sheet_to_json(
+              data.Sheets[data.SheetNames[0]],
+            ) as IPoItem[]
+            jsonData.forEach((i) => {
+              i.unit_price = utils.toFixed(Number(i.unit_price || 0), 1000)
+              i.quantity = utils.toFixed(Number(i.quantity || 0), 1000)
+              i.sample_fee = utils.toFixed(Number(i.sample_fee || 0), 1000)
+              i.setup_service_fee = utils.toFixed(
+                Number(i.setup_service_fee || 0),
+                1000,
+              )
+              i.total = utils.toFixed(Number(i.total || 0), 1000)
+              tableData.value.push({
+                ...i,
+                po_number: i.po_number.toUpperCase(),
+                payment_type: form.value.paymentType,
+                statement_name: form.value.statement_name,
+                currency: form.value.currency,
+              })
+            })
+          } else if (form.value.paymentType === '国内运费') {
+            // todo
+            const jsonData = XLSX.utils.sheet_to_json(
+              data.Sheets[data.SheetNames[0]],
+            ) as IPoItem2[]
+            jsonData.forEach((i) => {
+              tableData.value.push({
+                ...i,
+                Weight_Unit: form.value.weightUnit,
+                Currency: form.value.currency,
+                payment_type: form.value.paymentType,
+                statement_name: form.value.statement_name,
+              })
+            })
+          }
+
+          let result = {
+            mode: form.value.mode,
+            data: tableData.value,
+          }
+          emit('update-table-data', result, fileContainer.value)
+          handleClose(false)
+        }
+        fileReader.readAsBinaryString(fileContainer.value)
+      } catch (e) {
+        console.log(e, '处理文件出错')
+      }
+
+      loading.value = false
+    } else {
+      console.log('check form has not pass!', fields)
+      ElMessage.error('请检查表单必填项')
+    }
+  })
+}
+
+form.value.paymentType = props.defaultFileType
+</script>
+
+<style lang="scss" scoped>
+.drag-area {
+  height: 240px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-left: 24px;
+}
+</style>

src/pages/payment-record2/index.vue

@@ -0,0 +1,988 @@
+<template>
+  <div class="page-payment-record">
+    <div
+      v-if="loading"
+      v-loading="true"
+      style="
+        width: 100vw;
+        height: 100vh;
+        z-index: 999;
+        position: fixed;
+        top: 0;
+        left: 0;
+      "
+      class=""
+      element-loading-text="Loading..."
+      element-loading-background="rgba(0, 0, 0, 0.3)"
+    ></div>
+    <div class="main-content">
+      <navPaymentRecord></navPaymentRecord>
+      <div class="flex between">
+        <div class="flex btn-wrap">
+          <el-button
+            :disabled="multipleSelection.length < 1"
+            type="danger"
+            @click="onDelete"
+          >
+            Delete
+          </el-button>
+
+          <el-button @click="downloadSample">Download XLSX sample</el-button>
+
+          <el-button
+            type="primary"
+            @click="dialogVisible = true"
+          >
+            Upload Statement
+          </el-button>
+          <el-button
+            :disabled="!tableData.length && !tableData.length"
+            @click="addRow"
+          >
+            Add New Line
+          </el-button>
+          <el-button
+            :disabled="tableData.length < 1 && tableData.length < 1"
+            type="primary"
+            @click="tryCreateStatement"
+          >
+            Save
+          </el-button>
+        </div>
+        <div class="logo-area">
+          <img
+            :src="getLogoPath()"
+            alt=""
+          />
+        </div>
+      </div>
+
+      <div class="po-table">
+        <el-table
+          :data="computedTableData"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            fixed
+            type="selection"
+            width="55"
+          />
+          <el-table-column
+            prop="payment_type"
+            label="Payment Type"
+            width="120"
+            align="center"
+          />
+          <el-table-column
+            prop="statement_name"
+            label="Statement Name"
+            min-width="150"
+            align="center"
+          />
+          <el-table-column
+            prop="po_number"
+            label="PO Number"
+            align="center"
+            width="200"
+            label-class-name="red-font"
+          >
+            <template #default="scope">
+              {{
+                [
+                  scope.row.PO_Number,
+                  scope.row.PO_Number2,
+                  scope.row.PO_Number3,
+                ]
+                  .filter((i) => !!i)
+                  .join('; ')
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="Total"
+            label="Total"
+            align="center"
+            width="110"
+            label-class-name="red-font"
+          />
+          <el-table-column
+            prop="Billable_Weight"
+            label="Billable Weight"
+            align="center"
+            width="150"
+            label-class-name="red-font"
+          />
+          <el-table-column
+            prop="Tracking_Number"
+            label="Tracking Number"
+            align="center"
+            width="150"
+          />
+          <el-table-column
+            prop="Sender"
+            label="Sender"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            prop="ATTN"
+            label="ATTN"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            prop="From_Address"
+            label="From Address"
+            align="center"
+            width="150"
+          />
+          <el-table-column
+            prop="To_Address"
+            label="To Address"
+            align="center"
+            width="150"
+          />
+          <el-table-column
+            prop="Issue_Date"
+            label="Issue Date"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            prop="Weight"
+            label="Weight"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            prop="Volume"
+            label="Volume"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            prop="Fee_Type"
+            label="Fee Type (运费/保费 etc...)"
+            align="center"
+            width="150"
+          />
+          <el-table-column
+            prop="Package_Type"
+            label="Package Type (次日达/顺丰特快 etc...)"
+            align="center"
+            width="180"
+          />
+          <el-table-column
+            prop="Director"
+            label="Director"
+            align="center"
+            width="110"
+          />
+          <el-table-column
+            fixed="right"
+            label="Action"
+            width="80px"
+          >
+            <template #default="scope">
+              <el-button
+                size="small"
+                type="warning"
+                @click="editRow(scope.row, scope.$index)"
+              >
+                Edit
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <br />
+        <div
+          class="flex between"
+          style="align-items: flex-end"
+        >
+          <el-pagination
+            v-model:currentPage="currentPage"
+            v-model:pageSize="pageSize"
+            layout="prev, pager, next, jumper, sizes"
+            :page-sizes="[5, 10, 15, 20, 40, 100]"
+            :total="tableData.length"
+            @current-change="multipleSelection = []"
+            @size-change="multipleSelection = []"
+          />
+          <div class="total-data">
+            <div class="flex">
+              <div>Total line:</div>
+              <div>{{ tableData.length }}</div>
+            </div>
+            <div class="flex">
+              <div class="">Sum Total:</div>
+              <div class="">{{ computedSum }}</div>
+            </div>
+            <div class="flex">
+              <div class="">Currency:</div>
+              <div>
+                {{ tableData[0]?.Currency || '0' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="copyright">
+        Copyright of Promocollection - Version 1.02 Released on 30/07/2024
+      </div>
+    </div>
+    <dialog-upload
+      v-model:visible="dialogVisible"
+      v-model:currencyList="currencyList"
+      @update-table-data="updateTableData"
+    ></dialog-upload>
+
+    <edit-item
+      v-model:visible="dialogEditRowVisible"
+      v-model:currencyList="currencyList"
+      v-model:currentEditRow="computedCurrentEditRow"
+      v-model:editMode="editMode"
+      v-model:disableFlag="currentDisableFlag"
+      :statement-list="computedStatementList"
+      :locked-currency="tableData.length ? tableData[0].Currency : 'CNY'"
+      @edit="onEditRow"
+      @add="onAddRow"
+    ></edit-item>
+  </div>
+</template>
+<script lang="ts">
+export default defineComponent({
+  name: 'PaymentRecord2',
+})
+</script>
+
+<script lang="ts" setup>
+import { defineComponent, ref, computed } from 'vue'
+import {
+  ElButton,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElMessage,
+  ElNotification,
+} from 'element-plus'
+import { useRoute } from 'vue-router'
+import dialogUpload from './components/upload.vue'
+import editItem from './components/edit.vue'
+import { IUser } from '@/interface'
+import { IPoItem } from './inteface'
+import request from '@/utils/axios'
+import utils from '@/utils/index'
+import * as XLSX from 'xlsx'
+import navPaymentRecord from '@/pages/payment-record/components/nav.vue'
+
+const loading = ref(false)
+
+const getLogoPath = function () {
+  return new URL('/assets/logo@2x.png', import.meta.url).href
+}
+
+const multipleSelection = ref<IPoItem[]>([])
+
+const handleSelectionChange = (val: IPoItem[]) => {
+  multipleSelection.value = val
+}
+const onDelete = function () {
+  const target = multipleSelection.value
+  if (tableData.value.length) {
+    tableData.value = tableData.value.filter((i) => {
+      return !target.includes(i)
+    })
+  }
+}
+
+const sheetData = [
+  {
+    PO_Number: '',
+    PO_Number2: '',
+    PO_Number3: '',
+    Total: '',
+    Billable_Weight: '',
+    Tracking_Number: '',
+    Sender: '',
+    ATTN: '',
+    From_Address: '',
+    To_Address: '',
+    Issue_Date: '',
+    Weight: '',
+    Volume: '',
+    Fee_Type: '',
+    Package_Type: '',
+    Director: '',
+  },
+]
+const downloadSample = function () {
+  const sheet1 = XLSX.utils.json_to_sheet(sheetData)
+  const wb = XLSX.utils.book_new()
+  sheet1['!cols'] = [
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 150 },
+    { wpx: 150 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+    { wpx: 100 },
+  ]
+  XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
+
+  XLSX.writeFile(wb, '国内运费模版.xlsx')
+}
+
+const computedSum = computed(() => {
+  return utils.toFixed(
+    tableData.value.reduce((total, current) => {
+      total = total + Number(current.Total)
+      return total
+    }, 0),
+    1000,
+  )
+})
+
+const tableData = ref([
+  // Object.assign(
+  //   {},
+  //   {
+  //     PO_Number: 'PO13097',
+  //     PO_Number2: '',
+  //     PO_Number3: '',
+  //     Total: 12,
+  //     Billable_Weight: 2,
+  //     Tracking_Number: 'tracking number',
+  //     Sender: 'sender',
+  //     ATTN: 'attn',
+  //     From_Address: 'from addr',
+  //     To_Address: 'to addr',
+  //     Issue_Date: '2024-07-20',
+  //     Weight: 3,
+  //     Volume: 4,
+  //     Fee_Type: 'fee type',
+  //     Package_Type: 'package type',
+  //     Director: 'director',
+  //   },
+  //   {
+  //     Currency: 'CNY',
+  //     statement_name: '华信强0319测试上传月结单',
+  //     payment_type: '国内运费',
+  //     Weight_Unit: 'Kg',
+  //   },
+  // ),
+] as IPoItem[])
+
+const fileContainer = ref(null as any)
+const updateTableData = (p: { data: IPoItem[]; mode: string }, file: any) => {
+  // console.log(p, 'p')
+  tableData.value = p.data as IPoItem[]
+  currentPage.value = 1
+  fileContainer.value = file
+}
+
+const currentDisableFlag = computed(() => {
+  return tableData.value.length > 0
+})
+
+const currentPage = ref(1)
+const pageSize = ref(15)
+// 手动分页. 可能会有很多条数据
+const computedTableData = computed(() => {
+  return tableData.value.length < pageSize.value
+    ? tableData.value
+    : tableData.value.slice(
+        (currentPage.value - 1) * pageSize.value,
+        tableData.value.length > currentPage.value * pageSize.value
+          ? currentPage.value * pageSize.value
+          : tableData.value.length,
+      )
+})
+const computedStatementList = computed(() => {
+  const result: any[] = []
+
+  if (tableData.value.length) {
+    tableData.value.forEach((i) => {
+      if (i.statement_name?.length && !result.includes(i.statement_name)) {
+        result.push(i.statement_name)
+      }
+    })
+  }
+  return result.map((i, index) => {
+    // statement调整成点击保存再创建了, 而不是之前的在上传对话框创建, 所以逻辑变动, 这里拿不到id, 只能拿name凑合.
+    return {
+      value: i,
+      label: i,
+    }
+  })
+})
+const dialogEditRowVisible = ref(false)
+const currentEditIndex = ref(-1) // -1新增, 其余则为当前页的行号
+const editMode = ref(1) // 1新增 2编辑
+
+const computedCurrentEditRow = computed(() => {
+  if (currentEditIndex.value > -1) {
+    return tableData.value[
+      (currentPage.value - 1) * pageSize.value + currentEditIndex.value
+    ]
+  }
+  return {}
+})
+const addRow = function () {
+  if (tableData.value.length) {
+    // console.log('国内快递')
+    editMode.value = 1
+    currentEditIndex.value = -1
+    dialogEditRowVisible.value = true
+  }
+}
+
+const editRow = function (row: IPoItem, index: number) {
+  editMode.value = 2
+  currentEditIndex.value = index
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = true
+  }
+}
+
+const onAddRow = function (data: IPoItem) {
+  if (tableData.value.length) {
+    tableData.value.push(data as IPoItem)
+    dialogEditRowVisible.value = false
+  }
+}
+const onEditRow = function (data: IPoItem) {
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = false
+    tableData.value.splice(
+      (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
+      1,
+      data as IPoItem,
+    )
+  }
+}
+const tryCreateStatement = function () {
+  if (
+    !['Finance Manager', 'CEO', 'Account Payable'].includes(
+      userInfo.value.role.name,
+    )
+  ) {
+    ElMessage.error('当前用户没有处理的权限')
+    return
+  }
+  if (tableData.value.length) {
+    createStatement()
+  }
+}
+const statementID = ref('')
+// const statementID = ref('4791186000143466085')
+// 上传原文件保存副本. 业务要求.
+const uploadStatementFile = function () {
+  const fileForm = new FormData()
+  fileForm.append('id', statementID.value)
+  fileForm.append('file', fileContainer.value)
+  request
+    .post('/payment_request/uploadOriginalFile', fileForm, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    .then((res: any) => {
+      if (res.data.code === 1) {
+        ElNotification({
+          duration: 0,
+          title: '上传原始表格成功',
+          type: 'success',
+          message: '上传原始表格成功',
+        })
+      }
+    })
+}
+
+// 带后缀2的全部是国内运费的相关处理逻辑. 因为两个模式相同和不相同的逻辑基本参半, 干脆直接揉在一起写了
+const createStatement = function () {
+  loading.value = true
+  request
+    .post('/payment_request/createStatementData', [
+      {
+        Total_Amount: computedSum.value,
+        Currency: tableData.value[0].Currency,
+        Name: tableData.value[0].statement_name,
+        Owner: {
+          name: userInfo.value.full_name,
+          id: userInfo.value.id,
+        },
+      },
+    ])
+    .then((response) => {
+      if (response.data.code !== 1) {
+        ElMessage.error('创建statement出错')
+        return
+      }
+      statementID.value = response.data.result.data[0].details.id
+
+      splitPaymentRequestRecordForm() // 重写splitForm, 参数几乎完全不同
+      uploadStatementFile() // 这步操作直接解开注释就行. 逻辑参数通用
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+const splitPaymentRequestRecordForm = function () {
+  const formData = tableData.value.reduce((t, i) => {
+    const temp: any = {
+      Tracking_Number: i.Tracking_Number,
+      Unit_Price: 0,
+      Quantity: '',
+      Sample_Fee: 0,
+      Setup_Service_Fee: 0,
+      Total: i.Total || 0,
+      Currency: i.Currency,
+      Description: '',
+      SKU: '',
+      Unit_Price_Non_Currency: '',
+      Payment_Type: i.payment_type,
+      Statement: { name: i.statement_name, id: statementID.value },
+      Request_Type: '月结申请',
+      Name: '/',
+      Owner: {
+        name: userInfo.value.full_name,
+        id: userInfo.value.id,
+      },
+      Payment_Status: 'Pending Verify',
+      Batch_number: new Date().getTime().toString(),
+    }
+
+    if (i.PO_Number) {
+      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
+    }
+    if (i.PO_Number2) {
+      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
+    }
+    if (i.PO_Number3) {
+      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
+    }
+    return t
+  }, [] as any[])
+  // console.log(formData, 'form data 2')
+  let size = 100
+  const dataList = utils.splitArray(formData, size)
+  const pool = []
+  for (let i = 0; i < dataList.length; i++) {
+    pool.push(
+      createPaymentRequestRecord(
+        dataList[i],
+        i,
+        size,
+        i === dataList.length - 1 ? formData.length : 0,
+      ),
+    )
+  }
+  loading.value = true
+  Promise.all(pool).finally(() => {
+    splitDomesticTracking()
+  })
+}
+
+const createPaymentRequestRecord = function (
+  data: any[],
+  currentPage = 0,
+  pageSize = 1,
+  finalValue: number,
+) {
+  return new Promise((resolve, reject) => {
+    request
+      .post('/payment_request/createPaymentRequestRecord', data)
+      .then((response) => {
+        if (response.data.code !== 1) {
+          ElNotification({
+            type: 'error',
+            duration: 0,
+            title: '创建异常',
+            message: `第 ${currentPage * pageSize + 1} ~ ${
+              finalValue || (currentPage + 1) * pageSize
+            } 行数据创建异常`,
+          })
+          reject(0)
+          return
+        }
+        const res = response.data.result
+        if (Array.isArray(res.data)) {
+          const temp = res.data.map((i: any, index: number) => {
+            return {
+              status: i.status,
+              index,
+            }
+          })
+
+          const temp2 = temp.filter((i: any) => i.status !== 'success')
+
+          if (temp2.length) {
+            ElNotification({
+              type: 'error',
+              duration: 0,
+              title: '创建异常',
+              message: `第 ${temp2
+                .map((i: any) => i.index + 1 + currentPage * pageSize)
+                .join(',')} 行数据创建异常`,
+            })
+            reject(0)
+          } else {
+            ElNotification({
+              duration: 0,
+              title: '创建成功',
+              type: 'success',
+              message: `第 ${currentPage * pageSize + 1} ~ ${
+                finalValue || (currentPage + 1) * pageSize
+              } 行数据创建成功`,
+            })
+            resolve(1)
+          }
+        }
+      })
+  })
+}
+
+const splitDomesticTracking = function () {
+  const formData = tableData.value.reduce((t, i, index) => {
+    const temp: any = {
+      ...i,
+      Billable_Weight: i.Billable_Weight || 0,
+      Total: i.Total || 0,
+      Weight: i.Weight || 0,
+      Volume: i.Volume || 0,
+      Statement: { name: i.statement_name, id: statementID.value },
+      Name: `${i.Issue_Date} - ${i.Tracking_Number}`,
+      From: i.From_Address,
+      To: i.To_Address,
+      Amount: i.Total,
+      Weight_Unit: i.Weight_Unit,
+      Owner: {
+        name: userInfo.value.full_name,
+        id: userInfo.value.id,
+      },
+    }
+    // 删除不必要的参数字段. 以下几个数据有其他表示的名称
+    delete temp.PO_Number
+    delete temp.PO_Number2
+    delete temp.PO_Number3
+    delete temp.statement_name
+    delete temp.payment_type
+    delete temp.From_Address
+    delete temp.To_Address
+    delete temp.Total
+
+    if (i.PO_Number) {
+      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
+    }
+    if (i.PO_Number2) {
+      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
+    }
+    if (i.PO_Number3) {
+      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
+    }
+
+    return t
+  }, [] as any[])
+  // console.log(formData, 'domestic tracking formdata')
+  let size = 100
+  const dataList = utils.splitArray(formData, size)
+  const pool = []
+  for (let i = 0; i < dataList.length; i++) {
+    pool.push(
+      createDomesticTrackingForm(
+        dataList[i],
+        i,
+        size,
+        i === dataList.length - 1 ? formData.length : 0,
+      ),
+    )
+  }
+  loading.value = true
+  Promise.all(pool).finally(() => {
+    spliteDomesticTrackingAndPO()
+  })
+}
+
+const createDomesticTrackingForm = function (
+  data: any[],
+  currentPage = 0,
+  pageSize = 1,
+  finalValue: number,
+) {
+  return new Promise((resolve, reject) => {
+    request
+      .post('/payment_request/createDomesticTracking', data)
+      .then((response) => {
+        if (response.data.code !== 1) {
+          ElNotification({
+            type: 'error',
+            duration: 0,
+            title: 'DomesticTracking创建异常',
+            message: `第 ${currentPage * pageSize + 1} ~ ${
+              finalValue || (currentPage + 1) * pageSize
+            } 行数据创建异常`,
+          })
+          reject(0)
+          return
+        }
+        const res = response.data.result
+        if (Array.isArray(res.data)) {
+          const temp = res.data.map((i: any, index: number) => {
+            return {
+              status: i.status,
+              index,
+            }
+          })
+
+          const temp2 = temp.filter((i: any) => i.status !== 'success')
+
+          if (temp2.length) {
+            ElNotification({
+              type: 'error',
+              duration: 0,
+              title: 'DomesticTracking创建异常',
+              message: `第 ${temp2
+                .map((i: any) => i.index + 1 + currentPage * pageSize)
+                .join(',')} 行数据创建异常`,
+            })
+            reject(0)
+          } else {
+            ElNotification({
+              duration: 0,
+              title: 'DomesticTracking创建成功',
+              type: 'success',
+              message: `第 ${currentPage * pageSize + 1} ~ ${
+                finalValue || (currentPage + 1) * pageSize
+              } 行数据创建成功`,
+            })
+            resolve(1)
+          }
+        }
+      })
+  })
+}
+
+const spliteDomesticTrackingAndPO = function () {
+  const formData: any[] = tableData.value.reduce((t, i, index) => {
+    const temp: any = {
+      Tracking_Number: i.Tracking_Number,
+      // 这两个是固定的玩意, 暂定.
+      Purchase_Order: {
+        id: '4791186000155027611',
+        name: 'PO11277 - 底层逻辑记录，不可删除 - 底层逻辑记录，不可删除',
+      },
+      Related_Domestic_Tracking: {
+        id: '4791186000183903233',
+        name: '底层逻辑记录，不可删除',
+      },
+    }
+    if (i.PO_Number) {
+      t.push(Object.assign({ PO_id: i.PO_Number }, temp))
+    }
+    if (i.PO_Number2) {
+      t.push(Object.assign({ PO_id: i.PO_Number2 }, temp))
+    }
+    if (i.PO_Number3) {
+      t.push(Object.assign({ PO_id: i.PO_Number3 }, temp))
+    }
+    return t
+  }, [] as any[])
+  // console.log(formData, 'form DomesticTrackingAndPO 2')
+  let size = 100
+  const dataList = utils.splitArray(formData, size)
+  const pool = []
+  for (let i = 0; i < dataList.length; i++) {
+    pool.push(
+      createDomesticTrackingAndPOForm(
+        dataList[i],
+        i,
+        size,
+        i === dataList.length - 1 ? formData.length : 0,
+      ),
+    )
+  }
+  loading.value = true
+  Promise.all(pool)
+    .then(() => {
+      tableData.value = []
+      statementID.value = ''
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+const createDomesticTrackingAndPOForm = function (
+  data: any[],
+  currentPage = 0,
+  pageSize = 1,
+  finalValue: number,
+) {
+  return new Promise((resolve, reject) => {
+    request
+      .post('/payment_request/createDomesticPkgandPO', data)
+      .then((response) => {
+        if (response.data.code !== 1) {
+          ElNotification({
+            type: 'error',
+            duration: 0,
+            title: 'DomesticPkg_and_PO创建异常',
+            message: `第 ${currentPage * pageSize + 1} ~ ${
+              finalValue || (currentPage + 1) * pageSize
+            } 行数据创建异常`,
+          })
+          reject(0)
+          return
+        }
+        const res = response.data.result
+        if (Array.isArray(res.data)) {
+          const temp = res.data.map((i: any, index: number) => {
+            return {
+              status: i.status,
+              index,
+            }
+          })
+
+          const temp2 = temp.filter((i: any) => i.status !== 'success')
+
+          if (temp2.length) {
+            ElNotification({
+              type: 'error',
+              duration: 0,
+              title: 'DomesticPkg_and_PO创建异常',
+              message: `第 ${temp2
+                .map((i: any) => i.index + 1 + currentPage * pageSize)
+                .join(',')} 行数据创建异常`,
+            })
+            reject(0)
+          } else {
+            ElNotification({
+              duration: 0,
+              title: 'DomesticPkg_and_PO创建成功',
+              type: 'success',
+              message: `第 ${currentPage * pageSize + 1} ~ ${
+                finalValue || (currentPage + 1) * pageSize
+              } 行数据创建成功`,
+            })
+            resolve(1)
+          }
+        }
+      })
+  })
+}
+
+const dialogVisible = ref(false)
+
+const currencyList = ref([
+  {
+    label: 'CNY',
+    value: 'CNY',
+  },
+  {
+    label: 'USD',
+    value: 'USD',
+  },
+  {
+    label: 'HKD',
+    value: 'HKD',
+  },
+  {
+    label: 'AUD',
+    value: 'AUD',
+  },
+  {
+    label: 'GBP',
+    value: 'GBP',
+  },
+  {
+    label: 'NZD',
+    value: 'NZD',
+  },
+  {
+    label: 'EUR',
+    value: 'EUR',
+  },
+])
+
+const route = useRoute()
+
+const userInfo = ref({} as IUser)
+loading.value = true
+request
+  .post('/common/getUsersData', { id: route.query.user })
+  .then((response) => {
+    const res = response.data
+    if (res.code !== 1) return
+
+    if (res.result.users && res.result.users.length) {
+      userInfo.value = res.result.users[0]
+    } else if (res.result.id) {
+      userInfo.value = res.result || {}
+    } else if (Array.isArray(res.result) && res.result.length) {
+      userInfo.value = res.result[0] || {}
+    } else {
+      ElMessage.error('获取当前用户身份异常, 请联系管理员')
+    }
+  })
+  .finally(() => {
+    loading.value = false
+  })
+</script>
+
+<style lang="scss">
+.page-payment-record {
+  .red-font {
+    color: red;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.main-content {
+  background-color: #fff;
+  padding: 12px 40px;
+  width: 1900px;
+  min-width: 1200px;
+  min-height: 100vh;
+  margin: 0 auto;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
+    0 0.5em 1em rgba(0, 0, 0, 0.6);
+}
+.btn-wrap {
+  width: 1600px;
+  min-width: 1200px;
+  padding: 12px 0;
+  margin: 0 auto;
+}
+.logo-area {
+  img {
+    height: 60px;
+  }
+}
+.po-table {
+  width: 100%;
+  min-height: 80vh;
+  margin: 0 auto;
+}
+.total-data {
+  width: 150px;
+  line-height: 22px;
+}
+.copyright {
+  text-align: right;
+  color: #ccc;
+  font-family: Fun, sans-serif;
+  font-size: 14px;
+  line-height: 16px;
+  font-style: italic;
+}
+</style>

src/pages/payment-record2/inteface.ts

@@ -0,0 +1,27 @@
+
+export interface IPoItem {
+  PO_Number: string
+  PO_Number2: string
+  PO_Number3: string
+  Tracking_Number: string
+  Sender: string
+  ATTN: string
+  From_Address: string
+  To_Address: string
+  Issue_Date: string
+  Weight: number
+  Volume: number
+  Billable_Weight: number
+  Fee_Type: string
+  Package_Type: string
+  Director: string
+  Total: number
+  Currency: string
+  Weight_Unit: string
+  statement_name: string
+  payment_type?: string
+}
+export interface IOptionItem {
+  label: string
+  value: string
+}

src/route.ts

@@ -25,6 +25,11 @@ const router = createRouter({
       path: '/payment-record',
       component: () => import('@/pages/payment-record/index.vue'),
     },
+    {
+      name: 'paymentRecord2',
+      path: '/payment-record2',
+      component: () => import('@/pages/payment-record2/index.vue'),
+    },
     {
       name: 'wecomApproval',
       path: '/wecom-approval/:id',