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

<template>
    <!-- 致谢页面、参考文献页面应该能公用、后续根据实际情况克以直接合并页面-->
    <div class="mainTextPage main-content12">
        <h3 class="pageTitle">致谢</h3>
        <div class="flex-between flex-common" id="mainTextTitle">
            <ClientForm ref="thanksTitleRef" title="致谢标题" :init-data="thanksTitleFormData" :titlePosFlag="false"
                :fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'thanksTitle')"
                @submit="(data) => handleSubmitEvent(data, 'thanksTitle')" />
            <ClientForm ref="thanksTextRef" title="致谢正文" desc="自动继承正文数据，可修改" :titlePosFlag="false" :fontDetailflag="true"
                :init-data="thanksTextFormData" @cancel="(data) => handleCancelEvent(data, 'thanksText')"
                @submit="(data) => handleSubmitEvent(data, 'thanksText')" />
        </div>
    </div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
    components: {
        ClientForm,
    },
    data() {
        return {
            thanksTitleFormData: {
                fontSize: '12',
                align: 1,
                indentation: '0'
            },
            thanksTextFormData: {
                fontSize: '12',
                align: 1,
                indentation: '0'
            },
        };
    },
    methods: {
        // 外部重置方法
        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;
                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>