LittleBeeSaas/src/views/Basic/Employee/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-22 15:56:04
 * @LastEditTime: 2021-11-26 12:27:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ansu-business/src/views/Employee/index.vue
-->
<template>
    <div class="box">
        <div class="left">
            <a-input-search placeholder="请输入搜索信息" style="width: 200px" />
            <a-tree :tree-data="treeData" :expandedKeys.sync="expandedKeys" @node-click="handleNodeClick">
            </a-tree>
        </div>
        <div class="right">
            <div class="top">
                <div class="topleft">
                    <a-button-group>
                        <a-button icon="plus" type="primary">新增员工</a-button>
                        <a-button>导入</a-button>
                        <a-button>导出</a-button>
                    </a-button-group>
                </div>
                <div class="topright">
                    <a-form-model :model="form" layout="inline">
                        <a-form-model-item>
                            <a-select v-model="form.a" show-search placeholder="所属部门" option-filter-prop="children" style="width: 160px" :filter-option="filterOption">
                                <a-select-option value="jack">
                                    Jack
                                </a-select-option>
                                <a-select-option value="lucy">
                                    Lucy
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-select v-model="form.b" show-search placeholder="职位" option-filter-prop="children" style="width: 160px" :filter-option="filterOption">
                                <a-select-option value="jack">
                                    Jack
                                </a-select-option>
                                <a-select-option value="lucy">
                                    Lucy
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-input-search v-model="form.c" placeholder="请输入搜索信息" style="width: 160px"></a-input-search>
                        </a-form-model-item>
                    </a-form-model>
                </div>
            </div>
            <a-table :row-selection="rowSelection" :columns="columns" :data-source="tableData" :pagination="false">
                <template v-slot:action="{record}">
                    <span>
                        <a @click="Edit(record)">编辑</a>
                        <a-divider type="vertical" />
                        <a-switch checked-children="启用" un-checked-children="停用" default-checked />
                        <span>
                            <a-divider type="vertical" />
                            <a @click="Password(record)">重置密码</a>
                        </span>
                        <span>
                            <a-divider type="vertical" />
                            <a @click="Delete(record)">删除</a>
                        </span>
                    </span>
                </template>
            </a-table>

            <div class="block">
                <span>共10900条</span>
                <a-pagination :total="page.total" :current="form.page" :page-size="page.pageSize"/>
            </div>
        </div>
    </div>
</template>

<script>
import columns from "./curd/columns";
import treeData from "./testData/treeData";
//表格选择框
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
        );
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const options = [];
export default {
    name: "Employee", //员工管理
    data() {
        return {
            form: {
                a: "",
                b: "",
                c: "",
                page:1
            },
            rowSelection,
            treeData,
            expandedKeys: ["0-0-0", "0-0-1"],
            options,
            tableData: [
                {
                    key: "1",
                    name: "潘迪",
                    mobilenumber: "13899191020",
                    Department: "安全保卫部",
                    position: "项目经理",
                    remarks: "青海省",
                    operation: "",
                },
            ],
            columns,
            page: {
                pageSize: 10,
                total: 1,
            },
        };
    },
    methods: {
        // 操作按钮列表
        Edit() {},
        Password() {},
        Delete() {},
        //树控件
        handleNodeClick(treeData) {
            console.log(treeData);
        },
        //选择器
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
    },
};
</script>

<style lang="less" scoped>
.box {
    display: flex;
    .left {
        width: 260px;
        height: 650px;
        border-right: 3px solid rgb(175, 174, 174);
    }
    .right {
        width: 100%;
        margin-left: 10px;
    }
}
.top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .topleft {
        width: 25%;
        height: 50px;
    }
    .tpright {
        width: 75%;
        height: 50px;
    }
}
.block {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
</style>