update

src/components/archives/personInfo.vue

@@ -40,32 +40,214 @@
       </div>
     </div>
     <van-popup v-model="show" position="right" :style="{ height: '100%',width: '90%' }">
-      <select-info />   
+      <!-- <select-info />    -->
+      <van-form>
+        <!-- 出生地 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoBirthCity"
+          label="出生地"
+          placeholder="请选择出生地"
+          @click="showBirthplace = true"
+        />
+        <van-popup v-model="showBirthplace" position="bottom">
+          <van-area
+            :area-list="areaList"
+            @confirm="onConfirmBirthplace"
+            @cancel="showArea = false"
+          />
+        </van-popup>
+        <!-- 民族 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoNation"
+          label="民族"
+          placeholder="请选择"
+          @click="showNation = true"
+        />
+        <van-popup v-model="showNation" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.nation"
+            @confirm="onConfirmNation"
+            @cancel="showNation = false"
+          />
+        </van-popup>
+        <!-- 政治面貌 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoPoliticalStatus"
+          label="政治面貌"
+          placeholder="请选择"
+          @click="showPolitical = true"
+        />
+        <van-popup v-model="showPolitical" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.political"
+            @confirm="onConfirmPolitical"
+            @cancel="showPolitical = false"
+          />
+        </van-popup>
+        <!-- 最高学历 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoHighestEducation"
+          label="最高学历"
+          placeholder="请选择"
+          @click="showEdu = true"
+        />
+        <van-popup v-model="showEdu" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.edu"
+            @confirm="onConfirmEdu"
+            @cancel="showEdu = false"
+          />
+        </van-popup>
+        <!-- 婚姻状况 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoMaritalStatus"
+          label="婚姻状况"
+          placeholder="请选择"
+          @click="showMarry = true"
+        />
+        <van-popup v-model="showMarry" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.marry"
+            @confirm="onConfirmMarry"
+            @cancel="showMarry = false"
+          />
+        </van-popup>
+        <!-- 生育状况 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoMaternityStatus"
+          label="生育情况"
+          placeholder="请选择"
+          @click="showMaternity = true"
+        />
+        <van-popup v-model="showMaternity" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.maternity"
+            @confirm="onConfirmMaternity"
+            @cancel="showMaternity = false"
+          />
+        </van-popup>
+        <!-- 档案所在地 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoFileLocation"
+          label="档案所在地"
+          placeholder="请选择"
+          @click="showFile = true"
+        />
+        <van-popup v-model="showFile" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.maternity"
+            @confirm="onConfirmFile"
+            @cancel="showFile = false"
+          />
+        </van-popup>
+        <!-- 开始工作时间 -->
+        <van-field
+          readonly
+          clickable
+          :value="obj.infoWorkStartDate"
+          label="开始工作时间"
+          placeholder="请选择"
+          @click="showMaternity = true"
+        />
+        <van-popup v-model="showMaternity" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns.maternity"
+            @confirm="onConfirmWorkDate"
+            @cancel="showMaternity = false"
+          />
+        </van-popup>
+      </van-form>
+      <div style="margin: 16px;">
+        <van-button round block type="info" native-type="submit" @click="updatePersonInfo">保存</van-button>
+      </div>
     </van-popup>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { Icon, Popup } from "vant";
-import { Component } from "vue-property-decorator";
-import selectInfo from "@/components/archives/selectInfo.vue";
-
+import { Icon, Button, Popup, Form, Picker, Field, Area, Toast } from "vant";
+import { Component,Prop } from "vue-property-decorator";
+// import selectInfo from "@/components/archives/selectInfo.vue";
+import AreaList from "@/assets/js/area.js";
 @Component({
   components: {
+    [Button.name]: Button,
     [Icon.name]: Icon,
     [Popup.name]: Popup,
-    selectInfo
+    [Picker.name]: Picker,
+    [Field.name]: Field,
+    [Area.name]: Area,
+    [Form.name]: Form
+    // selectInfo
   }
 })
 export default class personInfo extends Vue {
-  private obj: object = {};
+  //获取父组件中的isEdit
+  @Prop({
+    type:String,
+    required:true,
+    default:''
+  }) isEdit !:string
+  private obj: any = {};
   private show: boolean = false;
 
+  // private areaList: object = AreaList;
+  private showBirthplace: boolean = false;
+  private showNation: boolean = false;
+  private showPolitical: boolean = false;
+  private showEdu: boolean = false;
+  private showMarry: boolean = false;
+  private showMaternity: boolean = false;
+  private showFile: boolean = false;
+  private showWorkStartDate: boolean = false;
+  private areaList: object = AreaList;
+  private columns: any = {
+    nation: ["汉族", "回族", "蒙古族"],
+    political: ["群众", "共青团员", "预备党员", "中共党员", "其他"],
+    edu: [
+      "小学",
+      "初中",
+      "高中",
+      "大专",
+      "本科",
+      "硕士研究生",
+      "博士研究生",
+      "职高",
+      "中专",
+      "技校",
+      "其他"
+    ],
+    marry: ["已婚", "未婚"],
+    maternity: ["未育", "已育一孩", "已育多孩"]
+  };
+
   created() {
     let params = {
       edId: this.$route.query.ed_id
     };
+    console.log("props="+this.$props.isEdit)
     this.$server.EmployeeService.getPersonInfo(params)
       .then(res => {
         this.obj = res;
@@ -75,7 +257,68 @@ export default class personInfo extends Vue {
   editInfo(): void {
     this.show = true;
   }
-  
+  //出生地
+  onConfirmBirthplace(values: any) {
+    this.obj.infoBirthCity = values.map((item: any) => item.name).join("/");
+    this.showBirthplace = false;
+  }
+  //民族
+  onConfirmNation(value: any) {
+    this.obj.infoNation = value;
+    this.showNation = false;
+  }
+  //政治面貌
+  onConfirmPolitical(value: any) {
+    this.obj.infoPoliticalStatus = value;
+    this.showPolitical = false;
+  }
+  //最高学历
+  onConfirmEdu(value: any) {
+    this.obj.infoHighestEducation = value;
+    this.showEdu = false;
+  }
+  //婚姻状况
+  onConfirmMarry(value: any) {
+    this.obj.infoMaritalStatus = value;
+    this.showMarry = false;
+  }
+  //生育状况
+  onConfirmMaternity(value: any) {
+    this.obj.infoMaternityStatus = value;
+    this.showMaternity = false;
+  }
+  //档案所在地
+  onConfirmFile(value: any) {
+    this.obj.infoFileLocation = value;
+    this.showFile = false;
+  }
+  //开始工作时间
+  onConfirmWorkDate(value: any) {
+    this.obj.infoWorkStartDate = value;
+    this.showWorkStartDate = false;
+  }
+  updatePersonInfo() {
+    let params = {
+      id: this.$route.query.ed_id,
+      infoBirthCity: this.obj.infoBirthCity,
+      infoFileLocation: this.obj.infoFileLocation,
+      infoHighestEducation: this.obj.infoHighestEducation,
+      infoMaritalStatus: this.obj.infoMaritalStatus,
+      infoMaternityStatus: this.obj.infoMaternityStatus,
+      infoNation: this.obj.infoNation,
+      infoPoliticalStatus: this.obj.infoPoliticalStatus,
+      infoWorkStartDate: this.obj.infoWorkStartDate
+    };
+    this.$server.EmployeeService.savePersonInfo(params)
+      .then(res => {
+        console.log(res);
+        Toast.success("保存成功");
+        this.show = false;
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
 }
 </script>
 

src/components/archives/socialInfo.vue

@@ -41,8 +41,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.infoRegisteredResidence"
-          :value="value"
+          :value="obj.infoRegisteredResidence"
           label="户口性质"
           placeholder="请选择"
           @click="showCategory = true"
@@ -51,8 +50,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.unitPreSocialStatus"
-          :value="value"
+          :value="obj.unitPreSocialStatus"
           label="前期社保状态"
           placeholder="请选择"
           @click="showSocialStatus = true"
@@ -61,8 +59,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.unitPrePaymentType"
-          :value="value"
+          :value="obj.unitPrePaymentType"
           label="前期缴费种类"
           placeholder="请选择"
           @click="showPaymentType = true"
@@ -71,8 +68,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.unitPreSocialCity"
-          :value="value"
+          :value="obj.unitPreSocialCity"
           label="原社保缴纳省市"
           placeholder="请选择"
           @click="showSocialCity = true"
@@ -83,8 +79,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.unitRelationUnit"
-          :value="value"
+          :value="obj.unitRelationUnit"
           label="与原单位关系"
           placeholder="请选择"
           @click="showRelationUnit = true"
@@ -93,8 +88,7 @@
         <van-field
           readonly
           clickable
-          v-model="obj.unitPreEmploymentStatus"
-          :value="value"
+          :value="obj.unitPreEmploymentStatus"
           label="前期就业状态"
           placeholder="请选择"
           @click="showEmploymentStatus = true"

src/views/Archives.vue

 <template>
   <div class="main">
+    <div class="top">
+      如档案有问题请联系HR小白
+      <i>18821992017</i>
+    </div>
+    <div class="header">
+      <div class="header_name">哈撒剋</div>
+      <div class="header_info">女|1888-01-01</div>
+    </div>
     <work-info />
-    <person-info />
+    <person-info :isEdit="isEdit" />
     <contact-info />
     <social-info />
     <wage-card-info />
@@ -17,7 +25,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Button} from "vant";
+import { Button } from "vant";
 import { Component } from "vue-property-decorator";
 import workInfo from "@/components/archives/workInfo.vue";
 import personInfo from "@/components/archives/personInfo.vue";
@@ -44,13 +52,43 @@ import archiveQuestion from "@/components/archives/archiveQuestion.vue";
     [Button.name]: Button
   }
 })
-export default class archives extends Vue {}
+export default class archives extends Vue {
+  private isEdit:any="123"
+}
 </script>
 
 <style lang="less" scoped>
 .main {
   background: #f5f7fa;
-  .saveBtn{
+  .top {
+    font-size: 15px;
+    color: rgba(149, 152, 158, 1);
+    line-height: 15px;
+    padding: 20px 20px 10px;
+    i {
+      color: #077aec;
+    }
+  }
+  .header {
+    margin-top: 10px;
+    background: white;
+    padding: 24px 20px;
+    .header_name {
+      height: 24px;
+      font-size: 24px;
+      font-weight: 500;
+      color: rgba(61, 64, 71, 1);
+      line-height: 24px;
+    }
+    .header_info {
+      height: 14px;
+      font-size: 14px;
+      color: rgba(149, 152, 158, 1);
+      line-height: 14px;
+      margin-top: 16px;
+    }
+  }
+  .saveBtn {
     margin-top: 10px;
     color: white !important;
     font-size: 18px;