mobile/src/components/low-code/my-form-item.vue

<template>
  <u-form-item class="my-form-item" label=" " label-width="1rpx" :border-bottom="false" :prop="config.formName">
    <view>
      <view class="top-label flex items-center" :class="{ 'm-t-40rpx m-b-30rpx': isBigTitle }">
        <text>{{ config.title }}</text>
      </view>
      <!-- <TEXT :config="config" :onChange="onChange" type="text"></TEXT> -->
      <!-- <SELECT :config="config" :onChange="onChange"></SELECT> -->
      <!-- <MULTIPLESELECT :config="config" :onChange="onChange"></MULTIPLESELECT> -->
      <!-- <DATE :config="config" :onChange="onChange"></DATE> -->
      <!-- <RADIO :config="config" :onChange="onChange"></RADIO> -->
      <!-- <CHECKBOX :config="config" :onChange="onChange"></CHECKBOX> -->
      <!-- <TEXT :config="config" :onChange="onChange" type="textarea"></TEXT> -->
      <!-- <TEXT :config="config" :onChange="onChange" type="number"></TEXT> -->
      <!-- <UPLOADIMAGE :config="config" :onChange="onChange"></UPLOADIMAGE> -->
      <!-- <RADIOWITHINPUT :config="config" :onChange="onChange"></RADIOWITHINPUT> -->
      <!-- <DEVICEINTABLE :config="config" :onChange="onChange"></DEVICEINTABLE> -->
      <DEVICEOUTTABLE :config="config" :onChange="onChange"></DEVICEOUTTABLE>
    </view>
  </u-form-item>
</template>

<script>
  import TEXT from './TEXT.vue'
  import SELECT from './SELECT.vue'
  import MULTIPLESELECT from './MULTIPLE_SELECT.vue'
  import DATE from './DATE.vue'
  import RADIO from './RADIO.vue'
  import CHECKBOX from './CHECKBOX.vue'
  import UPLOADIMAGE from './UPLOAD_IMAGE.vue'
  import RADIOWITHINPUT from './RADIO_WITH_INPUT.vue'
  import DEVICEINTABLE from './DEVICE_IN_TABLE.vue'
  import DEVICEOUTTABLE from './DEVICE_OUT_TABLE.vue'
  export default {
    name: 'MyFormItem',
    props: ['config'],
    components: { TEXT, SELECT, MULTIPLESELECT, DATE, RADIO, CHECKBOX, UPLOADIMAGE, RADIOWITHINPUT, DEVICEINTABLE, DEVICEOUTTABLE },
    computed: {
      isBigTitle() {
        return this.bigTitles.includes(this.config.code)
      }
    },
    data() {
      return {
        bigTitles: ['FORM_GROUP_TITLE', 'ONLY_TITLE']
      }
    },
    methods: {
      onChange(obj) {
        this.$emit('change', obj)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-form-item {
    .top-label {
      color: #262626;
      font-size: 28rpx;
      line-height: 60rpx;
      font-weight: bold;
    }
  }
</style>