|
|
@@ -1,6 +1,6 @@
|
|
|
<script setup>
|
|
|
import DepartWrap from './components/DepartWrap.vue'
|
|
|
-import { Search, Plus } from '@element-plus/icons-vue'
|
|
|
+import { Search, CloseBold,InfoFilled } from '@element-plus/icons-vue'
|
|
|
import { apiSystemUser, apiSystemRole } from '@/api/system'
|
|
|
import { reactive } from 'vue';
|
|
|
|
|
|
@@ -103,6 +103,36 @@ function handleSubmitForm(){
|
|
|
show.value = false
|
|
|
})
|
|
|
}
|
|
|
+const isShowDetail = ref(false)
|
|
|
+const curUser = ref({})
|
|
|
+const authList = ref([])
|
|
|
+const defaultCheckedKeys = ref([])
|
|
|
+const checkboxTree=ref(null)
|
|
|
+function getUserDetail(row){
|
|
|
+ curUser.value = row
|
|
|
+ apiSystemRole.roleAuthList({
|
|
|
+ SysRoleId:row.SysRoleId
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ authList.value=disabledTree(res.Data.List||[])
|
|
|
+ const arr=res.Data?.ChoiceList||[]
|
|
|
+ const hArr=res.Data?.HalfChoiceList||[]
|
|
|
+ defaultCheckedKeys.value=arr.filter(i=>{
|
|
|
+ return !hArr.includes(i)
|
|
|
+ })
|
|
|
+ checkboxTree.value?.setCheckedKeys(defaultCheckedKeys.value)
|
|
|
+ isShowDetail.value = true
|
|
|
+ })
|
|
|
+}
|
|
|
+function disabledTree(arr){
|
|
|
+ arr.forEach(item => {
|
|
|
+ item.Disabled=true
|
|
|
+ if(item.Children){
|
|
|
+ disabledTree(item.Children)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return arr
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
@@ -129,6 +159,7 @@ function handleSubmitForm(){
|
|
|
highlight-current-row
|
|
|
element-loading-text="数据加载中..."
|
|
|
v-loading="tableLoading"
|
|
|
+ @row-click="getUserDetail"
|
|
|
>
|
|
|
<el-table-column
|
|
|
v-for="column in tableColOpt"
|
|
|
@@ -188,6 +219,89 @@ function handleSubmitForm(){
|
|
|
@current-change="handlePageChange"
|
|
|
style="margin-top: 30px; justify-content: flex-end"
|
|
|
/>
|
|
|
+ <div class="user-detail" v-if="isShowDetail">
|
|
|
+ <div class="close_btn" @click="isShowDetail=false">
|
|
|
+ <el-icon :size="16"><CloseBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="detail-info">
|
|
|
+ <div class="top">
|
|
|
+ <img src="@/assets/imgs/default_user.png"/>
|
|
|
+ <span class="name">{{ curUser.SysRealName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div>
|
|
|
+ <p>手机号：</p>
|
|
|
+ <p>{{ curUser.Phone }}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>邮箱：</p>
|
|
|
+ <p>{{curUser.Email}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>部门/分组：</p>
|
|
|
+ <p>{{ curUser.SysDepartmentName }}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>工号：</p>
|
|
|
+ <p>{{curUser.SysUserName}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>职级：</p>
|
|
|
+ <p>{{ curUser.PositionName }}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 职级数字
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ content="60以上为部门负责人级别"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-icon :size="14"><InfoFilled /></el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ ：
|
|
|
+ </p>
|
|
|
+ <p>{{ curUser.PositionCode }}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>在职状态：</p>
|
|
|
+ <p>{{ curUser.IsEnabled?'在职':'离职' }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-popover
|
|
|
+ placement="left"
|
|
|
+ :title="curUser.SysRealName+'权限'"
|
|
|
+ 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> -->
|
|
|
+ <el-tree v-if="authList.length"
|
|
|
+ ref="checkboxTree"
|
|
|
+ :data="authList"
|
|
|
+ :props="{ label: 'Name', children: 'Children', disabled: 'Disabled' }"
|
|
|
+ :default-expand-all="true"
|
|
|
+ show-checkbox
|
|
|
+ node-key="SysMenuId"
|
|
|
+ :default-checked-keys="defaultCheckedKeys"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ <span v-else style="font-size:16px;color:#999;margin-left:20px;">暂无权限</span>
|
|
|
+ </div>
|
|
|
+ <template #reference>
|
|
|
+ <el-button link type="primary"> 查看权限</el-button>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -222,6 +336,8 @@ function handleSubmitForm(){
|
|
|
gap: 30px;
|
|
|
.user-wrap {
|
|
|
flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
.user-top-box{
|
|
|
display: flex;
|
|
|
@@ -229,6 +345,52 @@ function handleSubmitForm(){
|
|
|
}
|
|
|
.table-wrap {
|
|
|
margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ flex:1;
|
|
|
+ .user-detail{
|
|
|
+ width: 350px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: hidden;
|
|
|
+ z-index: 3;
|
|
|
+ padding:20px;
|
|
|
+ .close_btn {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .detail-info{
|
|
|
+ height: 100%;
|
|
|
+ overflow-y:auto;
|
|
|
+ .top{
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width:28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:20px;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ position:absolute;
|
|
|
+ left:20px;
|
|
|
+ bottom:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
cxmo