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

<template>
    <div class="mainTextPage main-content12">
        <h3 class="pageTitle">摘要</h3>
        <div class="flex-between flex-common" id="summaryTitle">
            <ClientForm ref="chTitleRef" title="中文摘要标题" :init-data="chTitleData" :titlePosFlag="false"
                :fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'chTitleRef')"
                @submit="(data) => handleSubmitEvent(data, 'chTitleRef')" />
            <ClientForm ref="engTitleRef" title="英文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="engTitleData" @cancel="(data) => handleCancelEvent(data, 'engTitleRef')"
                @submit="(data) => handleSubmitEvent(data, 'engTitleRef')" />
        </div>
        <div class="flex-between flex-common mt12" id="summaryContent">
            <ClientForm ref="chTextRef" title="中文摘要正文" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="chTextData" @cancel="(data) => handleCancelEvent(data, 'chTextRef')"
                @submit="(data) => handleSubmitEvent(data, 'chTextRef')" />
            <ClientForm ref="engTextRef" title="英文摘要正文" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="engTextData" @cancel="(data) => handleCancelEvent(data, 'engTextRef')"
                @submit="(data) => handleSubmitEvent(data, 'engTextRef')" />
        </div>
        <div class="flex-between flex-common mt12" id="summaryKeyWords">
            <ClientForm ref="chKeyRef" title="中文关键词" :titlePosFlag="false" :fontDetailflag="false"
                :ch_keywords="true" :showIndentation="false"
                :init-data="chKeyData" @cancel="(data) => handleCancelEvent(data, 'chKeyRef')"
                @submit="(data) => handleSubmitEvent(data, 'chKeyRef')" />
            <ClientForm ref="engKeyRef" title="英文关键词" :titlePosFlag="false" :fontDetailflag="false"
                :eng_keywords="true" :showIndentation="false"
                :init-data="engKeyData" @cancel="(data) => handleCancelEvent(data, 'engKeyRef')"
                @submit="(data) => handleSubmitEvent(data, 'engKeyRef')" />
        </div>
    </div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
    components: {
        ClientForm,
    },
    data() {
        return {
            chTitleData: {
                fontSize: '12',
                align: 1,
                indentation: '0'
            },
            engTitleData: {
                fontSize: '12',
                ch_font:1,
                align: 1,
                indentation: '0'
            },
            chTextData: {
                fontSize: '12',
                ch_font:1,
                align: 1,
                indentation: '1'
            },
            engTextData: {
                fontSize: '12',
                ch_font:1,
                align: 1,
                indentation: '1'
            },
            chKeyData: {
                fontSize: '12',
                ch_font:1,
                align: 1,
                bold:0

            },
            engKeyData: {
                fontSize: '12',
                ch_font:1,
                align: 1,
                bold:0
            },
        };
    },
    methods: {
        // 外部重置方法
        handleCancelEvent(formData, refName) {
            console.log('外部重置方法:', formData);
            // 根据 refName 执行不同的重置逻辑
            switch (refName) {
                case 'chTitleRef':
                    console.log('执行一级标题重置逻辑');
                    // 这里可以调用对应的 ref 方法
                    this.$refs[refName]?.someMethod();
                    break;
                case 'engTitleRef':
                    console.log('执行二级标题重置逻辑');
                    break;
                case 'chTextRef':
                    console.log('执行三级标题重置逻辑');
                    break;
                case 'engTextRef':
                    console.log('执行正文内容重置逻辑');
                    break;
                case 'chKeyRef':
                    console.log('执行表格标题重置逻辑');
                    break;
                case 'engKeyRef':
                    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>