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

import { NButton, NSpace, useMessage, NForm, NFormItem } from 'naive-ui';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '../index.module.less';
import CSelect from '/src/components/CSelect';
import { getConfiguredSubjects, resetClass } from '../api';
import { useCatchStore } from '/src/store/modules/catchData';
export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ id: '' })
    },
    subjectList: {
      type: Array,
      default: () => []
    }
  },
  name: 'resetStudent',
  emits: ['close', 'getList', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const data = reactive({
      uploading: false
    });
    const message = useMessage();
    const subjectList = ref([] as any);
    const foemsRef = ref();
    const createClassForm = reactive({
      currentGradeNum: null,
      currentClass: null,
      subjectId: null,
      id: null
    });

    const getConfigSubject = async () => {
      try {
        const { data } = await getConfiguredSubjects({
          currentGradeNum: createClassForm.currentGradeNum,
          currentClass: createClassForm.currentClass
        });
        const temp = data || [];
        subjectList.value = temp.map((item: any) => {
          return {
            label: item.name,
            value: item.id
          };
        });
      } catch {
        //
      }
    };
    onMounted(async () => {
      // 获取教材分类列表
      // await catchStore.getSubjects();
      // subjectList.value = [
      //   { id: null, name: '选择声部' },
      //   ...catchStore.getSubjectList
      // ];

      createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
      createClassForm.currentClass = props.activeRow.currentClass;
      createClassForm.subjectId = props.activeRow.subjectId;
      createClassForm.id = props.activeRow.id;

      getConfigSubject();
    });
    const submitForms = () => {
      foemsRef.value.validate(async (error: any) => {
        if (error) {
          return;
        }
        data.uploading = true;
        try {
          await resetClass({ ...createClassForm });
          message.success('修改成功');
          emit('close');
          emit('confirm', {
            lastUseCoursewareId: props.activeRow.lessonCoursewareId,
            unit: props.activeRow.lessonCoursewareKnowledgeDetailId,
            subjectId: createClassForm.subjectId,
            name: props.activeRow.name, // 班级名称
            classGroupId: props.activeRow.id // 班级编号
          });
          emit('getList');
        } catch (e) {
          console.log(e);
        }
        data.uploading = false;
      });
    };
    return () => (
      <div class={[styles.addClass]}>
        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
          <NFormItem
            path="subjectId"
            rule={[
              {
                required: true,
                message: '请选择声部'
              }
            ]}>
            <CSelect
              {...({
                style: { width: '400px' },
                options: subjectList.value,
                placeholder: '选择声部',
                clearable: true
              } as any)}
              v-model:value={createClassForm.subjectId}></CSelect>
          </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>
    );
  }
});