9 changed files with 1112 additions and 3 deletions
@ -0,0 +1,20 @@ |
|||||
|
import request from '@/utils/request1' |
||||
|
|
||||
|
|
||||
|
//获取行政组织与人员混杂树列表
|
||||
|
export const getOrgAndManlist = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/govthreeaboutman', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//获取行政组织与人员混杂搜索列表
|
||||
|
export const getOrgAndManSearchlist = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/search_org_people', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,777 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
|
||||
|
|
||||
|
<!-- 角色列表 --> |
||||
|
<el-aside width="300px"> |
||||
|
<el-scrollbar > |
||||
|
<div style=" border-bottom: 1px solid #EEEEEE;"> |
||||
|
<el-select v-model="selectNAme" filterable placeholder="搜索" style="width:94%; margin-top: 5px; margin-bottom:10px;" @change="selectRoleNAme"> |
||||
|
<el-option key="0" label="全部" value=""></el-option> |
||||
|
<el-option |
||||
|
v-for="item in rolelistAll" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.name" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<el-row v-for="(rItem,rIndex) in rolelist" :key="rIndex" class="role_body" :class="listBlackColor[rIndex]== true?'active':''"> |
||||
|
<el-col :span="2" class="font_centent"> |
||||
|
<span class="el-icon-s-unfold"></span> |
||||
|
</el-col> |
||||
|
<el-col :span="18" class="font_left"> |
||||
|
<div class="roleTitle " @click="setupEmpower(rItem,rIndex)">{{rItem.name}}</div> |
||||
|
</el-col> |
||||
|
<el-col :span="4" class="font_right"> |
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-icon-more incon_body"></span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item @click.native="editcont(rItem)">编辑</el-dropdown-item> |
||||
|
<el-dropdown-item @click.native="delcont(rItem)">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-button type="primary" @click="addSystemRole" icon="el-icon-plus" style="width:94%; margin: 15px 0 15px 0;">添加角色</el-button> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
</el-aside> |
||||
|
|
||||
|
|
||||
|
<el-main> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="18" class="role_title_left"> |
||||
|
{{tableName}}（{{total}}人） |
||||
|
</el-col> |
||||
|
<el-col :span="6" class="role_title_right"> |
||||
|
<span>角色详情</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row style="border-bottom: 1px solid #EEEEEE;"> |
||||
|
<el-col :span="12"> |
||||
|
<el-button-group> |
||||
|
<el-button type="primary" size="mini" @click="addSystemRolePeople" icon="el-icon-plus" >添加成员</el-button> |
||||
|
<el-button type="danger" size="mini" @click="batchdeletion()" icon="el-icon-position" >批量移除</el-button> |
||||
|
</el-button-group> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form ref="searchForm" :inline="true" :model="searchFormData" label-width="80px" style="text-align: right;"> |
||||
|
<el-form-item style="margin-right:5px; margin-bottom:5px"> |
||||
|
<el-input style="width:130px" v-model="searchFormData.name" size="mini" placeholder="请输入姓名/工号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="margin-right:0px; margin-bottom:5px"> |
||||
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchSubmit">搜索</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
<template> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
:data="peopleList" |
||||
|
tooltip-effect="dark" |
||||
|
style="width: 100%" |
||||
|
@selection-change="handleSelectionChange"> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="number" |
||||
|
label="工号" |
||||
|
width="120"> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名" |
||||
|
width="120"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="departmenttitle" |
||||
|
label="部门" |
||||
|
show-overflow-tooltip> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<template> |
||||
|
<el-pagination |
||||
|
@current-change="handleCurrentChange" |
||||
|
layout="prev, pager, next" |
||||
|
:page-size="searchFormData.pagesize" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</template> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-main> |
||||
|
|
||||
|
|
||||
|
<!--新增角色--> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="addDialogForm" :before-close="closeAddDialog" title="新增" width="30%"> |
||||
|
<el-form ref="addForm" :model="addDiaFormDatal" :rules="addrules" label-width="80px" > |
||||
|
<el-form-item label="角色名称" prop="name"> |
||||
|
<el-input v-model="addDiaFormDatal.name" autocomplete="off" placeholder="请输入角色名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" style="margin-top:10px"> |
||||
|
<el-input-number v-model="addDiaFormDatal.sort" controls-position="right" :min="1" :max="999999999999" value="50" placeholder="请输入序号" ></el-input-number> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeAddDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterAddDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!--编辑角色--> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="editDialogForm" :before-close="closeEditDialog" title="新增" width="30%"> |
||||
|
<el-form ref="editForm" :model="editSystemRoleCont" :rules="addrules" label-width="80px" > |
||||
|
<el-form-item label="角色名称" prop="name"> |
||||
|
<el-input v-model="editSystemRoleCont.name" autocomplete="off" placeholder="请输入角色名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" style="margin-top:10px"> |
||||
|
<el-input-number v-model="editSystemRoleCont.sort" controls-position="right" :min="1" :max="999999999999" value="50" placeholder="请输入序号" ></el-input-number> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button size="small" @click="closeEditDialog">取 消</el-button> |
||||
|
<el-button size="small" type="primary" @click="enterEditDialog">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!--添加成员--> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="addRolePeople" :before-close="closeAddRolePeople" title="添加成员" width="50%" custom-class="dialogtop"> |
||||
|
<el-row type="flex" justify="space-between"> |
||||
|
<el-col class="biankuang" :span="12" style="padding-right: 10px;"> |
||||
|
|
||||
|
<el-row type="flex" justify="space-between"> |
||||
|
<el-col :span="24"> |
||||
|
<el-input |
||||
|
@input="searchOrgMan" |
||||
|
@clear="clearSearchOrgMan" |
||||
|
size="mini" |
||||
|
placeholder="搜索成员或部门" |
||||
|
v-model="searchDepartOrPeople" |
||||
|
clearable> |
||||
|
<i slot="prefix" class="el-input__icon el-icon-search"></i> |
||||
|
</el-input> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="look_hight" v-show="orgTreeOrOrgList"> |
||||
|
<organdmanthree ref="organdmanthree" @changeNum="sunThreeSend" :checkedList="checkedList" :addRolePeople="addRolePeople"></organdmanthree> |
||||
|
</div> |
||||
|
<div class="look_hight" v-show="!orgTreeOrOrgList"> |
||||
|
<organdmanliste @changeListNum="sunListSend" :searchDepartOrPeople="searchDepartOrPeople"></organdmanliste> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<!-- <el-col :span="1" class="biankuang"></el-col> |
||||
|
<el-col :span="1" class="biankuang left_line"></el-col> --> |
||||
|
<el-col class="biankuang yZhou left_line" :span="12"> |
||||
|
|
||||
|
<el-row v-for="(item,index) in checkCont" type="flex" justify="space-between" :key="index" class="orgManListcss"> |
||||
|
<el-col :span="3"> |
||||
|
|
||||
|
<div > |
||||
|
<i class="el-icon-s-finance" v-if="item.icon==''" ></i> |
||||
|
<el-image v-if="item.icon!=''" style="width: 20px; height: 20px; margin-top:5px" :src="item.icon" :preview-src-list="srcList"> |
||||
|
<div slot="placeholder" class="image-slot"> |
||||
|
加载中<span class="dot">...</span> |
||||
|
</div> |
||||
|
<div slot="error" class="image-slot"> |
||||
|
<i class="el-icon-picture-outline"></i> |
||||
|
</div> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
<el-col :span="19"><span>{{item.name}}</span></el-col> |
||||
|
<el-col :span="2" style="cursor: pointer;"><i @click="delChackOegMan(item,index)" class="el-icon-close"></i></el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<template #footer class="el_dialog__footer"> |
||||
|
<div class="dialog-footer "> |
||||
|
<el-button size="small" type="primary" @click="addOrgManData">确 定</el-button> |
||||
|
<el-button size="small" @click="closeAddRolePeople">取 消</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getRoleList,editRoleCont,addRoleCont,editRoleInfo,roleAboutPeople,delAboutPeople } from "@/api/systemaccredit/systemapi"; //行政组织相关 |
||||
|
|
||||
|
import { MessageBox, Message } from 'element-ui' |
||||
|
//引入页面 |
||||
|
import organdmanthree from "@/views/purview/organdmanthree.vue"; |
||||
|
import organdmanliste from "@/views/purview/organdmanliste.vue"; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
organdmanthree, |
||||
|
organdmanliste |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
checkedList:new Array, //被选中的值 |
||||
|
|
||||
|
orgTreeOrOrgList:true, //true：部门人员树；false：部门人员列表 |
||||
|
searchDepartOrPeople:'', |
||||
|
checkCont:new Array, |
||||
|
srcList:new Array, //图片预览 |
||||
|
total: 0, //记录总数 |
||||
|
searchFormData:{ |
||||
|
id:"", |
||||
|
name:'', |
||||
|
page:1, |
||||
|
pagesize:10, |
||||
|
}, //搜索条件 |
||||
|
// countPeople:0, //角色总人数 |
||||
|
selectNAme:"", |
||||
|
rolelistAll:new Array, //角色列表（下拉列表） |
||||
|
rolelist:new Array, //角色列表 |
||||
|
addDialogForm:false, //添加角色 |
||||
|
editDialogForm:false, //编辑角色 |
||||
|
addRolePeople:false, //角色添加成员 |
||||
|
listBlackColor:new Array, |
||||
|
tableName:"", |
||||
|
addDiaFormDatal:{ |
||||
|
name:"", |
||||
|
sort:50 |
||||
|
}, //角色对象 |
||||
|
// 添加时验证规则 |
||||
|
addrules: { |
||||
|
name: [{ required: true, message: '必填', trigger: 'blur' }], |
||||
|
}, |
||||
|
editSystemRoleCont:{ |
||||
|
id:"", |
||||
|
name:"", |
||||
|
sort:50 |
||||
|
}, |
||||
|
peopleList:new Array, //人员列表 |
||||
|
multipleSelection: new Array |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getRoleList() |
||||
|
// this.getRoleListAll() |
||||
|
}, |
||||
|
methods:{ |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
//获取角色列表 |
||||
|
async getRoleList(){ |
||||
|
const from = { |
||||
|
name: this.selectNAme, |
||||
|
}; |
||||
|
const res = await getRoleList(from); |
||||
|
res.data.forEach((item,index)=>{ |
||||
|
if(index == 0){ |
||||
|
this.listBlackColor[index] = true |
||||
|
this.tableName = item.name |
||||
|
this.getRolePeopelList(item.id) |
||||
|
}else{ |
||||
|
this.listBlackColor[index] = false |
||||
|
} |
||||
|
}) |
||||
|
this.rolelist = res.data |
||||
|
if(this.rolelistAll.length <= 0){ |
||||
|
this.rolelistAll = res.data |
||||
|
} |
||||
|
// console.log("获取角色列表----》",res.data,this.listBlackColor) |
||||
|
}, |
||||
|
async getRoleListAll(){ |
||||
|
|
||||
|
const res = await getRoleList(); |
||||
|
this.rolelistAll = res.data |
||||
|
// console.log("获取角色列表----》",res.data) |
||||
|
}, |
||||
|
//搜索角色 |
||||
|
selectRoleNAme(){ |
||||
|
this.getRoleList() |
||||
|
}, |
||||
|
|
||||
|
//配置授权 |
||||
|
setupEmpower(data,index){ |
||||
|
this.tableName = data.name |
||||
|
// console.log("配置授权----》",data,index) |
||||
|
// this.listBlackColor[index] = true |
||||
|
this.listBlackColor.forEach((item,ind)=>{ |
||||
|
if(index != ind){ |
||||
|
this.listBlackColor[ind] = false |
||||
|
}else{ |
||||
|
this.listBlackColor[ind] = true |
||||
|
} |
||||
|
}) |
||||
|
this.getRolePeopelList(data.id) |
||||
|
// console.log("配置授权----》",this.listBlackColor) |
||||
|
this.$forceUpdate(); //强制刷新视图 |
||||
|
}, |
||||
|
//添加角色 |
||||
|
addSystemRole(){ |
||||
|
this.addDialogForm = true |
||||
|
}, |
||||
|
// 添加框关闭 |
||||
|
closeAddDialog() { |
||||
|
this.initAddForm() |
||||
|
this.editSystemRoleCont.sort=50 |
||||
|
this.addDialogForm = false |
||||
|
}, |
||||
|
// 重置添加表单 |
||||
|
initAddForm() { |
||||
|
this.$refs.addForm.resetFields() |
||||
|
this.editSystemRoleCont = { |
||||
|
name:"", |
||||
|
sort:50 |
||||
|
} |
||||
|
}, |
||||
|
//提交添加数据 |
||||
|
enterAddDialog(){ |
||||
|
this.$refs.addForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
this.addDiaFormDatal.sort =parseInt(this.addDiaFormDatal.sort) |
||||
|
const res = await addRoleCont(this.addDiaFormDatal) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '添加成功', |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getRoleList(); |
||||
|
this.closeAddDialog(); |
||||
|
this.getRoleListAll() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//编辑角色 |
||||
|
editcont(data){ |
||||
|
// console.log("编辑角色--->") |
||||
|
this.editDialogForm = true |
||||
|
this.editSystemRoleCont = { |
||||
|
id:data.id.toString(), |
||||
|
name:data.name, |
||||
|
sort:data.sort |
||||
|
} |
||||
|
}, |
||||
|
// 编辑框关闭 |
||||
|
closeEditDialog() { |
||||
|
this.iniEditForm() |
||||
|
this.addDiaFormDatal.sort=50 |
||||
|
this.editDialogForm = false |
||||
|
}, |
||||
|
// 重置编辑表单 |
||||
|
iniEditForm() { |
||||
|
this.$refs.editForm.resetFields() |
||||
|
this.editSystemRoleCont = { |
||||
|
id:"", |
||||
|
name:"", |
||||
|
sort:50 |
||||
|
} |
||||
|
}, |
||||
|
//提交编辑角色表单 |
||||
|
enterEditDialog(){ |
||||
|
this.$refs.editForm.validate(async valid => { |
||||
|
if (valid) { |
||||
|
this.editSystemRoleCont.sort =parseInt(this.editSystemRoleCont.sort) |
||||
|
this.editSystemRoleCont.id = this.editSystemRoleCont.id.toString() |
||||
|
const res = await editRoleInfo(this.editSystemRoleCont) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg, |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getRoleList(); |
||||
|
this.closeEditDialog(); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
//删除角色 |
||||
|
delcont(data){ |
||||
|
this.$confirm('此操作将永久删除该角色, 是否继续操作?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
center: true |
||||
|
}).then(() => { |
||||
|
|
||||
|
const delfrom = { |
||||
|
id: data.id.toString(), |
||||
|
state:3, |
||||
|
istrue:2 |
||||
|
}; |
||||
|
this.delSystemRoleCont(delfrom) |
||||
|
}); |
||||
|
}, |
||||
|
//执行删除操作 |
||||
|
async delSystemRoleCont(data){ |
||||
|
const res = await editRoleCont(data); |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg, |
||||
|
showClose: true |
||||
|
}) |
||||
|
} |
||||
|
this.getRoleList(); |
||||
|
this.getRoleListAll() |
||||
|
}, |
||||
|
//获取角色成员列表 |
||||
|
async getRolePeopelList(roleId){ |
||||
|
if(roleId){ |
||||
|
this.searchFormData.id = roleId.toString() |
||||
|
} |
||||
|
const res = await roleAboutPeople(this.searchFormData); |
||||
|
// console.log("获取角色成员列表--->",res.data) |
||||
|
this.peopleList = res.data.list |
||||
|
this.total= res.data.total |
||||
|
if(!this.total){ |
||||
|
this.total=0 |
||||
|
} |
||||
|
if(res.data.count == 0){ |
||||
|
if(this.searchFormData.page > 1){ |
||||
|
this.searchFormData.page =this.searchFormData.page - 1 |
||||
|
} |
||||
|
} |
||||
|
if(res.code != 0){ |
||||
|
if(this.searchFormData.page > 1){ |
||||
|
this.searchFormData.page =this.searchFormData.page - 1 |
||||
|
this.getRolePeopelList() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// 改变page |
||||
|
handleCurrentChange(val) { |
||||
|
this.searchFormData.page=val |
||||
|
this.getRolePeopelList() |
||||
|
}, |
||||
|
//查询 |
||||
|
searchSubmit(){ |
||||
|
this.getRolePeopelList() |
||||
|
}, |
||||
|
//批量删除 |
||||
|
batchdeletion(){ |
||||
|
let peopleList = this.$refs.multipleTable.selection |
||||
|
// console.log("此操作将永久删除, 是否继续?",peopleList) |
||||
|
|
||||
|
this.$confirm('此操作将永久删除, 是否继续?', '是否删除？', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(async() => { |
||||
|
if(!peopleList || peopleList.length <= 0){ |
||||
|
this.$message({ |
||||
|
type: 'warning', |
||||
|
message: "您没有选择要删除的数据！", |
||||
|
showClose: true |
||||
|
}) |
||||
|
}else{ |
||||
|
let manKsy = new Array |
||||
|
peopleList.forEach((item,id)=>{ |
||||
|
manKsy.push(item.key) |
||||
|
}); |
||||
|
const sendData = { |
||||
|
id:this.searchFormData.id, |
||||
|
mankey:manKsy |
||||
|
} |
||||
|
const res = await delAboutPeople(sendData); |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: res.msg, |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.getRolePeopelList() |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// |
||||
|
}, |
||||
|
//搜索行政组织和人员 |
||||
|
searchOrgMan(){ |
||||
|
// console.log("搜索行政组织和人员",this.searchDepartOrPeople) |
||||
|
if(this.searchDepartOrPeople){ |
||||
|
this.orgTreeOrOrgList = false |
||||
|
|
||||
|
// console.log("搜索行政组织和人员11111111") |
||||
|
}else{ |
||||
|
this.orgTreeOrOrgList = true |
||||
|
this.$emit('sendSunData') |
||||
|
// console.log("搜索行政组织和人员22222",this.checkedList) |
||||
|
this.$refs.organdmanthree.setCheckedKeysChange(this.checkedList) |
||||
|
} |
||||
|
}, |
||||
|
//清空搜索框 |
||||
|
async clearSearchOrgMan(){ |
||||
|
// console.log("清空搜索框",this.searchDepartOrPeople) |
||||
|
}, |
||||
|
//关闭添加角色成员弹窗 |
||||
|
closeAddRolePeople(){ |
||||
|
this.addRolePeople = false; |
||||
|
}, |
||||
|
//添加角色成员 |
||||
|
async addSystemRolePeople(){ |
||||
|
// const res = await getOrgAndManlist() |
||||
|
// console.log("获得行政组织及人员",res) |
||||
|
this.addRolePeople = true; |
||||
|
}, |
||||
|
//添加成员数据处理 |
||||
|
async addOrgManData(){}, |
||||
|
|
||||
|
//组织人员树向父组件传值 |
||||
|
sunThreeSend(contList,idList){ |
||||
|
this.checkCont = contList |
||||
|
this.checkedList = idList |
||||
|
// console.log("子传值-------1------>",contList,idList) |
||||
|
}, |
||||
|
//搜索列表向父级传递值 |
||||
|
sunListSend(val){ |
||||
|
// console.log("搜索列表向父级传递值-------1------>",val) |
||||
|
if(this.checkedList && this.checkedList.length > 0){ |
||||
|
if(this.checkedList.indexOf(val.id) == -1){ //此项不存在 |
||||
|
this.checkedList.push(val.id) |
||||
|
this.checkCont.push(val) |
||||
|
} |
||||
|
}else{ |
||||
|
this.checkedList.push(val.id) |
||||
|
this.checkCont.push(val) |
||||
|
} |
||||
|
this.searchDepartOrPeople="" |
||||
|
this.searchOrgMan() |
||||
|
}, |
||||
|
//删除选中的值 |
||||
|
delChackOegMan(val,index){ |
||||
|
// this.checkCont.splice(index,1) |
||||
|
|
||||
|
// console.log("子传值-------333333------>",val,index,this.checkedList) |
||||
|
let guoDuId = new Array //剩余ID |
||||
|
let guoDuList = new Array //剩余选中项目 |
||||
|
let superiorId = new Array //上级 |
||||
|
let sunId = new Array //下级 |
||||
|
superiorId.push(val.parentId) |
||||
|
sunId.push(val.id) |
||||
|
// console.log("子传值-------5555555----->",superiorId) |
||||
|
this.checkCont.forEach(item=>{ |
||||
|
//判断内容是否为要删除的内容 |
||||
|
// console.log("子传值-------444444444----->",val,item) |
||||
|
if(item.id != val.id){ |
||||
|
//判断是否为要删除内容的上级 |
||||
|
if(superiorId.indexOf(item.id) == -1){ //不存在父级数组中 |
||||
|
|
||||
|
|
||||
|
if(sunId.indexOf(item.parentId) == -1){ //不是他的子集 |
||||
|
guoDuId.push(item.id) |
||||
|
guoDuList.push(item) |
||||
|
}else{ |
||||
|
if(sunId.indexOf(item.id) == -1){ //子集中不存在 |
||||
|
sunId.push(item.id) //添加到子集库中 |
||||
|
} |
||||
|
} |
||||
|
if(superiorId.indexOf(item.parentId) == -1){ |
||||
|
superiorId.push(item.parentId) |
||||
|
} |
||||
|
}else{ |
||||
|
// superiorId.push(item.parentId) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
this.checkCont= guoDuList |
||||
|
this.checkedList = guoDuId |
||||
|
|
||||
|
// console.log("子传值-------22222------>",guoDuList,guoDuId,superiorId) |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.el-aside { |
||||
|
text-align: center; |
||||
|
height: calc(103% - 2px); |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
border-right: 1px solid rgb(220, 223, 230); |
||||
|
margin: 2px 0 0 0; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
.el-main{ |
||||
|
height: 105%; |
||||
|
} |
||||
|
.el-container { |
||||
|
height:calc(100% - 50px); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.el-scrollbar { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.el-scrollbar__wrap { |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
.xxCard{ |
||||
|
|
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
.roleTitle{ |
||||
|
color: #000000; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.el-table__row:hover > td { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
/* 用来设置当前页面element全局table 选中某行时的背景色*/ |
||||
|
.el-table__body tr.current-row>td{ |
||||
|
background-color: #ff784a !important; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.incon_body{ |
||||
|
position: relative; |
||||
|
font-size: 25px; |
||||
|
transform:rotate(90deg); |
||||
|
margin-top: 5px; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
} |
||||
|
.role_body{ |
||||
|
height: 35px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
} |
||||
|
.role_body:hover{ |
||||
|
background-color: #EEF0F3; |
||||
|
} |
||||
|
.role_body:hover .incon_body{ |
||||
|
color: #7FA5D2; |
||||
|
} |
||||
|
.role_body.active{ |
||||
|
background-color:#4A77AC; |
||||
|
} |
||||
|
.role_body.active{ |
||||
|
color:#FFFFFF; |
||||
|
} |
||||
|
.role_body.active .incon_body{ |
||||
|
color:#7FA5D2; |
||||
|
} |
||||
|
.role_body.active:hover .incon_body{ |
||||
|
color:#7FA5D2; |
||||
|
} |
||||
|
.role_body.active .roleTitle{ |
||||
|
color:#FFFFFF; |
||||
|
} |
||||
|
.role_body.active .font_centent{ |
||||
|
color:#7FA5D2; |
||||
|
} |
||||
|
.font_left{ |
||||
|
line-height: 35px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.font_centent{ |
||||
|
line-height: 35px; |
||||
|
color: #7DA4D2; |
||||
|
} |
||||
|
.font_right{ |
||||
|
text-align: right; |
||||
|
|
||||
|
} |
||||
|
.role_title_left{ |
||||
|
font-size: 20px; |
||||
|
text-align: left; |
||||
|
line-height: 35px; |
||||
|
} |
||||
|
.role_title_right{ |
||||
|
font-size: 12px; |
||||
|
text-align: right; |
||||
|
color: #0C4C7F; |
||||
|
line-height: 35px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.biankuang{ |
||||
|
|
||||
|
height: 450px; |
||||
|
|
||||
|
} |
||||
|
.yZhou{ |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
div::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
height: 5px; |
||||
|
} |
||||
|
div::-webkit-scrollbar-thumb { |
||||
|
border-radius: 10px; |
||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
||||
|
opacity: 0.2; |
||||
|
|
||||
|
} |
||||
|
div::-webkit-scrollbar-track { |
||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
||||
|
border-radius: 0; |
||||
|
|
||||
|
} |
||||
|
.left_line{ |
||||
|
border-left: 1px solid #EEEEEE; |
||||
|
} |
||||
|
.look_hight{ |
||||
|
height: 410px; |
||||
|
margin-top: 10px; |
||||
|
overflow: auto; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
.el-dialog__body{ |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
.el_dialog__footer{ |
||||
|
background-color: #F8F8F8; |
||||
|
border-top: 1px solid #E4E6E9; |
||||
|
padding: 5px 10px; |
||||
|
} |
||||
|
.orgManListcss{ |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
} |
||||
|
.orgManListcss:hover{ |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
background-color: #F5F7FA; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-card class="box-card"> |
||||
|
<el-form ref="searchForm" :model="searchFormData" label-width="80px"> |
||||
|
<el-form-item label="角色名称"> |
||||
|
<el-input v-model="searchFormData.name" placeholder="请输入角色名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态"> |
||||
|
<el-select v-model="form.region" placeholder="请选择角色状态"> |
||||
|
<el-option label="启用" value="1"></el-option> |
||||
|
<el-option label="禁用" value="2"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="searckClick">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-card class="box-card"> |
||||
|
|
||||
|
</el-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
searchFormData:{ |
||||
|
name:"" |
||||
|
}, //搜索条件 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
//查询角色 |
||||
|
searckClick(){}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.box-card{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,112 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--人员列表--> |
||||
|
<template v-if="peopleList"> |
||||
|
<el-row type="flex" justify="space-between"> |
||||
|
<el-col class="listHead" :span="24">人员</el-col> |
||||
|
</el-row> |
||||
|
<el-row type="flex" justify="space-between" class="row_body" v-for="item in peopleList" :key="item.identify"> |
||||
|
<el-col class="listTitle" :span="3"> |
||||
|
<div @click="chackData(item)"> |
||||
|
<i class="el-icon-s-finance" v-if="item.icon==''" ></i> |
||||
|
<el-image v-if="item.icon!=''" style="width: 20px; height: 20px; margin-top:5px" :src="item.icon" :preview-src-list="srcList" @click="lookIcon(item.icon)" class="imgDiv"> |
||||
|
<div slot="placeholder" class="image-slot"> |
||||
|
加载中<span class="dot">...</span> |
||||
|
</div> |
||||
|
<div slot="error" class="image-slot"> |
||||
|
<i class="el-icon-picture-outline"></i> |
||||
|
</div> |
||||
|
</el-image> |
||||
|
|
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="15"><div @click="chackData(item)">{{ item.name }}</div></el-col> |
||||
|
<el-col :span="6"> |
||||
|
{{ item.number }} |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
<!--部门列表--> |
||||
|
<template v-if="orgList"> |
||||
|
<el-row type="flex" justify="space-between"> |
||||
|
<el-col class="listHead" :span="24">部门</el-col> |
||||
|
</el-row> |
||||
|
<el-row type="flex" justify="space-between" class="row_body" v-for="item in orgList" :key="item.identify"> |
||||
|
<el-col class="listTitle" :span="24"> |
||||
|
<span @click="chackData(item)">{{item.all_name}}</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getOrgAndManSearchlist } from "@/api/systemaccredit/systemhrapi"; //Hr系统相关API |
||||
|
export default { |
||||
|
props:["searchDepartOrPeople"], |
||||
|
data() { |
||||
|
return { |
||||
|
srcList:[], //大图预览 |
||||
|
isChack:[], //选中项 |
||||
|
fenGeLine:false, //分割线 |
||||
|
peopleList:[], //人员列表 |
||||
|
orgList:[], //行政组织列表 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
watch:{ |
||||
|
searchDepartOrPeople(){ |
||||
|
this.getOrgAndPeoList() //获取人员列表 |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
//查看图片 |
||||
|
lookIcon(data){ |
||||
|
this.srcList=[]; |
||||
|
this.srcList.push(data) |
||||
|
}, |
||||
|
//获取列表数据 |
||||
|
async getOrgAndPeoList(){ |
||||
|
if(this.searchDepartOrPeople){ |
||||
|
const sendData = { |
||||
|
name:this.searchDepartOrPeople |
||||
|
} |
||||
|
const res = await getOrgAndManSearchlist(sendData) |
||||
|
this.peopleList = res.data.people |
||||
|
this.orgList = res.data.org |
||||
|
// if(this.peopleList.length > 0 && this.orgList.length > 0) { |
||||
|
// this.fenGeLine = true |
||||
|
// } |
||||
|
// console.log("获取人员列表",res.data) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//选中项 |
||||
|
chackData(val){ |
||||
|
// console.log("选中项目",val) |
||||
|
this.$emit('changeListNum',val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.row_body{ |
||||
|
line-height: 30px; |
||||
|
padding: 0px 0 0px 0; |
||||
|
white-space:nowrap; |
||||
|
} |
||||
|
.row_body:hover{ |
||||
|
background-color: #4A77AC; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.listTitle{ |
||||
|
padding-left: 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.listHead{ |
||||
|
font-size: 16px; |
||||
|
line-height: 40px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-tree |
||||
|
:data="orgPeopleData" |
||||
|
:props="defaultProps" |
||||
|
@check-change="handleNodeClick" |
||||
|
show-checkbox |
||||
|
node-key="id" |
||||
|
ref="tree" |
||||
|
highlight-current |
||||
|
:expand-on-click-node="false" |
||||
|
:check-on-click-node="true" |
||||
|
> |
||||
|
|
||||
|
<el-row slot-scope="{ node, data }"> |
||||
|
<el-col :span="20"> |
||||
|
<i class="el-icon-s-finance" v-if="data.icon==''" ></i> |
||||
|
<el-image v-if="data.icon!=''" :src="data.icon" :preview-src-list="srcList" @click="lookIcon(data.icon)" class="imgDiv"> |
||||
|
<div slot="placeholder" class="image-slot"> |
||||
|
加载中<span class="dot">...</span> |
||||
|
</div> |
||||
|
<div slot="error" class="image-slot"> |
||||
|
<i class="el-icon-picture-outline"></i> |
||||
|
</div> |
||||
|
</el-image> |
||||
|
{{ node.label }} |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
|
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
</el-tree> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getOrgAndManlist } from "@/api/systemaccredit/systemhrapi"; //Hr系统相关API |
||||
|
|
||||
|
export default { |
||||
|
props:['checkedList','addRolePeople'], |
||||
|
data() { |
||||
|
return { |
||||
|
defaultProps: { |
||||
|
children: 'child', |
||||
|
label: 'name', |
||||
|
icon:'icon' |
||||
|
}, |
||||
|
orgPeopleData:[], //行政组织与人员树 |
||||
|
srcList:[], //大图预览 |
||||
|
allOrgAndMan:{}, //所有行政组织和 |
||||
|
setKeyVal:[] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getOrgAndPeoplelist() |
||||
|
// console.log("checkedList-------------------->",this.setKeyVal) |
||||
|
}, |
||||
|
watch:{ |
||||
|
checkedList:{ |
||||
|
handler(newVal){ |
||||
|
// console.log("newVal"); |
||||
|
// console.log(newVal); |
||||
|
this.setKeyVal=newVal; |
||||
|
this.setCheckedKeysChange(newVal) |
||||
|
}, |
||||
|
deep: true |
||||
|
}, |
||||
|
|
||||
|
addRolePeople(){ |
||||
|
this.resetChecked() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
//获取组织成员树 |
||||
|
async getOrgAndPeoplelist(){ |
||||
|
const sendData = { |
||||
|
id:"313", |
||||
|
level:0, |
||||
|
all:1 |
||||
|
} |
||||
|
const res = await getOrgAndManlist(sendData) |
||||
|
// console.log("获得行政组织及人员-------------->",res.data) |
||||
|
this.orgPeopleData = res.data.three |
||||
|
this.allOrgAndMan = res.data.list |
||||
|
// console.log("获得行政组织及人员---------234234----->",this.orgPeopleData) |
||||
|
}, |
||||
|
handleNodeClick(res){ |
||||
|
// console.log("获得行政组织及人员-----3333------>",res) |
||||
|
let xuanze = this.$refs.tree.getCheckedKeys() |
||||
|
// console.log("获得行政组织及人员-----44444------>",xuanze) |
||||
|
// console.log("获得行政组织及人员-----5555------>",this.$refs.tree) |
||||
|
let giveParentData = new Array |
||||
|
this.allOrgAndMan.forEach((item,index) =>{ |
||||
|
if(xuanze.indexOf(item.id) != -1){ |
||||
|
giveParentData.push(item) |
||||
|
} |
||||
|
}); |
||||
|
this.$emit('changeNum',giveParentData,xuanze) |
||||
|
}, |
||||
|
|
||||
|
//查看图片 |
||||
|
lookIcon(data){ |
||||
|
this.srcList=[]; |
||||
|
this.srcList.push(data) |
||||
|
// console.log("查看图片") |
||||
|
}, |
||||
|
//清除选中项目 |
||||
|
resetChecked() { |
||||
|
this.$refs.tree.setCheckedKeys([]); |
||||
|
}, |
||||
|
//通过Key设置选中项目 |
||||
|
setCheckedKeysChange(newVal) { |
||||
|
// console.log("通过Key设置选中项目------------->3") |
||||
|
if(newVal.length > 0) { |
||||
|
// console.log("通过Key设置选中项目------------->1",newVal) |
||||
|
this.$refs.tree.setCheckedKeys(newVal); |
||||
|
}else{ |
||||
|
// console.log("通过Key设置选中项目------------->2") |
||||
|
this.resetChecked(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.imgDiv{ |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue