kuailelunwen_new_houtai/src/views/super/paiban/college.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" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
                        <GuipSelect width="180px" clearable label="学历" :options="degreesList" v-model="degree" @change="getList"/>

                        <GuipFormItem label="学校">    
                            <SchoolAutoComplete
                                slot="formDom"
                                v-model="schoolName"
                                :selected-school-id="school"
                                @select="handleSchoolSelect"
                                @clear="handleSchoolClear"
                                placeholder="请输入学校名称"
                                style="width: 300px;"
                            />                        
                        </GuipFormItem>
                    </div>
                    <GuipButton type="primary" :btnstyle="{ width: '120px' }">收录成功通知
                    </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="phone" label="反馈用户手机号" min-width="200"></el-table-column>
                        <el-table-column prop="review_status_desc" label="要求" min-width="200">
                            <template slot-scope="scope">
                                <svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" @click="handleLunwen(scope.row.status)" 
                                :hoverColor="'#006AFF'" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="review_status_desc" label="论文" min-width="200">
                            <template slot-scope="scope">
                                <SvgIcon :path="require('@/assets/register/tableEdit.svg')" @click="handleLunwen(scope.row.status)" :color="'#8A9099'"
                                :hoverColor="'#006AFF'" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="review_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.review_status]]">{{ scope.row.review_status_desc }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" prop="tid" label="操作" min-width="100">
                            <template slot-scope="scope">
                                <div class="flex">
                                    <GuipButton v-if="scope.row.review_status == 0" type="text" @click="handleConfirm(scope.row.id,'1')">收录</GuipButton>
                                    <GuipButton v-if="scope.row.review_status == 3" type="text" @click="handleConfirm(scope.row.id,'0')">恢复代收录</GuipButton>
                                    <GuipButton v-if="scope.row.review_status == 1" type="text" @click="handleUpdate(scope.row.id)">收录</GuipButton>
                                    <GuipButton v-if="scope.row.review_status==2" type="text" @click="handleUpdate(scope.row)">修改</GuipButton>
                                    <GuipButton v-if="scope.row.review_status == 0" type="warn" @click="handleRefuse(scope.row)">拒绝</GuipButton>
                                    <GuipButton v-if="scope.row.review_status == 1" type="warn" @click="handleConfirm(scope.row.id,'0')">取消</GuipButton>
                                </div>
                            </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>

        <GuipDialog :dialogVisible="isShowDialog" title="拒绝收录原因" :show-close-button="false"
                    :show-cancel-button="true" @confirm="handleConfirmRefuse" @cancel="handleCancelRefuse">
            <!-- 自定义内容 -->
            <el-form>
                <p style="margin-bottom: 14px">{{'拒绝收录'+tpl_name+'模板'}}</p>
                <GuipTextarea :styleObject="{ width: '450px' }" placeholder="说明原因，发送短信给用户手机" autosize v-model="refuse_reason" />
            </el-form>
        </GuipDialog>

    </div>
</template>
<script>

import SvgIcon from '@/components/SvgIcon.vue';
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 GuipDialog from "@/components/GuipDialog.vue";
import GuipTextarea from "@/components/GuipTextarea.vue";
import SchoolAutoComplete from '@/components/clientSet/searchInput.vue'; // 引入公共组件
import GuipFormItem from '@/components/GuipFormItem.vue'

// 假设一下状态
// status:{
//     0:'待收录',
//     1:'已收录',
//     2:'收录中',
//     3:'不收录'
// }

export default {
    components: {
        GuipTextarea,
        GuipDialog,
        // GuipInput,
        GuipSelect,
        GuipTable,
        GuipButton,
        SvgIcon,
        SchoolAutoComplete,
        GuipFormItem
    },
    options: { styleIsolation: "shared" },
    data() {
        return {
            tableLoading:false,
            tableKey: '',
            school:'',
            schoolName:'',
            lastSearchKeyword:'',
            degree:'',
            review_status: -1,

            tableList:[],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数

            isShowDialog:false,
            refuse_id:0,
            tpl_name:'',
            refuse_reason:'',
            statusList:[],
            degreesList:[]
        }
    },
    watch: {
        schoolName(newVal) {
        // 如果手动清空了输入框，也清空选中的学校
        if (!newVal) {
                this.school = null;
                this.lastSearchKeyword = '';
                this.$emit('clear');
            }
        }
    },
    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()
            this.getDegreesList()
        },
        handleSchoolSelect(item) {
            console.log('选中学校:', item);
            this.school = item.id;
            this.schoolName = item.name;
            this.getList();
        },
        handleSchoolClear() {
            console.log('学校选择已清空');
            this.school = '';
            this.schoolName = '';
            this.getList();
        },
        getList() {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_review_list', {//ok
                    school: this.school || '0',
                    degree: this.degree || '0',
                    review_status: String(this.review_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)
            }
        },
        getDegreesList() {
            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)
            }
        },
        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)
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },
        handleConfirm(id,status){
            this.isShowDialog = false
            try {
                this.$http('POST', '/supernew/ajax_update_paiban_template_review_status', {
                    template_id: id,
                    review_status: status,
                    refuse_reason:this.refuse_reason
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                            this.getList()
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        handleUpdate(row){
            // 修改 会到编辑页面
            localStorage.setItem('curtplInfo', JSON.stringify(row))
            this.$router.push({
                path: '/super/clientSet/coverInfoPage',
                query: { id:row.id }
            })
        },
        handleLunwen(row){
            this.refuse_id = row.id
        },
        handleRefuse(row){
            this.isShowDialog = true
            this.refuse_id = row.id
            this.tpl_name += row.school_name
            if(row.degree_name) this.tpl_name += '-'+row.degree_name
            if(row.college_name) this.tpl_name += '-'+row.college_name
            // this.handleConfirm(row,status)
        },
        handleCancelRefuse(){
            this.isShowDialog = false
        },
        handleConfirmRefuse(){
            this.handleConfirm(this.refuse_id,'')
        },
    }
}

</script>
<style lang="scss" scoped>
                        // 山药 茯苓 薏米 芡实 桔梗 益智仁

.status{
    width: 65px;
    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;
}
.status0{
    border: 1px solid #BFDAFF;
    background: #F2F7FF;
    color: #006AFF;
}
.status2{
    border: 1px solid #DFE2E6;
    background: #F6F7FA;
    color: #626573;
}
.status1{
    background: #FFFBF2;
    border: 1px solid rgba(251, 131, 45, 0.38);
    color: #FB832D;
}
.status3{
    border: 1px solid #FFA39E;
    background: #FFF1F0;
    color: #FF4D4F;
}
::v-deep .el-form-item{
  margin: 0;
}
::v-deep .el-form-item__label{
//   margin-bottom: 12px;
}

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