classroom-instruments/src/views/studentList/components/baseInfo.tsx

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';
import {
  getgradeNumList,
  classArray
} from '@/views/classList/contants';
export default defineComponent({
  name: 'setting-personInfo',
  props: {
    studentInfo: {
      type: Object,
      default: () => ({
        nickname: '',
        currentGradeNum: '',
        gender: null,
        phone: '',
        id: '',
        currentClass: ''
      })
    }
  },
  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,
      currentGradeNum: props.studentInfo.currentGradeNum,
      currentClass: props.studentInfo.currentClass
    });
    const gradeNumList = ref(getgradeNumList())
    const classArrayRef = ref([...classArray] as any)
    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.currentGradeNum = val.currentGradeNum;
        studentForm.currentClass = val.currentClass;
      }
    );
    // 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.currentGradeNum = props.studentInfo.currentGradeNum;
      studentForm.currentClass = props.studentInfo.currentClass;
      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="">
                  <NSelect
                    bordered={!data.disabled}
                    class={styles.select}
                    showArrow={!data.disabled}
                    placeholder="请选择年级"
                    options={gradeNumList.value as any}
                    v-model:value={studentForm.currentGradeNum}
                  />
                </NFormItem>
              </NGi>
              <NGi>
                <NFormItem label="班级" path="">
                  <NSelect
                    bordered={!data.disabled}
                    class={styles.select}
                    showArrow={!data.disabled}
                    placeholder="请选择班级"
                    options={classArrayRef.value}
                    v-model:value={studentForm.currentClass}
                  />
                </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>
    );
  }
});