lj-zhgd-htweb/src/views/base/temporarily/index.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="关键字" prop="keyWord">
                <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable maxlength="20"
                    @keyup.enter.native="handleQuery" />
            </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>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="lsList">
            <el-table-column label="序号" align="center" width="80" type="index">
                <template slot-scope="scope">
                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" sortable />
            <el-table-column label="身份证号 " align="center" prop="idCard" sortable />
            <el-table-column label="手机号" align="center" prop="phone" sortable />
            <el-table-column label="所属班组" align="center" prop="teamName" sortable />
            <el-table-column label="人脸信息" align="center" prop="filePath">
                <template slot-scope="scope">
                    <div @click="openImg(scope.row.base64Url)" style="color: #02a7f0; cursor: pointer">
                        <img :src="scope.row.base64Url" style="width: 100px;height: 100px;">
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete"
                        @click="handleDelete(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 :visible.sync="dialogVisible">
            <img width="100%" height="650px" :src="dialogImageUrl" />
        </el-dialog>
    </div>
</template>

<script>
import { getTemporarilyPersons, delTemporarilyPerson } from "@/api/base/temporarilyPerson";
export default {
    name: "TemporarilyPersons",
    dicts: ['sys_normal_disable', 'sys_user_sex', 'post_type'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 临时人员表格数据
            lsList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            formQuery: {
                teamId: '',
                pageNum: 1,
                pageSize: 10,
                name: undefined,
                sex: undefined,
            },
            memberTotal: 0, // 总条数
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            },
            // 表单参数
            form: {},
            openPeople: false,
            //图片查看弹窗
            dialogImageUrl: '',
            dialogVisible: false,
        };
    },

    created() {
        this.getList();
    },
    methods: {
        /** 查询临时人员列表 */
        getList() {
            this.loading = true;
            getTemporarilyPersons(this.queryParams).then(response => {
                this.lsList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        //列表-图片查看
        openImg(url) {
            this.dialogImageUrl = url
            this.dialogVisible = true
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const obj = {
                id:row.id,
                filePath:row.filePath,
                fileId:row.fileId
            }
            this.$modal.confirm('是否确认删除姓名为"' + row.name + '"的数据项？').then(function () {
                return delTemporarilyPerson(obj);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
    }
};
</script>

<style lang="scss" scoped>
.el-table::before {
    display: none !important;
}

.people-dialog {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-between;
}

.people-list-box {
    width: 55%;
    height: 98%;
    border: 1px solid #e0e0e0;
}

.chosen-list-box {
    width: 40%;
    height: 98%;
    border: 1px solid #e0e0e0;
}

.chosen-list {
    height: 85%;
    overflow-y: auto;
}

.chosen-list-item {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-header {
    width: 100%;
    height: 60px;
    background-color: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.teamLeaderBox {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    background: #E7F4EE;
    border: 1px solid #19BE6B;
    border-radius: 20px;
    margin-left: 5px;
    color: #19BE6B;
}
</style>