@skyfox2000/webui 1.2.8 → 1.2.9

package/package.json

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

package/scripts/userInput.py

@@ -0,0 +1,2 @@
+# userInput.py
+user_input=input("Enter Prompt:")

package/src/components/common/index.ts

@@ -17,3 +17,6 @@ import ProjectIcon from './icon/projectIcon.vue';
 export { ProjectIcon };
 import ToolIcon from './icon/toolIcon.vue';
 export { ToolIcon };
+
+import Loading from './loading/index.vue';
+export { Loading };

package/src/components/common/loading/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Spin } from 'ant-design-vue';
+import { useAttrs } from 'vue';
+const attrs = useAttrs()
+</script>
+<template>
+   <div class="absolute z-999 w-full h-full top-0 flex flex-flow row items-center justify-center">
+      <Spin style="margin-top: -10%" v-bind="attrs">
+      </Spin>
+   </div>
+</template>

package/src/components/content/dialog/index.vue

@@ -26,6 +26,10 @@ const props = defineProps<{
     * 自定义存储方法
     */
    dialogSave?: () => void;
+   /**
+    * 自定义另存为方法
+    */
+   dialogSaveAs?: () => void;
    /**
     * 宽度
     */
@@ -65,7 +69,7 @@ watch(
    (newVal) => {
       emit('update:open', newVal);
       if (!newVal) {
-         dialogClose();
+         doDialogClose();
       }
    },
 );
@@ -74,14 +78,17 @@ onMounted(() => {
    open.value = editorCtrl?.visible.value ?? false;
 });
 
-const dialogSave = () => {
+const doDialogSave = () => {
    if (props.dialogSave) {
+      props.dialogSave();
    } else if (editorCtrl) onFormSave(editorCtrl);
 };
-const dialogSaveAs = () => {
-   if (editorCtrl) onFormSaveAs(editorCtrl);
+const doDialogSaveAs = () => {
+   if (props.dialogSaveAs) {
+      props.dialogSaveAs();
+   } else if (editorCtrl) onFormSaveAs(editorCtrl);
 };
-const dialogClose = () => {
+const doDialogClose = () => {
    if (editorCtrl) onFormClose(editorCtrl);
    else open.value = false;
 };
@@ -97,11 +104,11 @@ const dialogClose = () => {
       </div>
       <template #footer>
          <Space>
-            <Button @click="dialogClose" v-if="cancelText !== ''">
+            <Button @click="doDialogClose" v-if="cancelText !== ''">
                {{ cancelText ?? '取消' }}
             </Button>
             <Button
-               @click="dialogSaveAs"
+               @click="doDialogSaveAs"
                v-if="saveAsText !== '' && editorCtrl?.saveAsBtnVisible !== false"
                type="primary"
                :loading="editorCtrl?.isFormSaving.value"
@@ -109,7 +116,7 @@ const dialogClose = () => {
                {{ saveAsText ?? '另存为' }}
             </Button>
             <Button
-               @click="dialogSave"
+               @click="doDialogSave"
                v-if="saveText !== '' && editorCtrl?.saveBtnVisible !== false"
                type="primary"
                :loading="editorCtrl?.isFormSaving.value"

package/src/components/content/dialog/uploadForm.vue

@@ -2,18 +2,13 @@
 import { watch, ref, onMounted } from 'vue';
 import { Button } from '../../common';
 import { Modal, Space } from 'ant-design-vue';
-import { AsyncUploader, EditorControl, GridControl, gridRowUpdate, UploadStatus, UploadFile } from '@/index';
+import { EditorControl, GridControl, gridRowUpdate, UploadFile } from '@/index';
 import { AnyData, ApiResponse, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
-import { UploadList } from '../../form';
+import UploadList from '../../form/upload/uploadList.vue';
 import message from 'vue-m-message';
+import { AsyncUploader } from '@/utils/file-upload';
 
 const props = defineProps<{
-   /**
-    * #### 使用模式
-    * - Row 数据行
-    * - Page 页面
-    */
-   mode: 'Row' | 'Page';
    /**
     * 文件后缀限制
     */
@@ -69,7 +64,11 @@ const emit = defineEmits<{
    /**
     * 上传结束，处理上传后的文件
     */
-   'after:upload': [UploadFile[]];
+   'after:upload': [boolean, UploadFile[]];
+   /**
+    * 上传进度
+    */
+   'on:progress': [UploadFile];
 }>();
 
 watch(
@@ -81,73 +80,29 @@ watch(
 const uploadUrl = ref(props.uploadUrl);
 const downloadUrl = ref(props.downloadUrl);
 
-const dialogUpload = async () => {
-   const url = uploadUrl.value;
-   if (!url) {
-      message.error('未配置文件上传地址！');
-      return;
-   }
-
+const dialogSave = async () => {
    emit('before:upload', fileList.value);
-   const uploader = new AsyncUploader(url, maxConcurrent);
-
-   uploadFormCtrl.isFormLoading.value = true;
-   try {
-      if (fileList.value.length === 0) {
-         message.warning('请选择上传的文件！');
-         return;
-      }
-
-      // 开始上传文件
-      await uploader.uploadFiles(
-         fileList.value,
-         (_) => {},
-         (files) => {
-            uploadFormCtrl.isFormLoading.value = false;
-            let err_count = 0;
-            for (const file of files) {
-               if (file.status === UploadStatus.Error) {
-                  err_count++;
+   const uploader = new AsyncUploader(uploadUrl.value!, maxConcurrent);
+   await uploader.doUpload(
+      fileList.value,
+      uploadFormCtrl.isFormLoading,
+      props.continueOnError,
+      async (result, files) => {
+         emit('after:upload', result, files);
+         if (result) {
+            if (uploadFormCtrl.formData.value) {
+               // 仅修改上传相关字段
+               const res: ApiResponse<any> = await gridRowUpdate(props.gridCtrl, uploadFormCtrl.formData.value);
+               if (res.status === ResStatus.SUCCESS) {
+                  uploadFormCtrl.visible.value = false;
                }
             }
-            if (!err_count) {
-               message.success('全部文件上传成功！');
-               emit('after:upload', files);
-               dialogSave();
-            } else if (err_count < files.length) {
-               if (props.continueOnError) {
-                  message.error('上传结束，部分文件上传失败！');
-                  message.warning('保存上传成功的文件！');
-                  emit('after:upload', files);
-                  dialogSave();
-               } else {
-                  message.error('上传结束，部分文件上传失败，取消保存！');
-               }
-            } else message.error('上传结束，所有文件上传失败！');
-         },
-      );
-   } catch (error) {
-      uploadFormCtrl.isFormLoading.value = false;
-      console.error('上传错误：', error);
-      message.error('上传错误，请稍后再试！');
-      emit('after:upload', fileList.value);
-   }
-};
-
-const dialogSave = async () => {
-   switch (props.mode) {
-      case 'Row':
-         if (uploadFormCtrl.formData.value) {
-            // 仅修改上传相关字段
-            const result: ApiResponse<any> = await gridRowUpdate(props.gridCtrl, uploadFormCtrl.formData.value);
-            if (result.status === ResStatus.SUCCESS) {
-               uploadFormCtrl.visible.value = false;
-            }
          }
-         break;
-      case 'Page':
-         break;
-   }
+      },
+      (file) => {
+         emit('on:progress', file);
+      },
+   );
 };
 
 onMounted(() => {
@@ -161,12 +116,10 @@ onMounted(() => {
    if (!uploadUrl.value.api) uploadUrl.value.api = pageCtrl.api;
    if (uploadUrl.value.authorize === undefined) uploadUrl.value.authorize = pageCtrl.authorize;
 
-   if (!downloadUrl.value) {
-      message.error('未配置文件下载地址！');
-      return;
+   if (downloadUrl.value) {
+      if (!downloadUrl.value.api) downloadUrl.value.api = pageCtrl.api;
+      if (downloadUrl.value.authorize === undefined) downloadUrl.value.authorize = pageCtrl.authorize;
    }
-   if (!downloadUrl.value.api) downloadUrl.value.api = pageCtrl.api;
-   if (downloadUrl.value.authorize === undefined) downloadUrl.value.authorize = pageCtrl.authorize;
 
    for (const key in uploadFormCtrl.formData.value) {
       if (props.gridCtrl.rowData.value) uploadFormCtrl.formData.value[key] = props.gridCtrl.rowData.value[key];
@@ -189,11 +142,17 @@ const dialogClose = () => {
       :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[430px]')"
       @close="dialogClose"
    >
-      <UploadList v-model:file-list="fileList" :download-url="downloadUrl!" :max-count="maxCount" :file-ext="fileExt" />
+      <UploadList
+         v-model:file-list="fileList"
+         :upload-url="uploadUrl!"
+         :download-url="downloadUrl"
+         :max-count="maxCount"
+         :file-ext="fileExt"
+      />
       <template #footer>
          <Space>
             <Button @click="dialogClose">取消</Button>
-            <Button @click="dialogUpload" type="primary" :loading="uploadFormCtrl.isFormSaving.value">
+            <Button @click="dialogSave" type="primary" :loading="uploadFormCtrl.isFormSaving.value">
                上传文件并保存
             </Button>
          </Space>

package/src/components/content/drawer/index.vue

@@ -33,6 +33,14 @@ const props = defineProps<{
     * 保存数据请求配置
     */
    editorCtrl: EditorControl<AnyData>;
+   /**
+    * 自定义保存方法
+    */
+   drawerSave?: () => void;
+   /**
+    * 自定义另存为方法
+    */
+   drawerSaveAs?: () => void;
 }>();
 
 const editorCtrl = props.editorCtrl;
@@ -49,7 +57,19 @@ onMounted(() => {
    open.value = editorCtrl.visible.value ?? false;
 });
 
-const drawerClose = () => {
+const doDrawerSave = () => {
+   if (props.drawerSave) {
+      props.drawerSave();
+   } else if (editorCtrl) onFormSave(editorCtrl);
+};
+
+const doDrawerSaveAs = () => {
+   if (props.drawerSaveAs) {
+      props.drawerSaveAs();
+   } else if (editorCtrl) onFormSaveAs(editorCtrl);
+};
+
+const doDrawerClose = () => {
    onFormClose(editorCtrl);
 };
 </script>
@@ -74,7 +94,7 @@ const drawerClose = () => {
          boxShadow: 'rgba(0, 0, 0, 0.3) -2px 0px 8px',
       }"
       width="420px"
-      @close="drawerClose"
+      @close="doDrawerClose"
    >
       <template #extra>
          <div class="hover:bg-gray-200 w-[24px] h-[24px] rounded-md">
@@ -86,7 +106,7 @@ const drawerClose = () => {
                clickable
                color="#666"
                :position="[0, 0]"
-               @click="() => onFormClose(editorCtrl)"
+               @click="doDrawerClose"
             />
          </div>
       </template>
@@ -95,9 +115,9 @@ const drawerClose = () => {
       </template>
       <template #footer>
          <Space>
-            <Button @click="() => onFormClose(editorCtrl)" v-if="cancelText !== ''">{{ cancelText ?? '取消' }}</Button>
+            <Button @click="doDrawerClose" v-if="cancelText !== ''">{{ cancelText ?? '取消' }}</Button>
             <Button
-               @click="() => onFormSaveAs(editorCtrl)"
+               @click="doDrawerSaveAs"
                v-if="saveAsText !== '' && editorCtrl.saveAsBtnVisible !== false"
                type="primary"
                :loading="editorCtrl.isFormSaving.value"
@@ -105,7 +125,7 @@ const drawerClose = () => {
                {{ saveAsText ?? '另存为' }}
             </Button>
             <Button
-               @click="() => onFormSave(editorCtrl)"
+               @click="doDrawerSave"
                v-if="saveText !== '' && editorCtrl.saveBtnVisible !== false"
                type="primary"
                :loading="editorCtrl.isFormSaving.value"

package/src/components/content/form/formItem.vue

@@ -22,6 +22,10 @@ const props = defineProps<{
     * 宽度
     */
    width?: string;
+   /**
+    * 是否显示在独立行
+    */
+   nextLine?: boolean;
 }>();
 
 // 关闭自动继承属性到根元素
@@ -31,6 +35,7 @@ defineOptions({
 const attrs = useAttrs(); // 手动获取 $attrs
 
 const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
+const labelWidth = inject(ProviderKeys.LabelWidth, '85px');
 const errInfo = useFormItemFactory(props, editorCtrl);
 
 const visible = ref(false);
@@ -82,18 +87,18 @@ const required = computed(() => {
 // });
 </script>
 <template>
-   <div :class="['w-full relative mb-1', width]">
+   <div :class="['relative mb-1']">
       <FormItem
          v-if="visible"
          :required="required"
-         class="!w-[95%] relative"
+         class="relative"
          v-bind="attrs"
-         :class="[rule ? '' : 'mb-3']"
+         :class="[nextLine ? 'mb-0' : rule ? '' : 'mb-3']"
       >
          <template #label>
             <span :class="[errInfo.errClass ? 'text-[#ff4d4f]' : '', 'w-full']"> {{ label }}</span>
          </template>
-         <div class="w-full flex items-center">
+         <div class="flex items-center" :class="width ? width : 'w-full'" v-if="!nextLine">
             <div class="flex-grow">
                <slot></slot>
             </div>
@@ -104,7 +109,18 @@ const required = computed(() => {
             </div>
          </div>
       </FormItem>
-      <span class="absolute bottom-[3px] left-[85px] text-[12px] text-[#ff4d4fcc] block" v-if="errInfo.errClass">
+      <div
+         v-if="nextLine"
+         class="w-[95%] flex items-center relative"
+         :class="[nextLine ? (rule ? 'mb-7' : 'mb-3') : '']"
+      >
+         <slot></slot>
+      </div>
+      <span
+         :style="{ left: labelWidth }"
+         class="absolute bottom-[3px] text-[12px] text-[#ff4d4fcc]"
+         v-if="errInfo.errClass"
+      >
          {{ errInfo.msg }}
       </span>
    </div>

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

@@ -2,7 +2,7 @@
 import { EditorControl, ProviderKeys, onFormSave } from '@/index';
 import { AnyData } from '@skyfox2000/fapi';
 import { Form } from 'ant-design-vue';
-import { inject } from 'vue';
+import { inject, provide } from 'vue';
 // 使用以下统一控制表单显示
 // :label-col="{ flex: '60px' }"
 // :wrapper-col="{ flex: '200px' }"
@@ -24,12 +24,14 @@ const props = defineProps<{
 
 const editorCtrl =
    props.editorCtrl ?? (inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined);
+
+provide(ProviderKeys.LabelWidth, props.labelWidth);
 </script>
 <template>
    <Form
       :label-col="{ flex: props.labelWidth ?? '85px' }"
       :wrapper-col="{
-         flex: props.wrapperWidth ?? '1',
+         flex: props.wrapperWidth ?? '1 0 280px',
       }"
       :style="{
          display: 'flex',

package/src/components/content/search/searchItem.vue

@@ -39,7 +39,7 @@ const errInfo = useFormItemFactory(props, editorCtrl);
          <template #label v-if="label">
             <span :class="[errInfo.errClass ? 'text-[#ff4d4f]' : '', 'w-full']"> {{ label }}</span>
          </template>
-         <div class="flex items-center">
+         <div class="flex items-center w-[90%]">
             <div class="flex-grow pl-1">
                <slot></slot>
             </div>

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

@@ -30,7 +30,7 @@ const props = defineProps({
     * - 模糊查询
     */
    searchField: {
-      type: String,
+      type: [String, Array<string>],
    },
    /**
     * 自定义查询参数
@@ -105,9 +105,17 @@ const onSearch = (value: string) => {
       },
    };
    if (props.searchField) {
-      query.Query![props.searchField] = {
-         $like: '%' + search_value + '%',
-      };
+      if (Array.isArray(props.searchField)) {
+         props.searchField.forEach((field) => {
+            query.Query![field] = {
+               $like: '%' + search_value + '%',
+            };
+         });
+      } else {
+         query.Query![props.searchField] = {
+            $like: '%' + search_value + '%',
+         };
+      }
    }
    if (props.onsearch) {
       props.onsearch(search_value, query);

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

@@ -85,7 +85,7 @@ onUnmounted(() => {
 });
 </script>
 <template>
-   <div>
+   <div class="relative w-[248px] max-w-[248px]">
       <div v-if="!selectOptions.length" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
          <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
          <span>数据加载中...</span>

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

@@ -19,8 +19,8 @@ const dateFormat = ref<string>(props.valueFormat ?? 'YYYY-MM-DD');
 </script>
 <template>
    <DatePicker
-      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
       class="w-full"
+      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
       :placeholder="'请选择' + labelText"
       :locale="locale"
       :valueFormat="dateFormat"

package/src/components/form/index.ts

@@ -23,6 +23,7 @@ import InputNumber from './input/inputNumber.vue';
 export { InputNumber };
 
 import PropEditor from './propEditor/index.vue';
+export type { PropConfigItem } from './propEditor/index.vue';
 export { PropEditor };
 
 import Radio from './radio/index.vue';

package/src/components/form/input/inputIcon.vue

@@ -24,7 +24,7 @@ watch(
 );
 </script>
 <template>
-   <Input :class="['w-[80%]']" v-model:value="innerValue" v-bind="$attrs">
+   <Input v-model:value="innerValue" v-bind="$attrs">
       <template #addonBefore>
          <ToolIcon class="!w-4 !h-4" :icon="innerValue" />
       </template>