kuailelunwen_new_houtai/src/views/super/clientSet/catalogPage.vue

<template>
    <div class="mainTextPage main-content12">
        <h3 class="pageTitle">目录</h3>
        <div class="flex-between flex-common" id="mainTextTitle">
            <ClientForm ref="oneLevelRef" title="一级标题" :init-data="oneFormData" :titlePosFlag="false"
                :fontDetailflag="true" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
                @submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
            <ClientForm ref="twoLevelRef" title="二级标题" :titlePosFlag="false" :fontDetailflag="true"
                :init-data="twoFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
                @submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
        </div>
        <div class="flex-between flex-common mt12" id="">
            <ClientForm ref="threeLevelRef" title="三级标题" :titlePosFlag="false" :fontDetailflag="true"
                :init-data="threeFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
                @submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
        </div>
    </div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
    components: {
        ClientForm,
    },
    data() {
        return {
            oneFormData: {
                fontSize: '12',
                align: 1,
                indentation: '0',
                ch_font:1,
                ch_f_weight: 1,
                eng_font:1,
                eng_f_weight: 1,
                paragraph_before: '1',
                paragraph_after: '2',
                lineSpace: '1.5',
                lineSpaceUnit:'2'
            },
            twoFormData: {
                fontSize: '12',
                align: 1,
                indentation: '1'
            },
            threeFormData: {
                fontSize: '12',
                align: 1,
                indentation: '0'
            },
        };
    },
    mounted() {
        // this.getCataInfo();
    },
    methods: {
        getCataInfo(){
            this.$http('POST', '/api', {}, {
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 外部重置方法
        handleCancelEvent(formData, refName) {
            console.log('外部重置方法:', formData);
            // 根据 refName 执行不同的重置逻辑
            switch (refName) {
                case 'oneLevel':
                    console.log('执行一级标题重置逻辑');
                    // 这里可以调用对应的 ref 方法
                    this.$refs[refName + 'Ref']?.someMethod();
                    break;
                case 'twoLevel':
                    console.log('执行二级标题重置逻辑');
                    break;
                case 'threeLevel':
                    console.log('执行三级标题重置逻辑');
                    break;
                default:
                    console.log('默认重置逻辑');
            }
        },

        // 外部提交方法
        handleSubmitEvent(formData, refName) {
            console.log('外部提交方法:', formData);
            // 根据 refName 调用不同的 API
            switch (refName) {
                case 'oneLevel':
                    this.submitOneLevel(formData);
                    break;
                case 'twoLevel':
                    this.submitTwoLevel(formData);
                    break;
            }
        },
        submitOneLevel(data) {
            // 调用一级标题的 API
            console.log('提交一级标题数据:', data);
            this.$http('POST', '/api', this.formData, {
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },

        submitTwoLevel(data) {
            // 调用二级标题的 API
            console.log('提交二级标题数据:', data);
        }
    },
};
</script>
<style>
.flex-common {
    align-items: flex-start;
    padding: 24px 32px;

}
</style>