快速报价app tab新增

陈鑫涛
1 parent 43b738e2
Showing 4 changed files with 153 additions and 30 deletions
src/mobile/components/SelectInput.jsx
src/mobile/quotation/detailNew.jsx
src/mobile/quotation/quotationDetail.css
src/mobile/quotation/quotationDetail.less
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import { Input, Popup, Button, Toast, PickerView, SearchBar } from "antd-mobile";
+import { Input, Popup, Button, Toast, PickerView, SearchBar,Checkbox } from "antd-mobile";
 import { DownOutline } from "antd-mobile-icons";
 import commonConfig from "@/utils/config";
 import * as commonServices from "@/services/services";
@@ -18,8 +18,11 @@ const SelectInput = props =&gt; {
   const { masterData } = props.state;
   const [bCanInput, setBCanInput] = useState(props.bCanInput);
   const { bReadonly } = itemDetail || {};
+  const [propsType, setPropsType] = useState("");
   useEffect(() => {
     if (!itemDetail) return;
+    const type = itemDetail.sName.charAt(0);
+    setPropsType(type);
     const viewRowNew = itemDetail.sName ? viewRow?.[itemDetail.sName] : "";
     if (itemDetail.sDropDownType === "const") {
       return;
@@ -109,7 +112,7 @@ const SelectInput = props =&gt; {
         setCopyColumns(list);
         // getSqlDropDownData(searchValue);
       } else if ((sDropDownType = "const")) {
-        if (!itemDetail.showDropDown) return
+        if (!itemDetail.showDropDown) return;
         const list = Object.entries(JSON.parse(itemDetail.showDropDown)).map(([key, value]) => ({
           label: value,
           value: key,
@@ -121,7 +124,7 @@ const SelectInput = props =&gt; {
       if (sDropDownType === "sql") {
         getSqlDropDownData(searchValue);
       } else if ((sDropDownType = "const")) {
-        if (!itemDetail.showDropDown) return
+        if (!itemDetail.showDropDown) return;
         const list = Object.entries(JSON.parse(itemDetail.showDropDown)).map(([key, value]) => ({
           label: value,
           value: key,
@@ -144,20 +147,27 @@ const SelectInput = props =&gt; {
   return (
     <div>
       <div className={styles.inputBox}>
-        <Input
-          placeholder=""
-          value={value}
-          onChange={val => {
-            setValue(val);
-            props.onDataChange(tableName, itemDetail.sName, { [itemDetail.sName]: val }, null, coplyColumns);
-          }}
-          readOnly={bReadonly}
-        />
-        {!bCanInput ? (
-          <div className={styles.icons} onClick={clickBtn}>
-            <DownOutline />
+        {propsType === "b" ? (
+         <Checkbox style={{height:'3.125rem'}}/>
+        ) : (
+          <div>
+            {" "}
+            <Input
+              placeholder=""
+              value={value}
+              onChange={val => {
+                setValue(val);
+                props.onDataChange(tableName, itemDetail.sName, { [itemDetail.sName]: val }, null, coplyColumns);
+              }}
+              readOnly={bReadonly}
+            />
+            {!bCanInput ? (
+              <div className={styles.icons} onClick={clickBtn}>
+                <DownOutline />
+              </div>
+            ) : null}
           </div>
-        ) : null}
+        )}
       </div>
       <Popup visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyStyle={{ height: "50vh" }}>
         <div className={styles.popupHeader}>
 import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { history } from "umi";
-import { Toast, Input, Tabs, Selector, Grid, Image, Button, Checkbox, Switch, Dialog, Radio, Space } from "antd-mobile";
+import { Toast, Input, Tabs, Selector, Grid, Image, Button, Checkbox, Switch, Dialog, Radio, Space, CenterPopup } from "antd-mobile";
 import { AddOutline, MinusOutline, EditFill, CloseOutline } from "antd-mobile-icons";
 import commonConfig from "@/utils/config";
 import * as commonServices from "@/services/services";
@@ -1171,11 +1171,11 @@ const MasterComponent = props =&gt; {
 const QuotationTabs = props => {
   const { state } = props;
   const { selectedNode } = state;
-  const sAllPartsName = selectedNode?.sAllPartsName;
-  const sAllPartsNameList = sAllPartsName?.split(",");
-  // sAllPartsNameList.push('+')
-  const [activeKey, setActiveKey] = useState(sAllPartsNameList && sAllPartsNameList.length ? sAllPartsNameList[0] : null);
-
+  const [sAllPartsNameList, setSAllPartsNameList] = useState(selectedNode?.sAllPartsName?.split(",") || []);
+  const [activeKey, setActiveKey] = useState(sAllPartsNameList.length ? sAllPartsNameList[0] : null);
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState("");
+  const partsList = selectedNode?.sAllPartsName?.split(",");
   useEffect(() => {
     // 更新父组件的状态
     props.setState(pre => ({ ...pre, boxModel: activeKey }));
@@ -1185,6 +1185,15 @@ const QuotationTabs = props =&gt; {
     ...props,
     boxModel: activeKey,
   };
+
+  // 处理添加新标签的逻辑
+  const handleAdd = () => {
+    // 弹窗
+    setVisible(true);
+    // const newSAllPartsNameList = [...sAllPartsNameList, '111']; // 创建一个新的数组，包含新增的元素
+    // setSAllPartsNameList(newSAllPartsNameList); // 更新状态，触发组件重新渲染
+  };
+
   return (
     <div>
       <div className={styles.tabsBox}>
@@ -1194,25 +1203,91 @@ const QuotationTabs = props =&gt; {
             setActiveKey(key);
           }}
         >
-          {sAllPartsNameList && sAllPartsNameList.length
+          {sAllPartsNameList.length
             ? sAllPartsNameList.map((pane, index) => (
-                <Tabs.Tab key={pane} title={pane} >
-                  <BoxComponent {...tabsProps} paneKey={pane} />
-                  {/* <CloseOutline className={styles.tabClearBtn}/> */}
-                </Tabs.Tab>
+                <>
+                  <Tabs.Tab
+                    key={pane}
+                    title={
+                      <div className={styles.tabTitle}>
+                        <div>{pane}</div>
+                        {partsList.includes(pane) ? (
+                          ""
+                        ) : (
+                          <CloseOutline
+                            style={{ marginLeft: "1rem", position: "absolute", top: "0", right: "-2.5rem" }}
+                            onClick={() => {
+                              const newTabs = sAllPartsNameList.filter(panes => panes !== pane);
+                              setSAllPartsNameList(newTabs);
+                              // 如果删除的是当前活动的 Tab，选择新的活动 Tab
+                              setActiveKey(0);
+                            }}
+                          />
+                        )}
+                      </div>
+                    }
+                  >
+                    <BoxComponent {...tabsProps} paneKey={pane} />
+                  </Tabs.Tab>
+                </>
               ))
             : ""}
         </Tabs>
-        {/* <Button
+        <Button
           className={styles.tabAddBtn}
           color="primary"
           fill="solid"
           size="small"
           style={{ width: "1.93rem", height: "1.93rem", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center" }}
-          onClick={() => {}}
+          onClick={handleAdd} // 调用 handleAdd 方法
         >
           <AddOutline />
-        </Button> */}
+        </Button>
+        <CenterPopup
+          visible={visible}
+          // onMaskClick={() => {
+          //   setVisible(false);
+          // }}
+        >
+          <div className={styles.addTabs}>
+            <div>请输入新标签名称：</div>
+            <Input
+              placeholder="请输入内容"
+              clearable
+              value={value}
+              onChange={val => {
+                setValue(val);
+              }}
+            />
+            <div className={styles.addTabsBtn}>
+              <Button
+                color="primary"
+                fill="outline"
+                size="small"
+                style={{ marginRight: "1rem" }}
+                onClick={() => {
+                  setValue("");
+                  setVisible(false);
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                color="primary"
+                fill="solid"
+                size="small"
+                onClick={() => {
+                  const newSAllPartsNameList = [...sAllPartsNameList, value]; // 创建一个新的数组，包含新增的元素
+                  setSAllPartsNameList(newSAllPartsNameList); // 更新状态，触发组件重新渲染
+                  setVisible(false);
+                  setValue("");
+                }}
+              >
+                确认
+              </Button>
+            </div>
+          </div>
+        </CenterPopup>
       </div>
     </div>
   );
@@ -140,3 +140,22 @@
   right: 0;
   top: 0;
 }
+.tabsBox .tabTitle {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.addTabs {
+  height: 12rem;
+  padding: 1rem;
+  position: relative;
+}
+.addTabs :global .adm-input-element {
+  height: 3rem;
+  border: 1px solid #dededf;
+}
+.addTabs .addTabsBtn {
+  position: absolute;
+  right: 5%;
+  bottom: 10%;
+}
@@ -148,4 +148,23 @@
     right: 0;
     top: 0;
   }
+  .tabTitle{
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
 }
+.addTabs{
+  height: 12rem;
+  padding: 1rem;
+  position: relative;
+  :global .adm-input-element{
+    height: 3rem;
+    border: 1px solid #dededf;
+  }
+  .addTabsBtn{
+    position: absolute;
+    right: 5%;
+    bottom: 10%;
+  }
+}
 \ No newline at end of file