人员样式修改，添加字段

src/components/UserDetail/index.vue

@@ -7,12 +7,14 @@
       size="small"
       :rules="rules"
       ref="formData"
+      label-position="top"
+      class="personnelInformation"
     >
-      <div class="info-title" style="padding-top: 0">人员信息</div>
+      <div class="info-title">人员信息</div>
       <el-row>
         <el-col :span="8">
           <el-form-item label="姓名" prop="name">
-            <el-input v-model="formData.name" :disabled="isDisabled"></el-input>
+            <el-input style="width: 100%" v-model="formData.name" :disabled="isDisabled"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -22,7 +24,7 @@
               clearable
               v-model="formData.identity"
               :maxlength="18"
-              style="width: 200px"
+              style="width: 100%"
               @change="identityChange"
             ></el-input>
           </el-form-item>
@@ -31,7 +33,7 @@
           <el-form-item label="性别" prop="sex">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.sex"
               placeholder="请选择"
               popper-class="select-prop"
@@ -49,7 +51,7 @@
           <el-form-item label="出生日期">
             <el-date-picker
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.birthday"
               type="date"
               value-format="yyyy-MM-dd"
@@ -63,7 +65,7 @@
           <el-form-item label="民族" prop="nations">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.nations"
               placeholder="请选择民族"
               popper-class="select-prop"
@@ -81,8 +83,9 @@
           <el-form-item label="户籍" prop="koseki">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.koseki"
+              placeholder="请输入户籍地址"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -90,7 +93,7 @@
           <el-form-item label="婚姻状况" prop="maritalStatus">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.maritalStatus"
               placeholder="请选择"
               popper-class="select-prop"
@@ -106,7 +109,7 @@
           <el-form-item label="政治面貌" prop="politicsStatus">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.politicsStatus"
               placeholder="请选择"
               popper-class="select-prop"
@@ -121,7 +124,7 @@
           <el-form-item label="健康状况" prop="health">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.health"
               placeholder="请选择"
               popper-class="select-prop"
@@ -134,10 +137,27 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="居住地址" prop="address">
+            <!-- <el-select
+              
+              v-model="formDataDetail.address"
+              placeholder="省市区"
+            ></el-select> -->
+            <el-cascader  v-model="formDataDetail.liveAddressString"
+              :disabled="isDisabled"
+              style="width: 100%"
+              :options="regionalTree"
+              :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'areaCname', value: 'areaCode', children: 'child'}"
+              placeholder="省市区">
+            </el-cascader>
+          </el-form-item>
+        </el-col>
+        <el-col class="col16" :span="16">
+          <el-form-item style="width: 100%" prop="address" label="详细地址">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              width="100%"
               v-model="formDataDetail.address"
+              placeholder="请输入详细地址"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -145,16 +165,17 @@
           <el-form-item label="邮政编码" prop="postalCode">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.postalCode"
+              placeholder="请输入居住地邮政编码"
             ></el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <!-- <el-col :span="8">
           <el-form-item label="血型" prop="bloodType">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.bloodType"
               placeholder="请选择"
               popper-class="select-prop"
@@ -165,12 +186,12 @@
               <el-option label="AB型" :value="'AB型'"></el-option>
             </el-select>
           </el-form-item>
-        </el-col>
+        </el-col> -->
         <el-col :span="8">
           <el-form-item label="学历" prop="education">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.education"
               placeholder="请选择"
               popper-class="select-prop"
@@ -189,8 +210,9 @@
           <el-form-item label="毕业院校" prop="school">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.school"
+              placeholder="请输入本人毕业院校"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -198,7 +220,7 @@
           <el-form-item label="毕业时间" prop="graduationTime">
             <el-date-picker
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.graduationTime"
               type="date"
               placeholder="选择日期"
@@ -211,20 +233,36 @@
           <el-form-item label="原工作单位" prop="formerEmployer">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.formerEmployer"
+              placeholder="请输入原工作单位"
             ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="密码" prop="password">
             <el-input
+             :disabled="isDisabled"
+              v-if="showPassWord"
+              style="width: 100%"
               v-model="formData.password"
+              type="text"
+            >
+            <i v-show="formData.password" slot="suffix" @click="switchPassword">
+              <img class="Vector" src="@/assets/image/people/Vector.png" alt="">
+            </i>
+            </el-input>
+            <el-input
+              v-else
               :disabled="isDisabled"
-              style="width: 200px"
-              type="password"
-              show-password
-            ></el-input>
+              style="width: 100%"
+              v-model="formData.password"
+              type="password" show-password
+            >
+            <i v-show="formData.password && !isDisabled" slot="suffix" @click="switchPassword">
+              <img class="Frame" src="@/assets/image/people/Frame.png" alt="">
+            </i>
+            </el-input>
             <!-- :class="isShow == true ? 'disc' : 'none'" -->
           </el-form-item>
         </el-col>
@@ -232,8 +270,9 @@
           <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.emergencyContactName"
+              placeholder="请输入紧急联系人姓名"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -241,22 +280,32 @@
           <el-form-item label="紧急联系人电话" prop="emergencyContactTel">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.emergencyContactTel"
+              placeholder="请输入紧急联系人手机号"
             ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8" v-show="isSpeciality">
           <el-form-item label="是否计算机专业" prop="isSpeciality">
-            <el-radio v-model="formDataDetail.isSpeciality" :label="1"
+            <!-- <el-radio v-model="formDataDetail.isSpeciality" :label="1"
               >是</el-radio
             >
             <el-radio v-model="formDataDetail.isSpeciality" :label="0"
               >否</el-radio
+            > -->
+            <el-select
+              :disabled="isDisabled"
+              style="width: 100%"
+              placeholder="请选择"
+              v-model="formDataDetail.isSpeciality"
             >
+              <el-option label="是" :value="1"></el-option>
+              <el-option label="否" :value="2"></el-option>
+            </el-select>
             <!-- <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.isSpeciality"
             ></el-input> -->
           </el-form-item>
@@ -268,19 +317,20 @@
           <el-form-item label="邮箱">
             <el-input
                :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.email"
             ></el-input>
           </el-form-item>
         </el-col> -->
       </el-row>
+      <div class="divider"></div>
       <div class="info-title">工资信息</div>
       <el-row>
         <el-col :span="8">
           <el-form-item label="工资">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.salary"
             ></el-input>
           </el-form-item>
@@ -289,8 +339,9 @@
           <el-form-item label="工资等级">
             <el-input
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.salaryLevel"
+              placeholder="请输入工资等级"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -299,7 +350,7 @@
           <el-form-item label="绩效方案">
             <el-select
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.performance"
               placeholder="请选择"
               popper-class="select-prop"
@@ -309,13 +360,14 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <div class="divider"></div>
       <div class="info-title">银行信息</div>
       <el-row>
         <el-col :span="8">
           <el-form-item label="开户账号" prop="accountno">
             <el-input
               disabled
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.accountno"
               placeholder="登录系统绑卡后显示"
             ></el-input>
@@ -325,7 +377,7 @@
           <el-form-item label="开户行" prop="bankName">
             <el-input
               disabled
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.bankName"
               placeholder="登录系统绑卡后显示"
             ></el-input>
@@ -337,7 +389,7 @@
         <el-col :span="8">
           <el-form-item label="推荐人" prop="referrerId">
             <el-select
-              style="width: 200px"
+              style="width: 100%"
               clearable
               v-model="formData.referrerId"
               placeholder="请选择"
@@ -359,13 +411,14 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <div class="divider"></div>
       <div class="info-title">状态</div>
       <el-row>
         <el-col :span="8">
           <el-form-item label="状态" prop="status">
             <el-select
               disabled
-              style="width: 200px"
+              style="width: 100%"
               v-model="formData.status"
               placeholder="请选择"
             >
@@ -382,7 +435,7 @@
           <el-form-item label="入司时间" prop="entryTime">
             <el-date-picker
               :disabled="isDisabled"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formDataDetail.entryTime"
               type="date"
               placeholder="选择日期"
@@ -396,7 +449,7 @@
             <el-date-picker
               :disabled="isDisabled"
               value-format="yyyy-MM-dd"
-              style="width: 200px"
+              style="width: 100%"
               v-model="formData.logoutTime"
               type="date"
               placeholder="选择日期"
@@ -405,16 +458,53 @@
             </el-date-picker>
           </el-form-item>
         </el-col>
+        <el-col :span="8" v-show="showThirdParty">
+          <el-form-item label="微信绑定" prop="weChart">
+            <el-input v-model="formDataDetail.weChat" :disabled="isDisabled" style="width: 100%" placeholder="请输入微信绑定号" width="200"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" v-show="showThirdParty">
+          <el-form-item label="支付宝绑定">
+            <el-input v-model="formDataDetail.alipay" :disabled="isDisabled" style="width: 100%" placeholder="请输入支付宝绑定号" width="200"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" v-show="showThirdParty">
+          <el-form-item label="是否实名认证">
+            <el-select
+              v-model="formDataDetail.realName"
+              :disabled="isDisabled"
+              style="width: 100%"
+              placeholder="请选择"
+            >
+              <el-option label="是" :value="true"></el-option>
+              <el-option label="否" :value="false"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" v-show="showThirdParty">
+          <el-form-item label="银行卡是否认证">
+            <el-select
+              v-model="formDataDetail.bankAuthentication"
+              :disabled="isDisabled"
+              style="width: 100%"
+              placeholder="请选择"
+            >
+              <el-option label="是" :value="true"></el-option>
+              <el-option label="否" :value="false"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
         <!--  v-show="isDisabled" -->
       </el-row>
+      <div class="divider"></div>
       <div class="info-title">其他</div>
-      <el-col :span="24">
-        <el-form-item label="备注">
+      <el-col class="col24" :span="24">
+        <el-form-item style="width: 100%" label="备注">
           <el-input
             :disabled="isDisabled"
             v-model="formData.approvalOpinion"
             type="textarea"
-            style="width: 800px"
+            style="width: 100%"
             :autosize="{ minRows: 4, maxRows: 6 }"
             placeholder="请输入内容"
           ></el-input>
@@ -459,6 +549,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showThirdParty: {
+      type: Boolean,
+      default: false
+    }
   },
   mixins: [mixin],
   data() {
@@ -473,6 +567,8 @@ export default {
         ],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
       },
+      showPassWord: false,
+      regionalTree: []
     };
   },
   created() {
@@ -482,6 +578,7 @@ export default {
         this.recommenderOptions = res.data || [];
       });
     this.getDictItems("user_status");
+    this.selectTree();
   },
   methods: {
     submit() {
@@ -536,6 +633,27 @@ export default {
         this.$forceUpdate()
       }
     },
+    selectTree(){
+      this.$api.dept.queryTree().then((response) =>{
+        this.regionalTree = this.recursion(response.data);
+      }).catch((error) =>{
+      })
+    },
+    recursion(data){
+      if(data.length){
+        data.forEach(item => {
+          if(item.child.length){
+            this.recursion(item.child);
+          }else{
+            delete item.child
+          }
+        });
+        return data;
+      }
+    },
+    switchPassword(){
+      this.showPassWord = !this.showPassWord;
+    }
   },
 };
 </script>
@@ -544,21 +662,21 @@ export default {
 .select-prop {
   .el-select-dropdown__item.selected,
   .el-date-table td.available:hover {
-    color: #2d4d89;
+    color: #D42426;
   }
   .el-date-table td.current:not(.disabled) span {
-    background-color: #2d4d89;
+    background-color: #D42426;
   }
 }
 </style>
 
 <style lang="scss" scoped>
 >>> .el-radio__input.is-checked .el-radio__inner {
-  background-color: #2d4d89 !important;
-  border-color: #2d4d89 !important;
+  background-color: #D42426 !important;
+  border-color: #D42426 !important;
 }
 >>> .el-radio__input.is-checked + .el-radio__label {
-  color: #2d4d89 !important;
+  color: #D42426 !important;
 }
 >>> .radio-four {
   .el-radio {
@@ -571,17 +689,90 @@ export default {
 }
 >>> .el-input__inner:focus,
 >>> .el-select .el-input.is-focus .el-input__inner {
-  border-color: #2d4d89;
+  border-color: #D42426;
+}
+.el-col{
+  width: calc(33.3333% - 20px);
+  margin-right: 20px;
+}
+.col16{
+  width: calc(66.6666% - 20px);
+}
+.col24{
+  width: calc(100% - 20px);
+}
+.divider{
+  height: 10px;
+  background: #f7f7f7;
 }
 .info-title {
+  position: relative;
   color: #262626;
   font-size: 18px;
-  padding: 16px 0;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  font-weight: 600;
   font-family: PingFang SC, PingFang SC;
+  box-sizing: border-box;
+}
+.info-title::before{
+  content: "";
+  background: #D42426;
+  width: 4px;
+  height: 18px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
 }
 
 .el-form {
   overflow-y: scroll;
   max-height: 600px;
+  padding-top: 0px !important; 
+}
+.personnelInformation{
+  padding: 0 !important;
+  margin: 0 0 0 20px !important;
+  max-height: 470px;
+  .el-form-item{
+    width: 100%;
+    margin-bottom: 20px;
+    >>>.el-form-item__label{
+      font-size: 14px;
+      line-height: 16px;
+      color: #262626;
+      padding-bottom: 10px;
+    }
+  }
+}
+/deep/ .el-input__suffix-inner{
+  position: relative;
+  .Frame{
+      position: absolute;
+      margin-top: 1px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .Vector{
+      position: absolute;
+      margin-top: 1px;
+      top: 16px;
+      right: 5px;
+      transform: translateY(-50%);
+    }
+  .el-icon-view:before{
+    content: '';
+    display: block;
+  }
+}
+.el-select-dropdown__item.hover{
+  background: #FEF8F8;
 }
 </style>