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

add:作业管理样式；

This commit is contained in:
小杨 2024-11-13 11:27:02 +08:00
parent a2c14b0d0a
commit af0dd7f565
5 changed files with 153 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,27 +0,0 @@
<template>
<div class="mb-4">
<div>
<el-button type="danger" disabled>批量删除</el-button>
<el-button type="primary" disabled>批量推送</el-button>
</div>
<CustomSelect
:options="options"
placeholder="设计新作业"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CustomSelect from '../components/customSelect.vue';
const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
</script>
<style lang="scss" scoped>
.mb-4{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #fff;
padding: 10px;
}
</style>

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

@ -2,10 +2,10 @@
<div class="list-container">
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
<div class="item-content">
<el-checkbox v-model="item.checked"/>
<el-checkbox v-model="item.checked" @click.stop="clickCheckbox(item)"/>
<div class="item-text">
<div class="title-header">
<div class="item-title">{{ item.title }}</div>
<div class="item-title" :title="item.title">{{ item.title }}</div>
<CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
</div>
<div class="item-description" :title="item.description">{{ item.description }}</div>
@ -17,21 +17,39 @@
</template>
<script setup>
import { ref,markRaw } from 'vue';
import { ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import CustomButton from '../components/button.vue'
const emits = defineEmits(['checked']);
const items = ref([
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:1,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:2,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
{ id:3,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:4,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
{ id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
]);
// 获取选中的checkbox的id
const selectIds = ref([])
const handleClick = (item) => {
console.log('Clicked on:', item.title);
console.log(item.title);
};
// 选择多选框
const clickCheckbox = (item,e) => {
if(item.checked === true){
if(selectIds.value.includes(item.id)){
const index = selectIds.value.indexOf(item.id)
selectIds.value.splice(index,1)
}
}else{
selectIds.value.push(item.id)
}
emits('checked',selectIds.value)
}
</script>
<style scoped>
@ -40,7 +58,7 @@
width: 100%;
max-width: 400px; /* 可以根据需要调整宽度 */
margin: 0 auto;
padding: 16px;
padding: 8px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -50,7 +68,7 @@
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 16px;
padding: 8px;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.3s ease;
@ -80,6 +98,7 @@
flex-direction: column;
flex: 1;
margin-left: 5px;
}
.title-header{
display: flex;
@ -92,6 +111,12 @@
font-weight: 500;
color: #303133;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 设置最大行数 */
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.item-description {

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

@ -3,27 +3,34 @@
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
<div class="item-content">
<div class="item-text">
<div class="item-title">{{ item.title }}</div>
<div class="title-header">
<div class="item-title">{{ item.title }}</div>
<el-icon class="item-icon"><component :is="item.icon" /></el-icon>
</div>
<div class="item-description">{{ item.description }}</div>
<div class="item-bottom">
<CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
</div>
</div>
<el-icon class="item-icon"><component :is="item.icon" /></el-icon>
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef } from 'vue';
import { ref,markRaw } from 'vue';
import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-vue';
import CustomButton from '../components/button.vue'
const items = shallowRef([
{ title: '自主搜题', description: '1111111', icon: Document },
{ title: '校本题库', description: '222222', icon: User },
{ title: '个人题库', description: '333333', icon: Setting },
{ title: '智能推荐', description: '444444', icon: Plus },
{ title: '课堂展示', description: '555555', icon: ArrowDown },
{ title: '常规作业', description: '555555', icon: ArrowDown },
{ title: 'AI设计作业', description: '555555', icon: ArrowDown },
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:'常规作业' },
]);
const handleClick = (item) => {
@ -36,7 +43,7 @@ const handleClick = (item) => {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
padding: 8px;
background-color: #f5f5f5;
}
@ -44,8 +51,8 @@ const handleClick = (item) => {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 16px;
width: calc(33.333% - 32px); /* 3列布局，每列减去gap */
padding: 8px;
width: calc(25% - 16px);
cursor: pointer;
transition: all 0.3s ease;
}
@ -75,10 +82,26 @@ const handleClick = (item) => {
font-weight: 500;
color: #303133;
margin-bottom: 4px;
font-weight: bold;
}
.item-description {
font-size: 14px;
color: #909399;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 设置最大行数 */
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.title-header{
display: flex;
justify-content: space-between;
align-items: center;
}
.item-bottom{
text-align: right;
}
</style>

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

@ -21,7 +21,8 @@
<script setup>
import { Plus, ArrowDown } from '@element-plus/icons-vue'
import { ref, computed, defineProps } from 'vue';
import { ref, defineEmits, defineProps } from 'vue';
const emits = defineEmits(['select-click']);
const props = defineProps({
options: {
@ -47,6 +48,7 @@ const toggleDropup = () => {
const selectOption = (option) => {
selectedOption.value = option;
isDropdownOpen.value = false;
emits('select-click', option)
};
</script>
<style scoped>

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

@ -1,31 +1,93 @@
<template>
<div class="page-template flex">
<Header/>
<el-row :gutter="20" class="tempalte-main">
<el-col :span="6">
<!--左侧列表-->
<Left/>
</el-col>
<el-col :span="18">
<!--右侧-->
<Right/>
</el-col>
</el-row>
<!-- // 顶部 -->
<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>
</template>
<script setup>
import Header from './Header/index.vue'
import Right from './Right/index.vue'
import Left from './Left/index.vue'
import { ref, onMounted, nextTick } from 'vue';
import Right from './Right/index.vue';
import Left from './Left/index.vue';
import CustomSelect from './components/customSelect.vue';
const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
// 判断是否有选中的checkbox框
const isChceked = ref(false);
const viewportHeight = ref(0);
// 选中的checkbox框
const checked = (val) => {
console.log(val);
val.length > 0 ? isChceked.value = true : isChceked.value = false;
}
// 选择的作业设计类型
const selectClick = (val) => {
console.log(val);
}
// 获取视口高度
const getViewportHeight = () => {
return Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
);
}
onMounted(() => {
nextTick(() => {
window.addEventListener('resize', () => {
viewportHeight.value = getViewportHeight();
});
});
});
</script>
<style lang="scss" scoped>
.mb-4 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #fff;
padding: 10px;
}
.page-template {
flex-direction: column;
height: 100%;
overflow-x: hidden; // 防止横向滚动条
.tempalte-main {
flex: 1;
}
}
.no-horizontal-scroll{
overflow-y: scroll;
overflow-x: hidden;
}
</style>