|
|
|
|
@ -7,20 +7,210 @@
|
|
|
|
|
* @FilePath: /ansu-business/src/views/Employee/index.vue
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<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 icon="plus" type="primary">新增员工</a-button>
|
|
|
|
|
<a-button>导入</a-button>
|
|
|
|
|
<a-button>导出</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="topright">
|
|
|
|
|
<a-select show-search placeholder="所属部门" option-filter-prop="children" style="width: 200px" :filter-option="filterOption"></a-select>
|
|
|
|
|
<a-select show-search placeholder="职位" option-filter-prop="children" style="width: 200px" :filter-option="filterOption"></a-select>
|
|
|
|
|
<a-input-search placeholder="请输入搜索信息" style="width: 200px"></a-input-search>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const columns = [
|
|
|
|
|
{ title: "名称", dataIndex: "name", width: 100, key: "1", align: "center" },
|
|
|
|
|
{
|
|
|
|
|
title: "手机号",
|
|
|
|
|
dataIndex: "mobilenumber",
|
|
|
|
|
width: 150,
|
|
|
|
|
key: "2",
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "所属部门",
|
|
|
|
|
dataIndex: "Department",
|
|
|
|
|
width: 150,
|
|
|
|
|
key: "3",
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
{ title: "职位", dataIndex: "position", width: 150, key: "4", align: "center" },
|
|
|
|
|
{ title: "备注", dataIndex: "remarks", key: "5", align: "center" },
|
|
|
|
|
{
|
|
|
|
|
title: "操作",
|
|
|
|
|
dataIndex: "operation",
|
|
|
|
|
width: 280,
|
|
|
|
|
key: "action",
|
|
|
|
|
align: "center",
|
|
|
|
|
scopedSlots: { customRender: "action" },
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
const data = [
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
name: '潘迪',
|
|
|
|
|
mobilenumber: '13899191020',
|
|
|
|
|
Department: '安全保卫部',
|
|
|
|
|
position: '项目经理',
|
|
|
|
|
remarks: '青海省',
|
|
|
|
|
operation: '',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
const treeData = [
|
|
|
|
|
{
|
|
|
|
|
title: "广西印象物业服务有限公司",
|
|
|
|
|
key: "0-0",
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
title: "运营部",
|
|
|
|
|
key: "0-0-0",
|
|
|
|
|
children: [
|
|
|
|
|
{ title: "客服组", key: "0-0-0-0" },
|
|
|
|
|
{ title: "商务组", key: "0-0-0-1" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "财务部",
|
|
|
|
|
key: "0-0-1",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-0-1-0" }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "房屋管理维修部",
|
|
|
|
|
key: "0-0-2",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-0-2-0" }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "安保部",
|
|
|
|
|
key: "0-0-3",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-0-3-0" }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "设备工程部门",
|
|
|
|
|
key: "0-0-4",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-0-4-0" }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "环境卫生部",
|
|
|
|
|
key: "0-0-5",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-0-5-0" }],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "南宁富航资产管理有限公司",
|
|
|
|
|
key: "0-1",
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
title: "工程维修管理单位",
|
|
|
|
|
key: "0-1-0",
|
|
|
|
|
children: [{ title: "客服组", key: "0-1-0-0" }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "南宁中建工程机械维修",
|
|
|
|
|
key: "0-1-1",
|
|
|
|
|
children: [{ title: "0-0-1-0", key: "0-1-0-1" }],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
const options = [];
|
|
|
|
|
export default {
|
|
|
|
|
name: "Employee", //员工管理
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
value: undefined,
|
|
|
|
|
treeData,
|
|
|
|
|
expandedKeys: ["0-0-0", "0-0-1"],
|
|
|
|
|
region: undefined,
|
|
|
|
|
options,
|
|
|
|
|
data,
|
|
|
|
|
columns,
|
|
|
|
|
tableData: [],
|
|
|
|
|
page: {
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
limit: 10,
|
|
|
|
|
sizes: [1, 5, 10],
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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: 20%;
|
|
|
|
|
height: 650px;
|
|
|
|
|
border-right: 3px solid rgb(175, 174, 174);
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
width: 75%;
|
|
|
|
|
height: 650px;
|
|
|
|
|
margin: auto 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.top {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.topleft {
|
|
|
|
|
width: 25%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.tpright {
|
|
|
|
|
width: 75%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
阿丽