Bläddra i källkod

```
feat(LearningSystem): 添加空状态显示和课程筛选功能

- 在LearnNote页面添加el-empty组件显示空状态
- 为OtherCourse组件添加info属性传递
- 实现根据skillTag变化动态筛选课程列表
- 添加响应式搜索表单和watch监听器

fix(WorkflowTrade): 修改路由参数配置

- 将workflow-trade-add路由改为带:id参数的动态路由
```

zhangningning 1 månad sedan
förälder
incheckning
84b71e36e2

+ 3 - 0
src/pages/LearnNote/LearnNote.vue

@@ -18,6 +18,9 @@
               <div class="font_size14 line2 gray mt10">{{ item.courseIntro }}</div>
             </div>
           </div>
+          <div v-if="list.length === 0" >
+            <el-empty :image-size="200" />
+          </div>
         </div>
       </div>
       <div class="flex_1 ml20 fit_content bg_color_fff border_radius_10 padding16 box_shadow_card">

+ 1 - 1
src/pages/LearningSystem/LearningSystemDetail.vue

@@ -64,7 +64,7 @@
           </el-tabs>
         </div>
         <div class="detail_right bg_color_fff padding16 border_radius_16 box_shadow_card">
-          <OtherCourse />
+          <OtherCourse :info="info"/>
         </div>
       </div>
     </div>

+ 25 - 8
src/pages/LearningSystem/components/OtherCourse.vue

@@ -16,17 +16,34 @@
 </template>
 <script setup>
 import { getCourseList } from '@/api/course.js'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, reactive } from 'vue'
+
+const props =defineProps({
+  info: {
+    type: Object,
+    default: () => ({})
+  }
+})
 
 const list = ref([]);
-onMounted(() => {
-  getList();
-});
+const searchFom = reactive({
+  skillTag: '',
+  pageNum: 1,
+  pageSize: 5,
+})
+
+watch(() => props.info.skillTag, (newVal, oldVal) => {
+  if(newVal !== oldVal){
+    // 课程ID变化时,重置分页参数
+    searchFom.skillTag = newVal
+    getList('init');
+  }
+})
+// onMounted(() => {
+//   getList();
+// });
 const getList = async (type) => {
-  const res = await getCourseList({
-    pageNum: 1,
-    pageSize: 5,
-  })
+  const res = await getCourseList(searchFom)
   if(res.code === 200){
     list.value = res.rows || [];
   }

+ 1 - 1
src/router/index.js

@@ -73,7 +73,7 @@ const routes = [
         meta: { title: '' }
       },
       {
-        path: 'workflow-trade-add',
+        path: 'workflow-trade-add/:id',
         name: 'WorkflowTradeAdd',
         component: () => import('@/pages/workflowTrade/workflowTradeAdd.vue'),
         meta: { title: 'route.gongzuoliu_trade_add' }