Skip to content

胡锦波 / org-manager-web

Go to a project
Commit d844a8b6 by 胡锦波
Options

1. 添加table

parent f28ba6ae
Inline Side-by-side
Showing with 276 additions and 4 deletions
src/views/pages/employ-management/address-book/employ-list.vue
<template> <template>
<div> <div class="addressbook-right-container">
EmployList <div
{{ tableData }} class="
addressbook-right-header
d-flex
justify-content-between
align-items-end
"
>
<span class="title">
{{ name }}
<span class="text-orange">({{ listTotal }}人)</span>
</span>
<div class="d-flex">
<div class="text-gray btn" @click="gotoInvitationPage">
邀请员工加入企业
</div>
<span></span>
<div class="text-gray btn">申请加入记录</div>
</div>
</div>
<div class="list-content d-flex flex-column">
<div
class="list_title d-flex align-items-center justify-content-end"
>
<el-button type="blue" @click="addMemberBtn">
添加员工
</el-button>
<el-button @click="exportMembers"> 批量导入 </el-button>
<el-button @click="outFile"> 批量导出 </el-button>
<el-button @click="handleDelete('disable')">
禁用员工
</el-button>
<el-button @click="handleDelete('del')"> 删除员工 </el-button>
</div>
<div class="table-container flex-fill d-flex flex-column">
<el-table
:data="tableData"
:empty-text="emptyText"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
class="addressBook-table flex-fill"
>
<el-table-column type="selection"></el-table-column>
<el-table-column label="姓名" width="140px">
<template slot-scope="scope">
<span>{{ scope.row.name || "-" }}</span>
</template>
</el-table-column>
<el-table-column label="手机号" width="160px">
<template slot-scope="scope">
<span>{{ scope.row.mobile || "-" }}</span>
</template>
</el-table-column>
<el-table-column label="职务">
<template slot-scope="scope">
<span>{{ scope.row.position || "-" }}</span>
</template>
</el-table-column>
<el-table-column label="部门" min-width="180px">
<template slot-scope="scope">
<span>{{
(scope.row.depNames || []).join(",") || "-"
}}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="140px">
<template slot-scope="scope">
<span
:class="scope.row.joined ? 'joined' : 'waiting'"
>{{
scope.row.joined ? "已加入" : "未加入"
}}</span
>
</template>
</el-table-column>
<el-table-column
fixed="right"
prop="active"
label="操作"
width="100"
align="center"
>
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row.peid)"
type="text"
size="small"
class="act-btn"
>
详情
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="hrs-pager addressBook-pagination"
:hide-on-single-page="true"
layout="prev, pager, next"
:total="this.totalCount"
:page-size="size"
@current-change="handleClickPage"
></el-pagination>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { departmentController } from "@/views/service/department-controller";
import { Component, Vue, Prop, Watch } from "vue-property-decorator"; import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({ components: {} }) @Component({ components: {} })
...@@ -22,22 +132,184 @@ ...@@ -22,22 +132,184 @@
private tableData: any[] = []; private tableData: any[] = [];
private size = 10; private size = 10;
private listTotal = 0;
private emptyText = "暂无数据";
private name = "";
private multipleSelection: string[] = [];
@Watch("curDepId", { immediate: true }) @Watch("curDepId", { immediate: true })
private onCurDepIdChange() { private onCurDepIdChange() {
this.getPageList(1); this.getPageList(1);
this.getDeptName(this.curDepId);
} }
private getPageList(page?: number) { private getPageList(page?: number) {
this.list = this.pdid2Members[this.curDepId || 0] || []; this.list = this.pdid2Members[this.curDepId || 0] || [];
this.totalCount = this.list.length; this.totalCount = this.list.length;
this.$emit("getListTotalNum", this.list.length); this.listTotal = this.list.length;
const p = page || 1; const p = page || 1;
this.pageIndex = p; this.pageIndex = p;
this.tableData = this.list.slice((p - 1) * this.size, p * this.size); this.tableData = this.list.slice((p - 1) * this.size, p * this.size);
} }
private getDeptName(depId: string) {
departmentController.getDepartments().then((r: any) => {
const departments = r.departments;
const result = departments.find((i: any) => i.id === depId);
if (result) {
this.name = result.name;
}
});
}
private handleSelectionChange(val: string[]) {
this.multipleSelection = val;
}
private handleClickPage(page: number) {
this.getPageList(page);
}
private gotoInvitationPage() {
return "";
}
private addMemberBtn() {
return "";
}
private exportMembers() {
return "";
}
private outFile() {
return "";
}
private handleDelete() {
return "";
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "~@/css/variables.less"; @import "~@/css/variables.less";
.text-orange {
color: #ff7f00;
}
.addressbook-right-container {
max-width: 1118px;
min-width: 744px;
padding: 0 24px 0px 36px;
.addressbook-right-header {
overflow: hidden;
height: 65px;
border-bottom: 1px solid #eee;
.title {
font-size: 18px;
line-height: 25px;
color: #292b33;
margin-bottom: 9px;
}
ul {
overflow: hidden;
position: relative;
line-height: 20px;
font-size: 14px;
margin-bottom: 11px;
span {
width: 1px;
height: 12px;
background: #8f95b3;
float: right;
margin-top: 5px;
margin-left: 15px;
margin-right: 15px;
}
li {
display: block;
float: right;
font-weight: 400px;
cursor: pointer;
}
}
}
.list-content {
border-top: 0px;
.list_title {
margin: 20px 0;
background: #ffffff;
position: relative;
display: flex;
align-items: center;
i {
margin-right: 5px;
}
.list_title_right {
margin-left: 10px;
width: 146px;
display: flex;
align-items: center;
label {
width: 30px;
font-size: 14px;
font-weight: 400;
text-align: left;
color: #c8c8cc;
}
.change-select {
width: 96px;
margin-left: 20px;
border: 1px solid #e6e7eb;
}
.change-select /deep/ .el-input__inner {
height: 32px;
line-height: 32px;
padding: 0 12px;
border: 0;
}
.change-select /deep/ .el-input__icon {
line-height: 32px;
}
}
/deep/ .el-button {
min-width: 32px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
height: 32px;
border-radius: 4px;
& + .el-button {
margin-left: 12px;
}
}
}
.table_item {
font-size: 13px;
background-color: #fff;
/deep/ .el-table {
color: #292b33;
thead {
color: #c8c8cc;
}
}
/deep/ .el-table tr {
height: 45px;
}
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment