Skip to content

W
web-project
Commit 326b1c15 authored by xuke's avatar xuke
Browse files
Options

表单校验

parent 10e2e52a
Show whitespace changes
Inline Side-by-side
Showing with 483 additions and 334 deletions
src/views/AlarmPage/AlarmStatusPage.vue
View file @ 326b1c15
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="middle"> <div class="middle">
<el-form ref="formRef" :model="addParams" :rules="rules" label-width="auto">
<table cellpadding="0" cellspacing="1" border="1" class="big_table"> <table cellpadding="0" cellspacing="1" border="1" class="big_table">
<tr> <tr>
<th style="width: 25%">报警名称：</th> <th style="width: 25%">报警名称：</th>
...@@ -128,7 +129,9 @@ ...@@ -128,7 +129,9 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="topMost">
<el-input v-float-number style="width: 80%" v-model="addParams.topMost"></el-input> <el-input v-float-number style="width: 80%" v-model="addParams.topMost"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -140,20 +143,38 @@ ...@@ -140,20 +143,38 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="upper">
<el-input v-float-number style="width: 80%" v-model="addParams.upper"></el-input> <el-input v-float-number style="width: 80%" v-model="addParams.upper"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
</td> </td>
</tr> </tr>
<tr>
<th style="width: 25%">报警下限：</th>
<td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-form-item prop="lower">
<el-input v-float-number style="width: 80%" v-model="addParams.lower"></el-input>
</el-form-item>
</td>
</tr>
</table>
</td>
</tr>
<tr> <tr>
<th style="width: 25%">报警下下限：</th> <th style="width: 25%">报警下下限：</th>
<td style="width: 60%; margin: 0; padding: 0"> <td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="downMost">
<el-input v-float-number style="width: 80%" v-model="addParams.downMost"></el-input> <el-input v-float-number style="width: 80%" v-model="addParams.downMost"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -198,6 +219,8 @@ ...@@ -198,6 +219,8 @@
</tr> </tr>
</table> </table>
</el-form>
<div class="btngrounp"> <div class="btngrounp">
<div v-if="button"> <div v-if="button">
<el-button :disabled="param.cnName === '' ? true : false" type="primary" @click="onAdd">添加</el-button> <el-button :disabled="param.cnName === '' ? true : false" type="primary" @click="onAdd">添加</el-button>
...@@ -257,6 +280,7 @@ const refreshItem = ref(0) ...@@ -257,6 +280,7 @@ const refreshItem = ref(0)
const AlarmInfo = ref([]) const AlarmInfo = ref([])
const dept = ref('') const dept = ref('')
function open() { function open() {
show.value = true show.value = true
} }
...@@ -542,6 +566,32 @@ let param = ref({ ...@@ -542,6 +566,32 @@ let param = ref({
"baseId": "" "baseId": ""
}) })
//表单校验规则
const formRef = ref()
const rules = reactive({
topMost: [
{ required: true, message: "上上限值是必填项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "上上限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '上上限值必须是 1-10位的数字', trigger: 'blur' }
],
upper: [
{ required: true, message: "上限值是必填项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "上限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '上限值必须是 1-10位的数字', trigger: 'blur' }
],
lower: [
{ required: true, message: "下限值是必填项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "下限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '下限值必须是 1-10位的数字', trigger: 'blur' }
],
downMost: [
{ required: true, message: "下下限值是必填项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "下下限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '下下限值必须是 1-10位的数字', trigger: 'blur' }
]
});
let newType = ref(0) let newType = ref(0)
watchEffect(() => { watchEffect(() => {
...@@ -815,8 +865,10 @@ onUnmounted(() => { ...@@ -815,8 +865,10 @@ onUnmounted(() => {
} }
.el-form-item { .el-form-item {
margin-top: -20px; // margin-top: -20px;
margin-right: 30px; // margin-right: 30px;
margin: 0;
padding: 0;
} }
.el-tag--mini { .el-tag--mini {
......
src/views/SchedulingPage/ConfigBoilerPage.vue
View file @ 326b1c15
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="contentBlock"> <div class="contentBlock">
<div class="contentBlockInn"> <div class="contentBlockInn">
<el-card class="card-contianer"> <el-card class="card-contianer">
<el-form ref="formRef" :rules="rules" :model="formDatas" label-width="auto">
<table v-loading="loading" cellpadding="0" cellspacing="1" style="background-color: #99bbe8"> <table v-loading="loading" cellpadding="0" cellspacing="1" style="background-color: #99bbe8">
<tr> <tr>
<th style="width: 25%">电调阈开启度</th> <th style="width: 25%">电调阈开启度</th>
...@@ -9,12 +10,17 @@ ...@@ -9,12 +10,17 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="openingOfElectricValve">
<el-input v-float-number style="width: 80%; text-align: left" <el-input v-float-number style="width: 80%; text-align: left"
v-model="formDatas.openingOfElectricValve"> v-model="formDatas.openingOfElectricValve">
<template #append> <template #append>
<div style="width: 40px">%</div> <div style="width: 40px">%</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -40,11 +46,15 @@ ...@@ -40,11 +46,15 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="boilerOutletWaterTemperature">
<el-input v-float-number style="width: 80%" v-model="formDatas.boilerOutletWaterTemperature"> <el-input v-float-number style="width: 80%" v-model="formDatas.boilerOutletWaterTemperature">
<template #append> <template #append>
<div style="width: 40px">℃</div> <div style="width: 40px">℃</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -57,13 +67,13 @@ ...@@ -57,13 +67,13 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form> <el-form-item prop="holdingTime">
<el-input v-float-number style="width: 80%" v-model="formDatas.holdingTime"> <el-input v-float-number style="width: 80%" v-model="formDatas.holdingTime">
<template #append> <template #append>
<div style="width: 40px">分钟</div> <div style="width: 40px">分钟</div>
</template> </template>
</el-input> </el-input>
</el-form> </el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -76,11 +86,15 @@ ...@@ -76,11 +86,15 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="upperLlimitMainFlow">
<el-input v-float-number style="width: 80%" v-model="formDatas.upperLlimitMainFlow"> <el-input v-float-number style="width: 80%" v-model="formDatas.upperLlimitMainFlow">
<template #append> <template #append>
<div style="width: 40px">m3/h</div> <div style="width: 40px">m3/h</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -93,11 +107,15 @@ ...@@ -93,11 +107,15 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="lowerLlimitMainFlow">
<el-input v-float-number style="width: 80%" v-model="formDatas.lowerLlimitMainFlow"> <el-input v-float-number style="width: 80%" v-model="formDatas.lowerLlimitMainFlow">
<template #append> <template #append>
<div style="width: 40px">m3/h</div> <div style="width: 40px">m3/h</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -109,11 +127,15 @@ ...@@ -109,11 +127,15 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="maxTargetTemperature">
<el-input v-float-number style="width: 80%" v-model="formDatas.maxTargetTemperature"> <el-input v-float-number style="width: 80%" v-model="formDatas.maxTargetTemperature">
<template #append> <template #append>
<div style="width: 40px">℃</div> <div style="width: 40px">℃</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -126,11 +148,16 @@ ...@@ -126,11 +148,16 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="bestHoldingTime">
<el-input v-float-number style="width: 80%" v-model="formDatas.bestHoldingTime"> <el-input v-float-number style="width: 80%" v-model="formDatas.bestHoldingTime">
<template #append> <template #append>
<div style="width: 40px">分钟</div> <div style="width: 40px">分钟</div>
</template> </template>
</el-input> </el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -148,6 +175,8 @@ ...@@ -148,6 +175,8 @@
</th> </th>
</tr> </tr>
</table> </table>
</el-form>
</el-card> </el-card>
</div> </div>
</div> </div>
...@@ -164,6 +193,7 @@ const loading = ref(false) ...@@ -164,6 +193,7 @@ const loading = ref(false)
const form = ref({ const form = ref({
types: [], types: [],
}); });
const formRef = ref()
const formDatas = ref([ const formDatas = ref([
{ {
...@@ -179,6 +209,39 @@ const formDatas = ref([ ...@@ -179,6 +209,39 @@ const formDatas = ref([
transferIds: [], transferIds: [],
}, },
]); ]);
//表单校验规则
const rules = reactive({
openingOfElectricValve: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "电动调节阀开度输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '电动调节阀开度必须是 1-10位的数字', trigger: 'blur' }
],
boilerOutletWaterTemperature: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "锅炉出水温度输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '锅炉出水温度必须是 1-10位的数字', trigger: 'blur' }
],
upperLlimitMainFlow: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "锅炉房供水总管流量上限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '锅炉房供水总管流量上限值必须是 1-10位的数字', trigger: 'blur' }
],
lowerLlimitMainFlow: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "锅炉房供水总管流量下限值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '锅炉房供水总管流量下限值必须是 1-10位的数字', trigger: 'blur' }
],
maxTargetTemperature: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "目标温度最大值输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '目标温度最大值必须是 1-10位的数字', trigger: 'blur' }
],
bestHoldingTime: [
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "持续时间输入不合法", trigger: "blur" },
{ min: 1, max: 10, message: '持续时间必须是 1-10位的数字', trigger: 'blur' }
],
holdingTime: [
{ pattern: /^[0-9]\d{1,10}$/, "message": "保持时间必须是 1-10位的数字", trigger: 'blur' }
]
});
const getListData = () => { const getListData = () => {
loading.value = true loading.value = true
http.get("/api/configboiler/getData").then((result) => { http.get("/api/configboiler/getData").then((result) => {
...@@ -229,7 +292,7 @@ function getSupplys() { ...@@ -229,7 +292,7 @@ function getSupplys() {
} }
}); });
} }
console.log("组长遍历的options:", options); // console.log("遍历的options:", options);
} }
onMounted(() => { onMounted(() => {
getListData(); getListData();
......
src/views/SchedulingPage/EnergyManagePage.vue
View file @ 326b1c15
...@@ -110,9 +110,14 @@ const timeFormat = (time) => { ...@@ -110,9 +110,14 @@ const timeFormat = (time) => {
const rules = reactive({ const rules = reactive({
supplyId: [{ required: true, message: "名称是必填项", trigger: "blur" }], supplyId: [{ required: true, message: "名称是必填项", trigger: "blur" }],
energyType: [ energyType: [
{ required: true, message: "能源类型是必填项", trigger: "blur" }, { required: true, message: "能源类型是必填项", trigger: "blur" }
],
record: [
{ required: true, message: "能源用度是必选项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, message: "能源用度必须输入1-10位数字", trigger: "blur" },
{ min: 1, max: 10, message: '能源用度必须是 1-10位的数字', trigger: 'blur' }
], ],
record: [{ required: true, message: "能源用度是必选项", trigger: "blur" }],
recordDate: [{ required: true, message: "日期是必选项" }], recordDate: [{ required: true, message: "日期是必选项" }],
}); });
...@@ -125,7 +130,7 @@ const handleDelete = (row) => { ...@@ -125,7 +130,7 @@ const handleDelete = (row) => {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
confirmButtonClass: 'ExitConfirmButton' confirmButtonClass: 'ExitConfirmButton'
}) }).then(() => {
http.post("api/energy/Delete", { id: row.energyId }, false).then(res => { http.post("api/energy/Delete", { id: row.energyId }, false).then(res => {
if (res.success) { if (res.success) {
ElMessage.success(res.message) ElMessage.success(res.message)
...@@ -134,6 +139,10 @@ const handleDelete = (row) => { ...@@ -134,6 +139,10 @@ const handleDelete = (row) => {
ElMessage.error("删除失败"); ElMessage.error("删除失败");
} }
}) })
}).catch(() => {
ElMessage.success("取消删除操作");
})
}; };
...@@ -317,9 +326,8 @@ onMounted(() => { ...@@ -317,9 +326,8 @@ onMounted(() => {
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="supplyName" style="margin: 0; padding: 0; width: 100%"> <el-form-item prop="supplyName" style="margin: 0; padding: 0; width: 100%;">
<el-select v-model="formEnergy.supplyId" placeholder="" style="width: 210px;" class="custom-select" <el-select v-model="formEnergy.supplyId" placeholder="请选择">
size="small">
<el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName" <el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName"
:value="item.supplyId" /> :value="item.supplyId" />
</el-select> </el-select>
......
src/views/SchedulingPage/InstantHeatPage.vue
View file @ 326b1c15
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<div class="card-header"> <div class="card-header">
<span>瞬时热量对比配置</span> <span>瞬时热量对比配置</span>
</div> </div>
<el-form ref="formRef" :rules="rules" :model="List" label-width="auto">
<table v-loading="loading" cellpadding="0" cellspacing="1"> <table v-loading="loading" cellpadding="0" cellspacing="1">
<tr> <tr>
<th style="width: 25%">计划名称：</th> <th style="width: 25%">计划名称：</th>
...@@ -24,7 +25,9 @@ ...@@ -24,7 +25,9 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
<el-input v-float-number style="width: 80%" v-model="List.diffPercentage"></el-input> <el-input v-float-number style="width: 80%" v-model="List.diffPercentage"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -38,7 +41,9 @@ ...@@ -38,7 +41,9 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
<el-input style="width: 80%" v-model="List.timeoutMin"></el-input> <el-input style="width: 80%" v-model="List.timeoutMin"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -52,7 +57,9 @@ ...@@ -52,7 +57,9 @@
<table cellpadding="0" cellspacing="0"> <table cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="text-align: left"> <td style="text-align: left">
<el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
<el-input v-float-number style="width: 80%" v-model="List.tempRegulation"></el-input> <el-input v-float-number style="width: 80%" v-model="List.tempRegulation"></el-input>
</el-form-item>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -75,6 +82,8 @@ ...@@ -75,6 +82,8 @@
</table> </table>
</el-form>
<div class="btngrounp"> <div class="btngrounp">
<el-button type="primary" @click="onSave">保存</el-button> <el-button type="primary" @click="onSave">保存</el-button>
<el-button type="primary" style="margin: 0 0 0 5px" @click="onCancel">关闭</el-button> <el-button type="primary" style="margin: 0 0 0 5px" @click="onCancel">关闭</el-button>
...@@ -92,7 +101,7 @@ import { ElMessage } from "element-plus"; ...@@ -92,7 +101,7 @@ import { ElMessage } from "element-plus";
import http from "../../api/http"; import http from "../../api/http";
import { vFloatNumber } from "@/utils/directives.js"; import { vFloatNumber } from "@/utils/directives.js";
const loading = ref(false) const loading = ref(false)
const formRef = ref()
const List = ref( const List = ref(
{ {
...@@ -105,7 +114,24 @@ const List = ref( ...@@ -105,7 +114,24 @@ const List = ref(
"isActive": '' "isActive": ''
} }
) )
//校验规则
const rules = reactive({
diffPercentage: [
{ required: true, message: "偏差百分比是必填项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?){1,10}$/, "message": "偏差百分比输入不合法", trigger: 'blur' },
{ min: 1, max: 10, message: '偏差百分比必须是 1-10位的数字', trigger: 'blur' }
],
timeoutMin: [
{ required: true, message: "判断时间是必填项", trigger: "blur" },
{ pattern: /^[0-9]\d{1,10}$/, "message": "判断时间必须是 1-10位的数字", trigger: 'blur' }
],
tempRegulation: [
{ required: true, message: "调节温度是必选项", trigger: "blur" },
{ pattern: /^(-?[0-9]+(\.[0-9]+)?)$/, "message": "调节温度输入不合法", trigger: 'blur' },
{ min: 1, max: 10, message: '调节温度必须是 1-10位的数字', trigger: 'blur' }
]
});
const getInstanceHeat = () => { const getInstanceHeat = () => {
loading.value = true loading.value = true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment