keysass_admin/src/views/trainService/talentPool.vue

<template>
    <div class="container" style="padding: 30px">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
            style="display: flex; justify-content: space-between"
        >
            <!-- <div style="display: flex">
                <el-form-item label="学校名称" prop="title">
                    <el-input v-model="queryParams.title" placeholder="请输入资讯标题" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </div> -->
            <div style="margin-top: 5px; margin-bottom: 20px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
                <el-button type="warning" icon="el-icon-plus" size="mini" @click="handleImport">导入</el-button>
            </div>
        </el-form>
        <el-table v-loading="loading" :data="schoolList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="证书编号" align="center" prop="certificateNo" />
            <el-table-column label="学校" align="center" prop="university" />
            <el-table-column label="二级学院" align="center" prop="college" />
            <el-table-column label="年级" align="center" prop="grade" />
            <el-table-column label="专业" align="center" prop="major" />
            <el-table-column label="水平" align="center" prop="level" />
            <el-table-column label="是否雇用" align="center" prop="hire" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="modify(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" @click="delrow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog
            class="diaform"
            :title="title"
            :visible.sync="visibleopen"
            :close-on-click-modal="false"
            width="700px"
            append-to-body
            @close="colsedia"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" inline>
                <el-form-item label="姓名:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="证书编号:" prop="certificateNo">
                    <el-input v-model="form.certificateNo" placeholder="请输入证书编号"></el-input>
                </el-form-item>
                <el-form-item label="学校:" prop="university">
                    <el-input v-model="form.university" placeholder="请输入学校"></el-input>
                </el-form-item>
                <el-form-item label="二级学院:" prop="college">
                    <el-input v-model="form.college" placeholder="请输入二级学院"></el-input>
                </el-form-item>
                <el-form-item label="年级:" prop="grade">
                    <!-- <el-input v-model="form.grade" placeholder="请输入年级"></el-input> -->
                    <el-date-picker value-format="yyyy" v-model="form.grade" type="year" placeholder="请输入年级">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="专业:" prop="major">
                    <el-input v-model="form.major" placeholder="请输入专业"></el-input>
                </el-form-item>
                <el-form-item label="水平:" prop="level">
                    <el-select v-model="form.level" placeholder="请输入水平">
                        <el-option label="优" :value="'优'"></el-option>
                        <el-option label="良" :value="'良'"></el-option>
                        <el-option label="差" :value="'差'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否雇用:" prop="hire">
                    <el-select v-model="form.hire" placeholder="请输入是否雇用">
                        <el-option label="是" :value="'是'"></el-option>
                        <el-option label="否" :value="'否'"></el-option>
                    </el-select>
                </el-form-item>
                <br />
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitto('confirm')">确认</el-button>
                <el-button @click="colsedia">取消</el-button>
            </span>
        </el-dialog>

        <!-- 导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                    <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据 -->
                    <el-link type="info" style="font-size: 16px" @click="importTemplate">点击下载模板</el-link>
                </div>
                <!-- <div class="el-upload__tip" style="color: red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div> -->
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    listTalent,
    addTalent,
    updateTalent,
    deleteTalent,
    importTemplate,
    detailTalent,
} from '@/api/trainService/index.js'
import ImageUpload from '@/components/ImgUpload/index.vue'
import { getToken } from '@/utils/auth'

import { saveAs } from 'file-saver'
export default {
    name: 'peixunbaoming',
    components: { ImageUpload },
    data() {
        return {
            imgAction: process.env.VUE_APP_BASE_API + '/upload',
            loading: false,
            schoolList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            title: '新增人才',
            visibleopen: false,
            form: {},
            rules: {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                certificateNo: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
                university: [{ required: true, message: '请输入学校', trigger: 'blur' }],
                college: [{ required: true, message: '请输入二级学院', trigger: 'blur' }],
                hire: [{ required: true, message: '请输入是否雇用', trigger: 'change' }],
            },
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: '',
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: 'Bearer ' + getToken() },
                // headers: { isToken: false },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + '/talent/admin/import',
            },
        }
    },

    mounted() {},
    methods: {
        async getList() {
            const res = await listTalent(this.queryParams)
            this.total = res.total
            this.schoolList = res.rows
        },
        //新增资讯的弹窗
        addsign() {
            this.title = '新增人才'
            this.visibleopen = true
        },
        //修改资讯的弹窗
        async modify(row) {
            detailTalent(row.talentId).then((res) => {
                this.form = res
                this.title = '修改人才'
                this.visibleopen = true
            })
        },
        async delrow(row) {
            this.$confirm('是否确认删除人才', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return deleteTalent(row.talentId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
        // 提交
        submitto() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.talentId) {
                        // 修改
                        updateTalent(this.form).then((res) => {
                            this.$message.success('修改成功')
                            this.colsedia()
                            this.getList()
                        })
                    } else {
                        // console.log(this.form);
                        addTalent(this.form).then((res) => {
                            this.$message.success('新增成功')
                            this.colsedia()
                            this.getList()
                        })
                    }
                }
            })
        },
        // 关闭
        colsedia() {
            this.$refs['form'].resetFields()
            this.form = {}
            this.visibleopen = false
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getList()
        },
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = '用户导入'
            this.upload.open = true
        },
        /** 下载模板操作 */
        importTemplate() {
            importTemplate().then((response) => {
                console.log(response)

                const blob = new Blob([response])
                saveAs(blob, '人才导入模板.xlsx')
            })
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false
            this.upload.isUploading = false
            this.$refs.upload.clearFiles()
            this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
            this.getList()
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit()
        },
    },
    created() {
        this.getList()
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea__inner {
    width: 500px;
}
</style>