classroom-instruments/src/views/setting/components/personInfo.tsx

import { defineComponent, reactive, ref } from 'vue';
import styles from '../index.module.less';
import {
  NImage,
  NForm,
  NFormItem,
  NInput,
  NGrid,
  NGi,
  NButton,
  NSelect,
  NSpace,
  SelectOption,
  useMessage
} from 'naive-ui';
import headerD from '@/views/home/images/headerD.png';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import femaleIcon from '../images/femaleIcon.png';
import maleIcon from '../images/maleIcon.png';
import { state } from '/src/state';
import { useUserStore } from '/src/store/modules/users';
import { api_teacherUpdate } from '/src/api/user';
export default defineComponent({
  name: 'setting-personInfo',
  setup(props, { emit, attrs }) {
    const message = useMessage();
    const userStore = useUserStore();
    const formOptions = reactive({
      sexs: [
        { label: '男', value: 1, class: 'option' },
        { label: '女', value: 0, class: 'option' }
      ] as SelectOption[]
    });
    const formRef = ref();
    const teacherForm = reactive({
      nickname: userStore.info.nickname,
      phone: userStore.info.phone,
      gender: userStore.info.gender,
      schoolId: userStore.info.schoolInfos?.[0]?.id,
      tenantId: userStore.info.schoolInfos?.[0]?.tenantId,
      id: userStore.info.id
    });
    const data = reactive({
      disabled: true
    });

    const handleSave = () => {
      formRef.value.validate(async (err: any) => {
        if (err) {
          return;
        }
        await api_teacherUpdate(teacherForm);
        console.log(teacherForm);
        userStore.getInfo();
        data.disabled = true;
        message.success('修改成功');
      });
    };
    return () => (
      <div class={styles.infoWrap}>
        <div class={styles.teacherInfoWrap}>
          <div class={styles.teacherHeadWrap}>
            <NImage
              previewDisabled
              class={styles.headerD}
              src={headerD}></NImage>
            <NImage
              previewDisabled
              class={styles.defultHeade}
              src={defultHeade}></NImage>
          </div>
          <div class={styles.headerInfo}>
            <p class={styles.headerTitle}>
              张晚意
              <NImage
                previewDisabled
                class={styles.sexIcon}
                src={maleIcon}></NImage>
            </p>
            <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
          </div>
        </div>
        <div class={styles.setInfo}>
          <NForm ref={formRef} model={teacherForm} disabled={data.disabled}>
            <NGrid cols={3} x-gap="100">
              <NGi>
                <NFormItem
                  label="姓名"
                  path="nickname"
                  rule={{
                    required: true,
                    message: '请填写老师姓名',
                    trigger: 'blur'
                  }}>
                  <NInput
                    placeholder="请填写老师姓名"
                    v-model:value={teacherForm.nickname}></NInput>
                </NFormItem>
              </NGi>
              <NGi>
                <NFormItem
                  label="手机号"
                  path="phone"
                  rule={[
                    {
                      required: true,
                      message: '请填写老师手机号',
                      trigger: 'blur'
                    },
                    {
                      pattern: /^1[3456789]\d{9}$/,
                      message: '手机号格式不正确',
                      trigger: 'blur'
                    }
                  ]}>
                  <NInput
                    placeholder="请填写老师手机号"
                    v-model:value={teacherForm.phone}></NInput>
                </NFormItem>
              </NGi>
              <NGi>
                <NFormItem label="性别" path="sex">
                  <NSelect
                    showArrow={!data.disabled}
                    placeholder="请选择性别"
                    options={formOptions.sexs}
                    v-model:value={teacherForm.gender}
                  />
                </NFormItem>
              </NGi>
            </NGrid>
          </NForm>
        </div>
        {data.disabled ? (
          <NSpace class={styles.btnList} align="center" justify="end">
            <NButton class={styles.btn} color="#198cfe">
              修改密码
            </NButton>
            <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={() => (data.disabled = true)}>
              取消
            </NButton>
            <NButton
              class={styles.btn}
              type="primary"
              onClick={() => handleSave()}>
              完成
            </NButton>
          </NSpace>
        )}
      </div>
    );
  }
});