zy-react-library 1.0.96 → 1.0.98

package/components/FormBuilder/FormBuilder.js

@@ -59,12 +59,12 @@ const FormBuilder = (props) => {
                       {submitButtonText}
                     </Button>
                   )}
+                  {extraActionButtons}
                   {showCancelButton && (
                     <Button onClick={handleCancel}>
                       {cancelButtonText}
                     </Button>
                   )}
-                  {extraActionButtons}
                 </Space>
               )}
             </Col>

package/components/Map/MapSelector.d.ts

@@ -22,6 +22,8 @@ export interface MapSelectorProps {
   area?: string;
   /** 是否显示所属区域 */
   showArea?: boolean;
+  /** 是否只查看 */
+  disable?: boolean;
   /** 确认选择回调 */
   onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void;
 }

package/components/Map/MapSelector.js

@@ -13,6 +13,7 @@ const MapSelector = (props) => {
     onConfirm,
     area = "",
     showArea = false,
+    disable = false,
   } = props;
 
   const mapContainerRef = useRef(null);
@@ -66,14 +67,16 @@ const MapSelector = (props) => {
         }
 
         // 添加点击事件
-        map.addEventListener("click", (event) => {
-          map.clearOverlays();
-          const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
-          const marker = new window.BMapGL.Marker(point);
-          map.addOverlay(marker);
-          setCurrentLatitude(event.latlng.lat);
-          setCurrentLongitude(event.latlng.lng);
-        });
+        if (!disable) {
+          map.addEventListener("click", (event) => {
+            map.clearOverlays();
+            const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
+            const marker = new window.BMapGL.Marker(point);
+            map.addOverlay(marker);
+            setCurrentLatitude(event.latlng.lat);
+            setCurrentLongitude(event.latlng.lng);
+          });
+        }
       }
 
       setLoading(false);
@@ -149,10 +152,19 @@ const MapSelector = (props) => {
       open={visible}
       title="坐标"
       onCancel={handleClose}
-      onOk={handleConfirm}
       width={1000}
       destroyOnHidden={false}
       afterClose={handleAfterClose}
+      footer={[
+        <Button key="back" onClick={handleClose}>
+          取消
+        </Button>,
+        !disable && (
+          <Button key="submit" type="primary" onClick={handleConfirm}>
+            确定
+          </Button>
+        ),
+      ]}
     >
       <Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
         {
@@ -169,20 +181,24 @@ const MapSelector = (props) => {
             </Row>
           )
         }
-        <Row gutter={24}>
-          <Col span={12}>
-            <Form.Item label="关键字搜索">
-              <Input value={localSearch} onChange={e => setLocalSearch(e.target.value)} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label=" " colon={false}>
-              <Button type="primary" onClick={handleLocalSearch}>
-                搜索
-              </Button>
-            </Form.Item>
-          </Col>
-        </Row>
+        {
+          !disable && (
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item label="关键字搜索">
+                  <Input value={localSearch} onChange={e => setLocalSearch(e.target.value)} allowClear />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item label=" " colon={false}>
+                  <Button type="primary" onClick={handleLocalSearch}>
+                    搜索
+                  </Button>
+                </Form.Item>
+              </Col>
+            </Row>
+          )
+        }
         <Row gutter={24}>
           <Col span={12}>
             <Form.Item label="经度">

package/components/Signature/index.d.ts

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+
+export interface SignatureValue {
+  /** 签字时间，YYYY-MM-DD HH:mm:ss */
+  time: string;
+  /** 签字图片的base64编码 */
+  base64: string;
+}
+
+export interface SignatureProps {
+  /** 确认签字回调 */
+  onConfirm: (value: SignatureValue) => void;
+  /** 签字区域宽度，默认为 752 */
+  width?: number;
+  /** 签字区域高度，默认为 300 */
+  height?: number;
+}
+
+/**
+ * 签字组件
+ */
+declare const Signature: FC<SignatureProps>;
+
+export default Signature;

package/components/Signature/index.js

@@ -0,0 +1,87 @@
+import { Button, Image, message, Modal } from "antd";
+import dayjs from "dayjs";
+import { useRef, useState } from "react";
+import SignatureCanvas from "react-signature-canvas";
+import { base642File } from "../../utils";
+
+/**
+ * 签字组件
+ */
+function Signature(props) {
+  const {
+    onConfirm,
+    width = 752,
+    height = 300,
+    ...restProps
+  } = props;
+
+  const [signatureModalOpen, setSignatureModalOpen] = useState(false);
+  const signatureCanvas = useRef(null);
+  const [base64, setBase64] = useState("");
+
+  const onOk = () => {
+    if (signatureCanvas.current.isEmpty()) {
+      message.warning("请签名");
+      return;
+    }
+    const base64 = signatureCanvas.current.toDataURL();
+    setBase64(base64);
+    onConfirm({
+      time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+      base64,
+      file: base642File(base64),
+    });
+    signatureCanvas.current.clear();
+    setSignatureModalOpen(false);
+  };
+
+  return (
+    <>
+      <div>
+        <Button
+          type="primary"
+          onClick={() => {
+            setSignatureModalOpen(true);
+          }}
+        >
+          {base64 ? "重新签字" : "手写签字"}
+        </Button>
+      </div>
+      {base64 && (
+        <div style={{ border: "1px dashed #d9d9d9", width, height, marginTop: 16 }}>
+          <Image src={base64} />
+        </div>
+      )}
+      <Modal
+        title="签字"
+        width={800}
+        open={signatureModalOpen}
+        onCancel={() => setSignatureModalOpen(false)}
+        footer={[
+          <Button key="clear" onClick={() => signatureCanvas.current.clear()}>重签</Button>,
+          <Button
+            key="cancel"
+            onClick={() => {
+              setSignatureModalOpen(false);
+              signatureCanvas.current.clear();
+            }}
+          >
+            取消
+          </Button>,
+          <Button key="ok" type="primary" onClick={onOk}>确定</Button>,
+        ]}
+      >
+        <div style={{ border: "1px dashed #d9d9d9" }}>
+          <SignatureCanvas
+            ref={signatureCanvas}
+            penColor="black"
+            canvasProps={{ width, height }}
+            {...restProps}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default Signature;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.96",
+  "version": "1.0.98",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",
@@ -31,6 +31,7 @@
     "dayjs": "^1.11.18",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",
-    "react-pdf": "^10.2.0"
+    "react-pdf": "^10.2.0",
+    "react-signature-canvas": "^1.1.0-alpha.2"
   }
 }

package/utils/index.d.ts

@@ -261,6 +261,11 @@ export function getIndexColumn(pagination: false | BasePaginationConfig): {
  */
 export function getFileUrl(): string;
 
+/**
+ * base64转File对象
+ */
+export function base642File(base64: string, filename?: string): File;
+
 /**
  * 获取树形节点路径
  */

package/utils/index.js

@@ -61,6 +61,23 @@ export function image2Base642(file) {
   });
 }
 
+/**
+ base64转File对象
+ */
+export function base642File(base64, filename = "file") {
+  const arr = base64.split(",");
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, { type: mime });
+}
+
 /**
  * 判断图片是否可访问成功
  */