kuailelunwen_new_houtai/src/views/super/paiban/tpl.vue

<template>
    <div class="main-content12 recharge-wrap">
        <div class="flex-common">
            <el-form class="">
                <div class="flex-between mb24">
                    <div class="flex filter-area">
                        <label for="">模板列表</label>
                        <GuipSelect width="180px" clearable label="学历" :options="degreesList" v-model="degree" @change="getList"/>
                        <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>
                <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                    <template>
                        <el-table-column fixed="left" prop="school_name" label="学校" min-width="200"></el-table-column>
                        <el-table-column prop="degree_name" label="学历" min-width="200"></el-table-column>
                        <el-table-column prop="college_name" label="学院" min-width="200"></el-table-column>
                        <el-table-column prop="status_desc" label="更新时间" min-width="200"></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="200">
                            <template slot-scope="scope">
                                <span :class="['status','status'+[scope.row.status]]">{{ scope.row.status_desc }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" prop="tid" label="操作" min-width="100">
                            <template slot-scope="scope">
                                <GuipButton type="text" @click="jumpEdit(scope.row)">编辑</GuipButton>
                            </template>
                        </el-table-column>
                    </template>
                </GuipTable>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                               :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                               :total="parseInt(total)">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>


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 GuipFormItem from '@/components/GuipFormItem.vue'

export default {
    components: {
        // GuipInput,
        GuipSelect,
        GuipTable,
        GuipButton,
        GuipFormItem

    },
    options: { styleIsolation: "shared" },
    data() {
        return {
            tableLoading:false,
            tableKey: '',
            school:'',
            schoolName:'',
            degree:'',
            tableList:[],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            degreesList: {} ,//学历列表
            timeout:  null,
            loading:false,
            lastSearchKeyword:'',
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.init()
        })
    },
    watch: {
        schoolName(newVal) {
        // 如果手动清空了输入框，也清空选中的学校
        if (!newVal) {
                this.school = null;
                this.lastSearchKeyword = '';
                this.$emit('clear');
            }
        }
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        init(){
            this.tableList = []
            this.total = 0
            this.total_money = 0
            this.currentPage = 1
            this.pageSize = 20
            this.getList()
            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()
        },
        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
                }).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.degreesList = response.data
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
       
        getList() {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_template_list', {
                    school: this.school ? this.school : '0',
                    degree: this.degree ? this.degree : '0',
                    status: this.status == null ? -1 : this.status,
                    page: this.currentPage,
                }).then(response => {
                    this.$nextTick(() => {
                        this.tableList = response.data.list
                        this.total = response.data.count
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },
        jumpEdit(item){
            // 保存模板信息到localStorage 后续看下编辑页面是走接口还是直接用存储的数据
            // localStorage.setItem('tpl_id', item.id)
            localStorage.setItem('curtplInfo', JSON.stringify(item))
            // 跳转编辑页面
            this.$router.push({
                path: '/super/clientSet/coverInfoPage',
                query: { id:item.id }
            })
            console.log(item.id)
        },
        // 添加模板
        // 跳转到封面信息页面
        addTemplete(){
            localStorage.clear('curtplInfo')
            this.$router.push({
                path: '/super/clientSet/coverInfoPage',
            })
        }
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-form-item{
  margin: 0;
}
.autoInput{
    width: 300px;
}

.filter-area{
  gap: 32px;
  label{
    letter-spacing: 0.08em;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    color: #1E2226;
  }
}

.status{
    width: fit-content;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    background: #F6F7FA;
    box-sizing: border-box;
    border: 1px solid #DFE2E6;
    letter-spacing: 0.08em;
    box-sizing: border-box;
    color: #626573;
}
.status1{
    color: #0DAF49;
    background: rgba(239, 255, 224, 0.5);
    border: 1px solid rgba(0, 194, 97, 0.6);
}
.status0{
    border: 1px solid #DFE2E6;
    background: #F6F7FA;
    color: #626573;
}
</style>