@complex-suite/component-antd 4.10.12

package/src/CollapseArea.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, h, nextTick, onBeforeMount, onMounted, PropType, ref, VNode } from "vue"
+import { dataConfig } from "@complex-suite/data"
+import LocalResizeObserver from "../LocalResizeObserver"
+
+export interface CollapseAreaProps {
+  height: number
+  collapse?: boolean
+  render?: (payload: { needCollapse: boolean, collapse: boolean }) => VNode | VNode[] | null
+}
+
+export default defineComponent({
+  name: 'CollapseArea',
+  props: {
+    height: {
+      type: Number,
+      required: true
+    },
+    collapse: {
+      type: Boolean,
+      required: false
+    },
+    render: {
+      type: Function as PropType<CollapseAreaProps['render']>,
+      required: false
+    }
+  },
+  setup(props) {
+    const contentRef = ref<Element>()
+    const needCollapse = ref(false)
+    const onResize = function(entry: ResizeObserverEntry) {
+      if (contentRef.value) {
+        const contentHeight = entry.borderBoxSize[0].blockSize
+        needCollapse.value = contentHeight > props.height
+      }
+    }
+    const resizeObserver = new LocalResizeObserver(onResize)
+    onMounted(() => {
+      nextTick(() => {
+        resizeObserver.observe(contentRef.value!)
+      })
+    })
+    onBeforeMount(() => {
+      resizeObserver.disconnect()
+    })
+    return {
+      contentRef,
+      needCollapse
+    }
+  },
+  methods: {
+    $renderArea() {
+      if (this.render) {
+        return this.render({
+          needCollapse: this.needCollapse,
+          collapse: this.collapse
+        })
+      } else if (this.$slots.default) {
+        return this.$slots.default({
+          needCollapse: this.needCollapse,
+          collapse: this.collapse
+        })
+      }
+      return null
+    },
+    renderArea() {
+      const area = this.$renderArea()
+      if (area) {
+        return h('div', {
+          class: 'complex-collapse-area-content',
+          ref: 'contentRef'
+        }, [
+          area
+        ])
+      }
+      return null
+    }
+  },
+  render() {
+    return h('div', {
+      class: 'complex-collapse-area' + ((this.collapse && this.needCollapse) ? ' complex-collapse-area-collapsed' : ''),
+      style: {
+        height: (this.collapse && this.needCollapse) ? dataConfig.formatPixel(this.height) : undefined
+      }
+    }, [
+      this.renderArea()
+    ])
+  }
+})

package/src/EditArea.tsx

@@ -0,0 +1,205 @@
+import { defineComponent, h, PropType } from "vue"
+import { getEnv } from "@complex-suite/utils"
+import { DictionaryValue, FormValue, ObserveList } from "@complex-suite/data"
+import EditView from "./EditView"
+import type { EditViewDefaultProps } from "./EditView"
+import type { InfoAreaDefaultProps } from "./InfoArea"
+import type { AutoItemPayloadType } from "./dictionary/AutoItem"
+import antdConfig from "../antdConfig"
+
+export type EditAreaDataType = undefined | Record<PropertyKey, unknown>
+
+export interface EditAreaSubmitOption {
+  targetData: Record<PropertyKey, unknown>
+  originData: EditAreaDataType
+  type: string
+}
+
+export type EditAreaProps = EditViewDefaultProps & InfoAreaDefaultProps & {
+  form?: FormValue
+}
+
+export interface EditAreaOption extends EditAreaProps {
+  ref?: string
+  onMenu?: (prop: string, payload: AutoItemPayloadType<'edit'>) => unknown
+  onEnter?: (prop: string, payload: AutoItemPayloadType<'edit'>) => unknown
+}
+
+export default defineComponent({
+  name: 'EditArea',
+  emits: {
+    menu: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    },
+    enter: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    }
+  },
+  props: {
+    dictionary: {
+      type: Object as PropType<EditAreaProps['dictionary']>,
+      required: true
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    observe: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.edit.observe
+      }
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: () => {
+        return antdConfig.edit.inline
+      }
+    },
+    form: {
+      type: Object as PropType<EditAreaProps['form']>,
+      required: false
+    },
+    formProps: { // form-model-view设置项
+      type: Object as PropType<EditAreaProps['formProps']>,
+      required: false
+    },
+    menu: {
+      type: Object as PropType<EditAreaProps['menu']>,
+      required: false
+    },
+    labelAlign: { // label 标签的文本对齐方式
+      type: String as PropType<EditAreaProps['labelAlign']>,
+      required: false
+    },
+    gridParse: {
+      type: Object as PropType<EditAreaProps['gridParse']>,
+      required: false
+    },
+    gridRowProps: { // form-model-view设置项
+      type: Object as PropType<EditAreaProps['gridRowProps']>,
+      required: false
+    },
+    onInit: {
+      type: Function as PropType<EditAreaProps['onInit']>,
+      required: false
+    },
+    enter: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    },
+  },
+  data() {
+    return {
+      localType: undefined as undefined | string,
+      localForm: new FormValue(),
+      data: undefined as EditAreaDataType,
+      dictionaryList: [] as DictionaryValue[],
+      observeList: undefined as undefined | ObserveList,
+    }
+  },
+  computed: {
+    currentType() {
+      return this.localType || this.type
+    },
+    currentForm() {
+      return this.form || this.localForm
+    }
+  },
+  mounted() {
+    if (this.type) {
+      this.$show()
+    }
+  },
+  beforeUnmount() {
+    if (this.observeList) {
+      this.observeList.reset()
+      this.observeList = undefined
+    }
+  },
+  methods: {
+    $show(type?: string, data?: EditAreaDataType) {
+      this.localType = type
+      this.data = 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.currentForm, this.currentType!, this.data, '$edit').then(() => {
+        // data生成完成后再进行list赋值，避免list提前赋值导致的EditView提前加载导致的数据为空的加载
+        if (this.onInit) {
+          this.onInit(observeList, this.currentForm, this.currentType!, this)
+        }
+        this.observeList = observeList
+        if (this.observe) {
+          this.observeList!.startObserve(this.currentForm.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未开启，请确认！`)
+          }
+        }
+        this.$nextTick(() => {
+          this.currentForm.clearValidate()
+        })
+      })
+    },
+    $submit(): Promise<EditAreaSubmitOption> {
+      return new Promise((resolve, reject) => {
+        this.currentForm.validate().then(() => {
+          const postData = this.dictionary.collectData(this.currentForm.getData(), this.dictionaryList as DictionaryValue[], this.currentType!, this.observe ? (this.observeList as ObserveList) : undefined)
+          resolve({ targetData: postData, originData: this.data, type: this.currentType! })
+        }).catch(err => {
+          reject(err)
+        })
+      })
+    },
+    renderEdit() {
+      if (this.observeList) {
+        const form = h(EditView, {
+          form: this.currentForm!,
+          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!,
+          formProps: this.formProps,
+          enter: this.enter,
+          collapse: this.dictionary.$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)
+          }
+        })
+        return form
+      } else {
+        return null
+      }
+    }
+  },
+  render() {
+    return h('div', { class: 'complex-edit-area' }, [this.renderEdit()])
+  }
+})

package/src/EditView.tsx

@@ -0,0 +1,179 @@
+import { defineComponent, h, PropType, markRaw } from "vue"
+import { Col, Form, Row } from "ant-design-vue"
+import type { FormProps } from "ant-design-vue"
+import { mergeData } from "@complex-suite/utils"
+import { FormValue, ObserveList, DefaultInfo } from "@complex-suite/data"
+import AutoItem from "./dictionary/AutoItem"
+import type { AutoItemPayloadType, AutoItemProps, AutoItemParser } from "./dictionary/AutoItem"
+import type { InfoViewDefaultProps } from "./InfoView"
+import antdConfig from "../antdConfig"
+
+export interface EditViewDefaultProps extends InfoViewDefaultProps {
+  formProps?: FormProps
+  choice?: number
+  enter?: boolean
+}
+
+export interface EditViewProps extends EditViewDefaultProps {
+  form: FormValue
+  list: ObserveList
+  type: string
+}
+
+export default defineComponent({
+  name: 'EditView',
+  emits: {
+    menu: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    },
+    enter: (prop: string, _payload: AutoItemPayloadType<'edit'>)  => {
+      return !!prop
+    }
+  },
+  props: {
+    form: {
+      type: Object as PropType<EditViewProps['form']>,
+      required: true
+    },
+    list: {
+      type: Object as PropType<EditViewProps['list']>,
+      required: true
+    },
+    menu: {
+      type: Object as PropType<EditViewProps['menu']>,
+      required: false
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    labelAlign: { // label 标签的文本对齐方式
+      type: String as PropType<EditViewProps['labelAlign']>,
+      required: false,
+      default: 'right'
+    },
+    gridParse: {
+      type: Object as PropType<EditViewProps['gridParse']>,
+      required: false
+    },
+    gridRowProps: { // form-model-view设置项
+      type: Object as PropType<EditViewProps['gridRowProps']>,
+      required: false
+    },
+    formProps: { // form-model-view设置项
+      type: Object as PropType<EditViewProps['formProps']>,
+      required: false
+    },
+    choice: {
+      type: Number,
+      required: false
+    },
+    enter: {
+      type: Boolean,
+      required: false
+    },
+    collapse: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    currentFormProps() {
+      const formProps = {
+        ref: 'form',
+        model: this.form.data,
+        layout: this.gridParse ? 'horizontal' : 'inline',
+        labelAlign: this.labelAlign
+      }
+      return mergeData(formProps, this.formProps!)
+    },
+    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))
+    }
+  },
+  mounted () {
+    this.form.setRef(this.$refs[this.currentFormProps.ref])
+  },
+  methods: {
+    triggerEnter(prop: string, payload: AutoItemPayloadType<AutoItemParser>) {
+      if (this.enter) {
+        this.$emit('enter', prop, payload)
+      }
+    },
+    parseGrid(data: DefaultInfo) {
+      return antdConfig.parseGrid(this.gridParse!.parseData(data.$grid, 'main', this.type))
+    },
+    getItemProps(data: DefaultInfo, index: number) {
+      return {
+        parser: 'edit',
+        target: data,
+        index: index,
+        list: this.list,
+        type: this.type,
+        choice: this.choice,
+        gridParse: this.gridParse,
+        collapse: this.collapse,
+        disabled: this.disabled,
+        loading: this.loading,
+        form: this.form,
+        data: undefined,
+        parent: markRaw(this)
+      } as AutoItemProps<'edit'>
+    },
+    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 layoutClass = `complex-edit-${this.gridParse ? 'grid' : 'inline'}`
+    const list = this.renderList()
+    const render = h(Form, {
+      class: `complex-edit ${layoutClass}`,
+      ...this.currentFormProps
+    }, {
+      default: () => {
+        if (!this.gridParse) {
+          return list
+        } else {
+          return h(Row, { ...this.gridRowProps }, {
+            default: () => list
+          })
+        }
+      }
+    })
+    return render
+  }
+})

package/src/FlexBox.tsx

@@ -0,0 +1,74 @@
+import { PropType, defineComponent, h } from 'vue'
+import { dataConfig } from "@complex-suite/data"
+
+const paddingPropList = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'] as const
+
+export default defineComponent({
+  name: 'FlexBox',
+  props: {
+    direction: {
+      type: String as PropType<'row' | 'column'>,
+      validator(value: string) {
+        return ['row', 'column'].includes(value)
+      },
+      required: false,
+      default: 'row'
+    },
+    height: {
+      type: Number,
+      required: true
+    },
+    width: {
+      type: Number,
+      required: true
+    },
+    paddingTop: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    paddingRight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    paddingBottom: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    paddingLeft: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  render() {
+    const content = []
+    const contentHeight = this.height - this.paddingTop - this.paddingBottom
+    const contentWidth = this.width - this.paddingLeft - this.paddingRight
+    if (this.$slots) {
+      for (const prop in this.$slots) {
+        content.push(this.$slots[prop]?.({
+          width: contentWidth,
+          height: contentHeight
+        }))
+      }
+    }
+    const style = {
+      width: dataConfig.formatPixel(this.width),
+      height: dataConfig.formatPixel(this.height)
+    } as Record<string, string>
+    paddingPropList.forEach(paddingProp => {
+      const paddingValue = this[paddingProp]
+      if (paddingValue) {
+        style[paddingProp] = dataConfig.formatPixel(paddingValue)
+      }
+    })
+    const render = h('div', {
+      class: ['complex-flex-box', 'complex-flex-box-' + this.direction],
+      style: style
+    }, content)
+    return render
+  }
+})