hy-dispatch-ui-v3 0.1.5 → 0.1.6

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

@@ -0,0 +1,289 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var vueCropper = require('vue-cropper');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+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";
+
+import "./style/appCutter.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppCutter"
+});
+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();
+        return t("cutter.uploadPicture");
+      }
+    },
+    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 }
+  }, {
+    "modelValue": { type: String },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["confirm"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const modelValue = vue.useModel(__props, "modelValue");
+    const cropperRef = vue.useTemplateRef("cropperRef");
+    const uploadRef = vue.useTemplateRef("uploadRef");
+    const visible = vue.ref(false);
+    const imgSrc = vue.ref();
+    const fileInfo = vue.ref({
+      name: "",
+      src: ""
+    });
+    const imageSrc = vue.computed(() => imgSrc.value || props.defaultImg);
+    const options = vue.computed(() => ({
+      info: props.info,
+      // 裁剪框的大小信息
+      outputSize: props.outputSize,
+      // 裁剪生成图片的质量
+      outputType: props.outputType,
+      // 裁剪生成图片的格式
+      canScale: props.canScale,
+      // 图片是否允许滚轮缩放
+      autoCrop: props.autoCrop,
+      // 是否默认生成截图框
+      autoCropWidth: props.autoCropWidth,
+      // 默认生成截图框宽度
+      autoCropHeight: props.autoCropHeight,
+      // 默认生成截图框高度
+      fixedBox: props.fixedBox,
+      // 固定截图框大小 不允许改变
+      fixed: props.fixed,
+      // 是否开启截图框宽高固定比例
+      fixedNumber: props.fixedNumber,
+      // 截图框的宽高比例
+      full: props.full,
+      // 是否输出原图比例的截图
+      canMoveBox: props.canMoveBox,
+      // 截图框能否拖动
+      original: props.original,
+      // 上传图片按照原始比例渲染
+      centerBox: props.centerBox,
+      // 截图框是否被限制在图片里面
+      infoTrue: props.infoTrue
+      // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    }));
+    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;
+      if (!limit) {
+        elementPlus.ElMessage.error(
+          t("cutter.uploadPictureLimit", [file$1.sizeToTextHandler(props.maxSize)])
+        );
+        return false;
+      }
+      const result = await file$1.blobToDataURL(file2);
+      openCutter(result, file2.name);
+      return false;
+    }
+    function openCutter(src, name) {
+      visible.value = true;
+      fileInfo.value.src = src;
+      fileInfo.value.name = name;
+    }
+    function onClearHandler() {
+      imgSrc.value = "";
+      modelValue.value = null;
+      fileInfo.value = {
+        name: "",
+        src: ""
+      };
+    }
+    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();
+          });
+          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);
+            resolve();
+          } else {
+            elementPlus.ElMessage.error(res.msg || res);
+            reject();
+          }
+        });
+      });
+    }
+    __expose({
+      open: openFilePicker,
+      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",
+                        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(_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 */
+        ), [
+          [vue.vShow, __props.showUpload]
+        ]),
+        vue.createVNode(vue.unref(index.AppDialog), {
+          modelValue: visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          title: vue.unref(t)("cutter.imageSegmentation"),
+          onSubmit: onSubmitHandler
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", { class: "h-[500px]" }, [
+              vue.createVNode(vue.unref(vueCropper.VueCropper), vue.mergeProps({
+                ref_key: "cropperRef",
+                ref: cropperRef,
+                img: fileInfo.value.src
+              }, options.value), null, 16, ["img"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["modelValue", "onUpdate:modelValue", "title"])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appCutter/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appCutter = require('./appCutter.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppCutter = handler.withInstall(appCutter.default);
+
+exports.AppCutter = AppCutter;
+exports.default = AppCutter;

package/lib/components/appCutter/style/appCutter.scss

@@ -0,0 +1,51 @@
+.app-cutter-upload-box {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  .app-cutter-delete {
+    width: 100%;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: -23px;
+    z-index: 3;
+    transition: all 0.3s;
+    background: rgba(0, 0, 0, 0.6);
+  }
+  .app-cutter-tip {
+    width: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    font-size: 14px;
+    color: rgb(var(--hy-theme));
+    text-align: center;
+    user-select: none;
+    opacity: 0;
+    transition: all 0.3s;
+  }
+  &:hover {
+    .app-cutter-delete {
+      bottom: 0;
+    }
+    .app-cutter-tip {
+      opacity: 1;
+    }
+  }
+  .app-cutter-upload-card {
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(var(--hy-border));
+    border-radius: 4px;
+    background-color: rgb(var(--hy-background-2));
+    position: relative;
+  }
+}

package/lib/components/appDialog/appDialog.vue.js

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var iconsVue = require('@element-plus/icons-vue');
+var useLocale = require('../../hooks/useLocale.js');
+var index = require('../appButton/index.js');
+
+import "./style/appDialog.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppDialog"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    title: { type: String, default: "\u6807\u9898" },
+    titleAlign: { type: String, default: "default" },
+    // default、center
+    showClose: { type: Boolean, default: true },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelType: {
+      type: String,
+      default: "default"
+    },
+    cancelText: {
+      type: String
+    },
+    showSubmit: {
+      type: Boolean,
+      default: true
+    },
+    submitType: {
+      type: String,
+      default: "primary"
+    },
+    submitText: {
+      type: String
+    },
+    onClose: Function,
+    onCancel: Function,
+    onSubmit: Function
+  }, {
+    "modelValue": { type: Boolean, default: false },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["hide"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const visible = vue.useModel(__props, "modelValue");
+    const loading = vue.ref(false);
+    async function onSubmitHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onSubmit) {
+        try {
+          await props.onSubmit();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    async function onCancelHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onCancel) {
+        try {
+          await props.onCancel();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    async function onCloseHandler() {
+      if (loading.value) return;
+      loading.value = true;
+      if (props.onClose) {
+        try {
+          await props.onClose();
+        } catch (err) {
+          console.error(err);
+          loading.value = false;
+          return;
+        }
+      }
+      visible.value = false;
+      loading.value = false;
+      emits("hide");
+    }
+    __expose({});
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDialog), vue.mergeProps({
+        modelValue: visible.value,
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "append-to-body": true,
+        "close-on-click-modal": false,
+        "close-on-press-escape": false,
+        "show-close": false,
+        width: "37.5rem"
+      }, _ctx.$attrs), {
+        header: vue.withCtx(() => [
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["box-border w-full border-0 border-b border-solid border-background-3 px-4 py-[10px] text-main text-sm font-bold flex justify-between items-center relative", { "!justify-center": __props.titleAlign === "center" }])
+            },
+            [
+              vue.createElementVNode(
+                "span",
+                null,
+                vue.toDisplayString(__props.title),
+                1
+                /* TEXT */
+              ),
+              __props.showClose ? (vue.openBlock(), vue.createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: vue.normalizeClass(["text-lg absolute right-4 cursor-pointer text-danger-2", { "cursor-not-allowed": loading.value }]),
+                  onClick: onCloseHandler
+                },
+                [
+                  vue.createCommentVNode(' <AppIcon svg-name="close" class="!w-[20px] !h-[20px]" /> '),
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                    size: "18",
+                    color: "rgb(var(--hy-danger-2))"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.CircleClose))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ],
+                2
+                /* CLASS */
+              )) : vue.createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", { class: "text-main" }, [
+            vue.createElementVNode("div", { class: "p-6 box-border" }, [
+              vue.renderSlot(_ctx.$slots, "default"),
+              vue.createElementVNode("div", { class: "flex items-center justify-between pt-5" }, [
+                __props.showCancel ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppButton), {
+                  key: 0,
+                  type: __props.cancelType,
+                  disabled: loading.value,
+                  class: "!min-w-[120px]",
+                  onClick: onCancelHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(vue.unref(t)("dialog.cancel")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["type", "disabled"])) : vue.createCommentVNode("v-if", true),
+                __props.showSubmit ? (vue.openBlock(), vue.createBlock(vue.unref(index.AppButton), {
+                  key: 1,
+                  type: __props.submitType,
+                  disabled: loading.value,
+                  class: "!min-w-[120px]",
+                  onClick: onSubmitHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(vue.unref(t)("dialog.confirm")),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["type", "disabled"])) : vue.createCommentVNode("v-if", true)
+              ])
+            ])
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["modelValue", "onUpdate:modelValue"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appDialog/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appDialog = require('./appDialog.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppDialog = handler.withInstall(appDialog.default);
+
+exports.AppDialog = AppDialog;
+exports.default = AppDialog;

package/lib/components/appTable/appTable.vue.js

@@ -540,7 +540,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
               vue.createElementVNode(
                 "div",
                 { class: "absolute left-4 top-1/2 transform -translate-y-1/2 text-sm" },
-                vue.toDisplayString(vue.unref(t)("table.aTotalOfPiecesOfData", [100])),
+                vue.toDisplayString(vue.unref(t)("table.aTotalOfPiecesOfData", [vue.unref(totalElements)])),
                 1
                 /* TEXT */
               ),

package/lib/components/index.js

@@ -1,39 +1,43 @@
 'use strict';
 
-var index$9 = require('./appOrgCascader/index.js');
+var index$b = require('./appOrgCascader/index.js');
 var index$2 = require('./appConfirmDialog/index.js');
-var index$3 = require('./appDatePicker/index.js');
-var index$4 = require('./appForm/index.js');
-var index$5 = require('./appIcon/index.js');
-var index$6 = require('./appIconBox/index.js');
-var index$a = require('./appSearch/index.js');
-var index$b = require('./appTable/index.js');
-var index$c = require('./appTooltip/index.js');
+var index$4 = require('./appDatePicker/index.js');
+var index$6 = require('./appForm/index.js');
+var index$7 = require('./appIcon/index.js');
+var index$8 = require('./appIconBox/index.js');
+var index$c = require('./appSearch/index.js');
+var index$d = require('./appTable/index.js');
+var index$e = require('./appTooltip/index.js');
 var index$1 = require('./appConfigProvider/index.js');
 var index = require('./appButton/index.js');
-var index$d = require('./appUserAvatar/index.js');
-var index$7 = require('./appNoPermissions/index.js');
-var index$8 = require('./appNoPermissionsMap/index.js');
+var index$f = require('./appUserAvatar/index.js');
+var index$9 = require('./appNoPermissions/index.js');
+var index$a = require('./appNoPermissionsMap/index.js');
+var index$3 = require('./appCutter/index.js');
+var index$5 = require('./appDialog/index.js');
 var useAppForm = require('./appForm/js/useAppForm.js');
 var useAppSearch = require('./appSearch/js/useAppSearch.js');
 var useAppTable = require('./appTable/js/useAppTable.js');
 
 
 
-exports.AppOrgCascader = index$9.AppOrgCascader;
+exports.AppOrgCascader = index$b.AppOrgCascader;
 exports.AppConfirmDialog = index$2.AppConfirmDialog;
-exports.AppDatePicker = index$3.AppDatePicker;
-exports.AppForm = index$4.AppForm;
-exports.AppIcon = index$5.AppIcon;
-exports.AppIconBox = index$6.AppIconBox;
-exports.AppSearch = index$a.AppSearch;
-exports.AppTable = index$b.AppTable;
-exports.AppTooltip = index$c.AppTooltip;
+exports.AppDatePicker = index$4.AppDatePicker;
+exports.AppForm = index$6.AppForm;
+exports.AppIcon = index$7.AppIcon;
+exports.AppIconBox = index$8.AppIconBox;
+exports.AppSearch = index$c.AppSearch;
+exports.AppTable = index$d.AppTable;
+exports.AppTooltip = index$e.AppTooltip;
 exports.AppConfigProvider = index$1.AppConfigProvider;
 exports.AppButton = index.AppButton;
-exports.AppUserAvatar = index$d.AppUserAvatar;
-exports.AppNoPermissions = index$7.AppNoPermissions;
-exports.AppNoPermissionsMap = index$8.AppNoPermissionsMap;
+exports.AppUserAvatar = index$f.AppUserAvatar;
+exports.AppNoPermissions = index$9.AppNoPermissions;
+exports.AppNoPermissionsMap = index$a.AppNoPermissionsMap;
+exports.AppCutter = index$3.AppCutter;
+exports.AppDialog = index$5.AppDialog;
 exports.useAppForm = useAppForm.useAppForm;
 exports.useAppSearch = useAppSearch.useAppSearch;
 exports.useAppTable = useAppTable.useAppTable;

package/lib/hooks/useApi.js

@@ -2,10 +2,12 @@
 
 var axios = require('axios');
 var vue = require('vue');
+var useGlobalConfig = require('./useGlobalConfig.js');
 
 const localApiKey = /* @__PURE__ */ Symbol("localApiKey");
 const defaultAxios = vue.ref(
   axios.create({
+    baseURL: "/api/admin",
     withCredentials: false,
     timeout: 6e4
   })
@@ -20,8 +22,10 @@ defaultAxios.value.interceptors.response.use(
   }
 );
 const useApi = () => {
-  const api = vue.inject(localApiKey, defaultAxios);
-  return { api: vue.unref(api) ? api : defaultAxios };
+  var _a;
+  const api = vue.inject(localApiKey, vue.ref());
+  const globalConfig = useGlobalConfig.useGlobalConfig();
+  return { api: vue.unref(api) ? api : ((_a = vue.unref(globalConfig)) == null ? void 0 : _a.api) || defaultAxios };
 };
 
 exports.defaultAxios = defaultAxios;