@skyfox2000/webui 0.1.0

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

@@ -0,0 +1,479 @@
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { Button } from '../../common';
+import { Modal, Space, Upload, Alert } from 'ant-design-vue';
+import {
+   EditorControl,
+   GridControl,
+   validateExcel,
+   getRuleTexts,
+   checkExcelDuplicates,
+   AsyncUploader,
+   UploadStatus,
+   doSave,
+   ExcelFileParams,
+   processExcelFile,
+   path,
+} from '@skyfox2000/webbase';
+import { AnyData, ResStatus } from '@skyfox2000/fapi';
+import message from 'vue-m-message';
+//引入相关样式
+import type { UploadProps } from 'ant-design-vue';
+import VueOfficeExcel from '@vue-office/excel';
+import '@vue-office/excel/lib/index.css';
+import { UploadFile } from '@skyfox2000/webbase';
+
+type AlertType = 'success' | 'info' | 'warning' | 'error';
+
+const props = defineProps<{
+   /**
+    * 标题
+    */
+   title: String;
+   /**
+    * 表格控制器
+    */
+   gridCtrl: GridControl<AnyData>;
+   /**
+    * 表格控制器
+    */
+   excelCtrl: EditorControl<AnyData>;
+   /**
+    * 文件上传参数
+    */
+   uploadParams: ExcelFileParams;
+   /**
+    * 表格字段映射
+    * - 表头映射字段
+    */
+   excelFieldMap: Record<string, string>;
+   /**
+    * Excel文件信息字段
+    */
+   fileField?: string;
+   /**
+    * Excel批量数据字段
+    * - Excel数据列表转换后的上传字段
+    */
+   excelBatchField?: string;
+   /**
+    * 确认按钮文字，空字符串则不显示
+    */
+   saveText?: string;
+}>();
+
+const excelCtrl = props.excelCtrl;
+const open = ref<boolean>(false);
+const excelUrl = ref('');
+const fileList = ref<any[]>([]);
+const fileName = ref('');
+const validating = ref(true); // 表示正在验证状态
+
+// Alert状态变量
+const validationMsg = ref('待验证数据规则');
+const validationType = ref<AlertType>('warning');
+const duplicateMsg = ref('待验证重复数据');
+const duplicateType = ref<AlertType>('warning');
+
+watch(
+   () => excelCtrl.visible.value,
+   () => {
+      open.value = excelCtrl.visible.value;
+   },
+);
+watch(
+   () => open.value,
+   () => {
+      excelCtrl.visible.value = open.value;
+   },
+);
+
+const uploadParams = ref(props.uploadParams);
+const uploadUrl = ref(uploadParams.value.uploadUrl);
+const duplicateRules = ref(uploadParams.value.duplicateRules);
+const duplicateUrl = ref(uploadParams.value.duplicateUrl);
+
+const dialogUpload = async () => {
+   const url = uploadUrl.value;
+   if (!url) {
+      message.error('未配置文件上传地址！');
+      return;
+   }
+
+   if (excelError.value) {
+      message.error('表格数据存在验证错误，请修正后再上传！');
+      return;
+   }
+
+   excelCtrl.isFormLoading.value = true;
+   try {
+      if (!excelBuffer.value || !fileName.value) {
+         message.warning('请先选择Excel文件！');
+         excelCtrl.isFormLoading.value = false;
+         return;
+      }
+
+      // 创建文件对象和上传器
+      const uploader = new AsyncUploader(url, 1);
+
+      // 创建上传文件对象
+      const file = new File([excelBuffer.value], fileName.value, {
+         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
+
+      const fileKey = path.join(uploadParams.value.basePath, fileName.value);
+      const uploadFile: UploadFile = {
+         uid: '1',
+         name: fileName.value,
+         originFileObj: file,
+         status: UploadStatus.Uploading,
+         percent: 0,
+         params: {
+            FileKey: fileKey,
+         },
+      };
+
+      // 使用上传器的 uploadFile 方法上传文件
+      const abortController = new AbortController();
+      try {
+         await uploader.uploadFile(uploadFile, abortController.signal, (percent) => {
+            uploadFile.percent = percent;
+         });
+
+         // 上传成功后调用 dialogSave 方法
+         message.success('文件上传成功，开始业务处理！');
+         dialogSave(uploadFile);
+      } catch (uploadError: any) {
+         console.error('文件上传错误：', uploadError);
+         message.error(uploadError?.message || '文件上传失败，请稍后再试！');
+         throw uploadError; // 向外层抛出错误
+      }
+   } catch (error: any) {
+      console.error('上传处理错误：', error);
+      message.error('上传处理失败：' + (error?.message || '未知错误'));
+   } finally {
+      excelCtrl.isFormLoading.value = false;
+   }
+};
+
+const dialogSave = async (uploadFile: UploadFile) => {
+   if (excelCtrl.formData.value) {
+      // 使用 doSave 方法保存数据
+      if (props.excelBatchField) {
+         // 获取Excel数据，并转换成指定数据对象结构
+         const excelFileData = await processExcelFile(excelBuffer.value!);
+         if (!excelFileData) return null;
+         const { excelData } = excelFileData;
+         const excelDataList = excelData.map((row: Record<string, AnyData>) => {
+            const result: Record<string, AnyData> = {};
+            for (const key in row) {
+               const field = props.excelFieldMap[key];
+               if (field) {
+                  result[field] = row[key];
+               }
+            }
+            return result;
+         });
+         excelCtrl.formData.value[props.excelBatchField] = excelDataList;
+      }
+
+      const fileField = props.fileField ?? 'FileInfo';
+      excelCtrl.formData.value[fileField] = uploadFile;
+
+      if (excelCtrl.beforeSave) {
+         excelCtrl.beforeSave();
+      }
+
+      const postData = {
+         Data: {
+            ...excelCtrl.formData.value,
+         },
+         Query: {
+            [props.excelCtrl.primaryKey]: excelCtrl.formData.value[props.excelCtrl.primaryKey],
+         },
+      };
+
+      excelCtrl.isFormLoading.value = true;
+      try {
+         const result = await doSave(props.excelCtrl, {
+            params: postData,
+            urlKey: 'save',
+            url: props.excelCtrl.saveUrl,
+         });
+
+         if (result?.status === ResStatus.SUCCESS) {
+            message.success('数据保存成功！');
+            if (excelCtrl.afterSave) {
+               excelCtrl.afterSave();
+            }
+            excelCtrl.visible.value = false;
+         } else {
+            message.error('保存失败：' + (result?.msg || '未知错误'));
+         }
+      } catch (error) {
+         console.error('保存错误：', error);
+         message.error('数据保存失败，请稍后再试！');
+      } finally {
+         excelCtrl.isFormLoading.value = false;
+      }
+   }
+};
+
+const excelError = ref(false);
+const duplicateError = ref(false);
+const excelBuffer = ref<ArrayBuffer | null>(null);
+
+// 上传前处理函数
+const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
+   const isExcel =
+      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      file.type === 'application/vnd.ms-excel';
+   if (!isExcel) {
+      message.error('只能上传Excel文件!');
+      return Upload.LIST_IGNORE;
+   }
+
+   try {
+      // 设置文件名
+      fileName.value = file.name;
+
+      // 清除之前的错误状态并设置为验证中
+      excelError.value = false;
+      duplicateError.value = false;
+      validating.value = true;
+      validationMsg.value = '待验证数据规则';
+      validationType.value = 'warning';
+      duplicateMsg.value = '待验证重复数据';
+      duplicateType.value = 'warning';
+
+      // 使用ArrayBuffer读取文件
+      const buffer = await file.arrayBuffer();
+      excelBuffer.value = buffer;
+
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = async (loadEvent) => {
+         if (loadEvent.target) {
+            // 读取完成后先进行普通验证
+            const { hasError, errBlob } = await validateExcel(buffer, excelCtrl.formRules.value);
+
+            // 有验证错误
+            if (hasError) {
+               if (errBlob) {
+                  excelError.value = true;
+                  validating.value = false;
+                  validationMsg.value = '数据验证失败';
+                  validationType.value = 'error';
+                  const blobUrl = URL.createObjectURL(errBlob);
+                  excelUrl.value = blobUrl;
+               }
+               return; // 验证失败则结束
+            } else {
+               // 验证成功
+               validationMsg.value = '数据验证成功';
+               validationType.value = 'success';
+            }
+
+            // 无验证错误，继续验证重复数据
+            if (duplicateRules.value && duplicateRules.value.length > 0 && duplicateUrl.value) {
+               try {
+                  // 检测重复数据
+                  if (!duplicateUrl.value.api) duplicateUrl.value.api = props.gridCtrl.page.api;
+                  if (duplicateUrl.value.authorize === undefined)
+                     duplicateUrl.value.authorize = props.gridCtrl.page.authorize;
+
+                  const { hasError, errBlob } = await checkExcelDuplicates(
+                     buffer,
+                     duplicateRules.value,
+                     duplicateUrl.value,
+                  );
+                  if (hasError) {
+                     // 有重复数据
+                     if (errBlob) {
+                        duplicateError.value = true;
+                        duplicateMsg.value = '检测到重复数据';
+                        duplicateType.value = 'error';
+                        const blobUrl = URL.createObjectURL(errBlob);
+                        excelUrl.value = blobUrl;
+                     }
+                     return;
+                  } else {
+                     // 无重复数据
+                     duplicateError.value = false;
+                     duplicateMsg.value = '数据验证通过';
+                     duplicateType.value = 'success';
+                  }
+               } catch (error) {
+                  duplicateMsg.value = '重复检测异常';
+                  duplicateType.value = 'error';
+               }
+            }
+            excelUrl.value = loadEvent.target.result as string;
+
+            // 验证完成
+            validating.value = false;
+         } else {
+            message.error('加载Excel文件失败，请检查文件格式！');
+         }
+      };
+   } catch (error) {
+      console.error('Excel处理错误:', error);
+      message.error('Excel文件处理失败，请检查文件格式！');
+      validating.value = false;
+      validationMsg.value = 'Excel处理错误';
+      validationType.value = 'error';
+   }
+
+   return false;
+};
+
+// 计算验证规则显示文本
+const validationRules: { field: string; rules: string[] }[] = getRuleTexts(excelCtrl.formRules.value);
+
+onMounted(() => {
+   const pageCtrl = props.gridCtrl.page;
+   uploadUrl.value = uploadUrl.value ?? pageCtrl.urls.upload;
+   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;
+
+   for (const key in excelCtrl.formData.value) {
+      if (props.gridCtrl.rowData.value) excelCtrl.formData.value[key] = props.gridCtrl.rowData.value[key];
+   }
+
+   open.value = excelCtrl.visible.value;
+});
+
+const dialogClose = () => {
+   excelCtrl.visible.value = false;
+};
+const handleError = () => {
+   console.error('渲染失败');
+};
+</script>
+<template>
+   <Modal
+      :title="title ?? 'Excel文件上传'"
+      v-model:open="open"
+      :wrapClassName="['modal', 'mx-auto', $attrs.width ? 'w-[' + $attrs.width + ']' : ''].join(' ')"
+      :width="940"
+      @close="dialogClose"
+   >
+      <slot></slot>
+      <div class="mb-4 flex items-center">
+         <Upload :file-list="fileList" :before-upload="beforeUpload" accept=".xlsx,.xls" :showUploadList="true">
+            <Button type="primary">选择Excel文件</Button>
+         </Upload>
+         <div v-if="excelUrl && fileName" class="ml-3 text-gray-600">
+            <span>{{ fileName }}</span>
+         </div>
+      </div>
+
+      <div class="flex gap-4">
+         <!-- 左侧Excel显示区域 -->
+         <div
+            class="flex-shrink-0 excel-container"
+            :class="[validationRules.length === 0 ? 'w-[100%]' : 'w-[80%]']"
+            style="height: 430px"
+         >
+            <VueOfficeExcel
+               :src="excelUrl"
+               @error="handleError"
+               style="width: 100%; height: 100%"
+               :options="{
+                  styles: true,
+                  formatCells: true,
+                  skipStyles: false,
+                  autoStyle: true,
+                  keepOriginalFormat: true,
+                  renderingStyle: 'svg',
+               }"
+            />
+         </div>
+
+         <!-- 右侧验证条件和错误信息 -->
+         <div class="w-[22%] flex-grow overflow-hidden flex flex-col" v-if="validationRules.length > 0">
+            <div class="bg-gray-50 p-2 rounded border flex-grow flex flex-col">
+               <div v-if="validationRules.length === 0" class="text-gray-500">没有设置验证规则</div>
+               <div v-else class="flex flex-col">
+                  <!-- 行验证规则 -->
+                  <Alert :message="validationMsg" :type="validationType" show-icon class="mb-2" />
+                  <div class="overflow-y-auto">
+                     <div v-for="(rule, index) in validationRules" :key="index" class="border-b pb-0">
+                        <div class="text-[13px] text-gray-600">{{ rule.field }}</div>
+                        <ul class="pl-5 mt-1 mb-0">
+                           <li v-for="(text, i) in rule.rules" :key="i" class="text-[12px] text-gray-600">
+                              {{ text }}
+                           </li>
+                        </ul>
+                     </div>
+                  </div>
+
+                  <!-- 重复数据检测规则 -->
+                  <div v-if="duplicateRules && duplicateRules.length > 0" class="mt-3">
+                     <Alert :message="duplicateMsg" :type="duplicateType" show-icon class="mt-2 mb-2" />
+                     <div class="text-[12px] text-gray-600 p-1">
+                        <div class="text-[13px] text-gray-600">
+                           以下{{ duplicateRules.length > 1 ? '组合' : '字段' }}必须唯一
+                        </div>
+                        <ul class="pl-5 mt-1 mb-0">
+                           <li class="text-[12px] text-gray-600">
+                              {{ duplicateRules.join(', ') }}
+                           </li>
+                        </ul>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+
+      <template #footer>
+         <Space>
+            <Button @click="dialogClose">取消</Button>
+            <Button
+               @click="dialogUpload"
+               type="primary"
+               :loading="excelCtrl.isFormSaving.value"
+               :disabled="!excelUrl || excelError || duplicateError || validating"
+            >
+               {{ saveText ?? '上传文件' }}
+            </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;
+}
+
+.full-modal .ant-modal-content {
+   display: flex;
+   flex-direction: column;
+   height: calc(100vh);
+}
+
+.full-modal .ant-modal-body {
+   flex: 1;
+}
+
+.excel-container {
+   position: relative;
+   border: 1px solid #f0f0f0;
+   border-radius: 4px;
+   overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { watch, ref, onMounted, provide } from 'vue';
+import { Button } from '../../common';
+import { Modal, Space } from 'ant-design-vue';
+import { onFormSave, onFormSaveAs, onFormClose, EditorControl, ProviderKeys } from '@skyfox2000/webbase';
+import { AnyData } from '@skyfox2000/fapi';
+
+const props = defineProps<{
+   /**
+    * 确认按钮文字，空字符串则不显示
+    */
+   saveText?: string;
+   /**
+    * 另存为按钮文字，空字符串则不显示
+    */
+   saveAsText?: string;
+   /**
+    * 取消按钮文字，空字符则不显示
+    */
+   cancelText?: string;
+   /**
+    * 保存数据请求配置
+    */
+   editorCtrl?: EditorControl<AnyData>;
+   /**
+    * 自定义存储方法
+    */
+   dialogSave?: () => void;
+   /**
+    * 宽度
+    */
+   width?: number;
+   /**
+    * 全屏模式
+    */
+   full?: boolean;
+   /**
+    * 是否显示
+    */
+   open?: boolean;
+}>();
+
+const editorCtrl = props.editorCtrl;
+provide(ProviderKeys.EditorControl, editorCtrl);
+
+const open = ref<boolean>(props.open ?? false);
+const emit = defineEmits(['update:open']);
+const width = ref(props.width ?? 430);
+watch(
+   () => editorCtrl?.visible.value,
+   (newVal) => {
+      open.value = newVal ?? false;
+   },
+);
+
+watch(
+   () => props.open,
+   (newVal) => {
+      open.value = newVal;
+   },
+);
+
+watch(
+   () => open.value,
+   (newVal) => {
+      emit('update:open', newVal);
+      if (!newVal) {
+         dialogClose();
+      }
+   },
+);
+
+onMounted(() => {
+   open.value = editorCtrl?.visible.value ?? false;
+});
+
+const dialogSave = () => {
+   if (props.dialogSave) {
+   } else if (editorCtrl) onFormSave(editorCtrl);
+};
+const dialogSaveAs = () => {
+   if (editorCtrl) onFormSaveAs(editorCtrl);
+};
+const dialogClose = () => {
+   if (editorCtrl) onFormClose(editorCtrl);
+   else open.value = false;
+};
+</script>
+<template>
+   <Modal
+      v-model:open="open"
+      :wrapClassName="'modal mx-auto min-w-[430px] ' + (full ? 'full-modal w-full' : '')"
+      :width="width"
+   >
+      <div class="overflow-y-auto w-full h-full">
+         <slot></slot>
+      </div>
+      <template #footer>
+         <Space>
+            <Button @click="dialogClose" v-if="cancelText !== ''">
+               {{ cancelText ?? '取消' }}
+            </Button>
+            <Button
+               @click="dialogSaveAs"
+               v-if="saveAsText !== '' && editorCtrl?.saveAsBtnVisible !== false"
+               type="primary"
+               :loading="editorCtrl?.isFormSaving.value"
+            >
+               {{ saveAsText ?? '另存为' }}
+            </Button>
+            <Button
+               @click="dialogSave"
+               v-if="saveText !== '' && editorCtrl?.saveBtnVisible !== false"
+               type="primary"
+               :loading="editorCtrl?.isFormSaving.value"
+            >
+               {{ saveText ?? '保存' }}
+            </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>