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

8/1 限制前端输入字数

Browse Source
This commit is contained in:
Zy
2026-08-01 10:11:38 +08:00
parent 2907f9202c
commit ca5f214bac
33 changed files with 271 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/system/Decoration/addDecoration.vue
View File

@@ -7,7 +7,7 @@
<div class="title">基本信息</div>
</template>
<div class="addBuildingFormBody">
<div class="formbox">
<div class="formBox">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
@@ -37,14 +37,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="装修押金(元)" prop="decorationDeposit">
<el-input
type="number"
min="0"
step="0.01"
maxlength="8"
placeholder="请输入装修押金，最多保留2位小数"
v-model.trim.number="form.decorationDeposit"
/>
<el-input maxlength="8" placeholder="请输入装修押金，最多保留2位小数" v-model.number.trim="form.decorationDeposit" />
</el-form-item>
</el-col>
</el-row>
@@ -64,6 +57,7 @@ import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addDecoration, getDecoration, updateDecoration } from '@/api/system/Decoration';
import { useHouseStore } from '@/store/modules/house';
import { validator } from '@/utils/Reg';
const houseStore = useHouseStore();
const treedata = ref([]);
@@ -77,39 +71,12 @@ const form = ref({
'buildingId': null,
'unitNoId': null,
'applyName': '',
'inspectionResult': '0',
'decorationCompany': '',
'decorationContent': '',
'decorationDeposit': null
});
/**
* 通用金额校验器
* @param value 输入值
* @param type money金额 / num整数
* @returns 校验提示信息，空则校验通过
*/
const validator = (value: number | null, type: 'money' | 'num') => {
// 空值由 required 规则拦截，这里只处理有值的情况
if (value === null || value === undefined) return '';
// 转字符串处理小数位数
const strVal = String(value);
// 禁止负数
if (value < 0) return '金额不能为负数';
if (type === 'money') {
// 匹配最多两位小数
const reg = /^\d+(\.\d{1,2})?$/;
if (!reg.test(strVal)) return '金额仅支持最多两位小数';
// 限制金额上限（可按需修改）
if (value > 9999999.99) return '押金金额不能超过9999999.99元';
} else if (type === 'num') {
const reg = /^\d+$/;
if (!reg.test(strVal)) return '只能输入正整数';
}
return '';
};
const rules = {
houseId: [{ required: true, message: '请选择具体房屋', trigger: 'blur' }],
applyName: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
@@ -120,9 +87,18 @@ const rules = {
if (val === '' || val === null) {
return callback(new Error('请输入装修押金'));
}
const msg = validator(val, 'money');
if (msg) callback(new Error(msg));
else callback();
const num = Number(val);
console.log(val);
if (Number.isNaN(num)) {
return callback(new Error('请输入装修押金'));
}
if (num < 0) {
return callback(new Error('装修押金不能为负数'));
}
if (num > 99999999) {
return callback(new Error('装修押金过大'));
}
return validator(val, 'money');
},
trigger: ['blur', 'change']
}
@@ -184,9 +160,7 @@ const submitForm = () => {
// 返回
function handleBack() {
router.push({
path: '/repair/decoration'
});
router.back();
}
</script>
@@ -198,7 +172,7 @@ function handleBack() {
margin-top: 20px;
flex: 1;
.formbox {
.formBox {
width: 1000px;
margin: 0 auto;
}

99
src/views/system/Decoration/index.vue
View File

@@ -9,7 +9,7 @@
<el-input maxlength="20" v-model="queryParams.applyName" placeholder="请输入申请人姓名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="装修验收结果" prop="inspectionResult">
<el-select v-model="queryParams.inspectionResult" placeholder="请选择装修验收结果" style="width: 240px">
<el-select clearable @clear="handleClear" v-model="queryParams.inspectionResult" placeholder="请选择装修验收结果" style="width: 240px">
<el-option v-for="item in com_decoration_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@@ -59,11 +59,16 @@
link
type="primary"
v-if="scope.row.inspectionResult !== '1'"
@click="handleInspection(scope.row, 0, '验收')"
@click="handleInspection(scope.row, EditType.Add, '验收')"
v-has-permi="['repair:edit:decoration']"
>验收</el-button
>
<el-button link type="primary" v-else @click="handleInspection(scope.row, 1, '详情')" v-has-permi="['decoration:decoration:query']"
<el-button
link
type="primary"
v-else
@click="handleInspection(scope.row, EditType.Detail, '详情')"
v-has-permi="['decoration:decoration:query']"
>详情</el-button
>
<el-button link type="primary" @click="handleUpdate(scope.row)" v-has-permi="['decoration:decoration:edit']">编辑</el-button>
@@ -77,42 +82,47 @@
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="decorationFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="小区名称" prop="villageName" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.villageName" />
</el-form-item>
<el-form-item label="房屋号" prop="houseName" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.houseName" />
</el-form-item>
<el-form-item label="申请人" prop="applyName" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.applyName" />
</el-form-item>
<el-form-item label="装修公司" prop="decorationCompany" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.decorationCompany" />
</el-form-item>
<el-form-item label="装修内容" prop="decorationContent" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.decorationContent" />
</el-form-item>
<el-form-item label="装修押金" prop="decorationDeposit" v-if="isedit === 1">
<el-input :disabled="isedit === 1" v-model="form.decorationDeposit" />
</el-form-item>
<el-form-item label="验收结果" prop="inspectionResult">
<el-select :disabled="isedit === 1" v-model="form.inspectionResult" placeholder="请选择装修验收结果">
<el-option
v-for="item in com_decoration_status.filter((item) => item.value !== '0')"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div v-if="isEditComputed">
<el-form-item label="小区名称" prop="villageName">
<el-input :disabled="isEditComputed" v-model="form.villageName" />
</el-form-item>
<el-form-item label="房屋号" prop="houseName">
<el-input :disabled="isEditComputed" v-model="form.houseName" />
</el-form-item>
<el-form-item label="申请人" prop="applyName">
<el-input :disabled="isEditComputed" v-model="form.applyName" />
</el-form-item>
<el-form-item label="装修公司" prop="decorationCompany">
<el-input :disabled="isEditComputed" v-model="form.decorationCompany" />
</el-form-item>
<el-form-item label="装修内容" prop="decorationContent">
<el-input :disabled="isEditComputed" v-model="form.decorationContent" />
</el-form-item>
<el-form-item label="装修押金" prop="decorationDeposit">
<el-input :disabled="isEditComputed" v-model="form.decorationDeposit" />
</el-form-item>
</div>
<el-form-item label="验收结果" :prop="isEditComputed ? '' : 'inspectionResult'">
<el-select :disabled="isEditComputed" v-model="form.inspectionResult" placeholder="请选择装修验收结果">
<el-option v-for="item in com_decoration_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="验收人" prop="inspectionName">
<el-input :disabled="isedit === 1" v-model="form.inspectionName" />
<el-form-item label="验收人" :prop="isEditComputed ? '' : 'inspectionName'">
<el-input :disabled="isEditComputed" v-model="form.inspectionName" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input :disabled="isedit === 1" v-model="form.remark" type="textarea" placeholder="请输入" :rows="5"></el-input>
<el-input
:disabled="isEditComputed"
v-model="form.remark"
type="textarea"
maxlength="200"
show-word-limit
:placeholder="isEditComputed ? '' : '请输入'"
:rows="5"
></el-input>
</el-form-item>
</el-form>
<template #footer v-if="isedit !== 1">
<template #footer v-if="!isEditComputed">
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@@ -123,7 +133,7 @@
</template>
<script setup name="Decoration" lang="ts">
import { listDecoration, delDecoration, updateDecoration } from '@/api/system/Decoration/index';
import { listDecoration, delDecoration, updateDecoration } from '@/api/system/Decoration';
import { DecorationVO, DecorationQuery, DecorationForm } from '@/api/system/Decoration/type';
import { checkPermi } from '@/utils/permission';
@@ -208,6 +218,11 @@ const handleQuery = () => {
getList();
};
/** 清空按钮操作 */
const handleClear = () => {
queryParams.value.inspectionResult = undefined;
handleQuery();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
@@ -230,7 +245,7 @@ const handleAdd = () => {
};
/** 修改按钮操作 */
const handleUpdate = async (row?: DecorationVO) => {
const handleUpdate = (row?: DecorationVO) => {
const _id = row?.id || ids.value[0];
router.push({
path: '/repair/editDecoration',
@@ -240,16 +255,24 @@ const handleUpdate = async (row?: DecorationVO) => {
});
};
const isedit = ref(1);
enum EditType {
/** 验收 */
Add = 1,
/** 详情 */
Detail = 2
}
const isEdit = ref(EditType.Add);
const isEditComputed = computed(() => isEdit.value !== EditType.Add);
/** 验收 */
const handleInspection = (row: DecorationVO, edit: number, type: string) => {
const handleInspection = (row: DecorationVO, edit: EditType, type: string) => {
form.value = {
...form.value,
...row
};
dialog.visible = true;
dialog.title = type;
isedit.value = edit;
isEdit.value = edit;
};
/** 提交按钮 */