添加

public/version.json

@@ -1 +1 @@
-{"version":1706883102237}
+{"version":1706889915155}

src/views/homework-record/index.tsx

@@ -30,6 +30,7 @@ import Train from '../prepare-lessons/components/lesson-main/train';
 import ResourceMain from '../prepare-lessons/components/resource-main';
 import { useResizeObserver } from '@vueuse/core';
 import { nextTick } from 'process';
+import AssignStudent from '../prepare-lessons/components/lesson-main/train/assign-student';
 
 export const getCurrentMonth = () => {
   return [dayjs().startOf('month').valueOf(), dayjs().endOf('month').valueOf()];
@@ -431,7 +432,6 @@ export default defineComponent({
                       type="error"
                       color="#F94D50"
                       onClick={(e: any) => {
-                        console.log(e);
                         e.stopPropagation();
                         state.resetVisiable = true;
                         state.resetItem = item;
@@ -479,7 +479,7 @@ export default defineComponent({
           </div>
         </NModal>
 
-        <NModal
+        {/* <NModal
           v-model:show={state.workVisiable}
           preset="card"
           class={['modalTitle background', styles.workVisiable]}
@@ -501,6 +501,17 @@ export default defineComponent({
               <ResourceMain cardType="homerowk-record" />
             </div>
           </div>
+        </NModal> */}
+
+        <NModal
+          v-model:show={state.workVisiable}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background']}
+          title={'布置作业'}
+          style={{ width: '640px' }}
+          blockScroll={false}>
+          <AssignStudent />
         </NModal>
       </div>
     );

src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -6,6 +6,7 @@ import {
   NForm,
   NFormItem,
   NInput,
+  NScrollbar,
   NSelect,
   NSpace,
   useMessage
@@ -40,7 +41,7 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const forms = reactive({
       currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
-      homeworkObj: 'CLASS' as 'PERSON' | 'CLASS',
+      homeworkObj: 'PERSON' as 'PERSON' | 'CLASS',
       homeworkType: props.homeworkType,
       id: null as any,
       uploading: false,
@@ -50,7 +51,8 @@ export default defineComponent({
       classList: [] as any,
       currentGradeNum: null,
       expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD') as any, // 默认7天
-      classGroupId: null as any
+      classGroupId: null as any,
+      studentList: [] as any
     });
     const formsRef = ref();
 
@@ -251,9 +253,19 @@ export default defineComponent({
                   trigger: 'change',
                   type: 'array'
                 }
-              ]}>
+              ]}
+              class={styles.studentSection}>
               <span class={styles.selectStudentBtn}>选择学生</span>
-              <div class={styles.studentList}></div>
+              {forms.studentList.length > 0 && (
+                <NScrollbar class={styles.studentList}>
+                  <span class={styles.firstName}>当前选中(0):</span>
+                  {forms.studentList.map((item: any) => (
+                    <span class={styles.studentItem}>
+                      林霜降 <i class={styles.iconDelete}></i>
+                    </span>
+                  ))}
+                </NScrollbar>
+              )}
             </NFormItem>
           )}
 

src/views/prepare-lessons/components/lesson-main/train/assign-student/index.module.less

@@ -0,0 +1,203 @@
+.assignStudent {
+  display: flex;
+}
+
+.studentListGroup,
+.selectStudentGroup {
+  flex: 1;
+}
+
+.studentListGroup {
+  border-right: 1px solid #DCDCDC;
+
+  .searchSection {
+    padding: 20px 30px 12px;
+  }
+
+  .searchSpace {
+    display: flex;
+    margin-bottom: 13px;
+
+    :global {
+      .n-select+.n-select {
+        margin-left: 13px;
+      }
+    }
+  }
+
+  .studentSection {
+    padding: 0 40px 13px;
+
+    .checkboxAll {
+      display: flex;
+      align-items: center;
+
+      p {
+        padding-left: 8px;
+        font-size: max(15px, 13Px) !important;
+        font-weight: 600 !important;
+        color: #333333 !important;
+      }
+
+      .nums {
+        font-size: max(15px, 13Px) !important;
+        color: #777;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .student {
+    padding: 0 30px 15px;
+    height: 50vh;
+  }
+
+  .studentItem {
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+
+    &.active {
+      background: #F5F6FA;
+    }
+
+    .studentInfo {
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+
+      .studentImg {
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+      }
+    }
+
+    .studentValue {
+      padding-left: 8px;
+    }
+
+    .userInfo {
+      display: flex;
+      align-items: center;
+
+      .name {
+        font-size: max(13px, 12Px);
+        font-weight: 500;
+        color: #333333;
+        line-height: 18px;
+        padding-right: 5px;
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .iconMember {
+        width: max(13px, 12Px);
+        height: max(13px, 12Px);
+        display: inline-block;
+        margin-right: 5px;
+        background: url('../../../../images/icon-member.png') no-repeat center;
+        background-size: contain;
+      }
+
+      .className {
+        padding: 1px 3px;
+        font-size: max(12px, 11Px);
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #2089FF;
+        line-height: 14px;
+        background: #E8F4FF;
+        border-radius: 3px;
+        border: 1px solid #97C7FF;
+      }
+    }
+
+    .phone {
+      padding-top: 3px;
+      font-size: 12Px;
+      color: #777777;
+      line-height: 15px;
+    }
+  }
+}
+
+.selectStudentGroup {
+  .selectCount {
+    padding: 20px 30px 13px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 21px;
+    font-size: max(15px, 13Px) !important;
+
+
+    span {
+      color: #777777;
+      font-weight: 400;
+    }
+  }
+
+  .searchSection {
+    padding: 0 30px 12px;
+  }
+
+  .student {
+    padding: 0 30px;
+    height: calc(50vh);
+  }
+
+  .studentItem {
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.active {
+      background: #F5F6FA;
+    }
+
+    .iconClose {
+      width: 13Px;
+      height: 13Px;
+      display: inline-block;
+      background: url('../../../../images/icon-close.png') no-repeat center;
+      background-size: contain;
+      cursor: pointer;
+    }
+  }
+
+  .studentInfo {
+    display: flex;
+    align-items: center;
+  }
+
+  .studentImg {
+    width: 28px;
+    height: 28px;
+    margin-right: 8px;
+  }
+
+  .name {
+    font-size: max(13px, 12Px);
+    color: #333333;
+    line-height: 18px;
+  }
+
+  .btnGroup {
+    margin-right: 27px;
+    padding-top: 12px;
+
+    :global {
+      .n-button {
+        border-radius: 8px;
+        --n-height: 38px !important;
+        min-width: 100px;
+      }
+    }
+  }
+}

src/views/prepare-lessons/components/lesson-main/train/assign-student/index.tsx

@@ -0,0 +1,110 @@
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import {
+  NAvatar,
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NInput,
+  NScrollbar,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '/src/components/searchInput';
+
+export default defineComponent({
+  name: 'assign-student',
+  setup() {
+    const state = reactive({
+      studentName: '',
+      searchFrom: {
+        classGroupId: '',
+        subjectId: '',
+        keyword: ''
+      },
+      tableList: [] as any
+    });
+    return () => (
+      <div class={styles.assignStudent}>
+        <div class={styles.studentListGroup}>
+          <div class={styles.searchSection}>
+            <div class={styles.searchSpace}>
+              <NSelect
+                placeholder="全部班级"
+                v-model:value={state.searchFrom.classGroupId}
+              />
+              <NSelect
+                placeholder="全部声部"
+                v-model:value={state.searchFrom.subjectId}
+              />
+            </div>
+            <SearchInput
+              {...{ placeholder: '请输入学生姓名/手机号' }}
+              class={styles.searchInput}
+              searchWord={state.searchFrom.keyword}
+              onChangeValue={(val: string) =>
+                (state.searchFrom.keyword = val)
+              }></SearchInput>
+          </div>
+
+          <div class={styles.studentSection}>
+            <div class={styles.checkboxAll}>
+              <NCheckbox></NCheckbox>
+              <p>
+                全选 <span class={styles.nums}>(120)</span> ：
+              </p>
+            </div>
+          </div>
+          <NScrollbar class={styles.student}>
+            <NCheckboxGroup>
+              <div class={[styles.studentItem, styles.active]}>
+                <NCheckbox></NCheckbox>
+                <div class={styles.studentInfo}>
+                  <NAvatar class={styles.studentImg} />
+                  <div class={styles.studentValue}>
+                    <div class={styles.userInfo}>
+                      <span class={styles.name}>林夏喜</span>
+                      <i class={styles.iconMember}></i>
+                      <span class={styles.className}>三年级1班</span>
+                    </div>
+                    <div class={styles.phone}>15527262536</div>
+                  </div>
+                </div>
+              </div>
+            </NCheckboxGroup>
+          </NScrollbar>
+        </div>
+
+        <div class={styles.selectStudentGroup}>
+          <div class={styles.selectCount}>
+            当前选中 <span>(40) </span>：
+          </div>
+          <div class={styles.searchSection}>
+            <SearchInput
+              {...{ placeholder: '请输入学生姓名' }}
+              class={styles.searchInput}
+              // searchWord={state.searchForm.keyword}
+              // onChangeValue={(val: string) =>
+              //   (state.searchForm.keyword = val)
+              // }
+            ></SearchInput>
+          </div>
+          <NScrollbar class={styles.student}>
+            <div class={[styles.studentItem, styles.active]}>
+              <div class={styles.studentInfo}>
+                <NAvatar class={styles.studentImg} />
+                <span class={styles.name}>林夏喜</span>
+              </div>
+              <i class={styles.iconClose}></i>
+            </div>
+          </NScrollbar>
+
+          <NSpace justify="end" class={styles.btnGroup}>
+            <NButton type="default">取消</NButton>
+            <NButton type="primary">保存</NButton>
+          </NSpace>
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/train/index.module.less

@@ -168,7 +168,7 @@
 }
 
 .assignHomework {
-  width: 520px;
+  width: 560px;
 }
 
 .assignHomeworkContainer {
@@ -196,6 +196,58 @@
       color: #fff;
     }
   }
+
+  .studentSection {
+    :global {
+      .n-form-item-blank {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .selectStudentBtn {
+    padding-top: 9px;
+    font-size: max(15px, 13Px);
+    font-weight: 500;
+    color: #1677FF;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .firstName {
+    padding-left: 4px;
+  }
+
+  .studentList {
+    margin-top: 10px;
+    color: #333333;
+    font-size: max(13px, 12Px);
+    padding: 10px 6px;
+    border-radius: 8px;
+    background: #F7F7F8;
+    width: 100%;
+
+    .studentItem {
+      background: #FFFFFF;
+      height: 28px;
+      border-radius: 7px;
+      padding: 5px 10px;
+      color: #333333;
+      line-height: 18px;
+      margin: 3px 4px;
+      display: inline-block;
+
+      i {
+        display: inline-block;
+        width: 13px;
+        height: 13px;
+        background: url('../../../images/icon-close.png') no-repeat center;
+        background-size: contain;
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .removeVisiable {

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -504,6 +504,7 @@ export default defineComponent({
             }}
           />
         </NModal>
+
         {/* {showGuide.value ? <Trainguide></Trainguide> : null} */}
 
         <NModal