ylrz_saas_his_scrm_adminUI/src/components/H5/FormWrapper.vue

<template>
  <el-form ref="form" :model="form" label-width="130px" v-if="form && form.type">
    <!-- Text component form items -->
    <text-form-items
      v-if="form.type === 'h5-text'"
      :config="form"
      @update:config="updateFormConfig"
    />

    <!-- Image component form items -->
    <image-form-items
      v-if="form.type === 'h5-image'"
      :config="form"
    />

    <!-- Sep component form items -->
    <sep-form-items
      v-if="form.type === 'h5-sep'"
      :config="form"
    />

    <!-- Countdown component form items -->
    <countdown-form-items
      v-if="form.type === 'h5-countdown'"
      :config="form"
      @update:config="updateFormConfig"
    />

    <chat-form-items
      v-if="form.type === 'h5-chat'"
      :config="form"
      @update:config="updateFormConfig"
      />

    <!-- Common form items for all components -->
    <common-form-items
      :config="form"
      :index="index"
      :list="list"
      @bottom-change="handleBottomChange"
      @delete="handleDelete"
      @update:config="updateFormConfig"
    />
  </el-form>
</template>

<script>
import TextFormItems from './config-item/h5-text-config.vue';
import ImageFormItems from './config-item/h5-image-config.vue';
import SepFormItems from './config-item/h5-sep-config.vue';
import CommonFormItems from './config-item/common-config.vue';
import CountdownFormItems from './config-item/h5-countdown-config.vue';
import ChatFormItems from './config-item/h5-chat-config.vue'
export default {
  name: 'FormWrapper',
  components: {
    TextFormItems,
    ImageFormItems,
    SepFormItems,
    CommonFormItems,
    CountdownFormItems,
    ChatFormItems
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: -1
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    updateFormConfig(newConfig) {
      console.log("更新表单配置...");
      // Update form config
      this.$emit('update:form', newConfig);
    },
    handleBottomChange() {
      // Check if another item is already fixed to bottom
      let hasFooter = this.list.some((item, idx) =>
        idx !== this.index && item.classText && item.classText.includes('footer')
      );

      if(hasFooter) {
        alert('全局只能允许有一个在底部!');
        this.form.fixe = false;
        return;
      }

      // Update the class
      let className = "footer";
      if (this.form.fixe) {
        this.addClassToItem(className);
      } else {
        this.removeClassFromItem(className);
      }
    },
    addClassToItem(className) {
      if (!this.form.classText.includes(className)) {
        this.form.classText.push(className);
      }
    },
    removeClassFromItem(className) {
      this.form.classText = this.form.classText.filter(cls => cls !== className);
    },
    handleDelete() {
      this.$emit('delete', this.index);
    }
  }
}
</script>

<style scoped>
.el-form-item__label{
  text-align: center !important;
}
</style>