src/renderer/src/router/index.js

@@ -56,6 +56,12 @@ export const constantRoutes = [
         name: 'examination-analysis',
         meta: { title: '考试分析' }
       },
+      {
+        path: 'management',
+        component: () => import('@/views/job-management/index.vue'),
+        name: 'job-management',
+        meta: { title: '作业管理' }
+      },
     ]
   },
 

src/renderer/src/views/classManage/index.vue

@@ -286,6 +286,8 @@
   }
 
   onMounted(() => {
+    // 没有加入学校之前的处理
+    if(userStore.deptId)
       getClassInfo()
     nextTick(() => {
       viewportHeight.value = getViewportHeight()

src/renderer/src/views/job-management/Header/index.vue

@@ -0,0 +1,27 @@
+<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>

src/renderer/src/views/job-management/Left/index.vue

@@ -0,0 +1,108 @@
+<template>
+<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"/>
+        <div class="item-text">
+            <div class="title-header">
+                <div class="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>
+        </div>
+        <el-icon class="item-icon"><ArrowRight /></el-icon>
+    </div>
+    </div>
+</div>
+</template>
+  
+  <script setup>
+  import { ref,markRaw  } from 'vue';
+  import { ArrowRight } from '@element-plus/icons-vue';
+  import CustomButton from '../components/button.vue'
+  
+  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:'习题训练' },
+  ]);
+  
+  const handleClick = (item) => {
+    console.log('Clicked on:', item.title);
+  };
+  </script>
+  
+  <style scoped>
+  /* 样式部分保持不变 */
+  .list-container {
+    width: 100%;
+    max-width: 400px; /* 可以根据需要调整宽度 */
+    margin: 0 auto;
+    padding: 16px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  
+  .content-list {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    margin-bottom: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  .content-list:last-child {
+    margin-bottom: 0;
+  }
+  
+  .content-list:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  }
+  
+  .item-content {
+    display: flex;
+    align-items: center;
+  }
+  
+  .item-icon {
+    font-size: 24px;
+    color: #409eff;
+  }
+  
+  .item-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-left: 5px;
+  }
+  .title-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .item-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    text-align: left;
+  }
+  
+  .item-description {
+    font-size: 12px;
+    color: #333;
+    text-align: left;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 设置最大行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  </style>

src/renderer/src/views/job-management/Right/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="list-container">
+    <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="item-description">{{ item.description }}</div>
+        </div>
+        <el-icon class="item-icon"><component :is="item.icon" /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef } from 'vue';
+import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-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 handleClick = (item) => {
+  console.log('Clicked on:', item.title);
+};
+</script>
+
+<style scoped>
+.list-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  background-color: #f5f5f5;
+}
+
+.content-list {
+  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 */
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.content-list:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+}
+
+.item-icon {
+  font-size: 24px;
+  color: #409eff;
+  margin-right: 16px;
+}
+
+.item-text {
+  flex: 1;
+}
+
+.item-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.item-description {
+  font-size: 14px;
+  color: #909399;
+}
+</style>

src/renderer/src/views/job-management/components/button.vue

@@ -0,0 +1,148 @@
+<template>
+    <button :class="['custom-button', `custom-button--${item.type}`, { 'is-plain': item.plain }]">
+      {{ item.text }}
+    </button>
+</template>
+  
+  <script setup>
+  defineProps({
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({ type: 'default', text: '', plain: false })
+    }
+  });
+  </script>
+  
+  <style scoped>
+  .custom-button {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: 0.1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 2px 2px;
+    font-size: 12px;
+    border-radius: 2px;
+  }
+
+  .custom-button.is-plain {
+    background: transparent;
+    background-color: rgba(220, 223, 230, 0.5);
+    color: #606266;
+  }
+
+  /* .custom-button.is-plain:hover {
+    background: rgba(245, 247, 250, 0.5);
+    background-color: rgba(198, 226, 255, 0.5);
+    color: #409eff;
+  } */
+
+  .custom-button--primary {
+    color: #fff;
+    background-color: rgba(64, 158, 255, 0.5);
+  }
+
+  .custom-button--primary.is-plain {
+    color: #409eff;
+    background: transparent;
+    background-color: rgba(64, 158, 255, 0.5);
+  }
+/* 
+  .custom-button--primary.is-plain:hover {
+    background: rgba(236, 245, 255, 0.5);
+    background-color: rgba(179, 216, 255, 0.5);
+    color: #409eff;
+  } */
+
+  .custom-button--success {
+    color: #fff;
+    background-color: rgba(103, 194, 58, 0.5);
+  }
+
+  .custom-button--success.is-plain {
+    color: #67c23a;
+    background: transparent;
+    background-color: rgba(103, 194, 58, 0.5);
+  }
+
+  /* .custom-button--success.is-plain:hover {
+    background: rgba(240, 249, 235, 0.5);
+    background-color: rgba(194, 231, 176, 0.5);
+    color: #67c23a;
+  } */
+
+  .custom-button--info {
+    color: #fff;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+
+  .custom-button--info.is-plain {
+    color: #909399;
+    background: transparent;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+
+  /* .custom-button--info.is-plain:hover {
+    background: rgba(244, 244, 245, 0.5);
+    background-color: rgba(211, 212, 214, 0.5);
+    color: #909399;
+  } */
+
+  .custom-button--warning {
+    color: #fff;
+    background-color: rgba(230, 162, 60, 0.5);
+  }
+
+  .custom-button--warning.is-plain {
+    color: #e6a23c;
+    background: transparent;
+    background-color: rgba(230, 162, 60, 0.5);
+  }
+
+  /* .custom-button--warning.is-plain:hover {
+    background: rgba(253, 246, 236, 0.5);
+    background-color: rgba(245, 218, 177, 0.5);
+    color: #e6a23c;
+  } */
+
+  .custom-button--danger {
+    color: #fff;
+    background-color: rgba(245, 108, 108, 0.5);
+  }
+
+  .custom-button--danger.is-plain {
+    color: #f56c6c;
+    background: transparent;
+    background-color: rgba(245, 108, 108, 0.5);
+  }
+
+  /* .custom-button--danger.is-plain:hover {
+    background: rgba(254, 240, 240, 0.5);
+    background-color: rgba(250, 179, 179, 0.5);
+    color: #f56c6c;
+  } */
+/* 
+  .custom-button:hover {
+    color: #409eff;
+    background-color: rgba(198, 226, 255, 0.5);
+  } */
+
+  .custom-button:active {
+    color: #3a8ee6;
+    background-color: rgba(58, 142, 230, 0.5);
+    outline: none;
+  }
+</style>

src/renderer/src/views/job-management/components/customSelect.vue

@@ -0,0 +1,114 @@
+<template>
+   <div class="custom-select" @mouseenter="toggleDropdown" @mouseleave="toggleDropup">
+      <div class="selected-option">
+        <el-icon><Plus /></el-icon>
+        {{ selectedOption }}
+        <el-icon><ArrowDown /></el-icon>
+      </div>
+      <transition name="dropdown">
+        <ul v-if="isDropdownOpen" class="options-list">
+          <li 
+            v-for="(option, index) in options" 
+            :key="index" 
+            class="option-item" 
+            @click="selectOption(option)">
+            {{ option }}
+          </li>
+        </ul>
+      </transition>
+    </div>
+</template>
+  
+  <script setup>
+import { Plus, ArrowDown } from '@element-plus/icons-vue'
+import { ref, computed, defineProps } from 'vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+});
+
+const isDropdownOpen = ref(false);
+const selectedOption = ref(props.placeholder);
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = true;
+};
+const toggleDropup = () => {
+  isDropdownOpen.value = false;
+};
+
+const selectOption = (option) => {
+  selectedOption.value = option;
+  isDropdownOpen.value = false;
+};
+</script>
+<style scoped>
+.custom-select {
+  position: relative;
+  width: auto;
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.selected-option {
+  padding: 10px;
+  background-color: #fff;
+  padding: 5px 10px;
+  background: rgb(64, 158, 255);
+  color: #fff;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.options-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid #dcdfe6;
+  border-top: none;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.option-item {
+  padding: 0 16px;
+  height: 34px;
+  line-height: 34px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: #606266;
+  font-size: 14px;
+}
+
+.option-item:hover {
+  background-color: #f5f7fa;
+  color: #409eff;
+}
+
+/* 动画效果 */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: all 0.3s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

src/renderer/src/views/job-management/index.vue

@@ -0,0 +1,31 @@
+<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>
+</template>
+  
+<script setup>
+import Header from './Header/index.vue'
+import Right from './Right/index.vue'
+import Left from './Left/index.vue'
+</script>
+  
+<style lang="scss" scoped>
+.page-template {
+  flex-direction: column;
+  height: 100%;
+  .tempalte-main {
+    flex: 1;
+  }
+}
+</style>

src/renderer/src/views/model/index.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="mb-4">
       <el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
+      <el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
       <!-- <el-button type="success"  @click="onchange('/model/teaching')">教材研读</el-button> -->
       <!-- <el-button type="info"  @click="onchange('/model/examination')">考试分析</el-button> -->
     </div>

src/renderer/src/views/profile/userInfo.vue

@@ -8,7 +8,7 @@
     </el-form-item>
     <el-form-item label="所属学校" prop="identity">
         <div style="display: flex;">
-          <div>{{ user.deptName }}</div>
+          <div>{{ userStore.DeptInfo.register.schoolName }}</div>
           <div>
             <el-button type="primary" link>更改学校</el-button>
           </div>
@@ -249,8 +249,13 @@ function groupByCondition(arr, condition) {
     }
   }
 onMounted(() => {
+  console.log(userStore.DeptInfo,'DeptInfo');
+  
+  // 没有加入学校前不能执行以下接口
+  if(userStore.user.deptId){
     getSubject()
     getClassInfo()
     getTheSection()
+  }
 })
 </script>