10 changed files with 443 additions and 44 deletions
@ -0,0 +1,88 @@ |
|||||
|
import request from '@/utils/request'; |
||||
|
import { AxiosPromise } from 'axios'; |
||||
|
|
||||
|
export interface shareOrgInfo{ |
||||
|
id:number |
||||
|
name:string |
||||
|
superior:number |
||||
|
level:number |
||||
|
status:boolean |
||||
|
child :shareOrgInfo[] |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 搜索条件 |
||||
|
*/ |
||||
|
export interface parsArchList extends PageQuery{ |
||||
|
page:number, |
||||
|
pagesize:number |
||||
|
adminorg?:number; //行政组织
|
||||
|
} |
||||
|
|
||||
|
export interface memberInfo{ |
||||
|
id:number, |
||||
|
name:string, |
||||
|
icon:string, |
||||
|
company:number, |
||||
|
maindeparment:number, |
||||
|
sunmaindeparment:number, |
||||
|
adminorg:number, |
||||
|
state:number, |
||||
|
keystr:string, |
||||
|
positionname :string, |
||||
|
maindeparmentname:string |
||||
|
} |
||||
|
|
||||
|
export type shareArchivesList = PageResult<memberInfo[]> |
||||
|
|
||||
|
/** |
||||
|
* 获取行政组织树 |
||||
|
*/ |
||||
|
export function getOrgTreeList(data: {orgid?:number}): AxiosPromise<shareOrgInfo[]>{ |
||||
|
return request({ |
||||
|
url: '/hrapi/org/govnewthreeing', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取人员档案 |
||||
|
*/ |
||||
|
export function getArchivesListPage(data?: parsArchList): AxiosPromise<shareArchivesList> { |
||||
|
return request({ |
||||
|
url: '/hrapi/staff/archiveslistcont', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取文档成员权限列表 |
||||
|
*/ |
||||
|
export function getPermitedList(uid:string,data:{uuid:string}): AxiosPromise<{permited:string[],infos:string[]}> { |
||||
|
return request({ |
||||
|
url: '/hxpan/api/share/permits', |
||||
|
method: 'post', |
||||
|
headers: { |
||||
|
'Identifier':uid, |
||||
|
'Content-Type': 'application/x-www-form-urlencoded' |
||||
|
}, |
||||
|
data: data |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 保存文档成员权限修改 |
||||
|
*/ |
||||
|
export function postPermitedList(uid:string,data?:{permitList:string,permitInfos:string, update:string,uid:string,uuid:string,len:number}){ |
||||
|
return request({ |
||||
|
url: '/hxpan/api/share/permits', |
||||
|
method: 'post', |
||||
|
headers: { |
||||
|
'Identifier':uid, |
||||
|
'Content-Type': 'application/x-www-form-urlencoded' |
||||
|
}, |
||||
|
data: data |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
|
||||
|
import { ElDialog } from 'element-plus'; |
||||
|
|
||||
|
const props = withDefaults(defineProps<{ |
||||
|
url:string, |
||||
|
closeFunc:()=>void, //父级只需销毁组件 |
||||
|
}>(),{}) |
||||
|
|
||||
|
onMounted(()=>{}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-dialog :model-value="true" :style="{height: '90%',width:'90%'}" v-on:close="closeFunc()"> |
||||
|
<template #default> |
||||
|
<iframe id="preivew" width="100%" height="100%" :src="props.url"></iframe> |
||||
|
</template> |
||||
|
|
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style> |
||||
|
/* dialog的body内容样式设置*/ |
||||
|
.el-dialog__body{ |
||||
|
height: 90%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.el-dialog{ |
||||
|
/* 让整个弹出窗口位置更高一些*/ |
||||
|
--el-dialog-margin-top:7vh; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,156 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { |
||||
|
getOrgTreeList, |
||||
|
getArchivesListPage, |
||||
|
shareOrgInfo, |
||||
|
memberInfo, |
||||
|
getPermitedList, |
||||
|
postPermitedList} from '@/api/hr/people/share_ctrol' |
||||
|
import { MessageBox } from '@element-plus/icons-vue/dist/types'; |
||||
|
|
||||
|
import { ElDialog, ElMessageBox,TableInstance } from 'element-plus'; |
||||
|
|
||||
|
const props = withDefaults(defineProps<{ |
||||
|
uid:string, //当前用户的uuid |
||||
|
uuid:string, //文档的uuid |
||||
|
confirmFunc?:(data:string[],infos:string[])=>void, //父级组件完全接管提交流程,组件不在做相关处理 |
||||
|
closeFunc:(refresh?:boolean)=>void, //父级只需销毁组件 |
||||
|
}>(),{}) |
||||
|
|
||||
|
const treeData =ref<shareOrgInfo[]>([]) // 组织结构树的数据源 |
||||
|
const members=ref<memberInfo[]>([]) //tablelist's data |
||||
|
const permited=new Set<string>() //文档成员的id列表,用集合结构为了快速实现增删修改 |
||||
|
const permitedInfos=new Set<string>() //文档成员的姓名职位信息集合,为了实现与成员列表的同步修改 |
||||
|
const tableMembersRef=ref<TableInstance>() //table组件的引用,为了实现初始选中状态 |
||||
|
|
||||
|
|
||||
|
function onNodeClick(data:shareOrgInfo){ |
||||
|
getArchivesListPage({adminorg:data.id, page:1,pagesize:13}).then(resp=>{ |
||||
|
if(resp.data.count >200){ |
||||
|
ElMessageBox.alert("人数超过200,请按部门分配权限") |
||||
|
return |
||||
|
} |
||||
|
members.value=resp.data.list |
||||
|
//设置默认选中的人员 |
||||
|
members.value.forEach(row => { |
||||
|
if (permited.has('p0'+row.keystr)) { |
||||
|
// 确保 row-key 正确并且数据一致,手动选中行, 还要设置:reserve-selection="true"!!! |
||||
|
tableMembersRef.value!.toggleRowSelection(row) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onSavePermChange(){ |
||||
|
let _list = permited.keys().toArray().filter(val=>val!=='') //成员的key |
||||
|
let _infos = permitedInfos.keys().toArray().filter(val=>val!=='') //成员的姓名和部门信息 |
||||
|
|
||||
|
//由父级组件自主处理,并自动清理本弹窗组件 |
||||
|
if(props.confirmFunc&&_list){ |
||||
|
props.confirmFunc(_list,_infos) |
||||
|
props.closeFunc() //关闭销毁 |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
//btoa 是浏览器默认base64码工具 |
||||
|
postPermitedList(props.uid,{ |
||||
|
permitList: btoa(_list.join("|")), |
||||
|
permitInfos:_infos.join("|"), |
||||
|
update: "true", |
||||
|
uid: props.uid, |
||||
|
uuid: props.uuid, |
||||
|
len: _list.length |
||||
|
}).then(resp=>{ |
||||
|
props.closeFunc(true) |
||||
|
}).catch(()=>{ |
||||
|
ElMessageBox.alert("处理失败") |
||||
|
return |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function onManualSelect(select:[],row:memberInfo){ |
||||
|
if(permited.has('p0'+row.keystr)){ //取消 |
||||
|
permited.delete('p0'+row.keystr) |
||||
|
permitedInfos.delete(`${row.name}-${row.maindeparmentname}-${row.positionname}`) |
||||
|
}else{ |
||||
|
permited.add('p0'+row.keystr) //添加 |
||||
|
permitedInfos.add(`${row.name}-${row.maindeparmentname}-${row.positionname}`) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onSelectionAll(news:memberInfo[]){ |
||||
|
if(news.length>0){ |
||||
|
news.forEach((item)=>{ |
||||
|
permited.add('p0'+item.keystr) |
||||
|
permitedInfos.add(`${item.name}-${item.maindeparmentname}-${item.positionname}`) |
||||
|
}) |
||||
|
}else{ |
||||
|
news.forEach((item)=>{ |
||||
|
permited.delete('p0'+item.keystr) |
||||
|
permitedInfos.delete(`${item.name}-${item.maindeparmentname}-${item.positionname}`) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(()=>{ |
||||
|
//在批量分享文件的时候,是没有uuid的,可以避免服务器的错误提示:uuid should not null |
||||
|
if(props.uuid!==""){ |
||||
|
getPermitedList(props.uid,{uuid:props.uuid}).then(resp=>{ |
||||
|
resp.data?.permited?.forEach(item=>{ |
||||
|
permited.add(item) //userUuids constitue the permited list |
||||
|
}) |
||||
|
resp.data?.infos?.forEach(item=>{ |
||||
|
permitedInfos.add(item) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
getOrgTreeList({}).then(resp=>{ |
||||
|
treeData.value=resp.data |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-dialog :model-value="true" :style="{'max-height': '650px'}" v-on:close="closeFunc()"> |
||||
|
<template #header> |
||||
|
<span>权限管理</span> |
||||
|
</template> |
||||
|
<div style="display: grid;grid-template-columns:1fr 1fr;"> |
||||
|
<div class="menus_tree"> |
||||
|
<el-tree |
||||
|
ref="treeRef" |
||||
|
key="id" |
||||
|
:data="treeData" |
||||
|
node-key="uuid" |
||||
|
:style="{maxHeight:'500px','overflow-y': 'auto'}" |
||||
|
:props="{label: 'name',children:'child',isLeaf:'dir'}" |
||||
|
:default-expanded-keys="['root']" |
||||
|
@node-click="onNodeClick" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="tablelist"> |
||||
|
<el-table ref="tableMembersRef" |
||||
|
:data="members" |
||||
|
:row-key="row => row.keystr" |
||||
|
style="overflow-y: auto;height: 500px;" |
||||
|
@select="onManualSelect" |
||||
|
@select-all="onSelectionAll" |
||||
|
> |
||||
|
<el-table-column type="selection" :reserve-selection="true" width="30" /> |
||||
|
<el-table-column property="name" label="成员"></el-table-column> |
||||
|
<el-table-column property="positionname" label="职位"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="closeFunc()">取消</el-button> |
||||
|
<el-button type="primary" @click="onSavePermChange">保存</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
Loading…
Reference in new issue