部门管理-表格

src/views/system_manage/depart_manage/departManage.vue

@@ -1,47 +1,40 @@
 <script setup>
 import { ref,reactive } from 'vue'
 import {useDepart} from './hooks/use-depart'
-import { departInterence } from '@/api/api.js';
-
-const {defaultDepart,defaultGroup,tablePrams,groupTeamId} = useDepart()
-const {useTreeMove,useTreeEvent} = useDepart()
+import { departInterence } from '@/api/api.js'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { Search } from '@element-plus/icons-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 {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
-            })
-        }
-        return depart
-    })
-}
-getDepartArr()
-
 let shareCustomDepartmentId = ref(0)
+function synchronizationMEIKE(){}
+function searchHandle(){}
+const tableColumns = [
+    { label:"姓名", key:"RealName" },{ label:"账号", key:"AdminName" },{ label:"手机号", key:"Mobile"},
+    { label:"角色", key:"RoleName" },{ label:"部门/分组", key:"DepartmentGroup" },{ label:"状态", key:"Enabled"}
+]
+let isShowloadding = ref('')
+function getUserDetail(){}
+
+function handleCurrentChange(){}
+
+
+
+
+getTableUser()
+getDepartArr()
 
 </script>
 
@@ -50,7 +43,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 +62,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,7 +91,74 @@ 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"
+                    @input="searchHandle"
+                    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>{{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="editUser(row)">编辑</span>
+                                <span class="editsty" @click.stop="resetPassWord(row)">重置密码</span>
+                                <span class="editsty" @click.stop="moveDepart(row)">移动分组</span>
+                                <span 
+                                    class="editsty" 
+                                    @click.stop="handleChangeStatus(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>
+            </div>
         </div>
     </div>
 </template>
@@ -247,8 +307,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 +325,7 @@ let shareCustomDepartmentId = ref(0)
             }
 
             .right_cont_bot {
-                height: calc(100vh - 222px);
+                flex: 1;
                 overflow-y: auto;
                 padding: 20px 30px;
                 background: #fff;

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

@@ -1,5 +1,6 @@
 //部门管理 hook
 import { ref, reactive } from 'vue'
+import { departInterence } from '@/api/api.js';
 
 export function useDepart(){
     //选择的部门
@@ -7,11 +8,76 @@ export function useDepart(){
     //选择的分组
     let defaultGroup = ref('')
     let groupTeamId = 0
-    let tablePrams = reactive({
+    let tableParams = reactive({
+        searchTxt:'',
         pageNo:1,
+        pageSize:10,
+        total:0
     })
+
+    //部门数据
+    let departArr = ref([])
+    //获取部门结构
+    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
+                })
+            }
+            return depart
+        })
+    }
+
+    let tableData = ref([])
     //获取对应部门/分组下的用户数据
-    function getTableUser(){}
+    function getTableUser(){
+        const {searchTxt,pageSize,pageNo} = tableParams
+        departInterence.getUserList({
+            DepartmentId:defaultDepart.value,
+            GroupId:defaultGroup.value,
+            TeamId:groupTeamId,
+            KeyWord:searchTxt,
+            PageSize:pageSize,
+            CurrentIndex:pageNo
+        }).then(res => {
+            if(res.Ret === 200) {
+                tableData.value = res.Data.List || [];
+                tableParams.total = res.Data.Paging.Totals;
+            }
+        })
+    }
+
+    function useDepartTable(){
+        //打开添加/编辑用户弹窗
+        //原项目 addUser editUser 合成一个
+        function openUserDialog(){}
+        //添加编辑用户
+        function modifyUser(){}
+        //删除用户,前端按钮因产品要求隐藏,函数保留
+        function delUser(){}
+        return {
+            openUserDialog,
+            modifyUser,
+            delUser
+        }
+    }
+
     //树结构事件
     function useTreeEvent(){
         let act_node = ref('')
@@ -34,7 +100,7 @@ export function useDepart(){
                 groupTeamId = data.DepartmentId
                 defaultDepart.value = ''
             }
-            tablePrams.pageNo = 1;
+            tableParams.pageNo = 1;
             getTableUser();
         }
 
@@ -71,11 +137,13 @@ export function useDepart(){
 
 
     return {
-        groupTeamId,
-        defaultDepart,defaultGroup,tablePrams,
-        getTableUser,
+        groupTeamId,departArr,
+        defaultDepart,defaultGroup,
+        tableParams,tableData,
+        getTableUser,getDepartArr,
         useTreeMove,
-        useTreeEvent
+        useTreeEvent,
+        useDepartTable
     }
 }