cnhis-design-vue 3.1.24-beta.6 → 3.1.24-beta.8

package/es/components/scale-view/src/components/formitem/r-upload.js

@@ -1,5 +1,6 @@
 import { defineComponent, reactive, createVNode, resolveComponent, createTextVNode } from 'vue';
 import { NUpload, NUploadDragger, NModal, NIcon, useMessage } from 'naive-ui';
+import { api } from 'v-viewer';
 import { CameraOutline, Add } from '@vicons/ionicons5';
 
 var RUpload = defineComponent({
@@ -41,14 +42,12 @@ var RUpload = defineComponent({
     const type = props.item.type;
     const limitPic = ((_b = (_a = props.item) == null ? void 0 : _a.setting) == null ? void 0 : _b.limitPic) || 1;
     const max = isNaN(limitPic) ? void 0 : +limitPic;
-    let state = reactive({
+    const state = reactive({
       defaultFileList: [],
-      fileList: [],
-      previewVisible: false,
-      previewImage: ""
+      fileList: []
     });
     const handleDef = () => {
-      let value = props.form[props.item.val_key];
+      const value = props.form[props.item.val_key];
       if (!value)
         return;
       value.forEach((v) => {
@@ -61,10 +60,10 @@ var RUpload = defineComponent({
     handleDef();
     const beforeUpload = (info) => {
       var _a2;
-      let {
+      const {
         file: file2
       } = info;
-      let size = ((_a2 = file2.file) == null ? void 0 : _a2.size) || 0;
+      const size = ((_a2 = file2.file) == null ? void 0 : _a2.size) || 0;
       const isJpgOrPng = file2.type === "image/jpeg" || file2.type === "image/png";
       if (!isJpgOrPng) {
         message.error("\u4EC5\u652F\u6301jpeg/png\u683C\u5F0F");
@@ -77,10 +76,10 @@ var RUpload = defineComponent({
     };
     const beforeUploadFile = (info) => {
       var _a2;
-      let {
+      const {
         file: file2
       } = info;
-      let size = ((_a2 = file2.file) == null ? void 0 : _a2.size) || 0;
+      const size = ((_a2 = file2.file) == null ? void 0 : _a2.size) || 0;
       const isLt2M = size / 1024 / 1024 < 50;
       if (!isLt2M) {
         message.error("\u4E0A\u4F20\u56FE\u7247\u9650\u5236\u572850MB\u4EE5\u5185");
@@ -104,13 +103,13 @@ var RUpload = defineComponent({
       }
     };
     const handleUploadFinish = (options) => {
-      let {
+      const {
         event,
         file
       } = options;
       const res = eval("(" + event.target.response + ")");
-      let matchIndex = state.fileList.findIndex((v) => v.uid === file.id);
-      let matchItem = state.fileList[matchIndex];
+      const matchIndex = state.fileList.findIndex((v) => v.uid === file.id);
+      const matchItem = state.fileList[matchIndex];
       if (res.result !== "SUCCESS") {
         file.status = "error";
         matchIndex > -1 && state.fileList.splice(matchIndex, 1);
@@ -123,24 +122,32 @@ var RUpload = defineComponent({
       context.emit("scaleChange", state.fileList, props.item);
     };
     const handleUploadRemove = (options2) => {
-      let {
+      const {
         file: file2
       } = options2;
       if (file2.status === "finished") {
-        let curIndex = state.fileList.findIndex((v) => v.uid === file2.id);
+        const curIndex = state.fileList.findIndex((v) => v.uid === file2.id);
         curIndex > -1 && state.fileList.splice(curIndex, 1);
         context.emit("scaleChange", state.fileList, props.item);
       }
     };
     const handlePreview = (file2) => {
-      let fileList = state.fileList;
+      const fileList = state.fileList;
       if (!fileList.length)
         return;
-      let matchItem2 = fileList.find((v) => v.uid === file2.id);
-      if (!matchItem2)
+      const matchIndex2 = fileList.findIndex((v) => v.uid === file2.id);
+      if (!~matchIndex2)
+        return;
+      const imgs = fileList.map((v) => v.url).filter(Boolean);
+      if (!imgs.length)
         return;
-      state.previewImage = matchItem2.url;
-      state.previewVisible = true;
+      api({
+        images: imgs,
+        options: {
+          toolbar: true,
+          initialViewIndex: matchIndex2
+        }
+      });
     };
     const renderPicture = () => {
       return createVNode(resolveComponent("n-upload"), {
@@ -155,9 +162,10 @@ var RUpload = defineComponent({
         "on-change": handleUploadChange,
         "on-finish": handleUploadFinish,
         "on-remove": handleUploadRemove,
-        "on-preview": handlePreview
+        "on-preview": handlePreview,
+        "show-trigger": !props.isLock
       }, {
-        default: () => [createVNode("div", {
+        default: () => [!props.isLock && createVNode("div", {
           "class": "upload-img-wrap"
         }, [createVNode(NIcon, {
           "class": "prompt-icon",
@@ -177,9 +185,10 @@ var RUpload = defineComponent({
         "on-before-upload": beforeUploadFile,
         "on-change": handleUploadChange,
         "on-finish": handleUploadFinish,
-        "on-remove": handleUploadRemove
+        "on-remove": handleUploadRemove,
+        "show-trigger": !props.isLock
       }, {
-        default: () => [createVNode(resolveComponent("n-upload-dragger"), null, {
+        default: () => [!props.isLock && createVNode(resolveComponent("n-upload-dragger"), null, {
           default: () => [createVNode("div", {
             "class": "dragger-upload-text"
           }, [createVNode(NIcon, {
@@ -190,27 +199,12 @@ var RUpload = defineComponent({
         })]
       });
     };
-    const renderModal = () => {
-      return createVNode(resolveComponent("n-modal"), {
-        "show": state.previewVisible,
-        "onUpdate:show": ($event) => state.previewVisible = $event,
-        "preset": "card",
-        "style": {
-          width: "520px"
-        }
-      }, {
-        default: () => [createVNode("img", {
-          "src": state.previewImage,
-          "style": "width: 100%"
-        }, null)]
-      });
-    };
     const renderDom = () => {
       return createVNode("div", {
         "class": ["c-scale-upload", {
           "scale-upload-file": type === "UPFILE"
         }]
-      }, [type === "UPFILE" && renderFile(), type === "UPPICTURE" && renderPicture(), renderModal()]);
+      }, [type === "UPFILE" && renderFile(), type === "UPPICTURE" && renderPicture()]);
     };
     return () => {
       return renderDom();

package/es/components/scale-view/src/components/formitem/sign-com.d.ts

@@ -0,0 +1,63 @@
+declare const _default: import("vue").DefineComponent<{
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lineWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lineColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    isCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    renderContent: () => JSX.Element;
+    generate: () => Promise<unknown>;
+    reset: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lineWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lineColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    isCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {}, {
+    height: number;
+    width: number;
+    lineWidth: number;
+    lineColor: string;
+    bgColor: string;
+    isCrop: boolean;
+}>;
+export default _default;

package/es/components/scale-view/src/components/formitem/sign-com.js

@@ -0,0 +1,307 @@
+import { defineComponent, ref, reactive, computed, onBeforeMount, onUnmounted, onMounted, createVNode, createTextVNode } from 'vue';
+
+var SignCom = defineComponent({
+  name: "SignCom",
+  props: {
+    width: {
+      type: Number,
+      default: 620
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    lineWidth: {
+      type: Number,
+      default: 4
+    },
+    lineColor: {
+      type: String,
+      default: "#000000"
+    },
+    bgColor: {
+      type: String,
+      default: ""
+    },
+    isCrop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [],
+  setup(props) {
+    const canvasRef = ref(null);
+    const canvasTxt = ref();
+    const resultImg = ref();
+    const hasDrew = ref(false);
+    const drawObj = reactive({
+      points: [],
+      startX: 0,
+      startY: 0,
+      isDrawing: false,
+      sratio: 1
+    });
+    const ratio = computed(() => {
+      return props.height / props.width;
+    });
+    const myBg = computed(() => {
+      return props.bgColor ? props.bgColor : "rgba(255, 255, 255, 0)";
+    });
+    const drawGrid = (context, color, stepx, stepy) => {
+      context.save();
+      context.fillStyle = "white";
+      console.log(context);
+      context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+      context.lineWidth = 0.5;
+      context.strokeStyle = color;
+      for (let i = stepx; i < context.canvas.width; i += stepx) {
+        context.beginPath();
+        context.moveTo(i, 0);
+        context.lineTo(i, context.canvas.height);
+        context.closePath();
+        context.stroke();
+      }
+      for (let j = stepy; j < context.canvas.height; j += stepy) {
+        context.beginPath();
+        context.moveTo(0, j);
+        context.lineTo(context.canvas.width, j);
+        context.closePath();
+        context.stroke();
+      }
+      context.restore();
+    };
+    const drawStart = (obj) => {
+      drawObj.startX = obj.x;
+      drawObj.startY = obj.y;
+      canvasTxt.value.beginPath();
+      canvasTxt.value.moveTo(drawObj.startX, drawObj.startY);
+      canvasTxt.value.lineTo(obj.x, obj.y);
+      canvasTxt.value.lineCap = "round";
+      canvasTxt.value.lineJoin = "round";
+      canvasTxt.value.lineWidth = props.lineWidth * drawObj.sratio;
+      canvasTxt.value.stroke();
+      canvasTxt.value.closePath();
+      drawObj.points.push(obj);
+    };
+    const drawMove = (obj) => {
+      canvasTxt.value.beginPath();
+      canvasTxt.value.moveTo(drawObj.startX, drawObj.startY);
+      canvasTxt.value.lineTo(obj.x, obj.y);
+      canvasTxt.value.strokeStyle = props.lineColor;
+      canvasTxt.value.lineWidth = props.lineWidth * drawObj.sratio;
+      canvasTxt.value.lineCap = "round";
+      canvasTxt.value.lineJoin = "round";
+      canvasTxt.value.stroke();
+      canvasTxt.value.closePath();
+      drawObj.startY = obj.y;
+      drawObj.startX = obj.x;
+      drawObj.points.push(obj);
+    };
+    const drawEnd = (obj) => {
+      canvasTxt.value.beginPath();
+      canvasTxt.value.moveTo(drawObj.startX, drawObj.startY);
+      canvasTxt.value.lineCap = "round";
+      canvasTxt.value.lineJoin = "round";
+      canvasTxt.value.stroke();
+      canvasTxt.value.closePath();
+      drawObj.points.push(obj);
+      drawObj.points.push({
+        x: -1,
+        y: -1
+      });
+    };
+    const mouseDown = (e) => {
+      e.preventDefault();
+      drawObj.isDrawing = true;
+      hasDrew.value = true;
+      const obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      };
+      drawStart(obj);
+    };
+    const mouseMove = (e) => {
+      e.preventDefault();
+      if (!drawObj.isDrawing)
+        return;
+      const obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      };
+      drawMove(obj);
+    };
+    const mouseUp = (e) => {
+      e.preventDefault();
+      const obj = {
+        x: e.offsetX,
+        y: e.offsetY
+      };
+      drawEnd(obj);
+      drawObj.isDrawing = false;
+    };
+    const touchStart = (e) => {
+      e.preventDefault();
+      hasDrew.value = true;
+      if (e.touches.length === 1) {
+        const obj = {
+          x: e.targetTouches[0].clientX - canvasRef.value.getBoundingClientRect().left,
+          y: e.targetTouches[0].clientY - canvasRef.value.getBoundingClientRect().top
+        };
+        drawStart(obj);
+      }
+    };
+    const touchMove = (e) => {
+      e.preventDefault();
+      if (e.touches.length !== 1)
+        return;
+      const obj = {
+        x: e.targetTouches[0].clientX - canvasRef.value.getBoundingClientRect().left,
+        y: e.targetTouches[0].clientY - canvasRef.value.getBoundingClientRect().top
+      };
+      drawMove(obj);
+    };
+    const touchEnd = (e) => {
+      e.preventDefault();
+      if (e.touches.length !== 1)
+        return;
+      const obj = {
+        x: e.targetTouches[0].clientX - canvasRef.value.getBoundingClientRect().left,
+        y: e.targetTouches[0].clientY - canvasRef.value.getBoundingClientRect().top
+      };
+      drawEnd(obj);
+    };
+    const getCropArea = (imgData) => {
+      let topX = canvasRef.value.width;
+      let btmX = 0;
+      let topY = canvasRef.value.height;
+      let btnY = 0;
+      for (let i = 0; i < canvasRef.value.width; i++) {
+        for (let j = 0; j < canvasRef.value.height; j++) {
+          const pos = (i + canvasRef.value.width * j) * 4;
+          if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
+            btnY = Math.max(j, btnY);
+            btmX = Math.max(i, btmX);
+            topY = Math.min(j, topY);
+            topX = Math.min(i, topX);
+          }
+        }
+      }
+      topX++;
+      btmX++;
+      topY++;
+      btnY++;
+      const data = [topX, topY, btmX, btnY];
+      return data;
+    };
+    const getImgSize = (url) => {
+      const strLength = url.length;
+      const strNum = strLength - strLength / 8 * 2;
+      return Math.floor(strNum);
+    };
+    const randomId = () => {
+      const str = Math.random() * 1e10 + "";
+      return parseInt(str).toString(36);
+    };
+    const generate = () => {
+      const pm = new Promise((resolve, reject) => {
+        if (!hasDrew.value) {
+          reject("Warning: Not Signned!");
+          return;
+        }
+        const resImgData = canvasTxt.value.getImageData(0, 0, canvasRef.value.width, canvasRef.value.height);
+        canvasTxt.value.globalCompositeOperation = "destination-over";
+        canvasTxt.value.fillStyle = myBg.value;
+        canvasTxt.value.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+        let resultImg2 = canvasRef.value.toDataURL();
+        canvasTxt.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+        canvasTxt.value.putImageData(resImgData, 0, 0);
+        canvasTxt.value.globalCompositeOperation = "source-over";
+        if (props.isCrop) {
+          const crop_area = getCropArea(resImgData.data);
+          let crop_canvas = document.createElement("canvas");
+          const crop_ctx = crop_canvas.getContext("2d");
+          crop_canvas.width = crop_area[2] - crop_area[0];
+          crop_canvas.height = crop_area[3] - crop_area[1];
+          const crop_imgData = canvasTxt.value.getImageData(...crop_area);
+          for (let i = 0; i < crop_imgData.data.length; i += 4) {
+            if (crop_imgData.data[i] > 200) {
+              crop_imgData.data[i] = 255;
+              crop_imgData.data[i + 1] = 255;
+              crop_imgData.data[i + 2] = 255;
+              crop_imgData.data[i + 3] = 255;
+            }
+          }
+          crop_ctx.globalCompositeOperation = "destination-over";
+          crop_ctx.putImageData(crop_imgData, 0, 0);
+          crop_ctx.fillStyle = myBg.value;
+          crop_ctx.fillRect(0, 0, crop_canvas.width, crop_canvas.height);
+          resultImg2 = crop_canvas.toDataURL();
+          crop_canvas = null;
+        }
+        const obj = {
+          name: randomId(),
+          url: resultImg2,
+          size: getImgSize(resultImg2)
+        };
+        resolve(obj);
+      });
+      return pm;
+    };
+    const reset = () => {
+      canvasTxt.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+      drawGrid(canvasTxt.value, "rgb(240, 240, 240)", 16, 16);
+      drawObj.points = [];
+      hasDrew.value = false;
+      resultImg.value = "";
+    };
+    const resizeHandler = () => {
+      canvasRef.value.style.width = props.width + "px";
+      const realw = parseFloat(window.getComputedStyle(canvasRef.value).width);
+      canvasRef.value.style.height = ratio.value * realw + "px";
+      canvasTxt.value = canvasRef.value.getContext("2d");
+      canvasTxt.value.globalAlpha = 1;
+    };
+    onBeforeMount(() => {
+      window.addEventListener("resize", resizeHandler);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", resizeHandler);
+    });
+    onMounted(() => {
+      canvasRef.value.height = props.height;
+      canvasRef.value.width = props.width;
+      resizeHandler();
+      drawGrid(canvasTxt.value, "rgb(240, 240, 240)", 16, 16);
+      document.onmouseup = () => {
+        drawObj.isDrawing = false;
+      };
+    });
+    const renderCanvas = () => {
+      return createVNode("canvas", {
+        "class": "sign-canvas",
+        "ref": canvasRef,
+        "onMousedown": mouseDown,
+        "onMousemove": mouseMove,
+        "onMouseup": mouseUp,
+        "onTouchstart": touchStart,
+        "onTouchmove": touchMove,
+        "onTouchend": touchEnd
+      }, null);
+    };
+    const renderContent = () => {
+      return createVNode("div", {
+        "class": "sign-com-wrap"
+      }, [createVNode("span", null, [createTextVNode("\u63D0\u793A\uFF1A\u8BF7\u5728\u4EE5\u4E0B\u533A\u57DF\u5185\u7B7E\u540D\uFF0CPC\u7535\u8111\u8BBE\u5907\u4F7F\u7528\u9F20\u6807\u7B7E\u5B57\u3002")]), renderCanvas()]);
+    };
+    return {
+      renderContent,
+      generate,
+      reset
+    };
+  },
+  render() {
+    return this.renderContent();
+  }
+});
+
+export { SignCom as default };

package/es/components/scale-view/src/components/formitem/standard-modal.d.ts

@@ -0,0 +1,80 @@
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    changeSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modalWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    handleOk: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    cancel: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "update:visible")[], "onClose" | "update:visible", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    changeSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modalWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    modalHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    handleOk: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    cancel: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onOnClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+}, {
+    closable: boolean;
+    visible: boolean;
+    handleOk: Function;
+    title: string | Function;
+    modalWidth: string;
+    modalHeight: string;
+    changeSize: boolean;
+    cancel: Function;
+}>;
+export default _default;