aizuda-web-vue3/src/components/packages/formEditor/config.vue

<script>
import { defineProps, ref, reactive, computed, provide, getCurrentInstance, watch, nextTick, onMounted } from 'vue'
import ConfigPanel from '@ER/formEditor/components/Panels/Config/index.vue'
import hooks from '@ER/hooks'
import utils from '@ER/utils'
import _ from 'lodash-es'
import defaultProps from './defaultProps'
import { globalConfig } from './componentsConfig'
export default {
	name: 'EverrightFormConfig'
}
</script>
<script setup>
const emit = defineEmits(['listener'])
const props = defineProps(
	_.merge(
		{
			field: {
				type: [Object, String],
				required: true
			},
			fields: {
				type: Array,
				default: () => []
			}
		},
		defaultProps
	)
)
const layout = {
	pc: [],
	mobile: []
}
const state = reactive({
	store: [],
	selected: {},
	config: globalConfig,
	platform: 'pc',
	Namespace: 'formEditor',
	validateStates: [],
	data: {},
	mode: 'config',
	fields: props.fields,
	logic: {}
})
const element = ref('')
const ns = hooks.useNamespace('Main', state.Namespace)
const loading = ref(false)
const setSelection = node => {
	let result = ''
	if (node === 'root') {
		result = state.config
	} else {
		if (node.type === 'inline') {
			result = node.columns[0]
		} else {
			result = node
		}
	}
	state.selected = result
}
const switchPlatform = platform => {
	state.platform = platform
}
const fireEvent = (type, data) => {
	emit('listener', {
		type,
		data
	})
}
provide('Everright', {
	state,
	emit,
	props,
	setSelection,
	switchPlatform,
	fireEvent
})
watch(
	() => props.field,
	newVal => {
		if (newVal !== 'root') {
			state.store[0] = newVal
			utils.addContext(newVal, state.store)
		}
		setSelection(newVal)
	},
	{
		immediate: true
	}
)
defineExpose({
	switchPlatform
})
watch(
	() => state.selected,
	newVal => {
		fireEvent('changeParams', _.cloneDeep(newVal))
	},
	{
		deep: true,
		immediate: true
	}
)
</script>
<template>
	<ConfigPanel mode="config"></ConfigPanel>
</template>