Merge branch 'develop'

# Conflicts:
#	src/pages/wecom-approval/index.vue

package.json

@@ -12,28 +12,35 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "~0.27.2",
-    "dayjs": "^1.11.11",
-    "element-plus": "2.7.6",
+    "dayjs": "^1.11.13",
+    "element-plus": "2.8.7",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
+    "mathjs": "^13.2.0",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@nabla/vite-plugin-eslint": "^2.0.4",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.debounce": "^4.0.9",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.27.0",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
-    "typescript": "^5.5.3",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
     "vite": "^5.0.5",
-    "vue-tsc": "^2.0.26"
+    "vue-tsc": "^2.1.10"
   }
 }

postcss.config.cjs

@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    tailwindcss: {},
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

src/App.vue

@@ -26,6 +26,7 @@ const locale = ref(zhCn)
 </script>
 
 <style lang="scss">
+@import '@/assets/css/tailwind.scss';
 body {
   position: relative;
   margin: 0;

src/assets/css/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -14,7 +14,7 @@
         :model="form"
         label-width="140px"
       >
-        <div class="flex start form-box">
+        <div class="flex items-start form-box">
           <div class="flex-auto">
             <el-form-item
               label="PO Number"
@@ -134,7 +134,10 @@
             </el-form-item>
 
             <el-form-item label="Payment Type">
-              <el-select v-model="form.payment_type">
+              <el-select
+                v-model="form.payment_type"
+                disabled
+              >
                 <el-option
                   v-for="option in paymentOption"
                   :key="option.value"
@@ -147,14 +150,14 @@
               <el-input
                 v-model="form.description"
                 type="textarea"
-                rows="3"
+                :rows="3"
               />
             </el-form-item>
           </div>
         </div>
 
         <br />
-        <div class="flex end">
+        <div class="flex justify-end">
           <el-button
             type="primary"
             @click="save(mainForm)"

src/pages/payment-record/components/edit2.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 items-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 justify-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-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

@@ -11,7 +11,7 @@
     >
       <div
         v-loading="loading"
-        class="flex start"
+        class="flex items-start"
       >
         <el-form
           ref="mainForm"
@@ -28,7 +28,7 @@
               v-model="form.statement_name"
               style="width: 190px"
               type="textarea"
-              rows="3"
+              :rows="3"
             />
           </el-form-item>
 
@@ -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"
@@ -53,6 +56,19 @@
               ></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
@@ -77,7 +93,7 @@
         >
           <label for="fileInput">
             <div
-              class="flex column stretch"
+              class="flex flex-col items-stretch"
               style="text-align: center; padding: 44px 20px; cursor: pointer"
             >
               <div>
@@ -88,16 +104,19 @@
                   <upload-filled />
                 </el-icon>
               </div>
-              <br />
 
               <div class="el-upload__text">拖动文件到这或者点击选择</div>
               <br />
+              <div class="el-upload__text">
+                注意, 点确认前确保Payment Type选了正确的类型;
+              </div>
+              <br />
               <div class="el-upload">
-                单个Excel数据最好控制在100行内, 处理起来会慢
+                单个Excel数据最好控制在100行内, 处理起来会慢;
               </div>
               <br />
               <div
-                v-if="tableData.length"
+                v-if="fileContainer"
                 style="color: green"
               >
                 读取文件成功!
@@ -107,20 +126,22 @@
         </div>
       </div>
       <br />
-      <div class="flex end">
+      <div class="flex justify-end">
         <el-button
           :loading="loading"
           @click="handleClose"
         >
           关闭
         </el-button>
-        <el-button
-          type="primary"
-          :loading="loading"
-          @click="next(mainForm)"
-        >
-          确认
-        </el-button>
+        <el-tooltip content="注意, 点确认前确保Payment Type选了正确的类型">
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="next(mainForm)"
+          >
+            确认
+          </el-button>
+        </el-tooltip>
       </div>
     </el-dialog>
     <!-- multiple -->
@@ -152,12 +173,13 @@ import {
   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 } from '../inteface'
+import { IPoItem, IOptionItem, IPoItem2 } from '../inteface'
 // import request from '@/utils/axios'
 import utils from '@/utils/index'
 
@@ -172,6 +194,10 @@ const props = defineProps({
       return []
     },
   },
+  defaultFileType: {
+    type: String,
+    default: '货款',
+  },
 })
 
 const emit = defineEmits(['update:visible', 'update-table-data'])
@@ -182,7 +208,7 @@ watchEffect(() => {
   dialogVisible.value = props.visible
 })
 
-const tableData = ref([] as IPoItem[])
+const tableData = ref([] as any[])
 
 const handleClose = function (done: any) {
   emit('update:visible', false)
@@ -191,12 +217,14 @@ const handleClose = function (done: any) {
     statement_name: '',
     currency: 'CNY',
     mode: 'Replace',
-    paymentType: '货款',
+    paymentType: props.defaultFileType,
+    weightUnit: 'Kg',
   }
   const target = document.getElementById('fileInput') as HTMLInputElement
   if (target) {
     target.value = ''
   }
+  fileContainer.value = null
 
   if (typeof done === 'function') {
     done()
@@ -214,7 +242,11 @@ const form = ref({
   statement_name: '',
   currency: 'CNY',
   mode: 'Replace',
-  paymentType: '货款',
+  paymentType: props.defaultFileType,
+  weightUnit: 'Kg',
+})
+watchEffect(() => {
+  form.value.paymentType = props.defaultFileType
 })
 const uploadOption = [
   {
@@ -233,8 +265,19 @@ const paymentOption = [
     value: '货款',
   },
   {
-    label: '快递款',
-    value: '快递款',
+    label: '国内运费',
+    value: '国内运费',
+  },
+]
+
+const weightOption = [
+  {
+    label: 'Kg',
+    value: 'Kg',
+  },
+  {
+    label: 'Lb',
+    value: 'Lb',
   },
 ]
 
@@ -247,7 +290,7 @@ const processExcel = (event: any) => {
   const files = event.target.files || event.dataTransfer.files
 
   let str = ''
-  let arr: IPoItem[] = []
+  // let arr: IPoItem[] = []
   tableData.value = []
   try {
     for (let i = 0; i < files.length; i++) {
@@ -267,43 +310,11 @@ const processExcel = (event: any) => {
         str +
         `${str.length ? ', ' : ''}` +
         (files[i].name.replace(/\.xlsx?/, '') || 'unNameFile')
-      const fileReader = new FileReader()
-
-      fileReader.onload = (e: any) => {
-        const data = XLSX.read(e.target.result, { type: 'binary' })
-        // 重命名列名
-        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)
-        })
-        // tableData.value = tableData.value.concat(jsonData)
-      }
-
-      fileReader.readAsBinaryString(files[i])
     }
 
     form.value.statement_name = str
   } catch (error) {
-    console.log('处理文件出错:', error)
+    console.log('读取文件出错:', error)
   }
 
   event.preventDefault()
@@ -315,42 +326,80 @@ const next = (formEl: FormInstance | undefined) => {
   formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true
-      // 创建statement 动作调整到主界面点击保存再调用.
-      // request
-      //   .post('/payment_request/createStatementData', [
-      //     {
-      //       Name: form.value.statement_name,
-      //     },
-      //   ])
-      //   .then((response) => {
-      // if (response.data.code !== 1) return
-      // const res = response.data.result
 
-      let result = {
-        mode: form.value.mode,
-        data: tableData.value.map((i) => {
-          return {
-            ...i,
-            po_number: i.po_number.toUpperCase(),
-            payment_type: form.value.paymentType,
-            statement_name: form.value.statement_name,
-            currency: form.value.currency,
-            statement_id: form.value.statement_name,
+      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, '处理文件出错')
       }
-      emit('update-table-data', result, fileContainer.value)
-      handleClose(false)
-      // })
-      // .finally(() => {
+
       loading.value = false
-      // })
     } else {
       console.log('check form has not pass!', fields)
       ElMessage.error('请检查表单必填项')
     }
   })
 }
+
+form.value.paymentType = props.defaultFileType
 </script>
 
 <style lang="scss" scoped>

src/pages/payment-record/index.vue

@@ -16,7 +16,8 @@
       element-loading-background="rgba(0, 0, 0, 0.3)"
     ></div>
     <div class="main-content">
-      <div class="flex between">
+      <navPaymentRecord></navPaymentRecord>
+      <div class="flex justify-between">
         <div class="flex btn-wrap">
           <el-button
             :disabled="multipleSelection.length < 1"
@@ -25,6 +26,7 @@
           >
             Delete
           </el-button>
+
           <el-button @click="downloadSample">Download XLSX sample</el-button>
 
           <el-button
@@ -33,16 +35,24 @@
           >
             Upload Statement
           </el-button>
-          <el-button @click="addRow">Add New Line</el-button>
           <el-button
-            :disabled="tableData.length < 1"
+            :disabled="!tableData.length && !tableData2.length"
+            @click="addRow"
+          >
+            Add New Line
+          </el-button>
+          <el-button
+            :disabled="tableData.length < 1 && tableData2.length < 1"
             type="primary"
-            @click="createStatement"
+            @click="tryCreateStatement"
           >
             Save
           </el-button>
-          <!-- <el-button @click="uploadStatementFile">
-            uploadStatementFile
+          <!-- <el-button
+            type="danger"
+            @click="splitDomesticTracking2"
+          >
+            test
           </el-button> -->
         </div>
         <div class="logo-area">
@@ -52,7 +62,10 @@
           />
         </div>
       </div>
-      <div class="po-table">
+      <div
+        v-if="!tableData2.length"
+        class="po-table"
+      >
         <el-table
           :data="computedTableData"
           @selection-change="handleSelectionChange"
@@ -78,6 +91,7 @@
             label="PO Number"
             align="center"
             width="110"
+            label-class-name="red-font"
           />
           <el-table-column
             prop="sku"
@@ -115,12 +129,8 @@
             prop="total"
             label="Total"
             align="center"
+            label-class-name="red-font"
           />
-          <!-- <el-table-column
-                prop="sales_person"
-                label="sales_person"
-                align="center"
-              /> -->
           <el-table-column
             label="Action"
             width="80px"
@@ -136,11 +146,10 @@
             </template>
           </el-table-column>
         </el-table>
-        <br />
-        <div class="flex end"></div>
+
         <br />
         <div
-          class="flex between"
+          class="flex justify-between"
           style="align-items: flex-end"
         >
           <el-pagination
@@ -163,30 +172,17 @@
             </div>
             <div class="flex">
               <div class="">Currency:</div>
-              <div>{{ tableData.length > 0 ? tableData[0].currency : '' }}</div>
+              <div>
+                {{ tableData[0]?.currency || '0' }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- <el-tabs
-        v-model="currentTab"
-        v-loading="loading"
-        type="card"
-        class=""
-      >
-        <el-tab-pane
-          label="待上传列表"
-          name="upload"
-        >
-        </el-tab-pane>
-        <el-tab-pane
-          label="待确认列表"
-          name="list"
-        >
-          TODO
-        </el-tab-pane>
-      </el-tabs> -->
+      <div class="copyright">
+        Copyright of Promocollection - Version 1.02 Released on 30/07/2024
+      </div>
     </div>
     <dialog-upload
       v-model:visible="dialogVisible"
@@ -218,8 +214,6 @@ import {
   ElButton,
   ElTable,
   ElTableColumn,
-  // ElTabs,
-  // ElTabPane,
   ElPagination,
   ElMessage,
   ElNotification,
@@ -227,11 +221,13 @@ import {
 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 { 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)
 
@@ -239,20 +235,23 @@ const getLogoPath = function () {
   return new URL('/assets/logo@2x.png', import.meta.url).href
 }
 
-const multipleSelection = ref<IPoItem[]>([])
+const multipleSelection = ref<(IPoItem | IPoItem2)[]>([])
 
 const handleSelectionChange = (val: IPoItem[]) => {
   multipleSelection.value = val
 }
 const onDelete = function () {
   const target = multipleSelection.value
-  tableData.value = tableData.value.filter((i) => {
-    return !target.includes(i)
-  })
+  if (tableData.value.length) {
+    tableData.value = tableData.value.filter((i) => {
+      return !target.includes(i)
+    })
+  }
 }
 
 const sheetData = [
   {
+    // PO_Number: 'PO13097',
     PO_Number: '',
     SKU: '',
     Description: '',
@@ -279,7 +278,7 @@ const downloadSample = function () {
   ]
   XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
 
-  XLSX.writeFile(wb, '模版.xlsx')
+  XLSX.writeFile(wb, '货款模版.xlsx')
 }
 
 const tableData = ref([] as IPoItem[])
@@ -293,13 +292,43 @@ const computedSum = computed(() => {
   )
 })
 
+const tableData2 = 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 IPoItem2[])
+
 const fileContainer = ref(null as any)
-const updateTableData = (p: { data: IPoItem[]; mode: string }, file: any) => {
-  if (p.mode === 'Append') {
-    tableData.value = tableData.value.concat(p.data)
-  } else {
-    tableData.value = p.data
-  }
+const updateTableData = (
+  p: { data: IPoItem[] | IPoItem2[]; mode: string },
+  file: any,
+) => {
+  tableData.value = p.data as IPoItem[]
+  currentPage.value = 1
   fileContainer.value = file
 }
 
@@ -323,11 +352,13 @@ const computedTableData = computed(() => {
 const computedStatementList = computed(() => {
   const result: any[] = []
 
-  tableData.value.forEach((i) => {
-    if (i.statement_name?.length && !result.includes(i.statement_name)) {
-      result.push(i.statement_name)
-    }
-  })
+  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 {
@@ -348,47 +379,66 @@ const computedCurrentEditRow = computed(() => {
   }
   return {}
 })
+
 const addRow = function () {
-  editMode.value = 1
-  currentEditIndex.value = -1
-  dialogEditRowVisible.value = true
+  if (tableData.value.length) {
+    // console.log('货款')
+    editMode.value = 1
+    currentEditIndex.value = -1
+    dialogEditRowVisible.value = true
+  }
 }
 
 const editRow = function (row: IPoItem, index: number) {
-  // console.log('index', index)
-  // console.log(row)
   editMode.value = 2
   currentEditIndex.value = index
-  dialogEditRowVisible.value = true
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = true
+  }
 }
 
-const onAddRow = function (data: IPoItem) {
-  tableData.value.push(data)
-  dialogEditRowVisible.value = false
+const onAddRow = function (data: IPoItem | IPoItem2) {
+  if (tableData.value.length) {
+    tableData.value.push(data as IPoItem)
+    dialogEditRowVisible.value = false
+  }
 }
-const onEditRow = function (data: IPoItem) {
-  dialogEditRowVisible.value = false
-  tableData.value.splice(
-    (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
-    1,
-    data,
-  )
+const onEditRow = function (data: IPoItem | IPoItem2) {
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = false
+    tableData.value.splice(
+      (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
+      1,
+      data as IPoItem,
+    )
+  }
 }
-const statementID = ref('')
-const createStatement = function () {
+const tryCreateStatement = function () {
   if (
-    !['Finance Manager', 'CEO', 'Account Payable'].includes(
-      userInfo.value.role.name,
-    )
+    ![
+      'Finance Manager',
+      'CEO',
+      'Account Payable',
+      'Logistics Operator',
+      'Cashier',
+    ].includes(userInfo.value.role.name)
   ) {
     ElMessage.error('当前用户没有处理的权限')
     return
   }
+  if (tableData.value.length) {
+    createStatement()
+  }
+}
+const statementID = ref('')
+// const statementID = ref('4791186000143466085')
+const createStatement = function () {
   loading.value = true
   request
     .post('/payment_request/createStatementData', [
       {
         Total_Amount: computedSum.value,
+        Payment_Type: tableData.value[0].payment_type,
         Currency: tableData.value[0].currency,
         Name: tableData.value[0].statement_name,
         Owner: {
@@ -411,7 +461,7 @@ const createStatement = function () {
       }
       statementID.value = response.data.result.data[0].details.id
 
-      save()
+      splitForm()
       uploadStatementFile()
     })
     .catch(() => {
@@ -440,7 +490,7 @@ const uploadStatementFile = function () {
       }
     })
 }
-const save = function () {
+const splitForm = function () {
   const formData = tableData.value.map((i, index) => {
     const result: any = {
       Unit_Price: i.unit_price,
@@ -558,9 +608,6 @@ const send = (
 
 const dialogVisible = ref(false)
 
-// upload list
-// const currentTab = ref('upload')
-
 const currencyList = ref([
   {
     label: 'CNY',
@@ -617,13 +664,18 @@ request
   })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .page-payment-record {
+  .red-font {
+    color: red;
+  }
 }
+</style>
+<style lang="scss" scoped>
 .main-content {
   background-color: #fff;
   padding: 12px 40px;
-  width: 1600px;
+  width: 1900px;
   min-width: 1200px;
   min-height: 100vh;
   margin: 0 auto;
@@ -644,11 +696,19 @@ request
 }
 .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-record/inteface.ts

@@ -14,7 +14,28 @@ export interface IPoItem {
   payment_type?: string
   sales_person?: string
 }
-
+export interface IPoItem2 {
+  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/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 items-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 justify-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,394 @@
+<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 items-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 flex-col items-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 justify-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 } from '../inteface'
+// import request from '@/utils/axios'
+import dayjs from 'dayjs'
+
+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',
+            cellDates: true,
+          })
+          // 重命名列名
+          if (form.value.paymentType === '国内运费') {
+            // todo
+            const jsonData = XLSX.utils.sheet_to_json(
+              data.Sheets[data.SheetNames[0]],
+              {
+                dateNF: 'yyyy-mm',
+              },
+            ) as IPoItem[]
+            jsonData.forEach((i) => {
+              // console.log(i.Issue_Date, 'date')
+              tableData.value.push({
+                ...i,
+                Issue_Date: i.Issue_Date
+                  ? dayjs(new Date(i.Issue_Date).getTime() + 43000).format(
+                      'YYYY-MM-DD',
+                    )
+                  : '',
+                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,1016 @@
+<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 justify-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>
+          <!-- <el-button @click="spliteDomesticTrackingAndPO">test</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"
+            label-class-name="red-font"
+          />
+          <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 justify-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(
+      Object.assign(data, {
+        Weight_Unit: tableData.value[0].Weight_Unit,
+      }) 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',
+      'Logistics Operator',
+      'Cashier',
+    ].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,
+        Payment_Type: tableData.value[0].payment_type,
+        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,
+      Requested_Module: 'Domestic_Package',
+      Fee_type: i.Fee_Type,
+      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, Name: `${i.Tracking_Number}-${i.PO_Number}` },
+          temp,
+        ),
+      )
+    }
+    if (i.PO_Number2) {
+      t.push(
+        Object.assign(
+          { PO_id: i.PO_Number2, Name: `${i.Tracking_Number}-${i.PO_Number2}` },
+          temp,
+        ),
+      )
+    }
+    if (i.PO_Number3) {
+      t.push(
+        Object.assign(
+          { PO_id: i.PO_Number3, Name: `${i.Tracking_Number}-${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,26 @@
+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 | Date
+  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/pages/payment-record3/components/edit.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="dialog-edit-record-item">
+    <el-dialog
+      v-model="dialogVisible"
+      width="1000px"
+      :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="185px"
+      >
+        <div class="flex items-start form-box">
+          <div class="flex-auto">
+            <el-form-item
+              label="Reference"
+              prop="Reference"
+            >
+              <el-input
+                v-model="form.Reference"
+                placeholder=""
+              />
+            </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="CBM Or Chargable Weight"
+              prop="CBM_or_Chargable_Weight"
+            >
+              <el-input v-model="form.CBM_or_Chargable_Weight" />
+            </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>
+          </div>
+        </div>
+
+        <br />
+        <div class="flex justify-center">
+          <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,
+} 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: '国际运费',
+  },
+]
+
+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(
+    {
+      Currency: 'CNY',
+      statement_name: '',
+      payment_type: '国际运费',
+      Weight_Unit: ''
+    },
+    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-record3/components/upload.vue

@@ -0,0 +1,381 @@
+<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 items-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 flex-col items-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 justify-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 { ITrackingNumberItem, IOptionItem } from '../inteface'
+import mathjs from '@/utils/math'
+import { savePrecision } from '@/utils/math'
+
+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: '国际运费',
+  },
+]
+
+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 = ''
+  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 === '国际运费') {
+            // todo
+            const jsonData = XLSX.utils.sheet_to_json(
+              data.Sheets[data.SheetNames[0]],
+            ) as ITrackingNumberItem[]
+            jsonData.forEach((i) => {
+              tableData.value.push({
+                ...i,
+                CBM_or_Chargable_Weight: savePrecision(
+                  mathjs.chain(i.CBM_or_Chargable_Weight).done(),
+                ),
+                Reference: i.Reference || '',
+                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-record3/index.vue

@@ -0,0 +1,857 @@
+<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;
+      "
+      element-loading-text="Loading..."
+      element-loading-background="rgba(0, 0, 0, 0.3)"
+    ></div>
+    <div class="main-content">
+      <navPaymentRecord></navPaymentRecord>
+      <div class="flex justify-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"
+            @click="addRow"
+          >
+            Add New Line
+          </el-button>
+          <el-button
+            :disabled="trackingTable.length < 1"
+            type="primary"
+            @click="validateTrackingForm(trackingForm)"
+          >
+            Save
+          </el-button>
+          <!-- <el-button @click="validateTrackingForm(trackingForm)">
+            test
+          </el-button> -->
+        </div>
+        <div class="logo-area">
+          <img :src="getLogoPath()" />
+        </div>
+      </div>
+      <div class="flex items-start justify-between">
+        <div class="table-left">
+          <el-form
+            ref="trackingForm"
+            :model="trackingTable"
+            :rules="{}"
+            label-width="0"
+          >
+            <table
+              border="0"
+              cellspacing="0"
+            >
+              <thead>
+                <tr>
+                  <th class="">Tracking_Number</th>
+                  <th class="">Total</th>
+                  <th class="">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(row, index) in trackingTable"
+                  :key="row.Tracking_Number"
+                >
+                  <td>
+                    <div style="margin-bottom: 18px">
+                      {{ row.Tracking_Number }}
+                    </div>
+                  </td>
+                  <td>
+                    <el-form-item
+                      :prop="index + '.Total'"
+                      :rules="{
+                        required: true,
+                        message: '必填项',
+                        trigger: ['blur', 'change'],
+                      }"
+                    >
+                      <el-input
+                        v-model="row.Total"
+                        size="small"
+                        type="number"
+                        min="0"
+                      ></el-input>
+                    </el-form-item>
+                  </td>
+
+                  <td>
+                    <el-input
+                      v-model="row.Description"
+                      size="small"
+                      type="textarea"
+                      :rows="2"
+                      style="margin-bottom: 18px"
+                    ></el-input>
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    v-if="!trackingTable.length"
+                    colspan="3"
+                    style="text-align: center; color: #909399"
+                  >
+                    暂无数据
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </el-form>
+          <div
+            class="flex"
+            style="margin-top: 12px"
+          >
+            <div class="">Sum Total:&nbsp;</div>
+            <div class="">{{ totalSum }}</div>
+          </div>
+          <div class="flex">
+            <div class="">Currency:&nbsp;</div>
+            <div>
+              {{ tableData[0]?.Currency || '0' }}
+            </div>
+          </div>
+        </div>
+        <div>
+          <el-tooltip>
+            <template #content>
+              每次点击都会重新生成左侧表单, 左侧已编辑的数据会丢失,
+              <br />
+              强烈建议先检查右侧表格数据完全无误再生成左侧表单.
+            </template>
+            <el-button
+              type="primary"
+              @click="generateTrackingTable"
+            >
+              &lt;&lt; Generate
+            </el-button>
+          </el-tooltip>
+        </div>
+        <div class="po-table">
+          <el-table
+            :data="computedTableData"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              prop="Reference"
+              label="Reference"
+              align="center"
+              width="110"
+            />
+            <el-table-column
+              label-class-name="red-font"
+              prop="CBM_or_Chargable_Weight"
+              label="CBM Or Chargable Weight"
+              align="center"
+              width="220"
+            />
+            <el-table-column
+              prop="Tracking_Number"
+              label="Tracking Number"
+              align="center"
+              width="200"
+              label-class-name="red-font"
+            />
+            <el-table-column
+              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 justify-between"
+            style="align-items: flex-end"
+          >
+            <el-pagination
+              v-model:currentPage="currentPage"
+              v-model:pageSize="pageSize"
+              style="display: none"
+              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>
+          </div>
+        </div>
+      </div>
+      <!-- <el-table :data="finTable">
+        <ElTableColumn prop="Total"></ElTableColumn>
+        <ElTableColumn prop="Tracking_Number"></ElTableColumn>
+        <ElTableColumn prop="Reference"></ElTableColumn>
+        <ElTableColumn prop="CBM_or_Chargable_Weight"></ElTableColumn>
+        <ElTableColumn prop="Description"></ElTableColumn>
+      </el-table> -->
+
+      <div class="copyright">
+        Copyright of Promocollection - Version 1.02 Released on 01/11/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: 'PaymentRecord3',
+})
+</script>
+
+<script lang="ts" setup>
+import { defineComponent, ref, computed } from 'vue'
+import {
+  ElButton,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElMessage,
+  ElNotification,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElTooltip,
+} from 'element-plus'
+import type { FormInstance } 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 { ITrackingNumberItem } from './inteface'
+import request from '@/utils/axios'
+import utils from '@/utils/index'
+import mathjs from '@/utils/math'
+import { savePrecision } from '@/utils/math'
+import * as XLSX from 'xlsx'
+import navPaymentRecord from '@/pages/payment-record/components/nav.vue'
+
+const loading = ref(false)
+const trackingForm = ref<FormInstance>()
+
+const getLogoPath = function () {
+  return new URL('/assets/logo@2x.png', import.meta.url).href
+}
+
+const multipleSelection = ref<ITrackingNumberItem[]>([])
+const handleSelectionChange = (val: ITrackingNumberItem[]) => {
+  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 = [
+  {
+    Reference: '',
+    CBM_or_Chargable_Weight: '',
+    Tracking_Number: '',
+  },
+]
+const downloadSample = function () {
+  const sheet1 = XLSX.utils.json_to_sheet(sheetData)
+  const wb = XLSX.utils.book_new()
+  sheet1['!cols'] = [{ wpx: 150 }, { wpx: 180 }, { wpx: 150 }]
+  XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
+  XLSX.writeFile(wb, '国际运费模版.xlsx')
+}
+
+const tableData = ref([
+  // {
+  //   Reference: '',
+  //   CBM_or_Chargable_Weight: '2',
+  //   Tracking_Number: '12345',
+  //   Currency: 'AUD',
+  //   statement_name: '华信强0319测试上传月结单',
+  //   payment_type: '国际运费',
+  //   Weight_Unit: 'Kg',
+  // },
+] as ITrackingNumberItem[])
+
+const trackingTable = ref([] as any[]) // 左侧的表格.由tracking number生成, 所以叫这个名字
+const generateTrackingTable = function () {
+  const temp = tableData.value.map((i) => i.Tracking_Number)
+  trackingTable.value = Array.from(new Set(temp)).map((i) => {
+    return {
+      Tracking_Number: i,
+      Total: '',
+      Description: '',
+    }
+  })
+}
+
+const finTable = ref([] as any[]) // 最终发给接口的数据
+const generateFinTable = function () {
+  const result = [] as any[]
+  trackingTable.value.forEach((i) => {
+    const temp = tableData.value.filter(
+      (j) => j.Tracking_Number == i.Tracking_Number,
+    )
+
+    const sum = temp.reduce((total, current) => {
+      total += Number(current.CBM_or_Chargable_Weight)
+      return total
+    }, 0)
+
+    temp.forEach((j) => {
+      const a = savePrecision(
+        mathjs
+          .chain(i.Total)
+          .multiply(Number(j.CBM_or_Chargable_Weight))
+          .divide(sum)
+          .done(),
+        3,
+      )
+      result.push({
+        ...j,
+        Total_Accounts_Payable: Number(i.Total),
+        Total: a,
+        Description: i.Description,
+      })
+    })
+  })
+  finTable.value = result.map((i) => {
+    return {
+      ...i,
+      Fee_Type: i.Reference ? 'Order' : 'Sample',
+    }
+  })
+}
+// 左侧表格的total总和
+const totalSum = computed(() => {
+  return trackingTable.value.reduce((t, c) => {
+    t += Number(c.Total)
+    return t
+  }, 0)
+})
+
+const fileContainer = ref(null as any)
+const updateTableData = (
+  p: { data: ITrackingNumberItem[]; mode: string },
+  file: any,
+) => {
+  tableData.value = p.data as ITrackingNumberItem[]
+  currentPage.value = 1
+  fileContainer.value = file
+}
+
+const currentDisableFlag = computed(() => {
+  return tableData.value.length > 0
+})
+
+const currentPage = ref(1)
+const pageSize = ref(100)
+// 手动分页. 可能会有很多条数据
+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: ITrackingNumberItem, index: number) {
+  editMode.value = 2
+  currentEditIndex.value = index
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = true
+  }
+}
+
+const onAddRow = function (data: ITrackingNumberItem) {
+  if (tableData.value.length) {
+    tableData.value.push(
+      Object.assign(data, {
+        Weight_Unit: tableData.value[0].Weight_Unit,
+      }) as ITrackingNumberItem,
+    )
+    dialogEditRowVisible.value = false
+  }
+}
+const onEditRow = function (data: ITrackingNumberItem) {
+  if (tableData.value.length) {
+    dialogEditRowVisible.value = false
+    tableData.value.splice(
+      (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
+      1,
+      data as ITrackingNumberItem,
+    )
+  }
+}
+const validateTrackingForm = function (formEl: FormInstance | undefined) {
+  if (!formEl) return
+
+  formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('success')
+      tryCreateStatement()
+    } else {
+      console.log('check form has not pass!', fields)
+      ElMessage.error('请检查表单必填项')
+    }
+  })
+}
+const tryCreateStatement = function () {
+  if (
+    ![
+      'Finance Manager',
+      'CEO',
+      'Account Payable',
+      'Logistics Operator',
+      'Cashier',
+    ].includes(userInfo.value.role.name)
+  ) {
+    ElMessage.error('当前用户没有处理的权限')
+    return
+  }
+  generateFinTable()
+  if (!finTable.value.length) {
+    ElMessage.error('生成国际运费数据异常. 请不要关闭本页面并联系管理员.')
+    return
+  }
+  if (tableData.value.length) {
+    createInternationalPackage()
+    createStatement()
+  }
+}
+// 创建国际运费记录
+const createInternationalPackage = function () {
+  console.log(finTable.value, 'createInternationalPackage data')
+  request
+    .post('/payment_request/internationalPackageUpsert', {
+      Related_Sales_Order: finTable.value,
+    })
+    .then((response) => {
+      if (response.data.code !== 1) {
+        ElMessage.error('创建statement出错')
+        ElNotification({
+          type: 'error',
+          duration: 0,
+          title: '创建国际运费记录异常',
+          message: ``,
+        })
+        return
+      }
+      ElNotification({
+        duration: 0,
+        title: '创建国际运费记录成功',
+        type: 'success',
+        message: '创建国际运费记录成功',
+      })
+    })
+    .catch((e) => {
+      console.log(e, 'createInternationalPackage error')
+    })
+}
+
+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: '上传原始表格成功',
+        })
+      }
+    })
+}
+
+const createStatement = function () {
+  console.log(
+    {
+      Total_Amount: totalSum.value || 0,
+      Currency: tableData.value[0].Currency,
+      Name: tableData.value[0].statement_name,
+      Payment_Type: tableData.value[0].payment_type,
+      Owner: {
+        name: userInfo.value.full_name,
+        id: userInfo.value.id,
+      },
+    },
+    'createStatement data',
+  )
+  loading.value = true
+  request
+    .post('/payment_request/createStatementData2', [
+      {
+        Total_Amount: totalSum.value || 0,
+        Currency: tableData.value[0].Currency,
+        Name: tableData.value[0].statement_name,
+        Payment_Type: tableData.value[0].payment_type,
+        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 = finTable.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(),
+      SO_id: i.Reference || '',
+    }
+    t.push(temp)
+    return t
+  }, [] as any[])
+  console.log(formData, 'splitPaymentRequestRecordForm')
+  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)
+    .then(() => {
+      tableData.value = []
+      trackingTable.value = []
+      finTable.value = []
+      statementID.value = ''
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+const createPaymentRequestRecord = function (
+  data: any[],
+  currentPage = 0,
+  pageSize = 1,
+  finalValue: number,
+) {
+  return new Promise((resolve, reject) => {
+    request
+      .post('/payment_request/createPaymentRequestRecord2', 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 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)
+// console.log(route)
+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;
+  }
+}
+.table-left {
+  width: 45%;
+  table {
+    border: 1pt solid #eee;
+    width: 100%;
+  }
+  tr:nth-of-type(n + 2) td {
+    border-top: 1pt solid #eee;
+  }
+  th {
+    color: #909399;
+    text-align: center;
+    background-color: $tableHeaderBgColor;
+  }
+  td {
+    text-align: center;
+    padding: 8pt 8pt 4pt;
+    min-width: 30pt;
+    max-width: 100pt;
+  }
+  th + th,
+  td + td {
+    border-left: 1pt solid #eee;
+  }
+}
+.po-table {
+  width: 45%;
+  min-height: 80vh;
+}
+.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-record3/inteface.ts

@@ -0,0 +1,20 @@
+export interface IPoItem {
+  Tracking_Number: string
+  Total: number | string
+  Description: string
+}
+
+export interface ITrackingNumberItem {
+  Reference: string
+  CBM_or_Chargable_Weight: number | string
+  Tracking_Number: string
+  Currency: string
+  Weight_Unit: string
+  statement_name: string
+  payment_type?: string
+}
+
+export interface IOptionItem {
+  label: string
+  value: string
+}

src/pages/purchase-order/edit.vue

@@ -39,7 +39,7 @@
       v-show="formVisible"
       class="screen"
     >
-      <div class="flex between page-title-wrap">
+      <div class="flex justify-between page-title-wrap">
         <div class="flex">
           <el-icon
             size="36px"
@@ -56,7 +56,7 @@
         :rules="formRule"
         label-width="120px"
       >
-        <div class="flex start">
+        <div class="flex items-start">
           <div class="layout-left">
             <el-form-item
               prop="Order_Type"
@@ -108,7 +108,7 @@
               label="Suggest Supplier"
               label-width="130px"
             >
-              <div class="flex column start">
+              <div class="flex flex-col items-start">
                 <div
                   v-for="(item, index) in recommandVendor"
                   :key="index"
@@ -142,7 +142,7 @@
 
             <div class="company-info">
               <div class="company-name">{{ computedCompany.name }}</div>
-              <div class="flex center">
+              <div class="flex justify-center">
                 <div class="company-addr">
                   地址:&nbsp;{{ computedCompany.addr }}
                 </div>
@@ -162,7 +162,7 @@
               <div class="left"></div>
               <div class="right"></div>
             </div>
-            <div class="flex start between form-area">
+            <div class="flex items-start justify-between form-area">
               <div class="form-area-left">
                 <div class="">
                   <span style="color: #f56c6c">*</span>
@@ -423,7 +423,7 @@
                 Add Row
               </el-button>
             </div>
-            <div class="flex end">
+            <div class="flex justify-end">
               <div class="product-total-table">
                 <div class="total-item">
                   <div class="label">Sub Total</div>
@@ -463,28 +463,28 @@
                 <el-input
                   v-model="form.field12"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="产品质量:">
                 <el-input
                   v-model="form.field13"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="质量承诺:">
                 <el-input
                   v-model="form.field10"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="箱子箱唛:">
                 <el-input
                   v-model="form.field11"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
             </div>
@@ -602,24 +602,24 @@
 
             <div
               v-if="currentCompany === 'PrimePacCommon'"
-              class="flex stretch PrimePac-table"
+              class="flex items-stretch PrimePac-table"
             >
-              <div class="flex column stretch">
-                <div class="column-item flex center">制作要求</div>
-                <div class="flex-auto column-item flex center">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex justify-center">制作要求</div>
+                <div class="flex-auto column-item flex justify-center">
                   产品外观要求
                 </div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacCommonRuleTableData"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
@@ -628,44 +628,44 @@
 
             <div
               v-if="currentCompany === 'PrimePacSoft'"
-              class="flex column stretch PrimePac-table"
+              class="flex flex-col items-stretch PrimePac-table"
             >
-              <div class="flex stretch">
-                <div class="flex column stretch">
-                  <div class="column-item flex-auto flex center">制作要求</div>
+              <div class="flex items-stretch">
+                <div class="flex flex-col items-stretch">
+                  <div class="column-item flex-auto flex justify-center">制作要求</div>
                 </div>
-                <div class="flex-auto flex column stretch">
+                <div class="flex-auto flex flex-col items-stretch">
                   <div
                     v-for="(item, index) in PrimePacSoftRuleTableData1"
                     :key="index"
-                    class="flex stretch flex-auto"
+                    class="flex items-stretch flex-auto"
                   >
-                    <div class="column-item flex center">
+                    <div class="column-item flex justify-center">
                       {{ item.project }}
                     </div>
-                    <div class="column-item flex-auto flex center">
+                    <div class="column-item flex-auto flex justify-center">
                       {{ item.method }}
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div class="flex stretch">
-                <div class="flex column stretch">
-                  <div class="column-item flex-auto flex center">
+              <div class="flex items-stretch">
+                <div class="flex flex-col items-stretch">
+                  <div class="column-item flex-auto flex justify-center">
                     产品技术要求
                   </div>
                 </div>
-                <div class="flex-auto flex column stretch">
+                <div class="flex-auto flex flex-col items-stretch">
                   <div
                     v-for="(item, index) in PrimePacSoftRuleTableData2"
                     :key="index"
-                    class="flex stretch flex-auto"
+                    class="flex items-stretch flex-auto"
                   >
-                    <div class="column-item flex center">
+                    <div class="column-item flex justify-center">
                       {{ item.project }}
                     </div>
-                    <div class="column-item flex-auto flex center">
+                    <div class="column-item flex-auto flex justify-center">
                       {{ item.method }}
                     </div>
                   </div>
@@ -689,7 +689,7 @@
         >
           <div class="company-info">
             <div class="company-name">{{ computedCompany.name }}</div>
-            <div class="flex center">
+            <div class="flex justify-center">
               <div class="company-addr">
                 地址:&nbsp;{{ computedCompany.addr }}
               </div>
@@ -719,7 +719,7 @@
               </tr>
             </table>
           </div>
-          <div class="form-area flex start">
+          <div class="form-area flex items-start">
             <div class="flex-auto">
               <div>供应商(乙方) :</div>
               <div
@@ -774,7 +774,7 @@
                   }}
                 </div>
               </div>
-              <div class="flex start">
+              <div class="flex items-start">
                 <div class="column-form-label">参考 :</div>
                 <div class="column-form-value">
                   {{ form.Title }}
@@ -784,7 +784,7 @@
               <template
                 v-if="typeof computedCompany.taxReimbursement === 'undefined'"
               >
-                <div class="flex start">
+                <div class="flex items-start">
                   <div class="column-form-label">收货详情 :</div>
                   <div class="column-form-value">
                     {{ form.field9 }}
@@ -878,7 +878,7 @@
           </div>
 
           <!-- <br /> -->
-          <div class="flex between start">
+          <div class="flex justify-between items-start">
             <div
               v-if="userInfo.Organization !== 'PrimePac'"
               class="note-form-area"
@@ -987,22 +987,22 @@
 
           <div
             v-if="currentCompany === 'PrimePacCommon'"
-            class="flex stretch PrimePac-table"
+            class="flex items-stretch PrimePac-table"
           >
-            <div class="flex column stretch">
-              <div class="column-item flex center">制作要求</div>
-              <div class="flex-auto column-item flex center">产品外观要求</div>
+            <div class="flex flex-col items-stretch">
+              <div class="column-item flex justify-center">制作要求</div>
+              <div class="flex-auto column-item flex justify-center">产品外观要求</div>
             </div>
-            <div class="flex-auto flex column stretch">
+            <div class="flex-auto flex flex-col items-stretch">
               <div
                 v-for="(item, index) in PrimePacCommonRuleTableData"
                 :key="index"
-                class="flex stretch flex-auto"
+                class="flex items-stretch flex-auto"
               >
-                <div class="column-item flex center">
+                <div class="column-item flex justify-center">
                   {{ item.project }}
                 </div>
-                <div class="column-item flex-auto flex center">
+                <div class="column-item flex-auto flex justify-center">
                   {{ item.method }}
                 </div>
               </div>
@@ -1011,44 +1011,44 @@
 
           <div
             v-if="currentCompany === 'PrimePacSoft'"
-            class="flex column stretch PrimePac-table"
+            class="flex flex-col items-stretch PrimePac-table"
           >
-            <div class="flex stretch">
-              <div class="flex column stretch">
-                <div class="column-item flex-auto flex center">制作要求</div>
+            <div class="flex items-stretch">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex-auto flex justify-center">制作要求</div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacSoftRuleTableData1"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
               </div>
             </div>
 
-            <div class="flex stretch">
-              <div class="flex column stretch">
-                <div class="column-item flex-auto flex center">
+            <div class="flex items-stretch">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex-auto flex justify-center">
                   产品技术要求
                 </div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacSoftRuleTableData2"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
@@ -1117,12 +1117,12 @@
           <div class="billing-addr">
             {{ computedVendor.Billing_Address || '' }}
           </div>
-          <div class="flex around contact-info">
+          <div class="flex justify-around contact-info">
             <div class="flex">
               <div>Tel No.:</div>
               <div>&nbsp;{{ computedVendor.Phone }}</div>
             </div>
-            <div class="flex center">
+            <div class="flex justify-center">
               <div>E-mail:</div>
               <div class="">&nbsp;{{ computedVendor.Email }}</div>
             </div>
@@ -1130,7 +1130,7 @@
 
           <div class="base-info-area">
             <div class="flex">
-              <div class="flex start left">
+              <div class="flex items-start left">
                 <div class="base-info-label">TO:</div>
                 <div
                   v-if="currentCompany === 'AZYTaxReimbursement'"
@@ -1152,8 +1152,8 @@
               </div>
             </div>
 
-            <div class="flex start">
-              <div class="left flex start">
+            <div class="flex items-start">
+              <div class="left flex items-start">
                 <div class="base-info-label">ADD:</div>
                 <div>
                   <div
@@ -1177,7 +1177,7 @@
               </div>
             </div>
 
-            <div class="flex start">
+            <div class="flex items-start">
               <div class="left flex">
                 <div class="base-info-label">ATTN:</div>
                 <div class="base-info-value">Accounts</div>
@@ -1188,7 +1188,7 @@
               </div>
             </div>
 
-            <div class="flex start">
+            <div class="flex items-start">
               <div class="flex left">
                 <template v-if="currentCompany === 'FOTTaxReimbursement'">
                   <div class="base-info-label">TEL NO:</div>
@@ -1243,7 +1243,7 @@
                 </td>
               </tr>
             </table>
-            <div class="flex end">
+            <div class="flex justify-end">
               <div
                 class="flex"
                 style="margin-top: 10pt"
@@ -1300,7 +1300,7 @@
             </div>
           </div>
           <br />
-          <div class="flex between start">
+          <div class="flex justify-between items-start">
             <div class="">
               <div class="">BUYERS' SIGNATURE</div>
               <div class="sign-wrap">

src/pages/wecom-approval/admin-portal.vue

@@ -17,7 +17,7 @@
     ></div>
     <div
       v-if="pwd !== '123458'"
-      class="main-content flex center"
+      class="main-content flex justify-center"
     >
       <el-input
         v-model="pwd"
@@ -40,7 +40,7 @@
         </div>
         <div class="page-title">企业微信用户列表</div>
       </div>
-      <div class="flex start">
+      <div class="flex items-start">
         <div style="width: 360px">
           <div
             v-for="item in deptList"

src/pages/wecom-approval/index.vue

@@ -171,21 +171,21 @@
 
         <el-form-item label="地址">
           <div class="addr-input-group">
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.ATTN"
                 placeholder="ATTN"
               ></el-input>
               <div class="addr-append">ATTN</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Phone"
                 placeholder="Phone"
               ></el-input>
               <div class="addr-append">Phone</div>
             </div>
-            <div class="flex start stretch">
+            <div class="flex items-stretch">
               <el-input
                 v-model="form.Shipping_Unit_Building_Name"
                 placeholder="Shipping Unit/Building Name"
@@ -194,35 +194,35 @@
               ></el-input>
               <div class="addr-append">Shipping Unit</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Street"
                 placeholder="Shipping Street"
               ></el-input>
               <div class="addr-append">Shipping Street</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_City"
                 placeholder="Shipping City"
               ></el-input>
               <div class="addr-append">Shipping City</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_State"
                 placeholder="Shipping state"
               ></el-input>
               <div class="addr-append">Shipping State</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Code"
                 placeholder="Shipping Code"
               ></el-input>
               <div class="addr-append">Shipping Code</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Country"
                 placeholder="Shipping Country"
@@ -1294,14 +1294,13 @@ input[type='number'] {
 }
 .addr-input-group {
   width: 100%;
-  ::v-deep {
-    .el-input__wrapper,
-    textarea {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      min-height: 34px !important;
-    }
+  :deep(.el-input__wrapper),
+  :deep(textarea) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    min-height: 34px !important;
   }
+
   .el-input,
   .el-textarea {
     margin-bottom: 10px;

src/route.ts

@@ -25,6 +25,21 @@ 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: 'paymentRecord3',
+      path: '/payment-record3',
+      component: () => import('@/pages/payment-record3/index.vue'),
+    },
+    // {
+    //   name: 'paymentRecord4',
+    //   path: '/payment-record4',
+    //   component: () => import('@/pages/payment-record3/index.vue'),
+    // },
     {
       name: 'wecomApproval',
       path: '/wecom-approval/:id',
@@ -35,6 +50,26 @@ const router = createRouter({
       path: '/wecom-admin-portal',
       component: () => import('@/pages/wecom-approval/admin-portal.vue'),
     },
+    // {
+    //   name: 'indentManage',
+    //   path: '/indent-manage',
+    //   component: () => import('@/pages/indent-manage/index.vue'),
+    //   children: [
+    //     {
+    //       path: 'indent',
+    //       name: 'indent',
+    //       component: () => import('@/pages/indent-manage/indent/index.vue'),
+    //       children: [
+    //         {
+    //           path: 'list',
+    //           name: 'list',
+    //           component: () =>
+    //             import('@/pages/indent-manage/indent/list.vue'),
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // },
     {
       path: '/:pathMatch(.*)*',
       name: 'pageNotFound',

src/utils/math.js

@@ -0,0 +1,22 @@
+import { create, all } from 'mathjs'
+
+/**
+ * 数学运算库math.js的实例.
+ *
+ * 用于解决 包括但不限于IEEE754浮点数运算精度 问题.
+ **/
+const mathjs = create(all, { number: 'BigNumber' })
+
+/**
+ * 转换 {value}, 保留 {precision} 位的小数
+ **/
+export const savePrecision = function (value, precision = 2) {
+  const temp = Number(value)
+  return Number(
+    mathjs.format(typeof temp === 'number' ? temp : 0, (v) =>
+      v.toFixed(precision)
+    )
+  )
+}
+
+export default mathjs

tailwind.config.cjs

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js}'],
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          0: '#000',
+          1: '#111',
+          2: '#222',
+          3: '#333',
+          4: '#444',
+          5: '#555',
+          6: '#666',
+          7: '#777',
+          8: '#888',
+          9: '#999',
+          a: '#aaa',
+          b: '#bbb',
+          c: '#ccc',
+          d: '#ddd',
+          e: '#eee',
+          f: '#fff',
+        },
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+}

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig(({ mode }) => {
       devSourcemap: true,
       preprocessorOptions: {
         scss: {
-          additionalData: `@import '@/assets/css/flex-custom.scss';@import '@/assets/css/var.scss';`,
+          additionalData: `@import '@/assets/css/var.scss';`,
         },
       },
     },
@@ -36,7 +36,7 @@ export default defineConfig(({ mode }) => {
     ],
     build: {
       // 设置最终构建的浏览器兼容目标
-      target: 'es2015',
+      target: 'es2020',
       // 构建后是否生成 source map 文件
       sourcemap: false,
       // chunk 大小警告的限制（以 kbs 为单位）