classroom-instruments/src/views/home/modals/selectClass.tsx

import { defineComponent, reactive, ref } from 'vue';
import styles from '../index.module.less';
import { NButton, NForm, NFormItem, NSelect, NSpace } from 'naive-ui';
import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
import { classGroupPage } from '../../prepare-lessons/api';

export default defineComponent({
  name: 'select-class',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const forms = reactive({
      id: null as any,
      uploading: false,
      classList: [] as any,
      currentGradeNum: null,
      classGroupId: null as any
    });
    const formsRef = ref();

    const getClassList = async () => {
      try {
        const { data } = await classGroupPage({
          currentGradeNum: forms.currentGradeNum,
          page: 1,
          rows: 99
        });
        const temp = data.rows || [];
        const classList = [] as any;
        temp.forEach((row: any) => {
          classList.push({
            label: row.currentClass + '班',
            value: row.id
          });
        });

        forms.classList = classList;
      } catch {
        //
      }
    };
    const onSubmit = async () => {
      formsRef.value?.validate(async (err: any) => {
        if (err) {
          return;
        }
        forms.uploading = true;
        try {
          let gradeName = '';
          BOOK_DATA.grades.forEach((item: any) => {
            if (forms.currentGradeNum === item.value) {
              gradeName = item.label;
            }
          });

          let className = '';
          forms.classList.forEach((item: any) => {
            if (item.value === forms.classGroupId) {
              className = item.label;
            }
          });
          emit('confirm', {
            currentGradeNum: forms.currentGradeNum, // 年级
            currentGradeLabel: gradeName,
            classGroupId: forms.classGroupId, // 班级
            className
          });
          emit('close');
        } catch {
          //
        }
        forms.uploading = false;
      });
    };

    return () => (
      <div class={styles.assignHomeworkContainer}>
        <NForm
          ref={formsRef}
          model={forms}
          labelAlign="right"
          labelWidth={'auto'}
          labelPlacement="left">
          <NFormItem
            label="年级"
            path="currentGradeNum"
            rule={[
              {
                required: true,
                message: '请选择年级',
                trigger: 'change',
                type: 'number'
              }
            ]}>
            <NSelect
              v-model:value={forms.currentGradeNum}
              placeholder="请选择年级"
              options={BOOK_DATA.grades}
              clearable
              onUpdate:value={() => {
                forms.classGroupId = null;
                getClassList();
              }}
            />
          </NFormItem>
          <NFormItem
            label="班级"
            path="classGroupId"
            rule={[
              { required: true, message: '请选择班级', trigger: 'change' }
            ]}>
            <NSelect
              v-model:value={forms.classGroupId}
              placeholder="请选择班级"
              clearable
              options={forms.classList}
              disabled={!forms.currentGradeNum}
            />
          </NFormItem>

          <NSpace class={styles.updateBtnGroup}>
            <NButton strong type="default" round onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
              strong
              type="primary"
              round
              disabled={forms.uploading}
              loading={forms.uploading}
              onClick={onSubmit}>
              确认
            </NButton>
          </NSpace>
        </NForm>
      </div>
    );
  }
});