|
@@ -0,0 +1,607 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="employee-management">
|
|
|
|
|
+ <div class="employee-management-header">
|
|
|
|
|
+ <div class="header-title">人员管理</div>
|
|
|
|
|
+ <div class="header-search">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="searchName"
|
|
|
|
|
+ placeholder="请输入姓名搜索"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ style="width: 200px; margin-right: 10px;"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ @clear="handleSearch"
|
|
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="employee-management-content">
|
|
|
|
|
+ <!-- 左侧分组列表 -->
|
|
|
|
|
+ <div class="group-list-container">
|
|
|
|
|
+ <div class="group-list-header">
|
|
|
|
|
+ <span>分组列表</span>
|
|
|
|
|
+ <el-button type="text" icon="el-icon-circle-plus-outline" @click="showGroupDialog()">新增分组</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="group-list">
|
|
|
|
|
+ <el-scrollbar style="height: 100%;">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="group-item"
|
|
|
|
|
+ :class="{ active: selectedGroupId === null }"
|
|
|
|
|
+ @click="selectGroup(null)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 全部
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="group in groupList"
|
|
|
|
|
+ :key="group.id"
|
|
|
|
|
+ class="group-item"
|
|
|
|
|
+ :class="{ active: selectedGroupId === group.id }"
|
|
|
|
|
+ @click="selectGroup(group.id)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="group-item-content">
|
|
|
|
|
+ <span>{{ group.name }}</span>
|
|
|
|
|
+ <div class="group-item-actions">
|
|
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-edit" @click.stop="showGroupDialog(group)"></el-button>
|
|
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-delete" @click.stop="deleteGroup(group)"></el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-scrollbar>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 右侧人员列表 -->
|
|
|
|
|
+ <div class="employee-list-container">
|
|
|
|
|
+ <div class="employee-list-header">
|
|
|
|
|
+ <span>人员列表</span>
|
|
|
|
|
+ <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showEmployeeDialog()">新增人员</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="employee-list">
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :data="employeeList"
|
|
|
|
|
+ border
|
|
|
|
|
+ v-loading="employeeLoading"
|
|
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
|
|
+ :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column align="center" prop="name" label="姓名" width="150"></el-table-column>
|
|
|
|
|
+ <el-table-column align="center" prop="groupName" label="所属分组" width="200"></el-table-column>
|
|
|
|
|
+ <el-table-column align="center" label="操作" width="150">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <el-button size="small" @click="showEmployeeDialog(scope.row)">编辑</el-button>
|
|
|
|
|
+ <el-button size="small" type="danger" @click="deleteEmployee(scope.row)">删除</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 分组编辑/新增对话框 -->
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ :title="groupDialogTitle"
|
|
|
|
|
+ :visible.sync="groupDialogVisible"
|
|
|
|
|
+ width="500px"
|
|
|
|
|
+ :before-close="handleDialogClose"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="80px">
|
|
|
|
|
+ <el-form-item label="分组名称" prop="name">
|
|
|
|
|
+ <el-input v-model.trim="groupForm.name" placeholder="请输入分组名称" clearable></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="负责人" prop="managerId">
|
|
|
|
|
+ <el-select v-model="groupForm.managerId" filterable v-if="user.userNameNeedTranslate != '1'" clearable placeholder="请选择负责人" style="width: 100%">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in userList"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :label="item.name"
|
|
|
|
|
+ :value="item.id"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span style="float: left">{{ item.name }}</span>
|
|
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
|
|
|
|
|
+ </el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ <selectCat :size="'medium'" :filterable="true" :clearable="true" :widthStr="'380'" v-if="user.userNameNeedTranslate == '1'" :subject="userList" :subjectId="groupForm.managerId" :distinction="'7'" @selectCal="selectCal"></selectCat>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
|
+ <el-button @click="groupDialogVisible = false">取 消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="saveGroup" :loading="groupLoading">确 定</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 人员编辑/新增对话框 -->
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ :title="employeeDialogTitle"
|
|
|
|
|
+ :visible.sync="employeeDialogVisible"
|
|
|
|
|
+ width="500px"
|
|
|
|
|
+ :before-close="handleDialogClose"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-form ref="employeeForm" :model="employeeForm" :rules="employeeRules" label-width="80px">
|
|
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
|
|
+ <el-input v-model.trim="employeeForm.name" placeholder="请输入姓名" clearable></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="所属分组" prop="groupId">
|
|
|
|
|
+ <el-select v-model="employeeForm.groupId" placeholder="请选择分组" style="width: 100%;" clearable>
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="group in groupList"
|
|
|
|
|
+ :key="group.id"
|
|
|
|
|
+ :label="group.name"
|
|
|
|
|
+ :value="group.id"
|
|
|
|
|
+ ></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
|
+ <el-button @click="employeeDialogVisible = false">取 消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="saveEmployee" :loading="employeeLoading">确 定</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+// 自定义select组件
|
|
|
|
|
+import selectCat from "@/components/select.vue"
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'EmployeeManagement',
|
|
|
|
|
+ components: {
|
|
|
|
|
+ selectCat
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // 搜索条件
|
|
|
|
|
+ searchName: '',
|
|
|
|
|
+
|
|
|
|
|
+ // 分组相关
|
|
|
|
|
+ groupList: [],
|
|
|
|
|
+ selectedGroupId: null,
|
|
|
|
|
+ groupDialogVisible: false,
|
|
|
|
|
+ groupDialogTitle: '新增分组',
|
|
|
|
|
+ groupLoading: false,
|
|
|
|
|
+ groupForm: {
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ companyId: '',
|
|
|
|
|
+ managerId: ''
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 用户列表
|
|
|
|
|
+ userList: [],
|
|
|
|
|
+ groupRules: {
|
|
|
|
|
+ name: [
|
|
|
|
|
+ { required: true, message: '请输入分组名称', trigger: 'blur' },
|
|
|
|
|
+ { max: 50, message: '分组名称不能超过50个字符', trigger: 'blur' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 人员相关
|
|
|
|
|
+ employeeList: [],
|
|
|
|
|
+ employeeLoading: false,
|
|
|
|
|
+ employeeDialogVisible: false,
|
|
|
|
|
+ employeeDialogTitle: '新增人员',
|
|
|
|
|
+ employeeLoading: false,
|
|
|
|
|
+ employeeForm: {
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ groupId: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ employeeRules: {
|
|
|
|
|
+ name: [
|
|
|
|
|
+ { required: true, message: '请输入姓名', trigger: 'blur' },
|
|
|
|
|
+ { max: 50, message: '姓名不能超过50个字符', trigger: 'blur' }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ user() {
|
|
|
|
|
+ return JSON.parse(sessionStorage.user || '{}');
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.loadGroupList();
|
|
|
|
|
+ this.loadEmployeeList();
|
|
|
|
|
+ this.loadUserList();
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 加载分组列表
|
|
|
|
|
+ async loadGroupList() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const companyId = this.user.companyId;
|
|
|
|
|
+ const response = await this.postData('/employee-group/list', { companyId });
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.groupList = response.data || [];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '加载分组列表失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('加载分组列表失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 加载用户列表
|
|
|
|
|
+ async loadUserList() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await this.postData('/user/getSimpleActiveUserList', {});
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.userList = response.data || [];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '加载用户列表失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('加载用户列表失败:', error);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 加载人员列表
|
|
|
|
|
+ async loadEmployeeList() {
|
|
|
|
|
+ this.employeeLoading = true;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const companyId = this.user.companyId;
|
|
|
|
|
+ const params = { companyId };
|
|
|
|
|
+
|
|
|
|
|
+ if (this.selectedGroupId !== null) {
|
|
|
|
|
+ params.groupId = this.selectedGroupId;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.searchName.trim()) {
|
|
|
|
|
+ params.name = this.searchName.trim();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const response = await this.postData('/employee/list', params);
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.employeeList = response.data || [];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '加载人员列表失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('加载人员列表失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ this.employeeLoading = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 选择分组
|
|
|
|
|
+ selectGroup(groupId) {
|
|
|
|
|
+ this.selectedGroupId = groupId;
|
|
|
|
|
+ this.loadEmployeeList();
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 搜索
|
|
|
|
|
+ handleSearch() {
|
|
|
|
|
+ this.loadEmployeeList();
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 显示分组对话框
|
|
|
|
|
+ showGroupDialog(group = null) {
|
|
|
|
|
+ if (group) {
|
|
|
|
|
+ this.groupDialogTitle = '编辑分组';
|
|
|
|
|
+ this.groupForm = {
|
|
|
|
|
+ id: group.id,
|
|
|
|
|
+ name: group.name,
|
|
|
|
|
+ companyId: this.user.companyId,
|
|
|
|
|
+ managerId: group.managerId || ''
|
|
|
|
|
+ };
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.groupDialogTitle = '新增分组';
|
|
|
|
|
+ this.groupForm = {
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ companyId: this.user.companyId,
|
|
|
|
|
+ managerId: ''
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ this.groupDialogVisible = true;
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ if (this.$refs.groupForm) {
|
|
|
|
|
+ this.$refs.groupForm.clearValidate();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 保存分组
|
|
|
|
|
+ async saveGroup() {
|
|
|
|
|
+ this.$refs.groupForm.validate(async (valid) => {
|
|
|
|
|
+ if (!valid) return;
|
|
|
|
|
+
|
|
|
|
|
+ this.groupLoading = true;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await this.postData('/employee-group/addOrUpdate', this.groupForm);
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.$message.success('保存成功');
|
|
|
|
|
+ this.groupDialogVisible = false;
|
|
|
|
|
+ await this.loadGroupList();
|
|
|
|
|
+ // 如果当前选择的是该分组,重新加载人员列表
|
|
|
|
|
+ if (this.selectedGroupId === this.groupForm.id) {
|
|
|
|
|
+ this.loadEmployeeList();
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '保存失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('保存失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ this.groupLoading = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 删除分组
|
|
|
|
|
+ deleteGroup(group) {
|
|
|
|
|
+ this.$confirm(`确定删除分组 "${group.name}" 吗?`, '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await this.postData('/employee-group/delete', { id: group.id });
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.$message.success('删除成功');
|
|
|
|
|
+ await this.loadGroupList();
|
|
|
|
|
+ // 如果删除的是当前选中的分组,切换到全部
|
|
|
|
|
+ if (this.selectedGroupId === group.id) {
|
|
|
|
|
+ this.selectedGroupId = null;
|
|
|
|
|
+ this.loadEmployeeList();
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '删除失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('删除失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(() => {});
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 显示人员对话框
|
|
|
|
|
+ showEmployeeDialog(employee = null) {
|
|
|
|
|
+ if (employee) {
|
|
|
|
|
+ this.employeeDialogTitle = '编辑人员';
|
|
|
|
|
+ this.employeeForm = {
|
|
|
|
|
+ id: employee.id,
|
|
|
|
|
+ name: employee.name,
|
|
|
|
|
+ groupId: employee.groupId
|
|
|
|
|
+ };
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.employeeDialogTitle = '新增人员';
|
|
|
|
|
+ this.employeeForm = {
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ name: '',
|
|
|
|
|
+ groupId: this.selectedGroupId || ''
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ this.employeeDialogVisible = true;
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ if (this.$refs.employeeForm) {
|
|
|
|
|
+ this.$refs.employeeForm.clearValidate();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 保存人员
|
|
|
|
|
+ async saveEmployee() {
|
|
|
|
|
+ this.$refs.employeeForm.validate(async (valid) => {
|
|
|
|
|
+ if (!valid) return;
|
|
|
|
|
+
|
|
|
|
|
+ this.employeeLoading = true;
|
|
|
|
|
+ try {
|
|
|
|
|
+ const employeeData = {
|
|
|
|
|
+ ...this.employeeForm,
|
|
|
|
|
+ companyId: this.user.companyId
|
|
|
|
|
+ };
|
|
|
|
|
+ const response = await this.postData('/employee/addOrUpdate', employeeData);
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.$message.success('保存成功');
|
|
|
|
|
+ this.employeeDialogVisible = false;
|
|
|
|
|
+ await this.loadEmployeeList();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '保存失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('保存失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ this.employeeLoading = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 删除人员
|
|
|
|
|
+ deleteEmployee(employee) {
|
|
|
|
|
+ this.$confirm(`确定删除人员 "${employee.name}" 吗?`, '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await this.postData('/employee/delete', { id: employee.id });
|
|
|
|
|
+ if (response.code === 'ok') {
|
|
|
|
|
+ this.$message.success('删除成功');
|
|
|
|
|
+ await this.loadEmployeeList();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(response.msg || '删除失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ this.$message.error('删除失败');
|
|
|
|
|
+ console.error(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(() => {});
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 对话框关闭处理
|
|
|
|
|
+ handleDialogClose(done) {
|
|
|
|
|
+ this.$confirm('确定要关闭吗?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ done();
|
|
|
|
|
+ }).catch(() => {});
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 自定义组件事件回调
|
|
|
|
|
+ selectCal(obj) {
|
|
|
|
|
+ if (obj.distinction == '7') {
|
|
|
|
|
+ // 分组负责人选择
|
|
|
|
|
+ this.groupForm.managerId = obj.id;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 封装POST请求方法
|
|
|
|
|
+ postData(url, params) {
|
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
|
+ this.http.post(url, params,
|
|
|
|
|
+ (res) => {
|
|
|
|
|
+ resolve(res);
|
|
|
|
|
+ },
|
|
|
|
|
+ (error) => {
|
|
|
|
|
+ this.$message.error(error || '请求失败');
|
|
|
|
|
+ reject(error);
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+.employee-management {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+
|
|
|
|
|
+ .employee-management-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ padding-bottom: 15px;
|
|
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
|
|
+
|
|
|
|
|
+ .header-title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .header-search {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .employee-management-content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .group-list-container {
|
|
|
|
|
+ width: 250px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .group-list-header {
|
|
|
|
|
+ padding: 12px 15px;
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+
|
|
|
|
|
+ .el-button {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .group-list {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .group-item {
|
|
|
|
|
+ padding: 12px 15px;
|
|
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: background-color 0.3s;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ background-color: #ecf5ff;
|
|
|
|
|
+ color: #409eff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .group-item-content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .group-item-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 5px;
|
|
|
|
|
+ visibility: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .el-button {
|
|
|
|
|
+ padding: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover .group-item-actions {
|
|
|
|
|
+ visibility: visible;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .employee-list-container {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .employee-list-header {
|
|
|
|
|
+ padding: 12px 15px;
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .employee-list {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dialog-footer {
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|