303 lines
13 KiB
TypeScript
303 lines
13 KiB
TypeScript
import './style.less'
|
||
import React from "react";
|
||
import numeral from 'numeral';
|
||
import ProCard from "@ant-design/pro-card";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
|
||
import { useRef, useState } from "react";
|
||
import { MenuFoldOutlined } from "@ant-design/icons";
|
||
import { PageContainer } from "@ant-design/pro-layout";
|
||
import { Descriptions, Drawer, Tree, Typography } from "antd";
|
||
|
||
import type { CommonTypeModel } from '@/services/options/typings';
|
||
import type { ActionType, ProColumns } from "@ant-design/pro-table";
|
||
import type { BusinessProjectModel } from "./data";
|
||
|
||
import { getFieldEnum, getServerpartTree } from "@/services/options";
|
||
import { getProjectList } from "./service";
|
||
import { contractType } from "../contract/emun";
|
||
import ProjectDetail from './detail'
|
||
import PageTitleBox from '@/components/PageTitleBox';
|
||
import { CurrentUser } from 'umi';
|
||
import LeftSelectTree from '../reports/settlementAccount/component/leftSelectTree';
|
||
|
||
const { Text } = Typography;
|
||
|
||
// 标题金额拆分小数点前后显示大小
|
||
const amountDom = (value: any) => {
|
||
const stringValue = `${value}`
|
||
const [intValue, floatValue] = stringValue.split(".")
|
||
return floatValue ?
|
||
<><Text type="warning" style={{
|
||
fontSize: 36, lineHeight: 1,
|
||
fontFamily: "Bahnschrift Regular"
|
||
}}>{numeral(intValue || 0).format("0,0")}</Text><Text type="warning" style={{
|
||
fontSize: 18,
|
||
fontFamily: "Bahnschrift Regular"
|
||
}}>.{floatValue}</Text>
|
||
<Text type="warning" style={{ fontSize: 14 }}></Text></>
|
||
:
|
||
<><Text type="warning" style={{
|
||
fontSize: 36, lineHeight: 1,
|
||
fontFamily: "Bahnschrift Regular"
|
||
}}>{intValue}</Text><Text type="warning" style={{ fontSize: 14 }}></Text></>
|
||
}
|
||
|
||
// 经营项目查询列表
|
||
/**
|
||
* @description: 生成服务区左侧菜单
|
||
* @param {ServerpartTree[]} data 菜单数据源
|
||
* @param {Function} callback 点击菜单回调函数
|
||
* @return {JSX.Element[]} 返回jsx数据节点集
|
||
*/
|
||
// 项目页面主体
|
||
// const ProjecetTable: React.FC = () => {
|
||
const ProjecetTable: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||
const { currentUser } = props
|
||
|
||
|
||
// props
|
||
// useState 为umi封装的hooks方法
|
||
const [currentRow, setCurrentRow] = useState<BusinessProjectModel | any>(undefined) // 选中的当前行
|
||
const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
|
||
const actionRef = useRef<ActionType>() // 项目列表对象
|
||
const [reqDetailList, setReqDetailList] = useState<CommonTypeModel[]>(); // 合计项数据源
|
||
|
||
// 请求服务区树列表
|
||
const { loading: treeLoading, data: treeView } = useRequest(async () => { return getServerpartTree() })
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 项目列表 列数据配置
|
||
const columns: ProColumns<BusinessProjectModel>[] = [
|
||
{
|
||
title: '查询项目',
|
||
dataIndex: 'searchKey',
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
fieldProps: {
|
||
placeholder: "请输入项目/商户名称/备注"
|
||
},
|
||
colSize: 2,
|
||
},
|
||
{
|
||
title: '项目名称',
|
||
dataIndex: 'BUSINESSPROJECT_NAME',
|
||
ellipsis: true,
|
||
hideInDescriptions: true,
|
||
width: '24%',
|
||
render: (_, record) => {
|
||
return <a onClick={() => { // 点击项目名称时 打开抽屉 展示项目详情
|
||
setCurrentRow(record)
|
||
setShowDetail(true)
|
||
}}>{record.BUSINESSPROJECT_NAME}</a>
|
||
|
||
},
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '经营模式',
|
||
dataIndex: 'BUSINESS_TYPE',
|
||
valueType: 'select',
|
||
valueEnum: contractType,
|
||
width: 110,
|
||
align: "center",
|
||
// hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'SETTLEMENT_MODES',
|
||
title: '结算模式',
|
||
valueType: 'select',
|
||
align: 'center',
|
||
width: 120,
|
||
request: async () => {
|
||
return await getFieldEnum({ FieldExplainField: 'SETTLEMENT_MODES' });
|
||
},
|
||
initialValue: 3000,
|
||
},
|
||
{
|
||
dataIndex: 'ROYALTY_PRICE',
|
||
title: '业主分润',
|
||
valueType: "money",
|
||
align: 'right',
|
||
width: 110,
|
||
hideInTable: true,
|
||
hideInSearch: true,
|
||
sorter: true,
|
||
},
|
||
{
|
||
dataIndex: 'EXPIREDAYS',
|
||
title: '预估到期',
|
||
align: 'center',
|
||
width: 110,
|
||
hideInTable: true,
|
||
hideInSearch: true,
|
||
sorter: true,
|
||
render: (_) => {
|
||
return _ === '0' ? '已达保底' : _
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'EXPIREDAYS',
|
||
title: '完成保底',
|
||
align: 'center',
|
||
valueType: 'select',
|
||
hideInSearch: true,
|
||
valueEnum: {
|
||
'-1': { text: '本月未完成' },
|
||
'0': { text: '本月完成' },
|
||
'1': { text: '已切换' }
|
||
},
|
||
hideInTable: true,
|
||
},
|
||
{
|
||
title: '项目金额(万元)',
|
||
dataIndex: 'GUARANTEE_PRICE',
|
||
align: 'right',
|
||
sorter: true,
|
||
valueType: "digit",
|
||
render: (_) => {
|
||
return <span style={{ paddingRight: 20 }}>{_}</span>
|
||
},
|
||
width: 130,
|
||
hideInSearch: true,
|
||
|
||
// hideInTable: true
|
||
},
|
||
{
|
||
title: '经营商户',
|
||
dataIndex: 'MERCHANTS_NAME',
|
||
ellipsis: true,
|
||
width: '22%',
|
||
hideInSearch: true,
|
||
},
|
||
|
||
{
|
||
title: '开始日期',
|
||
hideInSearch: true,
|
||
dataIndex: 'PROJECT_STARTDATE',
|
||
valueType: 'date',
|
||
sorter: true,
|
||
// defaultSortOrder: 'descend',
|
||
width: 120
|
||
},
|
||
{
|
||
title: '结束日期',
|
||
hideInSearch: true,
|
||
dataIndex: 'PROJECT_ENDDATE',
|
||
valueType: 'date',
|
||
sorter: true,
|
||
width: 120
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div >
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
|
||
|
||
<div style={{
|
||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
{/* 项目页面 表格主体 */}
|
||
<ProTable<BusinessProjectModel>
|
||
headerTitle={<PageTitleBox props={props} />}
|
||
rowKey="BUSINESSPROJECT_ID"
|
||
request={async (params, sorter) => { // 请求项目表格数据 params 查询对象键值对；sorter 排序对象键值对
|
||
// 排序对象键值对 有值 则调整成后台接口需要的数据格式
|
||
const sortstr = Object.keys(sorter).map(n => {
|
||
const value = sorter[n]
|
||
return value ? `${n} ${value.replace('end', '')}` : ''
|
||
})
|
||
// 发起请求，return 请求返回的数据
|
||
const list = await getProjectList({
|
||
...params, PROJECT_VALID: 1, SERVERPART_IDS: selectedId || '0', ShowShare: true,
|
||
sortstr: sortstr.length ? sortstr.toString() : params?.sortstr,
|
||
keyWord: params.searchKey ? { key: "BUSINESSPROJECT_NAME,BUSINESSPROJECT_DESC,MERCHANTS_NAME", value: params.searchKey } : null, // 关键词查询
|
||
pagesize: params.pageSize
|
||
})
|
||
if (params && (params.SETTLEMENT_MODES === 3000 || params.SETTLEMENT_MODES === 4000) && list && list?.otherData) {
|
||
setReqDetailList(list?.otherData)
|
||
}
|
||
else {
|
||
setReqDetailList(undefined)
|
||
}
|
||
|
||
return list
|
||
}}
|
||
actionRef={actionRef} // 表格操作对象
|
||
search={{ span: 4, labelWidth: 'auto' }} // 查询栏布局配置按照24/6=4份来分割
|
||
columns={columns} // 表格列数据配置
|
||
// tableExtraRender={() => {
|
||
// if (reqDetailList && reqDetailList.length > 0) {
|
||
// const reduceData = reqDetailList.reduce((p: {
|
||
// Data_1000: number, Data_2000: number, Data_3000: number, Data_4000: number
|
||
// }, currentValue: CommonTypeModel) => {
|
||
// const previousValue = { ...p }
|
||
// switch (currentValue.label) {
|
||
// case '1000':
|
||
// previousValue.Data_1000 = numeral(numeral(
|
||
// (currentValue?.value || 0)).format('0.00')).value();
|
||
// break;
|
||
// case '2000':
|
||
// previousValue.Data_2000 = numeral(numeral(
|
||
// (currentValue?.value || 0)).format('0.00')).value();
|
||
// break;
|
||
// case '3000':
|
||
// previousValue.Data_3000 = numeral(numeral(
|
||
// (currentValue?.value || 0)).format('0.00')).value();
|
||
// break;
|
||
// case '4000':
|
||
// previousValue.Data_4000 = numeral(numeral(
|
||
// (currentValue?.value || 0)).format('0.00')).value();
|
||
// break;
|
||
// default:
|
||
// break;
|
||
// }
|
||
// return previousValue
|
||
// }, {
|
||
// Data_1000: 0, Data_2000: 0, Data_3000: 0, Data_4000: 0
|
||
// });
|
||
// return <div style={{ paddingLeft: 24 }}>
|
||
// <Descriptions column={5} className="commity-sale-description"
|
||
// contentStyle={{ fontSize: 14, color: "#00000073" }} labelStyle={{ color: "#00000073" }}
|
||
// >
|
||
// <Descriptions.Item label="">分润项目：{amountDom(reduceData.Data_1000)}</Descriptions.Item>
|
||
// <Descriptions.Item label="">已切换：{amountDom(reduceData.Data_2000)}</Descriptions.Item>
|
||
// <Descriptions.Item label="">本月完成保底：{amountDom(reduceData.Data_3000)}</Descriptions.Item>
|
||
// <Descriptions.Item label="">业主分润：¥{amountDom(reduceData.Data_4000.toFixed(2))}</Descriptions.Item>
|
||
// </Descriptions>
|
||
// </div>
|
||
// }
|
||
// return <></>
|
||
// }}
|
||
pagination={{ defaultPageSize: 10 }} // 翻页默认10条分页
|
||
/>
|
||
</div>
|
||
|
||
{/* 查看项目详情 右侧弹出的抽屉 */}
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer"
|
||
visible={showDetail} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||
setCurrentRow(undefined);
|
||
setShowDetail(false);
|
||
}}
|
||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||
closable={false}
|
||
>
|
||
{/* 抽屉打开时 加载项目详情组件 */}
|
||
{showDetail && <ProjectDetail id={currentRow?.BUSINESSPROJECT_ID} editable={false} showType={'search'}
|
||
tabActive={currentRow?.SETTLEMENT_MODES === 3000 || currentRow?.SETTLEMENT_MODES === 4000 ? '7' : ''}></ProjectDetail>}
|
||
</Drawer>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ProjecetTable;
|