1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/master/person/main/personPerson.vue

@@ -2,30 +2,36 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-09 18:29:10
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @LastEditTime: 2024-06-03 17:07:14
 * @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 :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">
            <div v-for="item in organizationList" :data-id="item.id">{{item.name}}</div>
            <!-- 部门 -->
            <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">部门：千文科技</div>
            <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-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>
@@ -34,77 +40,81 @@
               </el-input>
            </div>
         </div>
         <div class="right-bottom"> 
         <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 ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef"
               @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
               <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>
                     <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>
                     <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>
                     <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>
                     <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>
                     <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>
                     <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="[100, 200, 300, 400]"
               :page-size="100"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            <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-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="department">
                  <el-select v-model="departmentFrom.department" style="width: 100%">
                     <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                  </el-select>
               <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>
         <el-button @click="departmentVisible = false">取 消</el-button>
         <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保
            存</el-button>
      </template>
   </el-dialog>
   <!-- 删除 -->
@@ -120,271 +130,414 @@
         </div>
      </template>
   </el-dialog>
	
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess" @closed="dialog.save=false"></save-dialog>

   <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess"
      @closed="dialog.save = false"></save-dialog>
</template>
<script>
   import saveDialog from './save'
   export default {
      name: "personPerson",
      data(){
         return {
            organizationList: [],
            delPersonModel: false,
            searchIcon: "el-icon-search",
            searchData: {
               current: 1,
               size: 15,
               status: "1",
               keywords: "",
               postId: "",  //postId
               organizationCode: "00001"  //组织code
            },
            total: 0,
            isSaveing: false,
            groups: [],
            departmentFrom: {
               department: ""
            },
            departmentVisibleRules: {
               department:[
                  {required: true, message: '请选择部门'}
               ]
            },
            departmentVisible: false,
            dialog: {
               save: false
            },
            leftActive: true,
            input: '',
            statusList: [],
            input3: '',
            tableData: []
         }
      },
      created(){
			
      },
      mounted(){
         this.getStatus();
         this.searchPerson();
         this.getOrganizationList();  //部门
      },
      components: {
         saveDialog
      },
      methods: {
         getOrganizationList() {  //部门
            this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res=> {
               if(res.code == 200) {
                  this.organizationList = res.data;
               }
            })
import importTable from '@/layout/components/importTable.vue'
import saveDialog from './save'
export default {
   name: "personPerson",
   data() {
      return {
         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
         },
         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.searchPerson();
                  this.getOrganizationList();
               }
            })
         total: 0,
         isSaveing: false,
         groups: [],
         departmentFrom: {
            department: ""
         },
         personHandleSuccess() {
            this.searchPerson();
         departmentVisibleRules: {
            parentId: [{ required: true, message: '请选择部门' }]
         },
         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;
               }
            })
         departmentVisible: false,
         dialog: {
            save: false
         },
         getStatus() {  //获取全部账号
            this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res=> {
               if(res.code == 200) {
                  this.statusList = res.data;
               }
            })
         },
         departmentSubmit() {
            this.departmentVisible=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() {},
         delPerson() {},
         changeDepartment() {
            this.departmentVisible = true;
         },
         changeTab(name) {
            if(name == 1) {
               this.leftActive = true;
            }else {
               this.leftActive = false;
            }
         },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
         },
         handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
         leftActive: true,
         input: '',
         statusList: [],
         input3: '',
         tableData: [],
         selection: [],
         departmentFrom: {
            parentId: ""
         }
      }
   },
   created() {

   },
   mounted() {
      this.getStatus();
      this.getOrganizationList();  //部门
   },
   components: {
      saveDialog, importTable
   },
   methods: {
      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: #3b8e8e;
      color: #fff;
   }
   .person-left-search {
      padding-top: 8px;
      padding-bottom: 8px;
   }
   .person-tree {
      background-color: #d8e8e8;
      padding: 4px 18px;
      font-size: 14px;
      font-weight: 400;
   }
   .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;
   }
   .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;
   }
.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>