Commit cb601a4d authored by Bill's avatar Bill

修改首页,加工、结算、消息

parent 9079fcbd
......@@ -153,6 +153,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
return (
<ProLayout
pageTitleRender={() => currentRouter ? currentRouter.name : window.location.href}
// contentStyle={{minWidth: '1280px'}}
style={prolayoutStyle}
logo={logo}
formatMessage={formatMessage}
......
......@@ -5,8 +5,9 @@ import { history, Link } from 'umi';
import PersonDropdown from './PersonDropdown'
import styles from '../styles/RightContent.less';
import { removeAuth, removeRouters, getAuth } from '@/utils/auth';
import { inject, observer } from 'mobx-react'
const AvatarDropdown = () => {
const AvatarDropdown = (props) => {
const logout = () => {
removeAuth()
......@@ -16,7 +17,7 @@ const AvatarDropdown = () => {
const currentUser = {
name: getAuth()?.name || '未知用户',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
avatar: props.UserStore.avatar || '',
}
const menuHeaderDropdown = (
......@@ -50,4 +51,5 @@ const AvatarDropdown = () => {
)
}
export default AvatarDropdown
export default inject('UserStore')(observer(AvatarDropdown))
......@@ -72,7 +72,7 @@ const GlobalHeaderRight: React.FC<{}> = (props) => {
</Badge>
</a>
</Tooltip>
<Tooltip title="服务">
{/* <Tooltip title="服务">
<a
target="_blank"
href=""
......@@ -81,7 +81,7 @@ const GlobalHeaderRight: React.FC<{}> = (props) => {
>
<CustomerServiceOutlined />
</a>
</Tooltip>
</Tooltip> */}
<Avatar />
</div>
);
......
......@@ -72,7 +72,7 @@ const SettlementList = () => {
{title: '结算日期', dataIndex: 'settlementDate'},
{title: '结算方式', dataIndex: 'settlementWayName'},
{title: '结算方', dataIndex: 'settlementName'},
{title: '结算单据', dataIndex: 'orderTypeName'},
{title: '结算单据类型', dataIndex: 'orderTypeName'},
{title: '总单数', dataIndex: 'totalCount'},
{title: '结算金额', dataIndex: 'amount'},
{title: '结算时间', dataIndex: 'settlementTime'},
......
......@@ -31,7 +31,7 @@ const columns = [
{title: '单据总额', dataIndex: 'orderAmount'},
{title: '收货批次', dataIndex: 'batch'},
{title: '收货时间', dataIndex: 'receiveTime'},
{title: '收货数量', dataIndex: 'receiveTime'},
{title: '收货数量', dataIndex: 'receiveCount'},
// {title: '加工单价', dataIndex: 'processPrice'},
{title: '结算金额', dataIndex: 'settlementAmount'},
]
......@@ -45,7 +45,7 @@ interface infoType {
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
amount: number, // 结算金额
statusName: string // 结算状态名称
}
......@@ -84,9 +84,9 @@ const ProductNoticeSettlementDetail: React.FC = () => {
const endTime = values.endTime?.format(format);
const receiveStartTime = values.receiveStartTime?.format(format);
const receiveEndTime = values.receiveEndTime?.format(format);
ref.current.reload({...values, startTime, endTime, receiveStartTime, receiveEndTime});
}
}
return (
<PageHeaderWrapper
......@@ -96,21 +96,21 @@ const ProductNoticeSettlementDetail: React.FC = () => {
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
<AvatarWrap
info={{
aloneTxt: '单',
name: "结算单号:"
}}
}}
extra={(
<span style={{ fontSize: 12, fontWeight: 'normal' }}>{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
......@@ -133,7 +133,7 @@ const ProductNoticeSettlementDetail: React.FC = () => {
currentRef={ref}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
<NiceForm
actions={formActions}
components={{RangePicker}}
expressionScope={{
......@@ -161,4 +161,4 @@ const ProductNoticeSettlementDetail: React.FC = () => {
)
}
export default ProductNoticeSettlementDetail
\ No newline at end of file
export default ProductNoticeSettlementDetail
......@@ -144,8 +144,16 @@ const SettlementList = () => {
return data
}
const reload = (values) => {
ref.current.reload(values);
/**
* 搜索
*/
const handleSearch = (values) => {
const format = 'YYYY-MM-DD'
const payStartTime = values.payStartTime?.format(format);
const payEndTime = values.payEndTime?.format(format);
const orderStartTime = values.orderStartTime?.format(format);
const orderEndTime = values.orderEndTime?.format(format);
ref.current.reload({...values, payStartTime, payEndTime, orderStartTime, orderEndTime});
}
return (
......@@ -182,8 +190,13 @@ const SettlementList = () => {
);
}}
schema={schema}
onSubmit={reload}
onSubmit={handleSearch}
onReset={() => {
formActions.setFieldValue('payStartTime', null);
formActions.setFieldValue('payEndTime', null);
formActions.setFieldValue('orderStartTime', null);
formActions.setFieldValue('orderEndTime', null);
}}
/>
}
/>
......
......@@ -29,7 +29,7 @@ export const schema: ISchema = {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
placeholder: '搜索订单号',
},
},
},
......@@ -43,28 +43,28 @@ export const schema: ISchema = {
},
},
properties: {
desc: {
orderAbstract: {
type: 'string',
default: undefined,
'x-component-props': {
placeholder: '单据摘要',
allowClear: true,
placeholder: '单据摘要',
allowClear: true,
},
},
"[orderStartTime, orderEndTime]": {
type: 'object',
'x-component': 'RangePicker',
'x-component-props': {
placeholder: ["下单时间(开始时间)", "下单时间(结束时间)"],
allowClear: true,
placeholder: ["下单时间(开始时间)", "下单时间(结束时间)"],
allowClear: true,
},
},
"[payStartTime, payEndTime]": {
type: 'object',
'x-component': 'RangePicker',
'x-component-props': {
placeholder: ["支付时间(开始时间)", "支付时间(结束时间)"],
allowClear: true,
placeholder: ["支付时间(开始时间)", "支付时间(结束时间)"],
allowClear: true,
},
},
invoiceStatus: {
......@@ -76,8 +76,8 @@ export const schema: ISchema = {
{label: '已开票', value: 1}
],
'x-component-props': {
placeholder: '开票状态(全部)',
allowClear: true,
placeholder: '开票状态(全部)',
allowClear: true,
},
},
payStatus: {
......@@ -89,8 +89,8 @@ export const schema: ISchema = {
{label: '已支付', value: 1}
],
'x-component-props': {
placeholder: '支付状态(全部)',
allowClear: true,
placeholder: '支付状态(全部)',
allowClear: true,
},
},
submit: {
......@@ -107,4 +107,4 @@ export const schema: ISchema = {
},
},
},
};
\ No newline at end of file
};
......@@ -159,7 +159,7 @@ const AccountReceivable = () => {
expressionScope={{}}
components={{DatePicker}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.settlementName', FORM_FILTER_PATH);
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.settlementNo', FORM_FILTER_PATH);
useAsyncSelect(
['status'],
fetchOptions(PublicApi.getSettleAccountsCommonGetSettlementStatus),
......
......@@ -13,7 +13,7 @@ export const schema: ISchema = {
type: 'object',
'x-component': 'mega-layout',
properties: {
settlementName: {
settlementNo: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
......
......@@ -55,7 +55,7 @@ const Integral: React.FC = () => {
title: '兑换比率',
dataIndex: 'ratio',
render: (text, record) => {
return (record.ratio * 100 + "%");
return (record.ratio + "%");
}
},
{title: '结算金额', dataIndex: 'amount'},
......@@ -160,7 +160,7 @@ const Integral: React.FC = () => {
components={{DatePicker}}
expressionScope={{}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.name', FORM_FILTER_PATH);
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.settlementNo', FORM_FILTER_PATH);
useAsyncSelect(
['status'],
fetchOptions(PublicApi.getSettleAccountsCommonGetSettlementStatus),
......
......@@ -33,7 +33,7 @@ const columns = [
{title: '支付积分', dataIndex: 'payScore'},
{title: '支付时间', dataIndex: 'payTime'},
{
title: '兑换比率',
title: '兑换比率',
dataIndex: 'ratio',
render: (text, record) => {
return record.ratio * 100 + "%"
......@@ -72,7 +72,6 @@ const Info: React.FC = () => {
* 搜索
*/
const handleSearch = (values) => {
console.log(values);
const format = 'YYYY-MM-DD'
const { payTime, orderTime, ...rest } = values;
// 支付时间
......@@ -83,9 +82,9 @@ const Info: React.FC = () => {
const orderTimeRange = orderTime ? timeRange(values.orderTime) : null;
const orderStartTime = orderTimeRange ? moment(orderTimeRange.st).format(format) : null;
const orderEndTime = orderTimeRange ? moment(orderTimeRange.et).format(format) : null;
ref.current.reload({...rest, payStartTime, payEndTime, orderStartTime, orderEndTime});
}
}
return (
......@@ -96,21 +95,21 @@ const Info: React.FC = () => {
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
<AvatarWrap
info={{
aloneTxt: '单',
name: "结算单号:"
}}
}}
extra={(
<span style={{ fontSize: 12, fontWeight: 'normal' }}>{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期:">{infoDetail?.settlementDate}</Descriptions.Item>
......@@ -134,7 +133,7 @@ const Info: React.FC = () => {
currentRef={ref}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
<NiceForm
actions={formActions}
expressionScope={{
exportBtn: (
......@@ -157,4 +156,4 @@ const Info: React.FC = () => {
)
}
export default Info
\ No newline at end of file
export default Info
......@@ -18,11 +18,11 @@ export const schema: ISchema = {
type: 'object',
'x-component': 'mega-layout',
properties: {
name: {
settlementNo: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
placeholder: '搜索结算单号',
align: 'flex-left',
// tip: '输入通知单号、通知单摘要进行搜索',
},
......
......@@ -33,7 +33,7 @@ export const indexSchema = {
"span": 2
},
'x-component-props': {
placeholder: '搜索',
placeholder: '搜索策略名称',
advanced: false,
},
},
......
......@@ -122,7 +122,7 @@ const Receipt: React.FC<iProps> = () => {
</Col>
)
})
}
}
<Col span={8} className={styles.margin}>
<div className={styles.add} onClick={handleRouterAdd}>
......@@ -137,4 +137,4 @@ const Receipt: React.FC<iProps> = () => {
)
}
export default Receipt
\ No newline at end of file
export default Receipt
......@@ -56,7 +56,7 @@ const schema = {
{label: '增值税专用发票', value: 2}
],
},
'x-rules': [
{required: true, message: '请选择发票种类'}
]
......@@ -68,7 +68,7 @@ const schema = {
{required: true, message: '请填写发票抬头'},
{limitByte: true, maxByte: 40 }
],
},
taxNo: {
type: 'string',
......@@ -113,7 +113,7 @@ const schema = {
title: '是否默认',
'x-component': 'SchemaSwitch'
},
}
}
}
......@@ -131,7 +131,7 @@ const Info: React.FC = () => {
const serviceActions = isAdd
? PublicApi.postSettleAccountsInvoiceMessageAdd
: PublicApi.postSettleAccountsInvoiceMessageUpdate
let tempData = {...value, isDefault: value.isDefault ? 1 : 0};
const postData = isAdd ? tempData : {...tempData, id};
setSubmitLoading(true);
......@@ -160,7 +160,9 @@ const Info: React.FC = () => {
}
return (
<PageHeaderWrapper>
<PageHeaderWrapper
onBack={() => history.goBack()}
>
<Card>
<NiceForm
components={{SchemaSwitch, SchemaRadio}}
......@@ -173,12 +175,12 @@ const Info: React.FC = () => {
<FormButtonGroup offset={4}>
<Submit loading={submitLoading}>提交</Submit>
<Button onClick={handleCancel}>取消</Button>
</FormButtonGroup>
</FormButtonGroup>
</NiceForm>
</Card>
<Prompt when={unsaved} message={"内容未保存,确定要离开?"} />
</PageHeaderWrapper>
)
}
......
......@@ -356,9 +356,9 @@ const Add: React.FC<{}> = () => {
category: item.customerCategoryName,
brand: item.brandName,
unit: item.unitName,
processNum: item.processNum || 0,
processPrice: item.processUnitPrice || 0,
processTotalPrice: item.processTotalPrice,
processNum: item.processNum * 1 || 0,
processPrice: item.processUnitPrice * 1 || 0,
processTotalPrice: item.processTotalPrice * 1,
deliveryDate: deliveryDateFormat,
property:{
specs: item.productProps || [],
......
......@@ -244,7 +244,7 @@ const Detail: React.FC<{}> = () => {
const AllReceiptReceive = (
<Space direction={"vertical"}>
{
hasProductNoReply
!hasProductNoReply
? <Popconfirm
title={'确认本单全部发货单是否已全部收到回单'}
onConfirm={() => handleAllReceiptReceive(true)}
......
......@@ -180,7 +180,9 @@ export const SUPPLIER_INNER_STATUS_COLOR = {
"3": "processing",
'4': 'processing',
"5": "success",
"7": "processing",
"6": "processing",
"7": "warning",
"8": "processing",
"9": "error",
"10": "success",
}
......
......@@ -29,8 +29,8 @@ const schema = {
message: '请填写加工数量'
},
{
pattern: /^[1-9][0-9]*(\.[0-9]{1,2})?$/,
message: '请填写整数或保留位小数'
pattern: /^[1-9][0-9]*(\.[0-9]{1,3})?$/,
message: '请填写整数或保留位小数'
}
]
},
......@@ -43,8 +43,8 @@ const schema = {
message: '请填写加工单价'
},
{
pattern: /^[1-9][0-9]*(\.[0-9]{1,2})?$/,
message: '请填写整数或保留位小数'
pattern: /^[1-9][0-9]*(\.[0-9]{1,3})?$/,
message: '请填写整数或保留位小数'
}
]
}
......
......@@ -6,6 +6,7 @@ import { BasicForm, TablePagination, SearchForm } from '../ModalForTable'
import { createAsyncFormActions, FormEffectHooks } from '@formily/antd';
import { schema } from './schema';
import { getAuth } from '@/utils/auth';
import { useDebounceFn } from '@umijs/hooks';
const { onFieldInit$ } = FormEffectHooks
......@@ -55,29 +56,51 @@ const ProcessProducts = ({visible, cancel, rowSelection, loading, ...restProps})
const effects = () => {
onFieldInit$('branchId').subscribe((fieldState) => {
PublicApi.getProductSelectGetSelectBrand({name: ''}).then(res => {
let options = []
if(res.code === 1000) {
options = res.data.map((item) => {return { label: item.name, value: item.id }})
}
actions.setFieldState("branchId", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
changeBrand({name: ''})
});
onFieldInit$('categoryId').subscribe((fieldState) => {
PublicApi.getProductSelectGetSelectCategory({name: ''}).then(res => {
let options = []
if(res.code === 1000) {
options = res.data.map((item) => {return { label: item.name, value: item.id }})
}
actions.setFieldState("categoryId", (state) => {
state.props["x-component-props"]["options"] = options;
})
changeCategory({name: ''});
})
}
const changeBrand = (params) => {
PublicApi.getProductSelectGetSelectBrand(params).then(res => {
let options = []
if(res.code === 1000) {
options = res.data.map((item) => {return { label: item.name, value: item.id }})
}
actions.setFieldState("branchId", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
}
const changeCategory = (params) => {
PublicApi.getProductSelectGetSelectCustomerCategory(params).then(res => {
let options = []
if(res.code === 1000) {
options = res.data.map((item) => {return { label: item.name, value: item.id }})
}
actions.setFieldState("categoryId", (state) => {
state.props["x-component-props"]["options"] = options;
})
})
}
const filterCategroyOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
const onCategory = useDebounceFn((value) => {
changeCategory({name: value});
}, 500)
const filterBrandOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
const onBrandSearch = useDebounceFn((value) => {
changeBrand({name: value});
}, 500);
return (
<Modal
......@@ -96,7 +119,14 @@ const ProcessProducts = ({visible, cancel, rowSelection, loading, ...restProps})
schema={schema}
actions={actions}
effects={effects}
expressionScope={{rowSelection: rowSelection, columns: columns}}
expressionScope={{
rowSelection: rowSelection,
columns: columns,
filterCategroyOption : filterCategroyOption,
onCategory: onCategory.run,
filterBrandOption: filterBrandOption,
onBrandSearch: onBrandSearch.run
}}
/>
</Spin>
: null
......
......@@ -69,7 +69,14 @@ export const schema = {
style: {
width: '200px',
margin: '0 20px 0 0'
}
},
showSearch: true,
optionFilterProp: "children",
filterOption: "{{filterCategroyOption}}",
onSearch: "{{onCategory}}"
// filterOption: {(input, option) =>
// option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
// }
}
},
branchId: {
......@@ -81,7 +88,11 @@ export const schema = {
style: {
width: '200px',
margin: '0 20px 0 0'
}
},
showSearch: true,
optionFilterProp: "children",
filterOption: "{{filterBrandOption}}",
onSearch: "{{onBrandSearch}}"
}
},
queryBtn: {
......@@ -91,7 +102,7 @@ export const schema = {
"children": "查询",
}
}
}
}
}
}
},
......@@ -123,4 +134,4 @@ export const schema = {
}
},
}
}
\ No newline at end of file
}
......@@ -65,6 +65,12 @@
color: #fff;
position: relative;
overflow: hidden;
&:hover {
.upload {
display: block;
}
}
.text {
position: absolute;
top: 50%;
......@@ -73,6 +79,7 @@
margin-left: -4px;
}
.upload {
display: none;
position: absolute;
bottom: 0;
left: 0;
......
......@@ -37,8 +37,8 @@ const UserCenter: React.FC<Iprops> = (props) => {
const userAuth = getAuth();
// const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
// const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
const currentRole = userAuth.roles.filter((item) => item.memberRoleId === userAuth.memberRoleId)
const [state, dispatch] = useReducer(reducer, { loading: false, logo: userAuth.logo})
const currentRole = userAuth?.roles?.filter((item) => item.memberRoleId === userAuth.memberRoleId)
const [state, dispatch] = useReducer(reducer, { loading: false, logo: userAuth?.logo})
if(!userAuth) {
return null
}
......@@ -60,7 +60,6 @@ const UserCenter: React.FC<Iprops> = (props) => {
if (info.file.status === 'done') {
const { code, data } = info.file.response
if(code === 1000) {
console.log('upload success')
PublicApi.postMemberBusinessLogoAdd({logo: data})
.then((res) => {
if(res.code === 1000) {
......@@ -99,12 +98,12 @@ const UserCenter: React.FC<Iprops> = (props) => {
<Spin spinning={state.loading}>
<div className={styles.userLogo}>
<div className={styles.randomLogo}>
{
state.logo
? <img src={state.logo || ''} className={styles.logo}/>
: <span className={styles.text}>H</span>
}
<Upload {...uploadProps}>
{
state.logo
? <img src={state.logo || ''} className={styles.logo}/>
: <span className={styles.text}>H</span>
}
<span className={styles.upload}>修改</span>
</Upload>
</div>
......
.container {
display: flex;
flex-direction: row;
min-width: 1366px;
min-width: 1179px;
.left {
flex: 1;
......@@ -56,3 +56,7 @@
margin-left: 8px;
}
}
@media (max-width: '1280px') {
}
......@@ -53,63 +53,58 @@ const Home: React.FC<{}> = () => {
return (
<PageHeaderWrapper>
<div >
<div className={styles.userGuaid} style={{display: visible ? 'none': 'none'}}>
<UseGuaid/>
<div className={styles.userGuaid} style={{display: visible ? 'none': 'none'}}>
<UseGuaid/>
</div>
<div className={styles.container}>
<div className={styles.left}>
<UserCenter />
<div className={styles.otherCenters}>
{
layout.map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{
RenderComponent &&
<RenderComponent />
}
</div>
)
})
}
</div>
</div>
<div className={styles.container}>
<div className={styles.left}>
<div className={styles.userCenter}>
<UserCenter />
<div className={styles.right}>
<div className={styles.actions}>
<div className={styles.workBench}>
<CustomWorkBench
handleChangeOrder={handleChangeOrder}
layouts={layout}
/>
</div>
<div className={styles.otherCenters}>
{
layout.map((item) => {
const RenderComponent = ComponentSelect[item.name]
return (
<div
className={styles.ability}
style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
key={item.code}
>
{
RenderComponent &&
<RenderComponent />
}
</div>
)
})
}
<div className={styles.controller} onClick={() => setVisible((state) => !state)}>
<CompassFilled className={styles.icon} />
<span className={styles.text}>使用向导</span>
</div>
</div>
<div className={styles.right}>
<div className={styles.actions}>
<div className={styles.workBench}>
<CustomWorkBench
handleChangeOrder={handleChangeOrder}
layouts={layout}
/>
</div>
<div className={styles.controller} onClick={() => setVisible((state) => !state)}>
<CompassFilled className={styles.icon} />
<span className={styles.text}>使用向导</span>
</div>
</div>
<div className={styles.commonMargin}>
<LatestAnnounce />
</div>
<div className={styles.commonMargin}>
<RecentVisit />
</div>
<div className={styles.commonMargin}>
<AnyQuestion />
</div>
<div className={styles.commonMargin}>
<AdvertisementContainer />
</div>
<div className={styles.commonMargin}>
<LatestAnnounce />
</div>
<div className={styles.commonMargin}>
<RecentVisit />
</div>
<div className={styles.commonMargin}>
<AnyQuestion />
</div>
<div className={styles.commonMargin}>
<AdvertisementContainer />
</div>
</div>
</div>
</PageHeaderWrapper>
)
......
.customList{
:global{
.ant-list-item-meta{
align-items: center;
}
}
.messageText{
font-size: 14px;
font-weight: 400;
// color: #606266;
cursor: pointer;
}
.messageTitle{
margin: 0px 0px 0px 30px;
font-size: 14px;
font-weight: 500;
// color: #303133;
display: inline-block;
cursor: pointer;
}
}
.customList{
:global{
.ant-list-item-meta{
align-items: center;
}
}
.messageText{
font-size: 14px;
font-weight: 400;
// color: #606266;
cursor: pointer;
}
.messageTitle{
margin: 0px 0px 0px 30px;
font-size: 14px;
font-weight: 500;
// color: #303133;
display: inline-block;
cursor: pointer;
}
.time {
margin-left: 20px;
}
.section {
margin-left: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
}
import React, {useState, useEffect} from 'react';
import { history } from 'umi';
import { Card, List, Avatar } from 'antd';
import { Card, List, Avatar, Button } from 'antd';
import styles from './index.less'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StatusTag from '@/components/StatusTag';
......@@ -8,42 +8,33 @@ import { PublicApi } from '@/services/api';
import moment from 'moment';
import msg_system from '@/assets/imgs/msg_system.png'
import msg_platform from '@/assets/imgs/msg_platform.png';
import { BookOutlined, ReadOutlined } from '@ant-design/icons';
const Message: React.FC<{}> = () => {
const [dataSource, setDataSource] = useState<any>([])
const pagation = {
const [dataSource, setDataSource] = useState<any>({totalCount: 0, data: []})
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
}
})
useEffect(() => {
// @ts-ignore
async function init() {
const data = await getList(pagation);
setDataSource(data);
}
init()
getList(pagination)
}, [])
const getList = async (params) => {
///report/message/member/page
const res = await PublicApi.getReportMessageMemberPage(params);
if(res.code === 1000) {
return res.data
}
return {
totalCount: 0,
data: []
}
const getList = (params) => {
PublicApi.getReportMessageMemberPage(params).
then(({data, code}) => {
if(code === 1000) {
setDataSource(data)
}
})
}
const handlePaginationChange = (page, pageSize) => {
getList({page, pageSize})
.then((data) => {
console.log(data);
setDataSource(data);
})
setPagination({current: page, pageSize});
getList({current: page, pageSize})
}
const handleRead = (id, url: string) => {
......@@ -56,14 +47,17 @@ const Message: React.FC<{}> = () => {
} else {
history.push(url);
}
} else {
getList(pagination);
}
})
}
const renderMessage = (data) => {
const type = data.type
return (
<>
<StatusTag type={data.type == 1 ? 'primary' : 'success'} title={data.type == 1 ? '系统消息': '平台消息'} />
<StatusTag type={type == 1 ? 'primary' : 'success'} title={type == 1 ? '系统消息': '平台消息'} />
<span className={styles.messageTitle} style={{minWidth: '100px', fontWeight: 600, color: !data.status ? '#303133' : '#606266', marginRight: "15px"}}>{data.title}</span>
<span className={styles.messageText} style={{color: !data.status ? '#303133' : '#606266', marginRight: "15px"}} onClick={() => handleRead(data.id, data.url)}>{data.content}</span>
</>
......@@ -78,6 +72,9 @@ const Message: React.FC<{}> = () => {
<PageHeaderWrapper>
<Card
title="消息列表"
extra={(
<div><Button>全部已读</Button></div>
)}
>
<List
itemLayout="horizontal"
......@@ -89,7 +86,8 @@ const Message: React.FC<{}> = () => {
size: "small",
showQuickJumper: true,
total: dataSource.totalCount,
showTotal: showTotal
showTotal: showTotal,
current: pagination.current
}}
renderItem={(item: any) => (
<List.Item>
......@@ -97,7 +95,16 @@ const Message: React.FC<{}> = () => {
avatar={<Avatar src={item.type == 1 ? msg_system : msg_platform} />}
title={renderMessage(item)}
/>
<div style={{marginLeft: "25px"}}>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
<div className={styles.section}>
{
item.status === 0
? <BookOutlined style={{fontSize: '20px', color: '#909090'}} />
: <ReadOutlined style={{fontSize: '24px', color: '#909090'}}/>
}
<span className={styles.time}>
{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}
</span>
</div>
</List.Item>
)}
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment