@complex-suite/component-antd 4.10.12

package/src/dictionary/AutoEditItem.tsx

@@ -0,0 +1,164 @@
+import { defineComponent, h, PropType, VNode } from "vue"
+import { Input, InputNumber, Textarea, Switch, Select, Divider, Cascader, DatePicker, RangePicker } from "ant-design-vue"
+import { camelToLine } from "@complex-suite/utils"
+import { dataConfig } from "@complex-suite/data"
+import type { DictionaryEditMod } from "@complex-suite/data"
+import PaginationView from "./../components/PaginationView"
+import type { AutoItemPayloadType } from "./AutoItem"
+import EditView from "../EditView"
+import SingleImport from "../SingleImport"
+import MultipleImport from "../MultipleImport"
+import { parseEditAttrs } from "../../format"
+import antdConfig from "../../antdConfig"
+
+export default defineComponent({
+  name: 'AutoEditItem',
+  props: {
+    payload: {
+      type: Object as PropType<AutoItemPayloadType<'edit'>>,
+      required: true
+    }
+  },
+  /**
+   * 主要模板
+   * @returns {VNode}
+   */
+  render() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let tag: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let children: any = undefined
+    const target = this.payload.target as DictionaryEditMod
+    const targetAttrs = parseEditAttrs(target, this.payload)!
+    targetAttrs.pushClass('complex-edit-item')
+    targetAttrs.pushClass('complex-edit-item-' + camelToLine(target.type, '-'))
+    targetAttrs.merge(antdConfig.componentConfig.parseData(target.$local, 'target'))
+    let item = null
+    if (!(this.payload.parent as InstanceType<typeof EditView>).gridParse && target.$width) {
+      targetAttrs.style.width = typeof target.$width === 'number' ? dataConfig.formatPixel(target.$width) : target.$width
+    }
+    const targetRender = antdConfig.componentConfig.parseData(target.$renders, 'target')
+    const option = antdConfig.componentConfig.parseAttrs(targetAttrs)
+    // 考虑一个默认的值，inline模式下和其他模式下的默认值，避免出现问题
+    if (targetRender) {
+      item = targetRender({
+        ...this.payload,
+        option: option
+      })
+    } else if (target.type === 'input') {
+      tag = Input
+    } else if (target.type === 'inputNumber') {
+      tag = InputNumber
+    } else if (target.type === 'textArea') {
+      tag = Textarea
+    } else if (target.type === 'switch') {
+      tag = Switch
+    } else if (target.type === 'select') {
+      tag = Select
+      const $data = target
+      children = {}
+      const dropdownRender = antdConfig.componentConfig.parseData(target.$renders, 'dropdown')
+      const optionRender = antdConfig.componentConfig.parseData(target.$renders, 'option')
+      const tagRender = antdConfig.componentConfig.parseData(target.$renders, 'tag')
+      if (dropdownRender) {
+        children.dropdownRender = dropdownRender
+      } else {
+        const dropdownTopRender = antdConfig.componentConfig.parseData(target.$renders, 'dropdownTop')
+        const dropdownBottomRender = antdConfig.componentConfig.parseData(target.$renders, 'dropdownBottom')
+        if (dropdownTopRender || $data.$pagination || dropdownBottomRender) {
+          children.dropdownRender = (payload: { menuNode: VNode }) => {
+            const vNodes = [payload.menuNode]
+            if (dropdownTopRender) {
+              vNodes.unshift(dropdownTopRender({
+                payload: this.payload
+              }) as VNode)
+              vNodes.unshift(h(Divider, {
+                style: {
+                  margin: '4px 0'
+                }
+              }))
+            }
+            if (dropdownBottomRender) {
+              vNodes.push(h(Divider, {
+                style: {
+                  margin: '4px 0'
+                }
+              }))
+              vNodes.push(dropdownBottomRender({
+                payload: this.payload
+              }) as VNode)
+            }
+            if ($data.$pagination) {
+              vNodes.push(h(Divider, {
+                style: {
+                  margin: '4px 0'
+                }
+              }))
+              vNodes.push(h(PaginationView, {
+                pagination: $data.$pagination,
+                simple: true,
+                onPage() {
+                  ($data.$option as any).open = true
+                  $data.loadData(true).then(() => {
+                    ($data.$option as any).open = undefined
+                  }, () => {
+                    ($data.$option as any).open = undefined
+                  })
+                },
+                onSize() {
+                  ($data.$option as any).open = true
+                  $data.loadData(true).then(() => {
+                    ($data.$option as any).open = undefined
+                  }, () => {
+                    ($data.$option as any).open = undefined
+                  })
+                },
+                onClick(e: Event) {
+                  e.preventDefault()
+                }
+              }))
+              const dropdownPaginationBottomRender = antdConfig.componentConfig.parseData(target.$renders, 'dropdownPaginationBottom')
+              if (dropdownPaginationBottomRender) {
+                vNodes.push(h(Divider, {
+                  style: {
+                    margin: '4px 0'
+                  }
+                }))
+                vNodes.push(dropdownPaginationBottomRender({
+                  payload: this.payload
+                }) as VNode)
+              }
+            }
+            return vNodes
+          }
+        }
+      }
+      if (optionRender) {
+        children.option = optionRender
+      }
+      if (tagRender) {
+        children.tagRender = tagRender
+      }
+    } else if (target.type === 'cascader') {
+      tag = Cascader
+    } else if (target.type === 'date') {
+      tag = DatePicker
+    } else if (target.type === 'dateRange') {
+      tag = RangePicker
+    } else if (target.type === 'file') {
+      if (!target.multiple) {
+        tag = SingleImport
+      } else {
+        tag = MultipleImport
+      }
+    } else if (target.type === 'custom') {
+      tag = target.$custom
+    } else if (target.type === 'form') {
+      tag = EditView
+    }
+    if (tag) {
+      item = h(tag, option, children)
+    }
+    return item
+  }
+})

package/src/dictionary/AutoInfoItem.tsx

@@ -0,0 +1,126 @@
+import { defineComponent, h, PropType } from "vue"
+import { AttrsValue, ButtonEdit, ButtonGroupEdit, ContentEdit, dataConfig, DictionaryValue, ObserveList, FormEdit } from "@complex-suite/data"
+import type { ButtonEditOption } from "@complex-suite/data"
+import ButtonView from "../ButtonView"
+import type { AutoItemPayloadType, AutoItemParser } from "./AutoItem"
+import InfoView from "../InfoView"
+import type { InfoViewProps } from "../InfoView"
+import antdConfig from "../../antdConfig"
+
+export const bindButtonClick = function(prop: string, option: ButtonEdit['$option'], payload: AutoItemPayloadType<AutoItemParser>) {
+  if (!option.upload) {
+    return function() {
+      (payload as AutoItemPayloadType<'edit'>).parent.$emit('menu', prop, payload)
+      if (option.click) {
+        return option.click(payload)
+      }
+    }
+  } else {
+    return option.click
+  }
+}
+
+export default defineComponent({
+  name: 'AutoInfoItem',
+  props: {
+    payload: {
+      type: Object as PropType<AutoItemPayloadType<AutoItemParser>>,
+      required: true
+    }
+  },
+  /**
+   * 主要模板
+   * @returns {VNode}
+   */
+  render() {
+    const targetRender = antdConfig.componentConfig.parseData(this.payload.target.$renders, 'target')
+    if (targetRender) {
+      return targetRender({
+        ...this.payload
+      })
+    } else {
+      const targetAttrs = antdConfig.componentConfig.parseData(this.payload.target.$local, 'target') || new AttrsValue()
+      if (!(this.payload.parent as InstanceType<typeof InfoView>).gridParse && this.payload.target.$width) {
+        targetAttrs.style.width = typeof this.payload.target.$width === 'number' ? dataConfig.formatPixel(this.payload.target.$width) : this.payload.target.$width
+      }
+      if (this.payload.target instanceof ButtonEdit) {
+        const option = {
+          ...this.payload.target.$option
+        }
+        if (!option.name) {
+          option.name = this.payload.target.$name
+        }
+        if (!option.prop) {
+          option.prop = this.payload.prop
+        }
+        if (this.payload.loading) {
+          option.loading = true
+        } else if (this.payload.target.$option.loading && typeof this.payload.target.$option.loading === 'function') {
+          option.loading = this.payload.target.$option.loading(this.payload)
+        }
+        if (this.payload.disabled) {
+          option.disabled = true
+        } else if (this.payload.target.$option.disabled && typeof this.payload.target.$option.disabled === 'function') {
+          option.disabled = this.payload.target.$option.disabled(this.payload)
+        }
+        option.click = bindButtonClick(this.payload.target.$prop, this.payload.target.$option, this.payload)
+        targetAttrs.props.data = option
+        return h(ButtonView, antdConfig.componentConfig.parseAttrs(targetAttrs) as { data: ButtonEditOption })
+      } else if (this.payload.target instanceof ButtonGroupEdit) {
+        const { target } = this.payload
+        return h('div', antdConfig.componentConfig.parseAttrs(targetAttrs), [
+          target.$list.map((buttonOption, index) => {
+            const interval = (index !== target.$list.length - 1) ? target.interval : undefined
+            const option = {
+              ...buttonOption
+            }
+            if (this.payload.loading) {
+              option.loading = true
+            } else if (buttonOption.loading && typeof buttonOption.loading === 'function') {
+              option.loading = buttonOption.loading(this.payload)
+            }
+            if (this.payload.disabled) {
+              option.disabled = true
+            } else if (buttonOption.disabled && typeof buttonOption.disabled === 'function') {
+              option.disabled = buttonOption.disabled(this.payload)
+            }
+            option.click = bindButtonClick(buttonOption.prop!, buttonOption, this.payload)
+            return h(ButtonView, {
+              style: {
+                marginRight: interval
+              },
+              data: option
+            })
+          })
+        ])
+      } else if (this.payload.target instanceof ContentEdit) {
+        const { target } = this.payload
+        targetAttrs.pushStyle(target.$option.style)
+        return h('div', antdConfig.componentConfig.parseAttrs(targetAttrs), [target.$option.data])
+      } else if (this.payload.target instanceof FormEdit) {
+        const { target } = this.payload
+        // 额外则直接解析数据
+        targetAttrs.merge(new AttrsValue({
+          props: {
+            list: target.$runtime.observeList as ObserveList,
+            data: target.$runtime.form!.getData(),
+            type: target.$runtime.type!,
+            gridParse: target.$option.gridParse === false ? undefined : (target.$option.gridParse || target.$runtime.dictionary!.$layout.grid.getValue(this.payload.type)),
+            menu: target.$option.menu,
+            disabled: this.payload.disabled
+          } as InfoViewProps
+        }))
+        return h(InfoView, antdConfig.componentConfig.parseAttrs(targetAttrs) as unknown as InfoViewProps)
+      } else {
+        // 额外则直接解析数据
+        const { target, targetData, prop } = this.payload
+        let text = targetData[prop]
+        const parent = target.$getParent() as DictionaryValue
+        if (parent && parent.parse) {
+          text = parent.parse(text, this.payload)
+        }
+        return h('div', antdConfig.componentConfig.parseAttrs(targetAttrs), antdConfig.showValue(text))
+      }
+    }
+  }
+})

package/src/dictionary/AutoItem.tsx

@@ -0,0 +1,219 @@
+import { defineComponent, h, PropType } from "vue"
+import { Col, FormItem, Row, Tooltip } from "ant-design-vue"
+import { AttrsValue, FormValue, DefaultInfo, ObserveList, DefaultEdit, GridParse, DefaultSimpleEdit } from "@complex-suite/data"
+import type { DictionaryEditMod } from "@complex-suite/data"
+import EditView from "../EditView"
+import InfoView from "../InfoView"
+import AutoEditItem from "./AutoEditItem"
+import AutoInfoItem from "./AutoInfoItem"
+import antdConfig from "../../antdConfig"
+
+export type AutoItemParser = 'info' | 'edit'
+
+export interface AutoItemPayloadType<P extends AutoItemParser = 'edit'> {
+  prop: string
+  type: string
+  target: DefaultInfo
+  index: number
+  list: ObserveList
+  choice?: number
+  disabled?: boolean
+  loading?: boolean
+  targetData: Record<PropertyKey, any>
+  form: P extends 'edit' ? FormValue : undefined
+  data: P extends 'info' ? Record<PropertyKey, any> : undefined
+  parent: P extends 'edit' ? InstanceType<typeof EditView> : InstanceType<typeof InfoView>
+}
+
+export interface AutoItemProps<P extends AutoItemParser = 'edit'> {
+  parser: P
+  target: DefaultInfo
+  index: number
+  list: ObserveList
+  type: string
+  gridParse?: GridParse
+  choice?: number
+  collapse?: boolean
+  disabled?: boolean
+  loading?: boolean
+  form: P extends 'edit' ? FormValue : undefined
+  data: P extends 'info' ? Record<PropertyKey, any> : undefined
+  parent: P extends 'edit' ? InstanceType<typeof EditView> : InstanceType<typeof InfoView>
+}
+
+export default defineComponent({
+  name: 'AutoItem',
+  props: {
+    parser: {
+      type: String as PropType<AutoItemProps<AutoItemParser>['parser']>,
+      required: true
+    },
+    target: {
+      type: Object as PropType<AutoItemProps<AutoItemParser>['target']>,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    list: {
+      type: Object as PropType<AutoItemProps<AutoItemParser>['list']>,
+      required: true
+    },
+    type: { // formType
+      type: String,
+      required: true
+    },
+    gridParse: {
+      type: Object as PropType<AutoItemProps<AutoItemParser>['gridParse']>,
+      required: false
+    },
+    choice: {
+      type: Number,
+      required: false
+    },
+    collapse: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false
+    },
+    form: {
+      type: Object as PropType<AutoItemProps<AutoItemParser>['form']>,
+      required: false
+    },
+    data: {
+      type: Object as PropType<AutoItemProps<AutoItemParser>['data']>,
+      required: false
+    },
+    parent: { // EditView实例
+      type: Object as PropType<AutoItemProps<AutoItemParser>['parent']>,
+      required: true
+    }
+  },
+  computed: {
+    payload() {
+      let disabled = this.disabled
+      if (!disabled && this.target instanceof DefaultSimpleEdit) {
+        disabled = this.target.disabled.getValue(this.type)
+      }
+      return {
+        prop: this.target.$prop,
+        type: this.type,
+        target: this.target,
+        index: this.index,
+        list: this.list,
+        choice: this.choice,
+        disabled: disabled,
+        loading: this.loading,
+        targetData: this.form ? this.form.data : this.data!,
+        form: this.form,
+        data: this.data,
+        parent: this.parent,
+      }
+    },
+    isEdit() {
+      return this.parser === 'edit' && antdConfig.isEdit(this.target)
+    }
+  },
+  methods: {
+    renderTip() {
+      const mainRender = antdConfig.componentConfig.parseData(this.target.$renders, 'main')
+      const item = !mainRender ? this.renderContent() : mainRender(this.payload)
+      if (this.target.$tip) {
+        return h(Tooltip, {
+          title: this.target.$tip.getData ? this.target.$tip.getData(this.payload) : this.target.$tip.data,
+          placement: this.target.$tip.location,
+          ...antdConfig.componentConfig.parseAttrs(this.target.$tip.$attrs)
+        }, {
+          default: () => item
+        })
+      } else {
+        return item
+      }
+    },
+    renderLabel() {
+      const labelAttrs = antdConfig.componentConfig.parseData(this.target.$local, 'label') || new AttrsValue()
+      labelAttrs.pushClass('complex-auto-item-label')
+      labelAttrs.pushClass(`complex-auto-item-${(this.parent as InstanceType<typeof EditView> | InstanceType<typeof InfoView>).labelAlign}-label`)
+      if (this.target.colon && this.target.$name) {
+        labelAttrs.pushClass('complex-auto-item-colon-label')
+      }
+      return h('div', antdConfig.componentConfig.parseAttrs(labelAttrs), {
+        default: () => this.target.$name
+      })
+    },
+    renderContent() {
+      if (this.isEdit) {
+        return h(AutoEditItem, {
+          payload: this.payload as AutoItemPayloadType<'edit'>
+        })
+      } else {
+        return h(AutoInfoItem, {
+          payload: this.payload as AutoItemPayloadType<'info'>
+        })
+      }
+    }
+  },
+  render() {
+    if (antdConfig.parseCollapse(this.collapse, this.target.$collapse)) {
+      const mainRender = antdConfig.componentConfig.parseData(this.target.$renders, 'main')
+      if (!mainRender) {
+        if (this.isEdit) {
+          // edit
+          const mainAttributes = new AttrsValue({
+            class: ['complex-auto-item'],
+            props: {
+              name: this.target.$prop,
+              label: this.target.$name,
+              colon: this.target.colon,
+              required: (this.target as DictionaryEditMod).required,
+              rules: this.target instanceof DefaultEdit ? this.target.parseRuleList(this.payload.targetData, this.payload.type) : undefined
+            }
+          })
+          if (this.gridParse) {
+            mainAttributes.props.labelCol = this.gridParse!.parseData(this.target.$grid, 'label', this.type)
+            mainAttributes.props.wrapperCol = this.gridParse!.parseData(this.target.$grid, 'content', this.type)
+          }
+          mainAttributes.merge(antdConfig.componentConfig.parseData(this.target.$local, 'main'))
+          return h(FormItem, antdConfig.componentConfig.parseAttrs(mainAttributes), { default: () => this.renderTip() })
+        } else {
+          // info
+          const mainAttributes = new AttrsValue({
+            class: ['complex-auto-item', 'complex-auto-item-info']
+          })
+          mainAttributes.merge(antdConfig.componentConfig.parseData(this.target.$local, 'main'))
+          if (this.gridParse) {
+            return h(Row, antdConfig.componentConfig.parseAttrs(mainAttributes), {
+              default: () => [
+                h(Col, antdConfig.parseGrid((this.payload.parent as InstanceType<typeof EditView> | InstanceType<typeof InfoView>).gridParse!.parseData(this.payload.target.$grid, 'label', this.payload.type)), {
+                  default: () => this.renderLabel()
+                }),
+                h(Col, antdConfig.parseGrid((this.payload.parent as InstanceType<typeof EditView> | InstanceType<typeof InfoView>).gridParse!.parseData(this.payload.target.$grid, 'content', this.payload.type)), {
+                  default: () => this.renderTip()
+                })
+              ]
+            })
+          } else {
+            return h('div', antdConfig.componentConfig.parseAttrs(mainAttributes), {
+              default: () => [
+                this.renderLabel(),
+                this.renderTip()
+              ]
+            })
+          }
+        }
+      } else {
+        return mainRender(this.payload)
+      }
+    } else {
+      return null
+    }
+  }
+})

package/src/icons/EmptyImage.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg t="1743059212679" class="complex-local-icon complex-local-icon-empty-image" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3040" xmlns:xlink="http://www.w3.org/1999/xlink" :width="size" :height="size">
+    <path :fill="color" d="M128 832V512h64v146.752l192-192L749.248 832H832V192H512V128h320a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H192a64 64 0 0 1-64-64z m256-274.752l-192 192V832h466.752L384 557.248z" p-id="3041"></path>
+    <path :fill="color" d="M768 384a128 128 0 1 1-256 0 128 128 0 0 1 256 0z m-64 0a64 64 0 1 0-128 0 64 64 0 0 0 128 0zM402.048 355.84l-45.248 45.184-90.496-90.496-90.496 90.496-45.312-45.248 90.56-90.496-90.56-90.496 45.312-45.248L266.24 220.032l90.496-90.496 45.248 45.248-90.496 90.496 90.496 90.496z" p-id="3042"></path>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { dataConfig } from "@complex-suite/data"
+import type { localIconProps } from "../../type"
+
+export default defineComponent({
+  name: 'EmptyImage',
+  props: {
+    size: {
+      type: Number as PropType<localIconProps['size']>,
+      required: false,
+      default: 128
+    },
+    color: {
+      type: String as PropType<localIconProps['color']>,
+      required: false,
+      default: () => {
+        return dataConfig.style.color.disabled
+      }
+    }
+  }
+})
+</script>

package/src/icons/ErrorImage.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg t="1743059212679" class="complex-local-icon complex-local-icon-error-image" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3040" xmlns:xlink="http://www.w3.org/1999/xlink" :width="size" :height="size">
+    <path :fill="color" d="M128 832V512h64v146.752l192-192L749.248 832H832V192H512V128h320a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H192a64 64 0 0 1-64-64z m256-274.752l-192 192V832h466.752L384 557.248z" p-id="3041"></path>
+    <path :fill="color" d="M768 384a128 128 0 1 1-256 0 128 128 0 0 1 256 0z m-64 0a64 64 0 1 0-128 0 64 64 0 0 0 128 0zM402.048 355.84l-45.248 45.184-90.496-90.496-90.496 90.496-45.312-45.248 90.56-90.496-90.56-90.496 45.312-45.248L266.24 220.032l90.496-90.496 45.248 45.248-90.496 90.496 90.496 90.496z" p-id="3042"></path>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { dataConfig } from "@complex-suite/data"
+import type { localIconProps } from "../../type"
+
+export default defineComponent({
+  name: 'ErrorImage',
+  props: {
+    size: {
+      type: Number as PropType<localIconProps['size']>,
+      required: false,
+      default: 128
+    },
+    color: {
+      type: String as PropType<localIconProps['color']>,
+      required: false,
+      default: () => {
+        return dataConfig.style.color.danger
+      }
+    }
+  }
+})
+</script>