添加权限管理静态页面

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -21,11 +21,10 @@
                     </div>
                     <div class="content_right">
                         <span v-if="isConfigMode" class="config_switch_desc">
-                            {{ selectedUser?.id ? `当前选中的用户：${selectedUser.name}` : '暂无选中的用户' }}
+                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
                             </span>
-                        <el-switch v-model="isConfigMode" 
-                            style="--el-switch-on-color: #2E64FA"
-                            active-text="选中用户配置任课关系" />
+                        <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
+                        <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
                         <el-button class="button_border" @click="HandleOpenGroup">分组管理</el-button>
                     </div>
                 </div>
@@ -50,7 +49,7 @@
                             </el-tooltip>
                         </template>
                         <template v-else>
-                            <span v-if="isConfigMode" class="placeholder_text" >请选择用户</span>
+                            <span v-if="isConfigMode" class="placeholder_text" >请选择员工</span>
                             <span v-else>-</span>
                         </template>
                   </div>
@@ -96,7 +95,7 @@ import {tableColumns,userTableColumns} from './table'
 import {provinceTablist} from './tabSearch'
 
 
-// 用户账号信息
+// 员工账号信息
 const userAccountData = ref([
     {
         account:'xxx',
@@ -138,7 +137,7 @@ const groupPeopleTableData = ref([
     },
 ])
 
-const selectedUser = ref({})
+const selectedUser = ref()
 
 // 设置表行选中 样式
 const tableRowClassName = ({row,rowIndex})=>{
@@ -146,7 +145,7 @@ const tableRowClassName = ({row,rowIndex})=>{
     return 'active_row'
   }
 }
-// 行选中 选择用户
+// 行选中 选择员工
 const HandleSelectUser = (user) => {
   selectedUser.value = {
     id:user.id,
@@ -155,7 +154,7 @@ const HandleSelectUser = (user) => {
   };
 };
 
-// 添加用户
+// 添加员工
 const HandleAddUser = async (row, cell) => {
     if (!isConfigMode.value) return;
     if (!selectedUser.value) return;
@@ -187,7 +186,7 @@ const HandleAddUser = async (row, cell) => {
 };
 
 
-// 移除用户
+// 移除员工
 const HandleRemoveUser = async (row, cell, index,type) => {
     if (!isConfigMode.value) return;
     let id = null
@@ -295,7 +294,7 @@ const HandleConfirmEntiretyGroup = ()=>{
      
             text-align: center;
             flex-wrap: wrap;
-            padding: 8px;
+            padding: 8px 0;
             gap: 8px;
 
             .placeholder_text,

src/views/userPrivilegeManagement/permissionManage/formSearch.ts

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+
+
+export const  accountFormSearhList = ref([
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入',
+        defaultValue:'',
+    }
+])

src/views/userPrivilegeManagement/permissionManage/index.vue

@@ -0,0 +1,274 @@
+<template>
+    <div class="end_item container">
+        <div class="container_left end_item">
+            <FormSearchGroup :searchList="accountFormSearhList" />
+            <div class="page_jg_20"/>
+            <Table 
+                :hidePagination="true"
+                class="teacher_table"
+                :tableColumns="userTableColumns" 
+                :tableData="userAccountData"
+                :tableRowClassName="tableRowClassName"
+                @rowClick="HandleSelectUser"
+            ></Table>
+        </div>
+        <div  class="container_right end_item">
+            <div class="page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <TabSearch :tabList="roleList" 
+                            :defaultTabKey="defaultRole" tabType="line" />
+                    </div>
+                    <div class="content_right">
+                        <span v-if="isConfigMode" class="config_switch_desc">
+                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
+                            </span>
+                        <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
+                        <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
+                    </div>
+                </div>
+            </div>
+            <div class="page_jg_20" />
+            <Table :tableColumns="tableColumns" :tableData="groupPeopleTableData">
+                 <template v-for="column in tableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
+                    <div class="cell_container" @click="HandleAddUser(row, column.name)">
+
+                        <template v-if="row?.[column.name] && row?.[column.name]?.length > 0">
+                            <template v-for="(user,idx) in row?.[column.name]">
+                                <el-tooltip
+                                    effect="dark"
+                                    :content="`${user.name}`"
+                                    placement="top-start"
+                                >
+                                    <div v-if="isConfigMode" class="teacher_tag">
+                                        <span :title="user.name">{{ user.name }}</span>
+                                        <el-icon class="delete_icon" @click.stop="HandleRemoveUser(row, column.name, idx,'administrative')"><Close /></el-icon>
+                                    </div>
+                                    <div v-else class="disabled_teacher">
+                                        <span :title="user.name">{{ user.name}}</span>
+                                    </div>
+                                </el-tooltip>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <span v-if="isConfigMode" class="placeholder_text" >请选择员工</span>
+                            <span v-else>-</span>
+                        </template>
+                  </div>
+                </template>
+            </Table>
+        </div>
+    </div>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import {accountFormSearhList} from './formSearch'
+import Table from '@/baseComponents/Table.vue';
+import TabSearch from '@/baseComponents/TabSearch.vue';
+
+import {tableColumns,userTableColumns} from './table'
+import {roleList} from './tabSearch'
+
+
+// 员工账号信息
+const userAccountData = ref([
+    {
+        account:'xxx',
+        name:'xx',
+        id:'1',
+    },
+    {
+        account:'xxx',
+        name:'xx2',
+        id:'2',
+    },
+])
+
+// 分组信息
+const isConfigMode = ref(false)
+const defaultRole = ref('projectLeader')
+const groupPeopleTableData = ref([
+     {
+        id:'1',
+        region:'xxx',
+        project1:[{id:'1',name:'xxx'}],
+    },
+    {
+        id:'2',
+        region:'xxx',
+        project1:[],
+    },
+])
+
+const selectedUser = ref()
+
+// 设置表行选中 样式
+const tableRowClassName = ({row,rowIndex})=>{
+  if(row.id == selectedUser.value?.id){
+    return 'active_row'
+  }
+}
+// 行选中 选择员工
+const HandleSelectUser = (user) => {
+  selectedUser.value = {
+    id:user.id,
+    name:user.name,
+    account:user.account,
+  };
+};
+
+// 添加员工
+const HandleAddUser = async (row, cell) => {
+    if (!isConfigMode.value) return;
+    if (!selectedUser.value) return;
+
+    let teacherMsg = { 
+        id: selectedUser.value?.id, 
+        name: selectedUser.value?.name,
+        account:selectedUser.value?.account 
+    }
+    if (!row[cell]) {
+        row[cell] = [];
+    }
+    console.log('row.cell',row[cell])
+    row[cell].push(teacherMsg)
+
+    // let res = await saveTeachingRelationshipApi({
+    //     ...teacherMsg,
+    //     evaluationId:route.query.id,
+    //     evaluationGradeId:searchParmams.value.gradeId,
+    //     evaluationSubjectId:cell,
+    //     evaluationClassId:row.className.evaluationClassId,
+    //     classType:searchParmams.value.classType == 'teach' ? 1 : 0  //班级类型，0-行政班，1-教学班
+    // })
+    // if(res?.code == 200){
+        // ElMessage.success(res?.msg)
+        // row[cell].push({...teacherMsg,id:res?.data});
+    // }
+};
+
+
+// 移除员工
+const HandleRemoveUser = async (row, cell, index,type) => {
+    if (!isConfigMode.value) return;
+    let id = null
+    let res = undefined
+
+    row[cell].splice(index,1)
+    
+
+    // id = row[cell][index].id
+    // res = await deleteTeachingRelationshipApi(id)
+    // if(res?.code == 200){
+    //     ElMessage.success(res?.msg)
+    //     row[cell].splice(index, 1);
+    // }
+};
+
+
+</script>
+
+
+<style lang="scss" scoped>
+
+.container{
+    width: 100%;
+    overflow: auto;
+    flex-direction: row;
+    gap:20px;
+
+    .container_left{
+        width: 200px;
+
+        :deep(.el-table__body){
+            tr.active_row td
+            {
+                background-color: rgba(46, 100, 250,0.1) !important;
+                border:none;
+                color: #2e64fa;
+            }
+        }
+
+
+    }
+
+    .container_right{
+        width: calc(100% - 220px);
+        .content_left{
+            line-height: 1.5;
+        }
+        .content_right{
+            align-items: center;
+        }
+        .config_switch_desc{
+            font-size: 14px;
+        }
+
+        .cell_container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            text-align: center;
+            flex-wrap: wrap;
+            padding: 8px 0;
+            gap: 8px;
+
+            .placeholder_text,
+            .disabled_teacher{
+                width: 90px;
+                height: 34px;
+                font-weight: 400;
+                font-size: 14px;
+                text-align: center;
+                line-height: 34px;
+                background-color: #f3f3f3;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .placeholder_text {
+                color: #CCCCCC;
+            }
+            .disabled_teacher {
+                color: #666666;
+            }
+
+            // 教师标签样式
+            .teacher_tag {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0 8px;
+
+                min-width: 90px;
+                height: 34px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #2E64FA;
+                text-align: center;
+                line-height: 34px;
+                background: rgba(46, 100, 250, 0.1);
+                border-radius: 4px;
+
+                // 删除图标样式 (对应原 img 标签样式)
+                .delete_icon {
+                width: 12px;
+                height: 12px;
+                cursor: pointer;
+                font-size: 12px;
+                margin-left: 10px; /* 保留原代码中 i 标签的 margin-left 习惯 */
+                }
+            }
+        }
+
+
+
+    }
+}
+
+</style>

src/views/userPrivilegeManagement/permissionManage/tabSearch.ts

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+
+export const  roleList = ref([
+    {
+        label:'项目组长',
+        key:'projectLeader',
+    },
+    {
+        label:'管理员',
+        key:'manager',
+    },
+])

src/views/userPrivilegeManagement/permissionManage/table.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+
+
+export const userTableColumns = ref([
+    {
+        name:'account',
+        label:'账号',
+        width:'80',
+        fixed:'',
+        align:'center',
+        minWidth:'',
+        custom:false,
+    },
+    {
+        name:'name',
+        label:'姓名',
+        width:'80',
+        fixed:'',
+        align:'center',
+        minWidth:'',
+        custom:false,
+    },
+])
+
+
+// 动态变更项 ————
+export const tableColumns = ref([
+    {
+        name: 'region', // 对应“项目组”列，通常作为行头
+        label: '项目组',
+        width: '80',
+        fixed: 'left', // 建议固定首列，防止横向滚动时看不清区域
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'project1',
+        label: '项目1组',
+        width: '320',
+        fixed: '',
+        align: 'left',
+        minWidth: '',
+        custom: true,
+    },
+   
+]);