7/30 限制前端输入字数

This commit is contained in:
Zy
2026-07-30 17:59:32 +08:00
parent 903c92fef0
commit 2907f9202c
115 changed files with 2561 additions and 1213 deletions

View File

@@ -14,7 +14,7 @@
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="业主姓名" prop="rentalName">
<el-input :disabled="HasName" v-model="form.rentalName" placeholder="请输入业主姓名" />
<el-input maxlength="20" v-model.trim="form.rentalName" placeholder="请输入业主姓名" />
</el-form-item>
</el-col>
</el-row>
@@ -22,24 +22,24 @@
<el-row>
<el-col :span="11">
<el-form-item label="租赁状态" prop="rentalStatus">
<el-select v-model.number="form.rentalStatus" placeholder="请选择">
<el-select v-model="form.rentalStatus" placeholder="请选择">
<el-option v-for="(item, index) in com_rental_status" :key="index" :label="item.label" :value="Number(item.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="房屋用途" prop="houseUse">
<el-select v-model.number="form.houseUse" placeholder="请选择">
<el-option v-for="(item, index) in com_house_use" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- <el-form-item label="房屋用途" prop="houseUse">-->
<!-- <el-select v-model.trim="form.houseUse" placeholder="请选择">-->
<!-- <el-option v-for="(item, index) in houseUseTypeList" :key="index" :label="item.name" :value="item.id" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="租金" prop="rent">
<el-input v-model="form.rent" placeholder="请输入租金">
<el-input maxlength="8" v-model.number.trim="form.rent" placeholder="请输入租金">
<template #suffix></template>
</el-input>
</el-form-item>
@@ -57,7 +57,7 @@
<el-row>
<el-col :span="11">
<el-form-item label="房屋朝向" prop="type">
<el-select v-model.number="form.houseFace" placeholder="请选择">
<el-select v-model="form.houseFace" placeholder="请选择">
<el-option v-for="(item, index) in houseFormat" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
@@ -65,7 +65,7 @@
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="房屋面积" prop="houseArea">
<el-input v-model.number="form.houseArea" placeholder="请输入房屋面积">
<el-input maxlength="8" v-model.trim="form.houseArea" placeholder="请输入房屋面积">
<template #suffix> </template>
</el-input>
</el-form-item>
@@ -74,7 +74,7 @@
<el-row>
<el-col :span="11">
<el-form-item label="房屋楼层" prop="floorNo">
<el-input-number v-model.number="form.floorNo" placeholder="请输入" />
<el-input-number :max="1000" v-model.number.trim="form.floorNo" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
@@ -125,6 +125,8 @@
:multiple="true"
:auto-upload="false"
list-type="picture-card"
:limit="9"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
@@ -143,27 +145,27 @@
</el-row>
<el-form-item label="补充房屋信息" prop="remark">
<el-input type="textarea" :rows="5" v-model.number="form.supInfo" placeholder="请输入补充房屋信息" />
<el-input type="textarea" maxlength="200" show-word-limit :rows="5" v-model.trim="form.supInfo" placeholder="请输入补充房屋信息" />
</el-form-item>
<el-row>
<el-col :span="11">
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号码" />
<el-input v-model.number.trim="form.phone" placeholder="请输入手机号码" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="微信" prop="vx">
<el-input v-model.number="form.vx" placeholder="请输入微信号码" />
<el-input maxlength="11" v-model.trim="form.vx" placeholder="请输入微信号码" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="邮箱" prop="email">
<el-input v-model.number="form.email" placeholder="请输入邮箱" />
</el-form-item>
<!-- <el-form-item label="邮箱" prop="email">-->
<!-- <el-input v-model.trim="form.email" placeholder="请输入邮箱" />-->
<!-- </el-form-item>-->
</el-col>
</el-row>
<el-form-item style="margin-top: 30px">
@@ -187,6 +189,7 @@ import { validator } from '@/utils/Reg';
import { useHouseStore } from '@/store/modules/house';
import { listHouseFacilities } from '@/api/system/HouseFacilities';
import { Plus } from '@element-plus/icons-vue';
import { listHouseUseType_add_house } from '@/api/system/houseUse';
const houseStore = useHouseStore();
@@ -194,13 +197,14 @@ const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/houseRental/uploadImages
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_rental_method } = toRefs<any>(proxy?.useDict('com_rental_method'));
const { com_rental_status } = toRefs<any>(proxy?.useDict('com_rental_status'));
const { com_house_use } = toRefs<any>(proxy?.useDict('com_house_use'));
// const { com_house_use } = toRefs<any>(proxy?.useDict('com_house_use'));&╬╬╥
const router = useRouter();
const route = useRoute();
const formRef = ref();
const houseFormat = ['东', '西', '南', '北'];
// 房屋朝向
const houseFormat = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
const form = ref({
id: null,
houseId: null,
@@ -209,15 +213,15 @@ const form = ref({
houseFace: '', // 房屋朝向
rentalType: '0', // 整租合租
phone: null, //手机号
houseArea: null, // 房屋面积
floorNo: null, //楼层号
houseArea: 0, // 房屋面积
floorNo: 1, //楼层号
inTime: '', //入住时间
facilities: '', //房屋设施
houseImageUrl: '', //房屋图片
supInfo: '', //补充租房信息
vx: '', //微信
houseUse: '0', //房屋用途
rentalStatus: 0, //租赁状态
houseUse: '', //房屋用途
rentalStatus: 1, //租赁状态
buildingId: null, //楼栋id
unitNoId: null, //单元id
email: '' //邮箱
@@ -233,6 +237,59 @@ const rules = ref({
message: '请输入正确的手机号码',
trigger: 'blur'
}
],
email: [
{ required: false, message: '请输入邮箱', trigger: 'blur' },
{
validator: (_: any, val: string | number) => {
if (val === '') {
return true;
}
return validator(val, 'email');
},
message: '请输入正确的邮箱',
trigger: 'blur'
}
],
rent: [
{
required: false,
message: '请输入正确的租金',
trigger: 'blur'
},
{
validator: (_: any, val: string | number, callback: (arg0?: Error) => void) => {
if (val === '' || val === null) {
return callback();
}
if (validator(val, 'money')) {
return callback();
}
return callback(new Error('请输入正确的租金'));
}
}
],
houseArea: [
{
required: false,
message: '请输入房屋面积',
trigger: 'blur'
},
{
validator: (_: any, value: string | number, callback: (arg0?: Error) => void) => {
if (value === '' || value === null || value === 0) {
return callback(new Error('请输入房屋面积'));
}
const val = Number(value);
if (Number.isNaN(val)) {
return callback(new Error('请输入数字'));
}
if (val < 0) {
return callback(new Error('房屋面积不能小于0'));
}
return callback();
}
}
]
});
// ! 编辑租赁-=================================================================================
@@ -265,7 +322,14 @@ async function getTreeData() {
}
getTreeData();
const HasName = ref(false);
const houseUseTypeList = ref([]);
function getHouseUseType() {
listHouseUseType_add_house().then((res) => {
houseUseTypeList.value = res.data;
});
}
getHouseUseType();
// 获取房屋
function handleChange(val: CascaderValue) {
userHousePath.value = val;
@@ -273,11 +337,10 @@ function handleChange(val: CascaderValue) {
form.value.rentalName = '';
if (val[2]) {
getHouseOwnUser(val[2]).then((res) => {
if (res.msg) {
form.value.rentalName = res.msg;
HasName.value = true;
if (res.msg.trim()) {
form.value.rentalName = res.msg.trim();
} else {
HasName.value = false;
form.value.rentalName = '';
}
});
}
@@ -304,6 +367,9 @@ const handleChangeFile = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
}
fileList.value = uploadFiles;
};
const handleExceed = () => {
ElMessage.warning('最多上传9张图片');
};
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!;
dialogVisible.value = true;

View File

@@ -6,13 +6,13 @@
<el-card>
<div class="h-full flex flex-align-center">
<el-form label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="房屋用途" prop="houseUse">
<el-select v-model="queryParams.houseUse" placeholder="选择房屋用途" style="width: 240px">
<el-option v-for="item in com_house_use" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item label="房屋类型" prop="houseUse">
<el-select v-model="queryParams.houseUse" placeholder="选择房屋类型" style="width: 240px">
<el-option v-for="item in houseUseTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="发布人" prop="rentalName">
<el-input v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
<el-input maxlength="15" v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">搜索</el-button>
@@ -51,9 +51,10 @@
<el-table-column label="发布人" align="center" prop="rentalName" />
<el-table-column label="联系方式" align="center" prop="phone" />
<el-table-column label="发布时间" align="center" prop="pubTime" />
<el-table-column label="房屋用途" align="center" prop="houseUse">
<el-table-column label="房屋类型" align="center" prop="houseUse">
<template #default="{ row }">
<DictTag :options="com_house_use" :value="row.houseUse"></DictTag>
<!-- <DictTag :options="com_house_use" :value="row.houseUse"></DictTag>-->
<span>{{ handleHouseUse(row.houseUse) }}</span>
</template>
</el-table-column>
<el-table-column label="租赁方式" align="center" prop="rentalType">
@@ -80,6 +81,7 @@ import Pageheader from '@/components/Pageheader/index.vue';
import { listHouseRental, delHouseRental } from '@/api/system/houseRental/index';
import { HouseRentalVO, HouseRentalQuery, HouseRentalForm } from '@/api/system/houseRental/type';
import { checkPermi } from '@/utils/permission';
import { listHouseUseType_add_house } from '@/api/system/houseUse';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_house_use } = toRefs<any>(proxy?.useDict('com_house_use'));
@@ -229,8 +231,19 @@ const handleDelete = async (row?: HouseRentalVO) => {
await getList();
};
const houseUseTypeList = ref([]);
function getHouseUseType() {
listHouseUseType_add_house().then((res) => {
houseUseTypeList.value = res.data;
});
}
function handleHouseUse(houseUser: string) {
const item = houseUseTypeList.value.find((item) => item.id === houseUser);
return item?.name || '';
}
onMounted(() => {
getList();
getHouseUseType();
});
</script>