8/6 校验问题

2026-08-06 09:09:53 +08:00
parent 494b7869ea
commit 40196737d3
23 changed files with 242 additions and 106 deletions
--- a/src/views/system/houseRental/addhouseResident.vue
+++ b/src/views/system/houseRental/addhouseResident.vue
@@ -367,14 +367,20 @@ const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  }
 };

-const blockedExts = ['.exe', '.bat', '.cmd', '.msi'];
+const blockedExits = ['.exe', '.bat', '.cmd', '.msi'];
+const allowExits = ['.bmp", ".gif", ".jpg", ".jpeg", ".png'];
 const handleChangeFile = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  const ext = uploadFile.name.toLowerCase().slice(uploadFile.name.lastIndexOf('.'));
-  if (blockedExts.includes(ext)) {
+  if (blockedExits.includes(ext)) {
    ElMessage.warning(`禁止上传 ${ext} 文件`);
    uploadRef.value.handleRemove(uploadFile);
    return;
  }
+  if (!allowExits.includes(ext)) {
+    ElMessage.warning(`只允许上传jpg,jpeg,png等`);
+    uploadRef.value.handleRemove(uploadFile);
+    return;
+  }
  fileList.value = uploadFiles;
 };
 const handleExceed = () => {
--- a/src/views/system/houseRental/index.vue
+++ b/src/views/system/houseRental/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="h-full p-2 flex flex-col">
-    <Pageheader title="房屋租赁"></Pageheader>
+    <pageHeader></pageHeader>
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card>
@@ -90,11 +90,8 @@
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="680px" append-to-body>
      <el-form ref="houseRentalFormRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="合同编号" prop="contractNo">
-          <el-input maxlength="20" show-word-limit v-model.trim="form.contractNo" placeholder="请输入合同编号" />
-        </el-form-item>
        <el-form-item label="区域" prop="villageId">
          <el-input disabled maxlength="20" v-model.trim="form.villageName" placeholder="请输入区域" />
        </el-form-item>
@@ -116,6 +113,9 @@
        <el-form-item label="收费标准" prop="chargeStandard">
          <el-input v-model.trim="form.chargeStandard" placeholder="请输入收费标准" />
        </el-form-item>
+        <el-form-item label="合同编号" prop="contractNo">
+          <el-input maxlength="20" show-word-limit v-model.trim="form.contractNo" placeholder="请输入合同编号" />
+        </el-form-item>
        <el-form-item label="合同状态" prop="contractStatus">
          <el-input v-model.trim="form.contractStatus" placeholder="请输入合同状态" />
        </el-form-item>
@@ -139,6 +139,28 @@
            placeholder="请选择租赁终止日"
          />
        </el-form-item>
+        <el-form-item label="合同附件">
+          <el-upload
+            accept=".png,.jpg,.jpeg, .pdf"
+            class="upload-demo"
+            ref="uploadRef"
+            :show-file-list="true"
+            v-model:file-list="showImgList"
+            name="files"
+            :onChange="handleChange"
+            :onExceed="handleExceed"
+            :multiple="true"
+            :auto-upload="false"
+            drag
+            :action="uploadApi"
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text"><em>点击</em>或者将文件<em>拖拽</em>到这里上传</div>
+            <template #tip>
+              <div class="el-upload__tip">支持 .png, .jpg, .pdf</div>
+            </template>
+          </el-upload>
+        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -151,17 +173,20 @@
 </template>

 <script setup name="HouseRental" lang="ts">
-import Pageheader from '@/components/Pageheader/index.vue';
-import { listHouseRental, delHouseRental, changeHouseRedientStatus, HouseRedientSign } from '@/api/system/houseRental/index';
-import { HouseRentalVO, HouseRentalQuery, HouseRentalForm } from '@/api/system/houseRental/type';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { changeHouseRedientStatus, delHouseRental, HouseRedientSign, HouseRedientSignUpload, listHouseRental } from '@/api/system/houseRental';
+import { HouseRentalForm, HouseRentalQuery, HouseRentalVO } from '@/api/system/houseRental/type';
 import { checkPermi } from '@/utils/permission';
 import { listHouseUseType_add_house } from '@/api/system/houseUse';
 import { validator } from '@/utils/Reg';
+import { UploadFilled } from '@element-plus/icons-vue';
+import { ElMessage, UploadUserFile } from 'element-plus';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_rental_status } = toRefs<any>(proxy?.useDict('com_rental_status'));
 const { com_rental_method } = toRefs<any>(proxy?.useDict('com_rental_method'));

+const uploadApi = '/houseRental/uploadImages';
 const router = useRouter();
 const houseRentalList = ref<HouseRentalVO[]>([]);
 const buttonLoading = ref(false);
@@ -185,6 +210,7 @@ type HouseRentalFormType = HouseRentalForm & {
  villageName?: string;
  houseName?: string;
  houseArea?: number;
+  contractUrl?: string;
 };

 const initFormData: HouseRentalFormType = {
@@ -199,6 +225,7 @@ const initFormData: HouseRentalFormType = {
  'leaseEndDate': undefined,
  'houseId': undefined,
  'villageId': undefined,
+  'contractUrl': undefined,
  'remark': undefined
 };

@@ -235,9 +262,8 @@ const data = reactive<PageData<HouseRentalFormType, HouseRentalQuery>>({
    ],
    tenantPhone: [
      { required: true, message: '请输入承租方联系电话', trigger: 'blur' },
-      { min: 11, max: 11, message: '承租方联系电话长度必须为 11 个字符', trigger: 'blur' },
      {
-        validator: (rule: any, value: string, callback: any) => {
+        validator: (_: any, value: string, callback: any) => {
          if (!validator(value, 'phone')) {
            callback(new Error('承租方联系电话格式错误'));
          } else {
@@ -260,7 +286,7 @@ const data = reactive<PageData<HouseRentalFormType, HouseRentalQuery>>({

 const { queryParams, form, rules } = toRefs(data);

-/** 查询房屋租赁管理列表 */
+/** 查询房屋租赁管理列表╬₧2╬╬ */
 const getList = async () => {
  loading.value = true;
  listHouseRental(queryParams.value)
@@ -355,6 +381,7 @@ function handleHouseUse(houseUser: string) {

 // 签约
 function sign(row: HouseRentalVO) {
+  clearForm();
  form.value = {
    ...row.signingList?.[0]
  };
@@ -362,9 +389,22 @@ function sign(row: HouseRentalVO) {
  form.value.villageName = info.villageName;
  form.value.houseName = row.name;
  form.value.houseArea = row.houseArea;
+  form.value.tenantPhone = row.phone;
  form.value.houseId = row.houseId;
  form.value.villageId = info.villageId;
  form.value.rentalId = row.id;
+  if (row.signingList && row.signingList.length > 0) {
+    showImgList.value = row.signingList[0].contractUrl.split(',').map((item, index) => {
+      return {
+        uid: index,
+        name: item.split('.com/')[1].split('/')[3],
+        url: item,
+        isLink: true
+      };
+    });
+  } else {
+    showImgList.value = [];
+  }
  dialog.visible = true;
  dialog.title = '签约';
 }
@@ -375,17 +415,62 @@ function putOnSale(row: HouseRentalVO) {
    getList();
  });
 }
+const uploadRef = ref();
+const MAX_UPLOAD_FILES = 9;
+const showImgList = ref([]);
+// 超出总数量拦截，不再只限制单次选择
+const handleExceed = () => {
+  ElMessage.warning(`最多只能上传 ${MAX_UPLOAD_FILES} 张轮播图`);
+};
+const handleChange = (file: UploadUserFile) => {
+  // 实时判断当前已存在图片总数
+  if (showImgList.value.length >= MAX_UPLOAD_FILES) {
+    ElMessage.warning(`最多上传${MAX_UPLOAD_FILES}张，无法继续添加`);
+    // 清除刚选中的文件，防止缓存残留
+    uploadRef.value?.handleRemove(file);
+    return;
+  }
+};
+// 批量上传校验图片数量，前后端数量匹配校验
+const uploadAllCarousel = async () => {
+  const filterArr = showImgList.value.filter((item) => {
+    return !item.isLink && item.raw;
+  });
+  const oldArr = showImgList.value.filter((item) => item.isLink && !item.raw);
+  if (filterArr.length > 0) {
+    const formData = new FormData();
+    filterArr.forEach((fileItem) => {
+      formData.append('files', fileItem.raw!);
+    });
+    const res = await HouseRedientSignUpload(uploadApi, formData);
+    // 校验后端返回图片数量和本地选中数量一致
+    if (res.code !== 200 || !res.data?.success?.length) {
+      ElMessage.warning(res.msg || '文件上传失败');
+      throw new Error('上传失败');
+    }
+    return [...res.data.success.map((item: any) => item.url), ...oldArr.map((item) => item.url)];
+  } else {
+    return [...oldArr.map((item) => item.url)];
+  }
+};
 function submitForm() {
-  houseRentalFormRef.value.validate((valid: boolean) => {
+  houseRentalFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
+      const arr = await uploadAllCarousel();
+      // 拼接最终图片字符串
+      form.value.contractUrl = arr.join(',');
      HouseRedientSign(form.value).then(() => {
        proxy?.$modal.msgSuccess('操作成功');
        getList();
+        dialog.visible = false;
      });
    }
  });
 }

+function clearForm() {
+  form.value = { ...initFormData };
+}
 onMounted(() => {
  getList();
  getHouseUseType();