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