feat: payment request record3 国际运费.

package.json

@@ -12,28 +12,31 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "~0.27.2",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "element-plus": "2.7.6",
     "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",
+    "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",
     "@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",
     "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",
+    "typescript": "^5.6.3",
     "vite": "^5.0.5",
-    "vue-tsc": "^2.0.26"
+    "vue-tsc": "^2.1.10"
   }
 }

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

@@ -0,0 +1,301 @@
+<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 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 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: '国际运费',
+    },
+    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,375 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      width="750px"
+      title="Upload Statement"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="handleClose"
+    >
+      <div
+        v-loading="loading"
+        class="flex start"
+      >
+        <el-form
+          ref="mainForm"
+          :rules="formRule"
+          class="flex-auto"
+          :model="form"
+          label-width="150px"
+        >
+          <el-form-item
+            label="Statement Name"
+            prop="statement_name"
+          >
+            <el-input
+              v-model="form.statement_name"
+              style="width: 190px"
+              type="textarea"
+              rows="3"
+            />
+          </el-form-item>
+
+          <el-form-item label="Currency">
+            <el-select v-model="form.currency">
+              <el-option
+                v-for="option in currencyList as IOptionItem[]"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="Payment Type">
+            <el-select
+              v-model="form.paymentType"
+              disabled
+            >
+              <el-option
+                v-for="option in paymentOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="form.paymentType === '国际运费'"
+            label="Weight Unit"
+          >
+            <el-select v-model="form.weightUnit">
+              <el-option
+                v-for="option in weightOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="Upload Mode">
+            <el-select
+              v-model="form.mode"
+              disabled
+            >
+              <el-option
+                v-for="option in uploadOption"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div
+          class="flex-auto drag-area"
+          @dragenter="stop"
+          @dragover="stop"
+          @dragleave="stop"
+          @drop="processExcel"
+        >
+          <label for="fileInput">
+            <div
+              class="flex column stretch"
+              style="text-align: center; padding: 44px 20px; cursor: pointer"
+            >
+              <div>
+                <el-icon
+                  size="60px"
+                  color="#999"
+                >
+                  <upload-filled />
+                </el-icon>
+              </div>
+
+              <div class="el-upload__text">拖动文件到这或者点击选择</div>
+              <br />
+              <div class="el-upload__text">
+                注意, 点确认前确保Payment Type选了正确的类型;
+              </div>
+              <br />
+              <div class="el-upload">
+                单个Excel数据最好控制在100行内, 处理起来会慢;
+              </div>
+              <br />
+              <div
+                v-if="fileContainer"
+                style="color: green"
+              >
+                读取文件成功!
+              </div>
+            </div>
+          </label>
+        </div>
+      </div>
+      <br />
+      <div class="flex end">
+        <el-button
+          :loading="loading"
+          @click="handleClose"
+        >
+          关闭
+        </el-button>
+        <el-tooltip content="注意, 点确认前确保Payment Type选了正确的类型">
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="next(mainForm)"
+          >
+            确认
+          </el-button>
+        </el-tooltip>
+      </div>
+    </el-dialog>
+    <!-- multiple -->
+    <input
+      id="fileInput"
+      type="file"
+      style="display: none"
+      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+      @change="processExcel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'DialogUploadExcel',
+})
+</script>
+<script lang="ts" setup>
+import { watchEffect, ref } from 'vue'
+import {
+  ElDialog,
+  ElMessage,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElInput,
+  ElButton,
+  ElIcon,
+  ElTooltip,
+} from 'element-plus'
+
+import { UploadFilled } from '@element-plus/icons-vue'
+import * as XLSX from 'xlsx'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ITrackingNumberItem, IOptionItem, } from '../inteface'
+
+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,
+                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,834 @@
+<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 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="finTable.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 start 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"
+                      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 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) => {
+      result.push({
+        ...j,
+        Total: savePrecision(
+          mathjs
+            .chain(i.Total)
+            .multiply(Number(j.CBM_Or_Chargable_Weight))
+            .divide(sum)
+            .done(),
+          3,
+        ),
+        Description: i.Description,
+      })
+    })
+  })
+  finTable.value = result.map((i) => {
+    return {
+      ...i,
+      Fee_Type: i.Reference ? 'Order' : 'Sample',
+      Total_Accounts_Payable: i.Total,
+    }
+  })
+}
+// 左侧表格的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(data 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
+      }
+    })
+    .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(),
+    }
+    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)
+}
+
+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/route.ts

@@ -30,6 +30,16 @@ const router = createRouter({
       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',
@@ -40,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

vite.config.ts

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