准备开始 训练详情

1

src/components/CBreadcrumb/index.tsx

@@ -13,25 +13,20 @@ import icon_back from './images/icon_back.svg';
 import icon_separator from './images/icon_separator.svg';
 import activeArrow from './images/activeArrow.png';
 import arrow from './images/arrow.png';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 export default defineComponent({
   props: {
-    father: {
-      type: String,
-      default: ''
-    },
-    selfName: {
-      type: String,
-      default: ''
-    },
-    toPath: {
-      type: String,
-      default: ''
+    list: {
+      type: Array,
+      required: true,
+      default: [] as any
     }
   },
   name: 'CBreadcrumb',
   setup(props, { emit, attrs }) {
     const router = useRouter();
+    const route = useRoute();
+    const lastNum = ref(props.list?.length || 0);
     return () => (
       <>
         <div class={styles.CBreadcrumb}>
@@ -39,15 +34,26 @@ export default defineComponent({
             <img
               style={{ cursor: 'pointer' }}
               src={icon_back}
-              onClick={() => router.push({ path: props.toPath })}
+              onClick={() => router.go(-1)}
             />
             <NBreadcrumb separator="">
-              <NBreadcrumbItem
-                onClick={() => router.push({ path: props.toPath })}>
-                {props.father}
-              </NBreadcrumbItem>
-              <img class={styles.separator} src={icon_separator} />
-              <NBreadcrumbItem> {props.selfName}</NBreadcrumbItem>
+              {props.list &&
+                props.list.map((item: any, index: number) => (
+                  <>
+                    <NBreadcrumbItem
+                      onClick={() =>
+                        router.push({
+                          path: item.path,
+                          query: { ...route.query }
+                        })
+                      }>
+                      {item.name}
+                    </NBreadcrumbItem>
+                    {index != lastNum.value - 1 ? (
+                      <img class={styles.separator} src={icon_separator} />
+                    ) : null}
+                  </>
+                ))}
             </NBreadcrumb>
           </NSpace>
         </div>

src/router/routes/index.ts

@@ -57,6 +57,16 @@ export const constantRoutes: RouteRecordRaw[] = [
           singleLayout: 'blank'
         }
       },
+      {
+        path: '/afterWorkDetail',
+        name: 'afterWorkDetail',
+        component: () => import('@/views/classList/components/afterWorkDetail'),
+        meta: {
+          title: '评测详情',
+          singleLayout: 'blank'
+        }
+      },
+      //
 
       {
         path: '/xiaoku-ai',

src/views/classList/classDetail.tsx

@@ -1,14 +1,8 @@
 import { defineComponent, ref } from 'vue';
 import styles from './index.module.less';
-import {
-  NTabs,
-  NTabPane,
-  NSpace,
-  NBreadcrumb,
-  NBreadcrumbItem
-} from 'naive-ui';
+import { NTabs, NTabPane, NSpace } from 'naive-ui';
 import { useRoute, useRouter } from 'vue-router';
-// import CBreadcrumb from '@/src/components/CBreadcrumb';
+import CBreadcrumb from '@/components/CBreadcrumb';
 import ClassStudent from './components/classStudent';
 import AfterWork from './components/afterWork';
 export default defineComponent({
@@ -17,12 +11,13 @@ export default defineComponent({
     const activeTab = ref('student');
     const router = useRouter();
     const route = useRoute();
+    const routerList = ref([
+      { name: '班级管理', path: '/classList' },
+      { name: route.query.name, path: '/classDetail' }
+    ] as any);
     return () => (
       <div>
-        {/* <CBreadcrumb
-          father="班级管理"
-          toPath="/classList"
-          selfName={(route.query.name as string) || '--'}></CBreadcrumb> */}
+        <CBreadcrumb list={routerList.value}></CBreadcrumb>
         <div class={styles.listWrap}>
           <NTabs
             class={styles.customTabs}

src/views/classList/components/afterWork.tsx

@@ -15,7 +15,7 @@ import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
 import { getTrainingList } from '../api';
 import add from './images/add.png';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import CDatePicker from '/src/components/CDatePicker';
 import {
   getNowDateAndMonday,
@@ -24,6 +24,7 @@ import {
 } from '@/utils/dateFormat';
 import dayjs from 'dayjs';
 import TrainSettings from '../../attend-class/model/train-settings';
+import { use } from 'echarts';
 export default defineComponent({
   name: 'afterWork',
   setup(props, { emit }) {
@@ -44,6 +45,7 @@ export default defineComponent({
       tableList: [] as any,
       addWorkVisible: false
     });
+    const router = useRouter();
     const route = useRoute();
     const search = () => {
       state.pagination.page = 1;
@@ -157,7 +159,7 @@ export default defineComponent({
           key: 'id',
           render(row: any) {
             return (
-              <NButton text type="primary">
+              <NButton text type="primary" onClick={() => gotoWorkDetail(row)}>
                 详情
               </NButton>
             );
@@ -165,6 +167,17 @@ export default defineComponent({
         }
       ];
     };
+    const gotoWorkDetail = (row: any) => {
+      console.log(row);
+      router.push({
+        path: '/afterWorkDetail',
+        query: {
+          ...route.query,
+          teacherName: row.teacherName,
+          trainingId: row.id
+        }
+      });
+    };
     return () => (
       <div>
         <div class={styles.searchList}>
@@ -187,11 +200,11 @@ export default defineComponent({
                     },
                     {
                       label: '已结束',
-                      value: '1'
+                      value: 1
                     },
                     {
                       label: '进行中',
-                      value: '0'
+                      value: 0
                     }
                   ],
                   placeholder: '训练状态',
@@ -243,7 +256,13 @@ export default defineComponent({
           preset="card"
           class={[styles.attendClassModal, styles.trainClassModal]}
           title={'训练设置'}>
-          <TrainSettings onClose={() => (state.addWorkVisible = false)} />
+          <TrainSettings
+            classGroupId={route.query.id as string}
+            onClose={() => {
+              getList();
+              state.addWorkVisible = false;
+            }}
+          />
         </NModal>
       </div>
     );

src/views/classList/components/afterWorkDetail.tsx

@@ -0,0 +1,196 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { getStudentList } from '../api';
+import add from './images/add.png';
+import { useRoute } from 'vue-router';
+import CBreadcrumb from '/src/components/CBreadcrumb';
+export default defineComponent({
+  name: 'student-studentList',
+  setup(props, { emit }) {
+    const state = reactive({
+      searchForm: { keyword: '', status: null as any },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      tableList: [] as any
+    });
+    const route = useRoute();
+    const routerList = ref([
+      { name: '班级管理', path: '/classList' },
+      { name: route.query.name, path: '/classDetail' },
+      { name: route.query.teacherName, path: '/afterWorkDetail' }
+    ] as any);
+
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      console.log('search', state);
+    };
+
+    const onReset = () => {
+      state.searchForm = { keyword: '', status: null as any };
+      search();
+    };
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const res = await getStudentList({
+          classGroupId: route.query.id,
+          ...state.searchForm,
+          ...state.pagination
+        });
+
+        state.tableList = res.data.rows;
+
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    onMounted(() => {
+      getList();
+    });
+    const columns = () => {
+      return [
+        {
+          title: '学生姓名',
+          key: 'nickname'
+        },
+        {
+          title: '手机号',
+          key: 'phone'
+        },
+        {
+          title: '性别',
+          key: 'sex',
+          render(row: any) {
+            return <>{row.sex == '0' ? '女' : '男'}</>;
+          }
+        },
+
+        // {
+        //   title: '学生类型',
+        //   key: 'studentType',
+        //   render(row: any) {
+        //     return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
+        //   }
+        // },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any) {
+            return (
+              <NButton text type="primary">
+                详情
+              </NButton>
+            );
+          }
+        }
+      ];
+    };
+    return () => (
+      <div>
+        <CBreadcrumb list={routerList.value}></CBreadcrumb>
+        <div class={styles.listWrap}>
+          <div class={styles.teacherList}>{/* <div class={}> </div> */}</div>
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+              <NFormItem>
+                <SearchInput
+                  {...{ placeholder: '请输入学生姓名' }}
+                  class={styles.searchInput}
+                  searchWord={state.searchForm.keyword}
+                  onChangeValue={(val: string) =>
+                    (state.searchForm.keyword = val)
+                  }></SearchInput>
+              </NFormItem>
+
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label: '训练状态',
+                        value: null
+                      },
+                      {
+                        label: '已结束',
+                        value: 1
+                      },
+                      {
+                        label: '进行中',
+                        value: 0
+                      }
+                    ],
+                    placeholder: '训练状态',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={state.searchForm.status}></CSelect>
+              </NFormItem>
+
+              <NFormItem>
+                <NSpace justify="end">
+                  <NButton type="primary" class="searchBtn" onClick={search}>
+                    搜索
+                  </NButton>
+                  <NButton
+                    type="primary"
+                    ghost
+                    class="resetBtn"
+                    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>
+      </div>
+    );
+  }
+});