设置

src/views/setting/api.ts

@@ -47,3 +47,7 @@ export const api_schoolUpdate = (params: object) => {
     data: params
   });
 };
+/** 获取省市区 */
+export const api_sysAreaQueryAllProvince = () => {
+  return request.get('/edu-app/open/sysArea/queryAllProvince');
+};

src/views/setting/components/personInfo.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import {
   NImage,
@@ -12,30 +12,36 @@ import {
   NSpace,
   SelectOption,
   useMessage,
-  NModal
+  NModal,
+  NCalendar,
+  NCascader
 } from 'naive-ui';
-import headerD from '@/views/home/images/headerD.png';
+import headerD from '../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 femaleIcon from '../images/femaleIcon.png';
 import { useUserStore } from '/src/store/modules/users';
 import { api_teacherUpdate } from '/src/api/user';
 import UploadFile from '/src/components/upload-file';
 import ForgotPassword from '../modal/forgotPassword';
+import { api_sysAreaQueryAllProvince } from '../api';
 export default defineComponent({
   name: 'setting-personInfo',
-  setup(props, { emit, attrs }) {
+  setup() {
     const message = useMessage();
     const userStore = useUserStore();
     const formOptions = reactive({
       sexs: [
         { label: '男', value: 1, class: 'option' },
         { label: '女', value: 0, class: 'option' }
-      ] as SelectOption[]
+      ] as SelectOption[],
+      areaList: [] as any[]
     });
     const formRef = ref();
     const teacherForm = reactive({
+      provinceCode: '', // 省份编码
+      cityCode: '', // 城市编码
+      regionCode: '', // 区域编码
       nickname: userStore.info.nickname,
       phone: userStore.info.phone,
       gender: userStore.info.gender,
@@ -46,7 +52,18 @@ export default defineComponent({
     });
     const data = reactive({
       disabled: true,
-      openChangePwd: false
+      openChangePwd: false,
+      uploadShow: true
+    });
+
+    const getAreaList = async () => {
+      const res = await api_sysAreaQueryAllProvince();
+      if (res?.code === 200) {
+        formOptions.areaList = res.data;
+      }
+    };
+    onMounted(() => {
+      getAreaList();
     });
 
     const handleSave = () => {
@@ -77,24 +94,32 @@ export default defineComponent({
               style={{ display: data.disabled ? 'none' : '' }}
               class={[styles.defultHeade, styles.changeHead]}>
               修改头像
-              <UploadFile
-                class={[styles.uploadFile]}
-                cropper
-                onUpdate:fileList={val => {
-                  teacherForm.avatar = val;
-                }}
-              />
+              {data.uploadShow && (
+                <UploadFile
+                  class={[styles.uploadFile]}
+                  cropper
+                  onUpdate:fileList={val => {
+                    teacherForm.avatar = val;
+                    data.uploadShow = false;
+                    setTimeout(() => {
+                      data.uploadShow = true;
+                    }, 100);
+                  }}
+                />
+              )}
             </div>
           </div>
           <div class={styles.headerInfo}>
             <p class={styles.headerTitle}>
-              张晚意
+              {userStore.info.nickname}
               <NImage
                 previewDisabled
                 class={styles.sexIcon}
-                src={maleIcon}></NImage>
+                src={userStore.info.gender ? maleIcon : femaleIcon}></NImage>
+            </p>
+            <p class={styles.headerSubTitle}>
+              {userStore.info.schoolInfos?.[0]?.name} | 音乐老师
             </p>
-            <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
           </div>
         </div>
         <div class={styles.setInfo}>
@@ -138,6 +163,7 @@ export default defineComponent({
               <NGi>
                 <NFormItem label="性别" path="sex">
                   <NSelect
+                    class={styles.select}
                     showArrow={!data.disabled}
                     placeholder="请选择性别"
                     options={formOptions.sexs}
@@ -146,6 +172,24 @@ export default defineComponent({
                 </NFormItem>
               </NGi>
             </NGrid>
+            <NFormItem label="城区" style={{ maxWidth: '30%' }}>
+              <NCascader
+                options={formOptions.areaList}
+                labelField="name"
+                valueField="code"
+                childrenField="areas"
+                checkStrategy="child"
+                expandTrigger="hover"
+                defaultValue={
+                  userStore.info.regionCode || userStore.info.cityCode
+                }
+                onUpdate:value={(val: any, option: any, pathValues: any) => {
+                  teacherForm.provinceCode = pathValues[0]?.code;
+                  teacherForm.cityCode = pathValues[1]?.code;
+                  teacherForm.regionCode = pathValues[2]?.code;
+                }}
+              />
+            </NFormItem>
           </NForm>
         </div>
         {data.disabled ? (

src/views/setting/components/schoolInfo/index.module.less

@@ -90,9 +90,10 @@
     min-width: 456Px;
 
     :global {
-        .n-dialog__close{
+        .n-dialog__close {
             transform: translate(0, 3Px);
         }
+
         .n-dialog__title {
             min-height: 70Px;
             justify-content: center;
@@ -138,18 +139,33 @@
 
         .nalert {
             padding: 0 30Px;
-            .n-alert{
+
+            .n-alert {
                 background: #FFE8E8;
                 text-align: center;
             }
-            .n-alert-body .n-alert-body__content{
+
+            .n-alert-body .n-alert-body__content {
                 color: #EA4132;
             }
         }
-        .actionBtn{
+
+        .actionBtn {
             width: 156Px;
             height: 47Px;
             font-size: 18Px;
         }
     }
+}
+
+.btnList {
+    width: 100%;
+
+    .btn {
+        width: 144px;
+        border-radius: 8px;
+        font-size: 18px;
+        font-weight: 600 !important;
+        margin-right: 24px;
+    }
 }

src/views/setting/components/schoolInfo/index.tsx

@@ -1,6 +1,7 @@
 import {
   DataTableColumn,
   NButton,
+  NCascader,
   NDataTable,
   NForm,
   NFormItem,
@@ -19,6 +20,7 @@ import UploadFile from '/src/components/upload-file';
 import { Add } from '@vicons/ionicons5';
 import {
   api_schoolUpdate,
+  api_sysAreaQueryAllProvince,
   api_teacherPage,
   api_tenantInfoUpdateStatus,
   api_userResetPassword
@@ -30,15 +32,21 @@ export default defineComponent({
   name: 'school-info',
   setup() {
     const user = useUserStore();
-
+    const formOptions = reactive({
+      areaList: [] as any[]
+    });
     const forms = reactive({
       name: user.info.schoolInfos?.[0]?.name,
-      logo: user.info.schoolInfos?.[0]?.logo || user.info.avatar
+      logo: user.info.schoolInfos?.[0]?.logo || user.info.avatar,
+      provinceCode: user.info.schoolInfos?.[0]?.provinceCode || '', // 省份编码
+      cityCode: user.info.schoolInfos?.[0]?.cityCode || '', // 城市编码
+      regionCode: user.info.schoolInfos?.[0]?.regionCode || '' // 区域编码
     });
     const data = reactive({
       loading: false,
       schoolLoading: true,
       dataList: [] as any[],
+      disabled: true,
 
       modal: false,
       qrModal: false
@@ -113,6 +121,12 @@ export default defineComponent({
         }
       ];
     };
+    const getAreaList = async () => {
+      const res = await api_sysAreaQueryAllProvince();
+      if (res?.code === 200) {
+        formOptions.areaList = res.data;
+      }
+    };
 
     const getList = async () => {
       data.loading = true;
@@ -129,6 +143,7 @@ export default defineComponent({
       }
     };
     onMounted(() => {
+      getAreaList();
       getList();
     });
 
@@ -174,6 +189,7 @@ export default defineComponent({
       await api_schoolUpdate({ ...user.info.schoolInfos?.[0], ...forms });
       data.schoolLoading = true;
       message.success('修改成功');
+      data.disabled = true;
     };
     return () => (
       <div class={styles.schoolInfo}>
@@ -185,7 +201,9 @@ export default defineComponent({
               height={100}
               src={forms.logo}
             />
-            <div class={styles.changeHead}>
+            <div
+              style={{ display: data.disabled ? 'none' : '' }}
+              class={styles.changeHead}>
               修改头像
               {data.schoolLoading && (
                 <UploadFile
@@ -193,29 +211,76 @@ export default defineComponent({
                   cropper
                   onUpdate:fileList={val => {
                     forms.logo = val;
-                    changeSchoolInfo();
                   }}
                 />
               )}
             </div>
           </div>
-          <NForm model={forms} style={{ paddingTop: '30px' }}>
-            <NFormItem
-              label="学校名称"
-              path="name"
-              showRequireMark={false}
-              rule={[
-                { required: true, message: '请填写学习名称', trigger: 'blur' }
-              ]}>
-              <NInput
-                class={styles.input}
-                maxlength={20}
-                v-model:value={forms.name}
-                onBlur={() => {
-                  changeSchoolInfo();
-                }}
-              />
-            </NFormItem>
+          <NForm
+            model={forms}
+            style={{ paddingTop: '30px' }}
+            disabled={data.disabled}>
+            <NSpace>
+              <NFormItem
+                label="学校名称"
+                path="name"
+                showRequireMark={false}
+                rule={[
+                  { required: true, message: '请填写学习名称', trigger: 'blur' }
+                ]}>
+                <NInput
+                  class={styles.input}
+                  maxlength={20}
+                  v-model:value={forms.name}
+                />
+              </NFormItem>
+              <NFormItem label="城区" style={{ width: '300px' }}>
+                <NCascader
+                  options={formOptions.areaList}
+                  labelField="name"
+                  valueField="code"
+                  childrenField="areas"
+                  checkStrategy="child"
+                  expandTrigger="hover"
+                  defaultValue={
+                    user.info.schoolInfos?.[0]?.regionCode ||
+                    user.info.schoolInfos?.[0]?.cityCode
+                  }
+                  onUpdate:value={(val: any, option: any, pathValues: any) => {
+                    forms.provinceCode = pathValues[0]?.code;
+                    forms.cityCode = pathValues[1]?.code;
+                    forms.regionCode = pathValues[2]?.code;
+                  }}
+                />
+              </NFormItem>
+              <NFormItem>
+                {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={() => (data.disabled = true)}>
+                      取消
+                    </NButton>
+                    <NButton
+                      class={styles.btn}
+                      loading={!data.schoolLoading}
+                      type="primary"
+                      onClick={() => changeSchoolInfo()}>
+                      完成
+                    </NButton>
+                  </NSpace>
+                )}
+              </NFormItem>
+            </NSpace>
           </NForm>
         </NSpace>
 
@@ -256,7 +321,10 @@ export default defineComponent({
           preset="dialog"
           showIcon={false}>
           <div style={{ textAlign: 'center' }}>
-            <TheQrCode text="https://www.baidu.com" size={300} />
+            <TheQrCode
+              text={`${location.origin}/classroom-app/#/teaher-register?tenantId=${user.info.schoolInfos?.[0]?.tenantId}&schoolId=${user.info.schoolInfos?.[0]?.id}&schoolName=${user.info.schoolInfos?.[0]?.name}`}
+              size={300}
+            />
           </div>
         </NModal>
       </div>

src/views/setting/index.module.less

@@ -52,20 +52,21 @@
 
     .teacherHeadWrap {
       position: relative;
-
+      width: 236Px;
+      height: 132Px;
       .headerD {
-        width: 237px;
-        height: 142px;
+        width: 100%;
+        height: 100%;
       }
 
       .defultHeade {
-        width: 116px;
-        height: 116px;
+        width: 116Px;
+        height: 116Px;
         overflow: hidden;
         border-radius: 50%;
         position: absolute;
-        top: 13px;
-        left: 61px;
+        top: 8Px;
+        left: 60Px;
       }
 
       .changeHead {
@@ -141,10 +142,13 @@
       }
 
       .n-input__input-el {
-        height: 55px;
-        line-height: 55px;
+        height: 55Px;
+        line-height: 55Px;
         border-radius: 8px;
       }
+      .n-base-selection .n-base-selection-label{
+        height: 55Px;
+      }
     }
   }
 }
@@ -178,7 +182,13 @@
     text-align: center;
   }
 }
-
+.select{
+  :globla{
+    .n-base-selection{
+      height: 53Px;
+    }
+  }
+}
 .changePwdModal {
   border-radius: 16px;
   .wrap{
@@ -188,7 +198,7 @@
         border-radius: 8px;
       }
       .n-input .n-input__input-el{
-        height: 53px;
+        height: 53Px;
       }
       .n-button.n-button--disabled{
         background: #aaa;

src/views/setting/index.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
           <NTabPane name="person" tab="个人信息">
             <PersonInfo></PersonInfo>
           </NTabPane>
-          {user.info.isSuperAdmin && (
+          {!user.info.isSuperAdmin && (
             <NTabPane name="school" tab="学校设置">
               <SchoolInfo />
             </NTabPane>