用户详情弹窗

src/views/system_manage/depart_manage/components/ModifyNodeDialog.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        编辑树节点弹窗
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/system_manage/depart_manage/components/ModifyUserDialog.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        编辑用户弹窗
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/system_manage/depart_manage/components/MoveDepartDialog.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        移动分组弹窗
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/system_manage/depart_manage/components/ResetPassDialog.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        重置密码弹窗
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/system_manage/depart_manage/components/UserDetail.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { departInterence } from '@/api/api.js'
+const props = defineProps({
+    isShow: Boolean,
+    userInfo:Object,
+    researchGroup:Array
+});
+const emit = defineEmits(["closeDetail"]);
+let userObj = {}
+let isShowUserdtl = ref(false)
+watch(()=>props.isShow,(newval)=>{
+    if(newval){
+        setUserObj()
+    }else{
+        isShowUserdtl.value = false
+    }
+},{immediate:true})
+watch(()=>props.userInfo.RoleId,()=>{
+    if(props.isShow){
+        setUserObj()
+    }
+},{deep:true})
+async function setUserObj(){
+    const {user,direct} = props.userInfo
+    userObj = {
+        name:user.RealName || '暂无',
+        tel:user.Mobile || '暂无',
+        depart:user.DepartmentGroup || '暂无',
+        post:user.Position || '暂无',
+        roleId:user.RoleId || 0,
+        role:user.RoleName || '暂无',
+        auth:user.Authority===2?'小组负责人':user.Authority===1?'部门负责人':'无',
+        account:user.AdminName,
+        pwd:user.Password,
+        employeeNumber:user.EmployeeId || '暂无',
+        direct:changeResearchGroupIdsToDirect(direct,'tag_name'),
+        province:user.Province,
+        city:user.City,
+    }
+    await getAuthList(user.RoleId||0)
+    isShowUserdtl.value = true
+}
+let authList = []
+async function getAuthList(id){
+    departInterence.getAuthList({
+        RoleId:Number(id)
+    }).then(res => {
+        if(res.Ret === 200) {
+            let list = [];
+            /* 校验是否有选中的权限列表 如果有显示已勾选的权限 没有就不显示权限列表 */
+            let Bol = res.Data.List.some(item => {
+                return item.CheckList&&item.CheckList.length !=0
+            })
+            if(Bol) {
+                res.Data.List.length&&res.Data.List.forEach(item => {
+                    let obj = {
+                        checkAll:item.CheckList.length===item.Child.length?true:false,
+                        ...item,
+                    }
+                    list.push(obj)
+                })
+            }
+            authList = list;
+        }
+    })
+}
+//转换研究员研究方向分组数据,用于编辑的回显
+function changeResearchGroupIdsToDirect(GroupIds,keyWord){
+    let direct = []
+    GroupIds.forEach(item=>{
+        direct.push(getResearchGroupByKeyword(item,keyWord))
+    })
+    return direct
+}
+function getResearchGroupByKeyword(GroupId,keyWord = "research_group_id"){
+    const getResearchGroupOption = (list, value) => {
+        for (let i in list) {
+            //排除掉一级
+        if (list[i].tag_id == value&&!list[i].classify_name) {
+            return [list[i]];
+        }
+        if (list[i].tags) {
+            let node = getResearchGroupOption(list[i].tags, value);
+            if (node !== undefined) {
+            return node.concat(list[i]);
+            }
+        }
+        }
+    }
+    const answer = getResearchGroupOption(props.researchGroup, GroupId)||[];
+    return answer.map((i) => i[keyWord]).reverse();
+}
+</script>
+
+<template>
+    <div class="right_shadow" v-if="isShowUserdtl">
+        <div class="shadow_top">
+            <img src="@/assets/img/set_m/user_img.png" alt="" style="width:38px;height:38px;margin-right:10px;">
+            <span style="margin-right:50px;font-size:16px;width:100px;display:inline-block;" class="text_oneLine">{{userObj.name}}</span>
+        </div>
+        <ul class="shadow_info">
+            <li class="info_item">
+                <h4 class="item_tit">手机号：</h4>
+                <span>{{userObj.tel}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">部门/分组：</h4>
+                <span>{{userObj.depart}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">工号：</h4>
+                <span>{{userObj.employeeNumber}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">职务：</h4>
+                <span>{{userObj.post}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">角色：</h4>
+                <span>{{userObj.role}}</span>
+            </li>
+            <li class="info_item" v-if="userObj.depart.includes('FICC研究部')">
+                <h4 class="item_tit">研究方向：</h4>
+                <span>{{userObj.direct.map(i=>i.join('/')).join('、')||'暂无'}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">工作地点：</h4>
+                <span>{{userObj.city?userObj.province+' '+userObj.city:'暂无'}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">管理权限：</h4>
+                <span>{{userObj.auth||'暂无'}}</span>
+            </li>
+            <li class="info_item">
+                <h4 class="item_tit">登录账号/密码：</h4>
+                <span>{{userObj.account+'/***'}}</span>
+            </li>
+        </ul>
+        <el-popover
+            placement="left"
+            :title="userObj.name+'权限'"
+            width="560"
+            trigger="hover">
+            <div class="auth_cont" style="padding:30px 0;max-height: 70vh; overflow-y: auto;">
+                <template v-if="authList.length">
+                    <div v-for="item in authList" :key="item" class="menu_item">
+                        <el-checkbox  v-model="item.checkAll" disabled>{{item.Name}}</el-checkbox>
+                        <div style="margin: 15px 0; padding:24px;border:1px solid #DCDFE6">
+                            <el-checkbox-group v-model="item.CheckList" disabled>
+                                <el-checkbox v-for="list in item.Child" :label="list.MenuId" :key="list">{{list.Name}}</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </div>
+                </template>
+                <span v-else style="font-size:16px;color:#999;margin-left:20px;">暂无权限</span>
+            </div>
+            <template #reference>
+                <span style="font-size:16px;color:#409EFF;cursor:pointer;">查看权限</span>
+            </template>
+        </el-popover>
+        <img src="~@/assets/img/ppt_m/close.png" alt="" class="close_btn" @click="emit('closeDetail')">
+    </div>
+</template>
+
+<style scoped lang="scss">
+.right_shadow {
+    width: 350px;
+    background: #fff;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: hidden;
+    z-index: 10;
+    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ececec;
+    padding: 60px 30px;
+
+    .shadow_top {
+        display: flex;
+        align-items: center;
+    }
+
+    .shadow_info {
+        margin-top: 30px;
+        margin-bottom: 40px;
+        font-size: 16px;
+        color: #333;
+        height: calc(100% - 120px);
+        overflow-y: auto;
+
+        .info_item {
+            margin-bottom: 20px;
+
+            .item_tit {
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    .close_btn {
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        cursor:pointer;
+    }
+}
+</style>

src/views/system_manage/depart_manage/departManage.vue

@@ -1,9 +1,13 @@
 <script setup>
-import { ref,reactive } from 'vue'
+import { ref } from 'vue'
 import {useDepart} from './hooks/use-depart'
 import { departInterence } from '@/api/api.js'
+
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+import UserDetail from './components/UserDetail.vue'
 
 const {
         defaultDepart,defaultGroup,departArr,tableParams,tableData,groupTeamId,
@@ -13,8 +17,10 @@ const {
 const {checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
 const {act_node,clickNode,initDepart,openNodeDialog,removeNode} = useTreeEvent()
 const {
+        isShowUserdtl,userObj,
         changeStatus,getUserDetail,
-        openUserDialog,openResetPassDialog,openMoveDepartDialog
+        openUserDialog,openResetPassDialog,openMoveDepartDialog,
+        getResearchGroup,researchGroup
     } = useDepartTable()
 
 const defaultProp = {label:'DepartmentName',children:'Child'}
@@ -39,7 +45,13 @@ function setShareCustomDepartId(){
     }
 }
 //同步每刻
-function synchronizationMEIKE(){}
+function synchronizationMEIKE(){
+    departInterence.syncCompanyProfile().then(res=>{
+        if(res.Ret == 200){
+            ElMessage.success('同步成功')
+        }
+    })
+}
 
 
 //获取用户数据
@@ -48,6 +60,8 @@ getTableUser()
 getDepartArr()
 //设置shareCustomDepartmentId的值
 setShareCustomDepartId()
+//获取研究方向分组列表
+getResearchGroup()
 </script>
 
 <template>
@@ -172,7 +186,14 @@ setShareCustomDepartId()
                     </el-pagination>
                 </el-config-provider>
                 <!-- 用户详情右侧弹窗 -->
-                
+                <transition name="fade">
+                    <UserDetail 
+                        :isShow="isShowUserdtl"
+                        :userInfo="userObj"
+                        :researchGroup="researchGroup"
+                        @closeDetail="isShowUserdtl = false"
+                    />
+                </transition>
             </div>
         </div>
     </div>
@@ -350,49 +371,6 @@ setShareCustomDepartId()
                 border-radius: 4px;
                 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
 
-                .right_shadow {
-                    width: 350px;
-                    background: #fff;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    bottom: 0;
-                    overflow-y: hidden;
-                    z-index: 2;
-                    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
-                    border: 1px solid #ececec;
-                    padding: 60px 30px;
-
-                    .shadow_top {
-                        display: flex;
-                        align-items: center;
-                    }
-
-                    .shadow_info {
-                        margin-top: 30px;
-                        margin-bottom: 40px;
-                        font-size: 16px;
-                        color: #333;
-                        height: calc(100% - 120px);
-                        overflow-y: auto;
-
-                        .info_item {
-                            margin-bottom: 20px;
-
-                            .item_tit {
-                                margin-bottom: 10px;
-                            }
-                        }
-                    }
-
-                    .close_btn {
-                        width: 16px;
-                        height: 16px;
-                        position: absolute;
-                        right: 20px;
-                        top: 20px;
-                    }
-                }
             }
         }
     }

src/views/system_manage/depart_manage/hooks/use-depart.js

@@ -64,6 +64,8 @@ export function useDepart(){
     }
     //用户表格事件
     function useDepartTable(){
+        let isShowUserdtl = ref(false)
+        let userObj = ref(null)
         //打开添加/编辑用户弹窗 (原项目 addUser editUser 合成一个)
         function openUserDialog(){}
         //打开重置密码弹窗
@@ -89,16 +91,34 @@ export function useDepart(){
             }
         }
         //查询用户详情
-        function getUserDetail(){}
+        async function getUserDetail(data){
+            const res = await departInterence.getResearchGroupByAdminId({
+                AdminId:data.AdminId
+            })
+            if(res.Ret!==200) return 
+            //用户详情数据直接传入组件中,数据结构转换在组件内部处理
+            userObj.value = {
+                user:data,
+                direct:res.Data||[]
+            }
+            isShowUserdtl.value = true
+        }
+        //获取研究方向分组列表
+        let researchGroup = ref([])
+        function getResearchGroup(){
+            departInterence.getTagTree().then(res=>{
+                if(res.Ret===200){
+                    researchGroup.value = res.Data||[]
+                }
+            })
+        }
 
         return {
+            isShowUserdtl,userObj,
             openUserDialog,openResetPassDialog,openMoveDepartDialog,
-            modifyUser,
-            delUser,
-            changeStatus,
-            moveDepart,
-            resetUserPassWord,
-            getUserDetail
+            modifyUser,delUser,moveDepart,resetUserPassWord,
+            getUserDetail,changeStatus,
+            getResearchGroup,researchGroup
         }
     }