From 27712ec06702a060b1dda7bd2ebe64bbec98af72 Mon Sep 17 00:00:00 2001 From: ylj20011123 Date: Fri, 5 Dec 2025 18:53:08 +0800 Subject: [PATCH] update --- src/pages/DigitalElectronics/index.tsx | 2 +- src/pages/RentCalculation/index.tsx | 1055 +++++++++++++++++++++++- src/pages/RentCalculation/style.less | 27 +- 3 files changed, 1069 insertions(+), 15 deletions(-) diff --git a/src/pages/DigitalElectronics/index.tsx b/src/pages/DigitalElectronics/index.tsx index 82f8dd2..c1bce1b 100644 --- a/src/pages/DigitalElectronics/index.tsx +++ b/src/pages/DigitalElectronics/index.tsx @@ -69,7 +69,7 @@ const DigitalElectronics: React.FC<{ currentUser: any }> = (props) => { dataIndex: "searchText", hideInTable: true, fieldProps: { - placeholder: "请输入经办人/单据号/金额", + placeholder: "请输入经办人/单据号", } }, { diff --git a/src/pages/RentCalculation/index.tsx b/src/pages/RentCalculation/index.tsx index 66d0023..e42c3e8 100644 --- a/src/pages/RentCalculation/index.tsx +++ b/src/pages/RentCalculation/index.tsx @@ -1,19 +1,37 @@ import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree"; -import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components"; -import { Button, Modal } from "antd"; +import { ActionType, FormInstance, ProForm, ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormText, ProTable } from "@ant-design/pro-components"; +import { Button, Col, Divider, Modal, Row } from "antd"; import { useRef, useState } from "react"; import { connect } from "umi"; import './style.less' +import { handleGetServerpartTree, handleGetSERVERPARTTYPEList } from "../operationReport/service"; +import { handleGetServerpartInfo } from "../serverpartAssets/service"; const RentCalculation: React.FC<{ currentUser: any }> = (props) => { const actionRef = useRef(); const formRef = useRef(); + const modalRef = useRef(); // 树相关的属性和方法 const [selectedId, setSelectedId] = useState() const [collapsible, setCollapsible] = useState(false) // 选择运营模式的悬浮框 - const [showSelectOperatingModel, setShowSelectOperatingModel] = useState(false) + const [showSelectOperatingModel, setShowSelectOperatingModel] = useState(false); + // 当前选择的运营模式 + const [selectedOperatingModel, setSelectedOperatingModel] = useState(null); + // 实际计算租金的modal + const [rentCalculateModal, setRentCalculateModal] = useState(false) + // 当前片区下的服务区列表 + const [serverPartList, setServerPartList] = useState() + // 当前服务区下的方位 + const [SERVERPARTREGION, setSERVERPARTREGION] = useState() + + const operatingModels = [ + '委托运营', + '加盟项目', + '保底收益一', + '保底收益二' + ]; const columns: any = [ { @@ -144,8 +162,45 @@ const RentCalculation: React.FC<{ currentUser: any }> = (props) => { width: 200, ellipsis: true, } - ] + // 根据区域获取到服务区列表 + const handleGetServerPartList = async (id: string) => { + const req: any = { + ProvinceCode: "530000", + SPRegionType_ID: id + } + const data = await handleGetServerpartTree(req) + console.log('dsadasda', data); + if (data && data.length > 0) { + let list = data[0].children + setServerPartList(list) + } else { + setServerPartList([]) + } + } + // 获取到服务区方位的方法 + const handleGetSERVERPARTREGION = async (id: string) => { + setSERVERPARTREGION([]) + const req: any = { + SERVERPARTId: id + } + const data = await handleGetServerpartInfo(req) + console.log('datadatadata', data); + let list: any = [] + if (data.RegionInfo && data.RegionInfo.length > 0) { + data.RegionInfo.forEach((item: any) => { + list.push({ label: item.SERVERPART_REGIONNAME, value: item.SERVERPART_REGION }) + }) + } + console.log('listlistlist', list); + + setSERVERPARTREGION(list) + } + + // 同步和新增方法 + const handleAddUpdate = async (formData: any) => { + + } return (
@@ -173,12 +228,13 @@ const RentCalculation: React.FC<{ currentUser: any }> = (props) => { // if (data && data.length > 0) { // return { data, success: true } // } - // return { data: [], success: true } + return { data: [], success: true } }} toolbar={{ actions: [ ] }} @@ -189,24 +245,997 @@ const RentCalculation: React.FC<{ currentUser: any }> = (props) => { { setShowSelectOperatingModel(false) }} - onOk={async () => { // 提交框内的数据 - + footer={false} + onOk={async () => { + setShowSelectOperatingModel(false); }} >
-
委托运营
-
加盟项目
-
保底收益一
-
保底收益二
+ {operatingModels.map((model) => ( +
{ + setSelectedOperatingModel(model) + setShowSelectOperatingModel(false); + setRentCalculateModal(true) + }} + > + {model} +
+ ))}
-
) + + + {/* 打开实际填写测算的 悬浮框 */} + { + setSelectedOperatingModel(null) + setRentCalculateModal(false) + }} + onOk={async () => { + modalRef.current?.validateFields().then((res: any) => { + setSelectedOperatingModel(null) + setRentCalculateModal(false) + // 保存同步租金测算的方法 + handleAddUpdate(res) + }) + }} + > +
+ + + + 基础信息 + + { + const req: any = { + SearchParameter: { + SERVERPARTSTATICTYPE_ID: 1000, + TYPE_STATE: 1, + PROVINCE_CODE: 530000 + }, + PageIndex: 1, + PageSize: 100, + SortStr: "TYPE_INDEX,SERVERPARTTYPE_ID" + } + const data = await handleGetSERVERPARTTYPEList(req) + console.log('datadatadatadata', data); + let list: any = [] + if (data && data.length > 0) { + data.forEach((item: any) => { + list.push({ label: item.TYPE_NAME, value: item.SERVERPARTTYPE_ID }) + }) + } + return list + }} + fieldProps={{ + showSearch: true, + filterOption: (input, option) => + (option?.label ?? '').toLowerCase().includes(input.toLowerCase()), + optionFilterProp: 'label', + onChange: (value: any, option: any) => { + console.log('valuevalue', value); + handleGetServerPartList(value) + if (value) { + modalRef.current?.setFieldsValue({ belongArea: option.label }) + } else { + modalRef.current?.setFieldsValue({ belongArea: "" }) + } + } + }} + /> + + + + + + { + console.log('e', e); + handleGetSERVERPARTREGION(e) + if (e) { + modalRef.current?.setFieldsValue({ SAName: option.label }) + } else { + modalRef.current?.setFieldsValue({ SAName: "" }) + } + } + }} + rules={[{ required: true, message: '请选择服务区!' }]} + /> + + + + + + + + + { + if (e) { + let sum: number = e * 16.89 + modalRef.current?.setFieldsValue({ addWaterCost: sum.toFixed(2), addWaterCostMore: (Number(sum.toFixed(2)) * 1.15).toFixed(2) }) + } + } + }} + /> + + + { + if (e) { + // 因为是非首次 所以要拿到第三方保底递增收益的值 去判断 要不要重新计算首次保底营业额的值 + let floorPriceMore: number = modalRef.current?.getFieldValue('floorPriceMore') + if (e === 2) { + modalRef.current?.setFieldsValue({ firstReminder: 32 }) + if (floorPriceMore) { + modalRef.current?.setFieldsValue({ firstMinimumRevenue: Number(floorPriceMore / 0.35).toFixed(2) }) + } + } else if (e === 1) { + modalRef.current?.setFieldsValue({ firstReminder: 38 }) + modalRef.current?.setFieldsValue({ firstMinimumRevenue: Number(floorPriceMore).toFixed(2) }) + } + } + } + }} + /> + + + + + + + + + { + if (e) { + console.log('eeeeee', e); + let fromRes: any = modalRef.current?.getFieldValue('floorPrice') + if (fromRes) { + let rate: number = 1.05 + if (e === 1000 || e === 2000) { + rate = 1.15 + } else if (e === 3000) { + rate = 1.1 + } else if (e === 4000) { + rate = 1.05 + } + let sum: number = fromRes * 1.15 * rate + modalRef.current?.setFieldsValue({ floorPriceMore: sum.toFixed(2) }) + + // 到这里是拿到新的 保底收益递增 + let newNumber: number = Number(sum.toFixed(2)) + // 先拿到判断是不是首次项目 + let formDataIsFirst: number = modalRef.current?.getFieldValue('isFirst') + // 是首次 就不去改变 保底营业额的值 不是才计算 + if (formDataIsFirst === 1) { + // 1 代表首次 + // 首次则 首次招标营业额 为 最高值收益(floorPriceMore) / 35% + modalRef.current?.setFieldsValue({ firstMinimumRevenue: (Number(newNumber) / 0.35).toFixed(2) }) + // 那么二次保底营业额的值就是 第一次的值 + let firstMinimumRevenueNumber: number = Number((Number(sum.toFixed(2)) / 0.35).toFixed(2)) + modalRef.current?.setFieldsValue({ secondMinimumRevenue: (firstMinimumRevenueNumber).toFixed(2) }) + // 那么第三次保底营业额的值 就是 第二次的值 *90% + let secondMinimumRevenue: number = Number((firstMinimumRevenueNumber).toFixed(2)) + modalRef.current?.setFieldsValue({ thriceMinimumRevenue: (secondMinimumRevenue * 0.9).toFixed(2) }) + + } else if (formDataIsFirst === 2) { + // 2 代表非首次 + // 不是首次进来 那么就不管首次保底营业额了 只要看第二次 有没有值即可 有值算第三次 没值就不算 + let secondMinimumRevenueNumber: number = modalRef.current?.getFieldValue('secondMinimumRevenue') + if (secondMinimumRevenueNumber) { + modalRef.current?.setFieldsValue({ thriceMinimumRevenue: (secondMinimumRevenueNumber * 0.9).toFixed(2) }) + } + } + } + } + + } + }} + /> + + + + + + + + + + + + + + {/* 每个类型 实际需要填写计算的内容 都不一样 所以要区分了 */} + { + selectedOperatingModel === '委托运营' ? + <> + 委托运营 + + + + + + + + + + + + + 集团公司成本价格 + + { + if (e) { + modalRef.current?.setFieldsValue({ addWaterCostMore: (Number(e) * 1.15).toFixed(2) }) + } + } + }} + /> + + + + + 第三方评估测算年保底收益 + + { + if (e) { + let fromRes: any = modalRef.current?.getFieldValue('rating') + console.log('fromResfromRes', fromRes); + let rate: number = 1.05 + if (fromRes === 1000 || fromRes === 2000) { + rate = 1.15 + } else if (fromRes === 3000) { + rate = 1.1 + } else if (fromRes === 4000) { + rate = 1.05 + } + + let sum: number = e * 1.15 * rate + // 先拿到判断是不是首次项目 + let formDataIsFirst: number = modalRef.current?.getFieldValue('isFirst') + // 是首次 就不去改变 保底营业额的值 不是才计算 + if (formDataIsFirst === 1) { + } else if (formDataIsFirst === 2) { + modalRef.current?.setFieldsValue({ firstMinimumRevenue: (Number(sum.toFixed(2)) / 0.35).toFixed(2) }) + } + modalRef.current?.setFieldsValue({ floorPriceMore: sum.toFixed(2) }) + } + } + }} + /> + + + { + if (e) { + // 先拿到判断是不是首次项目 + let formDataIsFirst: number = modalRef.current?.getFieldValue('isFirst') + // 是首次 就不去改变 保底营业额的值 不是才计算 + if (formDataIsFirst === 1) { + } else if (formDataIsFirst === 2) { + modalRef.current?.setFieldsValue({ firstMinimumRevenue: Number(e / 0.35).toFixed(2) }) + } + } + } + }} + /> + + + <> + 测算结果 + + + + + + + 首次招标 + + { + if (e) { + let sum: number = e * 0.9 + modalRef.current?.setFieldsValue({ secondMinimumRevenue: sum.toFixed(2), thriceMinimumRevenue: (Number(sum.toFixed(2)) * 0.9).toFixed(2) }) + } + } + }} + /> + + + + + 二次招标 + + + + + + + 三次招标 + + + + + + + + + : + selectedOperatingModel === '加盟项目' ? + <> + 业态定位 + + + + + + + + + + 业态面积 + + + + + + + + + + 原合同末年租金 + + + + + + + + + + 集团公司成本价格 + + + + + + + + + + + + + + + + + + + + + + 第三方评估测算年保底收益（元） + + + + + + + + + + 加盟项目 + + + + + + + + + + + + + + <> + 首次招商 + + + + + + + + + + + 测算结果 + + + + + + + + + + + + + + + + + + + + + + + + + : + selectedOperatingModel === '保底收益一' ? + <> + 业态面积 + + + + + + + + + + + + + + + + + + + 第三方评估测算年保底收益（元） + + + + + + + + + + 保底收益一 + + + + + + + + + + + + + <> + 测算结果 + + + + + + + + + + + + + + + + + + + + + + 面积拆分招商底价（元） + + + + + + + + + + + + + + + + 面积拆分物业费（元） + + + + + + + + + + + + + + + : + selectedOperatingModel === '保底收益二' ? + <> + 业态面积 + + + + 原合同末年租金 + + + + + + + + + + 集团公司成本价格 + + + + + + + 第三方评估测算年保底收益（元） + + + + 保底收益二 + + + + + + + + + + + <> + 招商底价（元） + + + + + + + + + + 测算结果 + + + + + + + + + + + + + + + + + + + + : + <> + + } + + +
+ + + ) } export default connect(({ user }: ConnectState) => ({ diff --git a/src/pages/RentCalculation/style.less b/src/pages/RentCalculation/style.less index dd3b759..59a4dd0 100644 --- a/src/pages/RentCalculation/style.less +++ b/src/pages/RentCalculation/style.less @@ -4,9 +4,34 @@ display: flex; align-items: center; flex-wrap: wrap; + gap: 10px; // Add spacing between items + margin-top: 30px; .operatingModelModalItemBox { - width: 50%; + width: calc(50% - 5px); // Adjust width to accommodate gap + padding: 20px; + text-align: center; + border: 1px solid #d9d9d9; + border-radius: 4px; + cursor: pointer; + // margin-bottom: 10px; // This can now be handled by gap + transition: all 0.3s ease; + + &:hover { + border-color: #1890ff; + background-color: #e6f7ff; + } + + &.selected { + border-color: #1890ff; + background-color: #e6f7ff; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + } } } +} + + +.rentCalculateModalContent::-webkit-scrollbar { + display: none; } \ No newline at end of file