From e60f10324ec658c1c20497a8de7974d88f69b150 Mon Sep 17 00:00:00 2001 From: caixiaofeng <1941338475@qq.com> Date: Fri, 24 Nov 2023 22:27:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=A7=A3=E6=9E=90=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Render/index.ts | 7 ++ src/components/Render/index.tsx | 88 +++++++++++++++++++++ src/views/flowDesign/penal/ApprovalAttr.vue | 20 ++--- 3 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 src/components/Render/index.ts create mode 100644 src/components/Render/index.tsx diff --git a/src/components/Render/index.ts b/src/components/Render/index.ts new file mode 100644 index 0000000..9fa5893 --- /dev/null +++ b/src/components/Render/index.ts @@ -0,0 +1,7 @@ +export interface Field { + id: string, + title: string, + name: string, + value: any, + props: Record +} \ No newline at end of file diff --git a/src/components/Render/index.tsx b/src/components/Render/index.tsx new file mode 100644 index 0000000..1657684 --- /dev/null +++ b/src/components/Render/index.tsx @@ -0,0 +1,88 @@ +import {defineAsyncComponent, defineComponent, h, PropType, resolveComponent} from "vue"; +import {cloneDeep} from 'lodash-es' +import {Field} from "./index"; + +export default defineComponent({ + props: { + modelValue: { + type: [String, Number, Boolean, Array, Object] as PropType, + default: undefined, + required: false + }, + field: { + type: Object as PropType, + required: true + } + }, + emits: ['update:modelValue'], + components: { + Input: defineAsyncComponent(() => import('element-plus/es').then(({ElInput}) => ElInput)), + Select: defineAsyncComponent(() => import('element-plus/es').then(({ElSelect}) => ElSelect)), + Radio: defineAsyncComponent(() => import('element-plus/es').then(({ElRadio}) => ElRadio)), + Checkbox: defineAsyncComponent(() => import('element-plus/es').then(({ElCheckbox}) => ElCheckbox)), + }, + setup(props, {emit}) { + /** + * 构建属性参数 + * @param fieldClone + */ + const buildDataObject = (fieldClone: Field) => { + const dataObject: Record = {} + const _props = fieldClone.props || {} + Object.keys(_props).forEach(key => { + dataObject[key] = _props[key] + }) + dataObject.modelValue = fieldClone.value + dataObject['onUpdate:modelValue'] = (value: any) => { + emit('update:modelValue', value) + } + return dataObject + } + /** + * 构建插槽 + * @param fieldClone + */ + const buildSlots = (fieldClone: Field) => { + let children: Record = {} + const slotFunctions: Record = { + Select: (conf: Field) => { + return conf.props.options.map((item: any) => { + return + }) + }, + Radio: (conf: Field) => { + return conf.props.options.map((item: any) => { + return {item.label} + }) + }, + Checkbox: (conf: Field) => { + return conf.props.options.map((item: any) => { + return {item.label} + }) + } + } + const slotFunction = slotFunctions[fieldClone.name] + if (slotFunction) { + children.default = () => { + return slotFunction(fieldClone) + } + } + return children + } + return { + buildDataObject, + buildSlots + } + }, + render() { + const fieldClone: Field = cloneDeep(this.field) + const slots = this.buildSlots(fieldClone) + const dataObject = this.buildDataObject(fieldClone) + const componentName = fieldClone.name + const eleComponent = resolveComponent(componentName) + if (typeof eleComponent === 'string') { + return h(eleComponent, dataObject, slots) + } + return h(eleComponent, dataObject, slots) + } +}) \ No newline at end of file diff --git a/src/views/flowDesign/penal/ApprovalAttr.vue b/src/views/flowDesign/penal/ApprovalAttr.vue index 6dc6b49..d911df7 100644 --- a/src/views/flowDesign/penal/ApprovalAttr.vue +++ b/src/views/flowDesign/penal/ApprovalAttr.vue @@ -50,16 +50,16 @@ const {node} = useVModels($props, $emits) - - - - - - - - - - + + + + + + + + + +