初步完成消息列表布局
parent
6075f39949
commit
7c9c8c2a77
|
|
@ -0,0 +1,171 @@
|
|||
export interface NoticeResponse {
|
||||
/**
|
||||
* 本页记录
|
||||
*/
|
||||
records: Notice[];
|
||||
/**
|
||||
* 总条数
|
||||
*/
|
||||
total: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Notice
|
||||
*/
|
||||
export interface Notice {
|
||||
data: NoticeData;
|
||||
noticeId: string;
|
||||
noticeTargetId: string;
|
||||
noticeTime: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 报销单状态变化通知
|
||||
*
|
||||
* 发票被打回通知
|
||||
*
|
||||
* 审批通知，在列表查询的时候不存在
|
||||
*/
|
||||
export interface NoticeData {
|
||||
|
||||
approvalOpinion?: string;
|
||||
approvalResult?: number;
|
||||
approvalStaff?: Staff;
|
||||
/*
|
||||
const val SUCCESS = 0. toShort()
|
||||
const val WAITING_ FOR_ DEPARTMENT _MANAGER_ APPROVAL = 1. toShort()
|
||||
const val WAITING_ FOR_ FINANCIAL_ APPROVAL = 2. toShort()
|
||||
const val WAITING_ FOR_ FINANCIAL_ MANAGER_ APPROVAL = 3. toShort()
|
||||
const vaL WAITING_ FOR_ GENERAL_ MANAGER_ APPROVAL = 4. toShort( )
|
||||
const val REJECTED = 5. toShort()
|
||||
const val TERMINATED = 6. toShort()
|
||||
*/
|
||||
noticeType: number;
|
||||
reimbursement?: Reimbursement;
|
||||
invoice?: Invoice;
|
||||
rejectOpinion?: string;
|
||||
rejectStaff?: Staff;
|
||||
count?: number;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 主管部门
|
||||
*
|
||||
* Department
|
||||
*/
|
||||
export interface Department {
|
||||
deleted_at?: null | string;
|
||||
/**
|
||||
* 部门ID
|
||||
*/
|
||||
departmentId: number;
|
||||
/**
|
||||
* 部门主管
|
||||
*/
|
||||
departmentManager?: Staff;
|
||||
/**
|
||||
* 部门名
|
||||
*/
|
||||
departmentName?: string;
|
||||
/**
|
||||
* 部门员工
|
||||
*/
|
||||
staff?: Staff[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Staff
|
||||
*
|
||||
* 部门主管
|
||||
*/
|
||||
export interface Staff {
|
||||
banned?: boolean;
|
||||
/**
|
||||
* 主管部门
|
||||
*/
|
||||
managingDepartment?: null | Department;
|
||||
/**
|
||||
* 员工工作地点
|
||||
*/
|
||||
staffBase?: string;
|
||||
/**
|
||||
* 工作部门
|
||||
*/
|
||||
staffDepartments?: Department[];
|
||||
/**
|
||||
* 员工工号
|
||||
*/
|
||||
staffId: string;
|
||||
/**
|
||||
* 员工姓名
|
||||
*/
|
||||
staffName: string;
|
||||
/**
|
||||
* 密码
|
||||
*/
|
||||
staffPassword?: string;
|
||||
}
|
||||
|
||||
export interface Invoice {
|
||||
/**
|
||||
* 发票金额
|
||||
*/
|
||||
invoiceAmount: number;
|
||||
/**
|
||||
* 发票代码
|
||||
*/
|
||||
invoiceCode: string;
|
||||
/**
|
||||
* 开票日期
|
||||
*/
|
||||
invoiceDate: string;
|
||||
/**
|
||||
* 出发地名称
|
||||
*/
|
||||
invoiceDeparture: null | string;
|
||||
/**
|
||||
* 目的地名称
|
||||
*/
|
||||
invoiceDestination: null | string;
|
||||
/**
|
||||
* 发票原图Base64
|
||||
*/
|
||||
invoiceFileBase64: string;
|
||||
/**
|
||||
* 发票ID
|
||||
*/
|
||||
invoiceId: number;
|
||||
/**
|
||||
* 发票种类
|
||||
*/
|
||||
invoiceKind: number;
|
||||
/**
|
||||
* 发票名称
|
||||
*/
|
||||
invoiceName: null | string;
|
||||
/**
|
||||
* 发票编号
|
||||
*/
|
||||
invoiceNo: string;
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
invoiceNote: null | string;
|
||||
/**
|
||||
* 上传时间
|
||||
*/
|
||||
invoiceUploadTime: string;
|
||||
/**
|
||||
* 是否被修改
|
||||
*/
|
||||
modified: boolean;
|
||||
}
|
||||
|
||||
export interface Reimbursement {
|
||||
reimbursementDepartureName: string;
|
||||
reimbursementDestinationName: string;
|
||||
reimbursementId: number;
|
||||
roundTrip: boolean;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useState, useEffect} from 'react';
|
||||
import {UploadOutlined, UserOutlined, BellOutlined} from '@ant-design/icons';
|
||||
import {UploadOutlined, UserOutlined, BellOutlined, CloseOutlined} from '@ant-design/icons';
|
||||
import {Layout, Menu, theme, Typography, Button, Dropdown, MenuProps, Popover} from 'antd';
|
||||
import {useAppDispatch, useAppSelector} from "../models/hooks";
|
||||
import {getStaff, getToken, setStaff, setToken, store} from "../models/store";
|
||||
|
|
@ -10,7 +10,7 @@ import axiosInstance from "../utils/axiosInstance";
|
|||
import {Department, Staff, Token} from "../models/Staff";
|
||||
import MessageList from "./MessageList";
|
||||
|
||||
const {Title} = Typography;
|
||||
const {Title, Text, Paragraph} = Typography;
|
||||
const {Header, Content, Footer, Sider} = Layout;
|
||||
|
||||
|
||||
|
|
@ -30,6 +30,7 @@ function HeaderBar(props: any) {
|
|||
case 'password':
|
||||
break
|
||||
case 'logout':
|
||||
console.log('logout')
|
||||
axiosInstance({
|
||||
url: 'logout',
|
||||
method: 'post',
|
||||
|
|
@ -48,7 +49,6 @@ function HeaderBar(props: any) {
|
|||
clientSecret: ''
|
||||
}))
|
||||
navigate("/login")
|
||||
|
||||
break
|
||||
}
|
||||
};
|
||||
|
|
@ -89,14 +89,16 @@ function HeaderBar(props: any) {
|
|||
zIndex: 100,
|
||||
boxShadow: '0px 6px 16px 0px rgba(0, 0, 0, 0.08)'
|
||||
}}>
|
||||
<div></div>
|
||||
<div style={{marginLeft: 20}}>
|
||||
<MessageList/>
|
||||
</div>
|
||||
<div style={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<MessageList/>
|
||||
|
||||
<Dropdown overlayStyle={{minWidth: '150px'}} menu={{items, onClick}} placement="bottomRight" arrow>
|
||||
<Button type="text" style={{
|
||||
marginRight: '12px', height: '100%',
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ function InvoiceDetailModal(props: any) {
|
|||
|
||||
return (
|
||||
<Modal
|
||||
centered
|
||||
open={props.open}
|
||||
title={"发票详情"+(props.invoiceDetail?.modified ? '（发票信息经过手动修改）' : '')}
|
||||
onCancel={handleCancel}
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ function InvoiceSearch(props: { isManagement: boolean, handleSearchData: any })
|
|||
const getInvoiceKindsRadioButtons: any = () => {
|
||||
let options: any[] = []
|
||||
invoiceTypeNameMap.forEach(function (value, key, map) {
|
||||
options.push(<Radio.Button style={{marginBottom: 10}} value={key}>{value}</Radio.Button>)
|
||||
options.push(<Radio.Button style={{marginBottom: 10}} key={key} value={key}>{value}</Radio.Button>)
|
||||
})
|
||||
return options
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,167 @@
|
|||
import {Button, List, Popover} from "antd";
|
||||
import {BellOutlined} from "@ant-design/icons";
|
||||
import React, {useState} from "react";
|
||||
import {Button, Card, List, Popover, Space, Typography, Divider, Badge, Dropdown, MenuProps} from "antd";
|
||||
import {BellOutlined, CloseOutlined} from "@ant-design/icons";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Notice} from "../models/Notice";
|
||||
import dayjs from "dayjs";
|
||||
import 'dayjs/locale/zh-cn'
|
||||
import axiosInstance from "../utils/axiosInstance";
|
||||
import {setToken} from "../models/store";
|
||||
|
||||
const {Text, Title, Paragraph} = Typography
|
||||
const relativeTime = require('dayjs/plugin/relativeTime')
|
||||
dayjs.locale('zh-cn')
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
function MessageList() {
|
||||
const [list, setList] = useState<any[]>([]);
|
||||
const [list, setList] = useState<Notice[]>([])
|
||||
|
||||
const getTitle = (notice: Notice) => {
|
||||
switch (notice.data.noticeType) {
|
||||
case 0:
|
||||
if (notice.data.approvalResult === 5)
|
||||
return '报销单审批未通过'
|
||||
else if (notice.data.approvalResult === 0)
|
||||
return '报销单审批通过'
|
||||
else
|
||||
return '报销单状态更新'
|
||||
break
|
||||
case 1:
|
||||
return '发票被打回'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setList([
|
||||
{
|
||||
"noticeTargetId": "50",
|
||||
"noticeTime": "1981-10-04 06:37:59",
|
||||
"data": {
|
||||
"noticeType": 1,
|
||||
"count": 16
|
||||
},
|
||||
"noticeId": "48"
|
||||
},
|
||||
{
|
||||
"noticeTargetId": "45",
|
||||
"noticeTime": "1980-05-09 20:10:06",
|
||||
"data": {
|
||||
"invoice": {
|
||||
"invoiceId": 23,
|
||||
"invoiceNo": "deserunt enim anim ex voluptate",
|
||||
"invoiceCode": "6",
|
||||
"invoiceDate": "2016-05-11",
|
||||
"invoiceUploadTime": "2019-12-01 07:17:16",
|
||||
"invoiceNote": "consequat laborum",
|
||||
"invoiceKind": 82,
|
||||
"invoiceAmount": 51,
|
||||
"modified": false,
|
||||
"invoiceFileBase64": "nulla enim",
|
||||
"invoiceDeparture": "ea enim fugiat do",
|
||||
"invoiceDestination": null,
|
||||
"invoiceName": "号度前事她状报"
|
||||
},
|
||||
"rejectStaff": {
|
||||
"staffName": "飞百亲治头油手",
|
||||
"staffId": "49",
|
||||
"staffPassword": "velit in incididunt",
|
||||
"staffBase": "eiusmod voluptate Ut Lorem occaecat"
|
||||
},
|
||||
"rejectOpinion": "dolore exercitation irure do",
|
||||
"noticeType": 1
|
||||
},
|
||||
"noticeId": "93"
|
||||
},
|
||||
{
|
||||
"noticeTargetId": "32",
|
||||
"noticeTime": "2014-12-30 09:02:43",
|
||||
"data": {
|
||||
"noticeType": 0,
|
||||
"count": 6
|
||||
},
|
||||
"noticeId": "58"
|
||||
},
|
||||
{
|
||||
"noticeTargetId": "16",
|
||||
"noticeTime": "2014-01-18 21:30:34",
|
||||
"data": {
|
||||
"noticeType": 0,
|
||||
"count": 93
|
||||
},
|
||||
"noticeId": "42"
|
||||
},
|
||||
{
|
||||
"noticeTargetId": "9",
|
||||
"noticeTime": "1997-12-03 08:45:39",
|
||||
"data": {
|
||||
"noticeType": 1,
|
||||
"count": 2
|
||||
},
|
||||
"noticeId": "40"
|
||||
}
|
||||
])
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<Popover content={
|
||||
<Popover placement="bottomLeft" trigger="click" content={
|
||||
<List
|
||||
style={{width: 400}}
|
||||
itemLayout="horizontal"
|
||||
dataSource={list}
|
||||
renderItem={(item) => (
|
||||
<List.Item
|
||||
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
|
||||
>
|
||||
<List.Item.Meta
|
||||
title={<a href="https://ant.design">{item.name?.last}</a>}
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
/>
|
||||
<div>content</div>
|
||||
</List.Item>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}>
|
||||
<Button
|
||||
type='text'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: "unset",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
whiteSpace: "unset",
|
||||
textAlign: "unset"
|
||||
}}>
|
||||
<Dropdown menu={{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
label: (<span>标为已读</span>),
|
||||
}],
|
||||
onClick: ({key}) => {
|
||||
|
||||
}
|
||||
}} placement="top" arrow>
|
||||
<div>
|
||||
<Badge status="processing"/>
|
||||
<span style={{
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
marginLeft: 10
|
||||
}}>{getTitle(item)} </span>
|
||||
<Divider type="vertical"/>
|
||||
<Text>{
|
||||
// @ts-ignore
|
||||
dayjs().fromNow()
|
||||
}</Text>
|
||||
</div>
|
||||
</Dropdown>
|
||||
<Paragraph>{'Ant Design, a design language for background applications, is refined by Ant UED Team'}</Paragraph>
|
||||
|
||||
</Button>
|
||||
<Button style={{
|
||||
marginLeft: -30
|
||||
}} shape='circle'
|
||||
type='text'><CloseOutlined/></Button>
|
||||
</div>
|
||||
|
||||
)}
|
||||
/>
|
||||
} title="我的消息">
|
||||
} title="我的消息" arrowPointAtCenter>
|
||||
<Button type="text" shape="circle">
|
||||
<BellOutlined/>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ function UserConfig(props: any) {
|
|||
width: 230,
|
||||
render: (value, record) => (
|
||||
<Space size="middle">
|
||||
<Switch checkedChildren="启用" unCheckedChildren="禁用" checked={!value}/>
|
||||
<Switch style={{display: record.staffId==='manager'?'none':'unset'}} checkedChildren="启用" unCheckedChildren="禁用" checked={!value}/>
|
||||
<Button danger type="link">
|
||||
修改密码
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue