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

<template>
    <div class="main-content12 coverInfoPage">
        <h3 class="pageTitle">封面信息</h3>
        <div class="client_flex-common flex-common" id="">
            <div class="before_h_title mb24">基本信息</div>
            <el-form :model="coverInfo" ref="baseInfoRef">
                <div class="flex-label mb24">
                    <div class="label-text">所属学校</div>
                    <div class="colon" style="margin-right: 12px;">：</div>
                    <SchoolAutoComplete
                        slot="formDom"
                        v-model="coverInfo.school_name"
                        :selected-school-id="coverInfo.school"
                        @select="handleSchoolSelect"
                        @clear="handleSchoolClear"
                        placeholder="请输入学校名称"
                        style="width: 356px;"
                    />               
                </div>
                <!-- <GuipInput v-model="coverInfo.school" :client-form-flex="true" label="所属学校" width="356px" /> -->
                <GuipRadio :options="collegeList" v-model="coverInfo.college_id" :client-form-flex="true" label="学院" />
                <GuipInput v-if="coverInfo.college_id == '1'" v-model="coverInfo.college" label="学院名称" :client-form-flex="true" width="356px" />
                <GuipRadio :options="qualificationList" v-model="coverInfo.degree" label="学历" :client-form-flex="true" />
                <GroupFormBtns cancelText="重置" @cancel="cancelClick('baseInfoRef')" flex="start"
                    @confirm="submitCoverInfo" />
            </el-form>
        </div>
        <div class="client_flex-common flex-common mt12" id="">
            <div class="before_h_title mb24">封面样式</div>
            <div class="flex mt12">
                <img v-if="coverStyle" :src="coverStyle.qrcode_path" class="kefuImg mr-12">
                <div class="qqCode-wrap">
                    <el-upload class="avatar-uploader mt12" accept=".jpg,.png" :on-change="handleQQkfChange" action="#"
                    :before-upload="beforeAvatarUpload"
                        :multiple="false" :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                        <GuipButton class="upload-button" type="ignore" :btnstyle="{ width: '118px' }">
                            <div class="bgImg"></div>
                            <span>上传图片</span>
                        </GuipButton>
                    </el-upload>
                    <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
                </div>
            </div>
            
            <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
                @confirm="uploadCoverTpl" />
        </div>
        <div class="client_flex-common flex-common mt12" id="">
            <div class="before_h_title mb24">封面WORD</div>
            <div class="flex mt12">
                <img v-if="coverStyle" :src="coverStyle.qrcode_path" class="kefuImg mr-12">
                <div class="qqCode-wrap">
                    <el-upload class="avatar-uploader mt12" accept=".doc,.docx" :on-change="handleWordChange" action="#"
                        :multiple="false" :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                        <GuipButton class="upload-button" type="ignore" :btnstyle="{ width: '118px' }">
                            <div class="bgImg"></div>
                            <span>上传文档</span>
                        </GuipButton>
                    </el-upload>
                    <p class="avatar-desc">支持 doc、docx 格式 </p>
                </div>
            </div>
            <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
                @confirm="uploadWordTpl" />
        </div>
        <ReviewBtn :type="type" :status="editInfo.review_status"></ReviewBtn>
    </div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipInput from '@/components/GuipInput.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import GuipButton from '@/components/GuipButton.vue';
import ReviewBtn from '@/components/clientSet/reviewBtn.vue';
// import GuipSelect from '@/components/GuipSelect.vue';
import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; // 引入公共组件

export default {
    name: 'CoverInfoPage',
    components: {
        GroupFormBtns,
        GuipInput,
        GuipRadio,
        GuipButton,
        SchoolAutoComplete,
        ReviewBtn
        // GuipSelect
    },
    data() {
        return {
            type:'',
            coverStyle: {
                url: '',
                qrcode_path: ''
            },
            coverInfo: {
                school_name:'',
                college:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            collegeList: [// 学院列表
                {
                    label: '通用',
                    value: '-1'
                },
                {
                    label: '专用',
                    value: '1'
                }
            ],
            qualificationList: null,
            formData: new FormData(),
            formData1: new FormData(),
            editInfo:{},//当前编辑的模板信息
            template_id: '',//当前模板id
            timeout:  null,
            loading:false,
            lastSearchKeyword:'',
        };
    },
    computed: {
        ...mapState(['client_tpl_review_status']), 
    },
    mounted() {
        const {id,type} = this.$route.query;
        if(type){
            this.type = type;
        }
        if(id){
            this.template_id = id;
        }
        if(type == 'add'){
            store.commit('SET_CLIENTTPLREVIEWSTATUS', 1);
        }
        store.commit('SET_CLIENTTEMID', this.template_id);
        store.commit('SET_CLIENTTEMTYPE', this.type);

        const editInfo = JSON.parse(localStorage.getItem('curtplInfo')) || '';
        if(editInfo){
            this.editInfo = JSON.parse(JSON.stringify(editInfo));   
            this.coverInfo = {
                school:editInfo.school_id,
                school_name:editInfo.school_name,
                college_id:editInfo.college_name == '-1'? '-1' :'1',
                college:editInfo.college_name,
                degree:editInfo.degree_id,
                // qrcode_path:editInfo.cover_img
            }
            this.template_id = editInfo.id;
        }

        this.getStatusList()

    },
    methods: {
        handleSchoolSelect(item) {
            console.log('选中学校:', item);
            this.coverInfo.school = item.id;
            this.coverInfo.school_name = item.name;
        },
        handleSchoolClear() {
            console.log('学校选择已清空');
            this.coverInfo.school = '';
            this.coverInfo.school_name = '';
        },
       
        getStatusList() {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_degrees', {
                }).then(response => {
                    this.qualificationList = response.data
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
       
        cancelClick(formName) {
            this.$refs[formName].resetFields();
        },
        // 提交基本信息
        submitCoverInfo() {
            console.log(this.coverInfo,'coverInfo信息');

            this.$refs['baseInfoRef'].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    this.handleConfirmConfirm()

                } else {
                    return false;
                }
            });

        },

        handleQQkfChange(file, fileList) {
            console.log(file, fileList)
            if (file.raw) {
                const isLt2M = file.raw.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$Message.error('上传图片大小不能超过 2MB!');
                    this.$refs.avatorUpload.clearFiles();
                    return;
                }
            }
            let fileObj = file.raw
            this.formData.set('file', fileObj)
        },
        handleWordChange(file, fileList) {
            console.log(file, fileList)
            if (file.raw) {
                const isLt2M = file.raw.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$Message.error('上传图片大小不能超过 2MB!');
                    this.$refs.avatorUpload.clearFiles();
                    return;
                }
            }
            let fileObj = file.raw
            this.formData1.set('file', fileObj)
        },
          // 文件校验
        beforeAvatarUpload(file) {
            const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            
            if (!isImage) {
                this.$Message.error('上传文件只能是 JPG、PNG 格式!');
            }
            if (!isLt2M) {
                this.$Message.error('上传文件大小不能超过 2MB!');
            }
            
            return isImage && isLt2M;
        },
        // 提交封面样式信息
        uploadWordTpl() {
            this.formData1.set('template_id',this.template_id)
            this.$http('POST', '/supernew/upload_paiban_template_word', this.formData1).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        uploadCoverTpl() {
            this.formData.set('template_id',this.template_id)
            this.$http('POST', '/supernew/upload_paiban_template_cover', 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')
            })
        },
        // 提交基本信息
        handleConfirmConfirm(){
            let props={
                school: this.coverInfo.school,
                college: this.coverInfo.college_id == '1' ? this.coverInfo.college : '',
                degree: this.coverInfo.degree,
            }
            let url = '/supernew/ajax_add_paiban_template'
            if(this.template_id){
                props.template_id = this.template_id;
                url ='/supernew/ajax_update_paiban_template_info'
            }
            if(this.coverInfo.school){
                props.school = this.coverInfo.school;
            }
            // 用来测试哒
            // localStorage.setItem('curtplInfo', JSON.stringify({...this.coverInfo,degree_id:this.coverInfo.degree}))
            // store.commit('SET_CLIENTTEMID', '999');

            try {
                this.$http('POST', url, {
                    ...props,
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                            if(props.template_id){
                                let obj = {
                                    ...this.editInfo,
                                    ...props,
                                };
                                // localStorage.setItem('curtplInfo', JSON.stringify(obj))
                                localStorage.setItem('curtplInfo', JSON.stringify({...obj,
                                    college_name:this.coverInfo.college_id == '1' ? this.coverInfo.college : '-1',
                                    school_name:this.coverInfo.school_name,
                                    degree_id:this.coverInfo.degree}))
                            }else{
                                console.log(this.coverInfo,'coverInfo信息');
                                localStorage.setItem('curtplInfo', JSON.stringify({...this.coverInfo,
                                    college_name:this.coverInfo.college_id == '1' ? this.coverInfo.college : '-1',
                                    school_name:this.coverInfo.school_name,
                                    degree_id:this.coverInfo.degree}))
                                this.template_id = response.data.template_id
                            }

                            store.dispatch('fetchClientConfig',{id:this.template_id});
                            store.commit('SET_CLIENTTEMID', this.template_id);

                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        // 保存模板配置
        submitFun() {
           this.$router.push({
                path: '/super/paiban/tpl',
            })
        }
    },

}
</script>

<style scoped lang="scss">
.flex-common {
    align-items: flex-start;
    padding: 24px 32px;
}
</style>