873 lines
31 KiB
TypeScript
873 lines
31 KiB
TypeScript
/*
|
|
* @Author: cclu
|
|
* @Date: 2021-12-13 11:01:23
|
|
* @LastEditTime: 2024-10-29 15:38:57
|
|
* @LastEditors: cclu 1106109051@qq.com
|
|
* @Description: 合同详情
|
|
* @FilePath: \cloud-platform\src\pages\contract\components\detail.tsx
|
|
*/
|
|
import useRequest from "@ahooksjs/use-request";
|
|
import type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
|
|
import ProDescriptions from "@ant-design/pro-descriptions";
|
|
import { PageContainer } from "@ant-design/pro-layout";
|
|
import { Card, Col, Descriptions, Row, Statistic, Tag, Typography, Upload, Drawer, Button, Modal } from "antd";
|
|
import moment from "moment";
|
|
import numeral from "numeral";
|
|
import React, { useRef, useState } from "react";
|
|
import type { ContractListModel, ContractSubModel } from "../data";
|
|
import { businessType, contractType, severpartType } from "../emun";
|
|
import { getDetail, getSubDetail, handleGetRelatedList } from "../service";
|
|
import { getProjectList } from "../../BussinessProject/service";
|
|
import { getPictureList } from '@/services/picture';
|
|
import type { PictureModel } from '@/services/options/typings';
|
|
import fileIcon from '@/assets/detail/fileIcon.svg'
|
|
import '../style.less';
|
|
import ProForm, { ProFormSelect } from "@ant-design/pro-form";
|
|
import { FileSearchOutlined } from "@ant-design/icons";
|
|
import ChildrenDetail from "@/pages/contract/components/childrenDetail";
|
|
import session from "@/utils/session";
|
|
|
|
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></>
|
|
}
|
|
const ContractDetail = ({ contractId, currentRow, clickedId }: { contractId: number, currentRow?: any, clickedId?: any }) => {
|
|
// clickedId已经点击过的合同id 防止循环跳转
|
|
const [shopName, setShopName] = useState<[]>()
|
|
// const [fileList, setFileList] = useState<UploadFile[]>([]) // 需要附件图片列表
|
|
// 获取合同主表信息
|
|
const { loading: detailLoading, data: contractDetail } = useRequest(async () => {
|
|
const data = await getDetail(contractId)
|
|
if (data && data.REGISTERCOMPACT_ID) {
|
|
if (data.COMPACT_DETAILS === 1000) {
|
|
handleGetRelatedContracts(data.COMPACT_DETAILS, data.REGISTERCOMPACT_ID)
|
|
} else {
|
|
handleGetRelatedContracts(data.COMPACT_DETAILS, data.REGISTERCOMPACT_HOSTID)
|
|
}
|
|
}
|
|
return data
|
|
})
|
|
// const { loading: serverpartLoading, data: serverpartDetail } = useRequest(() => { return getContractServerpartList(contractId) })
|
|
// 获取合同附属表信息
|
|
const { loading, data: subDetail } = useRequest(async () => {
|
|
const data = await getSubDetail(contractId)
|
|
return { ...data, SERVERPARTREGION: data?.SERVERPARTREGION ? data?.SERVERPARTREGION.split(',') : [] }
|
|
})
|
|
// 切换后的结算模式
|
|
const [afterChangeSwitch, setAfterChangeSwitch] = useState<any>()
|
|
// 获取合同经营项目
|
|
const { loading: projectLoading, data: projectData } = useRequest(async () => {
|
|
const data = await getProjectList({ REGISTERCOMPACT_ID: contractId, PROJECT_VALID: 1, pagesize: 20, pageindex: 1 })
|
|
console.log(1111111, data)
|
|
if (data.data && data.data.length > 0) {
|
|
setAfterChangeSwitch(data.data[0].SWITCH_MODES)
|
|
}
|
|
return data
|
|
})
|
|
// 获取合同附属类型
|
|
const compactType = session.get("COMPACT_CHILDTYPEList")
|
|
const [associationDrawer, setAssociationDrawer] = useState<boolean>(false)
|
|
const [associationRow, setAssociationRow] = useState<any>()
|
|
const [COMPACTLIST, setCOMPACTLIST] = useState<any>([])
|
|
// 显示关联合同的附件
|
|
const [showChildrenFile, setShowChildrenFile] = useState<boolean>(false)
|
|
// 关联合同的附件
|
|
const [childrenFile, setChildrenFile] = useState<any>()
|
|
// 关联合同列表
|
|
const [relatedContractsList, setRelatedContractsList] = useState<any>()
|
|
// 显示关联合同的抽屉
|
|
const [showChildDetailDrawer, setShowChildDetailDrawer] = useState<boolean>(false)
|
|
// 选中的关联合同
|
|
const [childrenRow, setChildrenRow] = useState<any>()
|
|
// 获取合同附件
|
|
const { loading: compactFileLoading, data: fileList } = useRequest(async () => {
|
|
const data = await getPictureList(contractId, '1115')
|
|
const files = data && data?.total > 0 ? data?.data.map((n: PictureModel) => {
|
|
return {
|
|
uid: n.ImageId,
|
|
name: n.ImageName,
|
|
status: 'done',
|
|
url: n.ImageUrl,
|
|
deletepath: n.ImagePath
|
|
}
|
|
}) : []
|
|
// setFileList(files)
|
|
return files
|
|
})
|
|
// 已经查看过的子合同
|
|
// const [historyList, setHistoryList] = useState<any>()
|
|
const historyList = useRef<any>()
|
|
// 获取合同类型子项
|
|
const { loading: COMPACTLoading, data: COMPACTLISTS } = useRequest(async () => {
|
|
const options = session.get("COMPACT_DETAILSList")
|
|
setCOMPACTLIST(options)
|
|
const obj: any = session.get("COMPACT_DETAILSObj")
|
|
return obj;
|
|
})
|
|
// 显示日志抽屉
|
|
const [showLogDrawer, setShowLogDrawer] = useState<boolean>(false)
|
|
|
|
if (!projectLoading && projectData?.data && !shopName) {
|
|
// const shopname = projectData.data.map((n: any) => n.SERVERPARTSHOP_NAME)
|
|
// if (shopname) {
|
|
// setShopName(shopname.toString().split(','))
|
|
// }
|
|
setShopName(projectData.data.map((n: any) => n.SERVERPARTSHOP_NAME))
|
|
}
|
|
// const colors = ['blue', 'geekblue', 'volcano', 'orange',]
|
|
|
|
// 拿到关联合同列表
|
|
const handleGetRelatedContracts = async (type: number, id: number) => {
|
|
let req = {}
|
|
if (type === 1000) {
|
|
req = {
|
|
SearchParameter: {
|
|
REGISTERCOMPACT_HOSTID: id,
|
|
COMPACT_STATE: 1000
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999
|
|
}
|
|
} else {
|
|
req = {
|
|
SearchParameter: {
|
|
REGISTERCOMPACT_ID: id,
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999
|
|
}
|
|
}
|
|
const data = await handleGetRelatedList(req)
|
|
if (data && data.data && data.data.length > 0) {
|
|
const list: any = []
|
|
data.data.forEach((item: any) => {
|
|
if (type !== 1000 || (type === 1000 && item.COMPACT_DETAILS !== 1000)) {
|
|
list.push(item)
|
|
}
|
|
})
|
|
setRelatedContractsList(list)
|
|
}
|
|
}
|
|
const settlementModeObj = session.get("SETTLEMENT_MODESObj")
|
|
const settlementCycleObj = session.get("SETTLEMENT_CYCLEObj")
|
|
|
|
const headerColumns: ProDescriptionsItemProps<ContractSubModel>[] = [
|
|
{
|
|
title: '经营模式',
|
|
key: 'BUSINESS_TYPE',
|
|
dataIndex: 'BUSINESS_TYPE',
|
|
valueType: 'select',
|
|
valueEnum: contractType,
|
|
},
|
|
{
|
|
title: '结算模式',
|
|
key: 'SETTLEMENT_MODES',
|
|
dataIndex: 'SETTLEMENT_MODES',
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const options = session.get("SETTLEMENT_MODESList");
|
|
return options;
|
|
}
|
|
},
|
|
{
|
|
title: '结算周期',
|
|
key: 'SETTLEMENT_CYCLE',
|
|
dataIndex: 'SETTLEMENT_CYCLE',
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const options = session.get("SETTLEMENT_CYCLEList");
|
|
return options
|
|
}
|
|
}
|
|
]
|
|
const descirption = (
|
|
<>
|
|
<Descriptions column={4}>
|
|
<Descriptions.Item label="开始日期">{moment(contractDetail?.COMPACT_STARTDATE).format('YYYY-MM-DD')}</Descriptions.Item>
|
|
<Descriptions.Item label="截止日期">{moment(contractDetail?.COMPACT_ENDDATE).format('YYYY-MM-DD')}</Descriptions.Item>
|
|
<Descriptions.Item label="合同编号">{contractDetail?.COMPACT_CODE}</Descriptions.Item>
|
|
{/* <Descriptions.Item label="操作人">{contractDetail?.STAFF_NAME}</Descriptions.Item>
|
|
<Descriptions.Item label="更新时间">{moment(contractDetail?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
|
|
<Descriptions.Item label="承办人">{contractDetail?.ORGANIZER_LINKMAN}</Descriptions.Item>
|
|
<Descriptions.Item label="承办部门">{contractDetail?.ORGANIZER}</Descriptions.Item> */}
|
|
</Descriptions>
|
|
<Descriptions column={4}>
|
|
<Descriptions.Item label="经营模式" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>{contractType[subDetail?.BUSINESS_TYPE]}</Descriptions.Item>
|
|
<Descriptions.Item label="结算模式" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>
|
|
{settlementModeObj[subDetail?.SETTLEMENT_MODES]}
|
|
{
|
|
afterChangeSwitch ? `->${settlementModeObj[afterChangeSwitch]}` : ''
|
|
}
|
|
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="结算周期" labelStyle={{ fontWeight: 'bold' }} contentStyle={{ color: '#ff4d4f' }}>{settlementCycleObj[subDetail?.SETTLEMENT_CYCLE]}</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
{/* <ProDescriptions */}
|
|
{/* dataSource={subDetail} */}
|
|
{/* columns={headerColumns} */}
|
|
{/* labelStyle={{ fontWeight: 'bold' }} */}
|
|
{/* contentStyle={{ color: '#ff4d4f' }} */}
|
|
{/* column={4} */}
|
|
{/* /> */}
|
|
<Descriptions column={1}>
|
|
<Descriptions.Item label="经营门店">
|
|
{/* {shopName && shopName.length > 0 ? shopName?.map((n, i) => (n ? <Tag color={colors[i]} key={i}>{n}</Tag> : '')) : '-'} */}
|
|
{shopName ? shopName.toString() : ''}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
{/* <Descriptions column={2}> */}
|
|
{/* <Descriptions.Item label="附件信息"> */}
|
|
{/* { */}
|
|
{/* fileList ? */}
|
|
{/* <Upload */}
|
|
{/* defaultFileList={fileList || []} */}
|
|
{/* showUploadList={{ */}
|
|
{/* showDownloadIcon: false, */}
|
|
{/* showRemoveIcon: false, */}
|
|
{/* }} */}
|
|
{/* /> : '-' */}
|
|
{/* } */}
|
|
{/* </Descriptions.Item> */}
|
|
{/* { */}
|
|
{/* relatedContractsList && relatedContractsList.length>0? */}
|
|
{/* <Descriptions.Item label="关联合同列表"> */}
|
|
{/* { */}
|
|
{/* relatedContractsList.map((item: any)=>{ */}
|
|
{/* return <span>{`${item.COMPACT_NAME}(${COMPACTLISTS[item.COMPACT_DETAILS]})`}</span> */}
|
|
{/* }) */}
|
|
{/* } */}
|
|
{/* </Descriptions.Item>:'' */}
|
|
{/* } */}
|
|
{/* </Descriptions> */}
|
|
</>
|
|
)
|
|
const columns: ProDescriptionsItemProps<ContractListModel>[] = [
|
|
{
|
|
title: '合同类型',
|
|
dataIndex: 'COMPACT_TYPE',
|
|
key: 'COMPACT_TYPE',
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const options = session.get("COMPACT_CHARACTERList")
|
|
return options;
|
|
}
|
|
},
|
|
{
|
|
title: '合同类型子项',
|
|
dataIndex: 'COMPACT_DETAILS',
|
|
key: 'COMPACT_DETAILS',
|
|
valueType: 'select',
|
|
valueEnum: COMPACTLISTS,
|
|
render: (_, record) => {
|
|
return <>
|
|
{/* style={{ */}
|
|
{/* cursor: record?.REGISTERCOMPACT_HOSTID ? 'pointer' : '', */}
|
|
{/* color: record?.REGISTERCOMPACT_HOSTID ? '#1890ff' : '' */}
|
|
{/* }} */}
|
|
{
|
|
record.COMPACT_DETAILS === 1000 ? <span>{COMPACTLISTS[record.COMPACT_DETAILS]}</span> :
|
|
<span onClick={() => {
|
|
// if (record?.REGISTERCOMPACT_HOSTID) {
|
|
// setAssociationRow(record)
|
|
// setAssociationDrawer(true)
|
|
// }
|
|
}}>
|
|
{COMPACTLISTS[record.COMPACT_DETAILS]}
|
|
{/* {COMPACTLISTS && COMPACTLISTS.length>0?COMPACTLISTS.filter(item=> item.value===record.COMPACT_DETAILS)[0].label:''} */}
|
|
</span>
|
|
}
|
|
</>
|
|
}
|
|
},
|
|
{
|
|
title: '签订程序',
|
|
dataIndex: 'ORGANIZER_TEL',
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const options = session.get('COMPACTREGPROINSTList')
|
|
return options;
|
|
}
|
|
},
|
|
{
|
|
title: '合同附属类型',
|
|
dataIndex: '',
|
|
render: () => {
|
|
return subDetail?.COMPACT_CHILDTYPE ?
|
|
compactType?.find(n => n.value === subDetail?.COMPACT_CHILDTYPE)?.label : '-'
|
|
}
|
|
},
|
|
];
|
|
const subClumns: ProDescriptionsItemProps<ContractSubModel>[] = [
|
|
{
|
|
title: '服务区类型',
|
|
key: 'SERVERPART_TYPE',
|
|
dataIndex: 'SERVERPART_TYPE',
|
|
valueType: 'select',
|
|
valueEnum: severpartType
|
|
},
|
|
{
|
|
title: '经营业态',
|
|
key: 'BUSINESS_TRADE',
|
|
dataIndex: 'BUSINESS_TRADE',
|
|
valueType: 'select',
|
|
valueEnum: businessType
|
|
},
|
|
{
|
|
title: '经营品牌',
|
|
key: 'BRAND_NAME',
|
|
dataIndex: 'BRAND_NAME',
|
|
valueType: 'text',
|
|
},
|
|
{
|
|
title: '经营面积',
|
|
key: 'OPERATING_AREA',
|
|
dataIndex: 'OPERATING_AREA',
|
|
valueType: 'text',
|
|
render: (value) => {
|
|
|
|
return value ? `${value}㎡` : '-'
|
|
}
|
|
},
|
|
// {
|
|
// title: '结算周期',
|
|
// key: 'SETTLEMENT_CYCLE',
|
|
// dataIndex: 'SETTLEMENT_CYCLE',
|
|
// valueType: 'select',
|
|
// request: async () => {
|
|
|
|
// const options = session.get("SETTLEMENT_CYCLEList");
|
|
// return options
|
|
// }
|
|
// },
|
|
{
|
|
title: '所属区域',
|
|
key: 'SERVERPARTREGION',
|
|
dataIndex: 'SERVERPARTREGION',
|
|
valueType: 'select',
|
|
request: async () => {
|
|
const options = session.get("shopregionList")
|
|
return options;
|
|
},
|
|
fieldProps: {
|
|
mode: 'multiple'
|
|
}
|
|
},
|
|
{
|
|
title: '物业费',
|
|
key: 'PROPERTY_FEE',
|
|
dataIndex: 'PROPERTY_FEE',
|
|
valueType: 'digit',
|
|
render: (value) => {
|
|
return value ? `${value}元/月` : '-'
|
|
}
|
|
},
|
|
// {
|
|
// title: '结算模式',
|
|
// key: 'SETTLEMENT_MODES',
|
|
// dataIndex: 'SETTLEMENT_MODES',
|
|
// valueType: 'select',
|
|
// request: async () => {
|
|
// const options = session.get("SETTLEMENT_MODESList");
|
|
// return options;
|
|
// }
|
|
// },
|
|
{
|
|
title: '免租开始时间',
|
|
key: 'RENTFREE_STARTDATE',
|
|
dataIndex: 'RENTFREE_STARTDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '免租结束时间',
|
|
key: 'RENTFREE_ENDDATE',
|
|
dataIndex: 'RENTFREE_ENDDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '装修开始时间',
|
|
key: 'DECORATE_STARTDATE',
|
|
dataIndex: 'DECORATE_STARTDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '装修结束时间',
|
|
key: 'DECORATE_ENDDATE',
|
|
dataIndex: 'DECORATE_ENDDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '工程保修期限',
|
|
key: 'REPAIR_TIME',
|
|
dataIndex: 'REPAIR_TIME',
|
|
valueType: 'text',
|
|
render: (value) => {
|
|
return value ? `${value}天` : '-'
|
|
}
|
|
},
|
|
]
|
|
return (
|
|
<PageContainer // header={{ title: contractDetail?.COMPACT_NAME }}
|
|
loading={detailLoading}
|
|
header={{
|
|
title: contractDetail?.COMPACT_NAME,
|
|
breadcrumb: {},
|
|
}}
|
|
content={
|
|
<Row gutter={14}>
|
|
<Col span={16}>
|
|
{descirption}
|
|
</Col>
|
|
{/* <Col span={4}>
|
|
<Statistic className="contract-static-card" title="合同主体"
|
|
value={contractDetail?.SERVERPART_NAME}
|
|
valueStyle={{ fontSize: 24, lineHeight: 2.5, color: "#595959" }} />
|
|
</Col>
|
|
<Col span={4}>
|
|
<Statistic className="contract-static-card" title="合同金额" valueStyle={{
|
|
color: "#FFA74F",
|
|
fontSize: 14,
|
|
}}
|
|
valueRender={() => {
|
|
return <Space align="baseline">
|
|
<span className="amount">{contractDetail?.COMPACT_AMOUNT}</span><span>(万元)</span>
|
|
</Space>
|
|
}} />
|
|
</Col> */}
|
|
<Col span={4}>
|
|
<Statistic className="contract-static-card"
|
|
title={contractDetail?.COMPACT_AMOUNT ? amountDom(contractDetail?.COMPACT_AMOUNT) : ""}
|
|
valueStyle={{ color: "#00000075", fontSize: 14 }}
|
|
value={'合同金额'}
|
|
/>
|
|
</Col>
|
|
<Col span={4}>
|
|
<Statistic className="contract-static-card"
|
|
title={<span style={{ fontSize: 20, color: "#262626" }}>{contractDetail?.SERVERPART_NAME}</span>}
|
|
valueStyle={{ color: "#00000075", fontSize: 14, marginTop: 10 }}
|
|
value={"合同主体"}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item label="附件信息">
|
|
{
|
|
fileList ?
|
|
<Upload
|
|
defaultFileList={fileList || []}
|
|
showUploadList={{
|
|
showDownloadIcon: false,
|
|
showRemoveIcon: false,
|
|
}}
|
|
/> : '-'
|
|
}
|
|
</Descriptions.Item>
|
|
{
|
|
relatedContractsList && relatedContractsList.length > 0 ?
|
|
<Descriptions.Item label="关联合同列表" style={{ position: 'relative' }}>
|
|
<div style={{ display: "block" }}>
|
|
{
|
|
relatedContractsList.map((item: any) => {
|
|
return <div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<span style={{
|
|
color: '#1890ff',
|
|
cursor: 'pointer'
|
|
}} onClick={() => {
|
|
console.log('item', item);
|
|
console.log('historyList.current', historyList.current);
|
|
console.log('clickedId', clickedId);
|
|
if (clickedId && clickedId.indexOf(item.REGISTERCOMPACT_ID) === -1) {
|
|
let list: any = JSON.parse(JSON.stringify(clickedId))
|
|
list.push(item.REGISTERCOMPACT_ID)
|
|
historyList.current = list
|
|
console.log('historyList.current', historyList.current);
|
|
setChildrenRow(item)
|
|
setShowChildDetailDrawer(true)
|
|
}
|
|
}}>{`${item.COMPACT_NAME}(${COMPACTLISTS[item.COMPACT_DETAILS]})`}</span>
|
|
{
|
|
item.ATTACHMENT_STATE === 1000 ?
|
|
<img
|
|
style={{ width: '15px', height: '15px', marginLeft: '15px', cursor: 'pointer' }}
|
|
src={fileIcon}
|
|
onClick={async () => {
|
|
const data = await getPictureList(item.REGISTERCOMPACT_ID, '1115')
|
|
const files = data && data?.total > 0 ? data?.data.map((n: PictureModel) => {
|
|
return {
|
|
uid: n.ImageId,
|
|
name: n.ImageName,
|
|
status: 'done',
|
|
url: n.ImageUrl,
|
|
deletepath: n.ImagePath
|
|
}
|
|
}) : []
|
|
setChildrenFile(files)
|
|
setShowChildrenFile(true)
|
|
}}
|
|
/> : ''
|
|
}
|
|
</div>
|
|
})
|
|
}
|
|
</div>
|
|
{
|
|
contractDetail && contractDetail.LogList && contractDetail.LogList.length > 0 ?
|
|
<img style={{
|
|
cursor: 'pointer',
|
|
width: '20px',
|
|
height: '20px',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
}} onClick={(e) => {
|
|
setShowLogDrawer(true)
|
|
}} src={'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg'} /> : ''
|
|
}
|
|
</Descriptions.Item> : ''
|
|
}
|
|
</Descriptions>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
>
|
|
<>
|
|
<Card title={<div className="card-title">合同概况</div>} bordered={false}>
|
|
<ProDescriptions
|
|
dataSource={contractDetail}
|
|
columns={columns}
|
|
column={4}
|
|
/>
|
|
<ProDescriptions
|
|
title="甲方信息"
|
|
dataSource={contractDetail}
|
|
columns={[{
|
|
title: '名称',
|
|
key: 'FIRSTPART_NAME',
|
|
dataIndex: 'FIRSTPART_NAME',
|
|
span: 2
|
|
}, {
|
|
title: '联系人',
|
|
key: 'FIRSTPART_LINKMAN',
|
|
dataIndex: 'FIRSTPART_LINKMAN',
|
|
}, {
|
|
title: '联系电话',
|
|
key: 'FIRSTPART_MOBILE',
|
|
dataIndex: 'FIRSTPART_MOBILE',
|
|
},]} column={4} />
|
|
<ProDescriptions
|
|
title="乙方信息"
|
|
dataSource={contractDetail}
|
|
columns={[{
|
|
title: '名称',
|
|
key: 'SECONDPART_NAME',
|
|
dataIndex: 'SECONDPART_NAME',
|
|
span: 2
|
|
}, {
|
|
title: '联系人',
|
|
key: 'SECONDPART_LINKMAN',
|
|
dataIndex: 'SECONDPART_LINKMAN',
|
|
|
|
}, {
|
|
title: '联系电话',
|
|
key: 'SECONDPART_MOBILE',
|
|
dataIndex: 'SECONDPART_MOBILE',
|
|
},
|
|
]} column={4} />
|
|
{(contractDetail?.THREEPART_LINKMAN || contractDetail?.THREEPART_MOBILE || contractDetail?.THREEPART_NAME) && <ProDescriptions title="丙方信息" column={4}
|
|
dataSource={contractDetail}
|
|
columns={[{
|
|
title: '名称',
|
|
key: 'THREEPART_NAME',
|
|
dataIndex: 'THREEPART_NAME',
|
|
span: 2
|
|
}, {
|
|
title: '联系人',
|
|
key: 'THREEPART_LINKMAN',
|
|
dataIndex: 'THREEPART_LINKMAN',
|
|
}, {
|
|
title: '联系电话',
|
|
key: 'THREEPART_MOBILE',
|
|
dataIndex: 'THREEPART_MOBILE',
|
|
}]}
|
|
/>}
|
|
</Card>
|
|
<Card title={<div className="card-title">合同要素</div>} bordered={false} style={{ marginTop: 24 }}>
|
|
<ProDescriptions dataSource={contractDetail} columns={[
|
|
{
|
|
title: '合同开始日期',
|
|
key: 'COMPACT_STARTDATE',
|
|
dataIndex: 'COMPACT_STARTDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '合同截止日期',
|
|
key: 'COMPACT_ENDDATE',
|
|
dataIndex: 'COMPACT_ENDDATE',
|
|
valueType: 'date',
|
|
fieldProps: {
|
|
format: 'YYYY/MM/DD',
|
|
},
|
|
},
|
|
{
|
|
title: '合同期限',
|
|
key: 'DURATIONDAY',
|
|
dataIndex: 'DURATIONDAY',
|
|
render: (value) => {
|
|
return value ? `${value}天` : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '合同年限',
|
|
key: 'DURATION',
|
|
dataIndex: 'DURATION',
|
|
render: (value, record) => {
|
|
return record?.RENEWAL_YEARS ? `${value}+${record?.RENEWAL_YEARS}` : value ? `${value}年` : '-'
|
|
}
|
|
},
|
|
]} column={4}>
|
|
</ProDescriptions >
|
|
<ProDescriptions dataSource={contractDetail} columns={[
|
|
// {
|
|
// title: '应到账日期',
|
|
// key: 'COMPACT_ACCOUNTDATE',
|
|
// dataIndex: 'COMPACT_ACCOUNTDATE',
|
|
// valueType: 'date',
|
|
// fieldProps: {
|
|
// format: 'YYYY/MM/DD',
|
|
// },
|
|
// span: 1.5
|
|
// },
|
|
{
|
|
title: '履约保证金',
|
|
key: 'SECURITYDEPOSIT',
|
|
dataIndex: 'SECURITYDEPOSIT',
|
|
valueType: 'text',
|
|
render: (value) => {
|
|
|
|
return value ? `${value}万元` : '-'
|
|
}
|
|
},
|
|
// {
|
|
// title: '到账日期',
|
|
// key: 'SECURITYDEPOSIT_STARTDATE',
|
|
// dataIndex: 'SECURITYDEPOSIT_STARTDATE',
|
|
// valueType: 'date',
|
|
// fieldProps: {
|
|
// format: 'YYYY/MM/DD',
|
|
// },
|
|
// },
|
|
// {
|
|
// title: '退款日期',
|
|
// key: 'SECURITYDEPOSIT_ENDDATE',
|
|
// dataIndex: 'SECURITYDEPOSIT_ENDDATE',
|
|
// valueType: 'date',
|
|
// fieldProps: {
|
|
// format: 'YYYY/MM/DD',
|
|
// },
|
|
// }
|
|
// ]} column={4}>
|
|
// </ProDescriptions >
|
|
// <ProDescriptions dataSource={contractDetail} columns={[
|
|
// {
|
|
// title: '安全风险抵押金',
|
|
// key: 'SAFETYRISKMORTGAGE',
|
|
// dataIndex: 'SAFETYRISKMORTGAGE',
|
|
// valueType: 'text',
|
|
// render: (value) => {
|
|
// return value ? `${value}万元` : '-'
|
|
// }
|
|
// },
|
|
// {
|
|
// title: '到账日期',
|
|
// key: 'SAFETYRISKMORTGAGE_STARTDATE',
|
|
// dataIndex: 'SAFETYRISKMORTGAGE_STARTDATE',
|
|
// valueType: 'date',
|
|
// fieldProps: {
|
|
// format: 'YYYY/MM/DD',
|
|
// },
|
|
// },
|
|
// {
|
|
// title: '退款日期',
|
|
// key: 'SAFETYRISKMORTGAGE_ENDDATE',
|
|
// dataIndex: 'SAFETYRISKMORTGAGE_ENDDATE',
|
|
// valueType: 'date',
|
|
// fieldProps: {
|
|
// format: 'YYYY/MM/DD',
|
|
// },
|
|
// }
|
|
]} column={4}>
|
|
</ProDescriptions>
|
|
</Card>
|
|
<Card title={<div className="card-title">合同约束</div>} bordered={false} style={{ padding: 0, marginTop: 24 }}>
|
|
<ProDescriptions dataSource={subDetail} loading={loading} columns={subClumns} column={4} />
|
|
<ProDescriptions dataSource={subDetail} loading={loading} columns={[
|
|
{
|
|
title: '经营范围',
|
|
key: 'OPERATING_SCOPE',
|
|
dataIndex: 'OPERATING_SCOPE',
|
|
span: 2
|
|
},
|
|
{
|
|
title: '经营场地',
|
|
key: 'OPERATING_SITE',
|
|
dataIndex: 'OPERATING_SITE',
|
|
span: 2
|
|
},
|
|
]} column={4} />
|
|
</Card>
|
|
<Card title={<div className="card-title">其他事项</div>} bordered={false} style={{ padding: 0, marginTop: 24, marginBottom: 24 }}>
|
|
<ProDescriptions dataSource={subDetail} loading={loading} columns={[
|
|
{
|
|
title: '设备押金',
|
|
key: 'EQUIPMENT_DEPOSIT',
|
|
dataIndex: 'EQUIPMENT_DEPOSIT',
|
|
valueType: 'digit',
|
|
render: (value) => {
|
|
return value ? `${value}元` : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '水费',
|
|
key: 'WATER_CHARGE',
|
|
dataIndex: 'WATER_CHARGE',
|
|
render: (value) => {
|
|
return value ? `${value}元/吨` : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '电费',
|
|
key: 'ELECTRICITY_FEES',
|
|
dataIndex: 'ELECTRICITY_FEES',
|
|
render: (value) => {
|
|
return value ? `${value}元/度` : '-'
|
|
}
|
|
},
|
|
{
|
|
title: '其他费用',
|
|
key: 'OTHER_SCHARGE',
|
|
dataIndex: 'OTHER_SCHARGE',
|
|
},
|
|
{
|
|
title: '合同注意事项',
|
|
key: 'COMPACT_DPDESC',
|
|
dataIndex: 'COMPACT_DPDESC',
|
|
span: 2,
|
|
render: (value) => {
|
|
return <span style={{ whiteSpace: 'pre-wrap' }}>{value || '-'}</span>
|
|
}
|
|
},
|
|
{
|
|
title: '招商依据',
|
|
key: 'COMPACT_BASIS',
|
|
dataIndex: 'COMPACT_BASIS',
|
|
span: 2
|
|
},
|
|
]} column={4} />
|
|
</Card>
|
|
</>
|
|
<Drawer
|
|
width="73%"
|
|
visible={associationDrawer}
|
|
onClose={() => {
|
|
setAssociationRow(undefined);
|
|
setAssociationDrawer(false);
|
|
}}
|
|
closable={false}
|
|
destroyOnClose
|
|
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
|
>
|
|
<ContractDetail contractId={associationRow?.REGISTERCOMPACT_HOSTID} ></ContractDetail>
|
|
</Drawer>
|
|
{/* 关联合同的详情抽屉 */}
|
|
<Drawer
|
|
width="73%"
|
|
visible={showChildDetailDrawer}
|
|
onClose={() => {
|
|
setShowChildDetailDrawer(false)
|
|
setChildrenRow(undefined)
|
|
}}
|
|
destroyOnClose
|
|
title={'关联合同详情'}
|
|
closable={false}
|
|
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
|
>
|
|
<ContractDetail contractId={childrenRow?.REGISTERCOMPACT_ID} clickedId={historyList.current} />
|
|
</Drawer>
|
|
|
|
{/* 日志抽屉 */}
|
|
<Drawer
|
|
width="30%"
|
|
visible={showLogDrawer}
|
|
onClose={() => {
|
|
setShowLogDrawer(false)
|
|
}}
|
|
destroyOnClose
|
|
title={'日志详情'}
|
|
closable={false}
|
|
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 16 }}
|
|
>
|
|
{
|
|
contractDetail && contractDetail.LogList && contractDetail.LogList.length > 0 ?
|
|
contractDetail.LogList.map((item: any, index: number) => {
|
|
return <div style={{ marginBottom: '16px' }}>
|
|
{`${index + 1}、${item.BUSINESSLOG_CONTENT}`}
|
|
</div>
|
|
}) : ''
|
|
}
|
|
</Drawer>
|
|
{/* 显示关联合同附件 */}
|
|
<Modal
|
|
title={'关联合同附件'}
|
|
open={showChildrenFile}
|
|
onCancel={() => {
|
|
setShowChildrenFile(false)
|
|
}}
|
|
footer={() => { }}
|
|
>
|
|
<Upload
|
|
defaultFileList={childrenFile || []}
|
|
showUploadList={{
|
|
showDownloadIcon: false,
|
|
showRemoveIcon: false,
|
|
}}
|
|
/>
|
|
</Modal>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
export default ContractDetail;
|