| | |
| | | * @Author: lzhe lzhe@example.com |
| | | * @Date: 2024-03-26 10:28:33 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-04-08 11:03:11 |
| | | * @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"> |
| | | 千文科技 |
| | | <!-- 部门 --> |
| | | <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="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"/> |
| | |
| | | <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-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_show(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> |
| | |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage4" |
| | | :page-sizes="[100, 200, 300, 400]" |
| | | :page-size="100" |
| | | :page-sizes="[15, 50, 100]" |
| | | :page-size="15" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="400"> |
| | | :total="total"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | |
| | | <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-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="handleSuccess" @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 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, |
| | | total: 0, |
| | | status: "1", |
| | | total: "1", |
| | | keywords: "", |
| | | postId: "", |
| | | organizationCode: "00001" |
| | | postId: "", //postId |
| | | organizationCode: "" //组织code |
| | | }, |
| | | total: 0, |
| | | isSaveing: false, |
| | | groups: [], |
| | | departmentFrom: { |
| | | department: "" |
| | | }, |
| | | departmentVisibleRules: { |
| | | department:[ |
| | | {required: true, message: '请选择部门'} |
| | | ] |
| | | parentId:[{required: true, message: '请选择部门'}] |
| | | }, |
| | | departmentVisible: false, |
| | | dialog: { |
| | |
| | | input: '', |
| | | statusList: [], |
| | | input3: '', |
| | | tableData: [] |
| | | tableData: [], |
| | | selection: [], |
| | | departmentFrom: { |
| | | parentId: "" |
| | | } |
| | | } |
| | | }, |
| | | created(){ |
| | |
| | | }, |
| | | mounted(){ |
| | | this.getStatus(); |
| | | this.searchPerson(); //员工列表 |
| | | 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; |
| | | }) |
| | | 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) { |
| | |
| | | } |
| | | }) |
| | | this.tableData = res.data.records; |
| | | this.total = res.data.total; |
| | | } |
| | | }) |
| | | }, |
| | |
| | | }) |
| | | }, |
| | | 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.$refs.saveDialog.open('edit').setData(row) |
| | | }) |
| | | }, |
| | | //查看 |
| | | table_show(row){ |
| | | this.dialog.save = true |
| | | this.$nextTick(() => { |
| | | this.$refs.saveDialog.open('show').setData(row) |
| | | }) |
| | | //删除 |
| | | table_del(row) { |
| | | this.selectId = row.id; |
| | | this.delPersonModel = true; |
| | | }, |
| | | handleSelectionChange() {}, |
| | | delPerson() {}, |
| | | 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; |
| | | }else { |
| | | this.getOrganizationList(); |
| | | }else { //岗位 |
| | | this.searchData.total = '1'; |
| | | this.leftActive = false; |
| | | this.getPost(); |
| | | } |
| | | }, |
| | | handleSizeChange(val) { |
| | |
| | | padding-bottom: 8px; |
| | | } |
| | | .person-tree { |
| | | background-color: #d8e8e8; |
| | | padding: 4px 18px; |
| | | font-size: 14px; |
| | | font-weight: 400; |
| | | } |
| | | .person-tree div { |
| | | margin-bottom: 8px; |
| | | padding: 4px 18px; |
| | | cursor: pointer; |
| | | } |
| | | .right-top { |
| | | display: flex; |
| | |
| | | font-weight: bold; |
| | | padding-bottom: 12px; |
| | | margin-bottom: 8px; |
| | | height: 37px; |
| | | } |
| | | .searchStatus { |
| | | margin-right: 6px; |
| | |
| | | .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> |