|
@@ -1,48 +1,69 @@
|
|
|
<script setup>
|
|
|
-import { ref,reactive } from 'vue'
|
|
|
+import { ref } from 'vue'
|
|
|
import {useDepart} from './hooks/use-depart'
|
|
|
-import { departInterence } from '@/api/api.js';
|
|
|
+import { departInterence } from '@/api/api.js'
|
|
|
|
|
|
-const {defaultDepart,defaultGroup,tablePrams,groupTeamId} = useDepart()
|
|
|
-const {useTreeMove,useTreeEvent} = useDepart()
|
|
|
+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'
|
|
|
+import ModifyUserDialog from './components/ModifyUserDialog.vue'
|
|
|
+
|
|
|
+const {
|
|
|
+ defaultDepart,defaultGroup,departArr,tableParams,tableData,groupTeamId,
|
|
|
+ getDepartArr,getTableUser,
|
|
|
+ useTreeMove,useTreeEvent,useDepartTable
|
|
|
+ } = useDepart()
|
|
|
const {checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
|
|
|
-const {act_node,clickNode,openNodeDialog,removeNode} = useTreeEvent()
|
|
|
+const {act_node,clickNode,initDepart,openNodeDialog,removeNode} = useTreeEvent()
|
|
|
+const {
|
|
|
+ isShowUserdtl,userObj,
|
|
|
+ changeStatus,getUserDetail,
|
|
|
+ openResetPassDialog,openMoveDepartDialog,
|
|
|
+ getResearchGroup,researchGroup,
|
|
|
+ isModifyUserShow,openUserDialog,
|
|
|
+ } = useDepartTable()
|
|
|
|
|
|
-//重置部门选中
|
|
|
-function initDepart(){}
|
|
|
-//部门数据
|
|
|
-let departArr = ref([])
|
|
|
const defaultProp = {label:'DepartmentName',children:'Child'}
|
|
|
-//获取部门结构
|
|
|
-async function getDepartArr(){
|
|
|
- const res = await departInterence.getDepartList()
|
|
|
- if(res.Ret!==200) return
|
|
|
- const list = res.Data.List||[]
|
|
|
- //给节点增加unicodeKey
|
|
|
- departArr.value = list.map(depart=>{
|
|
|
- depart.unicodeKey='depart_'+depart.DepartmentId
|
|
|
- depart.parentKey = 0
|
|
|
- if(depart.Child){
|
|
|
- depart.Child = depart.Child.map(group=>{
|
|
|
- group.unicodeKey = 'group_'+group.DepartmentId
|
|
|
- group.parentKey = depart.unicodeKey
|
|
|
- if(group.Child){
|
|
|
- group.Child = group.Child.map(team=>{
|
|
|
- team.unicodeKey = 'team_'+team.DepartmentId
|
|
|
- team.parentKey = group.unicodeKey
|
|
|
- return team
|
|
|
- })
|
|
|
- }
|
|
|
- return group
|
|
|
- })
|
|
|
+const tableColumns = [
|
|
|
+ { label:"姓名", key:"RealName" },{ label:"账号", key:"AdminName" },{ label:"手机号", key:"Mobile"},
|
|
|
+ { label:"角色", key:"RoleName" },{ label:"部门/分组", key:"DepartmentGroup" },{ label:"状态", key:"Enabled"}
|
|
|
+]
|
|
|
+let isShowloadding = ref('')
|
|
|
+//切换表格页码
|
|
|
+function handleCurrentChange(page){
|
|
|
+ tableParams.pageNo = page
|
|
|
+ getTableUser()
|
|
|
+}
|
|
|
+
|
|
|
+let shareCustomDepartmentId = ref(0)
|
|
|
+function setShareCustomDepartId(){
|
|
|
+ // 不同环境下 共享客户组的DepartmentId不一样
|
|
|
+ if(process.env.NODE_ENV == 'development'||process.env.NODE_ENV == 'test'){
|
|
|
+ shareCustomDepartmentId.value = 61
|
|
|
+ }else if(process.env.NODE_ENV == 'production'){
|
|
|
+ shareCustomDepartmentId.value = 37
|
|
|
+ }
|
|
|
+}
|
|
|
+//同步每刻
|
|
|
+function synchronizationMEIKE(){
|
|
|
+ departInterence.syncCompanyProfile().then(res=>{
|
|
|
+ if(res.Ret == 200){
|
|
|
+ ElMessage.success('同步成功')
|
|
|
}
|
|
|
- return depart
|
|
|
})
|
|
|
}
|
|
|
-getDepartArr()
|
|
|
|
|
|
-let shareCustomDepartmentId = ref(0)
|
|
|
|
|
|
+//获取用户数据
|
|
|
+getTableUser()
|
|
|
+//获取部门结构
|
|
|
+getDepartArr()
|
|
|
+//设置shareCustomDepartmentId的值
|
|
|
+setShareCustomDepartId()
|
|
|
+//获取研究方向分组列表
|
|
|
+getResearchGroup()
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -50,7 +71,7 @@ let shareCustomDepartmentId = ref(0)
|
|
|
<div class="left_cont">
|
|
|
<div class="company_top" @click="initDepart">
|
|
|
<img src="@/assets/img/set_m/home_ico.png" alt="" style="width:30px;height:30px;">
|
|
|
- <span :class="!defaultGroup&&!defaultDepart?'act':''">部门信息</span>
|
|
|
+ <span :class="(!defaultGroup&&!defaultDepart)?'act':''">部门信息</span>
|
|
|
</div>
|
|
|
<el-tree
|
|
|
ref="departTree"
|
|
@@ -69,10 +90,10 @@ let shareCustomDepartmentId = ref(0)
|
|
|
<span class="custom-tree-node" @click="clickNode(node,data)">
|
|
|
<span>{{ node.label }}</span>
|
|
|
<span style="display:flex;align-items:center;" v-show="act_node===data.unicodeKey">
|
|
|
- <img src="~@/assets/img/data_m/move_ico.png" alt="" @click.stop>
|
|
|
- <img src="~@/assets/img/set_m/add.png" alt="" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsDepartment">
|
|
|
- <img src="~@/assets/img/set_m/add.png" alt="" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
|
|
|
- <img src="~@/assets/img/set_m/edit.png" alt="" @click.stop="openNodeDialog('edit',data,node)">
|
|
|
+ <img src="~@/assets/img/data_m/move_ico.png" alt="" class="icon-img" @click.stop>
|
|
|
+ <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsDepartment">
|
|
|
+ <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
|
|
|
+ <img src="~@/assets/img/set_m/edit.png" alt="" class="icon-img" @click.stop="openNodeDialog('edit',data,node)">
|
|
|
<el-popconfirm
|
|
|
@onConfirm="removeNode(node,data)"
|
|
|
confirmButtonText='删除'
|
|
@@ -98,9 +119,91 @@ let shareCustomDepartmentId = ref(0)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right_cont">
|
|
|
-
|
|
|
+ <div class="right_cont_top">
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="openUserDialog('add',{})">添加用户</el-button>
|
|
|
+ <el-button type="primary" @click="synchronizationMEIKE" style="margin-left: 26px;">同步每刻</el-button>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ placeholder="姓名/账号/手机号搜索"
|
|
|
+ v-model="tableParams.searchTxt"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ clearable
|
|
|
+ @input="initDepart"
|
|
|
+ style="max-width:359px">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="right_cont_bot">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ @row-click="getUserDetail"
|
|
|
+ v-loading="isShowloadding"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ highlight-current-row border
|
|
|
+ >
|
|
|
+ <el-table-column v-for="column in tableColumns" :key="column.key"
|
|
|
+ :prop="column.key"
|
|
|
+ :label="column.label"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="{row}">
|
|
|
+ <span v-if="column.key==='Enabled'"
|
|
|
+ :style="{color:row.Enabled===0?'#FF0000':null}"
|
|
|
+ >{{row.Enabled===0?'禁用':'启用'}}</span>
|
|
|
+ <span v-else-if="column.key==='RealName'">
|
|
|
+ <el-tag
|
|
|
+ v-if="row.LabelVal"
|
|
|
+ :style="row.LabelVal==1||row.LabelVal==2?'color:#fff;background:#409EFF':'color:#409EFF;background:#ECF5FF'"
|
|
|
+ style="position:absolute;left:10px"
|
|
|
+ >{{
|
|
|
+ row.LabelVal==1?'超管'
|
|
|
+ :row.LabelVal==2?'管理员'
|
|
|
+ :row.LabelVal==3?'部门经理'
|
|
|
+ :row.LabelVal==4?'组长':'主管'
|
|
|
+ }}</el-tag>
|
|
|
+ <span style="position: relative;">{{row.RealName}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else>{{row[column.key]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="260">
|
|
|
+ <template #default="{row}">
|
|
|
+ <div style="color:#4099ef; font-size:24px;display: flex;gap:0 10px;">
|
|
|
+ <span class="editsty" @click.stop="openUserDialog('edit',row)">编辑</span>
|
|
|
+ <span class="editsty" @click.stop="openResetPassDialog(row)">重置密码</span>
|
|
|
+ <span class="editsty" @click.stop="openMoveDepartDialog(row)">移动分组</span>
|
|
|
+ <span
|
|
|
+ class="editsty"
|
|
|
+ @click.stop="changeStatus(row)"
|
|
|
+ >{{row.Enabled===0?'启用':'禁用'}}</span>
|
|
|
+ <!-- <span class="deletesty" @click.stop="delUser(row)">删除</span> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-config-provider :locale="zhCn">
|
|
|
+ <el-pagination background layout="total,prev,pager,next,jumper" :current-page="tableParams.pageNo"
|
|
|
+ :page-size="tableParams.pageSize" :total="tableParams.total"
|
|
|
+ @current-change="handleCurrentChange" style="margin-top: 60px; justify-content: flex-end;">
|
|
|
+ </el-pagination>
|
|
|
+ </el-config-provider>
|
|
|
+ <!-- 用户详情右侧弹窗 -->
|
|
|
+ <transition name="fade">
|
|
|
+ <UserDetail
|
|
|
+ v-if="isShowUserdtl"
|
|
|
+ :isShow="isShowUserdtl"
|
|
|
+ :userInfo="userObj"
|
|
|
+ :researchGroup="researchGroup"
|
|
|
+ @closeDetail="isShowUserdtl = false"
|
|
|
+ />
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 添加/编辑用户弹窗 -->
|
|
|
+ <ModifyUserDialog
|
|
|
+ :isShow="isModifyUserShow"
|
|
|
+ />
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@@ -247,8 +350,11 @@ let shareCustomDepartmentId = ref(0)
|
|
|
.right_cont {
|
|
|
width: 82%;
|
|
|
background: #F5F7F9;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
// box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
.right_cont_top {
|
|
|
display: flex;
|
|
@@ -262,7 +368,7 @@ let shareCustomDepartmentId = ref(0)
|
|
|
}
|
|
|
|
|
|
.right_cont_bot {
|
|
|
- height: calc(100vh - 222px);
|
|
|
+ flex: 1;
|
|
|
overflow-y: auto;
|
|
|
padding: 20px 30px;
|
|
|
background: #fff;
|
|
@@ -272,49 +378,6 @@ let shareCustomDepartmentId = ref(0)
|
|
|
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;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|