@skyfox2000/webui 0.1.0

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

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { Button } from '../../common';
+import { Modal, Space } from 'ant-design-vue';
+import { AsyncUploader, EditorControl, GridControl, gridRowUpdate } from '@skyfox2000/webbase';
+import { AnyData, ApiResponse, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
+import { UploadList } from '../../form';
+import { UploadFile } from '@skyfox2000/webbase';
+import message from 'vue-m-message';
+import { UploadStatus } from '@skyfox2000/webbase';
+
+const props = defineProps<{
+   /**
+    * #### 使用模式
+    * - Row 数据行
+    * - Page 页面
+    */
+   mode: 'Row' | 'Page';
+   /**
+    * 文件后缀限制
+    */
+   fileExt?: string[];
+   /**
+    * 表格控制器
+    */
+   gridCtrl: GridControl<AnyData>;
+   /**
+    * 最大文件数
+    * 默认1个
+    */
+   maxCount?: number;
+   /**
+    * 并发上传文件数
+    * 默认3个
+    */
+   maxConcurrent?: number;
+   /**
+    * 弹窗控制器
+    */
+   uploadForm: EditorControl<AnyData>;
+   /**
+    * 上传地址和参数
+    */
+   uploadUrl?: IUrlInfo;
+   /**
+    * 下载地址和参数
+    */
+   downloadUrl?: IUrlInfo;
+   /**
+    * 部分错误上传是否继续保存
+    */
+   continueOnError?: boolean;
+}>();
+
+const uploadFormCtrl = props.uploadForm;
+const open = ref<boolean>(false);
+
+const maxCount = props.maxCount ?? 1;
+const maxConcurrent = props.maxConcurrent ?? 3;
+
+const fileList = ref<UploadFile[]>([]);
+const emit = defineEmits<{
+   /**
+    * 显示预处理
+    */
+   'before:file-list': [EditorControl<AnyData>, UploadFile[]];
+   /**
+    * 上传前预处理
+    */
+   'before:upload': [UploadFile[]];
+   /**
+    * 上传结束，处理上传后的文件
+    */
+   'after:upload': [UploadFile[]];
+}>();
+
+watch(
+   () => uploadFormCtrl.visible.value,
+   () => {
+      open.value = uploadFormCtrl.visible.value;
+   },
+);
+const uploadUrl = ref(props.uploadUrl);
+const downloadUrl = ref(props.downloadUrl);
+
+const dialogUpload = async () => {
+   const url = uploadUrl.value;
+   if (!url) {
+      message.error('未配置文件上传地址！');
+      return;
+   }
+
+   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++;
+               }
+            }
+            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;
+   }
+};
+
+onMounted(() => {
+   const pageCtrl = props.gridCtrl.page;
+   uploadUrl.value = uploadUrl.value ?? pageCtrl.urls.upload;
+   downloadUrl.value = downloadUrl.value ?? pageCtrl.urls.download;
+   if (!uploadUrl.value) {
+      message.error('未配置文件上传地址！');
+      return;
+   }
+   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.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];
+   }
+
+   const list: UploadFile[] = [];
+   emit('before:file-list', uploadFormCtrl, list);
+   fileList.value.push(...list);
+   open.value = uploadFormCtrl.visible.value;
+});
+
+const dialogClose = () => {
+   uploadFormCtrl.visible.value = false;
+};
+</script>
+<template>
+   <Modal title="文件上传" v-model:open="open"
+      :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" />
+      <template #footer>
+         <Space>
+            <Button @click="dialogClose">取消</Button>
+            <Button @click="dialogUpload" type="primary" :loading="uploadFormCtrl.isFormSaving.value">
+               上传文件并保存
+            </Button>
+         </Space>
+      </template>
+   </Modal>
+</template>
+<style>
+.modal {
+   .ant-modal-content {
+      padding: 16px;
+   }
+}
+
+.full-modal {
+   .ant-modal {
+      width: 100% !important;
+      max-width: 100%;
+      top: 0;
+      padding-bottom: 0;
+      margin: 0;
+   }
+
+   .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh);
+   }
+
+   .ant-modal-body {
+      flex: 1;
+   }
+}
+</style>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, provide } from 'vue';
+import { Button } from '../../common';
+import { Drawer, Space, theme } from 'ant-design-vue';
+const { useToken } = theme;
+const { token } = useToken();
+import { EditorControl, onFormSave, onFormSaveAs, onFormClose, ProviderKeys } from '@skyfox2000/webbase';
+import { AnyData } from '@skyfox2000/fapi';
+import { ToolIcon } from '../../common';
+
+const open = ref<boolean>(false);
+
+// interface RuleItem {
+//   key: string[]; // 使用字符串数组来表示嵌套属性的路径
+//   validate: (value: any) => boolean; //
+//   message: string
+// }
+
+const props = defineProps<{
+   /**
+    * 确认按钮文字，空字符串则不显示
+    */
+   saveText?: string;
+   /**
+    * 另存为按钮文字，空字符串则不显示
+    */
+   saveAsText?: string;
+   /**
+    * 取消按钮文字，空字符则不显示
+    */
+   cancelText?: string;
+   /**
+    * 保存数据请求配置
+    */
+   editorCtrl: EditorControl<AnyData>;
+}>();
+
+const editorCtrl = props.editorCtrl;
+provide(ProviderKeys.EditorControl, editorCtrl);
+
+watch(
+   () => editorCtrl.visible.value,
+   (newVal) => {
+      open.value = newVal ?? false;
+   },
+);
+
+onMounted(() => {
+   open.value = editorCtrl.visible.value ?? false;
+});
+
+const drawerClose = () => {
+   onFormClose(editorCtrl);
+};
+</script>
+<template>
+   <Drawer v-model:open="open" :get-container="false" :closable="false" :header-style="{
+      height: '40px',
+      padding: '10px 6px 10px 16px',
+      backgroundColor: token.colorBgLayout,
+}" :body-style="{
+      padding: '10px 16px',
+   }" :footer-style="{
+         textAlign: 'right',
+      }" :style="{
+         position: 'absolute',
+         boxShadow: 'rgba(0, 0, 0, 0.3) -2px 0px 8px',
+      }" width="420px" @close="drawerClose">
+      <template #extra>
+         <div class="hover:bg-gray-200 w-[24px] h-[24px] rounded-md">
+            <ToolIcon class="top-[-2px] left-[2px] w-6 h-6" icon="icon-new" :angle="45" fontsize="24px" clickable
+               color="#666" :position="[0, 0]" @click="() => onFormClose(editorCtrl)" />
+         </div>
+      </template>
+      <template #default>
+         <slot></slot>
+      </template>
+      <template #footer>
+         <Space>
+            <Button @click="() => onFormClose(editorCtrl)" v-if="cancelText !== ''">{{ cancelText ?? '取消' }}</Button>
+            <Button @click="() => onFormSaveAs(editorCtrl)"
+               v-if="saveAsText !== '' && editorCtrl.saveAsBtnVisible !== false" type="primary"
+               :loading="editorCtrl.isFormSaving.value">
+               {{ saveAsText ?? '另存为' }}
+            </Button>
+            <Button @click="() => onFormSave(editorCtrl)" v-if="saveText !== '' && editorCtrl.saveBtnVisible !== false"
+               type="primary" :loading="editorCtrl.isFormSaving.value">
+               {{ saveText ?? '保存' }}
+            </Button>
+         </Space>
+      </template>
+   </Drawer>
+</template>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { EditorControl, ProviderKeys, useFormItemFactory } from '@skyfox2000/webbase';
+import { FormItem } from 'ant-design-vue';
+import { Helper } from '../../common';
+import { inject, ref, useAttrs } from 'vue';
+import { AnyData } from '@skyfox2000/fapi';
+
+const props = defineProps<{
+   /**
+    * 标签文字
+    */
+   label?: string;
+   /**
+    * 验证规则
+    */
+   rule?: string;
+   /**
+    * 帮助文字
+    */
+   helper?: string;
+   /**
+    * 宽度
+    */
+   width?: string;
+}>();
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
+const errInfo = useFormItemFactory(props, editorCtrl);
+
+const visible = ref(false);
+setTimeout(() => {
+   // 延迟显示，提高性能
+   visible.value = true;
+}, 30);
+
+// 参考代码
+// this.$parent.$el.scrollIntoView({
+//     //滚动到指定节点
+//     block: "center", //值有start,center,end，nearest，当前显示在视图区域中间
+//     behavior: "smooth" //值有auto、instant,smooth，缓动动画（当前是慢速的）
+// });
+</script>
+<template>
+   <div :class="['w-full relative mb-1', width]">
+      <FormItem
+         v-if="visible"
+         :required="!!rule && editorCtrl?.formRules?.value?.[rule]?.required"
+         class="!w-[95%] relative"
+         v-bind="attrs"
+         :class="[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-grow">
+               <slot></slot>
+            </div>
+            <div class="w-8 mt-[-2px]">
+               <slot name="helper">
+                  <Helper v-if="helper" :text="helper" />
+               </slot>
+            </div>
+         </div>
+      </FormItem>
+      <span class="absolute bottom-[3px] left-[85px] text-[12px] text-[#ff4d4fcc] block" v-if="errInfo.errClass">
+         {{ errInfo.msg }}
+      </span>
+   </div>
+</template>

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

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { EditorControl, ProviderKeys, onFormSave } from '@skyfox2000/webbase';
+import { AnyData } from '@skyfox2000/fapi';
+import { Form } from 'ant-design-vue';
+import { inject } from 'vue';
+// 使用以下统一控制表单显示
+// :label-col="{ flex: '60px' }"
+// :wrapper-col="{ flex: '200px' }"
+// 单独项使用FormItem控制
+const props = defineProps<{
+   /**
+    * 快速配置表单标签宽度
+    */
+   labelWidth?: string;
+   /**
+    * 快速配置表单项宽度
+    */
+   wrapperWidth?: string;
+   /**
+    * 表单配置信息
+    */
+   editorCtrl?: EditorControl<AnyData>;
+}>();
+
+const editorCtrl =
+   props.editorCtrl ?? (inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined);
+</script>
+<template>
+   <Form
+      :label-col="{ flex: props.labelWidth ?? '85px' }"
+      :wrapper-col="{
+         flex: props.wrapperWidth ?? '1',
+      }"
+      :style="{
+         display: 'flex',
+         flexWrap: 'wrap',
+      }"
+      v-submit="
+         () => {
+            if (editorCtrl) {
+               onFormSave(editorCtrl);
+            }
+         }
+      "
+   >
+      <slot></slot>
+   </Form>
+</template>

package/src/components/content/index.ts

@@ -0,0 +1,32 @@
+import Dialog from './dialog/index.vue';
+export { Dialog };
+import UploadForm from './dialog/uploadForm.vue';
+export { UploadForm };
+import ExcelForm from './dialog/excelForm.vue';
+export { ExcelForm };
+
+import Drawer from './drawer/index.vue';
+export { Drawer };
+
+import Form from './form/index.vue';
+export { Form };
+import FormItem from './form/formItem.vue';
+export { FormItem };
+
+import Search from './search/index.vue';
+export { Search };
+import SearchItem from './search/searchItem.vue';
+export { SearchItem };
+
+import Table from './table/index.vue';
+export { Table };
+import TableOperate from './table/tableOperate.vue';
+export { TableOperate };
+
+import Toolbar from './toolbar/index.vue';
+export { Toolbar };
+import Icontool from './toolbar/icontool.vue';
+export { Icontool };
+
+import Tree from './tree/index.vue';
+export { Tree };

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

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch, useSlots, VNode } from 'vue';
+import { Form, Space } from 'ant-design-vue';
+import SearchItem from './searchItem.vue';
+import { Button } from '../../common';
+import { GridControl } from '@skyfox2000/webbase';
+import { AnyData } from '@skyfox2000/fapi';
+
+/**
+ * 搜索表单BUG
+ * 添加ref="searchForm" 后打包报错
+ */
+// ref="searchForm"
+// The inferred type of '__VLS_template' cannot be named without a reference to '.pnpm/vue-types@3.0.2_vue@3.5.16_typescript@5.8.3_/node_modules/vue-types'. This is likely not portable. A type annotation is necessary.
+// 225 function __VLS_template() {
+//
+//
+
+// 使用以下统一控制表单显示
+// :label-col="{ flex: '60px' }"
+// :wrapper-col="{ flex: '200px' }"
+// 单独项使用FormItem控制
+const props = defineProps<{
+   /**
+    * 搜索条件
+    */
+   search: Record<string, any>;
+   /**
+    * 表格控制对象
+    */
+   gridCtrl: GridControl<AnyData>;
+}>();
+
+// const pageData = props.gridData.page;
+
+const emits = defineEmits<{
+   (e: 'update:search', val: Record<string, any>): void;
+}>();
+
+/**
+ * 搜索按钮前的占位数量，1或者2
+ */
+const holderSize = ref(0);
+const defaultSlots = ref(0);
+const controlSlots = ref(0);
+const getSlotLen = (items: VNode[]): number => {
+   let count = 0;
+   for (let i = 0; i < items.length; i++) {
+      if (typeof items[i].type === 'object') count++;
+   }
+   return count;
+};
+const slots = useSlots();
+const updateHolderSize = () => {
+   defaultSlots.value = 0;
+   controlSlots.value = 0;
+   if (slots.default) defaultSlots.value = getSlotLen(slots.default({}));
+   if (props.gridCtrl.searchBar && slots.control) controlSlots.value = getSlotLen(slots.control({}));
+
+   holderSize.value = 2 - ((defaultSlots.value + controlSlots.value) % 3);
+};
+
+watch(
+   () => props.gridCtrl.searchBar,
+   () => {
+      updateHolderSize();
+   },
+);
+
+const defaultData: Record<string, any> = JSON.parse(JSON.stringify(props.search));
+
+onMounted(() => {
+   updateHolderSize();
+   let search = { ...props.search };
+   props.gridCtrl.gridQuery = {
+      ...props.gridCtrl.gridQuery,
+      Query: {
+         ...props.gridCtrl.gridQuery?.Query,
+         ...search,
+      },
+   };
+});
+
+const onSearch = () => {
+   let search = { ...props.search };
+   props.gridCtrl.gridQuery = {
+      ...props.gridCtrl.gridQuery,
+      Query: {
+         ...props.gridCtrl.gridQuery?.Query,
+         ...search,
+      },
+   };
+   props.gridCtrl.reload.value = true;
+};
+
+const onReset = () => {
+   const data = JSON.parse(JSON.stringify(defaultData));
+   for (const key in props.search) {
+      if (data[key] === undefined) {
+         data[key] = undefined;
+      }
+   }
+   emits('update:search', data);
+};
+</script>
+<template>
+   <Form
+      v-if="defaultSlots + controlSlots > 0"
+      :label-col="{ flex: '60px' }"
+      :style="{
+         flexWrap: 'wrap',
+         borderBottom: '1px solid #e9e9e9',
+      }"
+      class="flex mb-[10px]"
+      v-submit="onSearch"
+   >
+      <!-- 默认插槽 -->
+      <slot></slot>
+      <!-- 受控插槽 -->
+      <slot name="control" v-if="gridCtrl.searchBar"></slot>
+      <!-- 表单操作按钮 占位数量 -->
+      <SearchItem class="w-1/3" v-if="holderSize >= 1"> </SearchItem>
+      <SearchItem class="w-1/3" v-if="holderSize >= 2"> </SearchItem>
+      <SearchItem
+         v-if="defaultSlots || gridCtrl.searchBar"
+         class="w-1/3 flex justify-end text-right pr-5"
+         :wrapper-col="{ flex: 'auto' }"
+      >
+         <Space>
+            <Button type="primary" @click="onSearch" icon="icon-search">搜索</Button>
+            <Button @click="onReset" icon="icon-reset">重置</Button>
+         </Space>
+      </SearchItem>
+   </Form>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { inject, useAttrs } from 'vue';
+import { ProviderKeys, EditorControl, useFormItemFactory } from '@skyfox2000/webbase';
+import { FormItem } from 'ant-design-vue';
+import { AnyData } from '@skyfox2000/fapi';
+
+const props = defineProps<{
+   /**
+    * 标签文字
+    */
+   label?: string;
+   /**
+    * 宽度
+    */
+   width?: string;
+   /**
+    * 验证规则
+    */
+   rule?: string;
+}>();
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const editorCtrl = inject(ProviderKeys.EditorControl, undefined) as EditorControl<AnyData> | undefined;
+const errInfo = useFormItemFactory(props, editorCtrl);
+</script>
+<template>
+   <div class="w-1/3 relative mb-1">
+      <FormItem
+         :required="rule !== undefined"
+         class="w-[90%] relative"
+         v-bind="attrs"
+         :class="[rule ? '' : 'mb-3', width]"
+         :labelCol="{ span: 6 }"
+      >
+         <template #label v-if="label">
+            <span :class="[errInfo.errClass ? 'text-[#ff4d4f]' : '', 'w-full']"> {{ label }}</span>
+         </template>
+         <div class="flex items-center">
+            <div class="flex-grow pl-1">
+               <slot></slot>
+            </div>
+         </div>
+      </FormItem>
+      <span class="absolute bottom-[3px] left-[85px] text-[12px] text-[#ff4d4fcc] block" v-if="errInfo.msg">
+         {{ errInfo.msg }}
+      </span>
+   </div>
+</template>