@complex-suite/component-antd 4.10.12

package/src/SearchArea.tsx

@@ -0,0 +1,170 @@
+import { defineComponent, h, PropType, VNode } from "vue"
+import { DefaultInfo, SearchData } from "@complex-suite/data"
+import type { DictionaryEditMod } from "@complex-suite/data"
+import EditView from "./EditView"
+import type { EditViewDefaultProps } from "./EditView"
+import type { AutoItemPayloadType } from "./dictionary/AutoItem"
+import antdConfig from "../antdConfig"
+
+export interface SearchAreaProps extends EditViewDefaultProps {
+  search: SearchData
+  searchMenu?: (string | DictionaryEditMod)[]
+  inline?: boolean
+  collapseMenuRender?: (collapse: boolean) => null | VNode | VNode[]
+}
+
+export interface SearchAreaOption extends SearchAreaProps {
+  ref?: string
+  onMenu?: (prop: string, payload: AutoItemPayloadType<'edit'>) => unknown
+  onEnter?: (prop: string, payload: AutoItemPayloadType<'edit'>) => unknown
+}
+
+export default defineComponent({
+  name: 'SearchArea',
+  emits: {
+    menu: (prop: string, _payload: AutoItemPayloadType<'edit'>) => {
+      return !!prop
+    },
+    enter: (prop: string, _payload: AutoItemPayloadType<'edit'>) => {
+      return !!prop
+    }
+  },
+  props: {
+    search: {
+      type: Object as PropType<SearchAreaProps['search']>,
+      required: true
+    },
+    searchMenu: {
+      type: Object as PropType<SearchAreaProps['searchMenu']>,
+      required: false
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.search.inline
+      }
+    },
+    formProps: { // form-model-view设置项
+      type: Object as PropType<SearchAreaProps['formProps']>,
+      required: false
+    },
+    choice: {
+      type: Number,
+      required: false
+    },
+    menu: {
+      type: Object as PropType<SearchAreaProps['menu']>,
+      required: false
+    },
+    labelAlign: { // label 标签的文本对齐方式
+      type: String as PropType<SearchAreaProps['labelAlign']>,
+      required: false
+    },
+    gridParse: {
+      type: Object as PropType<SearchAreaProps['gridParse']>,
+      required: false
+    },
+    gridRowProps: { // form-model-view设置项
+      type: Object as PropType<SearchAreaProps['gridRowProps']>,
+      required: false
+    },
+    enter: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    collapseMenuRender: {
+      type: Object as PropType<SearchAreaProps['collapseMenuRender']>,
+      required: false
+    },
+    collapse: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.search.collapse
+      }
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    currentSearchMenu() {
+      const currentSearchMenu = this.searchMenu ? this.search.$menu.list.concat(this.searchMenu) : this.search.$menu.list
+      return currentSearchMenu.map(menuOption => {
+        if (typeof menuOption === 'string') {
+          menuOption = SearchData.$getMenu(menuOption)!
+        }
+        return menuOption
+      }) as DefaultInfo[]
+    },
+    currentMenu() {
+      if (this.menu) {
+        return this.currentSearchMenu!.concat(this.menu)
+      } else {
+        return this.currentSearchMenu
+      }
+    }
+  },
+  methods: {
+    renderEdit(runtime: NonNullable<SearchData['$runtime']>) {
+      return h(EditView, {
+        form: runtime.form,
+        list: runtime.list,
+        type: this.search.$prop,
+        menu: this.currentMenu,
+        labelAlign: this.labelAlign,
+        gridParse: this.inline ? undefined : (this.gridParse || this.search.$layout.grid.getValue(this.search.$prop)),
+        gridRowProps: this.gridRowProps!,
+        formProps: this.formProps,
+        choice: this.choice,
+        enter: this.enter,
+        collapse: this.search.$collapse,
+        disabled: this.disabled,
+        loading: this.loading,
+        onMenu: (prop: string, payload: AutoItemPayloadType<'edit'>) => {
+          this.$emit('menu', prop, payload)
+        },
+        onEnter: (prop: string, payload: AutoItemPayloadType<'edit'>) => {
+          this.$emit('enter', prop, payload)
+        }
+      })
+    },
+    renderCollapseMenu() {
+      if (this.collapse && this.search.$collapse !== undefined) {
+        // 存在值时则进行展示
+        return h('div',
+          {
+            class: 'complex-search-area-collapse-menu'
+          },
+          [
+            !this.collapseMenuRender ? antdConfig.collapseMenuRender(this.search.$collapse, this.search) : this.collapseMenuRender(this.search.$collapse)
+          ]
+        )
+      } else {
+        return null
+      }
+    }
+  },
+  render() {
+    if (this.search.$runtime) {
+      return h('div',
+        {
+          class: 'complex-search-area'
+        },
+        [
+          this.renderEdit(this.search.$runtime),
+          this.renderCollapseMenu()
+        ]
+      )
+    } else {
+      return null
+    }
+  }
+})

package/src/SelectText.vue

@@ -0,0 +1,59 @@
+<template>
+  <span class="complex-select-text" :style="style" >{{ !format ? value ? value.label : missValue : format(value) }}</span>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from "vue"
+import { dataConfig } from "@complex-suite/data"
+import type { SelectValueType } from "@complex-suite/data"
+
+export default defineComponent({
+  name: 'SelectText',
+  props: {
+    value: {
+      type: Object as PropType<SelectValueType>,
+      required: false
+    },
+    color: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    format: {
+      type: Function as PropType<(value?: SelectValueType) => string>,
+      required: false
+    },
+    missValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    emptyValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+  },
+  computed: {
+    style() {
+      if (this.value && this.color) {
+        return {
+          color: this.disabled ? dataConfig.style.color.disabled : this.value.$color ? dataConfig.style.color[this.value.$color] : this.value.color ? this.value.color : this.value.disabled ? dataConfig.style.color.disabled : undefined
+        }
+      }
+    }
+  },
+  methods: {
+    currentText() {
+      const value = this.value
+      const format = this.format
+      return !format ? value ? value.label : this.missValue : format(value) ?? this.emptyValue
+    }
+  }
+})
+</script>

package/src/SimpleTable.tsx

@@ -0,0 +1,256 @@
+import { defineComponent, h, PropType, VNode } from "vue"
+import { Empty } from "ant-design-vue"
+import { deepCloneData, updateData } from "@complex-suite/utils"
+import { DefaultInfo, dataConfig, DefaultList } from "@complex-suite/data"
+import PaginationView from "./components/PaginationView"
+import TableMenu from "./components/TableMenu"
+import type { tablePayload, TableViewDefaultProps } from "./TableView"
+import antdConfig from "../antdConfig"
+
+export interface SimpleTableProps extends TableViewDefaultProps {
+  lineHeight?: number
+}
+
+export default defineComponent({
+  name: 'SimpleTable',
+  emits: {
+    menu: (prop: string, _payload: tablePayload) => {
+      return typeof prop === 'string'
+    },
+    pagination: (prop: 'page' | 'size', _page: number, _size: number) => {
+      return prop === 'page' || prop === 'size'
+    },
+  },
+  props: {
+    listData: {
+      type: Object as PropType<SimpleTableProps['listData']>,
+      required: false
+    },
+    columnList: { // 定制列配置
+      type: Object as PropType<SimpleTableProps['columnList']>,
+      required: false
+    },
+    data: { // 单独指定列表数据，不从listData.$list中取值
+      type: Array as PropType<SimpleTableProps['data']>,
+      required: false
+    },
+    paginationData: { // 单独制定分页器数据，不从listData中取值
+      type: Object as PropType<SimpleTableProps['paginationData']>,
+      required: false,
+      default: null
+    },
+    menu: {
+      type: Object as PropType<SimpleTableProps['menu']>,
+      required: false
+    },
+    listProp: {
+      type: String,
+      required: false,
+      default: 'list'
+    },
+    auto: {
+      type: Object as PropType<SimpleTableProps['auto']>,
+      required: false
+    },
+    lineHeight: {
+      type: Number as PropType<SimpleTableProps['lineHeight']>,
+      required: false
+    }
+  },
+  computed: {
+    currentData () {
+      if (this.data) {
+        return this.data
+      } else {
+        return this.listData?.$list!
+      }
+    },
+    currentIdList() {
+      return this.currentData.map(item => {
+        return item[this.listData!.getDictionaryProp('id')!]
+      })
+    },
+    currentAuto() {
+      return updateData(deepCloneData(antdConfig.table.auto), this.auto)
+    },
+    currentPaginationData() {
+      if (this.paginationData) {
+        return this.paginationData
+      } else {
+        return this.listData?.$module.pagination
+      }
+    },
+    currentColumnList() {
+      return this.columnList || this.listData!.getDictionaryPageList(this.listProp, this.listData!.getDictionaryList(this.listProp)!) as DefaultList[]
+    },
+    isEmpty() {
+      return !this.currentData || this.currentData.length === 0
+    }
+  },
+  methods: {
+    rowWidth(column: DefaultList | DefaultInfo) {
+      if (column.$width) {
+        return {
+          width: typeof column.$width === 'number' ? dataConfig.formatPixel(column.$width) : column.$width
+        }
+      } else {
+        return undefined
+      }
+    },
+    renderTable() {
+      return h('div', { class: 'complex-table-content complex-simple-table-content' }, {
+        default: () => [
+          this.currentColumnList.map(column => this.renderColumn(column))
+        ]
+      })
+    },
+    renderColumn(column: DefaultList | DefaultInfo) {
+      return h('div', {
+        class: 'complex-simple-table-content-column complex-simple-table-content-column-' + ((column as DefaultList).align || 'left'),
+        style: this.rowWidth(column)
+      }, [
+        h('div', {
+          class: 'complex-simple-table-content-header'
+        }, column.$name),
+        !this.isEmpty ? this.currentData.map((val, index) => {
+          return h('div', {
+            class: 'complex-simple-table-content-row'
+          }, [
+            this.renderContent(column, val, index)
+          ])
+        }) : null
+      ])
+    },
+    renderEmpty() {
+      return !this.isEmpty ? null : h('div', {
+        class: 'complex-simple-table-content-empty'
+      }, [
+        h(Empty, {
+          "image": Empty.PRESENTED_IMAGE_SIMPLE
+        })
+      ])
+    },
+    renderContent(column: DefaultList | DefaultInfo, record: Record<PropertyKey, unknown>, index: number) {
+      const content = this.$renderContent(column, record, index)
+      if (!this.lineHeight) {
+        return content
+      } else {
+        return h('div', {
+          style: {
+            height: dataConfig.formatPixel(this.lineHeight)
+          }
+        }, content)
+      }
+    },
+    $renderContent(column: DefaultList | DefaultInfo, record: Record<PropertyKey, unknown>, index: number) {
+      const payload: tablePayload = {
+        targetData: record,
+        type: this.listProp,
+        index: index,
+        payload: { column: column }
+      }
+      const text = antdConfig.table.renderTableValue(record[column.$prop], payload)
+      const targetRender = antdConfig.componentConfig.parseData(column.$renders, 'target')
+      const pureRender = antdConfig.componentConfig.parseData(column.$renders, 'pure')
+      const menuOption = antdConfig.componentConfig.parseData(this.menu, column.$prop)
+      if (pureRender) {
+        return pureRender({
+          text: text,
+          payload
+        }) as VNode | VNode[]
+      } else if (targetRender) {
+        return targetRender({
+          text: text,
+          payload
+        }) as VNode | VNode[]
+      } else if (menuOption) {
+        return h(TableMenu, {
+          list: menuOption,
+          payload: payload,
+          onMenu: (prop: string, payload: tablePayload) => {
+            this.$emit('menu', prop, payload)
+          }
+        })
+      } else if (column.$prop === this.currentAuto.index.prop) {
+        return antdConfig.table.renderIndex(record, index, this.currentAuto.index.pagination ? this.currentPaginationData : undefined)
+      } else if ((column as DefaultList).ellipsis) {
+        // 自动省略切自动换行
+        return antdConfig.table.renderAutoText(text as string, column, payload, antdConfig.componentConfig.parseData(column.$local, 'autoText'))
+      } else {
+        return h('p', antdConfig.componentConfig.parseAttrs(antdConfig.componentConfig.parseData(column.$local, 'target')), {
+          default: () => text
+        })
+      }
+    },
+    renderFooter() {
+      const render = h('div', { class: 'complex-table-footer complex-simple-table-footer' }, {
+        default: () => [this.renderFooterLeft(), this.renderFooterRight()]
+      })
+      return render
+    },
+    renderFooterLeft() {
+      const render = h('div', { class: 'complex-table-footer-left complex-simple-table-footer-left' }, {
+        default: () => null
+      })
+      return render
+    },
+    renderFooterRight() {
+      const render = h('div', { class: 'complex-table-footer-right complex-simple-table-footer-right' }, {
+        default: () => [this.renderPagination()]
+      })
+      return render
+    },
+    renderPagination() {
+      if (this.currentPaginationData) {
+        const data = h(PaginationView, {
+          pagination: this.currentPaginationData,
+          style: {
+            padding: '10px 0'
+          },
+          onCurrent: (page: number, size: number) => {
+            if (this.currentAuto.pagination.auto) {
+              this.listData?.reloadData({
+                data: true,
+                ing: true,
+                sync: true,
+                trigger: {
+                  from: 'pagination',
+                  action: 'page'
+                }
+              })
+            }
+            this.$emit('pagination', 'page', page, size)
+          },
+          onSize: (page: number, size: number) => {
+            if (this.currentAuto.pagination.auto) {
+              this.listData?.reloadData({
+                data: true,
+                ing: true,
+                sync: true,
+                trigger: {
+                  from: 'pagination',
+                  action: 'size'
+                }
+              })
+            }
+            this.$emit('pagination', 'size', page, size)
+          }
+        })
+        return data
+      } else {
+        return null
+      }
+    }
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    const render = h('div', { class: 'complex-table complex-simple-table' }, {
+      default: () => [this.renderTable(), this.renderEmpty(), this.renderFooter()]
+    })
+    return render
+  }
+})

package/src/SingleImport.tsx

@@ -0,0 +1,189 @@
+import { defineComponent, h, PropType, ref, watch, VNode } from "vue"
+import { useInjectFormItemContext } from "ant-design-vue/es/form"
+import type { defaultFileOption, fileDataType } from "@complex-suite/data"
+import type { FileEditOption } from "@complex-suite/data"
+import { FileValue } from "@complex-suite/data"
+import type { fileValueType } from "@complex-suite/data"
+import { FileView } from "@complex-suite/component"
+import type { FileProps } from "@complex-suite/component"
+import antdConfig from "../antdConfig"
+
+export interface DefaultImportProps {
+  button?: defaultFileOption['button']
+  complex?: defaultFileOption['complex']
+  isUrl?: defaultFileOption['isUrl']
+  image?: defaultFileOption['image']
+  loading?: boolean
+  render?: {
+    menu?: () => (VNode | VNode[])
+    content?: () => (VNode | VNode[])
+  }
+}
+
+export interface SingleImportProps extends FileProps, DefaultImportProps {
+  value?: fileValueType
+  upload?: FileEditOption<false>['upload']
+}
+
+export const defaultUpload = function(file: File) {
+  return Promise.resolve({ file: { value: file, name: file.name } })
+} as NonNullable<SingleImportProps['upload']>
+
+export default defineComponent({
+  name: 'SingleImport',
+  props: {
+    value: {
+      type: [String, Object] as PropType<SingleImportProps['value']>
+    },
+    button: {
+      type: Object as PropType<SingleImportProps['button']>,
+      required: false
+    },
+    complex: {
+      type: Boolean as PropType<SingleImportProps['complex']>,
+      required: false
+    },
+    isUrl: {
+      type: Boolean as PropType<SingleImportProps['isUrl']>,
+      required: false
+    },
+    image: {
+      type: Object as PropType<SingleImportProps['image']>,
+      required: false
+    },
+    upload: {
+      type: Function as PropType<SingleImportProps['upload']>,
+      required: false
+    },
+    render: {
+      type: Object as PropType<SingleImportProps['render']>,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    },
+    accept: {
+      type: String,
+      required: false
+    },
+    size: { // MB
+      type: Number,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const formItemContext = useInjectFormItemContext()
+    const parseValue = function (value?: fileValueType) {
+      return value ? new FileValue(value, props.isUrl) : undefined
+    }
+    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
+      }
+      data.value = parseValue(props.value)
+    }
+
+    watch(() => props.value, () => {
+      syncValue()
+      formItemContext.onFieldChange()
+    })
+
+    const onSelect = (file: File) => {
+      operate.value = true;
+      (props.upload || defaultUpload)(file).then(res => {
+        onUpload(res.file, true)
+      }).catch((err: unknown) => {
+        console.error(err)
+      }).finally(() => {
+        operate.value = false
+      })
+    }
+
+    const onUpload = (file: fileDataType, emit?: boolean) => {
+      if (!data.value || data.value.value !== file.value) {
+        currentValue.value = !props.complex ? file.value : file
+        data.value = new FileValue(file, props.isUrl)
+        if (emit) {
+          emitData()
+        }
+      }
+    }
+
+    const emitData = () => {
+      emit('change', currentValue.value)
+    }
+
+    const renderFile = () => {
+      return h(FileView, {
+        class: 'complex-import-file',
+        ref: 'file',
+        accept: props.accept,
+        disabled: props.disabled,
+        size: props.size,
+        onSelect: onSelect,
+        onChange(e: Event) {
+          e.stopPropagation() // 阻止事件冒泡
+        }
+      })
+    }
+
+    const deleteData = () => {
+      if (props.disabled || props.loading) {
+        return
+      }
+      currentValue.value = undefined
+      data.value = undefined
+      emitData()
+    }
+
+    const renderContent = (file?: FileValue) => {
+      return (file && file.value) ? antdConfig.import.renderContent(file, props.disabled, props.image, () => {
+        deleteData()
+      }) : null
+    }
+
+    return {
+      operate,
+      currentValue,
+      data,
+      onSelect,
+      onUpload,
+      emitData,
+      renderFile,
+      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: {
+          upload: this.upload,
+          value: this.currentValue,
+          data: this.data,
+        }
+      })
+    } else {
+      content = this.renderContent(this.data)
+    }
+    return h('div', {
+      class: 'complex-import',
+    }, {
+      default: () => [
+        this.renderFile(),
+        antdConfig.import.renderMenu(this as any),
+        content,
+      ]
+    })
+  }
+})