Merge pull request 'add：主页进入详情的页面；' (#37) from yangws_ws into main

Reviewed-on: #37
2024-11-13 17:07:30 +08:00 · 2024-11-13 17:07:30 +08:00 · c0c7fa3298
parent 4feeb2ef56 3d2b102355
commit c0c7fa3298
7 changed files with 258 additions and 46 deletions
--- a/src/renderer/src/router/index.js
+++ b/src/renderer/src/router/index.js
@ -60,7 +60,21 @@ export const constantRoutes = [
        path: 'management',
        component: () => import('@/views/job-management/index.vue'),
        name: 'job-management',
-        meta: { title: '作业管理' }
+        meta: { title: '作业管理' },
+        // children: [
+        //   {
+        //     path: 'details',
+        //     component: () => import('@/views/job-management/Details/index.vue'),
+        //     name: 'details',
+        //     meta: { title: '详情' }
+        //   },
+        //   {
+        //     path: 'right',
+        //     component: () => import('@/views/job-management/Right/index.vue'),
+        //     name: 'right',
+        //     meta: { title: '主页' }
+        //   },
+        // ]
      },
    ]
  },
--- a/src/renderer/src/views/job-management/Details/classroomPresentation/index.vue
+++ b/src/renderer/src/views/job-management/Details/classroomPresentation/index.vue
@ -0,0 +1,5 @@
+<template>
+    <div>
+        2222
+    </div>
+</template>
--- a/src/renderer/src/views/job-management/Details/index.vue
+++ b/src/renderer/src/views/job-management/Details/index.vue
@ -0,0 +1,97 @@
+<template>
+    <div class="tabs-container">
+      <div class="button-div">
+        <el-button @click="goBack" type="primary" size="small">返回主页</el-button>
+        <el-button type="default" size="small">推送</el-button>
+        <el-button type="primary" size="small">保存</el-button>
+      </div>
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <template v-for="(item,index) in props.parameter.titleList">
+          <el-tab-pane :label="item.label" :name="item.id">
+            <el-row :gutter="10" class="tempalte-main">
+              <el-col :span="16">
+              <!-- 左侧组件 -->
+                <transition name="fade">
+                  <component :is="currentComponent"/>
+                </transition>
+              </el-col>
+              <el-col :span="8">
+              <!-- 右侧 -->
+                <el-scrollbar class="right-box" :height="pageHeight">
+                  <el-form label-position="top">
+                    <el-form-item label="作业名称">
+                      <el-input></el-input>
+                    </el-form-item>
+                    <el-form-item label="作业说明">
+                      <el-input type="textarea" :row="5"></el-input>
+                    </el-form-item>
+                  </el-form>
+                </el-scrollbar>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </template>
+      </el-tabs>
+      
+      
+    </div>
+    
+</template>
+<script setup>
+import { ref,defineProps ,defineEmits,nextTick , onMounted,shallowRef } from 'vue'
+import ClassroomPresentation from './classroomPresentation/index.vue'
+import selfSearchQuestions from './selfSearchQuestions/index.vue'
+const props = defineProps({
+  parameter: Object
+});
+const emits = defineEmits(['goBack'])
+const currentComponent = shallowRef(null)
+
+const activeName = ref(1)
+const pageHeight = ref(0)
+
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+// 返回主页
+const goBack = () => {
+  emits('goBack')
+}
+
+// 对应的组件
+const rightComponets = (str) => {
+  switch (str) {
+    case 'classroomPresentation':
+      return ClassroomPresentation
+    case 'selfSearchQuestions':
+      return selfSearchQuestions
+    default:
+      return null
+  }
+}
+// 监听主页传过来的值
+onMounted(() => {
+  currentComponent.value = rightComponets(props.parameter.components)
+  // 获取当前高度加上滚动条的高度
+  nextTick(() => {
+    pageHeight.value = window.innerHeight + window.scrollY - 156;
+  });
+})
+</script>
+<style lang="scss" scoped>
+.tabs-container{
+  position: relative;
+}
+.button-div{
+  position: absolute;
+  top: 5px;
+  right: 0;
+  z-index: 999;
+}
+.right-box{
+  background-color: #fff;
+  padding:5px;
+  border-radius: 4px;
+  overflow-y: auto;
+}
+</style>
--- a/src/renderer/src/views/job-management/Details/selfSearchQuestions/index.vue
+++ b/src/renderer/src/views/job-management/Details/selfSearchQuestions/index.vue
@ -0,0 +1,5 @@
+<template>
+    <div>
+        11111
+    </div>
+</template>
--- a/src/renderer/src/views/job-management/Right/index.vue
+++ b/src/renderer/src/views/job-management/Right/index.vue
@ -12,29 +12,90 @@
            <CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
          </div>
        </div>
-        
      </div>
    </div>
  </div>
+
+  
 </template>

 <script setup>
-import { ref,markRaw } from 'vue';
+import { ref, markRaw } from 'vue';
 import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-vue';
-import CustomButton from '../components/button.vue'
+import CustomButton from '../components/button.vue';
+const emits = defineEmits(['skipDetail']);

 const items = ref([
-  { title: '自主搜题', description: '1111111', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '校本题库', description: '222222', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '个人题库', description: '333333', icon: markRaw(Document),type:'default',text:'习题训练' },
-  { title: '智能推荐', description: '444444', icon: markRaw(Document),type:'',text:'' },
-  { title: '课堂展示', description: '555555', icon: markRaw(Document),type:'primary',text:'课堂展示' },
-  { title: '常规作业', description: '555555', icon: markRaw(Document),type:'danger',text:'常规作业' },
-  { title: 'AI设计作业', description: '555555', icon: markRaw(Document),type:'danger',text:'常规作业' },
+  { title: '自主搜题', description: '1111111', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
+    {
+      id:1,
+      label:'自主搜题',
+    },
+    {
+      id:2,
+      label:'校本题库',
+    },
+    {
+      id:3,
+      label:'个人题库',
+    },
+]},
+  { title: '校本题库', description: '222222', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
+    {
+      id:1,
+      label:'自主搜题',
+    },
+    {
+      id:2,
+      label:'校本题库',
+    },
+    {
+      id:3,
+      label:'个人题库',
+    },
+] },
+  { title: '个人题库', description: '333333', icon: markRaw(Document), type: 'default', text: '习题训练',components:'classroomPresentation',titleList:[
+    {
+      id:1,
+      label:'自主搜题',
+    },
+    {
+      id:2,
+      label:'校本题库',
+    },
+    {
+      id:3,
+      label:'个人题库',
+    },
+] },
+  { title: '智能推荐', description: '444444', icon: markRaw(Document), type: '', text: '',components:'classroomPresentation',titleList:[
+    {
+      id:1,
+      label:'智能推荐',
+    },
+] },
+  { title: '课堂展示', description: '555555', icon: markRaw(Document), type: 'primary', text: '课堂展示',components:'selfSearchQuestions',titleList:[
+    {
+      id:1,
+      label:'课堂展示',
+    },
+] },
+  { title: '常规作业', description: '555555', icon: markRaw(Document), type: 'danger', text: '常规作业',components:'selfSearchQuestions',titleList:[
+    {
+      id:1,
+      label:'常规作业',
+    },
+] },
+  { title: 'AI设计作业', description: '555555', icon: markRaw(Document), type: 'danger', text: '常规作业',components:'selfSearchQuestions',titleList:[
+    {
+      id:1,
+      label:'AI设计作业',
+    },
+] },
 ]);

 const handleClick = (item) => {
-  console.log('Clicked on:', item.title);
+  emits('skipDetail', item);
 };
 </script>

@ -96,12 +157,23 @@ const handleClick = (item) => {
  text-overflow: ellipsis;
  word-break: break-all;
 }
-.title-header{
+
+.title-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
-.item-bottom{
+
+.item-bottom {
  text-align: right;
 }
+
+/* 过渡动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
 </style>
--- a/src/renderer/src/views/job-management/components/customSelect.vue
+++ b/src/renderer/src/views/job-management/components/customSelect.vue
@ -46,7 +46,6 @@ const toggleDropup = () => {
 };

 const selectOption = (option) => {
-  selectedOption.value = option;
  isDropdownOpen.value = false;
  emits('select-click', option)
 };
--- a/src/renderer/src/views/job-management/index.vue
+++ b/src/renderer/src/views/job-management/index.vue
@ -1,36 +1,37 @@
 <template>
-    <div class="page-template flex">
-        <!-- // 顶部 -->
-        <div class="mb-4">
-          <div>
-              <el-button type="danger" :disabled="!isChceked">批量删除</el-button>
-              <el-button type="primary" :disabled="!isChceked">批量推送</el-button>
-          </div>
-          <CustomSelect 
-              :options="options" 
-              placeholder="设计新作业" 
-              @select-click="selectClick"
-          />
-        </div>
-        <div :style="{height:viewportHeight - 72}" class="no-horizontal-scroll">
-          <el-row :gutter="20" class="tempalte-main">
-            <el-col :span="6">
-              <!--左侧列表-->
-              <Left @checked="checked"/>
-            </el-col>
-            <el-col :span="18">
-              <!--右侧-->
-              <Right/>
-            </el-col>
-          </el-row>
-        </div>
+  <div class="page-template flex">
+    <!-- // 顶部 -->
+    <div class="mb-4">
+      <div>
+        <el-button type="danger" :disabled="!isChceked">批量删除</el-button>
+        <el-button type="primary" :disabled="!isChceked">批量推送</el-button>
+      </div>
+      <CustomSelect 
+        :options="options" 
+        placeholder="设计新作业" 
+        @select-click="selectClick"
+      />
    </div>
+    <div :style="{height: viewportHeight - 72 + 'px'}" class="no-horizontal-scroll">
+      <el-row :gutter="20" class="tempalte-main">
+        <el-col :span="6">
+          <!-- 左侧列表 -->
+          <Left @checked="checked"/>
+        </el-col>
+        <el-col :span="18">
+          <!-- 右侧 -->
+          <component :is="currentComponent" v-on="listeners" :parameter="parameter" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>

 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, shallowRef, onMounted, nextTick, computed } from 'vue';
 import Right from './Right/index.vue';
 import Left from './Left/index.vue';
+import Detials from './Details/index.vue';
 import CustomSelect from './components/customSelect.vue';

 const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
@ -38,17 +39,31 @@ const options = ref(['自主搜题', '校本题库', '个人题库', '智能推
 // 判断是否有选中的checkbox框
 const isChceked = ref(false);
 const viewportHeight = ref(0);
-
+const isSkip = ref(false);
+// 点击主页传的参数
+const parameter = ref({});
 // 选中的checkbox框
 const checked = (val) => {
  console.log(val);
  val.length > 0 ? isChceked.value = true : isChceked.value = false;
 }
+const currentComponent = shallowRef(Right);

 // 选择的作业设计类型
 const selectClick = (val) => {
  console.log(val);
 }
+// 右侧点击路由跳转
+const skipDetail = (val) => {
+  parameter.value = Object.assign({}, val);
+  isSkip.value = true;
+  currentComponent.value = Detials;
+}
+// 回到主页
+const goBack = () => {
+  isSkip.value = false;
+  currentComponent.value = Right;
+}

 // 获取视口高度
 const getViewportHeight = () => {
@ -65,6 +80,11 @@ onMounted(() => {
    });
  });
 });
+
+const listeners = computed(() => ({
+  skipDetail,
+  goBack
+}));
 </script>

 <style lang="scss" scoped>
@ -86,8 +106,8 @@ onMounted(() => {
    flex: 1;
  }
 }
-.no-horizontal-scroll{
-  overflow-y: scroll;
+.no-horizontal-scroll {
+  overflow: auto;
  overflow-x: hidden;
 }
 </style>