liushengqiang 1 年之前
父節點
當前提交
148d5ccc19

+ 4 - 0
src/views/setting/components/personInfo.tsx

@@ -135,6 +135,7 @@ export default defineComponent({
                     trigger: 'blur'
                   }}>
                   <NInput
+                    bordered={!data.disabled}
                     placeholder="请填写老师姓名"
                     v-model:value={teacherForm.nickname}></NInput>
                 </NFormItem>
@@ -156,6 +157,7 @@ export default defineComponent({
                     }
                   ]}>
                   <NInput
+                    bordered={!data.disabled}
                     placeholder="请填写老师手机号"
                     v-model:value={teacherForm.phone}></NInput>
                 </NFormItem>
@@ -163,6 +165,7 @@ export default defineComponent({
               <NGi>
                 <NFormItem label="性别" path="sex">
                   <NSelect
+                    bordered={!data.disabled}
                     class={styles.select}
                     showArrow={!data.disabled}
                     placeholder="请选择性别"
@@ -174,6 +177,7 @@ export default defineComponent({
             </NGrid>
             <NFormItem label="城区" style={{ maxWidth: '30%' }}>
               <NCascader
+                bordered={!data.disabled}
                 options={formOptions.areaList}
                 labelField="name"
                 valueField="code"

+ 60 - 4
src/views/setting/components/schoolInfo/index.module.less

@@ -38,10 +38,38 @@
     }
 }
 
-.input {
-    border-radius: 8px;
-    min-height: 43px;
-    min-width: 240px;
+.formWrap {
+    :global {
+        .n-input {
+            min-width: 284px;
+            height: 50px;
+            border-radius: 8Px;
+
+            .n-input__input-el {
+                height: 100%;
+            }
+
+            &.n-input--disabled {
+                background-color: #F5F6FA;
+                color: rgba(149, 149, 152, 1);
+            }
+        }
+
+        .n-base-selection {
+            min-width: 284px;
+            border-radius: 8Px;
+
+            .n-base-selection-label {
+                height: 50px;
+
+            }
+        }
+
+        .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+            background-color: #F5F6FA;
+            color: rgba(149, 149, 152, 1);
+        }
+    }
 }
 
 .schoolInfo {
@@ -72,6 +100,34 @@
             font-weight: bold;
             font-size: 15Px;
         }
+
+        .n-input {
+            height: 50px;
+            border-radius: 8Px;
+
+            .n-input__input-el {
+                height: 100%;
+            }
+
+            &.n-input--disabled {
+                background-color: #F5F6FA;
+                color: rgba(149, 149, 152, 1);
+            }
+        }
+
+        .n-base-selection {
+            border-radius: 8Px;
+
+            .n-base-selection-label {
+                height: 50px;
+
+            }
+        }
+
+        .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+            background-color: #F5F6FA;
+            color: rgba(149, 149, 152, 1);
+        }
     }
 
     .errorBtn {

+ 22 - 13
src/views/setting/components/schoolInfo/index.tsx

@@ -13,7 +13,7 @@ import {
   useDialog,
   useMessage
 } from 'naive-ui';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { useUserStore } from '/src/store/modules/users';
 import UploadFile from '/src/components/upload-file';
@@ -184,13 +184,18 @@ export default defineComponent({
         }
       });
     };
-
-    const changeSchoolInfo = async () => {
-      data.schoolLoading = false;
-      await api_schoolUpdate({ ...user.info.schoolInfos?.[0], ...forms });
-      data.schoolLoading = true;
-      message.success('修改成功');
-      data.disabled = true;
+    const formRef = ref();
+    const changeSchoolInfo = () => {
+      formRef.value?.validate(async (err: any) => {
+        if (err) {
+          return;
+        }
+        data.schoolLoading = false;
+        await api_schoolUpdate({ ...user.info.schoolInfos?.[0], ...forms });
+        data.schoolLoading = true;
+        message.success('修改成功');
+        data.disabled = true;
+      });
     };
 
     const registerUrl = () => {
@@ -226,25 +231,29 @@ export default defineComponent({
             </div>
           </div>
           <NForm
+            ref={formRef}
+            class={styles.formWrap}
             model={forms}
-            style={{ paddingTop: '30px' }}
+            style={{ paddingTop: '30px', paddingLeft: '80px' }}
             disabled={data.disabled}>
-            <NSpace>
+            <NSpace size={100}>
               <NFormItem
                 label="学校名称"
                 path="name"
                 showRequireMark={false}
                 rule={[
-                  { required: true, message: '请填写学名称', trigger: 'blur' }
+                  { required: true, message: '请填写学名称', trigger: 'blur' }
                 ]}>
                 <NInput
-                  class={styles.input}
+                  bordered={!data.disabled}
                   maxlength={20}
                   v-model:value={forms.name}
                 />
               </NFormItem>
-              <NFormItem label="城区" style={{ width: '300px' }}>
+              <NFormItem label="城区">
                 <NCascader
+                  placeholder="请选择城区"
+                  bordered={!data.disabled}
                   options={formOptions.areaList}
                   labelField="name"
                   valueField="code"

+ 38 - 27
src/views/setting/index.module.less

@@ -54,6 +54,7 @@
       position: relative;
       width: 236Px;
       height: 132Px;
+
       .headerD {
         width: 100%;
         height: 100%;
@@ -131,23 +132,32 @@
         color: rgba(0, 0, 0, 0.8);
       }
 
-      .n-input.n-input--disabled {
-        background-color: #f5f6fa;
-        color: rgba(0, 0, 0, 0.4);
-        border: none;
-      }
-
       .n-input {
-        border-radius: 8px;
+        height: 50px;
+        border-radius: 8Px;
+
+        .n-input__input-el {
+          height: 100%;
+        }
+
+        &.n-input--disabled {
+          background-color: #F5F6FA;
+          color: rgba(149, 149, 152, 1);
+        }
       }
 
-      .n-input__input-el {
-        height: 55Px;
-        line-height: 55Px;
-        border-radius: 8px;
+      .n-base-selection {
+        border-radius: 8Px;
+
+        .n-base-selection-label {
+          height: 50px;
+
+        }
       }
-      .n-base-selection .n-base-selection-label{
-        height: 55Px;
+
+      .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+        background-color: #F5F6FA;
+        color: rgba(149, 149, 152, 1);
       }
     }
   }
@@ -182,39 +192,40 @@
     text-align: center;
   }
 }
-.select{
-  :globla{
-    .n-base-selection{
-      height: 53Px;
-    }
-  }
-}
+
 .changePwdModal {
   border-radius: 16px;
-  .wrap{
+
+  .wrap {
     padding: 12px 0;
-    :global{
-      .n-input{
+
+    :global {
+      .n-input {
         border-radius: 8px;
       }
-      .n-input .n-input__input-el{
+
+      .n-input .n-input__input-el {
         height: 53Px;
       }
-      .n-button.n-button--disabled{
+
+      .n-button.n-button--disabled {
         background: #aaa;
       }
     }
   }
-  .sendMsg{
+
+  .sendMsg {
     height: 53px;
     min-width: 108px;
   }
+
   .pwdIcon {
     width: 24px;
     height: 24px;
     cursor: pointer;
   }
-  .submitBtm{
+
+  .submitBtm {
     width: 45%;
     height: 47px;
   }