@skyfox2000/webui 1.4.21 → 1.4.22

package/src/components/form/upload/uploadList.vue

@@ -79,6 +79,10 @@ export interface UploadListProps {
     * 是否显示删除
     */
    showDelete?: boolean;
+   /**
+    * 是否显示目录上传按钮
+    */
+   showFolderUpload?: boolean;
 }
 
 const props = withDefaults(defineProps<UploadListProps>(), {
@@ -93,6 +97,7 @@ const props = withDefaults(defineProps<UploadListProps>(), {
    showActionText: true,
    showOnlineSwitch: false,
    showDelete: true,
+   showFolderUpload: false,
 });
 
 const inputFactory = useInputFactory();
@@ -105,6 +110,7 @@ const displayList = ref<UploadFile[]>(props.fileList);
 const uploadList = ref<UploadFile[]>([]);
 
 const fileUploader = ref();
+const fileFolderUploader = ref();
 const emit = defineEmits(['update:file-list']);
 const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
 
@@ -137,11 +143,30 @@ const isMaxCountReached = (): boolean => {
 const prepareFileInfo = (file: any): UploadFile<any> => {
    const fileInfo = file as UploadFile<any>;
    if (!fileInfo.params) fileInfo.params = {};
+   
+   // 获取相对路径（只有目录上传时才有）
+   let relativePath = fileInfo.name;
+   if (fileInfo.webkitRelativePath) {
+      relativePath = fileInfo.webkitRelativePath;
+   }
+   
+   // 对于目录上传，使用相对路径作为文件名，保持目录结构
+   if (fileInfo.webkitRelativePath) {
+      fileInfo.name = fileInfo.webkitRelativePath;
+      fileInfo.fileName = fileInfo.webkitRelativePath.split('/').pop(); // 只取文件名部分
+   }
+   
    fileInfo.params.FileKey = fileInfo.name;
    if (props.parentPath) {
       fileInfo.params.FileKey = path.join('/', props.parentPath, fileInfo.name);
    }
    fileInfo.status = UploadStatus.Pending;
+   
+   // 保存相对路径用于显示（只有目录上传时才使用）
+   if (fileInfo.webkitRelativePath) {
+      fileInfo.relativePath = relativePath;
+   }
+   
    return fileInfo;
 };
 
@@ -231,6 +256,19 @@ const uploadProps = computed<UploadProps>(() => ({
    },
 }));
 
+const folderUploadProps = computed<UploadProps>(() => ({
+   accept: acceptString.value,
+   multiple: true,
+   directory: true,  // 添加标准属性
+   webkitdirectory: true,  // Webkit属性
+   fileList: [] as UploadProps['fileList'],
+   'onUpdate:fileList': (newFiles) => handleFileSelect(newFiles),
+   beforeUpload: () => false,
+   listType: 'text',
+   showUploadList: false,
+   customRequest: () => {},
+}));
+
 watch(
    () => props.fileList,
    (newVal) => {
@@ -375,11 +413,15 @@ const getStatus = (status?: UploadStatus) => {
 <template>
    <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5" :class="[errInfo?.errClass]">
       <div class="flex items-center justify-between w-full">
-         <div class="w-35 mx-3">
+         <div class="w-35 mx-3 flex gap-2">
             <Upload ref="fileUploader" v-bind="uploadProps"
                v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
                <Button :class="[errInfo?.errClass + '-text']">选择文件</Button>
             </Upload>
+            <Upload v-if="showFolderUpload" ref="fileFolderUploader" :webkitdirectory="true" :directory="true" v-bind="folderUploadProps"
+               v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
+               <Button :class="[errInfo?.errClass + '-text']">选择目录</Button>
+            </Upload>
          </div>
          <div class="flex-1 text-sm text-gray-500" :class="[errInfo?.errClass + '-text']">
             {{ getPlaceholder() }}
@@ -387,11 +429,12 @@ const getStatus = (status?: UploadStatus) => {
       </div>
 
       <div class="mt-4 px-3">
-         <div v-for="(file, index) in displayList" :key="index" class="mb-2 pb-1">
+         <div v-for="(file, index) in displayList" :key="(props.parentPath || '') + (file.relativePath || file.name || index)" class="mb-2 pb-1">
             <div class="flex items-center justify-between">
                <div class="flex items-center">
                   <span class="text-gray-700 mr-2"
-                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']">{{ file.fileName ?? file.name
+                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']" 
+                     :title="file.relativePath || file.fileName || file.name">{{ file.fileName ?? file.name
                      }}</span>
                   <span>
                      <Tag :color="getStatusColor(file.status)">{{ getStatus(file.status) }}</Tag>

package/src/components/index.ts

@@ -19,6 +19,8 @@ export {
    Drawer,
    Form,
    FormItem,
+   List,
+   ListOperate,
    Search,
    SearchItem,
    Table,

package/src/const/options.ts

@@ -1,8 +1,10 @@
+import { OptionItemProps } from '@/typings/option';
+
 /**
  * 静态选项
  */
 export class OPTIONS {
-   private static dict: Record<string, Record<string, any>[]> = {};
+   private static dict: Record<string, (Record<string, any> | OptionItemProps)[]> = {};
    static Keys = {
       EnableDisable: 'EnableDisable',
       SuccessResult: 'SuccessResult',
@@ -18,6 +20,14 @@ export class OPTIONS {
    static getOptions = (key: string) => {
       return OPTIONS.dict[key];
    };
+   /**
+    * 静态选择项列表
+    * @param key 名称
+    * @returns
+    */
+   static getOptionItems = (key: string) => {
+      return OPTIONS.dict[key] as OptionItemProps[];
+   };
    /**
     * 静态选择项对象
     * @param key 名称

package/src/index.ts

@@ -258,6 +258,8 @@ export {
    InputIcon,
    InputPassword,
    InputNumber,
+   List,
+   ListOperate,
    PropEditor,
    type PropConfigItem,
    Radio,

package/src/typings/upload.d.ts

@@ -137,6 +137,16 @@ export interface UploadFile<T = AjaxResponse> {
     * minio文件信息
     */
    minioFile?: MinioFile;
+
+   /**
+    * 相对路径（目录上传时使用）
+    */
+   relativePath?: string;
+
+   /**
+    * 文件的相对路径（浏览器原生属性）
+    */
+   webkitRelativePath?: string;
 }
 
 /**

package/lib/assets/modules/uploadList-D8scq04c.js

@@ -1,423 +0,0 @@
-import { defineComponent as ae, ref as P, computed as D, watch as B, resolveDirective as ie, createElementBlock as d, openBlock as u, normalizeClass as $, unref as n, createElementVNode as h, withDirectives as y, createBlock as re, mergeProps as le, withCtx as w, createVNode as p, createTextVNode as z, toDisplayString as T, Fragment as ce, renderList as ue, createCommentVNode as C } from "vue";
-import { _ as pe } from "./index-Ch3meKe4.js";
-import { a as A, _ as I } from "./toolIcon-Dd58W0UM.js";
-import { httpPost as K, ResStatus as j } from "@skyfox2000/fapi";
-import { L as V, u as q, v as de, _ as me } from "./upload-template-Csccple9.js";
-import { U as i, f as fe, p as Q } from "./file-upload-Bu6FkNjZ.js";
-import { combineParams as G } from "@skyfox2000/microbase";
-import _ from "vue-m-message";
-import "async-validator";
-import "dayjs";
-import { Upload as he, Tag as ve, Popconfirm as xe, Progress as ye } from "ant-design-vue";
-import "vue-draggable-next";
-import { _ as we } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Ce = (l, U) => {
-  const t = document.createElement("a"), m = URL.createObjectURL(l);
-  t.href = m, t.download = U, t.style.display = "none", document.body.appendChild(t), t.click(), URL.revokeObjectURL(m), document.body.removeChild(t);
-}, _e = (l, U, t) => {
-  try {
-    t && (l.api || (l.api = t.api), l.authorize === void 0 && (l.authorize = t.authorize));
-    const m = G(l.params, U);
-    return K(l, m).then((c) => {
-      if ((c == null ? void 0 : c.status) === j.SUCCESS && c.data) {
-        const s = c.data, S = s.Content, F = s.Key.split("/").pop(), g = atob(S), k = [];
-        for (let E = 0; E < g.length; E++)
-          k.push(g.charCodeAt(E));
-        const x = new Blob([new Uint8Array(k)], {
-          type: s.Type
-        });
-        Ce(x, F);
-      } else if ((c == null ? void 0 : c.errno) == V) {
-        q().logout(!1);
-        return;
-      } else
-        _.error("下载文件失败！");
-    });
-  } catch (m) {
-    console.error("下载失败:", m), _.error("文件下载失败，请稍后重试");
-  }
-}, Ue = ["xlsx", "xls", "csv", "txt"], Se = (l, U, t) => {
-  const m = U.split(".").pop();
-  if (Ue.includes(m))
-    console.log(l);
-  else
-    return _.error("文件类型不支持预览"), !1;
-  const c = G(l.params, t);
-  return K(l, c).then((s) => {
-    if ((s == null ? void 0 : s.status) === j.SUCCESS && s.data) {
-      const F = s.data.Content, g = atob(F), k = [];
-      for (let x = 0; x < g.length; x++)
-        k.push(g.charCodeAt(x));
-    } else if ((s == null ? void 0 : s.errno) == V) {
-      q().logout(!1);
-      return;
-    } else
-      _.error("文件预览失败！");
-  });
-}, ge = { class: "flex items-center justify-between w-full" }, be = { class: "w-35 mx-3" }, ke = { class: "mt-4 px-3" }, Fe = { class: "flex items-center justify-between" }, Ee = { class: "flex items-center" }, Oe = { class: "flex items-center" }, ze = {
-  key: 0,
-  class: "mr-2"
-}, Le = {
-  key: 1,
-  class: "flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
-}, Pe = ["onClick"], $e = {
-  key: 2,
-  class: "flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
-}, Ae = ["onClick"], Be = {
-  key: 3,
-  class: "flex items-center text-red-500 hover:text-red-700 cursor-pointer"
-}, Te = ["onClick"], Ie = {
-  key: 0,
-  class: "text-sm text-nowrap"
-}, Ke = { key: 0 }, je = /* @__PURE__ */ ae({
-  __name: "uploadList",
-  props: {
-    autoUpload: { type: Boolean, default: !1 },
-    uploadUrl: {},
-    downloadUrl: {},
-    previewUrl: {},
-    deleteUrl: {},
-    fileList: { default: () => [] },
-    placeholder: { default: "" },
-    fileExt: {},
-    maxFileSize: { default: 20 },
-    maxCount: { default: 5 },
-    maxCountTip: { type: Boolean, default: !1 },
-    maxFileSizeTip: { type: Boolean, default: !0 },
-    fileExtTip: { type: Boolean, default: !0 },
-    parentPath: {},
-    showActionText: { type: Boolean, default: !0 },
-    showOnlineSwitch: { type: Boolean, default: !1 },
-    showDelete: { type: Boolean, default: !0 }
-  },
-  emits: ["update:file-list"],
-  setup(l, { emit: U }) {
-    const t = l, m = de(), { errInfo: c } = m, s = P(t.fileList), S = P([]), F = P(), g = U, k = D(() => {
-      var e;
-      return (e = t.fileExt) != null && e.length ? t.fileExt.map((o) => `.${o}`).join(",") : "";
-    }), x = (e) => {
-      var o;
-      if (t.fileExt && t.fileExt.length > 0) {
-        const r = ((o = e.name.split(".").pop()) == null ? void 0 : o.toLowerCase()) || "";
-        if (!t.fileExt.includes(r))
-          return _.error("文件类型不支持"), !1;
-      }
-      return e.size / 1024 / 1024 > t.maxFileSize ? (_.error(`文件大小超过 ${t.maxFileSize}MB 限制`), !1) : !0;
-    }, E = () => t.maxCount > 1 && s.value.length >= t.maxCount, H = (e) => {
-      const o = e;
-      return o.params || (o.params = {}), o.params.FileKey = o.name, t.parentPath && (o.params.FileKey = Q.join("/", t.parentPath, o.name)), o.status = i.Pending, o;
-    }, J = (e) => x(e) && t.autoUpload, W = async (e) => {
-      if (e.length === 0) return;
-      const o = [...s.value];
-      let r = !1;
-      for (const O of e) {
-        if (!x(O)) {
-          r = !0;
-          continue;
-        }
-        const b = H(O);
-        if (t.maxCount === 1) {
-          o.length = 0, o.push(b);
-          break;
-        }
-        if (E()) {
-          _.error(`最多上传 ${t.maxCount} 个文件`), r = !0;
-          break;
-        }
-        const a = o.findIndex(
-          (f) => f.name === b.name
-        );
-        a > -1 ? o[a] = b : o.push(b);
-      }
-      (!r || o.length > 0) && (s.value = o), S.value = [];
-    }, X = (e) => {
-      S.value = e, W(e);
-    }, Y = D(() => ({
-      accept: k.value,
-      multiple: t.maxCount !== 1,
-      fileList: S.value,
-      "onUpdate:fileList": X,
-      beforeUpload: J,
-      listType: "text",
-      showUploadList: !1,
-      customRequest: async () => {
-        if (t.autoUpload && t.uploadUrl)
-          for (const e of s.value)
-            e.percent === 0 && e.status === i.Pending && await fe(t.uploadUrl, e);
-      }
-    }));
-    B(
-      () => t.fileList,
-      (e) => {
-        s.value = e;
-      },
-      { deep: !0, immediate: !0 }
-    ), B(
-      () => s.value,
-      (e) => {
-        g("update:file-list", e);
-      },
-      { deep: !0 }
-    ), B(
-      () => t.parentPath,
-      (e) => {
-        e && s.value.forEach((o) => {
-          o.params.FileKey = Q.join("/", e, o.fileName);
-        });
-      }
-    );
-    const M = (e) => {
-      const o = s.value[e].minioFile, r = {
-        api: t.downloadUrl.api,
-        authorize: t.downloadUrl.authorize,
-        url: t.downloadUrl.url,
-        params: {
-          Query: {
-            FileKey: o.Key
-          }
-        }
-      };
-      _e(r);
-    }, Z = (e) => {
-      e.minioFile && (e.minioFile.Status = e.status);
-    }, N = (e) => {
-      const o = s.value[e].minioFile, r = {
-        api: t.previewUrl.api,
-        authorize: t.previewUrl.authorize,
-        url: t.previewUrl.url,
-        params: {
-          Query: {
-            FileKey: o.Key
-          }
-        }
-      };
-      Se(r, o.FileName);
-    }, R = (e) => {
-      const o = s.value[e];
-      t.deleteUrl && o.minioFile && o.minioFile.Key ? K(t.deleteUrl, {
-        Query: {
-          FileKey: o.minioFile.Key
-        }
-      }).then((r) => {
-        r && r.status === j.SUCCESS && (_.success("删除文件成功！"), s.value.splice(e, 1));
-      }) : s.value.splice(e, 1), L.value = -1;
-    }, L = P(-1), ee = (e, o) => {
-      if (L.value = e, o === i.Pending) {
-        R(e);
-        return;
-      }
-    }, te = (e) => e === L.value, oe = () => {
-      const e = t.fileExt && t.fileExt.length && t.fileExtTip ? `文件必须为 ${t.fileExt.join("/")}` : "", o = t.maxFileSize !== 0 && t.maxFileSizeTip ? `单文件最大 ${t.maxFileSize}MB` : "", r = t.maxCount !== 0 && t.maxCountTip ? `最多 ${t.maxCount} 个文件` : "";
-      return [o, e, r].filter(Boolean).join("，");
-    }, ne = (e) => {
-      switch (e) {
-        case i.Uploading:
-          return "blue";
-        case i.Success:
-          return "green";
-        case i.Error:
-          return "red";
-        case i.Online:
-          return "green";
-        case i.Offline:
-          return "pink";
-        default:
-          return "cyan";
-      }
-    }, se = (e) => {
-      switch (e) {
-        case i.Uploading:
-          return "上传中";
-        case i.Success:
-          return "上传完成";
-        case i.Error:
-          return "上传失败";
-        case i.Online:
-          return "在线";
-        case i.Offline:
-          return "已下线";
-        default:
-          return "待上传";
-      }
-    };
-    return (e, o) => {
-      var O, b;
-      const r = ie("auth");
-      return u(), d("div", {
-        class: $(["w-full border border-solid border-gray-100 mt-1 rounded-md py-5", [(O = n(c)) == null ? void 0 : O.errClass]])
-      }, [
-        h("div", ge, [
-          h("div", be, [
-            y((u(), re(n(he), le({
-              ref_key: "fileUploader",
-              ref: F
-            }, Y.value), {
-              default: w(() => {
-                var a;
-                return [
-                  p(n(pe), {
-                    class: $([((a = n(c)) == null ? void 0 : a.errClass) + "-text"])
-                  }, {
-                    default: w(() => o[1] || (o[1] = [
-                      z("选择文件")
-                    ])),
-                    _: 1,
-                    __: [1]
-                  }, 8, ["class"])
-                ];
-              }),
-              _: 1
-            }, 16)), [
-              [r, { role: ["Super", "Admin"], permit: ":uploadlist:upload" }]
-            ])
-          ]),
-          h("div", {
-            class: $(["flex-1 text-sm text-gray-500", [((b = n(c)) == null ? void 0 : b.errClass) + "-text"]])
-          }, T(oe()), 3)
-        ]),
-        h("div", ke, [
-          (u(!0), d(ce, null, ue(s.value, (a, f) => (u(), d("div", {
-            key: f,
-            class: "mb-2 pb-1"
-          }, [
-            h("div", Fe, [
-              h("div", Ee, [
-                h("span", {
-                  class: $(["text-gray-700 mr-2", [a.status == n(i).Offline ? "line-through" : ""]])
-                }, T(a.fileName ?? a.name), 3),
-                h("span", null, [
-                  p(n(ve), {
-                    color: ne(a.status)
-                  }, {
-                    default: w(() => [
-                      z(T(se(a.status)), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["color"])
-                ])
-              ]),
-              h("div", Oe, [
-                e.showOnlineSwitch && (a.status == n(i).Online || a.status == n(i).Offline) ? (u(), d("div", ze, [
-                  p(n(A), { title: "上线或下线" }, {
-                    default: w(() => [
-                      y(p(n(me), {
-                        checked: a.status,
-                        "onUpdate:checked": (v) => a.status = v,
-                        data: [
-                          { label: "上线", value: n(i).Online },
-                          { label: "下线", value: n(i).Offline }
-                        ],
-                        onChange: (v) => Z(a)
-                      }, null, 8, ["checked", "onUpdate:checked", "data", "onChange"]), [
-                        [r, { role: ["Super", "Admin"], permit: ":uploadlist:online" }]
-                      ])
-                    ]),
-                    _: 2
-                  }, 1024)
-                ])) : C("", !0),
-                e.downloadUrl && (a.status == n(i).Online || a.status == n(i).Offline) ? (u(), d("div", Le, [
-                  p(n(A), { title: "下载" }, {
-                    default: w(() => [
-                      y(p(n(I), {
-                        icon: "icon-download",
-                        clickable: "",
-                        onClick: (v) => M(f)
-                      }, null, 8, ["onClick"]), [
-                        [r, { role: ["Super", "Admin"], permit: ":uploadlist:download" }]
-                      ]),
-                      e.showActionText ? y((u(), d("span", {
-                        key: 0,
-                        class: "mr-2 text-sm text-nowrap",
-                        onClick: (v) => M(f)
-                      }, o[2] || (o[2] = [
-                        z("下载")
-                      ]), 8, Pe)), [
-                        [r, { role: ["Super", "Admin"], permit: ":uploadlist:download" }]
-                      ]) : C("", !0)
-                    ]),
-                    _: 2
-                  }, 1024)
-                ])) : C("", !0),
-                e.previewUrl && (a.status == n(i).Online || a.status == n(i).Offline) ? (u(), d("div", $e, [
-                  p(n(A), { title: "预览" }, {
-                    default: w(() => [
-                      y(p(n(I), {
-                        icon: "icon-eye",
-                        clickable: "",
-                        onClick: (v) => N(f)
-                      }, null, 8, ["onClick"]), [
-                        [r, { role: ["Super", "Admin"], permit: ":uploadlist:preview" }]
-                      ]),
-                      e.showActionText ? y((u(), d("span", {
-                        key: 0,
-                        class: "mr-2 text-sm text-nowrap",
-                        onClick: (v) => N(f)
-                      }, o[3] || (o[3] = [
-                        z("预览")
-                      ]), 8, Ae)), [
-                        [r, { role: ["Super", "Admin"], permit: ":uploadlist:preview" }]
-                      ]) : C("", !0)
-                    ]),
-                    _: 2
-                  }, 1024)
-                ])) : C("", !0),
-                e.showDelete !== !1 ? (u(), d("div", Be, [
-                  p(n(xe), {
-                    open: te(f),
-                    cancelText: "否",
-                    okText: "是",
-                    title: "确定删除该文件吗？",
-                    okButtonProps: { size: "small" },
-                    cancelButtonProps: { size: "small" },
-                    onConfirm: (v) => R(f),
-                    onCancel: o[0] || (o[0] = (v) => L.value = -1)
-                  }, {
-                    default: w(() => [
-                      p(n(A), { title: "删除" }, {
-                        default: w(() => [
-                          h("div", {
-                            onClick: (v) => ee(f, a.status)
-                          }, [
-                            y(p(n(I), {
-                              icon: "icon-new",
-                              angle: 45,
-                              clickable: ""
-                            }, null, 512), [
-                              [r, { role: ["Super", "Admin"], permit: ":uploadlist:delete" }]
-                            ]),
-                            e.showActionText ? y((u(), d("span", Ie, o[4] || (o[4] = [
-                              z("删除")
-                            ]))), [
-                              [r, { role: ["Super", "Admin"], permit: ":uploadlist:delete" }]
-                            ]) : C("", !0)
-                          ], 8, Te)
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ]),
-                    _: 2
-                  }, 1032, ["open", "onConfirm"])
-                ])) : C("", !0)
-              ])
-            ]),
-            a.status !== n(i).Online && a.status !== n(i).Offline && a.status !== n(i).Success ? (u(), d("div", Ke, [
-              p(n(ye), {
-                percent: a.percent,
-                "stroke-width": 2,
-                "show-info": !1,
-                style: { height: "2px" }
-              }, null, 8, ["percent"])
-            ])) : C("", !0)
-          ]))), 128))
-        ])
-      ], 2);
-    };
-  }
-}), Ze = /* @__PURE__ */ we(je, [["__scopeId", "data-v-063bdf08"]]);
-export {
-  Ue as C,
-  Ze as U,
-  _e as a,
-  Ce as d,
-  Se as p
-};