<!--
 *           佛曰:  
 *                   写字楼里写字间，写字间里程序员；  
 *                   程序人员写程序，又拿程序换酒钱。  
 *                   酒醒只在网上坐，酒醉还来网下眠；  
 *                   酒醉酒醒日复日，网上网下年复年。  
 *                   但愿老死电脑间，不愿鞠躬老板前；  
 *                   奔驰宝马贵者趣，公交自行程序员。  
 *                   别人笑我忒疯癫，我笑自己命太贱；  
 *                   不见满街漂亮妹，哪个归得程序员？ 
 * @Author: Kane
 * @Date: 2023-02-21 11:03:15
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-24 11:09:40
 * @FilePath: /it-console/src/views/info/StaffInfo.vue
 * @Description:<
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="view_wrapper">
        <div class="query_wrapper">
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>姓名</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.stuffName"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>工号</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.stuffCode"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>P13账号</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.p13UID"></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>部门</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.departmentName"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>部门代码</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.departmentCode"></el-input>
                </el-col>
                <el-col :span="6">
                    <div class="toolbutton-wrapper">
                        <el-button type="primary" icon="search">查询</el-button>
                        <el-button icon="Refresh">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { reactive } from "vue";

export default {
    name: "StuffInfo",
    setup()
    {
        const query_param = reactive(
            {
                stuffName: "",
                stuffCode: "",
                p13UID: "",
                departmentCode: "",
                departmentName: "",
            }
        );

        return {
            query_param,
        };
    },
};
</script>

<style scoped lang="scss">
@import "@/css/public/public.scss";

.view_wrapper {
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;

    min-width: 800px;
    // max-width: 1200px;
    box-shadow: $box-shadow;

    &:hover {
        box-shadow: $box-shadow-hover;
    }
}

.query_wrapper {
    @include query-box-wrap;
}

.toolbutton-wrapper {
    display: flex;
    justify-content: right;
    align-items: center;
}
</style>