模板页面相关接口对接、交互修改

src/components/SetLeftMenu.vue

@@ -4,7 +4,7 @@
       <li v-for="(item, index) in menuList" :key="item.path + random()">
         <div 
         :class="[curIndex === index ? 'active' : '','flex']" @click="gotoPath(item, index)">
-          <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
+          <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" v-if="item.img" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
             :isActive="curIndex === index" />
           <span class="title_text">{{ item.name }}</span>
         </div>

src/views/super/clientSet/coverInfoPage.vue

@@ -4,9 +4,31 @@
         <div class="client_flex-common flex-common" id="">
             <div class="before_h_title mb24">基本信息</div>
             <el-form :model="coverInfo" ref="baseInfoRef">
-                <GuipInput v-model="coverInfo.school" :client-form-flex="true" label="所属学校" width="356px" />
+                <div class="flex-label mb24">
-                <GuipRadio :options="collegeList" v-model="coverInfo.college" :client-form-flex="true" label="学院" />
+                    <div class="label-text">所属学校</div>
-                <GuipInput v-model="coverInfo.college_name" label="学院名称" :client-form-flex="true" width="356px" />
+                    <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" />
@@ -59,6 +81,7 @@ export default {
                 qrcode_path: ''
             },
             coverInfo: {
+                school_name:''
             },
             rules: {
                 name: [
@@ -75,47 +98,83 @@ export default {
                     value: '1'
                 }
             ],
-            qualificationList: [// 学历列表
+            qualificationList: null,
-                {
-                    label: '专科',
-                    value: '1'
-                },
-                {
-                    label: '本科',
-                    value: '2'
-                },
-                {
-                    label: '硕士',
-                    value: '3'
-                },
-                {
-                    label: '博士',
-                    value: '4'
-                },
-                {
-                    label: '继续教育',
-                    value: '5'
-                },
-            ],
             formData: new FormData(),
             editInfo:{},//当前编辑的模板信息
             template_id: '',//当前模板id
+            timeout:  null,
+            loading:false,
+            lastSearchKeyword:'',
         };
     },
     mounted() {
         const editInfo = JSON.parse(localStorage.getItem('curtplInfo')) || '';
-        this.editInfo = this.coverInfo = editInfo;   
+        if(editInfo){
+            this.editInfo = JSON.parse(JSON.stringify(editInfo));   
             this.coverInfo = {
-            school:editInfo.school_name,
+                school:editInfo.school_id,
-            college:editInfo.college_id,
+                school_name:editInfo.school_name,
-            college_name:editInfo.college_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 => {
@@ -131,6 +190,19 @@ export default {
             //     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();
         },
@@ -174,19 +246,32 @@ export default {
         handleConfirmConfirm(){
             let props={
                 school: this.coverInfo.school,
-                college: this.coverInfo.college,
+                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', '/supernew/ajax_update_paiban_template_info', {
+                this.$http('POST', url, {
                     ...props,
-                    template_id: this.template_id
                 }).then(response => {
                     this.$nextTick(() => {
                         if (response.status) {
                             this.$Message.success(response.info);
-                            this.getList()
+                            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);
                         }
@@ -200,27 +285,29 @@ export default {
         },
         // 保存模板配置
         submitFun() {
-            let props = {
+            // 这个还缺一个接口
-                configdata:{
+
-                    school: this.coverInfo.school,
+            // let props = {
-                    college: this.coverInfo.college,
+            //     configdata:{
-                    degree: this.coverInfo.degree,
+            //         school: this.coverInfo.school,
-                },
+            //         college: this.coverInfo.college,
-                template_id: this.template_id
+            //         degree: this.coverInfo.degree,
-            }
+            //     },
-            this.$http('POST', '/supernew/ajax_save_paiban_template_config', {
+            //     template_id: this.template_id
-                ...props
+            // }
-            }).then(response => {
+            // this.$http('POST', '/supernew/ajax_save_paiban_template_config', {
-                this.$nextTick(() => {
+            //     ...props
-                    if (response.status) {
+            // }).then(response => {
-                        this.$Message.success(response.info);
+            //     this.$nextTick(() => {
-                    } else {
+            //         if (response.status) {
-                        this.$Message.error(response.info);
+            //             this.$Message.success(response.info);
-                    }
+            //         } else {
-                })
+            //             this.$Message.error(response.info);
-            }).catch(error => {
+            //         }
-                console.error(error, 'error')
+            //     })
-            })
+            // }).catch(error => {
+            //     console.error(error, 'error')
+            // })
         }
     },
 
@@ -232,4 +319,8 @@ export default {
     align-items: flex-start;
     padding: 24px 32px;
 }
+.autoInput{
+    width: 300px;
+
+}
 </style>

src/views/super/paiban/tpl.vue

@@ -5,8 +5,28 @@
                 <div class="flex-between mb24">
                     <div class="flex filter-area">
                         <label for="">模板列表</label>
-                        <GuipSelect width="180px" clearable label="学历" :options="statusList" v-model="status" @change="getList"/>
+                        <GuipSelect width="180px" clearable label="学历" :options="degreesList" v-model="degree" @change="getList"/>
-                        <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" @blur="getSchoolSearchList" width="280px"  v-model="school" />
+                        <GuipFormItem label="学校">    
+                            <el-autocomplete
+                                slot="formDom"
+                                class="autoInput"
+                                v-model="schoolName"
+                                :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 == school">
+                                    </div>
+                                </template>
+                            </el-autocomplete>
+                        </GuipFormItem>
+                        <!-- <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" @blur="getSchoolSearchList" width="280px"  v-model="school" /> -->
                     </div>
                     <GuipButton @click="addTemplete">添加模板</GuipButton>
                 </div>
@@ -42,14 +62,16 @@
 import GuipButton from "@/components/GuipButton.vue";
 import GuipTable from "@/components/GuipTable.vue";
 import GuipSelect from "@/components/GuipSelect.vue";
-import GuipInput from "@/components/GuipInput.vue";
+// import GuipInput from "@/components/GuipInput.vue";
+import GuipFormItem from '@/components/GuipFormItem.vue'
 
 export default {
     components: {
-        GuipInput,
+        // GuipInput,
         GuipSelect,
         GuipTable,
         GuipButton,
+        GuipFormItem
 
     },
     options: { styleIsolation: "shared" },
@@ -58,13 +80,16 @@ export default {
             tableLoading:false,
             tableKey: '',
             school:'',
-            degree:'0',
+            schoolName:'',
-            status:null,
+            degree:'',
-            statusList:[],
             tableList:[],
             currentPage: 1,    //当前页
             pageSize: 20,   //每页的容量
             total: 0,   //列表总数
+            degreesList: {} ,//学历列表
+            timeout:  null,
+            loading:false,
+            lastSearchKeyword:'',
         }
     },
     mounted() {
@@ -72,6 +97,19 @@ export default {
             this.init()
         })
     },
+    watch: {
+        schoolName(newVal) {
+        // 如果手动清空了输入框，也清空选中的学校
+        if (!newVal) {
+                this.school = null;
+                this.lastSearchKeyword = '';
+                this.$emit('clear');
+            }
+        }
+    },
+    beforeDestroy() {
+        clearTimeout(this.timeout);
+    },
     methods: {
         init(){
             this.tableList = []
@@ -80,16 +118,65 @@ export default {
             this.currentPage = 1
             this.pageSize = 20
             this.getList()
-            // this.getStatusList() //缺学历下拉列表
+            this.getStatusList() //缺学历下拉列表
+        },
+        handleSelect(item) {
+            console.log('选中:', item);
+            this.$emit('select', item);
+            this.school = item.id;
+            this.schoolName = item.name;
+            console.log(this.school,this.schoolName,'===');
+            this.getList()
         },
-        getSchoolSearchList() {
+        querySearchAsync(queryString, callback) {
+            const keyword = 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:this.school || '-1'
+                    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)
+            }
+        },
+       
+        getStatusList() {
+            try {
+                this.$http('POST', '/supernew/ajax_get_paiban_degrees', {
                 }).then(response => {
                     this.$nextTick(() => {
-                        this.tableList = response.data
+                        this.degreesList = response.data
-                        this.total = response.data.count
                     })
                 }).catch(error => {
                     console.error(error, 'error')
@@ -103,7 +190,7 @@ export default {
             try {
                 this.$http('POST', '/supernew/ajax_get_paiban_template_list', {
                     school: this.school ? this.school : '0',
-                    degree: this.degree,
+                    degree: this.degree ? this.degree : '0',
                     status: this.status == null ? -1 : this.status,
                     page: this.currentPage,
                 }).then(response => {
@@ -140,6 +227,7 @@ export default {
         // 添加模板
         // 跳转到封面信息页面
         addTemplete(){
+            localStorage.clear('curtplInfo')
             this.$router.push({
                 path: '/super/clientSet/coverInfoPage',
             })
@@ -152,6 +240,9 @@ export default {
 ::v-deep .el-form-item{
   margin: 0;
 }
+.autoInput{
+    width: 300px;
+}
 
 .filter-area{
   gap: 32px;
@@ -165,7 +256,7 @@ export default {
 }
 
 .status{
-    width: 50px;
+    width: fit-content;
     height: 22px;
     display: flex;
     justify-content: center;