keysass_portal/src/page/personalpage/jobm/job.vue

<template>
    <div class="crowdnum">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="cardtitle">
                    <div class="cardline"></div>
                    <div class="cardtext">招聘管理</div>
                </div>
                <div class="cardBtn" @click="goanthor('/console/addjob')">新增招聘</div>
            </div>
            <el-table :data="jobData">
                <el-table-column label="序号" align="center" prop="job_id" />
                <el-table-column label="岗位名称" align="center" prop="title" />
                <el-table-column label="薪资范围" align="center" prop="emolument" />
                <el-table-column label="工作地点" align="center" prop="city" />
                <el-table-column label="经验要求" align="center" prop="experience" />
                <el-table-column label="学历要求" align="center" prop="education" />
                <el-table-column label="招聘人数" align="center" prop="person_count" />
                <el-table-column label="申请岗位人数" align="center" prop="name">
                    <template slot-scope="scope">
                        <span @click="goanthor('/console/jobuser')" style="color: #1578ed; cursor: pointer">{{
                            scope.row.huntCount
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1" effect="dark" type="success">已发布</el-tag>
                        <el-tag v-if="scope.row.status == 0" effect="dark" type="danger">未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" type="text" @click="fabu(scope.row, 1)">
                            发布
                        </el-button>
                        <el-button v-if="scope.row.status == 1" type="text" @click="fabu(scope.row, 0)">
                            取消发布
                        </el-button>
                        <el-button type="text" @click="edit(scope.row)"> 编辑 </el-button>
                        <el-button type="text" @click="delFn(scope.row)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="total > 0" style="width: 100%; margin-top: 30px; text-align: center">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="queryParams.pageSize"
                    layout="total,  prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </el-card>

        <!-- 弹层 -->
        <el-dialog :title="titletext" :visible.sync="dialogVisible" width="550px" class="dialogClass">
            <div class="textdialog">{{ dailogtext }}</div>
            <div class="dialogBtn">
                <div class="dialogBtnL" @click="submitDia">确定</div>
                <div class="dialogBtnR" @click="cancelDia">取消</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { jobList, fbStatus, qxfbStatus, deleteJob } from '@/api/job'
export default {
    data() {
        return {
            jobData: [],
            total: 0,
            queryParams: {
                pageSize: 10,
                pageNum: 1,
            },
            dialogVisible: false,
            delId: null, // 删除id
            titletext: '删除',
            dailogtext: '删除后相关的申请岗位人数将无法查询，确定要删除吗？',
        }
    },
    mounted() {
        this.getList()
    },
    computed: {
        ...mapGetters(['userId']),
    },

    methods: {
        getList() {
            jobList(this.userId, this.queryParams).then((res) => {
                this.jobData = res.rows
                this.total = res.total
            })
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
        },
        // 发布
        fabu(row, val) {
            this.delId = row.job_id
            this.dialogVisible = true
            this.titletext = val ? '发布' : '取消发布'
            this.dailogtext = val ? '确定要发布该职位吗？' : '确定要取消发布该职位吗？'
        },
        // 新增
        goanthor(val) {
            this.$router.push(val)
        },
        // 删除按钮
        delFn(row) {
            this.delId = row.job_id
            this.dialogVisible = true
            this.titletext = '删除'
            this.dailogtext = '删除后相关的申请岗位人数将无法查询，确定要删除吗？'
        },
        // 删除确定
        submitDia() {
            if (this.titletext == '取消发布') {
                qxfbStatus(this.delId).then((res) => {
                    this.$message.success('取消发布成功!')
                    this.dialogVisible = false
                    this.getList()
                })
            } else if (this.titletext == '发布') {
                fbStatus(this.delId).then((res) => {
                    this.$message.success('发布成功!')
                    this.dialogVisible = false
                    this.getList()
                })
            } else {
                deleteJob(this.delId).then((res) => {
                    this.$message.success('删除成功!')
                    this.dialogVisible = false
                    this.getList()
                })
            }
        },
        // 删除取消
        cancelDia() {
            this.dialogVisible = false
        },
        // 修改
        edit(row) {
            this.$router.push({
                path: '/console/addjob',
                query: { id: row.job_id },
            })
        },
    },
}
</script>
<style scoped>
.crowdnum >>> .el-dialog {
    margin-top: 30vh !important;
    border-radius: 6px !important;
}
.dialogClass >>> .el-dialog__title {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
}
.textdialog {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
}
.dialogBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
.dialogBtnL {
    width: 250px;
    height: 44px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
    margin-right: 6px;
    cursor: pointer;
}
.dialogBtnR {
    width: 250px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #e0e0e0;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
}

.dialogClass >>> .el-dialog__header {
    padding: 20px;
    border: 1px solid rgba(135, 135, 135, 0.16);
}
.clearfix {
    display: flex;
    justify-content: space-between;
}
.cardtitle {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 20px;
    color: #000000;
}
.cardline {
    width: 5px;
    height: 18px;
    background: #1578ed;
    border-radius: 3px;
    margin-right: 10px;
}
.cardBtn {
    width: 90px;
    height: 32px;
    background: #2286fa;
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

.crowdnum >>> .el-table th {
    background-color: #f7f7f7;
    color: #666666;
    text-align: center;
}
.crowdnum >>> .el-table td {
    /* text-align:center; */
    background-color: #ffffff;
    height: 60px;
    color: #333333;
}
.crowdnum >>> .el-table--border th {
    border-right: #f7f7f7;
}
.crowdnum >>> .el-tooltip__popper {
    width: 33vw;
}
</style>
<style>
.el-tooltip__popper {
    width: 33vw;
}
</style>