|
|
@@ -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>
|
lm