From a0308dcd86f7db341a30ca0f6ac8926512d69f9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Thu, 29 Dec 2022 00:16:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=90=9C=E7=B4=A2,=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E9=80=BB=E8=BE=91;=E5=BE=85=E6=8E=A5=E5=85=A5?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=80=9A=E4=BF=A1,=E6=96=B0=E5=BB=BA?= =?UTF-8?q?=E6=8A=A5=E9=94=80=E5=8D=95,=E6=9F=A5=E7=9C=8B=E8=AF=A6?= =?UTF-8?q?=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/Staff.ts | 15 + .../reimbursement/mine/MyReimbursement.tsx | 395 +++++++++++------- 2 files changed, 259 insertions(+), 151 deletions(-) diff --git a/src/models/Staff.ts b/src/models/Staff.ts index 0384193..c4b2a03 100644 --- a/src/models/Staff.ts +++ b/src/models/Staff.ts @@ -123,4 +123,19 @@ export class InvoiceCommit { this.invoiceSellerTaxCode = props.get("invoiceSellerTaxCode")!.toString() //this.invoiceExtraInfo = props.get("invoiceExtraInfo")!. } +} +export interface Reimbursement { + reimbursementActualAmount: number; + reimbursementBillingTime: string; + reimbursementId: number; + reimbursementKindId: string; + reimbursementNote: string; + reimbursementSubmitDepartmentId: number; + reimbursementSubmitStaffId: string; + reimbursementSubmitTime: string; + approvalOpinion: string; + approvalResult: number; + approvalStaffId: string; + approvalStaffName: string; + processOrder: number; } \ No newline at end of file diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index cb67d1c..1277c75 100644 --- a/src/pages/reimbursement/mine/MyReimbursement.tsx +++ b/src/pages/reimbursement/mine/MyReimbursement.tsx @@ -1,9 +1,12 @@ -import { DownOutlined } from '@ant-design/icons'; -import type { ProColumns } from '@ant-design/pro-components'; -import { ProTable } from '@ant-design/pro-components'; +import {DownOutlined} 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 React from "react"; +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"; const valueEnum = { 0: 'success', @@ -15,7 +18,7 @@ const valueEnum = { }; export type TableListItem = { - id:string; + id: string; kind: string; amount: number; @@ -24,203 +27,293 @@ export type TableListItem = { submitDateTime: number; detail: string; }; -const tableListDataSource: TableListItem[] = [ +let fakeData: TableListItem[] = [ { - id:"123", + id: "123", kind: "string", - amount: 1200.0, + amount: 5.0, status: valueEnum[5], department: "string", - submitDateTime: Date.now()-100000000, + submitDateTime: Date.now() - 100000000, detail: "查看详情", }, { - id:"123", + id: "123", kind: "string", detail: "查看详情", - amount: 1200.0, + amount: 4.0, status: valueEnum[4], department: "string", - submitDateTime: Date.now()-100000000, + submitDateTime: Date.now() - 100000000, }, { - id:"123", + id: "123", kind: "string", detail: "查看详情", - amount: 1200.0, + amount: 3.0, status: valueEnum[3], department: "string", - submitDateTime: Date.now()-100000000, + submitDateTime: Date.now() - 100000000, }, { - id:"123", + id: "123", kind: "string", detail: "查看详情", - amount: 500, + amount: 2, status: valueEnum[2], department: "string", submitDateTime: Date.now(), }, { - id:"123", + id: "123", kind: "string", detail: "查看详情", - amount: 1200.0, + amount: 1, status: valueEnum[1], department: "string", - submitDateTime: Date.now()-100000000, + submitDateTime: Date.now() - 100000000, }, { - id:"123", + id: "123", kind: "string", detail: "查看详情", - amount: 1200.0, + amount: 0.0, status: valueEnum[0], department: "string", - submitDateTime: Date.now()-100000000, + submitDateTime: Date.now() - 100000000, }, ]; +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 -const columns: ProColumns[] = [ - { - title: '报销单号', - width: 80, - dataIndex: 'id', - search:false, - //render: (_) => {_}, - }, - { - title: '报销类型', - width: 80, - dataIndex: 'kind', - search:false, - //render: (_) => {_}, - }, - { - title: '金额', - width: 80, - dataIndex: 'amount', - search:false, - //render: (_) => {_}, - sorter:(a,b)=> a.amount - b.amount - }, - { - title: '状态', - width: 80, - dataIndex: 'status', - filters: true, - 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' }, + + +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:"" + } + } + columns: ProColumns[] = [ + { + title: '报销单号', + width: 80, + dataIndex: 'id', + search: false, + //render: (_) => {_}, + }, + { + title: '报销类型', + width: 80, + dataIndex: 'kind', + search: false, + //render: (_) => {_}, + }, + { + title: '金额', + width: 80, + dataIndex: 'amount', + search: false, + //render: (_) => {_}, + sorter: (a, b) => a.amount - b.amount + }, + { + title: '状态', + width: 80, + dataIndex: 'status', + filters: true, + 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'}, + }, + + //render: (_) => {_}, + }, + { + title: '申请部门', + width: 80, + search: false, + dataIndex: 'department', + //render: (_) => {_}, + }, + { + title: '申请时间', + width: 80, + dataIndex: 'submitDateTime', + valueType: 'dateTime', + search: false, + sorter: (a, b) => a.submitDateTime - b.submitDateTime + //render: (_) => {_}, }, - //render: (_) => {_}, - }, - { - title: '申请部门', - width: 80, - search:false, - dataIndex: 'department', - //render: (_) => {_}, - }, - { - title: '申请时间', - width: 80, - dataIndex: 'submitDateTime', - valueType: 'dateTime', - search:false, - sorter:(a,b)=> a.submitDateTime-b.submitDateTime - //render: (_) => {_}, - }, + { + title: '申请详情', + width: 80, + dataIndex: 'detail', + search: false, + render: (_, row, index, action) => [ + { + this.showDetail(row) + }} + > + 查看详情 + , + ], + }, + ]; + search(value: string, form: FormProps['form'], dom: ReactNode[]) { + this.setState({searchWord:value}); + if(value===""){ + // @ts-ignore + this.tableAction.current.reloadAndRest() + } + this.tableAction.current?.reload() + } - { - title: '申请详情', - width: 80, - dataIndex: 'detail', - search:false, - render: (_) => {_}, - }, -]; + create() { + alert("123") + } -function makeTable() { - return ( - - columns={columns} - request={(params, sorter, filter) => { - // 表单搜索项会从 params 传入，传递给后端接口。 - console.log(params, sorter, filter); - return Promise.resolve({ - data: tableListDataSource, - success: true, - }); - }} - rowKey="key" - pagination={{ - pageSize:5, - showQuickJumper: true, - }} - // toolbar={{ - // title: '这里是标题', - // subTitle: '这里是子标题', - // tooltip: '这是一个段描述', - // search: { - // onSearch: (value: string) => { - // alert(value); - // }, - // }, - // }} - search={{ - defaultCollapsed: false, - labelWidth: 'auto', - resetText:" ", - optionRender: ({ searchText }, { form }) => { - // console.log(searchConfig, formProps, dom) - return [ - { + showDetail(row: TableListItem) { + alert((new Date(row.submitDateTime))) + } - }} - style={{width: 304,marginLeft:-30}} - enterButton - />, - - ] - } - }} - dateFormatter="string" - // toolBarRender={() => [ - // , - // , - // , - // ]} - /> - ); -}; + + 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, + }); + } + + } + render() { + return ( + + actionRef={this.tableAction} + columns={this.columns} + request={async (params, sorter, filter) => { + // 表单搜索项会从 params 传入，传递给后端接口。 + console.log(params, sorter, filter); + return this.updateRequest(params.current, params.pageSize) + + }} + rowKey="key" + pagination={{ + defaultPageSize: 5, + pageSizeOptions: [5, 10, 20, 50, 100], + showQuickJumper: true, + }} + // toolbar={{ + // title: '这里是标题', + // subTitle: '这里是子标题', + // tooltip: '这是一个段描述', + // search: { + // onSearch: (value: string) => { + // alert(value); + // }, + // }, + // }} + search={{ + defaultCollapsed: false, + labelWidth: 'auto', + optionRender: ({searchText}, {form}, dom) => { + // console.log(searchConfig, formProps, dom) + return [ +
+ { + this.search(value, form, dom) + }} + enterButton + + /> + +
+ ] + } + }} + + dateFormatter="string" + // toolBarRender={() => [ + // , + // , + // , + // ]} + /> + ); + } +} + function MyReimbursement() { - return( + return ( <> - {makeTable()} + ) } + export default MyReimbursement \ No newline at end of file