老师信息

src/api/user.ts

@@ -20,6 +20,13 @@ export const getUserInfo = () => {
 };
 
 /**
+ * 老师端修改用户信息
+ */
+export const api_teacherUpdate = (body: any) => {
+  return request.post('/edu-app/teacher/update', {data: body});
+};
+
+/**
  * 获取声部列表
  * returns subjects
  */

src/styles/index.less

@@ -1,3 +1,4 @@
+
 * {
   padding: 0;
   margin: 0;

src/views/setting/components/personInfo.tsx

@@ -7,20 +7,55 @@ import {
   NInput,
   NGrid,
   NGi,
-  NButton
+  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({
-      name: '张晚意',
-      phone: '18971685555',
-      sex: '男'
+      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}>
@@ -46,46 +81,81 @@ export default defineComponent({
           </div>
         </div>
         <div class={styles.setInfo}>
-          <NForm inline model={teacherForm}>
-            <NGrid cols={3} x-gap="160">
+          <NForm ref={formRef} model={teacherForm} disabled={data.disabled}>
+            <NGrid cols={3} x-gap="100">
               <NGi>
-                {' '}
-                <NFormItem label="姓名" path="name">
+                <NFormItem
+                  label="姓名"
+                  path="nickname"
+                  rule={{
+                    required: true,
+                    message: '请填写老师姓名',
+                    trigger: 'blur'
+                  }}>
                   <NInput
-                    disabled
-                    placeholder="请输入老师姓名"
-                    v-model:value={teacherForm.name}></NInput>
+                    placeholder="请填写老师姓名"
+                    v-model:value={teacherForm.nickname}></NInput>
                 </NFormItem>
               </NGi>
               <NGi>
-                {' '}
-                <NFormItem label="手机号" path="phone">
+                <NFormItem
+                  label="手机号"
+                  path="phone"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请填写老师手机号',
+                      trigger: 'blur'
+                    },
+                    {
+                      pattern: /^1[3456789]\d{9}$/,
+                      message: '手机号格式不正确',
+                      trigger: 'blur'
+                    }
+                  ]}>
                   <NInput
-                    disabled
-                    placeholder="请输入老师姓名"
+                    placeholder="请填写老师手机号"
                     v-model:value={teacherForm.phone}></NInput>
                 </NFormItem>
               </NGi>
               <NGi>
-                {' '}
                 <NFormItem label="性别" path="sex">
-                  <NInput
-                    disabled
+                  <NSelect
+                    showArrow={!data.disabled}
                     placeholder="请选择性别"
-                    v-model:value={teacherForm.sex}></NInput>
+                    options={formOptions.sexs}
+                    v-model:value={teacherForm.gender}
+                  />
                 </NFormItem>
               </NGi>
             </NGrid>
           </NForm>
         </div>
-        <div class={styles.btnList}>
-          <NButton class={styles.resetpwd} type="primary">
-            修改密码
-          </NButton>
-          <NButton class={styles.resetInfo} type="error">
-            修改信息
-          </NButton>
-        </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>
     );
   }

src/views/setting/index.module.less

@@ -127,30 +127,31 @@
     }
   }
 }
+
 .btnList {
   width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: 100px;
-  .resetpwd {
+  padding: 20px 0;
+  margin-top: 30px;
+
+  .btn {
     width: 144px;
     height: 45px;
-    background: #198cfe;
     border-radius: 8px;
     font-size: 18px;
     font-weight: 600 !important;
-    color: #ffffff;
     margin-right: 24px;
   }
-  .resetInfo {
-    width: 144px;
-    height: 45px;
-    background: #f24433;
-    border-radius: 8px;
-    font-size: 18px;
-    font-weight: 600 !important;
-    color: #ffffff;
-    margin-right: 100px;
-  }
 }
+
+:global {
+  .option.n-base-select-option{
+    justify-content: center;
+  }
+  .option.n-base-select-option.n-base-select-option--pending::before {
+    background-color: #198cfe !important;
+  }
+  .option.n-base-select-option.n-base-select-option--pending .n-base-select-option__content{
+    color: #fff !important;
+    text-align: center;
+  }
+}

src/views/setting/index.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
           <NTabPane name="person" tab="个人信息">
             <PersonInfo></PersonInfo>
           </NTabPane>
-          <NTabPane disabled name="school" tab="学校设置"></NTabPane>
+          <NTabPane name="school" tab="学校设置"></NTabPane>
         </NTabs>
       </div>
     );