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

5
src/views/system/resident/ResidentMain.vue
View File

@@ -24,7 +24,7 @@
</div>
<div class="userinfo_item">
<div class="title_item">证件类型：</div>
<span> 身份证 </span>
<DictTag :options="com_id_card_type" :value="userInfo.idCardType"></DictTag>
</div>
<div class="userinfo_item">
<div class="title_item">住户类型：</div>
@@ -145,7 +145,7 @@ import { ResidentVO } from '@/api/system/residentReviewProcess/resident/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
const { com_sub_status } = toRefs<any>(proxy?.useDict('com_sub_status'));
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
const { com_resident_relationship, com_id_card_type } = toRefs<any>(proxy?.useDict('com_resident_relationship', 'com_id_card_type'));
const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));
const userInfo = ref<ResidentVO>({
@@ -155,6 +155,7 @@ const userInfo = ref<ResidentVO>({
userId: null,
nickName: '',
unitNoId: '',
idCardType: '0',
'id': null,
'name': '',
'type': '0',

97
src/views/system/resident/addResident.vue
View File

@@ -8,13 +8,13 @@
<el-row>
<el-col :span="11">
<el-form-item label="楼栋房屋" prop="houseId">
<el-cascader v-model="userHousepath" :options="treedata" @change="handleChange" />
<el-cascader v-model="userHousePath" :options="treeData" @change="handleChange" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="住户姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入住户姓名" />
<el-input maxlength="15" show-word-limit v-model.trim="form.name" placeholder="请输入住户姓名" />
</el-form-item>
</el-col>
</el-row>
@@ -28,9 +28,26 @@
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11"> </el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="身份证号码" prop="idCard">
<el-input v-model="form.idCard" placeholder="请输入证件号码" />
<el-form-item label="证件类型" prop="idCardType">
<el-select @change="handleChangeIdCardType" v-model="form.idCardType" placeholder="请选择证件">
<el-option v-for="item in com_id_card_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="身份证号码" prop="idCard" v-if="form.idCardType === '0'">
<el-input maxlength="20" v-model="form.idCard" placeholder="请输入证件号码" />
</el-form-item>
<el-form-item label="护照号码" prop="idCard" v-if="form.idCardType === '1'">
<el-input maxlength="30" v-model="form.idCard" placeholder="请输入证件号码" />
</el-form-item>
<el-form-item label="港澳通行证号码" prop="idCard" v-if="form.idCardType === '2'">
<el-input maxlength="20" v-model="form.idCard" placeholder="请输入证件号码" />
</el-form-item>
</el-col>
</el-row>
@@ -62,7 +79,7 @@
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:on-error="handleError"
:before-upload="handleBeforUpload"
:before-upload="handleBeforeUpload"
:limit="1"
>
<img alt="身份证正面照" v-if="form.cardImageFront" :src="form.cardImageFront" class="avatar" />
@@ -82,7 +99,7 @@
:on-exceed="handleExceed2"
:on-success="handleAvatar2Success"
:on-error="handleError2"
:before-upload="handleBeforUpload"
:before-upload="handleBeforeUpload"
>
<img alt="身份证背面照" v-if="form.cardImageBack" :src="form.cardImageBack" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
@@ -92,7 +109,7 @@
</el-row>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :row="5" v-model.number="form.remark" placeholder="请输入备注" />
<el-input type="textarea" maxlength="200" show-word-limit :row="5" v-model.trim="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">确定</el-button>
@@ -106,9 +123,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getHousePathById } from '@/utils/house';
import { ResidentForm } from '@/api/system/residentReviewProcess/resident/type';
import { CascaderValue, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { CascaderValue, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { genFileId } from 'element-plus';
import { addResident, getResident, updateResident } from '@/api/system/residentReviewProcess/resident';
import { validator } from '@/utils/Reg';
@@ -120,7 +136,7 @@ const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/resident/uploadImage';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
const { com_resident_relationship, com_id_card_type } = toRefs<any>(proxy?.useDict('com_resident_relationship', 'com_id_card_type'));
const router = useRouter();
const route = useRoute();
@@ -134,21 +150,31 @@ const form = ref<ResidentForm>({
ownerRelationship: '0', // 与业主关系
phone: null, //手机号
cardImageFront: '',
idCardType: '0', // 证件类型
cardImageBack: '',
remark: '' //备注
remark: '' //备注╬╬╬.╬╬╬╬╬
});
const userHousepath = ref<CascaderValue>([]);
const userHousePath = ref<CascaderValue>([]);
const rules = ref({
houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
cardImageFront: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
cardImageBack: [{ required: true, message: '请上传身份证照片', trigger: 'blur' }],
idCardType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
idCard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{
validator: (_, value) => validator(value, 'idCard'),
message: '请输入正确的18位身份证号码',
validator: (_: any, value: string | number, callback: (arg0?: Error) => void) => {
if (form.value.idCardType === '0') {
return validator(value, 'idCard') ? callback() : callback(new Error('请输入正确的18位身份证号码'));
} else if (form.value.idCardType === '1') {
return validator(value, 'passport') ? callback() : callback(new Error('请输入正确的护照号码'));
} else if (form.value.idCardType === '2') {
return validator(value, 'hongkongPassport') ? callback() : callback(new Error('请输入正确的港澳通行证号码'));
}
return callback();
},
required: true,
trigger: 'blur'
}
],
@@ -156,24 +182,29 @@ const rules = ref({
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
validator: (_, value) => validator(value, 'phone'),
message: '请输入正确的手机号码',
validator: (_: any, value: string | number, callback: (arg0?: Error) => void) => {
return validator(value, 'phone') ? callback() : callback(new Error('请输入正确的手机号码'));
},
trigger: 'blur'
}
]
});
const treedata = ref([]);
// 切换证件类型
function handleChangeIdCardType() {
form.value.idCard = '';
}
// 总房屋 树状结构
const treeData = ref([]);
function getTree() {
houseStore.getCurrentVilageTreeHouse().then((res) => {
treedata.value = res;
gettreedata();
treeData.value = res;
getTreeData();
});
}
getTree();
// !== 楼栋房屋 =============================================================================
const userid = ref(null);
function gettreedata() {
function getTreeData() {
// !== 编辑用户 =============================================================================
if (route.query.id) {
userid.value = route.query.id;
@@ -181,13 +212,13 @@ function gettreedata() {
form.value = {
...res.data
};
userHousepath.value = [form.value.buildingId, form.value.unitNoId, form.value.houseId];
userHousePath.value = [form.value.buildingId, form.value.unitNoId, form.value.houseId];
});
}
}
function handleChange(val: CascaderValue) {
userHousepath.value = val;
userHousePath.value = val;
form.value.buildingId = val[0];
form.value.houseId = val[2];
}
@@ -196,12 +227,12 @@ function handleChange(val: CascaderValue) {
// 上传文件成功
const upload = ref<UploadInstance>();
const upload2 = ref<UploadInstance>();
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
if (response.data && response.data.url) {
form.value.cardImageFront = response.data.url;
}
};
const handleAvatar2Success: UploadProps['onSuccess'] = (response, uploadFile) => {
const handleAvatar2Success: UploadProps['onSuccess'] = (response) => {
if (response.code === 500 && response.msg == '不允许重复提交，请稍候再试') {
ElMessage.error('上传频率过快,稍后再试');
return;
@@ -224,16 +255,12 @@ const handleExceed2: UploadProps['onExceed'] = (files) => {
upload2.value!.handleStart(file);
upload2.value?.submit();
};
const handleError: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
console.log(error);
};
const handleError2: UploadProps['onError'] = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
console.log(error);
};
const blockedExts = ['.exe', '.bat', '.cmd', '.msi'];
const handleBeforUpload = (uploadFile: UploadRawFile) => {
const handleError: UploadProps['onError'] = () => {};
const handleError2: UploadProps['onError'] = () => {};
const blockedExits = ['.exe', '.bat', '.cmd', '.msi'];
const handleBeforeUpload = (uploadFile: UploadRawFile) => {
const ext = uploadFile.name.toLowerCase().slice(uploadFile.name.lastIndexOf('.'));
if (blockedExts.includes(ext)) {
if (blockedExits.includes(ext)) {
ElMessage.warning(`禁止上传 ${ext} 文件`);
return false;
}