Merge branch 'startLogin' into dev

package.json

@@ -30,6 +30,7 @@
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "moveable": "^0.49.0",

src/components/TheQrCode/index.tsx

@@ -178,22 +178,22 @@ export default defineComponent({
         gifBackground: gifBgSrc,
         text: this.text,
         size: this.size,
-        // margin: this.margin,
-        // colorDark: this.colorDark,
-        // colorLight: this.colorLight,
-        // backgroundColor: this.backgroundColor,
-        // backgroundImage: img,
-        // // backgroundDimming: this.backgroundDimming,
-        // // // logoImage: logoImg + '?' + new Date().getTime(),
-        // logoScale: this.logoScale,
-        // logoBackgroundColor: this.logoBackgroundColor,
-        // correctLevel: this.correctLevel,
-        // logoMargin: this.logoMargin,
-        // logoCornerRadius: this.logoCornerRadius,
-        // whiteMargin: toBoolean(this.whiteMargin),
-        // dotScale: this.dotScale,
-        // autoColor: toBoolean(this.autoColor),
-        // components: this.components
+        margin: this.margin,
+        colorDark: this.colorDark,
+        colorLight: this.colorLight,
+        backgroundColor: this.backgroundColor,
+        backgroundImage: img,
+        backgroundDimming: this.backgroundDimming,
+        logoImage: logoImg + '?' + new Date().getTime(),
+        logoScale: this.logoScale,
+        logoBackgroundColor: this.logoBackgroundColor,
+        correctLevel: this.correctLevel,
+        logoMargin: this.logoMargin,
+        logoCornerRadius: this.logoCornerRadius,
+        whiteMargin: toBoolean(this.whiteMargin),
+        dotScale: this.dotScale,
+        autoColor: toBoolean(this.autoColor),
+        components: this.components
       })
         .draw()
         .then((dataUri: any) => {

src/views/attend-class/model/train-type/index.tsx

@@ -52,6 +52,10 @@ export default defineComponent({
     offShelf: {
       type: Boolean,
       default: false
+    },
+    isCLassWork: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'delete', 'edit', 'offShelf'],
@@ -132,7 +136,7 @@ export default defineComponent({
         </div>
         <div class={styles['train-content']}>
           <NImage src={props.item.coverImg} previewDisabled objectFit="cover" />
-          {props.isDisabled ? (
+          {props.isDisabled && !props.isCLassWork ? (
             <div class={styles.disPreview}>
               <NProgress
                 percentage={
@@ -158,8 +162,9 @@ export default defineComponent({
                     </h4>
                   ) : (
                     <h4>
+
                       {props.item.trainingTimes
-                        ? (props.item.trainingTimes / 60).toFixed(0)
+                        ? parseInt((props.item.trainingTimes / 60)+'')
                         : 0}
                       <span>分钟</span>
                     </h4>

src/views/classList/api.ts

@@ -154,8 +154,18 @@ export const getTrainingStat = (params: any) => {
  * 获取班级训练详情
  */
 export const getTrainingClassDetail = (params: any) => {
-  return request.get(`/edu-app/lessonTraining/trainingDetail`, {
+  return request.get(`/edu-app/lessonTraining/trainingStudentDetail`, {
     params,
     requestType: 'form'
   });
 };
+
+
+/**
+ * 学生练习记录
+ */
+export const getTrainingStatList = (params: any) => {
+  return request.post(`/edu-app/musicPracticeRecordStat/trainingList`, {
+    data: params
+  });
+};

src/views/classList/components/classStudent.tsx

@@ -191,7 +191,6 @@ export default defineComponent({
             v-model:pageTotal={state.pagination.pageTotal}
             onList={getList}
             sync
-            saveKey="orchestraRegistration-key"
           />
         </div>
       </div>

src/views/classList/components/testRecode.tsx

@@ -100,6 +100,7 @@ export default defineComponent({
         });
         state.testInfo.practiceDurationAvg = res.data.practiceDurationAvg;
         state.testInfo.practiceUserCount = res.data.practiceUserCount;
+        state.testInfo.vipUserCount = res.data.vipUserCount
       } catch (e) {
         console.log(e);
       }
@@ -147,7 +148,7 @@ export default defineComponent({
           title: '学生类型',
           key: 'studentType',
           render(row: any) {
-            return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
+            return <>{row.vipFlag ? '会员' : '普通'}</>;
           }
         },
         {

src/views/classList/index.tsx

@@ -40,7 +40,6 @@ export default defineComponent({
         currentClass: null,
         currentGradeNum: null
       },
-
       orchestraType: null,
       courseTypeCode: null,
       loading: false,
@@ -171,6 +170,7 @@ export default defineComponent({
                     学生调整
                   </NButton>
                   <NButton
+                  disabled={!(row.preStudentNum > 0)}
                     type="primary"
                     text
                     onClick={() => classesBegin(row)}>
@@ -262,7 +262,7 @@ export default defineComponent({
           v-slots={{
             icon: () => (
               <>
-                <NImage class={styles.addBtnIcon} src={add}></NImage>
+                <NImage class={styles.addBtnIcon} previewDisabled src={add}></NImage>
               </>
             )
           }}>

src/views/classList/modals/Gotoclass.tsx

@@ -68,7 +68,7 @@ export default defineComponent({
           emit('close');
           window.open(href, +new Date() + '');
         } else {
-          message.error('当前章节没有课件,请重新学则');
+          message.error('当前章节暂无课件，请重新选择');
         }
       });
 

src/views/classList/modals/classTrainingDetails.tsx

@@ -151,6 +151,7 @@ export default defineComponent({
                 style={{ marginBottom: '20px' }}
                 isDisabled={true}
                 isDelete={false}
+                isCLassWork={true}
                 item={item}></TrainType>
             ))}
           </div>

src/views/studentList/api.ts

@@ -18,3 +18,35 @@ export const getPracticeRecordList = (params: any) => {
     // requestType: 'form'
   });
 };
+
+/**
+ * 获取学生列表
+ */
+export const getStudentList = (params: any) => {
+  return request.post('/edu-app/student/page', {
+    data: params
+  });
+};
+
+
+/**
+ * 修改学生信息
+ */
+export const resetStudentInfo = (params: any) => {
+  return request.post('/edu-app/student/update', {
+    data: params
+  });
+};
+
+
+/**
+ * 获取学生课后训练
+ */
+
+export const getStudentAfterWork = (params: any) => {
+  return request.post('/edu-app/lessonTraining/trainingTeacherList', {
+    data: params,
+    params
+  });
+};
+

src/views/studentList/components/baseInfo.tsx

@@ -0,0 +1,182 @@
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import styles from '../index.module.less';
+import {
+  NImage,
+  NForm,
+  NFormItem,
+  NInput,
+  NGrid,
+  NGi,
+  NButton,
+  NSelect,
+  NSpace,
+  SelectOption,
+  useMessage,
+  NModal,
+  NCalendar,
+  NCascader
+} from 'naive-ui';
+import headerD from '../images/headerD.png';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import maleIcon from '../images/maleIcon.png';
+import femaleIcon from '../images/femaleIcon.png';
+import { useUserStore } from '/src/store/modules/users';
+import { api_teacherUpdate } from '/src/api/user';
+import { resetStudentInfo } from '../api'
+import UploadFile from '/src/components/upload-file';
+export default defineComponent({
+  name: 'setting-personInfo',
+  props:{
+    studentInfo:{
+      type:Object,
+      default: () => (
+        { nickname:'',
+      currentGradeNum:'',
+      gender:null,
+      phone:'',
+      id:''
+   })
+  }},
+  setup(props) {
+    const message = useMessage();
+    const userStore = useUserStore();
+    const formOptions = reactive({
+      sexs: [
+        { label: '男', value: 1, class: 'option' },
+        { label: '女', value: 0, class: 'option' }
+      ] as SelectOption[],
+      areaList: [] as any[]
+    });
+    const formRef = ref();
+    const studentForm = reactive({
+      nickname: props.studentInfo.nickname as any,
+      phone: props.studentInfo.phone,
+      gender: props.studentInfo.gender,
+      id: props.studentInfo.id,
+      classGroupName:props.studentInfo.classGroupName
+    });
+    const data = reactive({
+      disabled: true,
+      openChangePwd: false,
+      uploadShow: true
+    });
+    watch(()=>props.studentInfo,(val)=>{
+      studentForm.nickname= val.nickname as any
+      studentForm.phone=val.phone
+      studentForm.gender= val.gender
+      studentForm.id= val.id
+      studentForm.classGroupName=val.classGroupName
+    })
+    // onMounted(() => {});
+
+    const handleSave = () => {
+      formRef.value.validate(async (err: any) => {
+        if (err) {
+          return;
+        }
+        await resetStudentInfo({...props.studentInfo,...studentForm});
+        data.disabled = true;
+        message.success('修改成功');
+      });
+    };
+    const cancel = ()=>{
+      studentForm.nickname = props.studentInfo.nickname
+      studentForm.phone = props.studentInfo.phone
+      studentForm.gender = props.studentInfo.gender
+      studentForm.classGroupName = props.studentInfo.classGroupName
+
+      data.disabled = true
+    }
+    return () => (
+      <div class={styles.infoWrap}>
+        <div class={styles.setInfo}>
+          <NForm ref={formRef} model={studentForm} disabled={data.disabled}>
+            <NGrid cols={4} x-gap="100">
+              <NGi>
+                <NFormItem
+                  label="姓名"
+                  path="nickname"
+                  rule={{
+                    required: true,
+                    message: '请填写老师姓名',
+                    trigger: 'blur'
+                  }}>
+                  <NInput
+                    bordered={!data.disabled}
+                    placeholder="请填写老师姓名"
+                    v-model:value={studentForm.nickname}></NInput>
+                </NFormItem>
+              </NGi>
+              <NGi>
+                <NFormItem
+                  label="手机号"
+                  path="phone"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请填写老师手机号',
+                      trigger: 'blur'
+                    },
+                    {
+                      pattern: /^1[3456789]\d{9}$/,
+                      message: '手机号格式不正确',
+                      trigger: 'blur'
+                    }
+                  ]}>
+                  <NInput
+                    bordered={!data.disabled}
+                    placeholder="请填写老师手机号"
+                    v-model:value={studentForm.phone}></NInput>
+                </NFormItem>
+              </NGi>
+              <NGi>
+                <NFormItem label="性别" path="sex">
+                  <NSelect
+                    bordered={!data.disabled}
+                    class={styles.select}
+                    showArrow={!data.disabled}
+                    placeholder="请选择性别"
+                    options={formOptions.sexs}
+                    v-model:value={studentForm.gender}
+                  />
+                </NFormItem>
+              </NGi>
+              <NGi>
+                <NFormItem label="年级班级" path="sex">
+                <NInput
+                    bordered={!data.disabled}
+                    disabled={true}
+                    placeholder="年级班级"
+                    v-model:value={studentForm.classGroupName}></NInput>
+
+                </NFormItem>
+              </NGi>
+            </NGrid>
+          </NForm>
+        </div>
+        {data.disabled ? (
+          <NSpace class={styles.btnList} align="center" justify="end">
+            <NButton
+              class={styles.btn}
+              color="#f24433"
+              onClick={() => (data.disabled = false)}>
+              修改信息
+            </NButton>
+          </NSpace>
+        ) : (
+          <NSpace class={styles.btnList} align="center" justify="end">
+            <NButton class={styles.btn} onClick={() => ( cancel())}>
+              取消
+            </NButton>
+            <NButton
+              class={styles.btn}
+              type="primary"
+              onClick={() => handleSave()}>
+              完成
+            </NButton>
+          </NSpace>
+        )}
+      </div>
+    );
+  }
+});

src/views/studentList/components/evaluationRecords.tsx

@@ -144,6 +144,7 @@ export default defineComponent({
       const res = await getPracticeRecordList({
         userId: props.studentId,
         ...state.pagination,
+        feature: "EVALUATION",
         ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
       });
       state.tableList = res.data.rows;

src/views/studentList/components/practiceData.tsx

@@ -12,6 +12,7 @@ import numeral from 'numeral';
 import { useECharts } from '@/hooks/web/useECharts';
 import Pagination from '/src/components/pagination';
 import { getTrainingStat } from '../api';
+import { getTrainingStatList } from '@/views/classList/api'
 import {
   getNowDateAndMonday,
   getNowDateAndSunday,
@@ -85,8 +86,18 @@ export default defineComponent({
         }
       ];
     };
-    const getList = () => {
-      console.log('1');
+    const getList =  async () => {
+        try{
+          const res = await getTrainingStatList({
+            page:1,
+            rows:999,
+            studentId: props.studentId,
+            ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+          })
+          state.tableList = res.data.rows;
+        }catch(e){
+          console.log(e)
+        }
     };
     const setChart = () => {
       setOptions({
@@ -222,7 +233,7 @@ export default defineComponent({
         payForm.timeList = res.data.trainingStatDetailList.map((item: any) => {
           return item.practiceDuration;
         });
-        state.tableList = res.data.trainingStatDetailList;
+
         setChart();
         console.log(payForm);
       } catch (e) {
@@ -232,6 +243,7 @@ export default defineComponent({
     const search = () => {
       state.pagination.page = 1;
       getChartDetail();
+      getList()
       console.log('search');
     };
     const onReset = () => {
@@ -240,11 +252,13 @@ export default defineComponent({
         getNowDateAndSunday(new Date().getTime())
       ];
       search();
+      getList()
       console.log('onReset');
     };
     onMounted(() => {
       console.log(props.studentId);
       getChartDetail();
+      getList()
     });
     return () => (
       <>
@@ -317,7 +331,7 @@ export default defineComponent({
                       <NNumberAnimation
                         from={0}
                         to={getSecend(
-                          payForm.practiceDurationTotal
+                          payForm.practiceDurationAvg
                         )}></NNumberAnimation>
                     </span>{' '}
                     秒

src/views/studentList/components/studentAfterWork.tsx

@@ -0,0 +1,284 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { getStudentAfterWork } from '../api';
+import add from './images/add.png';
+import { useRoute } from 'vue-router';
+import CBreadcrumb from '/src/components/CBreadcrumb';
+import CDatePicker from '/src/components/CDatePicker';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import {
+  getNowDateAndMonday,
+  getNowDateAndSunday,
+  getTimes
+} from '/src/utils/dateFormat';
+import { trainingStatusArray } from '@/utils/searchArray';
+import StudentTraomomhDetails from '../modals/studentTraomomhDetails'
+import dayjs from 'dayjs';
+import { lookup } from 'dns';
+export default defineComponent({
+  name: 'student-studentList',
+  setup(props, { emit }) {
+    const state = reactive({
+      searchForm: { keyword: '', trainingStatus: null as any },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      tableList: [] as any,
+      workInfo: {
+        createTime: '',
+        expireDate: '',
+        teacherAvatar: '',
+        teacherName: ''
+      },
+      detailVisiable: false,
+      activeRow: null as any,
+      index: 0
+    });
+    const timer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+    const TrainingDetailsRef = ref();
+    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: '', trainingStatus: null as any };
+      timer.value = [
+        getNowDateAndMonday(new Date().getTime()),
+        getNowDateAndSunday(new Date().getTime())
+      ];
+      search();
+    };
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const res = await getStudentAfterWork({
+          studentId: route.query.studentId,
+          ...state.searchForm,
+          ...state.pagination,
+          ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+        });
+
+        state.tableList = res.data.rows;
+
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    // const getWorkInfo = async () => {
+    //   console.log(route.query);
+    //   try {
+    //     const res = await getWorkDetail({ trainingId: route.query.trainingId });
+    //     state.workInfo = { ...res.data };
+    //   } catch (e) {
+    //     console.log(e);
+    //   }
+    // };
+
+    const lookDetail = (row: any, index: number) => {
+      console.log(index, 'index');
+      state.index = index + 1;
+      state.activeRow = row;
+      state.detailVisiable = true;
+    };
+    onMounted(() => {
+      // getWorkInfo();
+      getList();
+    });
+    const columns = () => {
+      return [
+        {
+          title: '布置老师',
+          key: 'teacherName'
+        },
+        {
+          title: '布置时间',
+          key: 'createTime',
+          render(row: any) {
+            return row.createTime
+              ? dayjs(row.createTime).format('YYYY-MM-DD')
+              : '--';
+          }
+        },
+        {
+          title: '截止时间',
+          key: 'expireDate',
+          render(row: any) {
+            return row.expireDate
+              ? dayjs(row.expireDate).format('YYYY-MM-DD')
+              : '--';
+          }
+        },
+        {
+          title: '最后提交时间',
+          key: 'submitTime',
+          render(row: any) {
+            return row.submitTime
+              ? dayjs(row.submitTime).format('YYYY-MM-DD')
+              : '--';
+          }
+        },
+        {
+          title: '提交状态',
+          key: 'sex',
+          render(row: any) {
+            return (
+              <div>
+                {row.trainingStatus == 'UNSUBMITTED' ? (
+                  <p class={styles.nosub}>未提交</p>
+                ) : null}
+                {row.trainingStatus == 'SUBMITTED' ? (
+                  <p class={styles.ison}>不合格</p>
+                ) : null}
+                {row.trainingStatus == 'TARGET' ? (
+                  <p class={styles.isok}>合格</p>
+                ) : null}
+              </div>
+            );
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any, index: number) {
+            return (
+              <NButton
+                text
+                type="primary"
+                onClick={() => {
+                  lookDetail(row, index);
+                }}>
+                详情
+              </NButton>
+            );
+          }
+        }
+      ];
+    };
+
+    const goToNext = () => {
+      ++state.index;
+
+      state.activeRow = state.tableList[state.index - 1];
+
+      TrainingDetailsRef.value.getTrainingDetail(
+        state.activeRow.studentLessonTrainingId
+      );
+    };
+    const gotoPre = () => {
+      --state.index;
+      state.activeRow = state.tableList[state.index - 1];
+      TrainingDetailsRef.value.getTrainingDetail(
+        state.activeRow.studentLessonTrainingId
+      );
+    };
+    return () => (
+      <div>
+        <div >
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+                       <NFormItem>
+                <CDatePicker
+                  v-model:value={timer.value}
+                  separator={'至'}
+                  type="daterange"
+                  timerValue={timer.value}></CDatePicker>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label: '提交状态',
+                        value: null
+                      },
+                      ...trainingStatusArray
+                    ],
+                    placeholder: '提交状态',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={state.searchForm.trainingStatus}></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>
+          <div >
+            <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
+
+            />
+          </div>
+        </div>
+        <NModal
+          v-model:show={state.detailVisiable}
+          preset="card"
+          class={['modalTitle background', styles.wordDetailModel]}
+          title={'训练详情'}>
+          <StudentTraomomhDetails
+            // onNext={() => goToNext()}
+            // onPre={() => gotoPre()}
+            ref={TrainingDetailsRef}
+            onClose={() => (state.detailVisiable = false)}
+            total={state.tableList.length}
+            current={state.index}
+            activeRow={state.activeRow}></StudentTraomomhDetails>
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/studentList/index.module.less

@@ -252,3 +252,219 @@
   width: 830px;
   overflow: hidden;
 }
+.addStudentWrap {
+  position: relative;
+  width: 467px;
+  height: 688px;
+  margin: 80px auto 0;
+  background: url(./images/studentBg.png) no-repeat;
+  background-size: 467px 688px;
+  padding: 18px 21px 15px 27px;
+  .studentCLose {
+    cursor: pointer;
+    position: absolute;
+    right: -38px;
+    top: -37px;
+    width: 51px;
+    height: 51px;
+    z-index: 100;
+  }
+  .stunentStart {
+    position: absolute;
+    width: 601px;
+    height: 275px;
+    left: -38px;
+    top: -68px;
+  }
+  .addStudentInfo {
+    width: 419px;
+    height: 655px;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .studentInfoBg {
+      position: absolute;
+      width: 419px;
+      height: 655px;
+      img {
+        left: 0;
+        top: 0;
+        width: 419px;
+        height: 655px;
+      }
+    }
+    .addTitle {
+      width: 230px;
+      height: 48px;
+      top: -9px;
+      position: relative;
+      margin: 0 auto;
+      z-index: 100;
+      img {
+        width: 230px;
+        height: 48px;
+      }
+    }
+    .studentCore {
+      position: absolute;
+      bottom: 27px;
+      left: 48px;
+      width: 330px;
+      height: 339px;
+      background: rgba(255, 255, 255, 0.33);
+      border-radius: 17px;
+      border: 2px solid #ffffff;
+      backdrop-filter: blur(17px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .schoolLogo {
+        width: 67px;
+        height: 67px;
+        margin-top: -34px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        z-index: 100;
+        overflow: hidden;
+        background-color: #fff;
+        position: absolute;
+      }
+      .studentCoreInfo {
+        margin-top: 6px;
+        width: 314px;
+        height: 323px;
+        background: #ffffff;
+        border-radius: 17px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        h2 {
+          margin-top: 37px;
+          height: 22px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #000000;
+          line-height: 22px;
+          margin-bottom: 6px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .studentCoreInfoSubtitle {
+          font-size: 14px;
+          font-weight: 400;
+          color: #000000;
+          span {
+            color: #198cfe;
+            font-weight: 600;
+          }
+        }
+        .codewrap {
+          width: 147px;
+          height: 145px;
+          background: url(./images/cordWrap.png) no-repeat;
+          position: relative;
+          background-size: 147px 145px;
+          margin: 16px 0 18px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+        .codewrapSubmit {
+          width: 213px;
+          height: 35px;
+          background: linear-gradient(135deg, #d1fdf9 0%, #d6eeff 100%);
+          box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
+          border-radius: 18px;
+          text-align: center;
+          line-height: 35px;
+          font-size: 14px;
+          color: #117de9;
+          span {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+  .studentBottom {
+    width: 419px;
+
+    position: absolute;
+    bottom: -120px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    p {
+      text-align: center;
+      font-size: 16px;
+      color: #ffffff;
+      margin-bottom: 30px;
+    }
+    .downBtn {
+      width: 295px;
+      height: 60px;
+      background: linear-gradient(90deg, #ff7b57 0%, #ff3460 100%);
+      border-radius: 30px;
+      line-height: 60px;
+      font-size: 24px;
+      font-weight: 600;
+      text-align: center;
+      color: #fff;
+
+      cursor: pointer;
+    }
+  }
+}
+
+.setInfo {
+  margin-top: 64px;
+
+
+  :global {
+    .n-form-item-label {
+      font-size: 15px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+
+    .n-input {
+      height: 50px;
+      border-radius: 8px;
+
+      .n-input__input-el {
+        height: 100%;
+      }
+
+      &.n-input--disabled {
+        background-color: #f5f6fa;
+        color: rgba(149, 149, 152, 1);
+      }
+    }
+
+    .n-base-selection {
+      border-radius: 8px;
+
+      .n-base-selection-label {
+        height: 50px;
+      }
+    }
+
+    .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+      background-color: #f5f6fa;
+      color: rgba(149, 149, 152, 1);
+    }
+  }
+}
+
+.btnList {
+  margin-top: 300px;
+}
+
+
+.wordDetailModel {
+  width: 1012px;
+}

src/views/studentList/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -6,6 +6,7 @@ import {
   NForm,
   NFormItem,
   NImage,
+  NModal,
   NSelect,
   NSpace
 } from 'naive-ui';
@@ -14,10 +15,19 @@ import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
 import add from './images/add.png';
 import { useRoute, useRouter } from 'vue-router';
+import { getStudentList } from './api';
+import { classGroupList } from '@/views/classList/api';
+import AddStudentModel from './modals/addStudentModel';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
     const state = reactive({
+      searchForm: {
+        keyword: '',
+        gender: null as any,
+        classGroupId: null as any,
+        membership: null as any
+      },
       searchWord: '',
       orchestraType: null,
       courseTypeCode: null,
@@ -30,60 +40,60 @@ export default defineComponent({
         rows: 10,
         pageTotal: 4
       },
-      tableList: [
-        {
-          nickname: '汤科斯',
-          phone: '17625367893',
-          sex: '0',
-          className: '一年级3班',
-          classType: 'normal',
-          studentType: 'member',
-          id: '1001415'
-        },
-        {
-          studentName: '丁曼蓉',
-          phone: '14677789334',
-          sex: '1',
-          className: '一年级3班',
-          classType: 'normal',
-          studentType: ''
-        },
-        {
-          studentName: '李书意',
-          phone: '13467857893',
-          sex: '1',
-          className: '一年级3班',
-          classType: 'graduate',
-          studentType: 'member'
-        },
-        {
-          studentName: '夏小满',
-          phone: '13925367893',
-          sex: '0',
-          className: '一年级3班',
-          classType: 'none',
-          studentType: ''
-        }
-      ] as any
+      tableList: [] as any,
+      classList: [],
+      addStudentVisible: false
     });
     const route = useRoute();
     const router = useRouter();
     const search = () => {
-      console.log('search', state);
+      state.pagination.page = 1;
+      getList();
+    };
+    const getClasslist = async () => {
+      try {
+        const res = await classGroupList({ page: 1, rows: 999 });
+        state.classList = res.data.rows.map((item: any) => {
+          return {
+            label: item.name,
+            value: item.id
+          };
+        });
+      } catch (e) {
+        console.log(e);
+      }
     };
-
     const onReset = () => {
-      console.log('search');
+      state.searchForm = {
+        keyword: '',
+        gender: null as any,
+        classGroupId: null as any,
+        membership: null as any
+      };
+      search();
     };
-    const getList = () => {
+    const getList = async () => {
+      try {
+        const res = await getStudentList({
+          ...state.searchForm,
+          ...state.pagination
+        });
+        state.tableList = res.data.rows;
+        state.pagination.pageTotal = res.data.total;
+      } catch (e) {
+        console.log(e);
+      }
       console.log('getList');
     };
-
+    onMounted(() => {
+      getList();
+      getClasslist();
+    });
     const columns = () => {
       return [
         {
-          title: '姓名',
-          key: 'studentName'
+          title: '学生姓名',
+          key: 'nickname'
         },
         {
           title: '手机号',
@@ -91,38 +101,27 @@ export default defineComponent({
         },
         {
           title: '性别',
-          key: 'sex',
-          render(row: any) {
-            return <>{row.sex == '0' ? '女' : '男'}</>;
-          }
-        },
-
-        {
-          title: '班级',
-          key: 'className',
+          key: 'gender',
           render(row: any) {
             return (
               <>
-                <div>
-                  {row.classType == 'none' ? (
-                    <p style={{ color: '#EA4132' }}>{'未在班级'}</p>
-                  ) : null}
-                  {row.classType == 'graduate' ? (
-                    <p style={{ color: '#AAAAAA' }}>{'毕业'}</p>
-                  ) : null}
-                  {row.classType == 'normal' ? <p>{row.className}</p> : null}
-                </div>
+                {row.gender + '' != 'null'
+                  ? row.gender == '0'
+                    ? '女'
+                    : '男'
+                  : '--'}
               </>
             );
           }
         },
-        {
-          title: '学生类型',
-          key: 'studentType',
-          render(row: any) {
-            return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
-          }
-        },
+
+        // {
+        //   title: '学生类型',
+        //   key: 'studentType',
+        //   render(row: any) {
+        //     return <>{row.studentType == 'member' ? '会员' : '普通'}</>;
+        //   }
+        // },
         {
           title: '操作',
           key: 'id',
@@ -151,9 +150,9 @@ export default defineComponent({
               <SearchInput
                 {...{ placeholder: '请输入学生姓名' }}
                 class={styles.searchInput}
-                searchWord={state.searchWord}
+                searchWord={state.searchForm.keyword}
                 onChangeValue={(val: string) =>
-                  (state.searchWord = val)
+                  (state.searchForm.keyword = val)
                 }></SearchInput>
             </NFormItem>
 
@@ -162,57 +161,59 @@ export default defineComponent({
                 {...({
                   options: [
                     {
-                      label: '竖笛',
-                      value: 'song0'
+                      label: '学生性别',
+                      value: null
                     },
                     {
-                      label: '葫芦丝',
-                      value: 'song1'
+                      label: '男',
+                      value: 1
+                    },
+                    {
+                      label: '女',
+                      value: 0
                     }
                   ],
-                  placeholder: '学生声部',
+                  placeholder: '性别',
                   clearable: true,
                   inline: true
                 } as any)}
-                v-model:value={state.subjectId}></CSelect>
+                v-model:value={state.searchForm.gender}></CSelect>
             </NFormItem>
             <NFormItem>
               <CSelect
                 {...({
                   options: [
-                    {
-                      label: '一年级2班',
-                      value: 'song0'
-                    },
-                    {
-                      label: '一年级3班',
-                      value: 'song1'
-                    }
+                    { label: '年级班级', value: null },
+                    ...state.classList
                   ],
                   placeholder: '年级班级',
                   clearable: true,
                   inline: true
                 } as any)}
-                v-model:value={state.classId}></CSelect>
+                v-model:value={state.searchForm.classGroupId}></CSelect>
             </NFormItem>
             <NFormItem>
               <CSelect
                 {...({
                   options: [
                     {
+                      label: '学生类型',
+                      value: null
+                    },
+                    {
                       label: '会员',
-                      value: 'song0'
+                      value: true
                     },
                     {
                       label: '普通',
-                      value: 'song1'
+                      value: false
                     }
                   ],
                   placeholder: '学生类型',
                   clearable: true,
                   inline: true
                 } as any)}
-                v-model:value={state.studentType}></CSelect>
+                v-model:value={state.searchForm.membership}></CSelect>
             </NFormItem>
             <NFormItem>
               <NSpace justify="end">
@@ -231,6 +232,9 @@ export default defineComponent({
           </NForm>
         </div>
         <NButton
+          onClick={() => {
+            state.addStudentVisible = true;
+          }}
           class={styles.addBtn}
           type="primary"
           v-slots={{
@@ -257,6 +261,14 @@ export default defineComponent({
             saveKey="orchestraRegistration-key"
           />
         </div>
+        {state.addStudentVisible ? (
+          <div v-model:show={state.addStudentVisible} class="n-modal-mask">
+            <AddStudentModel
+              onClose={() => {
+                state.addStudentVisible = false;
+              }}></AddStudentModel>
+          </div>
+        ) : null}
       </div>
     );
   }

src/views/studentList/modals/addStudentModel.tsx

@@ -0,0 +1,164 @@
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NSelect,
+  NImage
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import CSelect from '/src/components/CSelect';
+import stunentStart from '../images/studentStart.png';
+import studentCLose from '../images/studentClose.png';
+import { useUserStore } from '@/store/modules/users';
+import TheQrCode from '/src/components/TheQrCode';
+import { vaildUrl } from '@/utils/urlUtils';
+import logo from '@/common/images/logo.png';
+import studentTitle from '../images/studentTitle.png';
+import studentInfo from '../images/strudentCore.png';
+import codewrapBg from '../images/cordWrap.png';
+import html2canvas from 'html2canvas';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    gradeNumList: {
+      type: Array,
+      default: () => []
+    },
+    classArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetStudent',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const userStore = useUserStore();
+    const foemsRef = ref();
+    const url = ref(
+      vaildUrl() +
+        `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
+    );
+    const imgs = reactive({
+      saveLoading: false,
+      image: null as any,
+      shareLoading: false
+    });
+    const downImg = () => {
+      if (imgs.saveLoading) {
+        return;
+      }
+      imgs.saveLoading = true;
+      // 判断是否已经生成图片
+      if (imgs.image) {
+        saveImg();
+      } else {
+        const container: any = document.getElementById(`preview-container`);
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png');
+            imgs.image = url;
+            saveImg();
+          })
+          .catch(() => {
+            imgs.saveLoading = false;
+          });
+      }
+    };
+
+    const saveImg = async () => {
+      // showLoadingToast({ message: '图片生成中...', forbidClick: true });
+      setTimeout(() => {
+        imgs.saveLoading = false;
+      }, 100);
+      const link = document.createElement('a');
+      link.setAttribute('download', '报名图片' + '.png');
+      // 添加时间戳，防止浏览器缓存图片
+      // console.log(imgUrl,'imgUrl')
+
+      link.href = imgs.image;
+      link.click();
+      // const res = await promisefiyPostMessage({
+      //   api: 'savePicture',
+      //   content: {
+      //     base64: imgs.image
+      //   }
+      // });
+      // if (res?.content?.status === 'success') {
+      //   showSuccessToast('保存成功');
+      // } else {
+      //   showFailToast('保存失败');
+      // }
+    };
+    return () => (
+      <div class={[styles.addStudentWrap]}>
+        <div
+          onClick={() => {
+            console.log('点击');
+            emit('close');
+          }}>
+          <NImage
+            src={studentCLose}
+            previewDisabled
+            class={styles.studentCLose}></NImage>
+        </div>
+        <NImage
+          previewDisabled
+          class={styles.stunentStart}
+          src={stunentStart}></NImage>
+        <div class={styles.addStudentInfo} id="preview-container">
+          <NImage
+            class={styles.addTitle}
+            previewDisabled
+            src={studentTitle}></NImage>
+          <NImage
+            class={styles.studentInfoBg}
+            previewDisabled
+            src={studentInfo}></NImage>
+
+          <div class={styles.studentCore}>
+            <NImage
+              previewDisabled
+              class={styles.schoolLogo}
+              src={
+                userStore.getUserInfo.schoolInfos[0].logo +
+                `?some=${new Date().getTime()}`
+              }></NImage>
+            <div class={styles.studentCoreInfo}>
+              <h2>{userStore.getUserInfo.schoolInfos[0].name}</h2>
+              <p class={styles.studentCoreInfoSubtitle}>
+                邀请您的孩子加入
+                <span>数字化乐器课堂</span>
+              </p>
+              <div class={styles.codewrap}>
+                <TheQrCode logoSrc={logo} text={url.value} size={119} />
+              </div>
+              <div class={styles.codewrapSubmit}>
+                请扫描上方二维码 <span>完成报名</span>{' '}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class={styles.studentBottom}>
+          <p>请将二维码图片发送给学生家长，扫码完成报名</p>
+          <div class={styles.downBtn} onClick={downImg}>
+            下载图片
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/studentList/modals/studentTraomomhDetails.tsx

@@ -0,0 +1,181 @@
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NSelect,
+  NImage,
+  NScrollbar
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '@/views/classList/index.module.less';
+import TrainType from '@/views/attend-class/model/train-type';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import noSub from '@/views/classList/images/nosub.png';
+import qualified from '@/views/classList/images/qualified.png';
+import unqualified from '@/views/classList/images/unqualified.png';
+import { evaluateDifficult } from '/src/utils/contants';
+import dayjs from 'dayjs';
+import { getTrainingStudentDetail } from '../../classList/api';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  name: 'studentTraomomhDetails',
+  emits: ['close'],
+
+  setup(props, { emit, expose }) {
+    const data = reactive({
+      uploading: false
+    });
+    const teacherInfo = ref({
+      teacherName: '',
+      createTime: '',
+      expireDate: '',
+      teacherAvatar: '',
+      studentLessonTrainingDetails: [] as any
+    } as any);
+    const message = useMessage();
+    const foemsRef = ref();
+    const typeFormat = (trainingType: string, configJson: any) => {
+      let tList: string[] = [];
+
+      if (trainingType === 'EVALUATION') {
+        tList = [
+          `${evaluateDifficult[configJson.evaluateDifficult]}`,
+          '全部小节',
+          `速度${configJson.evaluateSpeed}`,
+          `${configJson.trainingTimes}分合格`
+        ];
+        console.log('configJson.evaluateDifficult--', tList);
+      } else {
+        tList = [
+          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+          `速度${configJson.practiceSpeed}`,
+          `${configJson.trainingTimes}分钟`
+        ];
+        console.log('configJson.evaluateDifficult', tList);
+      }
+      return tList;
+    };
+    const getTrainingDetail = async (id: any) => {
+      console.log(id,'getTrainingDetail')
+      try {
+        const res = await getTrainingStudentDetail({
+          studentLessonTrainingId: id
+        });
+        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
+          const tList = typeFormat(
+            item.trainingType,
+            JSON.parse(item.trainingContent)
+          );
+          return {
+            ...item,
+            coverImg: item.titleImg,
+            allTimes: JSON.parse(item.trainingContent).trainingTimes,
+            typeList: tList || []
+          };
+        });
+        teacherInfo.value = {
+          ...res.data,
+
+          studentLessonTrainingDetails: arr
+        };
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    expose({ getTrainingDetail });
+    onMounted(() => {
+      getTrainingDetail(props.activeRow.id);
+    });
+
+    return () => (
+      <div class={[styles.trainingDetails]}>
+        <div class={styles.studentList}>
+          <div class={styles.studentHeaderWrap}>
+            <div class={styles.studentHeader}>
+              <div class={styles.studentHeaderBorder}>
+                <NImage
+                  class={styles.studentHeaderImg}
+                  src={
+                    teacherInfo.value.teacherAvatar
+                      ? teacherInfo.value.teacherAvatar
+                      : defultHeade
+                  }
+                  previewDisabled></NImage>
+              </div>
+            </div>
+
+            <div class={styles.workafterInfo}>
+              <h4>
+                {teacherInfo.value.teacherName}{' '}
+                <div
+                  class={[
+                    styles.workafterInfoDot,
+                    styles.workafterTeacherInfoDot
+                  ]}>
+                  老师
+                </div>
+              </h4>
+              <p>
+                开始时间：
+                {teacherInfo.value.createTime
+                  ? dayjs(new Date(teacherInfo.value.createTime)).format(
+                      'YYYY-MM-DD'
+                    )
+                  : '--'}{' '}
+                | 结束时间：
+                {dayjs(new Date(teacherInfo.value.expireDate)).format(
+                  'YYYY-MM-DD'
+                )}
+              </p>
+            </div>
+          </div>
+          {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+            <NImage
+              previewDisabled
+              class={styles.workStatus}
+              src={noSub}></NImage>
+          ) : null}
+          {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
+            <NImage
+              previewDisabled
+              class={styles.workStatus}
+              src={unqualified}></NImage>
+          ) : null}
+          {teacherInfo.value.trainingStatus == 'TARGET' ? (
+            <NImage
+              previewDisabled
+              class={styles.workStatus}
+              src={qualified}></NImage>
+          ) : null}
+        </div>
+        <NScrollbar style="max-height:400px" trigger="none">
+          <div class={styles.workList}>
+            {teacherInfo.value.studentLessonTrainingDetails.map((item: any) => (
+              <TrainType
+                style={{ marginBottom: '20px' }}
+                isDisabled={true}
+                isDelete={false}
+                isCLassWork={false}
+                item={item}></TrainType>
+            ))}
+          </div>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

src/views/studentList/studentDetail.tsx

@@ -22,15 +22,17 @@ import femaleIcon from '@/views/setting/images/femaleIcon.png';
 import maleIcon from '@/views/setting/images/maleIcon.png';
 import PracticeData from '@/views/studentList/components/practiceData';
 import EvaluationRecords from '@/views/studentList/components/evaluationRecords';
-
+import BaseInfo from '@/views/studentList/components/baseInfo';
+import StudentAfterWork from './components/studentAfterWork'
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
 import dayjs from 'dayjs';
 export default defineComponent({
   name: 'studentDetail',
   setup(props, { emit }) {
     const state = reactive({
-      studentInfo: { avatar: '', nickname: '', gender: null, subjectNames: '' }
+      studentInfo: { avatar: '', nickname: '', gender: null, subjectNames: '',classGroupName:'' }
     });
-    const activeStudentTab = ref('textRcode');
+    const activeStudentTab = ref('baseInfo');
     const route = useRoute();
     console.log(route.meta.isClass);
     const routerList = ref(
@@ -42,7 +44,6 @@ export default defineComponent({
           ]
         : ([
             { name: '学生管理', path: '/studentList' },
-
             { name: route.query.studentName, path: '/classStudentRecode' }
           ] as any)
     );
@@ -61,7 +62,9 @@ export default defineComponent({
     onMounted(() => {
       getWorkInfo();
     });
-
+    const setTabs = (val: any) => {
+      setTabsCaches(val, 'tabName', route);
+    };
     return () => (
       <div>
         <CBreadcrumb list={routerList.value}></CBreadcrumb>
@@ -88,14 +91,15 @@ export default defineComponent({
                   }></NImage>
               </h4>
               <p>
-                {route.query.name}{' '}
+                {state.studentInfo.classGroupName}{' '}
                 {state.studentInfo.subjectNames
-                  ? '|' + state.studentInfo.subjectNames
-                  : ''}
+                  ? '| ' + state.studentInfo.subjectNames
+                  : ' '}
               </p>
             </div>
           </div>
           <NTabs
+              onUpdate:value={(val: any) => setTabs(val)}
             class={styles.customTabs}
             v-model:value={activeStudentTab.value}
             size="large"
@@ -103,10 +107,10 @@ export default defineComponent({
             pane-wrapper-style="margin: 0 -4px"
             pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
             <NTabPane name="baseInfo" tab="基本信息">
-              基本信息
+              <BaseInfo studentInfo={state.studentInfo}></BaseInfo>
             </NTabPane>
             <NTabPane name="afterWork" tab="课后训练">
-              课后训练
+              <StudentAfterWork></StudentAfterWork>
             </NTabPane>
             <NTabPane name="textRcode" tab="练习记录">
               <PracticeData