@hzab/form-render 0.3.0 → 0.4.0

package/src/components/LocationPicker/servers/index.ts

@@ -0,0 +1,121 @@
+/**
+ * 根据经纬度获取定义的地址
+ * @param lon
+ * @param lat
+ * @returns
+ */
+export function getAddress(lon, lat) {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap) {
+      reject(Error("Error getAddress window.AMap is not defined."));
+      return;
+    }
+    const geocoder = new window.AMap.Geocoder({});
+    geocoder.getAddress([lon, lat], function (status, result) {
+      if (status === "complete" && result.info === "OK") {
+        const formattedAddress = result?.regeocode?.formattedAddress;
+        resolve(formattedAddress);
+        return formattedAddress;
+      } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
+        // 超出限制，使用 webServer 进行请求
+        if (!window._AMapLoaderTemp.serverKey) {
+          reject(new Error("超出使用限制，请联系管理员"));
+          return;
+        }
+        fetch(
+          `https://restapi.amap.com/v3/geocode/regeo?location=${lon?.toFixed(6)},${lat?.toFixed(6)}&key=${
+            window._AMapLoaderTemp.serverKey
+          }`,
+          {
+            mode: "cors",
+          },
+        )
+          .then((res) => res.json())
+          .then((res) => {
+            if (res.status === "1") {
+              resolve(res.regeocode?.formatted_address);
+            } else {
+              console.warn("Warn getAddress fetch: ", res);
+              reject(new Error(res.info));
+            }
+          })
+          .catch(reject);
+      } else {
+        reject(result);
+      }
+    });
+  });
+}
+
+/**
+ * 获取搜索提示
+ * @param search
+ * @param cityCode
+ * @returns
+ */
+export function getSearchTips(search, cityCode = "0571") {
+  return new Promise((resolve, reject) => {
+    if (!window.AMap) {
+      reject(Error("Error getAddress window.AMap is not defined."));
+      return;
+    }
+    const autoComplete = new window.AMap.Autocomplete({
+      // city 限定城市，默认全国
+      city: cityCode,
+    });
+    autoComplete.search(search, function (status, result) {
+      if (status === "complete" && result.info === "OK") {
+        resolve(
+          result.tips?.map((it) => {
+            const { lng, lat } = it?.location || {};
+            return {
+              ...it,
+              label: it.name,
+              value: it.id,
+              lon: +lng,
+              lng: +lng,
+              lat: +lat,
+            };
+          }),
+        );
+      } else if (result === "USER_DAILY_QUERY_OVER_LIMIT") {
+        // 超出限制，使用 webServer 进行请求
+        if (!window._AMapLoaderTemp.serverKey) {
+          reject(new Error("超出使用限制，请联系管理员"));
+          return;
+        }
+        fetch(
+          `https://restapi.amap.com/v3/assistant/inputtips?key=${window._AMapLoaderTemp.serverKey}&keywords=${search}&city=${cityCode}`,
+          {
+            mode: "cors",
+          },
+        )
+          .then((res) => res.json())
+          .then((res) => {
+            if (res.status === "1") {
+              resolve(
+                res.tips?.map((it) => {
+                  const [lng, lat] = it.location?.split(",");
+
+                  return {
+                    ...it,
+                    label: it.name,
+                    value: it.id,
+                    lng: +lng,
+                    lon: +lng,
+                    lat: +lat,
+                  };
+                }),
+              );
+            } else {
+              console.warn("Warn getSearchTips fetch: ", res);
+              reject(new Error(res.info));
+            }
+          })
+          .catch(reject);
+      } else {
+        reject(result);
+      }
+    });
+  });
+}

package/src/components/TreeCheckbox/common/utils.ts

@@ -46,6 +46,8 @@ export type optT = {
 export function transformTreeData(treeData = [], opt: optT = {}) {
   const { resList = [], preCol = 0, mergeLast, level = 0, childrenKey = "children" } = opt || {};
   let maxCol = preCol + 1;
+  // 统计当前项包含的最大行数（当前项的行数等于所有子项行数之和），用于合并行的值
+  let maxRow = 0;
 
   // 是否有子项
   let hasChildren = false;
@@ -61,71 +63,58 @@ export function transformTreeData(treeData = [], opt: optT = {}) {
     return {
       resList,
       maxCol,
+      // 合并之后视为 1 行
+      maxRow: 1,
     };
   }
 
   treeData.forEach((it, i) => {
-    const children = it[childrenKey] || [];
+    const item = { ...it };
+    const children = item[childrenKey] || [];
     const childrenLen = children?.length;
     // 当 mergeLast !== true && children 长度大于1时，子项下标大于 0 的项需要另起一行，同时补充之前空的列。
     if (i > 0) {
-      resList.push(fillArrByPush(preCol));
+      resList.push(fillArrByPush(preCol, [], { content: false }));
     }
     lastRowIdx = resList.length > 0 ? resList.length - 1 : 0;
     // 解决首次进来第一行数组空的问题
     if (!resList[lastRowIdx]) {
       resList[lastRowIdx] = [];
     }
-    resList[lastRowIdx].push({ ...it });
+    resList[lastRowIdx].push(item);
     if (childrenLen > 0) {
-      const res = transformTreeData(children, { ...opt, resList, preCol: preCol + 1, level: level + 1 });
-      maxCol = res.maxCol;
+      const res = transformTreeData(children, {
+        ...opt,
+        resList,
+        preCol: preCol + 1,
+        level: level + 1,
+      });
+      if (maxCol < res.maxCol) {
+        maxCol = res.maxCol;
+      }
+      // 当前的最大行数加上子项的行数
+      maxRow = maxRow + res.maxRow;
+      // 每项的最大行数为子项的最大行数之和
+      item._maxRow = res.maxRow;
+    } else {
+      item._maxRow = 1;
+      maxRow += 1;
     }
   });
+
   return {
     resList,
     maxCol,
+    maxRow,
   };
 }
 
-export function fillArrByPush(len, arr = []) {
+export function fillArrByPush(len, arr = [], opt: any = {}) {
+  const { content } = opt || {};
   if (arr.length < len) {
     for (let i = arr.length; i < len; i++) {
-      arr.push(null);
+      arr.push(content);
     }
   }
   return arr;
 }
-
-const d = [
-  {
-    key: 1,
-    label: 1,
-    value: 1,
-    children: [
-      { key: 11, label: 11, value: 11 },
-      { key: 12, label: 12, value: 12 },
-    ],
-  },
-  {
-    key: 2,
-    label: 2,
-    value: 2,
-    children: [
-      {
-        key: 21,
-        label: 21,
-        value: 21,
-        children: [
-          { key: 211, label: 211, value: 211 },
-          { key: 212, label: 212, value: 212 },
-        ],
-      },
-      { key: 22, label: 22, value: 22 },
-      { key: 23, label: 23, value: 23 },
-    ],
-  },
-];
-
-// const res = handleDataSource(d);
-// console.log(JSON.stringify(res, null, 2));

package/src/components/TreeCheckbox/index.tsx

@@ -1,13 +1,15 @@
 import { useMemo } from "react";
 import { Checkbox } from "antd";
+import { useField } from "@formily/react";
 
 import { handleDataSource } from "./common/utils";
 
 import "./index.less";
 
 export const TreeCheckbox = (props) => {
+  const field: any = useField();
   const {
-    dataSource = [],
+    dataSource = field.dataSource || [],
     disabled,
     readOnly,
     value,
@@ -26,10 +28,18 @@ export const TreeCheckbox = (props) => {
         <tbody>
           {showDataSource?.map((row, rowIdx) => {
             return (
-              <tr className="tree-checkbox-row" key={rowIdx}>
+              <tr className={`tree-checkbox-row tree-checkbox-row-${rowIdx}`} key={rowIdx}>
                 {row?.map((col, colIdx) => {
+                  // 隐藏合并项
+                  if (col === false) {
+                    return null;
+                  }
                   return (
-                    <td className="tree-checkbox-col" key={colIdx}>
+                    <td
+                      className={`tree-checkbox-col tree-checkbox-col-${colIdx}`}
+                      key={colIdx}
+                      rowSpan={col?._maxRow > 1 ? col?._maxRow : null}
+                    >
                       {Array.isArray(col) ? (
                         <>
                           {col.map((it) => {

package/src/components/UserSelect/index.tsx

@@ -65,7 +65,7 @@ export const UserSelect: React.FC<UserSelectProps> = observer((props) => {
 
   return (
     <AntdSelect
-      defaultOpen
+      // defaultOpen
       className={styles["user-select"]}
       {...resetProps}
       value={field.value}

package/src/components/index.tsx

@@ -5,5 +5,8 @@ export * from "./Upload";
 export * from "./UserSelect";
 
 export * from "./TreeCheckbox";
+export * from "./DatePicker";
+
+export * from "./LocationPicker";
 
 export { Text };