|
|
@@ -0,0 +1,551 @@
|
|
|
+<template>
|
|
|
+ <div class="page-payment-record">
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ v-loading="true"
|
|
|
+ style="width: 100%; height: 100vh"
|
|
|
+ class=""
|
|
|
+ element-loading-text="Loading..."
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.3)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="main-content"
|
|
|
+ >
|
|
|
+ <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 @click="addRow">Add New Line</el-button>
|
|
|
+ <el-button
|
|
|
+ :disabled="tableData.length < 1"
|
|
|
+ type="primary"
|
|
|
+ @click="save"
|
|
|
+ >
|
|
|
+ Save
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="po-table">
|
|
|
+ <el-table
|
|
|
+ :data="computedTableData"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ 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="130px"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="po_number"
|
|
|
+ label="PO Number"
|
|
|
+ align="center"
|
|
|
+ width="110"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="sku"
|
|
|
+ label="sku"
|
|
|
+ align="center"
|
|
|
+ width="80px"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="Description"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="unit_price"
|
|
|
+ label="Unit Price"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="quantity"
|
|
|
+ label="Quantity"
|
|
|
+ align="center"
|
|
|
+ width="100px"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="sample_fee"
|
|
|
+ label="Sample Fee"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="setup_service_fee"
|
|
|
+ label="Setup Service Fee"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="total"
|
|
|
+ label="Total"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="sales_person"
|
|
|
+ label="sales_person"
|
|
|
+ align="center"
|
|
|
+ /> -->
|
|
|
+ <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 end"></div>
|
|
|
+ <br />
|
|
|
+ <div
|
|
|
+ class="flex between"
|
|
|
+ style="align-items: flex-end"
|
|
|
+ >
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="currentPage"
|
|
|
+ v-model:pageSize="pageSize"
|
|
|
+ layout="prev, pager, next, jumper, sizes"
|
|
|
+ :page-sizes="[5, 10, 15, 20, 40, 100]"
|
|
|
+ :total="tableData.length"
|
|
|
+ @current-change="multipleSelection = []"
|
|
|
+ @size-change="multipleSelection = []"
|
|
|
+ />
|
|
|
+ <div class="total-data">
|
|
|
+ <div class="flex">
|
|
|
+ <div>Total line:</div>
|
|
|
+ <div>{{ tableData.length }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="">Sum Total:</div>
|
|
|
+ <div class="">{{ computedSum }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="">Currency:</div>
|
|
|
+ <div>{{ tableData.length > 0 ? tableData[0].currency : '' }}</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>
|
|
|
+ <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: 'PaymentRecord',
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { defineComponent, ref, computed } from 'vue'
|
|
|
+import {
|
|
|
+ ElButton,
|
|
|
+ ElTable,
|
|
|
+ ElTableColumn,
|
|
|
+ // ElTabs,
|
|
|
+ // ElTabPane,
|
|
|
+ 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'
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+const multipleSelection = ref<IPoItem[]>([])
|
|
|
+
|
|
|
+const handleSelectionChange = (val: IPoItem[]) => {
|
|
|
+ multipleSelection.value = val
|
|
|
+}
|
|
|
+const onDelete = function () {
|
|
|
+ const target = multipleSelection.value
|
|
|
+ tableData.value = tableData.value.filter((i) => {
|
|
|
+ return !target.includes(i)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const sheetData = [
|
|
|
+ {
|
|
|
+ PO_Number: '',
|
|
|
+ SKU: '',
|
|
|
+ Description: '',
|
|
|
+ Unit_Price: '',
|
|
|
+ Quantity: '',
|
|
|
+ Sample_Fee: '',
|
|
|
+ Setup_Service_Fee: '',
|
|
|
+ Total: '',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const downloadSample = function () {
|
|
|
+ const sheet1 = XLSX.utils.json_to_sheet(sheetData)
|
|
|
+ const wb = XLSX.utils.book_new()
|
|
|
+ sheet1['!cols'] = [
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 80 },
|
|
|
+ { wpx: 120 },
|
|
|
+ { wpx: 80 },
|
|
|
+ ]
|
|
|
+ XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
|
|
|
+
|
|
|
+ XLSX.writeFile(wb, '模版.xlsx')
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = ref([] as IPoItem[])
|
|
|
+const computedSum = computed(() => {
|
|
|
+ return tableData.value.reduce((total, current) => {
|
|
|
+ total = total + Number(current.total)
|
|
|
+ return total
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
+const updateTableData = (p: { data: IPoItem[]; mode: string }) => {
|
|
|
+ if (p.mode === 'Append') {
|
|
|
+ tableData.value = tableData.value.concat(p.data)
|
|
|
+ } else {
|
|
|
+ tableData.value = p.data
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+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: string[] = []
|
|
|
+ tableData.value.forEach((i) => {
|
|
|
+ if (i.statement_name?.length && !result.includes(i.statement_name)) {
|
|
|
+ result.push(i.statement_name)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return result.map((i) => {
|
|
|
+ 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 () {
|
|
|
+ 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
|
|
|
+}
|
|
|
+
|
|
|
+const onAddRow = function (data: IPoItem) {
|
|
|
+ tableData.value.push(data)
|
|
|
+ dialogEditRowVisible.value = false
|
|
|
+}
|
|
|
+const onEditRow = function (data: IPoItem) {
|
|
|
+ dialogEditRowVisible.value = false
|
|
|
+ tableData.value.splice(
|
|
|
+ (currentPage.value - 1) * pageSize.value + currentEditIndex.value,
|
|
|
+ 1,
|
|
|
+ data,
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const save = function () {
|
|
|
+ if (!['Finance Manager', 'CEO'].includes(userInfo.value.role.name)) {
|
|
|
+ ElMessage.error('当前用户没有处理的权限')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const formData = tableData.value.map((i, index) => {
|
|
|
+ const result: any = {
|
|
|
+ unit_price: i.unit_price,
|
|
|
+ quantity: i.quantity,
|
|
|
+ sample_fee: i.sample_fee,
|
|
|
+ setup_service_fee: i.setup_service_fee,
|
|
|
+ total: i.total,
|
|
|
+ currency: i.currency,
|
|
|
+ description: i.description,
|
|
|
+ PO_id: i.po_number,
|
|
|
+ Statement: { name: i.statement_name, id: i.statement_id },
|
|
|
+ Request_Type: '月结申请',
|
|
|
+ Name: '/',
|
|
|
+ Unit_Price_Non_Currency: i.unit_price.toString(),
|
|
|
+ Owner: '',
|
|
|
+ Payment_Status: 'Pending Verify',
|
|
|
+ Batch_number: new Date().getTime().toString(),
|
|
|
+ }
|
|
|
+ // if (index % 3 !== 0) {
|
|
|
+ // result.Statement = { name: i.statement_name, id: i.statement_id }
|
|
|
+ // } else {
|
|
|
+ // // 用来测试分批保存的, 这个数据故意写错接口就回出错
|
|
|
+ // result.Statement = i.statement_name
|
|
|
+ // }
|
|
|
+ return result
|
|
|
+ })
|
|
|
+
|
|
|
+ let size = 100
|
|
|
+ const dataList = utils.splitArray(formData, size)
|
|
|
+ const pool = []
|
|
|
+ for (let i = 0; i < dataList.length; i++) {
|
|
|
+ pool.push(
|
|
|
+ send(
|
|
|
+ dataList[i],
|
|
|
+ i,
|
|
|
+ size,
|
|
|
+ i === dataList.length - 1 ? formData.length : 0,
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ }
|
|
|
+ Promise.all(pool).then(() => {
|
|
|
+ tableData.value = []
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const send = (
|
|
|
+ data: IPoItem[],
|
|
|
+ currentPage = 0,
|
|
|
+ pageSize = 1,
|
|
|
+ finalValue: number,
|
|
|
+) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ request
|
|
|
+ .post('/payment_request/createPaymentRequest', 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)
|
|
|
+
|
|
|
+// upload list
|
|
|
+// const currentTab = ref('upload')
|
|
|
+
|
|
|
+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" scoped>
|
|
|
+.page-payment-record {
|
|
|
+}
|
|
|
+.main-content {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 12px 40px;
|
|
|
+ width: 1600px;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.po-table {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.total-data {
|
|
|
+ width: 150px;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+</style>
|
