406 lines
10 KiB
Vue
406 lines
10 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="选择人员"
|
|
:visible="dialogVisible"
|
|
width="50%"
|
|
@close="handleClose"
|
|
>
|
|
<div class="select-user-container">
|
|
<div class="org-tree">
|
|
<el-tree
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
default-expand-all
|
|
/>
|
|
</div>
|
|
<div class="user-list">
|
|
<div class="flex-row aic jcfe mb10" style="gap: 10px">
|
|
<el-input
|
|
v-model="searchForm.nickName"
|
|
style="width: 300px"
|
|
placeholder="输入名称"
|
|
/>
|
|
<div>
|
|
<el-button type="primary" size="medium" @click="fetchUserList"
|
|
>查询</el-button
|
|
>
|
|
<el-button type="primary" size="medium" @click="resetTable"
|
|
>重置</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<CustomTable
|
|
ref="customTableRef"
|
|
:columns="columns"
|
|
:tableData="userData"
|
|
:total="total"
|
|
:show-selection="showSelection"
|
|
:show-index="true"
|
|
:table-height="tableHeight"
|
|
:multiSelect="multiSelect"
|
|
:selectable="selectable"
|
|
@selection-change="handleSelectionChange"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
@selected="selectRow"
|
|
@selectAll="selectAll"
|
|
rowKey="userId"
|
|
:rowClick="
|
|
(row) => {
|
|
rowClick(row);
|
|
}
|
|
"
|
|
maxHeight="380"
|
|
:highligt="highligt"
|
|
>
|
|
<template slot="operation" slot-scope="{ row }">
|
|
<div class="operation-buttons">
|
|
<el-button text type="primary" @click="handleEdit(row)"
|
|
>编辑</el-button
|
|
>
|
|
<el-button text type="primary" @click="showTimesheet(row)"
|
|
>工作日志</el-button
|
|
>
|
|
<el-button text type="danger" @click="handleDelete(row)"
|
|
>删除</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
</CustomTable>
|
|
</div>
|
|
</div>
|
|
<template slot="footer">
|
|
<span class="dialog-footer">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确认</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomTable from "@/components/CustomTable.vue";
|
|
import { systemApi } from "@/utils/api";
|
|
|
|
export default {
|
|
components: {
|
|
CustomTable,
|
|
},
|
|
props: {
|
|
multiSelect: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
dialogVisible: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
currentSelectedUser: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
currentSelectedUserName: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
showSelection: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
highligt: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
selectable: {
|
|
type: Function,
|
|
default: () => true,
|
|
},
|
|
userIdList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
isFilter: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
selectedUsers: [],
|
|
currentDepartment: "",
|
|
tableHeight: "350", // 设置一个合适的高度
|
|
treeData: [],
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "label",
|
|
},
|
|
columns: [
|
|
{ prop: "nickName", label: "姓名" },
|
|
{
|
|
prop: "dept",
|
|
label: "部门",
|
|
type: "status",
|
|
callback: (data) => data?.deptName,
|
|
},
|
|
{
|
|
prop: "roles",
|
|
label: "角色",
|
|
type: "status",
|
|
callback: (data) => data.map((ele) => ele.roleName).join(","),
|
|
},
|
|
],
|
|
userData: [],
|
|
isInternalChange: false,
|
|
selectAllData: [],
|
|
searchForm: {
|
|
nickName: "",
|
|
},
|
|
};
|
|
},
|
|
emits: ["close", "confirm"],
|
|
methods: {
|
|
handleNodeClick(data) {
|
|
this.currentDepartment = data.id;
|
|
this.currentPage = 1;
|
|
this.fetchUserList();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.fetchUserList();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.fetchUserList();
|
|
},
|
|
handleClose() {
|
|
this.$emit("close");
|
|
},
|
|
handleConfirm() {
|
|
if (!this.showSelection) this.$emit("confirm", this.selectedUsers);
|
|
else
|
|
this.$emit(
|
|
"confirm",
|
|
this.selectedUsers.map((ele, index) => ({
|
|
userId: ele.userId,
|
|
nickName: ele.nickName,
|
|
}))
|
|
);
|
|
|
|
this.handleClose();
|
|
},
|
|
handleSelectionChange(val) {
|
|
if (this.isInternalChange) return;
|
|
if (!this.multiSelect) {
|
|
this.isInternalChange = true;
|
|
this.$nextTick(() => {
|
|
if (val.length > 0) {
|
|
const lastSelected = val[val.length - 1];
|
|
this.selectedUsers = [lastSelected];
|
|
this.$refs.customTableRef.clearSelection();
|
|
this.$refs.customTableRef.toggleRowSelection(lastSelected, true);
|
|
} else {
|
|
this.selectedUsers = [];
|
|
}
|
|
this.isInternalChange = false;
|
|
});
|
|
} else {
|
|
// this.selectedUsers = val;
|
|
}
|
|
},
|
|
selectRow({ arr, row }) {
|
|
if (!row) return;
|
|
if (this.selectedUsers.filter((ele) => ele.userId == row.userId).length) {
|
|
this.selectedUsers = this.selectedUsers.filter(
|
|
(ele) => ele.userId != row.userId
|
|
);
|
|
} else {
|
|
this.selectedUsers.push({ userId: row.userId, nickName: row.nickName });
|
|
}
|
|
},
|
|
selectAll(arr) {
|
|
let filterArr = this.selectAllData.filter(
|
|
(ele) => !arr.some((item) => item.userId == ele.userId)
|
|
);
|
|
|
|
arr.forEach((ele) => {
|
|
if (
|
|
!this.selectedUsers.filter((item) => item.userId == ele.userId).length
|
|
)
|
|
this.selectRow({ row: ele });
|
|
});
|
|
filterArr.forEach((ele) => {
|
|
this.selectRow({ row: ele });
|
|
});
|
|
},
|
|
fetchUserList: async function () {
|
|
const response = await systemApi.getUserList({
|
|
pageNum: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
deptId: this.currentDepartment,
|
|
...this.searchForm,
|
|
userIdList:this.userIdList,
|
|
});
|
|
this.userData = response.rows;
|
|
this.total = response.total;
|
|
if (!this.multiSelect) {
|
|
this.userData.forEach((ele) => {
|
|
if (ele.userId == this.selectedUsers[0]?.userId)
|
|
this.$refs.customTableRef?.setCurrentRow(ele);
|
|
});
|
|
}
|
|
},
|
|
resetTable() {
|
|
this.searchForm.nickName = "";
|
|
this.fetchUserList();
|
|
},
|
|
fetchTreeData: async function () {
|
|
const response = await systemApi.getDeptTree();
|
|
this.treeData = response.data;
|
|
},
|
|
currentRow(val) {
|
|
this.selectedUsers = [val];
|
|
},
|
|
rowClick(row) {
|
|
if (!this.showSelection) {
|
|
if (row.userId == this.selectedUsers[0]?.userId)
|
|
this.$refs.customTableRef.$refs.elTableRef.setCurrentRow();
|
|
else this.selectedUsers = [row];
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
currentSelectedUser: {
|
|
handler(newVal) {
|
|
this.$nextTick(() => {
|
|
if (!this.showSelection) {
|
|
let row = this.userData.find(
|
|
(ele) => ele.userId == newVal[0]?.userId
|
|
);
|
|
if (row) {
|
|
this.$refs.customTableRef?.setCurrentRow(row);
|
|
this.selectedUsers = [row];
|
|
} else {
|
|
this.selectedUsers = [];
|
|
this.$refs.customTableRef?.setCurrentRow();
|
|
}
|
|
} else {
|
|
if (!newVal.length) {
|
|
this.selectedUsers = [];
|
|
this.$refs.customTableRef?.clearSelection();
|
|
} else {
|
|
// this.$refs.customTableRef?.clearSelection();
|
|
this.selectedUsers = [];
|
|
newVal.forEach((item, index) => {
|
|
this.selectedUsers.push({
|
|
userId: item,
|
|
nickName: this.currentSelectedUserName[index],
|
|
});
|
|
let row = this.userData.find((ele) => ele.userId == item);
|
|
if (row) {
|
|
this.selectAllData.push(row);
|
|
this.$refs.customTableRef?.toggleRowSelection(row, true);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
userData: {
|
|
handler(newVal) {
|
|
this.$nextTick(() => {
|
|
if (!this.showSelection) {
|
|
let row = this.userData.find(
|
|
(ele) => ele.userId == this.currentSelectedUser[0]?.userId
|
|
);
|
|
if (row) {
|
|
this.selectedUsers = [row];
|
|
this.$refs.customTableRef?.setCurrentRow(row);
|
|
}
|
|
} else {
|
|
this.selectAllData = [];
|
|
this.currentSelectedUser.forEach((item) => {
|
|
let row = newVal.find((ele) => ele.userId == item);
|
|
if (row) {
|
|
this.selectAllData.push(row);
|
|
|
|
this.$refs.customTableRef?.toggleRowSelection(row, true);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
userIdList: {
|
|
handler(newVal) {
|
|
this.fetchUserList();
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchTreeData();
|
|
if(!this.isFilter){
|
|
this.fetchUserList();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.select-user-container {
|
|
display: flex;
|
|
height: 400px;
|
|
}
|
|
|
|
.org-tree {
|
|
width: 200px;
|
|
border-right: 1px solid #dcdfe6;
|
|
padding-right: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.user-list {
|
|
flex: 1;
|
|
padding-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::v-deep .el-dialog__footer {
|
|
padding: 20px 20px 20px 0;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.dialog-footer .el-button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dialog-footer .el-button:first-child {
|
|
margin-left: 0;
|
|
}
|
|
::v-deep .el-table {
|
|
max-height: 360px !important;
|
|
}
|
|
::v-deep tr.el-table__row.current-row .el-table__cell {
|
|
background-color: #409eff !important;
|
|
color: #fff;
|
|
}
|
|
</style>
|