update

src/pages/RentCalculation/index.tsx

@@ -1,8 +1,9 @@
 import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree";
 import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
-import { Button } from "antd";
+import { Button, Modal } from "antd";
 import { useRef, useState } from "react";
 import { connect } from "umi";
+import './style.less'
 
 
 const RentCalculation: React.FC<{ currentUser: any }> = (props) => {
@@ -11,6 +12,8 @@ const RentCalculation: React.FC<{ currentUser: any }> = (props) => {
     // 树相关的属性和方法
     const [selectedId, setSelectedId] = useState<string>()
     const [collapsible, setCollapsible] = useState<boolean>(false)
+    // 选择运营模式的悬浮框
+    const [showSelectOperatingModel, setShowSelectOperatingModel] = useState<boolean>(false)
 
     const columns: any = [
         {
@@ -175,12 +178,34 @@ const RentCalculation: React.FC<{ currentUser: any }> = (props) => {
                     toolbar={{
                         actions: [
                             <Button type={'primary'} onClick={() => {
-
+                                setShowSelectOperatingModel(true)
                             }}>添加租金测算</Button>
                         ]
                     }}
                 />
             </div>
+
+
+            <Modal
+                title={'请选择运营模式'}
+                destroyOnClose
+                width={1200}
+                open={showSelectOperatingModel}
+                className={'operatingModelModal'}
+                onCancel={() => {
+                    setShowSelectOperatingModel(false)
+                }}
+                onOk={async () => { // 提交框内的数据
+
+                }}
+            >
+                <div className="operatingModelModalBox">
+                    <div className="operatingModelModalItemBox">委托运营</div>
+                    <div className="operatingModelModalItemBox">加盟项目</div>
+                    <div className="operatingModelModalItemBox">保底收益一</div>
+                    <div className="operatingModelModalItemBox">保底收益二</div>
+                </div>
+            </Modal>
         </div>)
 }
 

src/pages/RentCalculation/style.less

@@ -0,0 +1,12 @@
+.operatingModelModal {
+    .operatingModelModalBox {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .operatingModelModalItemBox {
+            width: 50%;
+        }
+    }
+}