人员离司上传图片删除

src/views/PeopleManage/Agent/AgentManage.vue

@@ -375,9 +375,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -396,18 +397,32 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     <personnelHistory ref="personnelHistory" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -430,7 +445,8 @@ export default {
     templateTable,
     peopleImage,
     userDetail,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -638,7 +654,9 @@ export default {
       option: [], //机构列表
       dialogPassword: true, //密码是否显示明文
       user_statusoptions: [],
-      pdeptId: null
+      pdeptId: null,
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1126,7 +1144,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1428,4 +1462,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/Player/PlayerManage.vue

@@ -392,9 +392,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -413,18 +414,32 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     <personnelHistory ref="personnelHistory" :isBusiness="true" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -445,7 +460,8 @@ export default {
     tree,
     templateTable,
     peopleImage,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -652,7 +668,9 @@ export default {
       imagesIdList: [],
       formDataDetail: {},
       showPassWord: false,
-      pdeptId: null
+      pdeptId: null,
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1047,7 +1065,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1374,4 +1408,126 @@ export default {
   }
 }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/Player/PlayerManageteam.vue

@@ -345,9 +345,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -355,6 +356,7 @@
               v-model="logoutTime"
               type="date"
               placeholder="选择日期"
+              size="small"
             ></el-date-picker>
           </el-form-item>
           <el-form-item label="离职表:" style="width: 50%">
@@ -366,18 +368,32 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     <personnelHistory ref="personnelHistory" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -400,7 +416,8 @@ export default {
     templateTable,
     peopleImage,
     userDetail,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -602,7 +619,9 @@ export default {
         birthday: "",
       },
       formDataRulesDetail: {},
-      pdeptId: null
+      pdeptId: null,
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1057,7 +1076,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1360,4 +1395,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/Sales/SalesManage.vue

@@ -475,9 +475,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form  class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -496,18 +497,32 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
-              <img v-if="logoutImg" :src="logoutImg" class="avatar"/>
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     <personnelHistory ref="personnelHistory" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -531,7 +546,8 @@ export default {
     KtCommonTable,
     userDetail,
     peopleImage,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -675,6 +691,8 @@ export default {
           click:(row)=>this.checkHistory(row)
         }
       ],
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1195,7 +1213,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1479,4 +1513,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/Sales/SalesManageGroup.vue

@@ -475,9 +475,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -496,18 +497,32 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
-              <img v-if="logoutImg" :src="logoutImg" class="avatar"/>
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     <personnelHistory ref="personnelHistory" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -531,7 +546,8 @@ export default {
     KtCommonTable,
     userDetail,
     peopleImage,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -675,6 +691,8 @@ export default {
           click:(row)=>this.checkHistory(row)
         }
       ],
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1195,7 +1213,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1479,4 +1513,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/Staff/StaffManage.vue

@@ -439,9 +439,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -449,6 +450,7 @@
               v-model="logoutTime"
               type="date"
               placeholder="选择日期"
+              size="small"
             ></el-date-picker>
           </el-form-item>
           <el-form-item label="离职表:" style="width: 50%">
@@ -460,20 +462,33 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
     
     <personnelHistory ref="personnelHistory" ></personnelHistory>
-    
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -496,7 +511,8 @@ export default {
     KtCommonTable,
     peopleImage,
     userDetail,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -650,6 +666,8 @@ export default {
           click:(row)=>this.checkHistory(row)
         }
       ],
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1141,7 +1159,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1416,4 +1450,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/PeopleManage/TeamLeader/TeamLeaderManage.vue

@@ -439,9 +439,10 @@
       width="40%"
       :visible.sync="showOut"
       @close="closeDialogOut"
+      class="dialogOut people-style"
     >
       <div>
-        <el-form>
+        <el-form class="personnelInformation">
           <el-form-item label="离职时间" prop="logoutTime">
             <el-date-picker
               value-format="yyyy-MM-dd"
@@ -460,19 +461,33 @@
               :http-request="httpRequest"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- <img v-if="logoutImg" :src="logoutImg" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
               <img v-if="logoutImg" :src="logoutImg" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <div v-else class="upload-icon">
+                <img src="@/assets/image/people/camera.svg" alt="">
+                <div class="el-upload__text">上传资料</div>
+              </div>
+              <span class="slot" v-show="logoutImg">
+                <i class="preview" @click.stop="handlePictureCardPreview(logoutImg)"></i>
+                <img class="close"  src="@/assets/image/people/close.png" alt="" @click.stop="handlePictureCardDelete('LZ_01')">
+                <div  class="bottomHandle">
+                  <img class="reset" src="@/assets/image/people/reset.png" alt="">
+                  <span class="title">点击重新上传</span>
+                </div>
+              </span>
             </el-upload>
           </el-form-item>
         </el-form>
       </div>
-      <span slot="footer">
+      <div class="footerHandle" style="text-align: right">
         <el-button type="primary" @click="handleSubOut">确定</el-button>
         <el-button @click="closeDialogOut">取消</el-button>
-      </span>
+      </div>
     </el-dialog>
 
     <personnelHistory ref="personnelHistory" ></personnelHistory>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :z-index="9999" :url-list="[ProViewImg]" />
   </div>
 </template>
 
@@ -495,7 +510,8 @@ export default {
     KtCommonTable,
     userDetail,
     peopleImage,
-    personnelHistory
+    personnelHistory,
+    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer")
   },
   mixins: [mixin],
   data() {
@@ -637,6 +653,8 @@ export default {
           click:(row)=>this.checkHistory(row)
         }
       ],
+      showViewer: false,
+      ProViewImg: null
     };
   },
   created() {
@@ -1140,7 +1158,23 @@ export default {
     async checkHistory(row){
       let userId = row.userId;
       this.$refs.personnelHistory.getHistory(userId);
-    }
+    },
+    handlePictureCardDelete(){
+      this.logoutImg = null;
+    },
+    //预览图片
+    handlePictureCardPreview(img) {
+      if(!img){
+        this.$message.error('暂无照片')
+        return 
+      }
+      this.ProViewImg = img;
+      this.showViewer = true;
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
   },
 };
 </script>
@@ -1412,4 +1446,126 @@ export default {
     }
   }
 }
+.dialogOut{
+  .el-form{
+    padding-top: 10px !important;
+  }
+  .el-form-item{
+    display: flex;
+    align-items: center;
+    >>>.el-form-item__label{
+      padding-bottom: 0 !important;
+    }
+    >>>.el-date-editor{
+      .el-input__prefix{
+        top: 12px !important;
+      }
+    }
+  }
+  .footerHandle{
+    padding: 8px 20px;
+  }
+  .upload-icon {
+    width: 208px;
+    height: 130px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-upload__text {
+    line-height: 20px;
+    margin-top: 7px;
+    color: #999;
+  }
+  .el-upload--picture-card:hover, .el-upload:focus{
+    color: #333;
+  }
+  .upload-icon:hover {
+    /* border: 1px dashed #2D4D89; */
+    border-color: #D42426;
+    /* color: #D42426; */
+    transition: all ease 1s;
+  }
+  .avatar {
+    border: 1px solid #eee;
+    padding: 0px;
+    border-radius: 6px;
+    width: 207px;
+    height: 130px;
+    display: block;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+  /* 上传图片样式End */
+  .slot {
+    position: absolute;
+    width: 208px;
+    height: 130px;
+    left: 2px;
+    top: 2px;
+    border-radius: 4px;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 1;
+    font-size: 20px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    transition: opacity 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .close{
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    cursor: pointer;
+  }
+  .preview{
+    width: 208px;
+    height: calc(130px - 24px);
+  }
+  .bottomHandle{
+    width: 208px;
+    height: 24px;
+    line-height: 20px;
+    background: url('~@/assets/image/people/bottomFrame.png') no-repeat;
+    position: absolute;
+    bottom: 0;
+    left: -1px;
+    cursor: pointer;
+  }
+  .reset{
+    width: 10px;
+    height: 10px
+  }
+  .bottomHandle>.title{
+    font-size: 12px;
+    color: #fff;
+    padding: 0;
+  }
+  .slot>i {
+    /* margin: 10px; */
+    /* color: #fff; */
+    /* font-size: 25px; */
+    /* font-weight: bold; */
+  }
+
+  .slot:hover {
+    opacity: 1;
+  }
+  .title{
+    font-size: 16px;
+    color: #333;
+    padding-bottom: 10px;
+  }
+}
 </style>