zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8/6 校验问题

Browse Source
This commit is contained in:
Zy
2026-08-06 09:09:53 +08:00
parent 494b7869ea
commit 40196737d3
23 changed files with 242 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/system/houseRental/index.vue
View File

@@ -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();