<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-09-24 15:47:04
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/person/main/personPerson.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="person-person">
|
<div class="person-person-left">
|
<div class="person-left-title">
|
<div :class="{ 'person-left-active': leftActive }" @click="changeTab(1)">部门</div>
|
<div :class="{ 'person-left-active': !leftActive }" @click="changeTab(2)">岗位</div>
|
</div>
|
<div class="person-left-search">
|
<el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
|
</div>
|
<div class="person-tree">
|
<!-- 部门 -->
|
<el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all
|
:props="{ label: 'name', children: 'children' }" class="treeActive" @node-click="titleListNode" v-if="leftActive"/>
|
<!-- 岗位 -->
|
<div v-for="(item, index) in titleList" :data-id="item.id" v-if="!leftActive"
|
:class="{ treeActive: item.active }" @click="selectbtn(index)">{{ item.postName }}</div>
|
</div>
|
</div>
|
<div class="person-person-right">
|
<div class="right-top">
|
<div class="right-title"><span v-if="leftActive">部门：千文科技</span></div>
|
<div>
|
<el-select v-model="searchData.status" placeholder="状态" class="searchStatus">
|
<el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue"
|
:value="item.dictKey" size="small" />
|
</el-select>
|
<el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="请输入关键字进行过滤">
|
<template #append>
|
<el-button :icon="searchIcon" @click="searchPerson" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
<div class="right-bottom">
|
<el-button type="primary" @click="addPerson">+ 添加员工</el-button>
|
<el-button type="primary" @click="changeDepartment">部门调整</el-button>
|
<!-- 导入 -->
|
<import-table class="exportBtn" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
|
<!-- 导出 -->
|
<el-button type="primary" @click="getExport">导出</el-button>
|
<el-button type="danger" plain @click="delPerson">删除</el-button>
|
</div>
|
<div class="right-table">
|
<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef"
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="phone" label="员工照片" width="150">
|
<template #default="scope">
|
<el-upload
|
:headers="authorization"
|
class="avatar-uploader"
|
action="/api/blade-resource/oss/endpoint/put-file"
|
:show-file-list="false"
|
:on-success="(file)=>handleAvatarSuccess(file,scope.$index)"
|
:before-upload="(file)=>beforeAvatarUpload(file,scope.$index)">
|
<div v-if="scope.row.avatar" style="position: relative;">
|
<img :src="scope.row.avatar" class="avatar">
|
<div class="el-icon-editDom">
|
<span class="el-icon-edit">编辑</span>
|
<span class="el-icon-del" @click.stop="avatarDel(scope.$index)">删除</span>
|
</div>
|
</div>
|
<el-icon v-else class="el-icon-plus avatar-uploader-icon"><Picture /></el-icon>
|
</el-upload>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
|
<el-table-column prop="jobNumber" label="工号" width="150"></el-table-column>
|
<el-table-column label="关联账号" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.account ? scope.row.account : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="部门" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.organizationName ? scope.row.organizationName : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="岗位" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.postName ? scope.row.postName : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="邮箱" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.email ? scope.row.email : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="tel" label="手机号" width="120"></el-table-column>
|
<el-table-column prop="tel" label="状态" width="120">
|
<template #default="scope">
|
<span>{{ scope.row.status == "1" ? "在职" : '离职' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="140">
|
<template #default="scope">
|
<el-button type="text" size="small"
|
@click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
<el-button text type="primary" size="small"
|
@click="table_del(scope.row, scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="currentPage4" :page-sizes="[15, 50, 100]" :page-size="15"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
|
<el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode == 'show'" ref="dialogForm"
|
label-width="80px" label-position="center">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="部门" prop="parentId">
|
<el-tree-select @change="parentIdChange" v-model="departmentFrom.parentId" clearable
|
placeholder="部门" default-expand-all check-on-click-nod :data="titleList" check-strictly
|
:props="{ label: 'name' }" node-key="id" ref="parentTree" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button @click="departmentVisible = false">取 消</el-button>
|
<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保
|
存</el-button>
|
</template>
|
</el-dialog>
|
<!-- 删除 -->
|
<el-dialog title="" v-model="delPersonModel" :width="300" destroy-on-close>
|
<div>
|
<div style="margin-bottom: 6px;"><span class="delIcon">!</span>请你谨慎选择！</div>
|
<div style="text-indent: 24px;">删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, 您可以选择 停用 操作。停用后此数据将不能再被新业务使用。</div>
|
</div>
|
<template #footer>
|
<div class="footerDiv">
|
<div class="delBtn" @click="delData(0)">删除</div>
|
<div class="delBtn" @click="delData(1)">停用</div>
|
</div>
|
</template>
|
</el-dialog>
|
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess"
|
@closed="dialog.save = false"></save-dialog>
|
</template>
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
import importTable from '@/layout/components/importTable.vue'
|
import saveDialog from './save'
|
export default {
|
name: "personPerson",
|
data() {
|
return {
|
authorization: {},
|
uploadUrl: "/api/blade-cps/employee/import-employee",
|
exportUrl: "/api/blade-cps/employee/export-template",
|
titleList: [],
|
delPersonModel: false,
|
searchIcon: "el-icon-search",
|
searchData: {
|
current: 1,
|
size: 15,
|
status: "1",
|
total: "1",
|
keywords: "",
|
postId: "", //postId
|
organizationCode: "" //组织code
|
},
|
total: 0,
|
isSaveing: false,
|
groups: [],
|
departmentFrom: {
|
department: ""
|
},
|
departmentVisibleRules: {
|
parentId: [{ required: true, message: '请选择部门' }]
|
},
|
departmentVisible: false,
|
dialog: {
|
save: false
|
},
|
leftActive: true,
|
input: '',
|
statusList: [],
|
input3: '',
|
tableData: [],
|
selection: [],
|
departmentFrom: {
|
parentId: ""
|
}
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.getStatus();
|
this.getOrganizationList(); //部门
|
},
|
components: {
|
saveDialog, importTable,...ElementPlusIconsVue
|
},
|
methods: {
|
avatarDel(index) {
|
var obj = this.tableData[index];
|
obj.avatar = "";
|
this.$HTTP.post(`/api/blade-cps/employee/submit`,obj).then(res=> {
|
this.searchPerson();
|
})
|
},
|
handleAvatarSuccess(file,index) {
|
var obj = this.tableData[index];
|
obj.avatar = file.data.link;
|
this.$HTTP.post(`/api/blade-cps/employee/submit`,obj).then(res=> {
|
this.searchPerson();
|
})
|
},
|
beforeAvatarUpload(file,index) {
|
var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
|
if (!isJPG) {
|
this.$message.error('请上传图片！');
|
}
|
var TOKEN = this.$TOOL.cookie.get("TOKEN")
|
this.authorization = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
|
return isJPG;
|
},
|
getExport() {
|
this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
|
if (res.code == 200) {
|
window.open(res.data.link);
|
}
|
})
|
},
|
parentIdChange(val) {
|
// var $parentId = this.$refs.parentTree.getCurrentNode().title;
|
// this.depatmentForm.$parentId = $parentId;
|
},
|
titleListNode(data) {
|
this.searchData.organizationCode = data.code;
|
this.searchPerson();
|
},
|
selectbtn(index) {
|
this.titleList.forEach(item => {
|
item.active = false;
|
})
|
this.titleList[index].active = true;
|
if (this.leftActive) { //部门
|
this.searchData.organizationCode = this.titleList[index].code;
|
this.searchData.postId = "";
|
} else { //岗位
|
this.searchData.organizationCode = "";
|
this.searchData.postId = this.titleList[index].id;
|
}
|
this.searchPerson();
|
},
|
getOrganizationList() { //部门
|
this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res => {
|
if (res.code == 200) {
|
this.titleList = res.data;
|
this.titleList[0].active = true;
|
this.searchData.organizationCode = res.data[0].code;
|
this.searchPerson();
|
}
|
})
|
},
|
getPost() { //岗位
|
var obj = {
|
current: 1,
|
size: -1,
|
}
|
this.$HTTP.get(`/api/blade-system/post/page?` + this.$TOOL.qsStringify(obj)).then(res => {
|
if (res.code == 200) {
|
this.titleList = res.data.records;
|
this.titleList[0].active = true;
|
this.searchData.postId = res.data.records[0].id;
|
this.searchPerson();
|
}
|
})
|
},
|
delData(type) {
|
this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res => {
|
if (res.code == 200) {
|
this.$message.success("操作成功");
|
this.delPersonModel = false;
|
this.selectId = "";
|
this.getOrganizationList();
|
}
|
})
|
},
|
personHandleSuccess() {
|
if (this.leftActive) {
|
this.changeTab(1);
|
} else {
|
this.changeTab(2);
|
}
|
this.searchPerson();
|
},
|
searchPerson() {
|
this.$HTTP.get(`/api/blade-cps/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
|
if (res.code == 200) {
|
res.data.records.forEach(item => {
|
if (item.dictValue == "在职") {
|
this.searchData.status = item.dictKey;
|
}
|
})
|
this.tableData = res.data.records;
|
this.total = res.data.total;
|
}
|
})
|
},
|
getStatus() { //获取全部账号
|
this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res => {
|
if (res.code == 200) {
|
this.statusList = res.data;
|
}
|
})
|
},
|
departmentSubmit() {
|
var employeeIds = [];
|
this.selection.forEach(item => {
|
employeeIds.push(item.id);
|
})
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res => {
|
if (res.code == 200) {
|
this.searchPerson();
|
this.departmentVisible = false; //部门调整
|
this.departmentFrom.parentId = "";
|
this.$message.success("操作成功");
|
} else {
|
this.$alert(res.message, "提示", { type: 'error' });
|
}
|
})
|
} else {
|
return false;
|
}
|
})
|
},
|
//添加
|
addPerson() {
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open()
|
})
|
},
|
table_edit(row) {
|
this.dialog.save = true
|
this.$nextTick(() => {
|
this.$refs.saveDialog.open('edit').setData(row)
|
})
|
},
|
//删除
|
table_del(row) {
|
this.selectId = row.id;
|
this.delPersonModel = true;
|
},
|
handleSelectionChange(selection) {
|
this.selection = selection;
|
},
|
delPerson() {
|
if (this.selection.length == 0) {
|
this.$message({
|
message: '请选择至少一条数据',
|
type: 'warning'
|
});
|
return;
|
}
|
var selStr = "";
|
this.selection.map(item => {
|
selStr += item.id + ","
|
})
|
this.selectId = selStr.replace(/,$/, '');
|
this.delPersonModel = true;
|
},
|
changeDepartment() {
|
if (this.selection.length == 0) {
|
this.$message({
|
message: '请选择至少一条数据',
|
type: 'warning'
|
});
|
return;
|
}
|
var selStr = "";
|
this.selection.map(item => {
|
selStr += item.id + ","
|
})
|
this.selectId = selStr.replace(/,$/, '');
|
this.departmentVisible = true;
|
},
|
changeTab(name) {
|
this.searchData.current = 1;
|
this.searchData.size = 15;
|
this.searchData.organizationCode = "";
|
this.searchData.postId = "";
|
if (name == 1) {
|
this.searchData.total = '0';
|
this.leftActive = true;
|
this.getOrganizationList();
|
} else { //岗位
|
this.searchData.total = '1';
|
this.leftActive = false;
|
this.getPost();
|
}
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.person-person {
|
width: 100%;
|
background-color: #f9fafb;
|
border: 1px solid #dcdfe6;
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
|
display: flex;
|
}
|
|
.person-person-left {
|
background-color: #fff;
|
width: 300px;
|
min-width: 300px;
|
margin: 8px;
|
overflow: hidden;
|
border-radius: 4px;
|
padding: 8px;
|
}
|
|
.person-person-right {
|
background-color: #fff;
|
flex: 1;
|
margin-top: 8px;
|
margin-bottom: 8px;
|
overflow: hidden;
|
border-radius: 4px;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
|
.person-left-title {
|
text-align: center;
|
vertical-align: middle;
|
padding-left: 8px;
|
}
|
|
.person-left-title div {
|
display: inline-block;
|
width: 55px;
|
height: 28px;
|
line-height: 28px;
|
border: 1px solid #dcdfe6;
|
cursor: pointer;
|
}
|
|
.person-left-title div:nth-child(1) {
|
border-top-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
border-right: 0px;
|
}
|
|
.person-left-title div:nth-child(2) {
|
border-top-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
border-left: 0px;
|
}
|
|
.person-left-active {
|
background-color: #409eff;
|
color: #fff;
|
}
|
|
.person-left-search {
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
|
.person-tree {
|
font-size: 14px;
|
font-weight: 400;
|
}
|
|
.person-tree div {
|
margin-bottom: 8px;
|
padding: 4px 18px;
|
cursor: pointer;
|
}
|
|
.right-top {
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 1px solid #dcdfe6;
|
margin-bottom: 8px;
|
padding-left: 8px;
|
padding-right: 8px;
|
}
|
|
.right-title {
|
font-size: 18px;
|
font-weight: bold;
|
padding-bottom: 12px;
|
margin-bottom: 8px;
|
height: 37px;
|
}
|
|
.searchStatus {
|
margin-right: 6px;
|
width: 200px;
|
}
|
|
.right-bottom {
|
padding-left: 8px;
|
padding-right: 8px;
|
margin-bottom: 8px;
|
}
|
|
.right-table {
|
padding-left: 8px;
|
padding-right: 8px;
|
margin-bottom: 8px;
|
|
}
|
|
.multipleTableRef {
|
margin-bottom: 8px;
|
}
|
|
.footerDiv {
|
text-align: center;
|
}
|
|
.delBtn {
|
color: #fff;
|
width: 112px;
|
height: 32px;
|
display: inline-block;
|
color: #fa554c;
|
background-color: #fff;
|
border: 1px solid #fdbbb7;
|
text-align: center;
|
line-height: 32px;
|
cursor: pointer;
|
}
|
|
.delBtn:nth-child(1) {
|
margin-right: 4px;
|
}
|
|
.delBtn:hover {
|
background-color: #f34d5b;
|
border-color: #f34d5b;
|
color: #fff;
|
}
|
|
.delIcon {
|
color: #fff;
|
background: red;
|
border-radius: 50%;
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
font-size: 14px;
|
text-align: center;
|
line-height: 20px;
|
margin-right: 6px;
|
}
|
|
.exportBtn {
|
margin-left: 8px;
|
margin-right: 8px;
|
}
|
</style>
|
<style>
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 80px;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
background-color: #c0c4cc;
|
}
|
.el-icon-editDom {
|
position: absolute;
|
left: 4px;
|
top: 56px;
|
font-weight: 700;
|
color: #409eff;
|
}
|
.el-icon-editDom span {
|
margin: 0;
|
padding: 0;
|
font-size: 12px;
|
line-height: 18px;
|
border: 1px solid #409eff;
|
background: #fff;
|
padding-left: 2px;
|
padding-right: 2px;
|
cursor: pointer;
|
}
|
.el-icon-editDom .el-icon-edit {
|
margin-right: 4px;
|
}
|
.el-icon-editDom .el-icon-del {
|
|
}
|
.avatar {
|
width: 80px;
|
height: 80px;
|
display: block;
|
}
|
</style>
|
