/** * @name: RightAttributePanel * @author: 卜启缘 * @date: 2021/4/28 16:59 * @description:属性编辑器 * @update: 2021/4/28 16:59 */ import { defineComponent, PropType, reactive } from 'vue' import styles from './index.module.scss' import './index.common.scss' import { ElColorPicker, ElForm, ElFormItem, ElInput, ElInputNumber, ElOption, ElSelect, ElSwitch, ElTabPane, ElTabs, ElPopover } from 'element-plus' import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props' import { TablePropEditor } from '@/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor' import { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils' import MonacoEditor from '../common/monaco-editor/MonacoEditor' import { useVModel } from '@vueuse/core' import { useDotProp } from '@/visual-editor/hooks/useDotProp' import { useVisualData } from '@/visual-editor/hooks/useVisualData' export default defineComponent({ name: 'RightAttributePanel', props: { block: { type: Object as PropType, default: () => ({}) } }, setup(props, { emit }) { const { visualConfig } = useVisualData() const state = reactive({ activeName: 'attr', isOpen: true, editData: useVModel(props, 'block', emit) }) const renderEditor = (propName: string, propConfig: VisualEditorProps) => { const { propObj, prop } = useDotProp(state.editData.props, propName) return { [VisualEditorPropsType.input]: () => ( ), [VisualEditorPropsType.inputNumber]: () => , [VisualEditorPropsType.switch]: () => , [VisualEditorPropsType.color]: () => , [VisualEditorPropsType.select]: () => ( {(() => { return propConfig.options!.map((opt) => ( )) })()} ), [VisualEditorPropsType.table]: () => ( ) }[propConfig.type]() } return () => { const content: JSX.Element[] = [] if (!props.block) { content.push( <> ) } else { const { componentKey } = props.block const component = visualConfig.componentMap[componentKey] console.log('props.block:', props.block) content.push( {props.block._vid} ( ) }} > ) if (!!component) { if (!!component.props) { content.push( <> {Object.entries(component.props || {}).map(([propName, propConfig]) => ( propConfig.tips ? ( <> }} > {propConfig.label} ) : ( propConfig.label ) }} > {renderEditor(propName, propConfig)} ))} ) } } } const handleSchemaChange = (val) => { try { const newObj = JSON.parse(val) Object.assign(state.editData, newObj) } catch (e) { console.log('JSON格式有误:', e) } } return ( <>
(state.isOpen = !state.isOpen)}>
{content}
) } } })