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: 10px">
                <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="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="70px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="证书编号" prop="certificateNo">
                    <el-input v-model="form.certificateNo"></el-input>
                </el-form-item>
                <el-form-item label="学校" prop="university">
                    <el-input v-model="form.university"></el-input>
                </el-form-item>
                <el-form-item label="二级学院" prop="college">
                    <el-input v-model="form.college"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 80px; text-align: center; margin-left: -150px">
                    <el-button
                        type="primary"
                        style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
                        @click="submitto('confirm')"
                        >确认</el-button
                    >
                    <el-button
                        style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
                        @click="colsedia"
                        >取消</el-button
                    >
                </el-form-item>
            </el-form>
        </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: 12px" @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 } 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: {},
            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) {
            this.title = '修改人才'
            this.visibleopen = true
            this.form = row
        },
        async delrow(row) {
            this.$confirm('是否确认删除人才', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return deleteTalent(row.talentId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
        // 提交
        async submitto() {
            if (this.form.talentId) {
                // 修改
                await updateTalent(this.form)
                this.$message.success('修改成功')
            } else {
                // console.log(this.form);
                await addTalent(this.form)
                this.$message.success('新增成功')
            }
            this.colsedia()
            this.getList()
        },
        // 关闭
        colsedia() {
            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>
</style>