Merge remote-tracking branch 'origin/master'

src/api/payment/account/index.ts

@@ -169,6 +169,18 @@ export const closeAccount = (userId: string | number | Array<string | number>) =
     method: 'put'
   });
 };
+
+export const photoBatchUpload = (data) => {
+  return request({
+    url: '/backstage/payment/ptUserAccount/photoBatchUpload',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};
+
 export default {
   listPtUserAccount,
   listPtUserAccount4Select,
@@ -184,5 +196,6 @@ export default {
   resetCardType,
   resetConsumePwd,
   openAccount,
-  closeAccount
+  closeAccount,
+  photoBatchUpload
 };

src/views/payment/account/facePhoto.vue

@@ -57,9 +57,11 @@
                 :before-upload="beforeAvatarUpload"
                 :on-success="handleAvatarSuccess"
                 :headers="headers"
+                accept=".jpg,.jpeg,.png"
+                :limit="1"
               >
-                <el-image v-if="user.photo" :src="baseUrl + '/backstage/upload/' + user.photo" />
-                <el-icon v-else><Plus /></el-icon>
+                <el-image v-if="user.photo" :src="baseUrl + '/backstage/upload/' + user.photo" fit="fill" class="imageClass" />
+                <el-icon v-else class="avatar-uploader-icon-2"><Plus /></el-icon>
               </el-upload>
             </div>
           </div>
@@ -69,21 +71,29 @@
     </el-row>
 
     <!--批量上传照片弹窗-->
-    <el-dialog v-model="dialogVisible" title="批量上传人员照片" width="500">
+    <el-dialog v-model="dialogVisible" title="批量上传人员照片" width="30%" @close="handleClickClose">
       <el-upload
+        ref="upload"
         :headers="headers"
-        :action="`${baseUrl}/backstage/payment/ptUserAccount/photoBatchUpload`"
         :show-file-list="true"
-        :before-upload="beforeAvatarUpload"
-        :on-success="handleAvatarSuccess"
+        :auto-upload="false"
+        accept=".jpg,.png,.jpeg"
         multiple
         :limit="20"
+        :on-change="onChange"
+        :before-remove="beforeRemove"
+        :file-list="fileList"
+        action="#"
+        class="flex w-full h-full items-center justify-center overflow-auto"
       >
-        选择照片
+        <el-icon class="avatar-uploader-icon">
+          <Plus />
+        </el-icon>
       </el-upload>
-      <template #footer>
-        <span style="color: crimson">*照片名称必须是身份证号</span>
-      </template>
+      <div class="flex justify-between mt-5">
+        <div class="mt-3 mb-3 font-20" style="color: crimson">*照片名称必须是身份证号</div>
+        <el-button type="primary" @click="uploadBatch">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -107,10 +117,13 @@ const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
 const deptOptions = ref<DeptVO[]>([]);
+const fileList = ref<UploadFile[]>([]);
 
 const deptTreeRef = ref<ElTreeInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
+const upload = ref();
+
 const expandKeys = ref([]);
 const dialogVisible = ref(false);
 const initFormData: PtUserAccountForm = {
@@ -205,7 +218,7 @@ onMounted(async () => {
   expandKeys.value = [first.id as number];
 });
 
-import type { UploadProps } from 'element-plus';
+import type { UploadFiles, UploadProps } from 'element-plus';
 import { globalHeaders } from '@/utils/request';
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
@@ -222,14 +235,87 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
   return true;
 };
 
+const ACCEPTED_EXTENSIONS = ['png', 'jpg', 'jpeg'];
+
+/**
+ * 请求前判断文件是否符合要求
+ * 如果符合则添加到上传队列
+ */
+function beforeUpload(file) {
+  console.log('beforeUpload', file);
+  const extension = file.name.split('.').pop().toLowerCase();
+  if (!ACCEPTED_EXTENSIONS.includes(extension)) {
+    ElMessage({
+      type: 'error',
+      message: '仅支持 png, jpg 和 jpeg 格式的文件'
+    });
+    return false;
+  }
+  if (file.size / 1024 / 1024 > 2) {
+    ElMessage.error('上传图片大小不能超过 2MB!');
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 文件选择改变时触发
+ */
+function onChange(file, fileListVal) {
+  fileList.value = fileListVal;
+}
+
+function beforeRemove(file: UploadFile, fileListVal: UploadFiles) {
+  fileList.value = fileListVal;
+  return true;
+}
+
+// 清空附件列表
+const clearAttachments = () => {
+  if (upload.value) {
+    upload.value.clearFiles(); // 调用实例方法 `clearFiles` 清空附件列表
+    console.log('已清空附件列表');
+  }
+};
+
+/**点击close触发 */
+const handleClickClose = () => {
+  fileList.value = [];
+  clearAttachments();
+  dialogVisible.value = false;
+};
+const uploadBatch = async () => {
+  if (!fileList.value.length) {
+    ElMessage.error('请先选择文件');
+    return;
+  }
+  for (let i = 0; i < fileList.value.length; i++) {
+    console.log('fileList.value[i]', fileList.value[i]);
+    let rs = beforeUpload(fileList.value[i]);
+    if (!rs) {
+      return;
+    }
+  }
+  const formData = new FormData();
+  console.log('fileList', fileList.value);
+  fileList.value.forEach((file) => {
+    formData.append('file', file.raw);
+  });
+  const res = await api.photoBatchUpload(formData);
+  ElMessage.success(res.msg);
+  dialogVisible.value = false;
+  getList();
+};
+
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  console.log('uploadFile', uploadFile);
   getList();
 };
 </script>
 
 <style lang="scss" scoped>
 .list-image .block {
-  padding: 30px 0;
+  padding: 15px 0;
   text-align: center;
   border-right: solid 1px var(--el-border-color);
   display: inline-block;
@@ -244,28 +330,61 @@ const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) =>
   display: block;
   color: var(--el-text-color-secondary);
   font-size: 14px;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .avatar-uploader {
-  width: 60%;
-  height: 110px;
+  width: 160px;
+  height: 150px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 1px dashed var(--el-border-color);
 }
 
-.avatar-uploader {
-  border: 1px dashed var(--el-border-color);
+.avatar-uploader:hover {
+  border: 1px dashed blue;
+  height: 150px;
+  width: 160px;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
-  overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }
 
+.el-icon.avatar-uploader-icon {
+  border: 1px dashed #8c939d;
+  font-size: 28px;
+  color: #8c939d;
+  width: 110px;
+  height: 110px;
+  text-align: center;
+  transition: var(--el-transition-duration-fast);
+}
+
+.el-icon.avatar-uploader-icon-2 {
+  padding: 2px;
+  font-size: 28px;
+  color: #8c939d;
+  width: 160px;
+  height: 150px;
+  text-align: center;
+}
+.imageClass {
+  padding: 2px;
+  font-size: 28px;
+  color: #8c939d;
+  width: 160px;
+  height: 150px;
+  text-align: center;
+}
+
+.el-icon.avatar-uploader-icon:hover {
+  border-color: blue;
+}
+
 .el-tree > :nth-child(n + 1) {
   display: inline-block !important;
   min-width: 100% !important;