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="statusList" v-model="status" @change="getList"/>
                        <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";

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

    },
    options: { styleIsolation: "shared" },
    data() {
        return {
            tableLoading:false,
            tableKey: '',
            school:'',
            degree:'0',
            status:null,
            statusList:[],
            tableList:[],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.init()
        })
    },
    methods: {
        init(){
            this.tableList = []
            this.total = 0
            this.total_money = 0
            this.currentPage = 1
            this.pageSize = 20
            this.getList()
            this.getStatusList()
        },
        getSchoolSearchList() {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_schools', {
                    keyword:this.school
                }).then(response => {
                    this.$nextTick(() => {
                        this.tableList = response.data
                        this.total = response.data.count
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        getStatusList() {
            try {
                this.$http('POST', '/supernew/ajax_get_review_status', {
                }).then(response => {
                    this.$nextTick(() => {
                        this.statusList = 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,
                    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(){
            this.$router.push({
                path: '/super/clientSet/coverInfoPage',
            })
        }
    }
}

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

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

.status{
    width: 50px;
    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>