admin_home/src/views/job/jobOpportunitiesList.vue

<template>
    <div class="mainBox">
        <!--搜索功能 start------------------------------------------------------------>
        <div class="layerBox_search">
            <div class="layerBoxLine">
                <el-row>
                    <el-col :span="6">
                        <div class="searchBox">
                            <div class="searchTitle">公司名称</div>
                            <el-input placeholder="请输入公司名称" autocomplete="off" v-model="getApiData.business_name" />
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="searchBox">
                            <div class="searchTitle">工作经验</div>
                            <el-select v-model="getApiData.experience" placeholder="请选择工作经验" style="width: 100%;">
                                <el-option v-for="item in experience" :key="item.evalue" :label="item.ename"
                                    :value="item.evalue">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="searchBox">
                            <div class="searchTitle">薪资范围</div>
                            <el-select v-model="getApiData.salary" placeholder="请选择薪资范围" style="width: 100%;">
                                <el-option v-for="item in salary" :key="item.evalue" :label="item.ename"
                                    :value="item.evalue">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class=" " style="padding:0px 40px 0px 0px; overflow:hidden;">
            <div style="float:right;">
                <el-button @click="clearSearchList">重置</el-button>
                <el-button type="primary" @click="getData">搜索</el-button>
            </div>
        </div>
        <!--搜索功能 end------------------------------------------------------------>

        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <el-row>
                <template>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
                        <el-table-column prop="business_name" label="公司名称" width=""></el-table-column>
                        <el-table-column prop="title" label="招聘职位名称" width=""></el-table-column>
                        <el-table-column prop="experience_ename" label="工作经验" width=""></el-table-column>
                        <el-table-column prop="salary_ename" label="薪资范围" width=""></el-table-column>
                        <el-table-column prop="updated_at" label="更新时间" width=""></el-table-column>
                        <el-table-column fixed="right" label="操作" width="200" header-align="center">
                            <template slot-scope="scope">
                                <div class="listBtnBox">
                                    <div class="listEditBtn" @click="goDetail(scope.row.id, tableData)">
                                        <i class="el-icon-edit-outline"></i>查看
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
        </div>
        <!--分页 start------------------------------------------------------------>
        <div class="alignBox">
            <el-row>
                <el-col :span="24">
                    <el-pagination 
                        @size-change="handleSizeChange" 
                        :current-page="getApiData.page"
                        @current-change="handleCurrentChange" 
                        :page-size="10" 
                        layout="total, prev, pager, next, jumper"
                        :total="allCount">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--分页 end------------------------------------------------------------>
        <!--表格内容 end------------------------------------------------------------>
    </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//引入公用样式
import '@/styles/global.less';

export default {
    components: {
        tableTitle,//表格标题
    },
    data() {
        return {
            //1.列表和分页相关 start ------------------------------------------------------------>
            tableDivTitle: "求职信息列表",
            tableData: [],//内容
            experience: [],//工作经验列表
            salary: [],//薪资范围列表
            getApiData: {
                business_name: "",//公司名称
                experience: "",//工作经验
                salary: "",//薪资
                page: 1,//当前是第几页
                pageSize: 10,//一共多少条
            },
            allCount: 0,//总条数
            //分页相关 end ------------------------------------------------------------>
        }
    },
    methods: {
        //1.列表和分页相关 start ------------------------------------------------------------>
        //1.1 开始请求列表信息方法
        getData() {
            this.$store.dispatch('job/getRecruitingList', this.getApiData).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.row;//给与内容
                    this.allCount = res.data.count;//给与总条数
                } else {
                    // this.$message.error(res.message)
                    this.tableData = "";//给与内容
                    this.allCount = 0;//给与总条数
                }
            })
        },
        //1.2 获得工作经验
        getExperience() {
            this.$store.dispatch('job/getExperience', {}).then(res => {
                if (res.code == 200) {
                    this.experience = res.data;
                }
            })
        },
        //1.3 获得薪资范围
        getSalary() {
            this.$store.dispatch('job/getSalary', {}).then(res => {
                if (res.code == 200) {
                    this.salary = res.data;
                }
            })
        },
        //1.4 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.getApiData.page = val;
            this.getData();
        },
        //1.5 点击分页
        handleCurrentChange(val) {
            this.getApiData.page = val;
            this.getData();
        },
        //1.6 重置按钮
        clearSearchList() {
            this.tableData = [];
            this.getApiData.business_name = "";
            this.getApiData.experience = "";
            this.getApiData.salary = "";
            this.getApiData.page = 1;
            this.getApiData.pageSize = 10;
            this.getData();
        },
        //列表和分页相关 end ------------------------------------------------------------>

        //2.跳转到详情start ------------------------------------------------------------>
        goDetail(id) {
            this.$router.push({
                path: '/jobOpportunitiesDetails',
                query: { id: id }
            });
        },
        //添加求职信息end ------------------------------------------------------------>
    },
    mounted() {
        //1.获得初始数据
        this.getData();
        //2.获得工作经验
        this.getExperience();
        //3.获得薪资范围
        this.getSalary();
    }
}
</script>

<style scoped lang="less"></style>