hy-dispatch-ui-v3 0.1.6 → 0.2.1

package/lib/components/appCutter/appCutter.vue.js

@@ -6,9 +6,8 @@ var vue = require('vue');
 var vueCropper = require('vue-cropper');
 var elementPlus = require('element-plus');
 var iconsVue = require('@element-plus/icons-vue');
+var file = require('../../utils/file.js');
 var index = require('../appDialog/index.js');
-var is = require('../../utils/is.js');
-var file$1 = require('../../utils/file.js');
 var useLocale = require('../../hooks/useLocale.js');
 
 import "vue-cropper/dist/index.css";
@@ -20,9 +19,10 @@ const __default__ = vue.defineComponent({
 });
 const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   props: /* @__PURE__ */ vue.mergeModels({
-    dialogWidth: { type: [String, Number], default: 1e3 },
     defaultImg: { type: String },
+    // 默认展示图片
     uploadText: {
+      // 上传文本
       type: String,
       default: () => {
         const { t } = useLocale.useLocale();
@@ -30,24 +30,49 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
     },
     showUpload: { type: Boolean, default: true },
+    // 是否显示上传模块
     showText: { type: Boolean, default: true },
+    // 是否显示上传提示文本
     showDelete: { type: Boolean, default: true },
+    // 是否显示删除按钮
     maxSize: { type: Number, default: 1024 * 1024 * 2 },
+    // 限制上传文件大小
     accept: { type: String, default: "image/png,image/jpg,image/jpeg,image/gif" },
+    // 限制上传文件类型
     info: { type: Boolean, default: true },
+    // 裁剪框的大小信息
     outputSize: { type: Number, default: 1 },
+    // 裁剪生成图片的质量
     outputType: { type: String, default: "jpeg" },
+    // 裁剪生成图片的格式
     autoCrop: { type: Boolean, default: true },
+    // 是否默认生成截图框
     autoCropWidth: { type: Number, default: 100 },
+    // 默认生成截图框宽度
     autoCropHeight: { type: Number, default: 100 },
+    // 默认生成截图框高度
     fixedBox: { type: Boolean, default: false },
+    // 固定截图框大小 不允许改变
     fixed: { type: Boolean, default: true },
+    // 是否开启截图框宽高固定比例
     fixedNumber: { type: Array },
+    // 截图框的宽高比例
     full: { type: Boolean, default: true },
+    // 是否输出原图比例的截图
     canMoveBox: { type: Boolean, default: false },
+    // 截图框能否拖动
     original: { type: Boolean, default: false },
+    // 上传图片按照原始比例渲染
     centerBox: { type: Boolean, default: true },
-    infoTrue: { type: Boolean, default: false }
+    // 截图框是否被限制在图片里面
+    infoTrue: { type: Boolean, default: false },
+    // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    readonly: { type: Boolean, default: false },
+    // 是否只读
+    directTransmission: { type: Boolean, default: true },
+    // 是否使用直传接口
+    onClose: Function,
+    onCancel: Function
   }, {
     "modelValue": { type: String },
     "modelModifiers": {}
@@ -96,30 +121,24 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       // 上传图片按照原始比例渲染
       centerBox: props.centerBox,
       // 截图框是否被限制在图片里面
-      infoTrue: props.infoTrue
+      infoTrue: props.infoTrue,
       // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+      ...customOptions.value
     }));
-    function openFilePicker(param, name = "img.png") {
-      if (typeof param === "string") {
-        openCutter(param, name);
-        return;
-      }
-      if (is.isFile(param)) {
-        beforeAvatarUpload(file);
-        return;
-      }
-      uploadRef.value.click();
-    }
-    async function beforeAvatarUpload(file2) {
-      const limit = file2.size < props.maxSize;
+    const customOptions = vue.ref({});
+    let customSubmit = null;
+    let customCancel = null;
+    let customClose = null;
+    async function beforeAvatarUpload(file$1) {
+      const limit = file$1.size < props.maxSize;
       if (!limit) {
         elementPlus.ElMessage.error(
-          t("cutter.uploadPictureLimit", [file$1.sizeToTextHandler(props.maxSize)])
+          t("cutter.uploadPictureLimit", [file.sizeToTextHandler(props.maxSize)])
         );
         return false;
       }
-      const result = await file$1.blobToDataURL(file2);
-      openCutter(result, file2.name);
+      const result = await file.blobToDataURL(file$1);
+      openCutter(result, file$1.name);
       return false;
     }
     function openCutter(src, name) {
@@ -138,16 +157,22 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     async function onSubmitHandler() {
       return new Promise((resolve, reject) => {
         cropperRef.value.getCropBlob(async (data) => {
-          var _a, _b;
           data.name = fileInfo.value.name;
-          const res = await file$1.fileUpload(data).catch((res2) => {
-            elementPlus.ElMessage.error(res2.msg || res2);
-            reject();
-          });
+          const res = await file.fileUpload(data, props.directTransmission).catch(
+            (res2) => {
+              elementPlus.ElMessage.error(res2.msg || res2);
+              reject();
+            }
+          );
           if (res.code === 200) {
-            imgSrc.value = await file$1.blobToDataURL(data);
-            modelValue.value = ((_a = res.data) == null ? void 0 : _a.key) || ((_b = res.data) == null ? void 0 : _b.url) || res.data;
-            emits("confirm", res);
+            const url = await file.blobToDataURL(data);
+            const key = res.data?.key || res.data?.url || res.data;
+            imgSrc.value = url;
+            modelValue.value = key;
+            if (customSubmit) {
+              await customSubmit({ url, key });
+            }
+            emits("confirm", { url, key });
             resolve();
           } else {
             elementPlus.ElMessage.error(res.msg || res);
@@ -156,119 +181,167 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         });
       });
     }
+    async function onCancelHandler() {
+      if (customCancel) {
+        return await customCancel();
+      }
+      if (props.onCancel) {
+        return await props.onCancel();
+      }
+    }
+    async function onCloseHandler() {
+      if (customCancel) {
+        return await customClose();
+      }
+      if (props.onClose) {
+        return await props.onClose();
+      }
+    }
     __expose({
-      open: openFilePicker,
+      open: async (params) => {
+        const {
+          url,
+          fileName = "img.png",
+          options: options2,
+          file: file$1,
+          onSubmit,
+          onCancel,
+          onClose
+        } = params || {};
+        if (file$1) {
+          const result = await file.blobToDataURL(file$1);
+          openCutter(result, file$1.name);
+        } else if (url) {
+          openCutter(url, fileName);
+        } else {
+          uploadRef.value.click();
+        }
+        customOptions.value = options2 || {};
+        customClose = async () => {
+          if (onClose) {
+            await onClose();
+          }
+          customOptions.value = {};
+        };
+        customCancel = async () => {
+          if (onCancel) {
+            await onCancel();
+          }
+          customOptions.value = {};
+        };
+        customSubmit = async (value) => {
+          await onSubmit(value);
+          customOptions.value = {};
+        };
+      },
       clear: onClearHandler
     });
     return (_ctx, _cache) => {
-      const _component_User = vue.resolveComponent("User");
       return vue.openBlock(), vue.createElementBlock("div", { class: "inline-block" }, [
-        vue.withDirectives(vue.createVNode(
-          vue.unref(elementPlus.ElUpload),
-          {
-            accept: ".png,.jpg,.gif,.jpeg",
-            "before-upload": beforeAvatarUpload,
-            action: "",
-            class: "upload_box",
-            "show-file-list": false
-          },
-          {
-            default: vue.withCtx(() => [
-              vue.createElementVNode(
-                "div",
-                {
-                  ref_key: "uploadRef",
-                  ref: uploadRef,
-                  class: "app-cutter-upload-box"
-                },
-                [
-                  vue.renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
-                    vue.createElementVNode(
-                      "div",
-                      {
-                        class: "app-cutter-upload-card",
+        vue.withDirectives(vue.createVNode(vue.unref(elementPlus.ElUpload), {
+          accept: ".png,.jpg,.gif,.jpeg",
+          "before-upload": beforeAvatarUpload,
+          action: "",
+          class: "upload_box",
+          "show-file-list": false,
+          disabled: __props.readonly
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "uploadRef",
+                ref: uploadRef,
+                class: "app-cutter-upload-box"
+              },
+              [
+                vue.renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: "app-cutter-upload-card",
+                      style: vue.normalizeStyle({
+                        width: `${__props.autoCropWidth}px`,
+                        height: `${__props.autoCropHeight}px`
+                      })
+                    },
+                    [
+                      modelValue.value && imageSrc.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElImage), {
+                        key: 0,
+                        src: imageSrc.value,
                         style: vue.normalizeStyle({
                           width: `${__props.autoCropWidth}px`,
                           height: `${__props.autoCropHeight}px`
                         })
-                      },
-                      [
-                        modelValue.value && imageSrc.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElImage), {
-                          key: 0,
-                          src: imageSrc.value,
-                          style: vue.normalizeStyle({
-                            width: `${__props.autoCropWidth}px`,
-                            height: `${__props.autoCropHeight}px`
+                      }, null, 8, ["src", "style"])) : (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
+                          vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                            color: "rgb(var(--hy-auxiliary))",
+                            size: "64"
+                          }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(vue.unref(iconsVue.User))
+                            ]),
+                            _: 1
+                            /* STABLE */
                           })
-                        }, null, 8, ["src", "style"])) : (vue.openBlock(), vue.createElementBlock(
-                          vue.Fragment,
-                          { key: 1 },
-                          [
-                            vue.createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
-                            vue.createVNode(vue.unref(elementPlus.ElIcon), {
-                              color: "rgb(var(--hy-auxiliary))",
-                              size: "64"
-                            }, {
-                              default: vue.withCtx(() => [
-                                vue.createVNode(_component_User)
-                              ]),
-                              _: 1
-                              /* STABLE */
-                            })
-                          ],
-                          2112
-                          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                        ))
-                      ],
-                      4
-                      /* STYLE */
-                    )
-                  ]),
-                  __props.uploadText && __props.showText ? (vue.openBlock(), vue.createElementBlock(
-                    "div",
-                    {
-                      key: 0,
-                      class: "app-cutter-tip"
-                    },
-                    vue.toDisplayString(__props.uploadText),
-                    1
-                    /* TEXT */
-                  )) : vue.createCommentVNode("v-if", true),
-                  __props.showDelete ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                    key: 1,
-                    class: "app-cutter-delete",
-                    onClick: vue.withModifiers(($event) => onClearHandler(), ["stop"])
-                  }, [
-                    vue.createCommentVNode(' <AppIcon svg-name="delete" /> '),
-                    vue.createVNode(vue.unref(elementPlus.ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.Delete))
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    })
-                  ], 8, ["onClick"])), [
-                    [vue.vShow, modelValue.value]
-                  ]) : vue.createCommentVNode("v-if", true)
-                ],
-                512
-                /* NEED_PATCH */
-              )
-            ]),
-            _: 3
-            /* FORWARDED */
-          },
-          512
-          /* NEED_PATCH */
-        ), [
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ]),
+                __props.uploadText && __props.showText ? (vue.openBlock(), vue.createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: "app-cutter-tip"
+                  },
+                  vue.toDisplayString(__props.uploadText),
+                  1
+                  /* TEXT */
+                )) : vue.createCommentVNode("v-if", true),
+                __props.showDelete ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  class: "app-cutter-delete",
+                  onClick: vue.withModifiers(($event) => onClearHandler(), ["stop"])
+                }, [
+                  vue.createCommentVNode(' <AppIcon svg-name="delete" /> '),
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.Delete))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ], 8, ["onClick"])), [
+                  [vue.vShow, modelValue.value]
+                ]) : vue.createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["disabled"]), [
           [vue.vShow, __props.showUpload]
         ]),
-        vue.createVNode(vue.unref(index.AppDialog), {
+        vue.createVNode(vue.unref(index.AppDialog), vue.mergeProps({
           modelValue: visible.value,
           "onUpdate:modelValue": ($event) => visible.value = $event,
-          title: vue.unref(t)("cutter.imageSegmentation"),
+          title: vue.unref(t)("cutter.imageSegmentation")
+        }, _ctx.$attrs, {
+          onClose: onCloseHandler,
+          onCancel: onCancelHandler,
           onSubmit: onSubmitHandler
-        }, {
+        }), {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", { class: "h-[500px]" }, [
               vue.createVNode(vue.unref(vueCropper.VueCropper), vue.mergeProps({
@@ -280,7 +353,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "onUpdate:modelValue", "title"])
+        }, 16, ["modelValue", "onUpdate:modelValue", "title"])
       ]);
     };
   }

package/lib/components/appDatePicker/appDatePicker.vue.js

@@ -65,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         startValue.value = value[0] ? `${value[0]}${isFill ? " 00:00:00" : ""}` : null;
         endValue.value = value[1] ? `${value[1]}${isFill ? " 23:59:59" : ""}` : null;
       } else {
-        dateValue.value = isFill && (value == null ? void 0 : value.length) ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
+        dateValue.value = isFill && value?.length ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
       }
       emits("change", dateValue.value);
     }