@skyfox2000/webui 1.3.15 → 1.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.3.15",
+   "version": "1.3.17",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/form/select/index.vue

@@ -40,8 +40,20 @@ const props = defineProps({
       type: String as PropType<string>,
       required: false,
    },
+   /**
+    * 清空时设置的值
+    * -  false，则清空时设置为 null
+    * -  true，则清空时设置为 undefined
+    */
+   undefValue: {
+      type: Boolean,
+      default: false,
+   },
 });
 
+// 如果初始value为undefined，自动设置undefValue为true
+const undefVal = props.value === undefined ? true : props.undefValue;
+
 const inputFactory = useInputFactory();
 const { editorCtrl, errInfo, labelText } = inputFactory;
 
@@ -63,11 +75,10 @@ const url = ref<IUrlInfo>({
    loadingText: false,
 });
 
-const defaultVal = ref(props.value);
 const placeholder = ref(attrs.placeholder);
 
 /// 避免类型错误
-const innerValue = ref<string | number | string[] | number[] | undefined>(optionCtrl?.selected.value || undefined);
+const innerValue = ref<SelectValue>(optionCtrl?.selected.value as SelectValue);
 const emit = defineEmits(['change', 'update:value', 'update:label', 'update:labels']);
 inputFactory.inputEmit = emit;
 
@@ -96,13 +107,13 @@ const updateInnerValue = (newVal: OptionItemProps[]) => {
          const item = newVal[i];
 
          if (item.disabled === undefined || item.disabled === false) {
-            innerValue.value = item.value;
+            innerValue.value = item.value as SelectValue;
             break;
          }
       }
    } else if (newVal.length > 0) {
       // 当选项加载完成后，设置实际的 value 值
-      innerValue.value = props.value === null ? undefined : props.value;
+      innerValue.value = (props.value === null ? undefined : props.value) as SelectValue;
    }
    if (newVal.length > 0 && innerValue.value !== undefined) onChanged(innerValue.value);
 };
@@ -119,7 +130,7 @@ if (optionCtrl) {
    watch(
       () => optionCtrl.selected.value,
       (newVal) => {
-         innerValue.value = newVal;
+         innerValue.value = newVal as SelectValue;
       },
    );
 }
@@ -140,21 +151,23 @@ watch(
    { immediate: true },
 );
 
+// 监听值变化
+watch(
+   () => props.value,
+   (newVal) => {
+      innerValue.value = newVal as SelectValue;
+   },
+   { immediate: true },
+);
 watch(
    () => innerValue.value,
    (newVal) => {
+      // 保存原始值用于update:value事件
+      const emitValue = newVal === undefined ? (undefVal ? undefined : null) : newVal;
       if (optionCtrl) {
-         optionCtrl.selected.value = newVal;
+         optionCtrl.selected.value = emitValue;
       }
-      // 保存原始值用于update:value事件
-      const emitValue = newVal === undefined ? null : newVal;
 
-      if (attrs.mode === 'multiple') {
-         if (isEmpty(newVal) && isEmpty(defaultVal.value)) {
-            emit('update:value', defaultVal.value);
-            return;
-         }
-      }
       emit('update:value', emitValue);
    },
 );

package/src/components/layout/page/baseLayout.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { Layout, LayoutSider } from 'ant-design-vue';
+import Tooltip from '../../common/tooltip/index.vue';
+import Icon from '../../common/icon/index.vue';
+import Menu from '../menu/index.vue';
+import Header from '../header/index.vue';
+import MenuTabs from '../menu/menuTabs.vue';
+import AppIcon from '../../common/icon/appicon.vue';
+import { useAppInfo, usePageInfo, useSettingInfo } from '@/index';
+import message from 'vue-m-message';
+
+const props = defineProps<{ routes: any }>();
+
+const appInfoStore = useAppInfo();
+const settingInfoStore = useSettingInfo();
+const pageInfoStore = usePageInfo();
+
+onMounted(() => {
+   message.closeAll();
+});
+</script>
+<template>
+   <Layout class="h-screen">
+      <LayoutSider class="overflow-auto h-screen left-0 top-0 bottom-0"
+         v-model:collapsed="settingInfoStore.menuCollapse" collapsible v-if="!settingInfoStore.fullscreen">
+         <div
+            class="h-[40px] max-h-[40px] bg-[rgba(240,240,240,0.2)] flex flex-nowrap items-center justify-center text-white font-bold text-lg overflow-hidden text-ellipsis">
+            <Tooltip :title="settingInfoStore.menuCollapse ? appInfoStore.appInfo.Name : ''" placement="right">
+               <Icon v-if="appInfoStore.appInfo.Icon?.startsWith('sym-')" :icon="appInfoStore.appInfo.Icon"
+                  fontsize="30px" size="26px" />
+               <AppIcon v-else :icon="appInfoStore.appInfo.Icon" class="mx-1" />
+            </Tooltip>
+            <span v-if="!settingInfoStore.menuCollapse" class="ml-[10px]">{{ appInfoStore.appInfo.Name }}</span>
+         </div>
+         <Menu :routes="props.routes"></Menu>
+      </LayoutSider>
+      <Layout class="overflow-y-auto block">
+         <Header v-if="!settingInfoStore.fullscreen"></Header>
+         <MenuTabs v-if="pageInfoStore.TabEnabled"></MenuTabs>
+         <slot></slot>
+      </Layout>
+   </Layout>
+</template>

package/src/components/layout/page/basicLayout.vue

@@ -1,20 +1,13 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
-import { Layout, LayoutSider } from 'ant-design-vue';
-import Tooltip from '../../common/tooltip/index.vue';
-import Icon from '../../common/icon/index.vue';
-import Menu from '../menu/index.vue';
-import Header from '../header/index.vue';
-import MenuTabs from '../menu/menuTabs.vue';
-import AppIcon from '../../common/icon/appicon.vue';
-import { useAppInfo, usePageInfo, useSettingInfo } from '@/index';
+import BaseLayout from './baseLayout.vue';
+import { useAppInfo, useSettingInfo } from '@/index';
 import message from 'vue-m-message';
 
 const props = defineProps<{ routes: any }>();
 
 const appInfoStore = useAppInfo();
 const settingInfoStore = useSettingInfo();
-const pageInfoStore = usePageInfo();
 
 const bodyClass = ref('h-[calc(100vh-80px)]');
 watch(
@@ -29,39 +22,13 @@ onMounted(() => {
 });
 </script>
 <template>
-   <Layout class="h-screen">
-      <LayoutSider
-         class="overflow-auto h-screen left-0 top-0 bottom-0"
-         v-model:collapsed="settingInfoStore.menuCollapse"
-         collapsible
-         v-if="!settingInfoStore.fullscreen"
-      >
-         <div
-            class="h-[40px] max-h-[40px] bg-[rgba(240,240,240,0.2)] flex flex-nowrap items-center justify-center text-white font-bold text-lg overflow-hidden text-ellipsis"
-         >
-            <Tooltip :title="settingInfoStore.menuCollapse ? appInfoStore.appInfo.Name : ''" placement="right">
-               <Icon
-                  v-if="appInfoStore.appInfo.Icon?.startsWith('sym-')"
-                  :icon="appInfoStore.appInfo.Icon"
-                  fontsize="30px"
-                  size="26px"
-               />
-               <AppIcon v-else :icon="appInfoStore.appInfo.Icon" class="mx-1" />
-            </Tooltip>
-            <span v-if="!settingInfoStore.menuCollapse" class="ml-[10px]">{{ appInfoStore.appInfo.Name }}</span>
-         </div>
-         <Menu :routes="props.routes"></Menu>
-      </LayoutSider>
-      <Layout class="overflow-y-auto block">
-         <Header v-if="!settingInfoStore.fullscreen"></Header>
-         <MenuTabs v-if="pageInfoStore.TabEnabled"></MenuTabs>
-         <div class="relative overflow-y-auto" :class="bodyClass">
-            <router-view v-slot="{ Component, route }">
-               <keep-alive :include="appInfoStore.CachedComponents" :exclude="appInfoStore.ExcludeComponents">
-                  <component :is="appInfoStore.cacheComponent(Component, route)" />
-               </keep-alive>
-            </router-view>
-         </div>
-      </Layout>
-   </Layout>
+   <BaseLayout :routes="props.routes">
+      <div class="relative overflow-y-auto" :class="bodyClass">
+         <router-view v-slot="{ Component, route }">
+            <keep-alive :include="appInfoStore.CachedComponents" :exclude="appInfoStore.ExcludeComponents">
+               <component :is="appInfoStore.cacheComponent(Component, route)" />
+            </keep-alive>
+         </router-view>
+      </div>
+   </BaseLayout>
 </template>

package/src/components/layout/page/menuLayout.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import BaseLayout from './baseLayout.vue';
+import { useAppInfo, useSettingInfo } from '@/index';
+import message from 'vue-m-message';
+
+const props = defineProps<{ routes: any }>();
+
+const appInfoStore = useAppInfo();
+const settingInfoStore = useSettingInfo();
+
+const bodyClass = ref('h-[calc(100vh-82px)]');
+watch(
+   () => settingInfoStore.fullscreen,
+   (newVal) => {
+      bodyClass.value = newVal ? 'h-[calc(100vh-40px)]' : 'h-[calc(100vh-80px)]';
+   },
+);
+
+onMounted(() => {
+   message.closeAll();
+});
+</script>
+<template>
+   <BaseLayout :routes="props.routes">
+      <!-- 没有滚动条 -->
+      <div class="relative" :class="bodyClass">
+         <router-view v-slot="{ Component, route }">
+            <keep-alive :include="appInfoStore.CachedComponents" :exclude="appInfoStore.ExcludeComponents">
+               <component :is="appInfoStore.cacheComponent(Component, route)" />
+            </keep-alive>
+         </router-view>
+      </div>
+   </BaseLayout>
+</template>

package/src/typings/option.d.ts

@@ -190,11 +190,11 @@ export type OptionControl = OptionControlOption & {
    /**
     * 基础选中数据
     */
-   selected: Ref<string | number | string[] | number[] | undefined>;
+   selected: Ref<RawValue | RawValue[] | undefined | null>;
    /**
     * 选中数据
     */
-   selectedOptions: Ref<OptionItemProps[]>;
+   selectedOptions: Ref<OptionItemProps | OptionItemProps[] | undefined | null>;
    /**
     * 查询接口
     *  - 优先使用

package/src/utils/data.ts

@@ -2,6 +2,7 @@ import { AnyControl, ExecuteOptions, PostOptions } from '@/typings/data.d';
 import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
 import message from 'vue-m-message';
 import { isEmpty } from './isEmpty';
+import { combineParams } from '@skyfox2000/microbase';
 
 /**
  * 合并URL信息
@@ -43,7 +44,10 @@ const doPost = <T>(control: AnyControl, options: PostOptions<T>): Promise<ApiRes
    if (url.authorize === undefined) url.authorize = pageCtrl.authorize;
 
    // 合并请求参数
-   let newParams = JSON.parse(JSON.stringify(options.params));
+   let newParams = combineParams(
+      JSON.parse(JSON.stringify(url.params ?? {})),
+      JSON.parse(JSON.stringify(options.params ?? {})),
+   );
 
    // 处理特殊参数
    if (options.processParams) {

package/src/utils/options.ts

@@ -335,7 +335,7 @@ export const outFormDataFields = (
 export const onOptionChanged = (
    optionCtrl: OptionControl,
    props: OptionProps,
-   values: undefined | SelectValue,
+   values?: SelectValue,
 ): OptionItemProps | OptionItemProps[] | undefined => {
    const inputFactory = optionCtrl.inputFactory?.value;
    // 如果存在验证错误，重新检测
@@ -346,7 +346,7 @@ export const onOptionChanged = (
 
    // 获取选中的选项对象或对象数组
    const selectedValues = getSelectedValues(values, optionCtrl.options.value);
-   optionCtrl.selectedOptions.value = selectedValues as OptionItemProps[];
+   optionCtrl.selectedOptions.value = selectedValues;
 
    // 如果配置了 formData 和 outFields，将选中的其它属性值映射到 formData 上
    if (props.formData && props.outFields) {

package/vite.config.ts

@@ -62,6 +62,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
                Error403: 'src/components/error/error403.vue',
                Error404: 'src/components/error/error404.vue',
                BasicLayout: 'src/components/layout/page/basicLayout.vue',
+               MenuLayout: 'src/components/layout/page/menuLayout.vue',
             },
             fileName: (format, entryName) => {
                if (entryName === 'index') return `webui.${format}.js`;

package/lib/AceEditor.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/BasicLayout.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/Error403.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/Error404.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/ExcelForm.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/UploadForm.d.ts

@@ -1 +0,0 @@
-export {}

package/lib/assets/modules/_plugin-vue_export-helper-CHgC5LLL.js

@@ -1,9 +0,0 @@
-const s = (t, r) => {
-  const o = t.__vccOpts || t;
-  for (const [c, e] of r)
-    o[c] = e;
-  return o;
-};
-export {
-  s as _
-};

package/lib/assets/modules/file-upload-D8Ln4vVV.js

@@ -1,204 +0,0 @@
-var m = Object.defineProperty;
-var E = (e, r, o) => r in e ? m(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o;
-var d = (e, r, o) => E(e, typeof r != "symbol" ? r + "" : r, o);
-import { hostUrl as v } from "@skyfox2000/fapi";
-import { ae as S, ad as w, u as g } from "./uploadList-BNkHE3fR.js";
-import { mainAppApis as a } from "@skyfox2000/microbase";
-import y from "dayjs";
-import p from "vue-m-message";
-var i = /* @__PURE__ */ ((e) => (e.Pending = "pending", e.Uploading = "uploading", e.Success = "success", e.Error = "error", e.Online = "online", e.Offline = "offline", e))(i || {});
-const U = () => a.value ? a.value.getHostInfo() : S().hostInfo, x = () => a.value && a.value.getAppInfo ? a.value.getAppInfo() : w().appInfo, L = (e) => a.value && a.value.userLogin ? a.value.userLogin(e) : g().login(e, !0), M = () => a.value && a.value.userLogout ? a.value.userLogout() : g().logout(), b = () => a.value && a.value.getToken ? a.value.getToken() : g().getToken(), N = () => a.value && a.value.getUserInfo ? a.value.getUserInfo() : g().getUserInfo();
-class z {
-  /**
-   * 连接路径参数，已判断 undefined 或 null 值
-   * @param args 路径参数数组
-   * @returns 连接后的路径字符串
-   */
-  static join(...r) {
-    return r.filter((u) => u != null).join("/").replace(/[\/]+/, "/");
-  }
-}
-class C {
-  /**
-   * AsyncUploader 构造函数
-   * @param urlInfo 文件上传的 API 配置（IUrlInfo 对象）
-   * @param maxConcurrent 最大允许并发上传的文件数量
-   */
-  constructor(r, o = 3) {
-    /**
-     * 设置 API 端点和最大并发数，所有上传文件通过该类控制
-     */
-    d(this, "urlInfo");
-    /**
-     * 最大并发上传数
-     */
-    d(this, "maxConcurrent");
-    /**
-     * 控制上传任务的中断信号
-     */
-    d(this, "abortController");
-    this.urlInfo = r, this.maxConcurrent = o;
-  }
-  /**
-   * 执行上传
-   * @param fileList 文件列表
-   * @param loading 加载状态
-   * @param continueOnError 错误时是否继续上传
-   * @param onComplete 上传完成回调
-   * @param onProgress 上传进度回调
-   * @returns 上传结果
-   */
-  async doUpload(r, o, c, u, n) {
-    if (r.length) {
-      if (r.length === 0) {
-        p.warning("请选择上传的文件！");
-        return;
-      }
-      o.value = !0, await this.uploadFiles(r, n, (f) => {
-        let t = !1, h = 0;
-        for (const s of f)
-          s.status === i.Error && h++;
-        h ? h < f.length ? c ? (p.error("上传结束，部分文件上传失败！"), p.warning("保存上传成功的文件！"), t = !0) : p.error("上传结束，部分文件上传失败，取消保存！") : p.error("上传结束，所有文件上传失败！") : (p.success("全部文件上传成功！"), t = !0), o.value = !1, u == null || u(t, f);
-      });
-    }
-  }
-  /**
-   * 上传多个文件，控制并发数量
-   * @param files 文件列表（File[] 或 FileList）
-   * @param onProgress 上传进度回调
-   * @param onComplete 上传完成回调
-   */
-  async uploadFiles(r, o, c) {
-    if (!r.length) return;
-    const u = Math.min(this.maxConcurrent, r.length), n = [];
-    for (const t of r)
-      switch (t.status) {
-        case i.Success:
-        case i.Online:
-        case i.Offline:
-          break;
-        default:
-          t.status = i.Pending, n.push(t);
-          break;
-      }
-    const f = [];
-    this.abortController = new AbortController();
-    try {
-      for (; f.length < u && n.length > 0; ) {
-        const t = n.shift();
-        if (!t) break;
-        f.push(this.handleFileStatus(t, f, n, o));
-      }
-      await Promise.all(f);
-    } catch (t) {
-      r.forEach((h) => {
-        h.status = i.Error, h.error = t instanceof Error ? t : new Error("上传失败"), o == null || o(h);
-      });
-    } finally {
-      c == null || c(r);
-    }
-  }
-  /**
-   * 处理单个文件的上传逻辑
-   * @param file 当前上传的文件
-   * @param activeUploads 当前正在上传的文件列表
-   * @param pendingFiles 等待上传的文件列表
-   * @param onProgress 上传进度回调
-   */
-  async handleFileStatus(r, o, c, u) {
-    try {
-      await this.uploadFile(r, this.abortController.signal, (n) => {
-        r.percent = n, u == null || u(r);
-      });
-    } catch (n) {
-      r.error = n instanceof Error ? n : new Error("上传失败");
-    } finally {
-      if (c.length > 0) {
-        const n = c.shift();
-        n && o.push(this.handleFileStatus(n, o, c, u));
-      }
-    }
-  }
-  /**
-   * 使用 XMLHttpRequest 上传文件
-   * @param file 文件对象
-   * @param signal 中断信号
-   * @param onProgress 上传进度回调
-   */
-  async uploadFile(r, o, c) {
-    return r.status = i.Uploading, new Promise((u, n) => {
-      const f = new FormData();
-      if (f.append("file", r.originFileObj), r.params)
-        for (const s in r.params)
-          f.append(s, r.params[s]);
-      const t = new XMLHttpRequest(), h = v(this.urlInfo);
-      if (h === !1) return Promise.resolve(r);
-      if (t.open("POST", h, !0), this.urlInfo.header && typeof this.urlInfo.header == "object" && Object.entries(this.urlInfo.header).forEach(([s, l]) => {
-        t.setRequestHeader(s, l);
-      }), this.urlInfo.authorize) {
-        const s = b();
-        if (!s) {
-          n(new Error("未授权或授权过期"));
-          return;
-        }
-        t.setRequestHeader("Authorization", "Bearer " + s);
-      }
-      t.upload.addEventListener("progress", (s) => {
-        if (s.lengthComputable && s.total > 0) {
-          const l = Math.round(s.loaded / s.total * 100);
-          c(l);
-        }
-      }), t.addEventListener("load", () => {
-        if (t.status >= 200 && t.status < 300) {
-          const s = t.getResponseHeader("Content-Type");
-          if (!s || !s.includes("application/json")) {
-            n(new Error("返回的结果不是 JSON 格式"));
-            return;
-          }
-          try {
-            const l = JSON.parse(t.response);
-            if (l.status === "success")
-              l.data && (r.minioFile = {
-                ETag: l.data.ETag,
-                Bucket: l.data.Bucket,
-                FileName: r.fileName,
-                Key: l.data.Key,
-                Size: l.data.Size,
-                Type: r.type,
-                UpdateTime: y().format("YYYY-MM-DD HH:mm:ss"),
-                Status: i.Success
-              }), r.status = i.Success, u(r);
-            else {
-              const I = l.msg;
-              r.status = i.Error, n(new Error(I));
-            }
-          } catch (l) {
-            r.status = i.Error, n(new Error("无法解析返回的 JSON 数据: " + l));
-          }
-        } else
-          r.status = i.Error, n(new Error(`上传失败，状态码：${t.status}`));
-      }), t.addEventListener("error", () => {
-        r.status = i.Error, n(new Error("上传失败，网络异常"));
-      }), t.send(f), o.addEventListener("abort", () => {
-        t.abort(), n(new Error("上传已取消"));
-      });
-    });
-  }
-  /**
-   * 取消当前所有的上传任务
-   */
-  cancelUpload() {
-    this.abortController && this.abortController.abort();
-  }
-}
-export {
-  C as A,
-  i as U,
-  x as a,
-  M as b,
-  b as c,
-  N as d,
-  U as g,
-  z as p,
-  L as u
-};