xiangyuan-app/src/components/dynamic/DynamicFormCate.vue

<template>
  <view 
    v-if="formDefine.type === 'group'" 
    :class="`form-group ${formDefine.props.type}`"
  >
    <text class="form-group-title" v-if="formDefineParentLabel">
      {{ formDefineParentLabel }}
    </text>
    <DynamicFormCateInner
      :formDefine="formDefine"
      :formModel="formModel" 
      :groupType="formDefine.props.type"
    />
  </view>
  <DynamicFormCateInner
    v-else
    :formDefine="formDefine"
    :formModel="formModel" 
  />
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import type { FormDefine } from '.';
import DynamicFormCateInner from './DynamicFormCateInner.vue';

export interface FormGroupProps {
  type: 'row' | 'column' | 'block';
}

const props = defineProps({
  formDefineParentLabel: {
    type: null,
    default: '' 
  },
  formDefineParentKey: {
    type: String,
    default: '' 
  },
  formModel: {
    type: Object,
    default: () => ({})
  },
  formDefine: {
    type: Object as PropType<FormDefine>,
    default: () => ({})
  },
})
</script>

<style lang="scss">
.form-group {
  display: flex;
  flex-direction: column;

  &.block {
    margin-bottom: 32rpx;
    padding: 24rpx 0;
    background: #fff;
    border-radius: 10rpx;

    .form-group-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }
  }

  .form-group-title {
    display: block;
    flex-shrink: 0;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    margin-left: 26rpx;
  }

  &.row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .form-group-title {
      display: inline-block;
      margin-left: 30rpx;
    }
  }
}
</style>