添加上课记录

数据显示还需要调协

src/utils/index.ts

@@ -4,6 +4,7 @@ import { NIcon, NTag } from 'naive-ui';
 import { PageEnum } from '@/enums/pageEnum';
 import { isObject } from './is/index';
 import { cloneDeep } from 'lodash';
+import dayjs from 'dayjs';
 /**
  * render 图标
  * */
@@ -292,3 +293,30 @@ export function scrollToErrorForm() {
     behavior: 'smooth'
   });
 }
+
+export const getTimes = (
+  times: any,
+  keys: Array<string> = [],
+  format = 'YYYY-MM-DD'
+) => {
+  if (times && times.length) {
+    return format == 'YYYY-MM-DD'
+      ? {
+          [keys[0] || 'start']: dayjs(times[0]).isValid()
+            ? dayjs(times[0]).format(format) + ' 00:00:00'
+            : '',
+          [keys[1] || 'end']: dayjs(times[1]).isValid()
+            ? dayjs(times[1]).format(format) + ' 23:59:59'
+            : ''
+        }
+      : {
+          [keys[0] || 'start']: dayjs(times[0]).isValid()
+            ? dayjs(times[0]).format(format)
+            : '',
+          [keys[1] || 'end']: dayjs(times[1]).isValid()
+            ? dayjs(times[1]).format(format)
+            : ''
+        };
+  }
+  return {};
+};

src/views/classList/api.ts

@@ -66,3 +66,12 @@ export const getTrainingList = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 上课记录
+ */
+export const courseSchedulePage = (params: any) => {
+  return request.post('/edu-app/courseSchedule/page', {
+    data: params
+  });
+};

src/views/classList/classDetail.tsx

@@ -1,15 +1,15 @@
 import { defineComponent, ref } from 'vue';
 import styles from './index.module.less';
-import { NTabs, NTabPane, NSpace } from 'naive-ui';
-import { useRoute, useRouter } from 'vue-router';
+import { NTabs, NTabPane } from 'naive-ui';
+import { useRoute } from 'vue-router';
 import CBreadcrumb from '@/components/CBreadcrumb';
 import ClassStudent from './components/classStudent';
 import AfterWork from './components/afterWork';
+import ClassRecord from './components/classRecord';
 export default defineComponent({
   name: 'base-setting',
-  setup(props, { emit, attrs }) {
-    const activeTab = ref('student');
-    const router = useRouter();
+  setup() {
+    const activeTab = ref('attendclass');
     const route = useRoute();
     const routerList = ref([
       { name: '班级管理', path: '/classList' },
@@ -33,7 +33,9 @@ export default defineComponent({
               <AfterWork></AfterWork>
             </NTabPane>
             <NTabPane name="practice" tab="练习记录"></NTabPane>
-            <NTabPane name="attendclass" tab="上课记录"></NTabPane>
+            <NTabPane name="attendclass" tab="上课记录">
+              <ClassRecord />
+            </NTabPane>
           </NTabs>
         </div>
       </div>

src/views/classList/components/classRecord.module.less

@@ -0,0 +1,64 @@
+.tableContainer {
+  background: #F7F9FF;
+  border-radius: 16px;
+  width: 548px;
+  height: 195px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  font-size: 20px;
+  color: #131415;
+  line-height: 28px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+  .time {
+    font-size: 20px;
+    color: #131415;
+    line-height: 28px;
+  }
+
+  .ntag {
+    color: #2089FF;
+    border-radius: 6px;
+    // border: 1px solid #97C7FF;
+    font-size: 16px;
+    --n-border: 1px solid #97C7FF;
+    padding: 4px 14px;
+  }
+}
+
+.content {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+
+  .navatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    padding: 2px;
+    border: 1px solid #198CFE;
+    margin-right: 15px;
+    flex-shrink: 0;
+  }
+
+  .userInfo {
+    h2 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+    }
+
+    p {
+      font-size: 16px;
+      color: #777777;
+      line-height: 26px;
+    }
+  }
+
+}

src/views/classList/components/classRecord.tsx

@@ -0,0 +1,132 @@
+import { defineComponent, onMounted, reactive } from 'vue';
+import { NAvatar, NButton, NForm, NFormItem, NSpace, NTag } from 'naive-ui';
+import Pagination from '@/components/pagination';
+import { courseSchedulePage } from '../api';
+import { useRoute } from 'vue-router';
+import CDatePicker from '/src/components/CDatePicker';
+import styles from './classRecord.module.less';
+import teacherIcon from '@components/layout/images/teacherIcon.png';
+import dayjs from 'dayjs';
+import { getTimes } from '/src/utils';
+export default defineComponent({
+  name: 'class-record',
+  setup() {
+    const nowTime = dayjs().format('YYYY-MM-DD');
+    const state = reactive({
+      searchForm: {
+        createTimer: [
+          dayjs(nowTime).subtract(1, 'month').valueOf(),
+          dayjs(nowTime).valueOf()
+        ] as any
+      },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 0
+      },
+      tableList: [] as any
+    });
+    const route = useRoute();
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+    };
+
+    const onReset = () => {
+      state.searchForm = { createTimer: null as any };
+      search();
+    };
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const res = await courseSchedulePage({
+          classGroupId: route.query.id,
+          ...getTimes(
+            state.searchForm.createTimer,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          ),
+          ...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();
+    });
+    return () => (
+      <div>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline>
+            <NFormItem>
+              <CDatePicker
+                v-model:timerValue={state.searchForm.createTimer}
+                separator={'-'}
+                type="daterange"></CDatePicker>
+            </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>
+        <div class={styles.tableWrap}>
+          <NSpace>
+            {state.tableList.map((item: any) => (
+              <div class={styles.tableContainer}>
+                <div class={styles.header}>
+                  <div class={styles.time}>
+                    {dayjs(item.classDate).format('YYYY-MM-DD')}
+                  </div>
+                  <NTag type="primary" class={styles.ntag} strong>
+                    三年二班
+                  </NTag>
+                </div>
+                <div class={styles.content}>
+                  <NAvatar
+                    class={styles.navatar}
+                    round
+                    src={item.teacherAvatar || teacherIcon}
+                  />
+                  <div class={styles.userInfo}>
+                    <h2>{item.teacherName}</h2>
+                    <p>
+                      人教版二年级上册 | 第二十一单元
+                      |【歌表演】我和我的祖国一刻也不能分割
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </NSpace>
+
+          <Pagination
+            v-model:page={state.pagination.page}
+            v-model:pageSize={state.pagination.rows}
+            v-model:pageTotal={state.pagination.pageTotal}
+            onList={getList}
+            sync
+            saveKey="classRecord-key"
+          />
+        </div>
+      </div>
+    );
+  }
+});