| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-03-26 10:28:33 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-04-09 20:48:16 |
| | | * @LastEditTime: 2024-04-10 15:37:41 |
| | | * @FilePath: /smart-web/src/views/master/person/main/index.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | |
| | | <el-input v-model="input" placeholder="请输入内容" size="small"></el-input> |
| | | </div> |
| | | <div class="person-tree"> |
| | | <div v-for="(item,index) in titleList" :data-id="item.id" v-if="leftActive" :class="{treeActive: item.active}" @click="selectbtn(index)">{{item.name}}({{item.peopleNum}})</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" /> |
| | | <!-- 岗位 --> |
| | | <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="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-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> |
| | |
| | | <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess" @closed="dialog.save=false"></save-dialog> |
| | | </template> |
| | | <script> |
| | | 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", |
| | |
| | | current: 1, |
| | | size: 15, |
| | | status: "1", |
| | | total: "0", |
| | | total: "1", |
| | | keywords: "", |
| | | postId: "", //postId |
| | | organizationCode: "" //组织code |
| | |
| | | department: "" |
| | | }, |
| | | departmentVisibleRules: { |
| | | department:[ |
| | | {required: true, message: '请选择部门'} |
| | | ] |
| | | parentId:[{required: true, message: '请选择部门'}] |
| | | }, |
| | | departmentVisible: false, |
| | | dialog: { |
| | |
| | | statusList: [], |
| | | input3: '', |
| | | tableData: [], |
| | | selection: [] |
| | | selection: [], |
| | | departmentFrom: { |
| | | parentId: "" |
| | | } |
| | | } |
| | | }, |
| | | created(){ |
| | |
| | | this.getOrganizationList(); //部门 |
| | | }, |
| | | components: { |
| | | saveDialog |
| | | 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; |
| | |
| | | }) |
| | | }, |
| | | departmentSubmit() { |
| | | this.departmentVisible=false; //部门调整 |
| | | 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.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) { |
| | |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | } |
| | | .treeActive { |
| | | background-color: #d8e8e8; |
| | | } |
| | | .person-tree div { |
| | | margin-bottom: 8px; |
| | | padding: 4px 18px; |
| | |
| | | line-height: 20px; |
| | | margin-right: 6px; |
| | | } |
| | | .exportBtn { |
| | | margin-left:8px; |
| | | margin-right:8px; |
| | | } |
| | | </style> |