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">：</div>
                    <el-autocomplete
                        class="autoInput"
                        slot="formDom"
                        v-model="coverInfo.school_name"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入学校名称"
                        @select="handleSelect"
                        :debounce="300"
                        :loading="loading"
                        >
                        <!-- 自定义下拉选项 -->
                        <template #default="{ item }">
                            <div class="flex-between school-option">
                            <span>{{ item.name }}</span>
                            <img src="@/assets/site/dropdown_chose_ic.svg" alt="" v-if="item.id == coverInfo.school">
                            </div>
                        </template>
                    </el-autocomplete>
                </div>
                <!-- <GuipInput v-model="coverInfo.school" :client-form-flex="true" label="所属学校" width="356px" /> -->
                <GuipRadio :options="collegeList" v-model="coverInfo.collegeId" :client-form-flex="true" label="学院" />
                <GuipInput v-if="coverInfo.collegeId == '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="save-button flex">
            <GuipButton type="primary" :btnstyle="{width:'144px',height:'46px'}" @click="submitFun">收录完成</GuipButton>
        </div>
    </div>
</template>
<script>
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 GuipSelect from '@/components/GuipSelect.vue';

export default {
    name: 'CoverInfoPage',
    components: {
        GroupFormBtns,
        GuipInput,
        GuipRadio,
        GuipButton,
        // GuipSelect
    },
    data() {
        return {
            coverStyle: {
                url: '',
                qrcode_path: ''
            },
            coverInfo: {
                school_name:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            collegeList: [// 学院列表
                {
                    label: '通用',
                    value: '0'
                },
                {
                    label: '专用',
                    value: '1'
                }
            ],
            qualificationList: null,
            formData: new FormData(),
            editInfo:{},//当前编辑的模板信息
            template_id: '',//当前模板id
            timeout:  null,
            loading:false,
            lastSearchKeyword:'',
        };
    },
    mounted() {
        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,
                collegeId:editInfo.college_id,
                college:editInfo.college_name,
                degree:editInfo.degree_id,
                // qrcode_path:editInfo.cover_img
            }
            this.template_id = editInfo.id;
        }
        this.getCoverInfo();
        this.getStatusList() //缺学历下拉列表

    },
    methods: {
        handleSelect(item) {
            console.log('选中:', item);
            this.$emit('select', item);
            this.coverInfo.school = item.id;
            this.coverInfo.school_name = item.name;
            console.log(this.coverInfo.school,this.coverInfo.school_name,'===');
        },
        querySearchAsync(queryString, callback) {
            const keyword = queryString && queryString.trim();
            
            // 如果搜索内容为空或与上次相同，直接返回
            if (!keyword || keyword === this.lastSearchKeyword) {
                callback([]);
                return;
            }
            
            this.lastSearchKeyword = keyword;
            this.loading = true;
            
            // 使用防抖
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                this.getSchoolSearchList(keyword, callback);
            }, 300);
        },
        getSchoolSearchList(keyword, callback) {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_schools', {
                    keyword
                }).then(response => {
                 if(response.status){
                    const data = response.data || [];
          
                    if (data.length === 0) {
                        // this.$Message.info('未找到相关学校')
                    }
                    callback(data);
                 }else{
                    callback([]);
                 }
                }).catch(error => {
                    this.$Message.info('搜索学校列表失败')
                    callback([]);
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        async getCoverInfo(){
            // this.$http('POST', '/supernew/ajax_get_paiban_template_list', {}, {
            // }).then(response => {
            //     console.log(response,'=======999');
            //     this.$nextTick(() => {
            //         if (response.status) {
            //             this.$Message.success(response.info);
            //         } else {
            //             this.$Message.error(response.info);
            //         }
            //     })
            // }).catch(error => {
            //     console.error(error, 'error')
            // })
        },
        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)
        },
          // 文件校验
        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;
        },
        // 提交封面样式信息
        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.collegeId == '1' ? this.editInfo.college_name : '-1',
                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;
            }
            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))
                            }
                            this.template_id = response.data.template_id
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        // 保存模板配置
        submitFun() {
            // 这个还缺一个接口

            // let props = {
            //     configdata:{
            //         school: this.coverInfo.school,
            //         college: this.coverInfo.college,
            //         degree: this.coverInfo.degree,
            //     },
            //     template_id: this.template_id
            // }
            // this.$http('POST', '/supernew/ajax_save_paiban_template_config', {
            //     ...props
            // }).then(response => {
            //     this.$nextTick(() => {
            //         if (response.status) {
            //             this.$Message.success(response.info);
            //         } else {
            //             this.$Message.error(response.info);
            //         }
            //     })
            // }).catch(error => {
            //     console.error(error, 'error')
            // })
        }
    },

}
</script>

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

}
</style>