crm_extend/src/pages/payment-record3/index.vue

<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) => {
      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>