@complex-suite/component-antd 4.10.12

package/src/TableView.tsx

@@ -0,0 +1,415 @@
+import { defineComponent, h, PropType } from "vue"
+import { Table } from 'ant-design-vue'
+import type { TableColumnType, TableProps } from 'ant-design-vue'
+import { deepCloneData, isArray, updateData } from "@complex-suite/utils"
+import { ComplexList, DefaultInfo, PaginationData, DefaultMod, DefaultList } from "@complex-suite/data"
+import type { orderType } from "@complex-suite/data"
+import PaginationView from "./components/PaginationView"
+import ChoiceInfo from "./components/ChoiceInfo.vue"
+import TableMenu from "./components/TableMenu"
+import type { TableMenuValue } from "./components/TableMenu"
+import antdConfig from "../antdConfig"
+
+export type customRenderPayload = { text: unknown, record: Record<PropertyKey, unknown>, index: number }
+
+export type ColumnItemType = TableColumnType
+
+export type autoType = {
+  expandWidth?: number
+  choiceWidth?: number
+  index?: {
+    prop: string
+    pagination: boolean
+  },
+  pagination?: {
+    auto?: boolean
+    default: string
+    front: string
+    end: boolean
+  }
+}
+
+export type tablePayload<T extends DefaultMod = (DefaultList | DefaultInfo)> = {
+  targetData: Record<PropertyKey, unknown>
+  type: string
+  index: number
+  payload: {
+    column: T
+  }
+}
+
+export interface TableViewDefaultProps {
+  listData?: ComplexList
+  columnList?: (DefaultList | DefaultInfo)[]
+  data?: Record<PropertyKey, unknown>[]
+  paginationData?: PaginationData
+  menu?: Record<string, TableMenuValue[]>
+  listProp?: string
+  auto?: autoType
+}
+
+export interface TableViewProps extends TableViewDefaultProps {
+  tableProps?: TableProps
+}
+
+export interface TableViewOption extends TableViewProps {
+  ref?: string
+  onMenu?: (prop: string, payload: tablePayload) => unknown
+  onPagination?: (prop: 'page' | 'size', page: number, size: number) => unknown
+  onChoice?: (idList: PropertyKey[], dataList: Record<PropertyKey, any>[]) => unknown
+  onSort?: (prop: PropertyKey, order: undefined | orderType) => unknown
+}
+
+export default defineComponent({
+  name: 'TableView',
+  emits: {
+    menu: (prop: string, _payload: tablePayload) => {
+      return typeof prop === 'string'
+    },
+    pagination: (prop: 'page' | 'size', _page: number, _size: number) => {
+      return prop === 'page' || prop === 'size'
+    },
+    choice: (_idList: PropertyKey[], _dataList: Record<PropertyKey, any>[]) => {
+      return true
+    },
+    sort: (_prop: PropertyKey, _order: undefined | orderType) => {
+      return true
+    },
+  },
+  props: {
+    listData: {
+      type: Object as PropType<TableViewProps['listData']>,
+      required: false
+    },
+    columnList: { // 定制列配置
+      type: Object as PropType<TableViewProps['columnList']>,
+      required: false
+    },
+    data: { // 单独指定列表数据，不从listData.$list中取值
+      type: Array as PropType<TableViewProps['data']>,
+      required: false
+    },
+    paginationData: { // 单独制定分页器数据，不从listData中取值
+      type: Object as PropType<TableViewProps['paginationData']>,
+      required: false,
+      default: null
+    },
+    menu: {
+      type: Object as PropType<TableViewProps['menu']>,
+      required: false
+    },
+    tableProps: {
+      type: Object as PropType<TableViewProps['tableProps']>,
+      required: false
+    },
+    listProp: {
+      type: String,
+      required: false,
+      default: 'list'
+    },
+    auto: {
+      type: Object as PropType<TableViewProps['auto']>,
+      required: false
+    }
+  },
+  data () {
+    return {}
+  },
+  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
+      }
+    },
+    currentSort() {
+      return this.listData?.$module.sort
+    },
+    currentColumnList() {
+      const list = []
+      const columnList = this.columnList || this.listData!.getDictionaryPageList(this.listProp, this.listData!.getDictionaryList(this.listProp)!) as DefaultList[]
+      for (let i = 0; i < columnList.length; i++) {
+        const column = columnList[i]
+        const currentProp = column.$prop
+        const targetRender = this.$slots[currentProp] || antdConfig.componentConfig.parseData(column.$renders, 'target')
+        const pureRender = antdConfig.componentConfig.parseData(column.$renders, 'pure')
+        const menuOption = antdConfig.componentConfig.parseData(this.menu, currentProp)
+        const attrs = antdConfig.componentConfig.parseData(column.$local, 'target')
+        const columnItem: ColumnItemType = {
+          dataIndex: currentProp,
+          title: column.$name,
+          align: (column as DefaultList).align,
+          width: column.$width,
+          ellipsis: (column as DefaultList).ellipsis,
+          ...antdConfig.componentConfig.parseAttrs(attrs)
+        }
+        if (this.currentSort) {
+          const config = this.currentSort.getConfig(currentProp)
+          if (config !== false) {
+            columnItem.sorter = config || true
+            if (currentProp === this.currentSort.getValue()) {
+              const order = this.currentSort.getOrder()
+              columnItem.sortOrder = order ? order === 'asc' ? 'ascend' : 'descend' : null
+            }
+          }
+        }
+        if (!pureRender) {
+          if (!menuOption || targetRender) {
+            columnItem.customRender = ({ text, record, index }: customRenderPayload) => {
+              if (currentProp === this.currentAuto.index.prop && !targetRender) {
+                // 自动index
+                return antdConfig.table.renderIndex(record, index, this.currentAuto.index.pagination ? this.currentPaginationData : undefined)
+              }
+              const payload: tablePayload = {
+                targetData: record,
+                type: this.listProp,
+                index: index,
+                payload: { column: column }
+              }
+              text = antdConfig.table.renderTableValue(text, payload)
+              if (targetRender) {
+                // 插槽
+                return targetRender({
+                  text: text,
+                  payload
+                })
+              }
+              if (columnItem.ellipsis) {
+                // 自动省略切自动换行
+                return antdConfig.table.renderAutoText(text as string, column, payload, antdConfig.componentConfig.parseData(column.$local, 'autoText'))
+              }
+              return text
+            }
+          } else {
+            columnItem.customRender = ({ record, index }: customRenderPayload) => {
+              const payload: tablePayload = {
+                targetData: record,
+                type: this.listProp,
+                index: index,
+                payload: { column: column }
+              }
+              return h(TableMenu, {
+                list: menuOption,
+                payload: payload,
+                onMenu: (prop: string, payload: tablePayload) => {
+                  this.$emit('menu', prop, payload)
+                }
+              })
+            }
+          }
+        } else {
+          columnItem.customRender = ({ text, record, index }: customRenderPayload) => {
+            const payload: tablePayload = {
+              targetData: record,
+              type: this.listProp,
+              index: index,
+              payload: { column: column }
+            }
+            return pureRender({
+              text: text,
+              payload
+            })
+          }
+        }
+        list.push(columnItem)
+      }
+      return list
+    },
+    currentTableProps() {
+      const currentTableProps = this.tableProps ? { ...this.tableProps } : {}
+      if (!currentTableProps.columns) {
+        currentTableProps.columns = this.currentColumnList
+      }
+      if (!currentTableProps.dataSource) {
+        currentTableProps.dataSource = this.currentData
+      }
+      if (!currentTableProps.rowKey) {
+        currentTableProps.rowKey = this.listData?.getDictionaryProp('id') as string
+      }
+      if (currentTableProps.pagination == undefined) {
+        currentTableProps.pagination = false
+      }
+      const choice = this.listData?.$module.choice
+      if (choice) {
+        currentTableProps.rowSelection = {
+          columnWidth: 50,
+          selectedRowKeys: choice.data.id as (string | number)[],
+          onChange: (selectedRowKeys: (string | number)[], selectedRows: Record<string, unknown>[]) => {
+            const currentIdList = this.currentIdList
+            for (let i = 0; i < choice.data.id.length; i++) {
+              const rowKey = choice.data.id[i] as (string | number)
+              if (currentIdList.indexOf(rowKey) > -1) {
+                // 当前页数据
+                if (selectedRowKeys.indexOf(rowKey) === -1) {
+                  // 已经被取消选择的数据,从数据中删除
+                  choice.data.id.splice(i, 1)
+                  choice.data.list.splice(i, 1)
+                  i--
+                }
+              }
+            }
+            choice.pushData(selectedRowKeys, selectedRows)
+            this.$emit('choice', choice.data.id, choice.data.list)
+          },
+          ...antdConfig.componentConfig.parseAttrs(antdConfig.componentConfig.parseData(choice.$local, 'target'))
+        }
+      }
+      if (this.currentSort) {
+        const onChange = currentTableProps.onChange
+        currentTableProps.onChange = (pagination, filters, sorter, extra) => {
+          if (extra.action === 'sort') {
+            // 排序变换时
+            let prop: undefined | string | number
+            let order: undefined | orderType
+            if (!isArray(sorter)) {
+              prop = sorter.field as string | number
+              order = sorter.order ? sorter.order === 'ascend' ? 'asc' : 'desc' : undefined
+            } else {
+              prop = sorter[0].field as string | number
+              order = sorter[0].order ? sorter[0].order === 'ascend' ? 'asc' : 'desc' : undefined
+            }
+            this.currentSort!.setData(prop, order)
+            const sortConfig = this.currentSort!.getConfig(prop)
+            if (sortConfig === true || sortConfig === undefined) {
+              // 配置项默认或为真时，自动重新获取数据
+              if (this.currentAuto.sort.auto) {
+                this.listData?.reloadData({
+                  data: true,
+                  ing: true,
+                  sync: true,
+                  trigger: {
+                    from: 'sort',
+                    action: 'order'
+                  }
+                })
+              }
+            }
+            this.$emit('sort', prop, order)
+          }
+          if (onChange) {
+            onChange(pagination, filters, sorter, extra)
+          }
+        }
+      }
+      return currentTableProps
+    },
+  },
+  methods: {
+    renderTable() {
+      return h('div', { class: 'complex-table-content' }, {
+        default: () => [
+          h(Table, {
+            ...this.currentTableProps
+          })
+        ]
+      })
+    },
+    renderFooter() {
+      const render = h('div', { class: 'complex-table-footer' }, {
+        default: () => [this.renderFooterLeft(), this.renderFooterRight()]
+      })
+      return render
+    },
+    renderFooterLeft() {
+      const render = h('div', { class: 'complex-table-footer-left' }, {
+        default: () => [this.renderChoiceInfo()]
+      })
+      return render
+    },
+    renderChoiceInfo() {
+      const choice = this.listData?.$module.choice
+      if (choice) {
+        const infoRender = antdConfig.componentConfig.parseData(choice.$renders, 'info')
+        if (!infoRender) {
+          return h(ChoiceInfo, {
+            class: 'complex-table-choice-info',
+            choice: choice,
+            ...antdConfig.componentConfig.parseAttrs(antdConfig.componentConfig.parseData(choice.$local, 'info'))
+          })
+        } else {
+          return infoRender({
+            choice: choice,
+            ...antdConfig.componentConfig.parseAttrs(antdConfig.componentConfig.parseData(choice.$local, 'info'))
+          })
+        }
+      } else {
+        return null
+      }
+    },
+    renderFooterRight() {
+      const render = h('div', { class: 'complex-table-footer-right' }, {
+        default: () => [this.renderPagination()]
+      })
+      return render
+    },
+    renderPagination() {
+      if (this.currentPaginationData) {
+        const data = h(PaginationView, {
+          pagination: this.currentPaginationData,
+          assign: true,
+          style: {
+            padding: '10px 0'
+          },
+          onPage: (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' }, {
+      default: () => [this.renderTable(), this.renderFooter()]
+    })
+    return render
+  }
+})

package/src/components/AutoRender.tsx

@@ -0,0 +1,19 @@
+import { defineComponent, PropType } from "vue"
+
+export default defineComponent({
+  name: 'AutoRender',
+  props: {
+    render: {
+      type: Function as PropType<() => unknown>,
+      required: true
+    }
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    return this.render()
+  }
+})

package/src/components/ChoiceInfo.vue

@@ -0,0 +1,73 @@
+<style scoped>
+.complex-choice-info{
+  padding: 10px 0px;
+  line-height: 32px;
+  margin: 0;
+}
+.complex-choice-info-menu{
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>
+<template>
+  <p class="complex-choice-info" v-if="show" >
+    <span v-show="size > 0" class="complex-choice-info-content" >{{ currentFormatInfo(payload) }}</span>
+    <span v-show="size === 0" class="complex-choice-info-content-empty complex-color-disabled" >{{ emptyContent }}</span>
+    <span v-if="menu" v-show="size > 0" class="complex-choice-info-menu complex-color-link" @click="onCancel" >取消选择</span>
+  </p>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from "vue"
+import { ChoiceData } from "@complex-suite/data"
+import antdConfig from "../../antdConfig"
+
+export default defineComponent({
+  name: 'ChoiceInfo',
+  props: {
+    choice: {
+      type: Object as PropType<ChoiceData>,
+      required: true
+    },
+    show: {
+      type: Boolean,
+      required: false,
+      default: () => antdConfig.choice.show
+    },
+    menu: {
+      type: Boolean,
+      required: false,
+      default: () => antdConfig.choice.menu
+    },
+    formatInfo: {
+      type: Function as PropType<(payload: { choice: ChoiceData, size: number, menu: boolean }) => string>,
+      required: false
+    },
+    emptyContent: {
+      type: String,
+      required: false,
+      default: () => antdConfig.choice.emptyContent
+    },
+  },
+  computed: {
+    size() {
+      return this.choice.getId().length
+    },
+    payload() {
+      return {
+        choice: this.choice,
+        size: this.size,
+        menu: this.menu
+      }
+    },
+    currentFormatInfo() {
+      return this.formatInfo || antdConfig.choice.formatInfo
+    }
+  },
+  methods: {
+    onCancel() {
+      this.choice.reset()
+    }
+  }
+})
+</script>

package/src/components/PaginationView.tsx

@@ -0,0 +1,103 @@
+import { defineComponent, h, PropType } from "vue"
+import { Pagination } from "ant-design-vue"
+import { AttrsValue, PaginationData } from "@complex-suite/data"
+import antdConfig from "../../antdConfig"
+
+export default defineComponent({
+  name: 'PaginationView',
+  emits: {
+    page: (_page: number, _size: number) => true,
+    size: (_page: number, _size: number) => true,
+  },
+  props: {
+    pagination: {
+      type: Object as PropType<PaginationData>,
+      required: true
+    },
+    assign: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    simple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    formatInfo: {
+      type: Function as PropType<(payload: { pagination: PaginationData }) => string>,
+      required: false
+    }
+  },
+  computed: {
+    payload() {
+      return {
+        pagination: this.pagination
+      }
+    },
+    currentFormatInfo() {
+      return this.formatInfo || antdConfig.pagination.formatInfo
+    }
+  },
+  methods: {
+    renderSlot() {
+      const slot = this.$slots.default || antdConfig.componentConfig.parseData(this.pagination.$renders, 'slot')
+      return slot ? slot(this.payload) : null
+    },
+    renderInfo() {
+      if (!this.simple) {
+        const infoRender = antdConfig.componentConfig.parseData(this.pagination.$renders, 'info')
+        return h('span', {
+          class: 'complex-pagination-info'
+        }, {
+          default: () => !infoRender ? this.currentFormatInfo(this.payload) : infoRender(this.payload)
+        })
+      } else {
+        return null
+      }
+    },
+    renderPagination() {
+      const targetRender = antdConfig.componentConfig.parseData(this.pagination.$renders, 'target')
+      if (!targetRender) {
+        const paginationAttrs = new AttrsValue({
+          props: {
+            current: this.pagination.page.data,
+            total: this.pagination.count,
+            pageSize: this.pagination.size.data,
+            pageSizeOptions: this.pagination.size.list.map(item => item.toString()),
+            showSizeChanger: this.pagination.size.show,
+            showQuickJumper: this.pagination.jumper,
+            simple: this.simple
+          },
+          on: {
+            change: (page: number, size: number) => {
+              if (this.assign !== false) {
+                this.pagination.setPage(page)
+              }
+              this.$emit('page', page, size)
+            },
+            showSizeChange: (page: number, size: number) => {
+              if (this.assign !== false) {
+                this.pagination.setPageAndSize({ page, size })
+              }
+              this.$emit('size', page, size)
+            }
+          }
+        })
+        return h(Pagination, antdConfig.componentConfig.parseAttrs(paginationAttrs.merge(this.pagination.$attrs)))
+      } else {
+        return targetRender(this.payload)
+      }
+    }
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    return h('div', { class: 'complex-pagination' }, {
+      default: () => [this.renderSlot(), this.renderInfo(), this.renderPagination()]
+    })
+  }
+})

package/src/components/TableMenu.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, h, PropType } from "vue"
+import { camelToLine, debounce } from "@complex-suite/utils"
+import type { MenuValue, DefaultMod } from "@complex-suite/data"
+import type { tablePayload } from "../TableView"
+import antdConfig from "../../antdConfig"
+
+export interface TableMenuValue extends MenuValue<never, [tablePayload<DefaultMod>]> {
+  color?: string
+  class?: string[] | ((payload: tablePayload<DefaultMod>) => string[])
+  option?: Record<string, unknown>
+  children?: TableMenuValue[]
+}
+
+export default defineComponent({
+  name: 'TableMenu',
+  props: {
+    list: {
+      type: Object as PropType<TableMenuValue[]>,
+      required: true
+    },
+    payload: {
+      type: Object as PropType<tablePayload<DefaultMod>>,
+      required: true
+    }
+  },
+  methods: {
+    renderList(menuList: TableMenuValue[], payload: tablePayload<DefaultMod>) {
+      return menuList.map((menuItem) => {
+        let hidden = menuItem.hidden
+        if (hidden) {
+          if (typeof hidden === 'function') {
+            hidden = hidden(payload)
+          }
+          if (hidden) {
+            return null
+          }
+        }
+
+        let disabled = menuItem.disabled
+        if (disabled && typeof disabled === "function") {
+          disabled = disabled(payload)
+        }
+
+        let classList = ["complex-table-menu-item"]
+        if (menuItem.color) {
+          classList.push("complex-color-" + camelToLine(menuItem.color, "-"))
+        }
+        if (disabled) {
+          classList.push("complex-disabled complex-color-disabled")
+        }
+        if (menuItem.class) {
+          classList = classList.concat(typeof menuItem.class === "function" ? menuItem.class(payload) : menuItem.class)
+        }
+
+        const onClick = (e: MouseEvent) => {
+          if (menuItem.modifiers) {
+            if (menuItem.modifiers.includes('.stop')) {
+              e.stopPropagation()
+            }
+            if (menuItem.modifiers.includes('.prevent')) {
+              e.preventDefault()
+            }
+          }
+          antdConfig.parseMenuConfirm(menuItem.confirm, () => {
+            this.$emit("menu", menuItem.prop, payload);
+          })
+        }
+
+        return h(
+          "span",
+          {
+            class: classList.join(" "),
+            onClick: menuItem.debounce ? debounce(onClick, menuItem.debounce, true) : onClick,
+            ...menuItem.option,
+          },
+          { default: () => menuItem.name }
+        )
+      })
+    },
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    return h('span', {
+      class: 'complex-table-menu'
+    }, {
+      default: () => this.renderList(this.list, this.payload)
+    })
+  }
+})