zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add：主页进入详情的页面； #37

Merged
yangws merged 1 commits from yangws_ws into main 2024-11-13 17:07:32 +08:00
Conversation 0 Commits 1 Files Changed 7 +258 -46
7 changed files with 258 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/src/router/index.js
View File

@ -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: '主页' }
// },
// ]
},
]
},

5
src/renderer/src/views/job-management/Details/classroomPresentation/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
2222
</div>
</template>

97
src/renderer/src/views/job-management/Details/index.vue Normal file
View File

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

5
src/renderer/src/views/job-management/Details/selfSearchQuestions/index.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
11111
</div>
</template>

98
src/renderer/src/views/job-management/Right/index.vue
View File

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

1
src/renderer/src/views/job-management/components/customSelect.vue
View File

@ -46,7 +46,6 @@ const toggleDropup = () => {
};
const selectOption = (option) => {
selectedOption.value = option;
isDropdownOpen.value = false;
emits('select-click', option)
};

82
src/renderer/src/views/job-management/index.vue
View File

@ -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,8 +80,13 @@ onMounted(() => {
});
});
});
const listeners = computed(() => ({
skipDetail,
goBack
}));
</script>
<style lang="scss" scoped>
.mb-4 {
display: flex;
@ -86,8 +106,8 @@ onMounted(() => {
flex: 1;
}
}
.no-horizontal-scroll{
overflow-y: scroll;
.no-horizontal-scroll {
overflow: auto;
overflow-x: hidden;
}
</style>