作业管理:界面UI调整

This commit is contained in:
白了个白 2025-01-16 15:03:02 +08:00
parent 97405bb73b
commit db712d9e1f
2 changed files with 209 additions and 179 deletions

View File

@ -38,7 +38,7 @@ const items = shallowRef([
// { title: 'AI', description: 'AI', icon: '#icon-jiqiren_o',type:'danger' },
{ title: '习题上传', description: '自己上传个人题库。', icon: '#icon-shangchuan',type:'danger' },
{ title: '科学实验', description: '学生完成虚拟仿真实验,并提交实验结果。', icon: '#icon-shangchuan',type:'primary' },
{ title: '自主组卷', description: '老师自主选择试题组卷。', icon: '#icon-shangchuan',type:'primary' },
// { title: '', description: '', icon: '#icon-shangchuan',type:'primary' },
]);
const handleClick = (item) => {

View File

@ -1,26 +1,24 @@
<template>
<div class="page">
<div class="page-top" v-if="!isShow">
<div class="page-top-left">
<div>
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
<el-button type="success" @click="handleTaskAssignToAllClass()">批量推送</el-button>
</div>
<div v-if="currentRow.id > 0" class="page-top-right">
<el-button type="primary" @click="handleNewAllClass" :icon="Plus">设计新作业</el-button>
<div style="margin-left: 20px;">
<div v-if="currentRow.id > 0">
<el-button type="primary" @click="handleNewAllClass"><i class="iconfont icon-fanhui"></i>返回 设计作业</el-button>
</div>
<div v-else>
<span style="font-size: 14px; color: red">温馨提示选择下列作业类型可进行作业设计</span>
</div>
</div>
</div>
<div class="page-resource">
<div class="page-left" v-if="!isShow">
<el-table
ref="taskTable"
v-loading="tasklist_loading"
:data="taskList"
:tree-props="{checkStrictly: true}"
row-key="id"
style="width: 100%;height: 100%; border: 1px solid #dcdfe6;border-radius: 3px;flex:1"
highlight-current-row
@current-change="handleCurrentChange"
>
<el-table ref="taskTable" v-loading="tasklist_loading" :data="taskList" :tree-props="{ checkStrictly: true }"
row-key="id" style="width: 100%;height: 100%; border: 1px solid #dcdfe6;border-radius: 3px;flex:1"
highlight-current-row @current-change="handleCurrentChange">
<el-table-column type="selection" min-width="2%" align="center" :selectable="selectable" />
<el-table-column label="作业布置" min-width="15%" align="center">
<template #default="scope">
@ -31,11 +29,13 @@
<span>{{ scope.row.uniquekey }}</span>
</div>
<div class="pageleft-table-top" style="display: flex;justify-content: space-between">
<el-tag style="padding:0 2px" :type="scope.row.workclass" size="default">{{ scope.row.worktype }}</el-tag>
<el-tag style="padding:0 2px" :type="scope.row.workclass" size="default">{{ scope.row.worktype
}}</el-tag>
<el-text size="small" style="color:#ccc;white-space:nowrap">{{ scope.row.timestamp }}</el-text>
</div>
<div class="pageleft-table-cont">
<div :title="scope.row.worktag || scope.row.title" class="ellipsis "> {{ scope.row.worktype == "课堂展示" ? scope.row.worktag : scope.row.title }}</div>
<div :title="scope.row.worktag || scope.row.title" class="ellipsis "> {{ scope.row.worktype ==
"课堂展示" ? scope.row.worktag : scope.row.title }}</div>
</div>
</div>
<svg class="icon iconfont" aria-hidden="true">
@ -53,7 +53,8 @@
<Right @itemClick="handleItemClick" />
</div>
<div v-if="(currentRow.worktype == '习题训练' || classWorkForm.worktype == '习题训练') && currentRow.id>0" class="page-center">
<div v-if="(currentRow.worktype == '习题训练' || classWorkForm.worktype == '习题训练') && currentRow.id > 0"
class="page-center">
<el-tabs v-model="activeAptTab" style="height: 100%;">
<el-tab-pane label="自主搜题" name="自主搜题" class="prepare-center-zzst">
<SearchQuestion :bookobj="courseObj" @addQuiz="handleClassWorkQuizAdd" />
@ -66,47 +67,53 @@
</el-tab-pane>
</el-tabs>
</div>
<div v-if="(currentRow.worktype == '课堂展示' || classWorkForm.worktype == '课堂展示') && currentRow.id>0" class="page-center">
<div v-if="(currentRow.worktype == '课堂展示' || classWorkForm.worktype == '课堂展示') && currentRow.id > 0"
class="page-center">
<div v-loading="boardLoading" class="board-wrap" style="height: 100%; flex: 1; overflow: hidden;">
<whiteboard ref="boardref" height="100%" width="100%" :isShowSave="false" :data="classWorkForm.whiteboardObj" />
<whiteboard ref="boardref" height="100%" width="100%" :isShowSave="false"
:data="classWorkForm.whiteboardObj" />
</div>
</div>
<div v-if="(currentRow.worktype == '常规作业' || classWorkForm.worktype == '常规作业')&& currentRow.id>0" class="page-center">
<div v-if="(currentRow.worktype == '常规作业' || classWorkForm.worktype == '常规作业') && currentRow.id > 0"
class="page-center">
<div v-loading="fileLoading" class="upload-homework">
<FileUpload v-model="classWorkForm.fileHomeworkList" :fileSize="800" :fileType="['mp3','mp4','doc','docx','xlsx','xls','pdf','ppt','pptx','jpg','jpeg','gif','png','txt']"/>
<FileUpload v-model="classWorkForm.fileHomeworkList" :fileSize="800"
:fileType="['mp3', 'mp4', 'doc', 'docx', 'xlsx', 'xls', 'pdf', 'ppt', 'pptx', 'jpg', 'jpeg', 'gif', 'png', 'txt']" />
</div>
</div>
<div v-if="(currentRow.worktype == '科学实验' || classWorkForm.worktype == '科学实验')&& currentRow.id>0" class="page-center">
<div v-if="(currentRow.worktype == '科学实验' || classWorkForm.worktype == '科学实验') && currentRow.id > 0"
class="page-center">
<div class="experiment-homework">
<ExperimentQuestion :expObj="classWorkForm.fileHomeworkList&&classWorkForm.fileHomeworkList[0]" @clickExpObj="getExpObj" />
<ExperimentQuestion :expObj="classWorkForm.fileHomeworkList && classWorkForm.fileHomeworkList[0]"
@clickExpObj="getExpObj" />
</div>
</div>
<div v-if="currentRow.id > 0" class="page-right">
<div class="prepare-top">
<span>作业详情说明</span>
<el-button v-if="currentRow.id != 1" type="success" @click="openSet(currentRow, 'item')"> </el-button>
<el-button type="primary" @click="handleClassWorkSave"> </el-button>
</div>
<div class="prepare-con">
<el-form
ref="classWorkFormRef"
:model="classWorkForm"
label-width="90"
style=" height: 100%; overflow: hidden;display: flex;flex-direction: column;"
>
<el-form ref="classWorkFormRef" :model="classWorkForm" label-width="90"
style=" height: 100%; overflow: hidden;display: flex;flex-direction: column;">
<div>
<el-form-item label="作业名称">
<el-input v-model="classWorkForm.uniquekey" type="text" placeholder="请输入作业名称" />
</el-form-item>
<el-form-item label="作业说明" style="margin: 10px 0;">
<el-input v-if="classWorkForm.worktype != '课堂展示'" v-model="classWorkForm.title" style="width: 400px" placeholder="请输入作业说明"/>
<el-input v-if="classWorkForm.worktype != '课堂展示'" v-model="classWorkForm.title" style="width: 400px"
placeholder="请输入作业说明" />
<!-- 课堂展示 这里字段不一样 -->
<el-input v-if="classWorkForm.worktype == '课堂展示'" v-model="classWorkForm.question" type="textarea" placeholder="请输入作业说明" />
<el-input v-if="classWorkForm.worktype == '课堂展示'" v-model="classWorkForm.question" type="textarea"
placeholder="请输入作业说明" />
</el-form-item>
</div>
<div v-if="classWorkForm.worktype == '习题训练'" class="pageRight-list">
<div :style="{height: '100%', 'overflow': 'auto', 'border':'1px dotted blue','border-radius':'5px', 'background-color': '#f7f7f7'}">
<div
:style="{ height: '100%', 'overflow': 'auto', 'border': '1px dotted blue', 'border-radius': '5px', 'background-color': '#f7f7f7' }">
<template v-for="(item, index) in classWorkForm.quizlist" :key="item.id">
<div style="margin: 5px; background-color: white; text-align: left;">
<div v-html="item.titleFormat" style="padding: 15px 20px 5px 20px"></div>
@ -114,7 +121,8 @@
<el-form-item label="分值">
<el-input-number v-model="item.score" :min="1" :max="100" size="small"></el-input-number>
</el-form-item>
<div style="margin-left: auto; padding: 0px 20px"><el-button size="small" type="danger" @click="handleClassWorkFormQuizRemove(index)">删除</el-button></div>
<div style="margin-left: auto; padding: 0px 20px"><el-button size="small" type="danger"
@click="handleClassWorkFormQuizRemove(index)">删除</el-button></div>
</div>
</div>
</template>
@ -126,7 +134,8 @@
</div>
<!-- 推送作业的配置对话框 -->
<SetHomework v-model="setDialog" :entpcourseid="entpcourseid" :rows="rowsList" @on-close="closeHomework" @on-success="successHomework"/>
<SetHomework v-model="setDialog" :entpcourseid="entpcourseid" :rows="rowsList" @on-close="closeHomework"
@on-success="successHomework" />
</div>
</template>
<script setup>
@ -461,9 +470,11 @@ let propsformobj = reactive({
*/
const handleCurrentChange = (val) => {
console.log(val,'???????????')
console.log(val, '选中的布置作业')
if (val && val.id > 0) {
currentRow.value.id = 1;
const typeName = val.worktype == "习题训练" ? "自主搜题" : "";
activeAptTab.value = typeName;
classWorkForm.worktype = val.worktype; //
editListItem(val, courseObj).then((obj) => {
if (obj) {
@ -775,7 +786,8 @@ const editWork = async (cform) =>{
'workid': classWorkForm.id,
'entpcourseworkid': classWorkForm.quizlist[i].id,
'workdataid': 0,
'score': classWorkForm.quizlist[i].score}
'score': classWorkForm.quizlist[i].score
}
);
}
}
@ -869,29 +881,33 @@ const handlePrint = () => {
<style scoped lang="scss">
.page {
height: 100%;
.page-top {
height: 50px;
margin-bottom: 5px;
padding: 0 10px;
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
align-items: center;
}
.page-resource {
user-select: none;
height: calc(100% - 55px);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
:deep(.el-tabs__nav) {
.el-tabs__item {
font-weight: bold;
font-size: 18px;
}
}
.page-left {
width: 240px;
background-color: white;
@ -904,6 +920,7 @@ const handlePrint = () => {
justify-content: space-between;
align-items: center;
}
.pageleft-table-cont {
height: 35px;
// width: 100%;
@ -912,20 +929,29 @@ const handlePrint = () => {
// overflow: hidden;
// flex-direction: row;
// text-overflow: ellipsis;
width: 100%; /* 设置容器的宽度 */
overflow: hidden; /* 隐藏超出容器的部分 */
white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
width: 100%;
/* 设置容器的宽度 */
overflow: hidden;
/* 隐藏超出容器的部分 */
white-space: nowrap;
/* 防止文本换行 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
.ellipsis {
width: 100%;
text-align: left;
overflow: hidden; /* 隐藏超出容器的部分 */
white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
overflow: hidden;
/* 隐藏超出容器的部分 */
white-space: nowrap;
/* 防止文本换行 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
}
.page-center {
flex: 1;
//min-width: calc(100% - 675px);
@ -943,9 +969,11 @@ const handlePrint = () => {
}
.prepare-center-xbtk {
height: 100%;
}
.prepare-center-grst {
height: 100%;
}
@ -961,6 +989,7 @@ const handlePrint = () => {
height: 100%;
}
}
.page-right {
overflow: hidden;
position: relative;
@ -972,14 +1001,16 @@ const handlePrint = () => {
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
display: flex;
flex-direction: column;
.prepare-top {
display: flex;
height: 40px;
margin: 0 10px;
border-bottom: 2px solid #e5e7eb;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
}
.prepare-con {
height: 100%;
padding: 5px 10px;
@ -998,5 +1029,4 @@ const handlePrint = () => {
}
}
}
</style>