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

7/30 限制前端输入字数

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

219
src/views/community/AddCommunity.vue
View File

@@ -10,16 +10,16 @@
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
<el-form-item label="小区名称" prop="villageName">
<el-input v-model.trim="form.villageName" placeholder="请输入小区名称" />
<el-input maxlength="25" v-model.trim="form.villageName" placeholder="请输入小区名称" />
</el-form-item>
<el-form-item label="小区编号" prop="villageCode">
<el-input v-model.trim="form.villageCode" placeholder="请输入小区编号" />
<el-input maxlength="20" v-model.trim="form.villageCode" placeholder="请输入小区编号" />
</el-form-item>
<el-form-item label="所在城市" prop="city">
<el-cascader :options="pcaTextArrlist" v-model="city" @change="cityChange"> </el-cascader>
<el-cascader :options="pcaTextArrList" v-model="city" @change="cityChange"> </el-cascader>
</el-form-item>
<el-form-item label="完整详细地址" prop="buildingArea">
<el-input v-model.trim="form.address" placeholder="请输入完整详细地址" />
<el-input type="textarea" :row="3" maxlength="100" show-word-limit v-model.trim="form.address" placeholder="请输入完整详细地址" />
</el-form-item>
<el-form-item label="建成时间" prop="buildingArea">
<el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" value-format="YYYY-MM-DD" @change="changeBuiltTime" />
@@ -30,19 +30,10 @@
</el-select>
</el-form-item>
<el-form-item label="小区面积" prop="villageArea">
<el-input v-model.trim.number="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
<el-input maxlength="8" v-model.trim="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
</el-form-item>
<!-- <el-form-item label="小区楼栋" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
</el-form-item>
<el-form-item label="小区房屋" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区房屋"><template #append>间</template> </el-input>
</el-form-item>
<el-form-item label="小区面积" prop="buildingArea">
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
</el-form-item> -->
<el-form-item label="车位数量" prop="parkingSpaceCount">
<el-input v-model.trim.number="form.parkingSpaceCount" placeholder="请输入车位数量">
<el-input maxlength="8" v-model.trim="form.parkingSpaceCount" placeholder="请输入车位数量">
<template #append>个</template>
</el-input>
</el-form-item>
@@ -50,11 +41,13 @@
<el-upload
accept=".jpg, .png"
ref="uploadRef"
:action="uploadfileurl"
:action="uploadFileUrl"
:headers="headerToken()"
list-type="picture-card"
:file-list="villageImg"
:auto-upload="false"
:limit="9"
:on-exceed="handleExceed"
@change="handleUploadChange"
@before-upload="handleBeforeUpload"
>
@@ -70,12 +63,12 @@
</div>
</template>
<template #tip>
<div class="el-upload__tip">支持jpg, png等格式文件上传，文件大小不超过10MB，可上传多张</div>
<div class="el-upload__tip">支持jpg, png等格式文件上传，文件大小不超过10MB</div>
</template>
</el-upload>
</el-form-item>
<el-form-item style="width: 100%" label="小区简介">
<el-input v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
<el-input maxlength="200" show-word-limit v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
</el-form-item>
</div>
</div>
@@ -83,19 +76,19 @@
<div class="title">负责人信息</div>
<div class="addBuildingFormBody addBuildingForm_User_Body">
<el-form-item label="姓名">
<el-input v-model.trim="form.manageName" placeholder="请输入姓名" />
<el-input maxlength="20" v-model.trim="form.manageName" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="电话">
<el-form-item label="电话" prop="managePhone">
<el-input v-model.trim="form.managePhone" placeholder="请输入电话" />
</el-form-item>
<el-form-item label="微信">
<el-input v-model.trim="form.manageVx" placeholder="请输入微信"> </el-input>
<el-form-item label="微信" prop="manageVx">
<el-input maxlength="20" v-model.trim="form.manageVx" placeholder="请输入微信"></el-input>
</el-form-item>
<el-form-item label="QQ">
<el-input v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
<el-form-item label="QQ" prop="manageQq">
<el-input maxlength="20" v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model.trim="form.manageEmail" placeholder="请输入邮箱"> </el-input>
<el-form-item label="邮箱" prop="manageEmail">
<el-input maxlength="30" v-model.trim="form.manageEmail" placeholder="请输入邮箱"> </el-input>
</el-form-item>
<div class="pl-100px">
<el-button type="primary" @click="submitForm">提交</el-button>
@@ -122,12 +115,11 @@ import { Delete, Plus } from '@element-plus/icons-vue';
const route = useRoute();
const router = useRouter();
const editId = ref(route.query.id as string);
const isedit = computed(() => Boolean(editId.value));
const apipriex = import.meta.env.VITE_APP_BASE_API;
const uploadfileurl = `${apipriex}/village/uploadImages`;
// 获取省 市 区
const pcaTextArrlist = ref<DataItem[]>(pcaTextArr);
const isEdit = computed(() => Boolean(editId.value));
const apiPrefix = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = `${apiPrefix}/village/uploadImages`;
// 获取省 市 区╬╬╬╬╬╬╬
const pcaTextArrList = ref<DataItem[]>(pcaTextArr);
// 获取小区用途
const houseUserList = ref([
{
@@ -156,9 +148,9 @@ const form = ref<communitylist_rows_type>({
villageCode: '',
address: '',
houseUse: null,
villageArea: 0,
villageArea: '',
remark: '',
parkingSpaceCount: 0,
parkingSpaceCount: '',
villageImageUrl: '',
city: '',
status: '0',
@@ -177,12 +169,131 @@ const villageImg = ref([]);
// 表单验证
const rules = ref({
villageName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
villageCode: [{ required: true, message: '请输入小区编号', trigger: 'blur' }],
city: [{ required: true, message: '请选择城市', trigger: 'blur' }]
villageArea: [
{ required: false, message: '请输入小区面积', trigger: 'blur' },
{
validator: (rule, value, callback) => {
const num = Number(value);
if (value === '' || value === null) {
return callback();
}
if (Number.isNaN(num)) {
return callback(new Error('请输入正确的小区面积'));
}
if (num < 0) {
return callback(new Error('小区面积不能小于0'));
}
callback();
}
}
],
parkingSpaceCount: [
{ required: false, message: '请输入车位数量', trigger: 'blur' },
{
validator: (rule, value, callback) => {
const num = Number(value);
if (value === '' || value === null) {
return callback();
}
if (Number.isNaN(num)) {
return callback(new Error('请输入正确的车位数量'));
}
if (num < 0) {
return callback(new Error('车位数量不能小于0'));
}
if (num % 1 !== 0) {
return callback(new Error('请输入正确的整数车位数量'));
}
callback();
}
}
],
villageCode: [
{ required: true, message: '请输入小区编号', trigger: 'blur' },
{
validator: (_, value, callback) => {
if (value === '' || value === null) {
return callback(new Error('请输入小区编号'));
}
if (!/^[a-zA-Z0-9_-]{1,20}$/.test(value)) {
callback(new Error('请输入正确的小区编号,只能包含字母、数字、_和-'));
} else {
callback();
}
}
}
],
city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
managePhone: [
{ required: false, message: '请输入电话', trigger: 'blur' },
{
validator: (_, value, callback) => {
// 值为空直接放行（非必填）
if (value === '' || value === null) {
return callback();
}
if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error('请输入正确的手机号'));
} else {
callback();
}
}
}
],
manageEmail: [
{ required: false, message: '请输入邮箱', trigger: 'blur' },
{
validator: (_, value, callback) => {
if (value === '' || value === null) {
return callback();
}
// 邮箱总长度不超过254个字符，用户名不超过64个字符
if (value.length > 254 || value.split('@')[0].length > 64) {
callback(new Error('邮箱地址过长'));
} else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
callback(new Error('请输入正确的邮箱'));
} else {
callback();
}
}
}
],
manageVx: [
{ required: false, message: '请输入微信', trigger: 'blur' },
{
validator: (_, value, callback) => {
// 值为空直接放行（非必填）
if (value === '' || value === null) {
return callback();
}
if (!/^[a-zA-Z0-9_]{4,20}$/.test(value)) {
callback(new Error('请输入正确的微信'));
} else {
callback();
}
}
}
],
manageQq: [
{ required: false, message: '请输入QQ', trigger: 'blur' },
{
validator: (_, value, callback) => {
// 值为空直接放行（非必填）
if (value === '' || value === null) {
return callback();
}
if (!/^[1-9]\d{4,10}$/.test(value)) {
callback(new Error('请输入正确的QQ'));
} else {
callback();
}
}
}
]
});
/** 获取编辑小区的信息 */
function getCommunityinfo() {
function getCommunityInfo() {
const id = editId.value;
getVillageByIdAPI(id).then((res) => {
city.value = res.data.city ? res.data.city.split('/') : [];
@@ -206,9 +317,11 @@ function getCommunityinfo() {
};
});
}
if (isedit.value) {
getCommunityinfo();
if (isEdit.value) {
getCommunityInfo();
}
// 请求头
function headerToken() {
const useStore = useUserStore();
@@ -216,9 +329,11 @@ function headerToken() {
Authorization: 'Bearer ' + useStore.token
};
}
const allowImgSuffix = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'heic'];
/** 检测文件大小和格式 */
function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadFile; type: string }> {
const type = file.raw.type.split('/').pop();
return new Promise((resolve, reject) => {
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
@@ -226,11 +341,13 @@ function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadF
type: '文件大小错误',
file: file
});
} else if (!allowImgSuffix.includes(file.raw.type)) {
ElMessage.warning('图片大小超过10M,请重新上传');
} else if (!allowImgSuffix.includes(type)) {
reject({
type: '文件类型错误',
file: file
});
ElMessage.warning('图片格式不是 png/jpg/jpeg 格式, 请重新上传');
} else {
resolve(true);
}
@@ -238,15 +355,18 @@ function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadF
}
/** 上传狗子 */
async function handleUploadChange(file: UploadFile) {
const isupload = await handleBeforeUpload(file);
if (typeof isupload === 'object') {
ElMessage.error(isupload.type);
const isUpload = await handleBeforeUpload(file);
if (typeof isUpload === 'object') {
ElMessage.error(isUpload.type);
return;
} else if (typeof isupload === 'boolean' && isupload === true) {
} else if (typeof isUpload === 'boolean' && isUpload === true) {
villageImg.value.push(file.raw);
}
}
function handleExceed() {
ElMessage.error('最多上传9张图片');
}
/** 移除钩子 */
const handleRemove = (file: UploadFile) => {
villageImg.value = villageImg.value.filter((item) => item.uid !== file.uid);
@@ -256,6 +376,7 @@ const handleRemove = (file: UploadFile) => {
const changeBuiltTime = (value: string) => {
form.value.completDate = value;
};
const cityChange = (value: CascaderValue[]) => {
form.value.city = value.join('/');
};
@@ -299,7 +420,7 @@ const submitForm = () => {
// 3) 有新文件：先上传新文件，再与已有URL合并
const formdata = new FormData();
newFiles.forEach((file) => formdata.append('files', file));
console.log('newFiles', newFiles);
uploadVillageImageAPI(formdata).then((res) => {
const uploadedUrls = res.data.success.map((x) => x.url).filter(Boolean);
// 4) 最终图片 = 已有图片 + 新上传图片（避免覆盖）
@@ -336,18 +457,19 @@ function submitFormInfo() {
}
}
if (isedit.value) {
editVillageAPI<communitylist_rows_type>(form.value).then((res) => {
if (isEdit.value) {
editVillageAPI<communitylist_rows_type>(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addVillageAPI<communitylist_rows_type>(form.value).then((res) => {
addVillageAPI<communitylist_rows_type>(form.value).then(() => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
// 返回
const cancelForm = () => {
router.back();
};
@@ -368,7 +490,6 @@ const cancelForm = () => {
& > span {
padding-left: 20px;
font-size: 20px;
color: white;
color: #000;
}
}