@complex-suite/component-antd 4.10.12

package/quick/QuickEdit.tsx

@@ -0,0 +1,117 @@
+import { h, defineComponent, PropType, VNode } from 'vue'
+import ModalView from './../src/ModalView'
+import type { ModalViewProps } from './../src/ModalView'
+import EditArea from './../src/EditArea'
+import type { EditAreaProps } from './../src/EditArea'
+import InfoArea from './../src/InfoArea'
+import type { InfoAreaProps } from './../src/InfoArea'
+
+export type QuickEditTarget = 'edit' | 'info'
+
+export interface QuickEditProps<T extends QuickEditTarget = 'edit'> {
+  content: string | (() => VNode | VNode[])
+  contentProps?: {
+    id?: string
+    class?: string
+    style?: Record<string, any>
+  }
+  data?: Record<PropertyKey, any>
+  type?: string
+  target?: T
+  targetProps: T extends 'edit' ? EditAreaProps : InfoAreaProps
+  modalProps?: ModalViewProps
+}
+
+export default defineComponent({
+  name: 'QuickEdit',
+  emits: {
+    submit: (_targetData: Record<string, any>, _originData: undefined | Record<string, any>, _type: string) => {
+      return true
+    }
+  },
+  props: {
+    content: {
+      type: [String, Function] as PropType<QuickEditProps<QuickEditTarget>['content']>,
+      required: true
+    },
+    contentProps: {
+      type: Object as PropType<QuickEditProps<QuickEditTarget>['contentProps']>
+    },
+    data: {
+      type: Object as PropType<QuickEditProps<QuickEditTarget>['data']>
+    },
+    type: {
+      type: String as PropType<QuickEditProps<QuickEditTarget>['type']>
+    },
+    target: {
+      type: String as PropType<QuickEditProps<QuickEditTarget>['target']>
+    },
+    targetProps: {
+      type: Object as PropType<QuickEditProps<QuickEditTarget>['targetProps']>,
+      required: true
+    },
+    modalProps: {
+      type: Object as PropType<QuickEditProps<QuickEditTarget>['modalProps']>,
+      required: false
+    }
+  },
+  methods: {
+    showTarget() {
+      (this.$refs.modal as InstanceType<typeof ModalView>).show()
+      this.$nextTick(() => {
+        (this.$refs.target as InstanceType<typeof EditArea | typeof InfoArea>).$show(this.type, this.data)
+      })
+    },
+    renderContent() {
+      return h('span', {
+        class: 'complex-color-link',
+        onClick: () => {
+          this.showTarget()
+        },
+        ...this.contentProps
+      }, typeof this.content === 'string' ? this.content : this.content())
+    },
+    renderPanel() {
+      if (this.target !== 'info') {
+        return h(ModalView, {
+          ref: 'modal',
+          width: 880,
+          menu: ['cancel', 'submit'],
+          submit: () => {
+            const promise = (this.$refs.target as InstanceType<typeof EditArea>).$submit()
+            promise.then(res => {
+              this.$emit('submit', res.targetData, res.originData, res.type)
+            })
+            return promise
+          },
+          ...this.modalProps
+        }, {
+          default: () => h(EditArea, {
+            ref: 'target',
+            ...this.targetProps
+          })
+        })
+      } else {
+        return h(ModalView, {
+          ref: 'modal',
+          width: 880,
+          menu: ['close'],
+          ...this.modalProps
+        }, {
+          default: () => h(InfoArea, {
+            ref: 'target',
+            ...this.targetProps
+          })
+        })
+      }
+    },
+  },
+  render() {
+    return h('div', {
+      class: 'complex-quick-panel'
+    }, [
+      this.renderContent(),
+      this.renderPanel()
+    ])
+  }
+})

package/quick/QuickFloat.tsx

@@ -0,0 +1,32 @@
+import { defineComponent, h, PropType } from "vue"
+import FloatData from "./data/FloatData"
+import type { FloatValue } from "./data/FloatData"
+import QuickFloatValue from "./QuickFloatValue"
+
+export default defineComponent({
+  name: 'QuickFloat',
+  props: {
+    float: {
+      type: Object as PropType<FloatData>,
+      required: true
+    }
+  },
+  methods: {
+    renderValue(floatValue: FloatValue) {
+      return h(QuickFloatValue, {
+        floatValue,
+        onClose: (floatValue: FloatValue, from: string) => {
+          this.float.close(floatValue, from)
+        }
+      })
+    },
+    renderList() {
+      return this.float.list.map(floatValue => {
+        return this.renderValue(floatValue)
+      })
+    }
+  },
+  render() {
+    return h('div', { class: 'complex-quick-float' }, [ this.renderList() ])
+  }
+})

package/quick/QuickFloatModal.tsx

@@ -0,0 +1,95 @@
+import { defineComponent, h, PropType } from "vue"
+import type { ModalProps } from "ant-design-vue"
+import ModalView from "../src/ModalView"
+import type { ModalViewSlotProps } from "../src/ModalView"
+import FloatData from "./data/FloatData"
+import type { FloatValue } from "./data/FloatData"
+import { contentRef } from "./QuickFloatValue"
+
+export interface QuickFloatModalProps {
+  modal: FloatValue['modal']
+  content: FloatValue['content']
+  float?: FloatData
+}
+
+export default defineComponent({
+  name: 'QuickFloatModal',
+  emits: {
+    // 关闭
+    close: (from: string) => {
+      return typeof from === 'string'
+    },
+    // 菜单
+    menu: (prop: string, _self: any) => {
+      return typeof prop === 'string'
+    }
+  },
+  props: {
+    modal: {
+      type: Object as PropType<QuickFloatModalProps['modal']>,
+      required: true
+    },
+    content: {
+      type: Object as PropType<QuickFloatModalProps['content']>,
+      required: true
+    },
+    float: {
+      type: Object as PropType<QuickFloatModalProps['float']>,
+      required: false
+    },
+  },
+  data() {
+    return {
+      floatValue: undefined as undefined | FloatValue
+    }
+  },
+  methods: {
+    getContent() {
+      return !this.float ? this.$refs[contentRef] : this.floatValue?.target?.getContent()
+    },
+    getModal() {
+      return !this.float ? (this.$refs.modal as InstanceType<typeof ModalView>) : this.floatValue?.target?.getModal()
+    },
+    show(args: any[], title?: string, option?: ModalProps) {
+      if (!this.float) {
+        (this.$refs.modal as InstanceType<typeof ModalView>).show(title, option)
+        this.$nextTick(() => {
+          if (this.content.show) {
+            this.content.show.trigger(this.getContent(), args)
+          }
+        })
+      } else {
+        this.floatValue = this.float.push({
+          label: {
+            value: title || this.modal.title || '浮窗'
+          },
+          modal: {
+            title: title,
+            ...this.modal
+          },
+          content: {
+            render: this.content.render,
+            show: this.content.show ? {
+              trigger: this.content.show.trigger,
+              args: args
+            } : undefined
+          }
+        })
+      }
+    }
+  },
+  render() {
+    if (!this.float) {
+      return h(ModalView, {
+        ref: 'modal',
+        ...this.modal
+      }, {
+        default: (modalSlotProps: ModalViewSlotProps) => {
+          return this.content.render(contentRef, modalSlotProps)
+        }
+      })
+    } else {
+      return null
+    }
+  }
+})

package/quick/QuickFloatValue.tsx

@@ -0,0 +1,103 @@
+import { defineComponent, h, PropType, markRaw } from "vue"
+import { FloatValue } from "./data/FloatData"
+import ModalView from "./../src/ModalView"
+import type { ModalViewSlotProps } from "./../src/ModalView"
+import icon from "../icon"
+
+export const contentRef = 'content'
+export const modalRef = 'modal'
+
+export default defineComponent({
+  name: 'QuickFloatValue',
+  emits: {
+    // 关闭
+    close: (floatValue: FloatValue, _from: string) => {
+      return !!floatValue
+    }
+  },
+  props: {
+    floatValue: {
+      type: Object as PropType<FloatValue>,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    'floatValue.show': {
+      immediate: true,
+      handler: function (value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.show()
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+    this.floatValue.target = markRaw(this) as any
+  },
+  beforeUnmount() {
+    this.floatValue.target = undefined
+  },
+  methods: {
+    getContent() {
+      return this.$refs[contentRef]
+    },
+    getModal() {
+      return this.$refs[modalRef] as InstanceType<typeof ModalView>
+    },
+    show() {
+      this.getModal().show()
+      if (!this.floatValue.init) {
+        this.floatValue.init = true
+        this.$nextTick(() => {
+          if (this.floatValue.content.show) {
+            this.floatValue.content.show.trigger(this.getContent(), this.floatValue.content.show.args)
+          }
+        })
+      }
+    },
+    close(from = 'float') {
+      this.getModal().close(from)
+    },
+    renderContent() {
+      if (!this.floatValue.init && !this.floatValue.show) {
+        // 未加载未展示直接不进行构建
+        return null
+      }
+      return h(ModalView, {
+        class: 'complex-quick-float-item-modal',
+        ref: modalRef,
+        onClose: (from: string) => {
+          this.$emit('close', this.floatValue, from)
+        },
+        ...this.floatValue.modal
+      }, {
+        default: (modalSlotProps: ModalViewSlotProps) => {
+          return this.floatValue.content.render('content', modalSlotProps)
+        }
+      })
+    },
+    renderName() {
+      return h('div', {
+        class: 'complex-quick-float-item-label',
+        onClick: () => {
+          if (!this.floatValue.show) {
+            this.floatValue.show = true
+          }
+        }
+      }, {
+        default: () => [
+          this.floatValue.label.icon ? icon.parse(this.floatValue.label.icon) : null,
+          typeof this.floatValue.label.value !== 'function' ? this.floatValue.label.value : this.floatValue.label.value()
+        ]
+      })
+    },
+  },
+  render() {
+    return h('div', { class: ['complex-quick-float-item', this.floatValue.show ? 'complex-quick-float-item-active' : ''] }, [ this.renderContent(), this.renderName() ])
+  }
+})