fx-platform-ui 1.0.2 → 1.0.4-alpha1

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

@@ -0,0 +1,55 @@
+import { VNode, PropType, ExtractPropTypes } from 'vue'
+import { modalProps } from 'ant-design-vue/es/modal/Modal'
+
+export const platModalProps = {
+  ...modalProps(),
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  centered: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: false
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  okText: {
+    type: String,
+    default: '确定'
+  },
+  // 内容
+  content: {
+    type: [Object, String, Function] as PropType<VNode | string | (() => void)>,
+    default: null
+  },
+  // 内容样式
+  contentStyle: {
+    type: Object as PropType<Recordable>,
+    default: () => ({})
+  },
+  // 关闭函数
+  onCancel: {
+    type: Function as PropType<(() => Promise<any>) | (() => void)>
+  },
+  // 确认函数
+  onOk: {
+    type: Function as PropType<(() => Promise<any>) | (() => void)>
+  },
+  // 销毁函数
+  destroy: {
+    type: Function as PropType<(() => Promise<any>) | undefined>,
+    default: null
+  },
+  close: {
+    type: Function as PropType<() => Promise<any>>,
+    default: () => {}
+  }
+}
+
+export type PlatModalProps = Partial<ExtractPropTypes<typeof platModalProps>>

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

@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onUpdated, unref } from 'vue'
+import { onUpdated, onBeforeMount } from 'vue'
 import { Table } from 'ant-design-vue'
 import PlForm from '../../form'
 import { isFunction } from '../../../utils/is'
@@ -105,7 +105,11 @@ const {
   fetchData
 } = tableMethods
 
-fetchData()
+onBeforeMount(() => {
+  if (props.immediate) {
+    fetchData()
+  }
+})
 
 const instance = {
   ...props,

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

@@ -72,7 +72,12 @@ export const platTableProps = {
     default: false
   },
   /** 通过dom操作分页样式 */
-  updatePageVnode: Function
+  updatePageVnode: Function,
+  /** 是否首次表格加载 */
+  immediate: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  }
 }
 
 export type PlatTableProps = ExtractPropTypes<typeof platTableProps>

package/packages/components/upload/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+
+import PlUpload from './src/index.vue'
+PlUpload.install = function (app: App) {
+  // 组件注册，按需引入
+  app.component(PlUpload.name, PlUpload)
+  return app
+}
+
+export default PlUpload

package/packages/components/upload/src/hook/useUpload.ts

@@ -0,0 +1,133 @@
+import { unref, computed, toRefs } from 'vue'
+import mime from 'mime'
+import type { PlatUploadProps } from '../plat-upload-props'
+// 错误常量状态
+export enum ErrorStatus {
+  // 文件大小超出限制
+  FILE_SIZE = 'FILE_SIZE',
+  // 文件数量超出限制
+  FILE_NUMBER = 'FILE_NUMBER',
+  // 文件名称长度超出限制
+  FILE_NAME_LENGTH = 'FILE_NAME_LENGTH',
+  // 文件类型不符合
+  FILE_TYPE = 'FILE_TYPE',
+  // 单个文件数量超出限制
+  FILE_ACCEPT_NUMBER = 'FILE_ACCEPT_NUMBER'
+}
+export type UseUploadParams = {
+  props: PlatUploadProps
+}
+
+export function useUpload({ props }: UseUploadParams) {
+  const { accept, maxSize, maxNumber, maxFileNameLength, rmsMaxFileArr } =
+    toRefs(props)
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const _accept = unref(accept)
+    if (_accept && _accept.length > 0) {
+      return _accept
+    }
+    return []
+  })
+  // 文件类型限制获取字符串模式(ant design 需要)
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        if (item.indexOf('/') > 0 || item.startsWith('.')) {
+          return item
+        } else {
+          return `.${item}`
+        }
+      })
+      .join(',')
+  })
+  // 检查文件大小
+  const checkFileSize = (file: File) => {
+    // 通过promise方式验证文件大小
+    return new Promise((resolve, reject) => {
+      const _maxSize = unref(maxSize)
+      if (_maxSize && file.size > _maxSize * 1024 * 1024) {
+        reject({
+          status: ErrorStatus.FILE_SIZE,
+          text: `${file.name} 文件大小超出限制，最大为${_maxSize}MB，请重新上传！`
+        })
+      }
+      resolve(true)
+    })
+  }
+  // 检查文件数量
+  const checkFileNumber = (fileList: File[]) => {
+    return new Promise((resolve, reject) => {
+      const _maxNumber = unref(maxNumber)
+      if (_maxNumber && fileList.length > _maxNumber) {
+        reject({
+          status: ErrorStatus.FILE_NUMBER,
+          text: `一次性最多上传${_maxNumber}个文件，请重新上传！`
+        })
+      }
+      resolve(true)
+    })
+  }
+  // 检查文件名称长度
+  const checkFileNameLength = (file: File) => {
+    return new Promise((resolve, reject) => {
+      const _maxFileNameLength = unref(maxFileNameLength)
+      if (_maxFileNameLength && file.name.length > _maxFileNameLength) {
+        reject({
+          status: ErrorStatus.FILE_NAME_LENGTH,
+          text: `${file.name} 文件名称长度超出限制，最大为${_maxFileNameLength}个字符，请重新上传！`
+        })
+      }
+      resolve(true)
+    })
+  }
+  // 检查文件类型
+  const checkFileType = (file: File) => {
+    const fileType: any = mime.getExtension(file.type)
+    console.log('fileType', mime.getExtension(file.type))
+    return new Promise((resolve, reject) => {
+      const _accept = unref(getAccept)
+      if (_accept.length > 0 && !_accept.includes(fileType)) {
+        reject({
+          status: ErrorStatus.FILE_TYPE,
+          text: `${file.name} 文件类型不符合，请重新上传！`
+        })
+      }
+      resolve(true)
+    })
+  }
+  // 根据文件类型 结合历史文件(fileList)，添加数量限制
+  const checkFileLimit = (fileList: File[]) => {
+    return new Promise((resolve, reject) => {
+      const rmsMaxFileArrValue = unref(rmsMaxFileArr) || []
+      if (rmsMaxFileArrValue.length > 0) {
+        rmsMaxFileArrValue?.forEach((item) => {
+          const fileType = item.accept
+          const fileCount = fileList.filter((file) => {
+            const fileFileType: any = mime.getExtension(file.type)
+            console.log(fileType.includes(fileFileType))
+            return fileType.includes(fileFileType)
+          }).length
+          console.log(item)
+          console.log('fileCount', fileCount, item.maxNum, item.historyNum)
+          if (item.maxNum < item.historyNum + fileCount) {
+            reject({
+              status: ErrorStatus.FILE_ACCEPT_NUMBER,
+              text: `一次性最多上传${item.maxNum}个${item.accept}文件，请重新上传！`
+            })
+          }
+        })
+      }
+      resolve(true)
+    })
+  }
+  return {
+    getAccept,
+    getStringAccept,
+    checkFileSize,
+    checkFileNumber,
+    checkFileNameLength,
+    checkFileType,
+    checkFileLimit
+  }
+}

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
-}