it-console/code/web/admin_system/src/views/info/StaffInfo.vue

/* eslint-disable */
<!--
 * @Author: Kane
 * @Date: 2023-01-12 14:43:46
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-26 23:18:49
 * @FilePath: \admin_system\src\views\info\StaffInfo.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="query_box">
        <el-form inline width="600px">
            <el-row :gutter="10" class="el-row">
                <el-col :span="8">
                    <el-input v-model="query_param.staff_code" placeholder="请输入P09工号或P13账号"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="danger">查询</el-button>
                </el-col>
                <el-col :span="12"></el-col>
            </el-row>
        </el-form>
        <el-table ref="table" :data="table_data" border width="100%" stripe>
            <el-table-column type="selection" min-width="30" align="center"></el-table-column>
            <el-table-column min-width="200" label="员工名称" align="left" fixed="left">
                <template #default="rowdata">
                    <span @click="onShowStaffInfo(rowdata.row)" style="cursor: pointer; display: block; height: 100%">{{
                        rowdata.row.staff_name
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="staff_code" min-width="100" label="工号" align="left"></el-table-column>
            <el-table-column prop="p13uid" min-width="200" label="P13账号" align="left"></el-table-column>
            <el-table-column label="操作" min-width="200" align="center" fixed="right">
                <template #default>
                    <el-button type="warning">编辑</el-button>
                    <el-button type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row :gutter="10" width="100%">
            <el-col :span="18">
                <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
                    @size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
                    :page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
                    :total="table_data.length">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars*/
export default {
    name: "staff-info",
    data()
    {
        return {
            query_param: {
                staff_code: "",
            },
            table_current_page: 1,
            table_data: [
                {
                    staff_name: "王炜",
                    staff_code: "588",
                    p13uid: "wangwei-202",
                },
                {
                    staff_name: "王炜",
                    staff_code: "588",
                    p13uid: "wangwei-202",
                },
                {
                    staff_name: "王炜",
                    staff_code: "588",
                    p13uid: "wangwei-202",
                },
                {
                    staff_name: "王炜",
                    staff_code: "588",
                    p13uid: "wangwei-202",
                },
                {
                    staff_name: "王炜",
                    staff_code: "588",
                    p13uid: "wangwei-202",
                },
            ],
        };
    },
    methods: {
        onTableEdit(row) { },
        /**
         * 根据表格行index返回样式，实现斑马纹
         * @param row
         * @param rowIndex
         * @return 返回的样式名称
         */
        tabRowClassName(row, rowIndex)
        {
            let index = rowIndex + 1;
            if (index % 2 == 0)
            {
                return "warning-row";
            }
        },
        /**
         * 点击表格 用户名称 时的消息处理函数
         * @param {*} staff
         */
        onShowStaffInfo(staff)
        {
            console.log("点击名称", staff);
        },
        /**
         * 表格页显示数量变更时消息处理函数
         */
        onTablePageSizeChange() { },
        /**
         * 用户变更当前页时消息处理函数
         */
        onCurrentPageIndexChange() { },
    },
};
</script>

<style scoped>
.el-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-label {
    text-align: right;
}

.query_box {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
}

.query_box>*+* {
    margin-top: 15px;
}

.info_box {
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.el-table .warning-row {
    background-color: #f3f9ff;
}

.query_box:hover,
.info_box:hover {
    box-shadow: 0px 0px 20px -10px rgb(14 18 22 / 25%);
}

div.cell {
    height: 100%;
}

.pull_left {
    margin-left: 15px;
    margin-right: auto;
}

.pull_right {
    display: flex;
    justify-content: right;
}

.pull_right:last-child {
    margin-right: 15px;
}
</style>