fx-platform-ui 1.0.3 → 1.0.4-alpha1

package/packages/components/upload/src/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <a-upload
+      :accept="getStringAccept"
+      v-bind="omit(getProps, ['accept', 'api', 'onChange'])"
+      :before-upload="beforeUploadFn"
+      :custom-request="customRequest"
+      @change="uploadOnChange"
+    >
+      <template #default>
+        <a-button v-bind="getProps.uploadButtonProps">
+          <upload-outlined></upload-outlined> {{ getProps.uploadTitle }}
+        </a-button>
+      </template>
+      <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </a-upload>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { UploadOutlined } from '@ant-design/icons-vue'
+import { omit, throttle } from 'lodash-es'
+import { message, Upload } from 'ant-design-vue'
+import { isFunction } from '../../../utils/is'
+import { platUploadProps } from './plat-upload-props'
+import { useUpload } from './hook/useUpload'
+
+defineOptions({
+  name: 'PlUpload'
+})
+const props = defineProps(platUploadProps)
+const emit = defineEmits(['change', 'beforeChange', 'error'])
+
+const getProps = computed(() => props as Recordable)
+
+const {
+  getStringAccept,
+  checkFileSize,
+  checkFileNumber,
+  checkFileNameLength,
+  checkFileType,
+  checkFileLimit
+} = useUpload({
+  props
+})
+
+// 自定义上传判断
+const customRequest = computed(() => {
+  // 没有api 且 当前属于循环上传
+  if (!isFunction(props.api) && props.polling) {
+    return null
+  }
+  return customRequestApi
+})
+
+// 计算属性判断是否循环上传，不同上传方式走的逻辑不一样
+const beforeUploadFn = computed(() => {
+  if (props.polling) {
+    return beforeUpload
+  }
+  return beforeAllUpload
+})
+
+// 校验成功的文件
+const uploadedSuccessFiles = new Set()
+const beforeAllUpload = async (file, fileList) => {
+  if (file.uid === fileList[0].uid) {
+    uploadedSuccessFiles.clear()
+  }
+  try {
+    await Promise.all([
+      checkFileSize(file),
+      checkFileNumber(fileList),
+      checkFileNameLength(file),
+      checkFileType(file)
+    ])
+    uploadedSuccessFiles.add(file)
+  } catch (error: any) {
+    emit('error', error)
+    const { text } = error
+    if (props.showErrorMsg) {
+      throttledShowErrorMessage(text)
+    }
+    return Upload.LIST_IGNORE
+  }
+  if (uploadedSuccessFiles.size === fileList.length) {
+    emit('beforeChange', fileList, uploadedSuccessFiles)
+  }
+}
+
+// 添加节流 防止多次弹窗
+const throttledShowErrorMessage = throttle(
+  (text) => {
+    message.error(text)
+  },
+  1000,
+  {
+    leading: true,
+    trailing: false
+  }
+)
+
+// 上传前校验
+const beforeUpload = async (file, fileList) => {
+  // promise.all全部判断
+  try {
+    const res = await Promise.all([
+      checkFileSize(file),
+      checkFileNumber(fileList),
+      checkFileNameLength(file),
+      checkFileType(file),
+      checkFileLimit(fileList)
+    ])
+    return res
+  } catch (error: any) {
+    emit('error', error)
+    const { text } = error
+    if (props.showErrorMsg) {
+      throttledShowErrorMessage(text)
+    }
+    return Upload.LIST_IGNORE
+  }
+}
+
+const uploadOnChange = (file) => {
+  emit('change', file)
+}
+
+const customRequestApi = async (file) => {
+  if (!props.polling) {
+    return null
+  }
+  try {
+    const { data } = await props.api(
+      {
+        data: {
+          ...(props.uploadParams || {})
+        },
+        file: file.file,
+        name: props.name
+      },
+      function onUploadProgress(progressEvent: ProgressEvent) {
+        const complete =
+          ((progressEvent.loaded / progressEvent.total) * 100) | 0
+        file.onProgress({ percent: complete }, file)
+      }
+    )
+    file.onSuccess(data, file)
+  } catch (e) {
+    file.onError(e, file)
+  }
+}
+</script>
+
+<style lang="less" scoped></style>

package/packages/components/upload/src/plat-upload-props.ts

@@ -0,0 +1,80 @@
+import { PropType, ExtractPropTypes } from 'vue'
+import { uploadProps } from 'ant-design-vue/es/upload/interface'
+import type { ButtonType } from 'ant-design-vue/es/button/buttonTypes'
+import type { AcceptMax } from './types'
+
+export const platUploadProps = {
+  ...uploadProps(),
+  // 上传按钮名称
+  uploadTitle: {
+    type: String as PropType<string>,
+    default: '上传附件'
+  },
+  // 根据后缀，或者其他
+  accept: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  // 上传提示
+  uploadTips: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  // 文件最大多少 单位MB 默认2MB
+  maxSize: {
+    type: Number as PropType<number>,
+    default: 2
+  },
+  // 最大数量的文件 默认10个
+  maxNumber: {
+    type: Number as PropType<number>,
+    default: 10
+  },
+  // 上传附件的名称字符长度限制
+  maxFileNameLength: {
+    type: Number as PropType<number>,
+    default: 100
+  },
+  // 允许上传多个文件
+  multiple: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  // 上传参数
+  uploadParams: {
+    type: Object as PropType<any>,
+    default: {}
+  },
+  // 上传api
+  api: {
+    type: Function as PropType<PromiseFn>,
+    default: null
+  },
+  // 发到后台的文件参数名
+  name: {
+    type: String as PropType<string>,
+    default: 'file'
+  },
+  // 是否循环上传,默认循环上传
+  polling: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  // rms项目上传模式
+  rmsMaxFileArr: {
+    type: Array as PropType<AcceptMax[]>,
+    default: []
+  },
+  // 上传按钮配置项
+  uploadButtonProps: {
+    type: Object as PropType<Partial<ButtonType>>,
+    default: () => ({})
+  },
+  // 使用组件错误提示
+  showErrorMsg: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  }
+}
+
+export type PlatUploadProps = Partial<ExtractPropTypes<typeof platUploadProps>>

package/packages/components/upload/src/types/acceptMax.ts

@@ -0,0 +1,5 @@
+export type AcceptMax = {
+  accept: string[]
+  maxNum: number
+  historyNum: number
+}

package/packages/components/upload/src/types/index.ts

@@ -0,0 +1 @@
+export * from './acceptMax'

package/lib/packages/components/table/src/hook/useTableMethods.d.ts

@@ -1,21 +0,0 @@
-import type { TableState } from './useTableState';
-import type { PlatTableProps } from '../plat-table-props';
-import type { VNode } from 'vue';
-import type { OnChangeCallbackParams, TableColumn } from '../type';
-export declare type UseTableMethodsContext = {
-    state: TableState;
-    props: PlatTableProps;
-    emit: any;
-};
-export declare const useTableMethods: ({ state, props, emit }: UseTableMethodsContext) => {
-    setProps: (props: any) => void;
-    getComponent: (comp: VNode | string) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-    handleSubmit: (params: any, page?: number) => void;
-    handleTableChange: (...rest: OnChangeCallbackParams) => Promise<void>;
-    getColumnKey: (column: TableColumn) => string | number;
-    fetchData: (params?: {}, rest?: OnChangeCallbackParams) => any;
-    getQueryFormRef: () => any;
-    reload: (resetPageIndex?: boolean) => any;
-};

package/lib/src/env.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}