@complex-suite/component-antd 4.10.12

package/src/FormList.tsx

@@ -0,0 +1,226 @@
+import { defineComponent, h, PropType } from "vue"
+import { Form, FormItemRest, Table } from "ant-design-vue"
+import type { TableColumnType, TableProps } from "ant-design-vue"
+import { FormValue, ListEdit } from "@complex-suite/data"
+import MenuView from "./MenuView"
+import type { customRenderPayload, tablePayload } from "./TableView"
+import antdConfig from "../antdConfig"
+import AutoEditItem from "./dictionary/AutoEditItem"
+import type { AutoItemPayloadType } from "./dictionary/AutoItem"
+import AutoInfoItem from "./dictionary/AutoInfoItem"
+
+export default defineComponent({
+  name: 'FormList',
+  props: {
+    runtime: {
+      type: Object as PropType<ListEdit['$runtime']>,
+      required: true
+    },
+    value: {
+      type: Object as PropType<Record<PropertyKey, any>[]>,
+      required: false
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    header: {
+      type: Object as PropType<ListEdit['$option']['header']>,
+      required: false
+    },
+    menu: {
+      type: Object as PropType<ListEdit['$option']['menu']>,
+      required: false
+    },
+    tableProps: {
+      type: Object as PropType<TableProps>,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ['update:value', 'header'],
+  setup() {
+    const formItemContext = Form.useInjectFormItemContext()
+    console.log(formItemContext)
+  },
+  data () {
+    return {
+      currentValue: this.value || []
+    }
+  },
+  computed: {
+    currentColumnList() {
+      const list = []
+      const columnList = this.runtime.observeList?.data
+      if (columnList) {
+        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 attrs = antdConfig.componentConfig.parseData(column.$local, 'target')
+          const columnItem: TableColumnType = {
+            dataIndex: currentProp,
+            title: column.$name,
+            width: column.$width,
+            ellipsis: false,
+            ...antdConfig.componentConfig.parseAttrs(attrs)
+          }
+          if (!pureRender) {
+            if (!targetRender) {
+              columnItem.customRender = ({ record, index }: customRenderPayload) => {
+                if (currentProp === antdConfig.table.auto.index.prop) {
+                  // 自动index
+                  return antdConfig.table.renderIndex(record, index, undefined)
+                }
+                const form = this.runtime.formList![index]
+                if (antdConfig.isEdit(column)) {
+                  return h(FormItemRest, {}, {
+                    default: () => [
+                     h(AutoEditItem, {
+                        payload: {
+                          prop: currentProp,
+                          type: this.type,
+                          target: column,
+                          index: index,
+                          list: this.runtime.observeList!,
+                          disabled: this.disabled,
+                          loading: this.loading,
+                          targetData: form.data,
+                          form: form,
+                          data: undefined,
+                          parent: this as any,
+                        } as AutoItemPayloadType<'edit'>
+                      })
+                    ]
+                  })
+                } else {
+                  return h(AutoInfoItem, {
+                    payload: {
+                      prop: currentProp,
+                      type: this.type,
+                      target: column,
+                      index: index,
+                      list: this.runtime.observeList!,
+                      disabled: this.disabled,
+                      loading: this.loading,
+                      targetData: form.data,
+                      form: undefined,
+                      data: form.data,
+                      parent: this as any,
+                    } as AutoItemPayloadType<'info'>
+                  })
+                }
+              }
+            } else {
+              columnItem.customRender = ({ text, record, index }: customRenderPayload) => {
+                const payload: tablePayload = {
+                  targetData: record,
+                  type: this.type,
+                  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 = ({ text, record, index }: customRenderPayload) => {
+              const payload: tablePayload = {
+                targetData: record,
+                type: this.type,
+                index: index,
+                payload: { column: column }
+              }
+              return pureRender({
+                text: text,
+                payload
+              })
+            }
+          }
+          list.push(columnItem)
+        }
+      }
+      return list
+    },
+  },
+  watch: {
+    value(val?: Record<PropertyKey, any>[]) {
+      console.log('value change', val)
+      if (val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val
+        }
+      } else {
+        this.currentValue = []
+      }
+    },
+    currentValue(val: Record<PropertyKey, any>[]) {
+      console.log('currentValue change', val)
+      this.$emit('update:value', val)
+    }
+  },
+  methods: {
+    buildValue() {
+      const form = new FormValue()
+      this.runtime.dictionary!.parseData(this.runtime.dictionaryList!, form, this.type).then(res => {
+        this.currentValue.push(res.data)
+        this.runtime.formList!.push(form)
+      })
+    },
+    renderTable() {
+      return h(Table, {
+        rowKey: this.runtime?.dictionary?.getProp('id') as string,
+        pagination: false,
+        columns: this.currentColumnList,
+        dataSource: this.currentValue
+      })
+    },
+    renderHeader() {
+      if (this.header) {
+        return this.header.map(headerMenu => {
+          return h(MenuView, {
+            data: headerMenu,
+            disabled: this.disabled,
+            loading: this.loading,
+            onClick: () => {
+              if (headerMenu.prop === '$build') {
+                this.buildValue()
+              }
+              this.$emit('header', headerMenu.prop)
+            }
+          })
+        })
+      }
+    }
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    const render = h('div', { class: 'complex-form-list' }, {
+      default: () => [this.renderHeader(), this.renderTable()]
+    })
+    return render
+  }
+})

package/src/ImageViewer.tsx

@@ -0,0 +1,122 @@
+import { defineComponent, h, PropType, VNode } from "vue"
+import { dataConfig } from "@complex-suite/data"
+import ModalView from "./ModalView"
+import type { ModalViewProps } from "./ModalView"
+import icon from "../icon"
+import type { localIconProps } from "../type"
+
+type renderType = (payload: localIconProps) => VNode | VNode[]
+
+export default defineComponent({
+  name: 'ImageViewer',
+  props: {
+    src: {
+      type: String,
+      required: false
+    },
+    width: {
+      type: Number,
+      required: false,
+      default: 100
+    },
+    height: {
+      type: Number,
+      required: false
+    },
+    modal: {
+      type: Object as PropType<ModalViewProps>,
+      required: false
+    },
+    emptyRender: {
+      type: Function as PropType<renderType>,
+      required: false
+    },
+    errorRender: {
+      type: Function as PropType<renderType>,
+      required: false
+    }
+  },
+  data() {
+    return {
+      isError: false
+    }
+  },
+  computed: {
+    currentHeight() {
+      return this.height || this.width
+    },
+    currentSize() {
+      return this.width >= this.currentHeight ? this.width : this.currentHeight
+    }
+  },
+  watch: {
+    // 监听src变化，重置加载状态
+    src(val) {
+      if (val) {
+        this.isError = false
+      }
+    }
+  },
+  methods: {
+    renderImage() {
+      if (this.src && !this.isError) {
+        return h('img', {
+          class: this.modal ? 'complex-image-viewer-content complex-image-viewer-content-has-modal' : 'complex-image-viewer-content',
+          src: this.src,
+          onError: () => {
+            this.isError = true
+          },
+          onClick: this.modal ? () => {
+            (this.$refs.modal as InstanceType<typeof ModalView>).show()
+          } : undefined
+        })
+      } else if (this.isError) {
+        return h('div', {
+          class: 'complex-image-viewer-error'
+        }, [
+          !this.errorRender ? icon.local('errorImage', { size: this.currentSize }) : this.errorRender({ size: this.currentSize })
+        ])
+      } else {
+        return h('div', {
+          class: 'complex-image-viewer-empty'
+        }, [
+          !this.emptyRender ? icon.local('emptyImage', { size: this.currentSize }) : this.emptyRender({ size: this.currentSize })
+        ])
+      }
+    },
+    renderModal() {
+      if (this.modal) {
+        return h(ModalView, {
+          ref: 'modal',
+          title: '图片查看',
+          ...this.modal
+        }, {
+          default: ({ width }: { width: number }) => {
+            const currentWidth = dataConfig.formatPixel(width)
+            return h('img', {
+              src: this.src,
+              style: {
+                width: currentWidth,
+                height: 'auto'
+              }
+            })
+          }
+        })
+      }
+    }
+  },
+  render() {
+    const width = dataConfig.formatPixel(this.width)
+    const height = dataConfig.formatPixel(this.currentHeight)
+    return h('div', {
+      class: 'complex-image-viewer',
+      style: {
+        width: width,
+        height: height
+      }
+    }, [
+      this.renderImage(),
+      this.renderModal()
+    ])
+  }
+})

package/src/InfoArea.tsx

@@ -0,0 +1,182 @@
+import { defineComponent, h, PropType } from "vue"
+import { getEnv } from "@complex-suite/utils"
+import { DictionaryData, DictionaryValue, FormValue, ObserveList } from "@complex-suite/data"
+import type { AttrsValueInitOption } from "@complex-suite/data"
+import InfoView from "./InfoView"
+import type { InfoViewDefaultProps } from "./InfoView"
+import type { AutoItemPayloadType } from "./dictionary/AutoItem"
+import antdConfig from "../antdConfig"
+
+export interface InfoAreaDefaultProps extends InfoViewDefaultProps {
+  dictionary: DictionaryData
+  type?: string
+  observe?: boolean
+  inline?: boolean
+  onInit?: (observeList: ObserveList, form: FormValue, type: string, editArea: any) => void
+}
+
+export interface InfoAreaProps extends InfoAreaDefaultProps {
+  data?: Record<PropertyKey, any>
+  infoAttrs?: AttrsValueInitOption
+}
+
+export interface InfoAreaOption extends InfoAreaProps {
+  ref?: string
+  onMenu?: (prop: string, payload: AutoItemPayloadType<'info'>) => unknown
+}
+
+export default defineComponent({
+  name: 'InfoArea',
+  emits: {
+    menu: (prop: string, _payload: AutoItemPayloadType<'info'>)  => {
+      return !!typeof prop
+    }
+  },
+  props: {
+    dictionary: {
+      type: Object as PropType<InfoAreaProps['dictionary']>,
+      required: true
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    observe: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.info.observe
+      }
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.info.inline
+      }
+    },
+    data: {
+      type: Object as PropType<InfoAreaProps['data']>,
+      required: false
+    },
+    infoAttrs: {
+      type: Object as PropType<InfoAreaProps['infoAttrs']>,
+      required: false
+    },
+    menu: {
+      type: Object as PropType<InfoAreaProps['menu']>,
+      required: false
+    },
+    labelAlign: { // label 标签的文本对齐方式
+      type: String as PropType<InfoAreaProps['labelAlign']>,
+      required: false,
+      default: 'right'
+    },
+    gridParse: {
+      type: Object as PropType<InfoAreaProps['gridParse']>,
+      required: false
+    },
+    gridRowProps: { // gridRowProps设置项
+      type: Object as PropType<InfoAreaProps['gridRowProps']>,
+      required: false
+    },
+    onInit: {
+      type: Function as PropType<InfoAreaProps['onInit']>,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      localType: undefined as undefined | string,
+      localData: undefined as undefined | Record<PropertyKey, any>,
+      form: new FormValue(),
+      dictionaryList: [] as DictionaryValue[],
+      observeList: undefined as undefined | ObserveList,
+    }
+  },
+  computed: {
+    currentType() {
+      return this.localType || this.type
+    },
+    currentData() {
+      return this.localData || this.data
+    }
+  },
+  mounted() {
+    if (this.currentType && this.currentData) {
+      this.$show()
+    }
+  },
+  beforeUnmount() {
+    if (this.observeList) {
+      this.observeList.reset()
+      this.observeList = undefined
+    }
+  },
+  methods: {
+    $show(type?: string, data?: Record<PropertyKey, any>) {
+      this.localType = type
+      this.localData = data || undefined
+      this.init()
+    },
+    init() {
+      this.dictionaryList = this.dictionary.getList(this.currentType!) 
+      const observeList = this.dictionary.getObserveList(this.currentType!, this.dictionaryList as DictionaryValue[], this.observe)
+      this.dictionary.parseData(this.dictionaryList as DictionaryValue[], this.form, this.currentType!, this.currentData, '$info').then(() => {
+        // data生成完成后再进行list赋值，避免list提前赋值导致的EditView提前加载导致的数据为空的加载
+        if (this.onInit) {
+          this.onInit(observeList, this.form, this.currentType!, this)
+        }
+        this.observeList = observeList
+        if (this.observe) {
+          this.observeList!.startObserve(this.form.getData(), this.currentType)
+        } else if (getEnv('real') === 'development') {
+          // 开发环境下
+          const list: string[] = []
+          this.observeList.$map.forEach(item => {
+            if (item.$observe) {
+              list.push(item.$prop)
+            }
+          })
+          if (list.length > 0) {
+            console.error(`[${list.join('/')}]模块存在observe监控函数，当前observe未开启，请确认！`)
+          }
+        }
+      })
+    },
+    renderInfo() {
+      if (this.observeList) {
+        const info = h(InfoView, {
+          data: this.form.getData(),
+          list: this.observeList as ObserveList,
+          menu: this.menu,
+          type: this.currentType!,
+          labelAlign: this.labelAlign,
+          gridParse: this.inline ? undefined : (this.gridParse || this.dictionary.$layout.grid.getValue(this.currentType!)),
+          gridRowProps: this.gridRowProps!,
+          infoAttrs: this.infoAttrs,
+          collapse: this.dictionary.$collapse,
+          disabled: this.disabled,
+          loading: this.loading,
+          onMenu: (prop: string, payload: AutoItemPayloadType<'info'>) => {
+            this.$emit('menu', prop, payload)
+          }
+        })
+        return info
+      } else {
+        return null
+      }
+    }
+  },
+  render() {
+    return h('div', { class: 'complex-info-area' }, [this.renderInfo()])
+  }
+})

package/src/InfoView.tsx

@@ -0,0 +1,150 @@
+import { defineComponent, h, PropType, markRaw } from "vue"
+import { Col, Row } from "ant-design-vue"
+import type { RowProps } from "ant-design-vue"
+import { ObserveList, DefaultInfo, AttrsValue, GridParse } from "@complex-suite/data"
+import type { AttrsValueInitOption } from "@complex-suite/data"
+import AutoItem from "./dictionary/AutoItem"
+import type { AutoItemPayloadType, AutoItemProps } from "./dictionary/AutoItem"
+import antdConfig from "../antdConfig"
+
+export interface InfoViewDefaultProps {
+  menu?: DefaultInfo[]
+  labelAlign?: 'center' | 'right' | 'left'
+  gridParse?: GridParse
+  gridRowProps?: RowProps
+  collapse?: boolean
+  disabled?: boolean
+  loading?: boolean
+}
+
+export interface InfoViewProps extends InfoViewDefaultProps {
+  data: Record<PropertyKey, any>
+  list: ObserveList
+  type: string
+  infoAttrs?: AttrsValueInitOption
+}
+
+export default defineComponent({
+  name: 'InfoView',
+  emits: {
+    menu: (prop: string, _payload: AutoItemPayloadType<'info'>)  => {
+      return !!prop
+    }
+  },
+  props: {
+    data: {
+      type: Object as PropType<InfoViewProps['data']>,
+      required: true
+    },
+    list: {
+      type: Object as PropType<InfoViewProps['list']>,
+      required: true
+    },
+    menu: {
+      type: Object as PropType<InfoViewProps['menu']>,
+      required: false
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    labelAlign: { // label 标签的文本对齐方式
+      type: String as PropType<InfoViewProps['labelAlign']>,
+      required: false,
+      default: 'right'
+    },
+    gridParse: {
+      type: Object as PropType<InfoViewProps['gridParse']>,
+      required: false
+    },
+    gridRowProps: { // gridRowProps设置项
+      type: Object as PropType<InfoViewProps['gridRowProps']>,
+      required: false
+    },
+    infoAttrs: {
+      type: Object as PropType<InfoViewProps['infoAttrs']>,
+      required: false
+    },
+    collapse: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    currentInfoAttrs() {
+      const layoutClass = `complex-info-${this.gridParse ? 'grid' : 'inline'}`
+      const currentInfoAttrs = new AttrsValue(this.infoAttrs)
+      currentInfoAttrs.pushClass('complex-info')
+      currentInfoAttrs.pushClass(layoutClass)
+      return currentInfoAttrs
+    },
+    concatList() {
+      if (this.menu && this.menu.length > 0) {
+        return this.list.data.concat(this.menu)
+      } else {
+        return this.list.data
+      }
+    },
+    currentList() {
+      return this.concatList.filter(item => (!item.$hidden && !item.$frozen))
+    }
+  },
+  methods: {
+    parseGrid(data: DefaultInfo) {
+      return antdConfig.parseGrid(this.gridParse!.parseData(data.$grid, 'main', this.type))
+    },
+    getItemProps(data: DefaultInfo, index: number) {
+      return {
+        parser: 'info',
+        target: data,
+        index: index,
+        list: this.list,
+        type: this.type,
+        gridParse: this.gridParse,
+        collapse: this.collapse,
+        disabled: this.disabled,
+        loading: this.loading,
+        data: this.data,
+        form: undefined,
+        parent: markRaw(this)
+      } as AutoItemProps<'info'>
+    },
+    renderItem(item: DefaultInfo, index: number) {
+      return h(AutoItem, this.getItemProps(item, index))
+    },
+    renderList() {
+      if (!this.gridParse) {
+        return this.currentList.map((item, index) => {
+          return this.renderItem(item, index)
+        })
+      } else {
+        return this.currentList.map((item, index) => {
+          return h(Col, this.parseGrid(item), {
+            default: () => this.renderItem(item, index)
+          })
+        })
+      }
+    }
+  },
+  /**
+   * 主要模板
+
+   * @returns {VNode}
+   */
+  render() {
+    const list = this.renderList()
+    return h('div', antdConfig.componentConfig.parseAttrs(this.currentInfoAttrs), this.gridParse ? [
+      h(Row, { ...this.gridRowProps }, {
+        default: () => list
+      })
+    ] : list)
+  }
+})