|
|
@@ -0,0 +1,285 @@
|
|
|
+<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="provinceTablist"
|
|
|
+ :defaultTabKey="defaultProvince" 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"
|
|
|
+ active-text="选中用户配置任课关系" />
|
|
|
+ <el-button class="button_border">分组管理</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_jg_20" />
|
|
|
+ <Table :tableColumns="tableColumns" :tableData="groupTableData">
|
|
|
+ <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]">
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="`${row?.[column.name].name}`"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <div v-if="isConfigMode" class="teacher_tag">
|
|
|
+ <span :title="row?.[column.name].name">{{ row?.[column.name].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="row?.[column.name].name">{{ row?.[column.name].name}}</span>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </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 {formSearhList,accountFormSearhList} from './formSearch'
|
|
|
+import Table from '@/baseComponents/Table.vue';
|
|
|
+import TabSearch from '@/baseComponents/TabSearch.vue';
|
|
|
+
|
|
|
+import {tableColumns,userTableColumns} from './table'
|
|
|
+import {provinceTablist} from './tabSearch'
|
|
|
+
|
|
|
+
|
|
|
+// 用户账号信息
|
|
|
+const userAccountData = ref([
|
|
|
+ {
|
|
|
+ account:'xxx',
|
|
|
+ name:'xx',
|
|
|
+ id:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ account:'xxx',
|
|
|
+ name:'xx2',
|
|
|
+ id:'2',
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+// 分组信息
|
|
|
+const isConfigMode = ref(false)
|
|
|
+const defaultProvince = ref('beijing')
|
|
|
+const groupTableData = ref([
|
|
|
+ {
|
|
|
+ id:'1',
|
|
|
+ region:'xxx',
|
|
|
+ project1:{id:'1',name:'xxx'},
|
|
|
+ project2:{id:'1',name:'xxx'},
|
|
|
+ project3:{id:'1',name:'xxx'},
|
|
|
+ project4:{id:'1',name:'xxx'},
|
|
|
+ project5:{id:'1',name:'xxx'},
|
|
|
+ project6:{id:'1',name:'xxx'},
|
|
|
+ project7:{id:'1',name:'xxx'},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'2',
|
|
|
+ region:'xxx',
|
|
|
+ project1:{id:'1',name:'xxx'},
|
|
|
+ project2:{id:'1',name:'xxx'},
|
|
|
+ project3:{id:'1',name:'xxx'},
|
|
|
+ project4:{id:'1',name:'xxx'},
|
|
|
+ project5:{id:'1',name:'xxx'},
|
|
|
+ project6:{id:'1',name:'xxx'},
|
|
|
+ project7:{id:'1',name:'xxx'},
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+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] = [];
|
|
|
+
|
|
|
+ }
|
|
|
+ row[cell] = 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] = '';
|
|
|
+
|
|
|
+ // 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: center;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 8px;
|
|
|
+ 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