updata:accountInfo

projects/textbook/src/app/comp-user/comp-user.component.scss

@@ -47,13 +47,13 @@
 
 .login-content {
   position     : absolute;
-  transform    : translateY(-50%);
+  transform    : translate(-50%, -50%);
   top          : 50%;
-  right        : 100px;
+  left        : 50%;
   padding      : 10px 50px;
   text-align   : center;
-  width        : 448px;
-  min-height   : 536px;
+  width        : 944px;
+  min-height   : 518px;
   margin       : 0 auto;
   background   : #fff;
   border-radius: 8px;

projects/textbook/src/modules/login/account-info/account-info.component.html

@@ -1,26 +1,13 @@
 <div class="region">
   <div class="nav">
     <div>
-      <svg
-        width="24"
-        height="27"
-        viewBox="0 0 18 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg width="24" height="27" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M18 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4C2 4.53043 2.21071 5.03914 2.58579 5.41421C2.96086 5.78929 3.46957 6 4 6H18V19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H4C2.93913 20 1.92172 19.5786 1.17157 18.8284C0.421427 18.0783 0 17.0609 0 16V4C0 2.93913 0.421427 1.92172 1.17157 1.17157C1.92172 0.421427 2.93913 0 4 0H17C17.2652 0 17.5196 0.105357 17.7071 0.292893C17.8946 0.48043 18 0.734783 18 1V2Z"
-          fill="url(#paint0_linear_5_11023)"
-        />
+          fill="url(#paint0_linear_5_11023)" />
         <defs>
-          <linearGradient
-            id="paint0_linear_5_11023"
-            x1="9"
-            y1="-2.21282e-07"
-            x2="25.5"
-            y2="40"
-            gradientUnits="userSpaceOnUse"
-          >
+          <linearGradient id="paint0_linear_5_11023" x1="9" y1="-2.21282e-07" x2="25.5" y2="40"
+            gradientUnits="userSpaceOnUse">
             <stop stop-color="#E04860" />
             <stop offset="1" stop-color="#E99306" />
           </linearGradient>
@@ -33,169 +20,107 @@
     </div>
   </div>
   <div class="form">
-    <form
-      nz-form
-      [formGroup]="validateForm"
-      class="account-form"
-      (ngSubmit)="submitForm()"
-    >
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >姓名</nz-form-label
-        >
-        <nz-input-group>
-          <input
-            nz-input
-            type="text"
-            formControlName="name"
-            placeholder="请填写姓名"
-          />
+    <form nz-form [formGroup]="validateForm" class="account-form" (ngSubmit)="submitForm()">
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>姓名</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="text" formControlName="name" placeholder="请输入真实姓名" />
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true">手机号</nz-form-label>
-        <nz-input-group>
-          <input
-            nz-input
-            type="text"
-            formControlName="phone"
-            [disabled]="true"
-            placeholder="请填写手机号"
-            maxlength="11"
-          />
-        </nz-input-group> </nz-form-item
-      ><nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >电子邮箱</nz-form-label
-        >
-        <nz-input-group>
-          <input
-            nz-input
-            type="email"
-            [disabled]="user?.get('email')"
-            formControlName="email"
-            placeholder="请填写电子邮箱"
-          />
-        </nz-input-group> </nz-form-item
-      ><nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true">办公电话</nz-form-label>
-        <nz-input-group>
-          <input
-            nz-input
-            type="text"
-            formControlName="telephone"
-            placeholder="请填写办公电话"
-          />
+      @if (validateForm.value.identity!='工作联系人') {
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true">手机号</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="text" formControlName="phone" [disabled]="true" placeholder="请输入手机号" maxlength="11" />
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true">省份</nz-form-label>
-        <nz-input-group>
-          <nz-select
-            style="width: 100%"
-            nzShowSearch
-            nzAllowClear
-            nzPlaceHolder="请选择省份"
-            formControlName="province"
-          >
-            @for(item of provinces; track item;let index = $index){
+      }
+
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>电子邮箱</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="email" [disabled]="user?.get('email')" formControlName="email" placeholder="请输入电子邮箱" />
+        </nz-input-group>
+      </nz-form-item>
+
+
+
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>人员类型</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <nz-select style="width: 100%" nzShowSearch nzAllowClear nzPlaceHolder="请选择您在本次教材遴选推荐中所属的身份类型" formControlName="identity">
+            @for(item of userType; track item;let index = $index){
             <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
               item
-            }}</nz-option>
+              }}</nz-option>
             }
           </nz-select>
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >人员类型</nz-form-label
-        >
-        <nz-input-group>
-          <nz-select
-            style="width: 100%"
-            nzShowSearch
-            nzAllowClear
-            nzPlaceHolder="请选择人员类型"
-            formControlName="identity"
-          >
-            @for(item of userType; track item;let index = $index){
+      <!-- validateForm.value.identity=='工作联系人' -->
+      @if (true) {
+      <!-- <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true">办公电话</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="text" formControlName="telephone" placeholder="请填写办公电话" />
+        </nz-input-group>
+      </nz-form-item>
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true">省份</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <nz-select style="width: 100%" nzShowSearch nzAllowClear nzPlaceHolder="请选择省份" formControlName="province">
+            @for(item of provinces; track item;let index = $index){
             <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
               item
-            }}</nz-option>
+              }}</nz-option>
             }
           </nz-select>
         </nz-input-group>
-      </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >单位类型</nz-form-label
-        >
-        <nz-input-group>
-          <nz-select
-            style="width: 100%"
-            nzShowSearch
-            nzAllowClear
-            nzPlaceHolder="请选择单位类型"
-            formControlName="companyType"
-            (ngModelChange)="provinceChange('', true)"
-          >
+      </nz-form-item> -->
+
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>单位类型</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <nz-select style="width: 100%" nzShowSearch nzAllowClear nzPlaceHolder="请选择所在单位类型" formControlName="companyType"
+            (ngModelChange)="provinceChange('', true)">
             @for(item of unitTypes; track item.name;let index = $index){
             <nz-option nzCustomContent [nzValue]="item.name" [nzLabel]="item.name">{{
               item.name
-            }}</nz-option>
+              }}</nz-option>
             }
           </nz-select>
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >单位名称</nz-form-label
-        >
-        <nz-input-group>
-          <nz-select
-            style="width: 100%"
-            nzShowSearch
-            nzAllowClear
-            nzPlaceHolder="请选择单位名称"
-            [(ngModel)]="companyId"
-            (nzOnSearch)="provinceChange($event)"
-            [ngModelOptions]="{ standalone: true }"
-          >
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>单位名称</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <nz-select style="width: 100%" nzShowSearch nzAllowClear nzPlaceHolder="请输入所在单位名称" [(ngModel)]="companyId"
+            (nzOnSearch)="provinceChange($event)" [ngModelOptions]="{ standalone: true }">
             @for(item of companys; track item;let index = $index){
             <nz-option nzCustomContent [nzValue]="item.id" [nzLabel]="item.name">{{
               item.name
-            }}</nz-option>
+              }}</nz-option>
             }
           </nz-select>
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true">所在部门</nz-form-label>
-        <nz-input-group>
-          <input
-            nz-input
-            type="text"
-            formControlName="departmentName"
-            placeholder="请填写所在部门"
-          />
+      <!-- <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true">所在部门</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="text" formControlName="departmentName" placeholder="请填写所在部门" />
         </nz-input-group>
       </nz-form-item>
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true">职务</nz-form-label>
-        <nz-input-group>
-          <input
-            nz-input
-            type="text"
-            formControlName="postName"
-            placeholder="请填写职务"
-          />
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true">职务</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <input nz-input type="text" formControlName="postName" placeholder="请填写职务" />
         </nz-input-group>
-      </nz-form-item>
+      </nz-form-item> -->
       <!-- <nz-form-item>
         <nz-form-label class="label" [nzNoColon]="true" nzRequired
           >身份证号</nz-form-label
         >
-        <nz-input-group>
+        <nz-input-group nz-col nzSpan="16">
           <input
             nz-input
             type="text"
@@ -204,28 +129,23 @@
           />
         </nz-input-group>
       </nz-form-item> -->
-      <nz-form-item>
-        <nz-form-label class="label" [nzNoColon]="true" nzRequired
-          >单位联系人认证文件</nz-form-label
-        >
-        <nz-input-group>
-          <app-comp-upload [width]="320" (change)="upload($event)" title="上传认证文件"></app-comp-upload>
+      <nz-form-item nz-row nzJustify="space-between">
+        <nz-form-label nz-col nzSpan="6" class="label" [nzNoColon]="true" nzRequired>单位联系人认证文件</nz-form-label>
+        <nz-input-group nz-col nzSpan="16">
+          <div style="background: var(--palette-grey---semi-grey-1, #EAE6E6);width: 120px;padding: 5px 10px;border-radius: 5px;">
+            <app-comp-upload [width]="320" (change)="upload($event)" title="上传认证文件"></app-comp-upload>
+          </div>
           <div class="text" style="margin: 10px 0; color: #231c1f99">
-            请下载单位联系人认证<a href="">文件模板</a
-            >，填写盖章后上传。支持上传 PDF、JPG、JPEG、PNG
-            格式，单个文件大小不超过 2M
+            请 <a href="">下载单位联系人认证文件模板</a>，填写盖章后上传 PDF 格式，单个文件大小不超过 2M
+            <!-- 请<a href="">下载单位联系人认证文件模板</a>，填写盖章后上传。支持上传 PDF、JPG、JPEG、PNG
+            格式，单个文件大小不超过 2M -->
           </div>
         </nz-input-group>
       </nz-form-item>
+      }
     </form>
 
-    <button
-      id="basic"
-      class="form-button"
-      type="button"
-      mat-button
-      (click)="submitForm()"
-    >
+    <button id="basic" class="form-button" type="button" mat-button (click)="submitForm()">
       提交
     </button>
     <!-- <div class="menu">
@@ -245,4 +165,4 @@
       </nz-dropdown-menu>
     </div> -->
   </div>
-</div>
+</div>

projects/textbook/src/modules/login/account-info/account-info.component.scss

@@ -1,5 +1,5 @@
 .region {
-  width: 348px;
+  width: 600px;
   margin: 20px auto 10px;
   .nav {
     text-align: left;
@@ -18,7 +18,7 @@
     }
   }
   .account-form {
-    height: 320px;
+    // height: 320px;
     overflow-y: scroll;
     // scrollbar-width: none; /* firefox */
     // -ms-overflow-style: none; /* IE 10+ */
@@ -42,14 +42,17 @@
   }
 
   nz-form-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: self-start;
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+    // align-items: self-start;
     margin-bottom: 10px;
     width: calc(100% - 6px);
   }
 }
+.label{
+  text-align: start;
+}
 .ant-input-group{
   text-align: left;
 

projects/textbook/src/modules/login/account-info/account-info.component.ts

@@ -20,6 +20,8 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 import { provinces } from '../../../services/provinces';
 import { CompUploadComponent } from '../../../app/comp-upload/comp-upload.component';
 import Parse from 'parse';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+
 @Component({
   selector: 'app-account-info',
   standalone: true,
@@ -30,6 +32,7 @@ import Parse from 'parse';
     NzUploadModule,
     NzModalModule,
     CompUploadComponent,
+    NzGridModule
   ],
   templateUrl: './account-info.component.html',
   styleUrls: ['./account-info.component.scss'],
@@ -40,24 +43,24 @@ export class AccountInfoComponent implements OnInit {
     name: FormControl<string>; //姓名
     phone: FormControl<string>; //手机号
     email: FormControl<string>; //电子邮箱
-    telephone: FormControl<string>; //办公电话
-    province: FormControl<string>; //省份
+    // telephone: FormControl<string>; //办公电话
+    // province: FormControl<string>; //省份
     identity: FormControl<string>; //人员类型
     companyType: FormControl<string>; //单位类型
     // idcard: FormControl<string>; //身份证号
-    departmentName: FormControl<string>; //所在部门
-    postName: FormControl<string>; //职务
+    // departmentName: FormControl<string>; //所在部门
+    // postName: FormControl<string>; //职务
   }> = this.fb.group({
     name: ['', [Validators.required]],
     phone: [''],
     email: ['', [Validators.required]],
-    telephone: [''],
-    province: [''],
+    // telephone: [''],
+    // province: [''],
     identity: ['', [Validators.required]],
     companyType: ['', [Validators.required]],
     // idcard: ['', [Validators.required]],
-    departmentName: [''],
-    postName: [''],
+    // departmentName: [''],
+    // postName: [''],
   });
   identityFile: string = ''; //单位联系人认证文件
   companyId: string = ''; //单位名称
@@ -98,12 +101,12 @@ export class AccountInfoComponent implements OnInit {
       name: [user?.get('name') || '', [Validators.required]],
       phone: [user?.get('phone') || ''],
       email: [user?.get('email') || '', [Validators.required]],
-      telephone: [profile?.get('telephone') || ''],
-      province: [user?.get('province') || ''],
+      // telephone: [profile?.get('telephone') || ''],
+      // province: [user?.get('province') || ''],
       identity: [profile?.get('identity') || '', [Validators.required]],
       companyType: [profile?.get('companyType') || '', [Validators.required]],
-      departmentName: [user?.get('departmentName') || ''],
-      postName: [profile?.get('postName') || ''],
+      // departmentName: [user?.get('departmentName') || ''],
+      // postName: [profile?.get('postName') || ''],
     });
     this.identityFile = profile?.get('identityFile') || ''
     this.companyId = user?.get('department')?.id || '';