123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- import { h, toRefs, computed } from 'vue'
- import { getH5LayoutComponent, getLayoutComponent, getLayoutViewComponent } from '@cip/components/cip-form-layout/util'
- import { useFormInject } from '../hooks/use-form'
- import './index.less'
- export default {
- name: 'CipFormLayout',
- props: {
- config: Object, // 字段配置信息
- fieldKey: String, // 字段名
- model: { // 字段所属model
- type: Object,
- default: () => ({})
- },
- grid: {}, // Number | Boolean
- componentKey: {},
- readonly: Boolean // 是否只读-即查看模式
- },
- emits: ['update:model', 'validate', 'submit', 'cancel', 'selectItem', 'update:config'],
- setup (props, context) {
- const { model } = toRefs(props)
- const { cipForm } = useFormInject()
- const cipFormStyle = computed(() => {
- if (props.grid) {
- return { gridColumn: `span ${props.config.span}` }
- } else {
- return 'width: 100%'
- }
- })
- const formLayout = () => {
- const componentProps = {
- class: ['cip-form-layout', { 'cip-form-layout--hidden': props.config.hideItem }],
- model: model.value,
- config: props.config,
- fieldKey: props.fieldKey,
- style: cipFormStyle.value
- }
- const componentType = props.config.type
- if (props.readonly) {
- return h(getLayoutViewComponent(componentType), componentProps, {
- item: ({ children, index }) => {
- return context.slots.item?.({ children, index })
- }
- })
- } else {
- const method = cipForm.equipment === 'pc' ? getLayoutComponent : getH5LayoutComponent
- return h(method(componentType),
- {
- ...componentProps,
- 'onUpdate:config': (val) => { context.emit('update:config', val) },
- onValidate: (fn) => { context.emit('validate', fn) },
- onSubmit: () => { context.emit('submit') },
- onCancel: () => { context.emit('cancel') },
- onSelectItem: (val) => { context.emit('selectItem', val) }
- }
- , {
- item: (scope) => {
- return context.slots.item?.(scope)
- }
- }
- )
- }
- }
- return () => formLayout()
- }
- }
|