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="level1HeadingData" :titlePosFlag="false"
             @cancel="(data) => handleCancelEvent(data, 'thanksTitle')" :outputStructure="one"
                @submit="(data) => handleSubmitEvent(data, 'thanksTitle')" />
            <ClientForm ref="thanksTextRef" title="致谢正文" desc="自动继承正文数据，可修改" :titlePosFlag="false"
                :init-data="level2HeadingData" @cancel="(data) => handleCancelEvent(data, 'thanksText')" :outputStructure="two"
                @submit="(data) => handleSubmitEvent(data, 'thanksText')" />
        </div>

        <ReviewBtn ></ReviewBtn>

    </div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import ReviewBtn from '@/components/clientSet/reviewBtn.vue';
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
    components: {
        ClientForm,
        ReviewBtn
    },
    data() {
        return {
            one:['acknowledgments', 'title'],
            two:['acknowledgments', 'content'],
        };
    },
    computed: {
        ...mapState(['client_tpl_review_status','client_tpl_config']), 
        level1HeadingData() {
            return this.getDynamicDataSafe(this.one);
        },
        
        level2HeadingData() {
            return this.getDynamicDataSafe(this.two);
        },
    },
    mounted() {
        // this.getThanksInfo();
      
    },
    methods: {
        getDynamicDataSafe(outputStructure) {
            if (!Array.isArray(outputStructure) || outputStructure.length === 0) {
                return {};
            }
            
            // 使用reduce构建访问路径
            const result = outputStructure.reduce((obj, key) => {
                return obj?.[key];
            }, this.client_tpl_config);
            
            return result || {};
        },
        handleSubmitEvent(formData, refName) {
            console.log('外部提交方法:', formData,refName);
            // 根据 refName 调用不同的 API
            this.submitConfig(formData);

            // switch (refName) {
            //     case 'level_1_heading':
            //         this.submitConfig(formData);
            //         break;
            //     case 'level_2_heading':
            //         this.submitConfig(formData);
            //         break;
            // }
        },
        async submitConfig(data) {
            // API待定定接口路径和参数
            if(!this.client_tpl_id && !this.$route.query.id){
                this.$Message.error('模板ID不存在');
                return;
            }else{
                store.commit('SET_CLIENTTEMID', this.$route.query.id);
            }

            await store.dispatch('updateClientConfig',{
                id: this.client_tpl_id || this.$route.query.id,
                config_json:JSON.stringify(data),
                message: this.$Message
            });
        },
        // 外部重置方法
        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('默认重置逻辑');
            }
        },
    },
};
</script>
<style>
.flex-common {
    align-items: flex-start;
    padding: 24px 32px;
}
</style>