fix: 文件上传添加文件大小限制、项目删除进行二次确认

src/components/mobile/uploader.vue

@@ -1,9 +1,10 @@
 <template>
-    <van-uploader v-model="fileList" :after-read="afterRead" v-bind="props.componentProps" />
+    <van-uploader v-model="fileList" :after-read="afterRead" @oversize="oversize" v-bind="props.componentProps" />
 </template>
 <script setup>
 import { fileApi } from '/src/api/support/file-api';
 import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
+import { showFailToast, showToast } from 'vant';
 const fileList = defineModel('fileList')
 const props = defineProps({
     componentProps: Object,
@@ -40,5 +41,31 @@ async function afterRead(options) {
     });
     emit('change', fileList.value);
 }
+function oversize(options) {
+    console.log(options);
+    if (options) {
+        showToast({
+            type:'fail',
+            message:options.file.name + `文件不得大于${FileSize(props.componentProps.maxSize)},请压缩图片重新上传`,
+            duration:4000,
+            className:'custom-toast'
+        })
+    }
+}
+function FileSize(byte) {
+    if (byte < 1024) {
+        return byte + 'B'
+    } else if (byte / 1024 < 1024) {
+        return byte / 1024 + 'KB'
+    } else if (byte / 1024 / 1024 < 1024) {
+        return byte / 1024 / 1024 + 'MB'
+    } else if (byte / 1024 / 1024 / 1024 < 1024) {
+        return byte / 1024 / 1024 / 1024 + 'GB'
+    }
+}
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.custom-toast{
+    width: 50%;
+}
+</style>

src/views/personnel-entry/mobile/components/three-step.vue

@@ -8,23 +8,27 @@
             <van-field label="身份证" name="uploader" :rules="[{ validator: validateIdCard }]" required>
                 <template #input>
                     <div class="uploader">
-                        <uploader v-model:fileList="formDataThreeStep.idCardFront" :componentProps="{ maxCount: 1 }" />
+                        <uploader v-model:fileList="formDataThreeStep.idCardFront"
+                            :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                         人像面
                     </div>
                     <div class="uploader">
-                        <uploader v-model:fileList="formDataThreeStep.idCardBack" :componentProps="{ maxCount: 1 }" />
+                        <uploader v-model:fileList="formDataThreeStep.idCardBack"
+                            :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                         国徽面
                     </div>
                 </template>
             </van-field>
             <van-field label="无犯罪记录证明" name="uploader" :rules="[{ required: true, message: '请上传无犯罪记录证明图片' }]" required>
                 <template #input>
-                    <uploader v-model:fileList="formDataThreeStep.noCriminalRecord" :componentProps="{ maxCount: 1 }" />
+                    <uploader v-model:fileList="formDataThreeStep.noCriminalRecord"
+                        :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                 </template>
             </van-field>
             <van-field label="解聘证书" name="uploader">
                 <template #input>
-                    <uploader v-model:fileList="formDataThreeStep.dismissingCert" :componentProps="{ maxCount: 1 }" />
+                    <uploader v-model:fileList="formDataThreeStep.dismissingCert"
+                        :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                 </template>
             </van-field>
         </van-cell-group>
@@ -36,17 +40,20 @@
             </div>
             <van-field label="毕业证书" name="uploader" :rules="[{ required: true, message: '请上传毕业证书图片' }]" required>
                 <template #input>
-                    <uploader v-model:fileList="formDataThreeStep.graduationCert" :componentProps="{ maxCount: 1 }" />
+                    <uploader v-model:fileList="formDataThreeStep.graduationCert"
+                        :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                 </template>
             </van-field>
             <van-field label="学位证书" name="uploader" :rules="[{ required: true, message: '请上传学位证书图片' }]" required>
                 <template #input>
-                    <uploader v-model:fileList="formDataThreeStep.degreeCert" :componentProps="{ maxCount: 1 }" />
+                    <uploader v-model:fileList="formDataThreeStep.degreeCert"
+                        :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                 </template>
             </van-field>
             <van-field label="其他证书" name="uploader">
                 <template #input>
-                    <uploader v-model:fileList="formDataThreeStep.otherCert" :componentProps="{ maxCount: 1 }" />
+                    <uploader v-model:fileList="formDataThreeStep.otherCert"
+                        :componentProps="{ maxCount: 1, maxSize: 1024 * 1024 * 20 }" />
                 </template>
             </van-field>
         </van-cell-group>
@@ -60,9 +67,9 @@ const formDataThreeStep = defineModel('formDataThreeStep')
 const threeStepFormRef = ref(null)
 
 function validateIdCard(value, rule) {
-        if (formDataThreeStep.value.idCardFront &&formDataThreeStep.value.idCardBack&& formDataThreeStep.value.idCardFront.length > 0&& formDataThreeStep.value.idCardBack.length > 0) return 
-        if (isEmpty(formDataThreeStep.value.idCardFront) || (formDataThreeStep.value.idCardFront && formDataThreeStep.value.idCardFront.length) === 0) return '身份证人像面不能为空'
-        if (isEmpty(formDataThreeStep.value.idCardBack) || (formDataThreeStep.value.idCardBack && formDataThreeStep.value.idCardBack.length) === 0) return '身份证国徽面不能为空'
+    if (formDataThreeStep.value.idCardFront && formDataThreeStep.value.idCardBack && formDataThreeStep.value.idCardFront.length > 0 && formDataThreeStep.value.idCardBack.length > 0) return
+    if (isEmpty(formDataThreeStep.value.idCardFront) || (formDataThreeStep.value.idCardFront && formDataThreeStep.value.idCardFront.length) === 0) return '身份证人像面不能为空'
+    if (isEmpty(formDataThreeStep.value.idCardBack) || (formDataThreeStep.value.idCardBack && formDataThreeStep.value.idCardBack.length) === 0) return '身份证国徽面不能为空'
 }
 async function validate() {
     await threeStepFormRef.value.validate()

src/views/personnel-entry/mobile/components/two-step.vue

@@ -10,7 +10,8 @@
                 placeholder="请围绕管理或技术维度填写，字数不少于120字"
                 :rules="[{ required: true, message: '请输入个人专长' }, { validator: (val) => val.length >= 120, message: '内容长度不能少于120个字符' }]"
                 required />
-            <van-field label="负责项目情况" class="addBox" name="chargeProjectDTOList" label-width="7em" required>
+            <van-field label="负责项目情况" class="addBox" name="chargeProjectDTOList"
+                :rules="[{ validator: validateProject }]" label-width="7em" required>
                 <template #input>
                     <van-button type="primary" size="small" @click="add">新增</van-button>
                 </template>
@@ -25,11 +26,9 @@
                     :rules="[{ required: true, message: '请选择项目开始和结束时间' }]" @click="showCalendar = true" />
                 <van-popup v-model:show="showCalendar" position="bottom">
                     <van-picker-group title="项目周期" :tabs="['开始日期', '结束日期']" next-step-text="下一步"
-                        @confirm="(date) => onConfirm(date, index)" @cancel="showCalendar =false">
+                        @confirm="(date) => onConfirm(date, index)" @cancel="showCalendar = false">
+                        <van-date-picker :min-date="new Date(1994, 0, 1)" :max-date="new Date()" />
                         <van-date-picker :min-date="new Date(1994, 0, 1)" :max-date="new Date()" />
-                        <van-date-picker
-                            :min-date="new Date(1994, 0, 1)"
-                            :max-date="new Date()" />
                     </van-picker-group>
                 </van-popup>
                 <van-field v-model="formDataTwoStep.chargeProjectDTOList[index].projectAppointment" label="项目任职"
@@ -40,9 +39,8 @@
     </van-form>
 </template>
 <script setup>
-import dayjs from "dayjs"
-import { showFailToast } from "vant"
-import { ref, reactive } from "vue"
+import {  showConfirmDialog, showFailToast } from "vant"
+import { ref } from "vue"
 const twoStepFormRef = ref(null)
 const formDataTwoStep = defineModel('formDataTwoStep')
 const showCalendar = ref(false)
@@ -60,7 +58,14 @@ function add() {
 }
 
 function remove(index) {
-    formDataTwoStep.value.chargeProjectDTOList.splice(index, 1)
+    showConfirmDialog({
+        title: '提示',
+        message: '是否确定删除该项目情况',
+    }).then(() => {
+        formDataTwoStep.value.chargeProjectDTOList.splice(index, 1)
+    }).catch(() => {
+        // on cancel
+    });
 }
 
 function onConfirm(date, index) {
@@ -82,6 +87,10 @@ function onConfirm(date, index) {
 async function validate() {
     await twoStepFormRef.value.validate()
 }
+function validateProject(value, rule){
+    console.log(value, rule);
+    if (formDataTwoStep.value.chargeProjectDTOList&&formDataTwoStep.value.chargeProjectDTOList.length===0) return '请添加负责项目情况'
+}
 defineExpose({ validate })
 </script>
 <style lang="scss" scoped>