@complex-suite/component-antd 4.10.12

package/src/MenuView.tsx

@@ -0,0 +1,91 @@
+import { defineComponent, h, PropType } from "vue"
+import { Button } from "ant-design-vue"
+import type { ButtonType } from "ant-design-vue/es/button"
+import { isPromise } from "@complex-suite/utils"
+import type { MenuValue } from "@complex-suite/data"
+import icon from "../icon"
+import antdConfig from "../antdConfig"
+
+export default defineComponent({
+  name: 'MenuView',
+  props: {
+    data: {
+      type: Object as PropType<MenuValue<any>>,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      operate: false
+    }
+  },
+  render() {
+    if (!this.data.render) {
+      const type = this.data.type
+      let loading = this.operate
+      if (!loading) {
+        loading = this.loading || (typeof this.data.loading === 'function' ? this.data.loading() : (this.data.loading || false))
+      }
+      const disabled = this.disabled || (typeof this.data.disabled === 'function' ? this.data.disabled() : (this.data.disabled || false))
+      const render = h(Button, {
+        class: 'complex-menu',
+        loading: loading,
+        type: type === 'danger' ? 'primary' : type as ButtonType,
+        danger: type === 'danger',
+        icon: icon.parse(this.data.icon),
+        disabled: disabled,
+        onClick: (e: MouseEvent) => {
+          if (this.data.modifiers) {
+            if (this.data.modifiers.includes('.stop')) {
+              e.stopPropagation()
+            }
+            if (this.data.modifiers.includes('.prevent')) {
+              e.preventDefault()
+            }
+          }
+          antdConfig.parseMenuConfirm(this.data.confirm, () => {
+            this.$emit('click', e)
+            if (this.data.click) {
+              const res = this.data.click(e)
+              if (isPromise(res)) {
+                this.operate = true
+                res.finally(() => {
+                  if (this.data.debounce) {
+                    setTimeout(() => {
+                      this.operate = false
+                    }, this.data.debounce)
+                  } else {
+                    this.operate = false
+                  }
+                })
+              } else {
+                if (this.data.debounce) {
+                  this.operate = true
+                  setTimeout(() => {
+                    this.operate = false
+                  }, this.data.debounce)
+                }
+              }
+            }
+          })
+        },
+        ...this.$attrs
+      }, {
+        default: () => this.data.name
+      })
+      return render
+    } else {
+      return this.data.render({
+        data: this.data
+      })
+    }
+  }
+})

package/src/ModalView.tsx

@@ -0,0 +1,274 @@
+import { defineComponent, h, markRaw, PropType } from "vue"
+import { Modal } from "ant-design-vue"
+import type { ModalProps } from "ant-design-vue"
+import { deepCloneData, updateData } from "@complex-suite/utils"
+import { dataConfig } from "@complex-suite/data"
+import type { MenuValue } from "@complex-suite/data"
+import ButtonView from "./ButtonView"
+import antdConfig from "../antdConfig"
+
+export type modalLayoutOption = {
+  type: 'auto' | 'fixed'
+  top: number
+  bottom: number
+  header: number
+  menu: number
+  padding: [number, number, number, number]
+  mainPadding: [number, number, number, number]
+}
+
+export interface ModalViewProps {
+  width?: number
+  title?: string
+  destroyOnClose?: boolean
+  layout?: Partial<modalLayoutOption>
+  menu?: (string | MenuValue)[] // 菜单列表，字符串则通过config.modal.getMenu实现
+  menuOption?: Record<string, Partial<MenuValue>> // 根据prop匹配菜单列表中的字符串数据获取的默认值，通过可选参数重写属性
+  submit?: () => Promise<unknown>
+  modalProps?: ModalProps
+}
+
+export interface ModalViewSlotProps {
+  width: number
+  height: number
+  modal: any
+}
+
+export default defineComponent({
+  name: 'ModalView',
+  emits: {
+    // 关闭
+    close: (from: string) => {
+      return typeof from === 'string'
+    },
+    // 菜单
+    menu: (prop: string, _self: any) => {
+      return typeof prop === 'string'
+    }
+  },
+  props: {
+    width: {
+      type: Number,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    destroyOnClose: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.modal.destroyOnClose
+      }
+    },
+    layout: {
+      type: Object as PropType<ModalViewProps['layout']>,
+      required: false
+    },
+    menu: {
+      type: Object as PropType<ModalViewProps['menu']>,
+      required: false
+    },
+    menuOption: {
+      type: Object as PropType<ModalViewProps['menuOption']>,
+      required: false
+    },
+    submit: {
+      type: Function as PropType<ModalViewProps['submit']>,
+      required: false
+    },
+    modalProps: {
+      type: Object as PropType<ModalViewProps['modalProps']>,
+      required: false,
+      default: () => {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      $open: false,
+      localTitle: undefined as undefined | string,
+      localModalProps: undefined as undefined | ModalProps
+    }
+  },
+  computed: {
+    currentTitle() {
+      return this.localTitle || this.title
+    },
+    currentLayout() {
+      return updateData(deepCloneData(antdConfig.modal.layout), this.layout)
+    },
+    menuList() {
+      let menuList: MenuValue[]
+      const close = () => {
+        this.close('close')
+      }
+      const submit = () => {
+        if (this.submit) {
+          const promise = this.submit!()
+          promise.then(() => {
+            this.close('submit')
+          })
+          return promise
+        } else {
+          console.error('submit按钮需要定义对应的submit函数')
+        }
+      }
+      if (!this.menu) {
+        menuList = [
+          antdConfig.modal.getMenu('close', {
+            click: close
+          })
+        ]
+      } else {
+        menuList = this.menu.map(menu => {
+          if (typeof menu !== 'object') {
+            const menuOption = this.menuOption ? this.menuOption[menu] : undefined
+            if (menu === 'close' || menu === 'cancel') {
+              return antdConfig.modal.getMenu(menu, {
+                ...menuOption,
+                click: close
+              })
+            } else if (menu === 'submit') {
+              return antdConfig.modal.getMenu(menu, {
+                ...menuOption,
+                click: submit
+              })
+            } else {
+              return antdConfig.modal.getMenu(menu, {
+                ...menuOption,
+              })
+            }
+          } else {
+            return menu
+          }
+        })
+      }
+      return menuList
+    },
+    currentWidth() {
+      if (!this.width) {
+        return antdConfig.modal.width
+      } else {
+        return this.width
+      }
+    },
+    contentHeight() {
+      const mainHeight = document.documentElement.clientHeight
+      let height = mainHeight - this.currentLayout.top - this.currentLayout.bottom - this.currentLayout.header - this.currentLayout.padding[0] - this.currentLayout.padding[2] - this.currentLayout.mainPadding[0] - this.currentLayout.mainPadding[2]
+      if (this.menuList.length > 0) {
+        height = height - this.currentLayout.menu
+      }
+      return height
+    },
+    contentWidth() {
+      return this.currentWidth - this.currentLayout.padding[1] - this.currentLayout.padding[3] - this.currentLayout.mainPadding[1] - this.currentLayout.mainPadding[3]
+    }
+  },
+  methods: {
+    show(title?: string, option?: ModalProps) {
+      this.localTitle = title
+      this.localModalProps = option
+      this.$data.$open = true
+    },
+    close(from: string) {
+      this.$data.$open = false
+      this.localTitle = undefined
+      this.localModalProps = undefined
+      this.$emit('close', from)
+    },
+    renderContent() {
+      return this.$slots.default ? this.$slots.default({
+        width: this.contentWidth,
+        height: this.contentHeight,
+        modal: markRaw(this)
+      }) : null
+    },
+    onMenu(prop: string) {
+      this.$emit('menu', prop, this)
+    },
+    renderFooter() {
+      if (this.menuList.length > 0) {
+        return this.menuList.map(item => {
+          if (!item.render) {
+            const onClick = item.click
+            return h(ButtonView, {
+              data: {
+                ...item,
+                click: (payload: any) => {
+                  this.onMenu(item.prop!)
+                  if (onClick) {
+                    return onClick(payload)
+                  }
+                }
+              }
+            })
+          } else {
+            return item.render({
+              modal: this,
+              menuList: this.menuList,
+              menu: item
+            })
+          }
+        })
+      } else {
+        return null
+      }
+    }
+  },
+  render() {
+    const top = dataConfig.formatPixel(this.currentLayout.top)
+    const padding = this.currentLayout.padding.map(num => dataConfig.formatPixel(num)).join(' ')
+    interface ModalPropsWithClass extends ModalProps {
+      class: string
+    }
+    const props: ModalPropsWithClass = {
+      class: 'complex-modal',
+      open: this.$data.$open,
+      width: this.currentWidth,
+      title: this.currentTitle,
+      destroyOnClose: this.destroyOnClose,
+      ...this.modalProps,
+      ...this.localModalProps,
+      onCancel: (e: MouseEvent | KeyboardEvent) => {
+        if (e instanceof KeyboardEvent) {
+          this.close('escape')
+        } else {
+          const target = e.target as HTMLDivElement
+          if (target.classList.contains('ant-modal-wrap')) {
+            this.close('mask')
+          } else {
+            this.close('modal')
+          }
+        }
+      }
+    }
+    if (this.menuList.length === 0) {
+      props.footer = null
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!(props as any).style) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (props as any).style = {
+        top: top
+      }
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (props as any).style.top = top
+    }
+    if (!props.bodyStyle) {
+      props.bodyStyle = {
+        padding: padding
+      }
+    } else {
+      props.bodyStyle.padding = padding
+    }
+    const render = h(Modal, props, {
+      default: () => [this.renderContent()],
+      footer: () => this.renderFooter()
+    })
+    return render
+  }
+})

package/src/MultipleImport.tsx

@@ -0,0 +1,231 @@
+import { defineComponent, h, PropType, ref, watch, VNode, computed } from "vue"
+import { useInjectFormItemContext } from "ant-design-vue/es/form"
+import { notice } from "@complex-suite/plugin"
+import type { fileDataType } from "@complex-suite/data"
+import type { FileEditOption } from "@complex-suite/data"
+import { FileValue } from "@complex-suite/data"
+import { FileMultipleValue, type fileValueType } from "@complex-suite/data"
+import { FileView } from "@complex-suite/component"
+import type { FileProps, MultipleFileProps } from "@complex-suite/component"
+import type { DefaultImportProps } from "./SingleImport"
+import antdConfig from "../antdConfig"
+
+export interface MultipleImportProps extends FileProps, MultipleFileProps, DefaultImportProps{
+  value?: fileValueType[]
+  upload?: FileEditOption<true>['upload']
+}
+
+export const defaultMultipleUpload = function(fileList: File[]) {
+  return Promise.resolve({ file: fileList.map(file => { return { value: file, name: file.name} } ) })
+} as NonNullable<MultipleImportProps['upload']>
+
+export default defineComponent({
+  name: 'MultipleImport',
+  props: {
+    value: {
+      type: Array as PropType<MultipleImportProps['value']>
+    },
+    button: {
+      type: Object as PropType<MultipleImportProps['button']>,
+      required: false
+    },
+    complex: {
+      type: Boolean as PropType<MultipleImportProps['complex']>,
+      required: false
+    },
+    isUrl: {
+      type: Boolean as PropType<MultipleImportProps['isUrl']>,
+      required: false
+    },
+    image: {
+      type: Object as PropType<MultipleImportProps['image']>,
+      required: false
+    },
+    upload: {
+      type: Function as PropType<MultipleImportProps['upload']>,
+      required: false
+    },
+    render: {
+      type: Object as PropType<MultipleImportProps['render']>,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    },
+    accept: {
+      type: String,
+      required: false
+    },
+    size: { // MB
+      type: Number,
+      required: false
+    },
+    multiple: {
+      type: Object as PropType<MultipleImportProps['multiple']>,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const formItemContext = useInjectFormItemContext()
+    const parseValue = function (value?: fileValueType[]) {
+      return new FileMultipleValue((value || []).map(valueItem => new FileValue(valueItem, props.isUrl)))
+    }
+    const operate = ref(false)
+    const currentValue = ref(props.value)
+    const data = ref(parseValue(props.value))
+
+    const syncValue = () => {
+      // 此处基于外部数据整合内部数据
+      if (props.value !== currentValue.value) {
+        currentValue.value = props.value
+      }
+      // 多选模式下，value可能存在splice的改变或者是splice后重新赋值，此时需要将额外数据删除
+      if (props.value) {
+        data.value.assign(parseValue(props.value))
+      } else {
+        data.value.reset()
+      }
+    }
+
+    watch(() => props.value, () => {
+      syncValue()
+      formItemContext.onFieldChange()
+    })
+
+    const onSelect = (file: File[]) => {
+      operate.value = true;
+      (props.upload || defaultMultipleUpload)(file).then(res => {
+        onUpload(res.file, true)
+      }).catch((err: unknown) => {
+        console.error(err)
+      }).finally(() => {
+        operate.value = false
+      })
+    }
+
+    const max = computed(() => {
+      if (props.multiple) {
+        return props.multiple.max || 0
+      } else {
+        return 0
+      }
+    })
+
+    const onUpload = (fileList: fileDataType[], emit?: boolean) => {
+      if (currentValue.value) {
+        fileList.forEach(file => {
+          // 通过data判断，避免complex模式下的判断错误
+          if (!data.value.has(file.value)) {
+            currentValue.value!.push(!props.complex ? file.value : file)
+            data.value.push(new FileValue(file, props.isUrl))
+          }
+        })
+      } else {
+        currentValue.value = []
+        fileList.forEach(file => {
+          currentValue.value!.push(!props.complex ? file.value : file)
+          data.value.push(new FileValue(file, props.isUrl))
+        })
+      }
+      if (max.value && currentValue.value.length > max.value) {
+        currentValue.value.length = max.value
+        data.value.truncation(max.value)
+        notice.message(`当前选择的文件数量超过限制值${max.value}，超过部分已被删除！`, 'error')
+      }
+      if (emit) {
+        emitData()
+      }
+    }
+
+    const emitData = () => {
+      emit('change', currentValue.value)
+      formItemContext.onFieldChange()
+    }
+
+    const renderFile = () => {
+      let disabled = props.disabled
+      if (max.value && currentValue.value && currentValue.value.length >= max.value) {
+        disabled = true
+      }
+      return h(FileView, {
+        class: 'complex-import-file',
+        ref: 'file',
+        accept: props.accept,
+        multiple: props.multiple,
+        disabled: disabled,
+        size: props.size,
+        onSelect: onSelect,
+        onChange(e: Event) {
+          e.stopPropagation() // 阻止事件冒泡
+        }
+      })
+    }
+
+    const renderList = (list: FileMultipleValue) => {
+      return h('div', {
+        class: !props.image ? 'complex-import-content-list' : 'complex-import-image-list'
+      }, {
+        default: () => list.value.map((file, index) => {
+          return renderContent(file, index)
+        })
+      })
+    }
+
+    const deleteData = (key: any, index: number) => {
+      if (props.disabled || props.loading) {
+        return
+      }
+      currentValue.value!.splice(index, 1)
+      data.value.delete(key)
+      emitData()
+    }
+
+    const renderContent = (file: FileValue, index: number) => {
+      return antdConfig.import.renderContent(file, props.disabled, props.image, () => {
+        deleteData(file.value, index)
+      })
+    }
+
+    return {
+      operate,
+      currentValue,
+      data,
+      onSelect,
+      onUpload,
+      emitData,
+      renderFile,
+      renderList,
+      deleteData,
+      renderContent
+    }
+  },
+  render() {
+    let content: null | VNode | VNode[]
+    if (this.$slots.content || (this.render && this.render.content)) {
+      content = (this.$slots.content || this.render!.content)!({
+        props: {
+          multiple: this.multiple,
+          upload: this.upload,
+          value: this.currentValue,
+          data: this.data
+        }
+      })
+    } else {
+      content = this.renderList(this.data)
+    }
+    return h('div', {
+      class: 'complex-import'
+    }, {
+      default: () => [
+        this.renderFile(),
+        antdConfig.import.renderMenu(this as any),
+        content
+      ]
+    })
+  }
+})