xiaobei
/
xmf_saas_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
main
校文 3 years ago
parent 1e3bc9d507
commit 55cd2032b9
4 changed files with 186 additions and 127 deletions
Show Stats Download Patch File Download Diff File

4
src/App.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-11-18 17:15:53
* @LastEditTime: 2021-11-18 17:41:13
* @LastEditTime: 2021-11-26 12:10:54
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /ansu-business/src/App.vue
@ -37,7 +37,7 @@ body {
#app {
width: 100%;
height: 100%;
min-width: 1200px;
min-width: 1500px;
min-height: 760px;
overflow: auto;
}

41
src/views/Employee/curd/columns.js
Unescape View File

@ -0,0 +1,41 @@
/*
* @Author: your name
* @Date: 2021-11-26 12:16:37
* @LastEditTime: 2021-11-26 12:16:37
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /LittleBeeSaas/src/views/Employee/curd/columns.js
*/
export default [
{ 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" },
},
]

183
src/views/Employee/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-11-22 15:56:04
* @LastEditTime: 2021-11-22 17:14:00
* @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
@ -16,17 +16,41 @@
<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-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>
<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="data">
<a-table :row-selection="rowSelection" :columns="columns" :data-source="tableData" :pagination="false">
<template v-slot:action="{record}">
<span>
<a @click="Edit(record)">编辑</a>
@ -43,113 +67,26 @@
</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>
//表格
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" }],
},
],
},
];
import columns from "./curd/columns";
import treeData from "./testData/treeData";
//表格选择框
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
@ -163,20 +100,33 @@ export default {
name: "Employee", //员工管理
data() {
return {
form: {
a: "",
b: "",
c: "",
page:1
},
rowSelection,
value: undefined,
treeData,
expandedKeys: ["0-0-0", "0-0-1"],
region: undefined,
options,
data,
tableData: [
{
key: "1",
name: "潘迪",
mobilenumber: "13899191020",
Department: "安全保卫部",
position: "项目经理",
remarks: "青海省",
operation: "",
},
],
columns,
tableData: [],
page: {
pageNo: 1,
limit: 10,
sizes: [1, 5, 10],
total: 0,
pageSize: 10,
total: 1,
},
};
},
@ -205,18 +155,16 @@ export default {
.box {
display: flex;
.left {
width: 20%;
width: 260px;
height: 650px;
border-right: 3px solid rgb(175, 174, 174);
}
.right {
width: 75%;
height: 650px;
margin: auto 10px;
width: 100%;
margin-left: 10px;
}
}
.top {
padding: 10px;
width: 100%;
display: flex;
justify-content: space-between;
@ -229,4 +177,9 @@ export default {
height: 50px;
}
}
.block {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
</style>

65
src/views/Employee/testData/treeData.js
Unescape View File

@ -0,0 +1,65 @@
/*
* @Author: your name
* @Date: 2021-11-26 12:17:53
* @LastEditTime: 2021-11-26 12:17:54
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /LittleBeeSaas/src/views/Employee/testData/treeData.js
*/
export default [
{
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" }],
},
],
},
];
Write Preview
Loading…
Cancel
Save