classroom-instruments/src/views/classList/modals/createClass.tsx

import {
  NButton,
  NSpace,
  useMessage,
  NForm,
  NFormItem,
  NCascader
} from 'naive-ui';
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import styles from '../index.module.less';
import CSelect from '/src/components/CSelect';
import { addClass, getConfiguredSubjects } from '../api';
import { api_getCurrentGradeYear } from '../../studentList/api';
export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ id: '' })
    },
    gradeYearList: {
      type: Array,
      default: () => []
    },
    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 foemsRef = ref();
    const createClassForm = reactive({
      gradeYear: null,
      currentGradeNum: null,
      currentClass: null,
      instrumentId: null
    });
    const gradeYearList = ref([] as any);
    const subjectList = ref([] as any);
    const submitForms = () => {
      foemsRef.value.validate(async (error: any) => {
        if (error) {
          return;
        }
        data.uploading = true;
        try {
          await addClass({ ...createClassForm });
          message.success('新增成功');
          emit('close');
          emit('getList');
          data.uploading = false;
        } catch (e) {
          console.log(e);
        }
        data.uploading = false;
      });
    };

    const getYearList = async () => {
      try {
        const { data } = await api_getCurrentGradeYear({});
        const temp = [
          {
            label: data + 1,
            value: data + 1
          },
          {
            label: data,
            value: data
          }
        ];
        gradeYearList.value = temp;
      } catch {
        //
      }
    };

    const getConfigSubject = async () => {
      try {
        const { data } = await getConfiguredSubjects({
          gradeYear: createClassForm.gradeYear,
          currentGradeNum: createClassForm.currentGradeNum,
          currentClass: createClassForm.currentClass
        });
        const temp = data || [];
        subjectList.value = temp;
      } catch {
        //
      }
    };

    watch(
      () => [
        createClassForm.gradeYear,
        createClassForm.currentGradeNum,
        createClassForm.currentClass
      ],
      () => {
        createClassForm.instrumentId = null;
        getConfigSubject();
      }
    );

    onMounted(() => {
      getYearList();
    });

    return () => (
      <div class={[styles.addClass]}>
        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
          <NFormItem
            path="gradeYear"
            rule={[
              {
                required: true,
                message: '请选择学年'
              }
            ]}>
            <CSelect
              {...({
                style: { width: '400px' },
                options: gradeYearList.value,
                placeholder: '选择学年',
                clearable: true
              } as any)}
              v-model:value={createClassForm.gradeYear}></CSelect>
          </NFormItem>
          <NFormItem
            path="currentGradeNum"
            rule={[
              {
                required: true,
                message: '请选择年级'
              }
            ]}>
            <CSelect
              {...({
                style: { width: '400px' },
                options: props.gradeNumList,
                placeholder: '选择年级',
                clearable: true
              } as any)}
              v-model:value={createClassForm.currentGradeNum}></CSelect>
          </NFormItem>
          <NFormItem
            path="currentClass"
            rule={[
              {
                required: true,
                message: '请选择班级'
              }
            ]}>
            <CSelect
              {...({
                style: { width: '400px' },
                options: props.classArray,
                placeholder: '选择班级',
                clearable: true
              } as any)}
              v-model:value={createClassForm.currentClass}></CSelect>
          </NFormItem>
          <NFormItem
            path="instrumentId"
            rule={[
              {
                required: true,
                message: '请选择乐器'
              }
            ]}>
            {/* <CSelect
              {...({
                style: { width: '400px' },
                options: subjectList.value,
                placeholder: '选择乐器',
                clearable: true
              } as any)}
              v-model:value={createClassForm.instrumentId}></CSelect> */}
            <NCascader
              placeholder="请选择乐器"
              v-model:value={createClassForm.instrumentId}
              options={subjectList.value}
              checkStrategy="child"
              showPath
              childrenField="instruments"
              expandTrigger="hover"
              labelField="name"
              valueField="id"
              clearable
              filterable
              style={{ width: '400px' }}
            />
          </NFormItem>
        </NForm>
        <NSpace class={styles.btnGroup} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton
            round
            loading={data.uploading}
            onClick={() => submitForms()}
            type="primary">
            保存
          </NButton>
        </NSpace>
      </div>
    );
  }
});