修复路由错误

1

src/components/layout/layoutSilder.tsx

@@ -45,7 +45,8 @@ export default defineComponent({
         name: '班级',
         normalIcon: classNormal,
         isActive: false,
-        id: 3
+        id: 3,
+        path: '/classList'
       },
       {
         activeIcon: palyIcon,
@@ -68,14 +69,16 @@ export default defineComponent({
         name: '资源',
         normalIcon: resourceNormal,
         isActive: false,
-        id: 6
+        id: 6,
+        path: '/'
       },
       {
         activeIcon: setIcon,
         name: '设置',
         normalIcon: setNormal,
         isActive: false,
-        id: 7
+        id: 7,
+        path: '/'
       }
     ]);
     const checkNavBar = (item: any) => {
@@ -83,6 +86,7 @@ export default defineComponent({
         now.isActive = false;
         if (now.id == item.id) {
           now.isActive = true;
+          console.log(item.path);
           item.path && router.push(item.path);
         }
       });

src/components/searchInput/index.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
   setup(props, { emit, attrs }) {
     const isFocus = ref(false);
     return () => (
-      <>
+      <div>
         <NInput
           {...attrs}
           clearable
@@ -26,8 +26,8 @@ export default defineComponent({
             )
           }}
           value={props.searchWord}
-          onInput={($event: any) => {
-            emit('changeValue', $event);
+          onInput={(str: string) => {
+            emit('changeValue', str);
           }}
           onFocus={() => {
             isFocus.value = true;
@@ -35,7 +35,7 @@ export default defineComponent({
           onBlur={() => {
             isFocus.value = false;
           }}></NInput>
-      </>
+      </div>
     );
   }
 });

src/router/routes/index.ts

@@ -40,6 +40,16 @@ export const constantRoutes: RouteRecordRaw[] = [
         }
       },
       {
+        path: '/classList',
+        name: 'classList',
+        component: () => import('@/views/classList/index'),
+        meta: {
+          title: '班级列表',
+          singleLayout: 'blank'
+        }
+      },
+
+      {
         path: '/xiaoku-ai',
         name: 'xiaoku-ai',
         component: () => import('@/views/xiaoku-ai/index'),

src/views/classList/index.module.less

@@ -0,0 +1,22 @@
+.listWrap {
+  padding: 32px;
+  background-color: #fff;
+}
+.addBtnIcon {
+  width: 16px;
+  height: 17px;
+}
+.addBtn {
+  margin-bottom: 30px;
+  height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  line-height: 41px;
+  width: 144px;
+  padding: 0 24px;
+  :global {
+    .n-button__content {
+      font-size: 18px;
+    }
+  }
+}

src/views/classList/index.tsx

@@ -42,27 +42,15 @@ export default defineComponent({
     const columns = () => {
       return [
         {
-          title: '姓名',
+          title: '班级名称',
           key: 'id'
         },
         {
-          title: '手机号',
+          title: '学生人数',
           key: 'id'
         },
         {
-          title: '性别',
-          key: 'id'
-        },
-        {
-          title: '乐器',
-          key: 'id'
-        },
-        {
-          title: '班级',
-          key: 'id'
-        },
-        {
-          title: '学生类型',
+          title: '上次学习',
           key: 'id'
         },
         {
@@ -72,93 +60,88 @@ export default defineComponent({
       ];
     };
     return () => (
-      <>
-        <div class={styles.listWrap}>
-          <div class={styles.searchList}>
-            <NForm label-placement="left" inline>
-              <NFormItem>
-                <SearchInput
-                  class={styles.searchInput}
-                  searchWord={state.searchWord}
-                  onChangeValue={(val: string) =>
-                    (state.searchWord = val)
-                  }></SearchInput>
-              </NFormItem>
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline>
+            <NFormItem>
+              <SearchInput
+                class={styles.searchInput}
+                searchWord={state.searchWord}
+                onChangeValue={(val: string) =>
+                  (state.searchWord = val)
+                }></SearchInput>
+            </NFormItem>
 
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '学生声部',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '年级班级',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '学生类型',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <NSpace justify="end">
-                  <NButton
-                    type="primary"
-                    ghost
-                    class="resetBtn"
-                    onClick={search}>
-                    搜索
-                  </NButton>
-                  <NButton type="primary" class="searchBtn" onClick={onReset}>
-                    重置
-                  </NButton>
-                </NSpace>
-              </NFormItem>
-            </NForm>
-          </div>
-          <NButton
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '学生声部',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '年级班级',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '学生类型',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <NSpace justify="end">
+                <NButton type="primary" ghost class="resetBtn" onClick={search}>
+                  搜索
+                </NButton>
+                <NButton type="primary" class="searchBtn" onClick={onReset}>
+                  重置
+                </NButton>
+              </NSpace>
+            </NFormItem>
+          </NForm>
+        </div>
+        {/* <NButton
             class={styles.addBtn}
             type="primary"
             v-slots={{
@@ -169,24 +152,23 @@ export default defineComponent({
               )
             }}>
             新增学生
-          </NButton>
-          <div class={styles.tableWrap}>
-            <NDataTable
-              class={styles.classTable}
-              loading={state.loading}
-              columns={columns()}
-              data={state.tableList}></NDataTable>
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-              sync
-              saveKey="orchestraRegistration-key"
-            />
-          </div>
+          </NButton> */}
+        <div class={styles.tableWrap}>
+          <NDataTable
+            class={styles.classTable}
+            loading={state.loading}
+            columns={columns()}
+            data={state.tableList}></NDataTable>
+          <Pagination
+            v-model:page={state.pagination.page}
+            v-model:pageSize={state.pagination.rows}
+            v-model:pageTotal={state.pagination.pageTotal}
+            onList={getList}
+            sync
+            saveKey="orchestraRegistration-key"
+          />
         </div>
-      </>
+      </div>
     );
   }
 });

src/views/studentList/index.tsx

@@ -72,121 +72,115 @@ export default defineComponent({
       ];
     };
     return () => (
-      <>
-        <div class={styles.listWrap}>
-          <div class={styles.searchList}>
-            <NForm label-placement="left" inline>
-              <NFormItem>
-                <SearchInput
-                  class={styles.searchInput}
-                  searchWord={state.searchWord}
-                  onChangeValue={(val: string) =>
-                    (state.searchWord = val)
-                  }></SearchInput>
-              </NFormItem>
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline>
+            <NFormItem>
+              <SearchInput
+                class={styles.searchInput}
+                searchWord={state.searchWord}
+                onChangeValue={(val: string) =>
+                  (state.searchWord = val)
+                }></SearchInput>
+            </NFormItem>
 
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '学生声部',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '年级班级',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label:
-                          "Everybody's Got Something to Hide Except Me and My Monkey",
-                        value: 'song0'
-                      },
-                      {
-                        label: 'Drive My Car',
-                        value: 'song1'
-                      }
-                    ],
-                    placeholder: '学生类型',
-                    clearable: true
-                  } as any)}
-                  v-model:value={state.orchestraType}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <NSpace justify="end">
-                  <NButton
-                    type="primary"
-                    ghost
-                    class="resetBtn"
-                    onClick={search}>
-                    搜索
-                  </NButton>
-                  <NButton type="primary" class="searchBtn" onClick={onReset}>
-                    重置
-                  </NButton>
-                </NSpace>
-              </NFormItem>
-            </NForm>
-          </div>
-          <NButton
-            class={styles.addBtn}
-            type="primary"
-            v-slots={{
-              icon: () => (
-                <>
-                  <NImage class={styles.addBtnIcon} src={add}></NImage>
-                </>
-              )
-            }}>
-            新增学生
-          </NButton>
-          <div class={styles.tableWrap}>
-            <NDataTable
-              class={styles.classTable}
-              loading={state.loading}
-              columns={columns()}
-              data={state.tableList}></NDataTable>
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-              sync
-              saveKey="orchestraRegistration-key"
-            />
-          </div>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '学生声部',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '年级班级',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    {
+                      label:
+                        "Everybody's Got Something to Hide Except Me and My Monkey",
+                      value: 'song0'
+                    },
+                    {
+                      label: 'Drive My Car',
+                      value: 'song1'
+                    }
+                  ],
+                  placeholder: '学生类型',
+                  clearable: true
+                } as any)}
+                v-model:value={state.orchestraType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <NSpace justify="end">
+                <NButton type="primary" ghost class="resetBtn" onClick={search}>
+                  搜索
+                </NButton>
+                <NButton type="primary" class="searchBtn" onClick={onReset}>
+                  重置
+                </NButton>
+              </NSpace>
+            </NFormItem>
+          </NForm>
         </div>
-      </>
+        <NButton
+          class={styles.addBtn}
+          type="primary"
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage class={styles.addBtnIcon} src={add}></NImage>
+              </>
+            )
+          }}>
+          新增学生
+        </NButton>
+        <div class={styles.tableWrap}>
+          <NDataTable
+            class={styles.classTable}
+            loading={state.loading}
+            columns={columns()}
+            data={state.tableList}></NDataTable>
+          <Pagination
+            v-model:page={state.pagination.page}
+            v-model:pageSize={state.pagination.rows}
+            v-model:pageTotal={state.pagination.pageTotal}
+            onList={getList}
+            sync
+            saveKey="orchestraRegistration-key"
+          />
+        </div>
+      </div>
     );
   }
 });