From 1444a1638dc0492f75567434991da502cb71e8f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Fri, 30 Dec 2022 16:56:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=8A=A5=E9=94=80=EF=BC=9A?= =?UTF-8?q?=E6=94=B9=E9=80=A0=E4=BA=86ui=E6=A1=86=E6=9E=B6=E5=92=8C?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reimbursement/mine/MyReimbursement.tsx | 287 +++++++++--------- 1 file changed, 150 insertions(+), 137 deletions(-) diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index 1277c75..b3a3baa 100644 --- a/src/pages/reimbursement/mine/MyReimbursement.tsx +++ b/src/pages/reimbursement/mine/MyReimbursement.tsx @@ -1,12 +1,13 @@ -import {DownOutlined} from '@ant-design/icons'; +import {DownOutlined,ExclamationCircleOutlined} from '@ant-design/icons'; import type {ActionType, ProColumns, ProFormInstance} from '@ant-design/pro-components'; import {ProTable} from '@ant-design/pro-components'; -import {Button, Dropdown, Input, Space, Typography} from 'antd'; +import {Button, Dropdown, Input, Popover, Space, Typography} from 'antd'; import React, {ReactNode, useRef} from "react"; import Search from "antd/es/input/Search"; import axiosInstance from "../../../utils/axiosInstance"; import {FormProps} from "antd/es/form/Form"; import {FormInstance} from "antd/es/form"; +import {SortOrder} from "antd/es/table/interface"; const valueEnum = { 0: 'success', @@ -16,112 +17,60 @@ const valueEnum = { 4: 'wait4', 5: 'failure' }; - +export type Department = { + departmentId: number; + departmentName: string; +} export type TableListItem = { id: string; - kind: string; + beginDate: number; + duration: number; + endDate: number; + OD: string[]; amount: number; - status: string; - department: string; + invoiceAmount: number; + additionalAmount: number; + status: number; + departmentId: number; submitDateTime: number; detail: string; + back:boolean; }; -let fakeData: TableListItem[] = [ - - { - id: "123", - kind: "string", - amount: 5.0, - status: valueEnum[5], - department: "string", - submitDateTime: Date.now() - 100000000, - detail: "查看详情", - }, - { - id: "123", - kind: "string", - detail: "查看详情", - amount: 4.0, - status: valueEnum[4], - department: "string", - submitDateTime: Date.now() - 100000000, - }, - - { - id: "123", - kind: "string", - detail: "查看详情", - amount: 3.0, - status: valueEnum[3], - department: "string", - submitDateTime: Date.now() - 100000000, - }, - { - id: "123", - kind: "string", - detail: "查看详情", - amount: 2, - status: valueEnum[2], - department: "string", - submitDateTime: Date.now(), - }, - { - id: "123", - kind: "string", - detail: "查看详情", - amount: 1, - status: valueEnum[1], - department: "string", - submitDateTime: Date.now() - 100000000, - }, - { - id: "123", - kind: "string", - detail: "查看详情", - amount: 0.0, - status: valueEnum[0], - department: "string", - submitDateTime: Date.now() - 100000000, - }, -]; +let fakeData: TableListItem[] = []; for (let i = 0; i < 94; i++) - fakeData.push({ - id: "123", - kind: "string", - detail: "查看详情", - amount: i, - status: valueEnum[0], - department: "string", - submitDateTime: Date.now() - 100000000, - }) -for (let i = 0; i < fakeData.length; i++) - fakeData[i].amount = i + 1 - - - - -function pullAll() { - let params - axiosInstance({ - url: 'reimbursement/list', - method: 'get', - params: params - }).then(response => { - console.log(response.data) - }).catch(function (error) { - console.log(error) - }) -} - -class Subpage extends React.Component { - tableAction = React.createRef(); - constructor(props: { }) { - super(props); - this.state={ - searchWord:"" - } + { + fakeData.push({ + id: "AX2022-" + i.toString(), + beginDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1), + endDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1) + 1000 * 60 * 60 * 24 * i + 1, + duration: Math.ceil(Math.abs(1000 * 60 * 60 * 24 * i + 1) / 1000 / 60 / 60 / 24), + detail: "查看详情", + OD: ['上海', '北京'], + amount: i + i, + invoiceAmount: i, + additionalAmount: i, + status: (i%6), + departmentId: i%3+1, + submitDateTime: Date.now() - 100000000, + back:(i&1)===1, + }) } + + + +class Subpage extends React.Component { + tableAction = React.createRef(); + + constructor(props: {}) { + super(props); + this.state = { + searchWord: "", + } + this.pullDepartment() + } + department = new Map() + columns: ProColumns[] = [ { title: '报销单号', @@ -131,19 +80,40 @@ class Subpage extends React.Component { //render: (_) => {_}, }, { - title: '报销类型', + title: '行程', width: 80, - dataIndex: 'kind', + dataIndex: 'OD', search: false, + render: (_, row) => <>{row.OD[0] + (row.back?"⇌":"→") + row.OD[1]}, + }, + { + title: '出发日期', + width: 80, + dataIndex: 'beginDate', + search: false, + valueType: 'date', //render: (_) => {_}, }, { - title: '金额', + title: '出差天数', + width: 80, + dataIndex: 'duration', + search: false, + //valueType: 'date', + render: (_) => <>{_}天, + }, + { + title: '总金额', width: 80, dataIndex: 'amount', search: false, - //render: (_) => {_}, - sorter: (a, b) => a.amount - b.amount + render: (_,item) => + <>{item.amount.toFixed(2)}元 + 报销金额：{item.invoiceAmount.toFixed(2)}元
补贴金额：{item.additionalAmount.toFixed(2)}元}> + + + + , }, { title: '状态', @@ -153,12 +123,12 @@ class Subpage extends React.Component { onFilter: true, search: false, valueEnum: { - wait1: {text: '待主管审批', status: 'Processing'}, - wait2: {text: '待财务审批', status: 'Processing'}, - wait3: {text: '待财务主管审批', status: 'Processing'}, - wait4: {text: '待总经理审批', status: 'Processing'}, - success: {text: '已报销', status: 'Success'}, - failure: {text: '审批未通过', status: 'Error'}, + 0: {text: '已报销', status: 'Success'}, + 1: {text: '待主管审批', status: 'Processing'}, + 2: {text: '待财务审批', status: 'Processing'}, + 3: {text: '待财务主管审批', status: 'Processing'}, + 4: {text: '待总经理审批', status: 'Warning'}, + 5: {text: '审批未通过', status: 'Error'}, }, //render: (_) => {_}, @@ -167,7 +137,10 @@ class Subpage extends React.Component { title: '申请部门', width: 80, search: false, - dataIndex: 'department', + dataIndex: 'departmentId', + valueEnum: this.department, + filters: true, + onFilter: true, //render: (_) => {_}, }, { @@ -176,7 +149,6 @@ class Subpage extends React.Component { dataIndex: 'submitDateTime', valueType: 'dateTime', search: false, - sorter: (a, b) => a.submitDateTime - b.submitDateTime //render: (_) => {_}, }, @@ -190,6 +162,7 @@ class Subpage extends React.Component { key="a" onClick={() => { this.showDetail(row) + this.tableAction.current?.reload() }} > 查看详情 @@ -197,9 +170,10 @@ class Subpage extends React.Component { ], }, ]; + search(value: string, form: FormProps['form'], dom: ReactNode[]) { - this.setState({searchWord:value}); - if(value===""){ + this.setState({searchWord: value}); + if (value === "") { // @ts-ignore this.tableAction.current.reloadAndRest() } @@ -207,39 +181,78 @@ class Subpage extends React.Component { } create() { + //TODO alert("123") } showDetail(row: TableListItem) { + //TODO alert((new Date(row.submitDateTime))) } + converter(value: any) { + let result: TableListItem[] = [] + return result + } - updateRequest(current: number | undefined, pageSize: number | undefined){ - // @ts-ignore - if(this.state.searchWord.trim()===""){ - current = (current === undefined ? 0 : current) - pageSize = (pageSize === undefined ? 5 : pageSize) - let tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current) - console.log(current, pageSize, tableListDataSource.length) - let totalRecordLength = fakeData.length - return Promise.resolve({ - data: tableListDataSource, - success: true, - total: totalRecordLength, - pageSize: pageSize - }); - }else{ - let tableListDataSource = fakeData.slice(0,1) - return Promise.resolve({ - data: tableListDataSource, - success: true, - total: tableListDataSource.length, - }); - } + pullDepartment() { + this.department.clear() + axiosInstance.get('common/department').then(response => { + console.log(response.data) + response.data.forEach((value: any) => { + this.department.set(value.departmentId, value.departmentName) + } + ) + console.log(this.department) + // @ts-ignore + this.tableAction.current?.reset() + }) } + + updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record, filter: Record) { + let tableListDataSource: TableListItem[] = [] + let totalRecordLength = 0 + if (this.state.searchWord.trim() === "") { + current = (current === undefined ? 0 : current) + pageSize = (pageSize === undefined ? 5 : pageSize) + let params = { + current: current, + pageSize: pageSize + } + axiosInstance.get('common/reimbursement', { + params: params + }).then(response => { + console.log(response.data) + tableListDataSource = this.converter(response.data.records) + totalRecordLength = response.data.total + }).catch(function (error) { + console.log(error) + }) + + tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current) + totalRecordLength = fakeData.length + + } else { + axiosInstance.get('common/reimbursement/' + this.state.searchWord.trim(), {}).then(response => { + console.log(response.data) + tableListDataSource = this.converter(response.data.records) + totalRecordLength = tableListDataSource.length + }).catch(function (error) { + console.log(error) + }) + + } + + return Promise.resolve({ + data: tableListDataSource, + success: true, + total: totalRecordLength, + }); + } + + render() { return ( @@ -248,7 +261,7 @@ class Subpage extends React.Component { request={async (params, sorter, filter) => { // 表单搜索项会从 params 传入，传递给后端接口。 console.log(params, sorter, filter); - return this.updateRequest(params.current, params.pageSize) + return this.updateRequest(params.current, params.pageSize, sorter, filter) }} rowKey="key"