作业

src/components/layout/layoutSilder.tsx

@@ -21,6 +21,8 @@ import dataNormal from './images/dataNormal.png';
 import SilderItem from './modals/silderItem';
 import icon_1_1 from './images/icon_1_1.png';
 import icon_1_2 from './images/icon_1_2.png';
+import iconHomeWork from './images/icon-homework.png';
+import iconHomeWorkActive from './images/icon-homework-active.png';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 export default defineComponent({
   name: 'layoutSilder',
@@ -77,6 +79,14 @@ export default defineComponent({
         path: '/prepare-lessons'
       },
       {
+        activeIcon: iconHomeWorkActive,
+        name: '作业记录',
+        normalIcon: iconHomeWork,
+        isActive: false,
+        id: 9,
+        path: '/homework-record'
+      },
+      {
         activeIcon: icon_1_1,
         name: '制谱',
         normalIcon: icon_1_2,

src/router/routes/index.ts

@@ -203,6 +203,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: {
           title: '乐理知识'
         }
+      },
+      {
+        path: '/homework-record',
+        name: 'homework-record',
+        component: () => import('@/views/homework-record'),
+        meta: {
+          title: '作业记录'
+        }
       }
     ]
   },

src/views/home/components/practiceData.tsx

@@ -176,7 +176,9 @@ export default defineComponent({
           {
             // smooth: true,
             data: payForm.timeList,
+            symbolSize: 10,
             type: 'line',
+            symbol: 'circle',
             smooth: true,
             // barWidth: '48px',
             // label: {

src/views/homework-record/index.module.less

@@ -0,0 +1,264 @@
+.listWrap {
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+}
+
+.searchList {
+  .searchInput {
+    max-width: 260px;
+  }
+
+  .CDatePickerItem {
+    :global {
+      .n-input {
+        width: 303px;
+      }
+    }
+  }
+
+  :global {
+    .n-form.n-form--inline .n-form-item {
+      margin-right: 18px;
+    }
+
+    .n-form-item-blank>div {
+      .n-select {
+        min-width: 150px !important;
+        width: 150px !important;
+      }
+    }
+  }
+}
+
+.infoListWrap {
+  min-height: calc(100vh - 150px) !important
+}
+
+.addBtnIcon {
+  width: 13Px !important;
+  height: 14Px !important;
+}
+
+.addBtn {
+  margin-bottom: 30px;
+  background: #198cfe !important;
+  border-radius: 7Px !important;
+  padding: 0 18Px !important;
+  font-weight: 600 !important;
+}
+
+.btnGroup {
+  padding: 40px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}
+
+.addClass {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 50px;
+}
+
+.listWrap {
+  min-height: 100%;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+}
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 0 40px;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroup {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.listSection {
+  padding: 0 0 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 20px 2%;
+
+  &>div {
+    width: 49% !important;
+  }
+}
+
+.item {
+  background: #F7F9FF;
+  border-radius: 13px;
+  padding: 0 17px 17px;
+
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 13px 0;
+
+    .navatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      padding: 2px;
+      border: 1px solid #198CFE;
+      margin-right: 15px;
+      flex-shrink: 0;
+      background-color: #fff !important;
+
+      :global {
+        img {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .userInfo {
+      padding-top: 4px;
+      flex: 1;
+
+      h2 {
+        font-size: max(17px, 14Px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 28px;
+      }
+
+      p {
+        font-size: max(16px, 12Px);
+        color: #777777;
+        line-height: 28px;
+      }
+    }
+
+    .ing {
+      font-weight: 500;
+      color: #1677FF;
+    }
+
+    .over {
+      font-weight: 500;
+      color: #AAAAAA;
+    }
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 13px;
+    background: #FFFFFF;
+    border-radius: 10px;
+
+    .homeTitle {
+      font-size: max(17px, 14Px);
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      padding-bottom: 5px;
+    }
+
+    .homeContent {
+      padding-bottom: 5px;
+    }
+
+    .homeworkText {
+      display: flex;
+      align-items: flex-start;
+
+      .pSection {
+        max-width: 500px;
+      }
+
+      .p1,
+      .p2 {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+
+      }
+
+      .p1::before,
+      .p2::before {
+        content: '';
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        background: #198CFE;
+        margin-right: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        transform: translateY(-3px);
+      }
+
+      .p2 {
+        padding-top: 6px;
+      }
+
+      .p2::before {
+        background: #F44040;
+      }
+    }
+
+    .title {
+      font-size: max(13px, 12Px);
+      color: #777777;
+      flex-shrink: 0;
+    }
+
+    .text {
+      font-size: max(13px, 12Px);
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+    }
+
+    .errorBtn {
+      min-width: 93px;
+      // height: 30px;
+      --n-height: 36px !important;
+      // background: #F94D50;
+      border-radius: 7px;
+      --n-font-size: max(13px, 12Px);
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 18px;
+    }
+  }
+}

src/views/homework-record/index.tsx

@@ -0,0 +1,358 @@
+import { defineComponent, reactive, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NAvatar,
+  NButton,
+  NDivider,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CDatePicker from '/src/components/CDatePicker';
+import CSelect from '@/components/CSelect';
+import add from '@/views/studentList/images/add.png';
+import { useRoute, useRouter } from 'vue-router';
+import { getGradeLevelList, getGradeYearList } from '../home/api';
+import { initCache, setCache } from '/src/hooks/use-async';
+import { classArray, getgradeNumList } from '../classList/contants';
+import teacherIcon from '@components/layout/images/teacherIcon.png';
+import Pagination from '/src/components/pagination';
+export default defineComponent({
+  name: 'homework-record',
+  setup() {
+    const state = reactive({
+      searchForm: {
+        keyword: null as any,
+        currentClass: '',
+        currentGradeNum: '',
+        subjectId: '',
+        gradeYear: '',
+        gradeLevel: ''
+      },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 6
+      },
+      gradeNumList: [] as any,
+      tableList: [] as any,
+      studentVisible: false,
+      activeRow: null as any,
+      showaddClass: false,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any
+    });
+    const formRef = ref();
+    const message = useMessage();
+    const router = useRouter();
+    const route = useRoute();
+    const search = () => {
+      state.pagination.page = 1;
+      // getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+    state.gradeNumList = getgradeNumList();
+    const onReset = () => {
+      state.searchForm = {
+        keyword: null as any,
+        currentClass: '' as any,
+        currentGradeNum: '' as any,
+        subjectId: '' as any,
+        gradeYear: '' as any,
+        gradeLevel: ''
+      };
+      if (state.popSelectYearList.length > 0) {
+        state.searchForm.gradeYear = state.popSelectYearList[1].id;
+      }
+      // getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+
+    const getList = async () => {
+      //   // classGroupList
+      //   state.loading = true;
+      //   try {
+      //     const res = await classGroupList({
+      //       ...state.searchForm,
+      //       ...state.pagination
+      //     });
+      //     state.tableList = res.data.rows;
+      //     state.pagination.pageTotal = res.data.total;
+      //     state.loading = false;
+      //     setTimeout(() => {
+      //       if (state.tableList.length > 0) {
+      //         showGuide.value = true;
+      //       }
+      //     }, 500);
+      //   } catch (e) {
+      //     state.loading = false;
+      //     console.log(e);
+      //   }
+      //   console.log('getList');
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学年'
+        });
+        state.popSelectYearList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeYear) {
+          state.searchForm.gradeYear = temp[1].id;
+        }
+      } catch {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        state.popSelectLevelList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeLevel) {
+          state.searchForm.gradeLevel = temp[0].id;
+        }
+      } catch {
+        //
+      }
+    };
+
+    initCache({
+      current: state.searchForm,
+      callBack: (active: any) => {
+        state.searchForm = active;
+      }
+    });
+
+    onMounted(async () => {
+      state.loading = true;
+      await getYearList();
+      await getLevelList();
+      state.loading = false;
+    });
+    return () => (
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline ref={formRef}>
+            <NFormItem>
+              <SearchInput
+                {...{ placeholder: '请输入作业标题关键词' }}
+                class={styles.searchInput}
+                searchWord={state.searchForm.keyword}
+                onChangeValue={(val: string) =>
+                  (state.searchForm.keyword = val)
+                }></SearchInput>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectYearList,
+                  placeholder: '选择学年',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeYear}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectLevelList,
+                  placeholder: '选择学级',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeLevel}></CSelect>
+            </NFormItem>
+
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.gradeNumList,
+                  placeholder: '选择年级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentGradeNum}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: classArray,
+                  placeholder: '选择班级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentClass}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  // options: state.subjectList,
+                  placeholder: '选择状态',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.subjectId}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CDatePicker
+                class={styles.CDatePickerItem}
+                separator={'-'}
+                type="daterange"
+                // timerValue={timer.value}
+              ></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>
+        <NButton
+          class={styles.addBtn}
+          type="primary"
+          onClick={() => (state.showaddClass = true)}
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage
+                  class={styles.addBtnIcon}
+                  previewDisabled
+                  src={add}></NImage>
+              </>
+            )
+          }}>
+          布置作业
+        </NButton>
+        <div class={styles.tableWrap}>
+          <div class={styles.listSection}>
+            {[1, 2, 3].map(() => (
+              <div class={styles.item}>
+                <div class={styles.header}>
+                  <NAvatar class={styles.navatar} round src={teacherIcon} />
+                  <div class={styles.userInfo}>
+                    <h2>孙忆枫</h2>
+                    <p>
+                      布置时间：2022-10-08<span>|</span>
+                      <span>截止时间：2022-10-09</span>
+                    </p>
+                  </div>
+                  <div class={styles.ing}>进行中</div>
+                </div>
+                <div class={styles.content}>
+                  <div>
+                    <div class={styles.homeTitle}>2024年01月17日-课后作业</div>
+                    <div class={styles.homeContent}>
+                      <span class={styles.title}>作业对象：</span>
+                      <span class={styles.text}>一年级1班、一年级2班</span>
+                    </div>
+                    <div class={[styles.homeContent, styles.homeworkText]}>
+                      <span class={styles.title}>作业内容：</span>
+                      <div class={styles.pSection}>
+                        <p class={[styles.text, styles.p1]}>
+                          练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
+                          练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
+                        </p>
+                        <p class={[styles.text, styles.p2]}>
+                          练习曲目《小星星》、《我和我的祖国》、《千与千寻》-课后作业
+                        </p>
+                      </div>
+                    </div>
+                    <div class={styles.homeSubmit}>
+                      <span class={styles.title}>已提交：</span>
+                      <span class={styles.text}>0/50人</span>
+                      <NDivider vertical />
+                      <span class={styles.title}>提交率：</span>
+                      <span class={styles.text}>60%</span>
+                      <NDivider vertical />
+                      <span class={styles.title}>合格人数：</span>
+                      <span class={styles.text}>20人</span>
+                      <NDivider vertical />
+                      <span class={styles.title}>合格率：</span>
+                      <span class={styles.text}>80%</span>
+                    </div>
+                  </div>
+
+                  <NButton class={styles.errorBtn} type="error" color="#F94D50">
+                    撤回
+                  </NButton>
+                </div>
+              </div>
+            ))}
+          </div>
+          {/* <NDataTable
+            v-slots={{
+              empty: () => <TheEmpty></TheEmpty>
+            }}
+            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
+          />
+        </div>
+
+        {/* <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'删除班级'}>
+          <div class={styles.studentRemove}>
+            <p>
+              确定要删除班级么？
+              <span>删除班级信息将会清空</span>。
+            </p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round type="primary" onClick={removeClass}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal> */}
+      </div>
+    );
+  }
+});