html
<div class="layui-form layuimini-form" style="margin-top: 20px;">
<div class="layui-tab-item">
<fieldset class="layui-elem-field">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label required" style="width: 150px"><span style="color: red;">*</span>计费方式：</label>
<div class="layui-input-inline" style="width: 150px">
<select class="layui-btn layui-btn-primary" lay-verify="required" id="devicePayModeID"
name="devicePayModeID" lay-filter="devicePayModeID">
<option value="0" selected>计时实时扣费</option>
<option value="1">计量实时扣费</option>
</select>
</div>
<label class="layui-form-label required" style="width: 150px"><span style="color: red;">*</span>控制模式：</label>
<div class="layui-input-inline" style="width: 150px">
<select class="layui-btn layui-btn-primary" lay-verify="required" id="deviceConModeID"
name="deviceConModeID" lay-filter="deviceConModeID">
<option value="0" selected>常出</option>
<option value="1">预扣</option>
</select>
</div>
<div class="dynamic-fields">
<!-- 预扣模式显示 -->
<div id="preAmountBlock" class="layui-input-inline" style="width: 150px;display: none">
<label class="layui-form-label required"><span style="color: red;">*</span><span
id="preAmountUnit">预扣费单位:</span></label>
<div style="margin-left: 110px;width: 160px;">
<input type="number" lay-affix="number" step="0.1" min="\" lay-precision="2"
id="preAmount" lay-filter="preAmount"
name="preAmount" placeholder="" value="" lay-verify="required|preAmountCheck"
class="layui-input">
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field">
<legend>基础参数</legend>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label required" style="width: 200px"><span style="color: red;">*</span><span
id="minimumUnitUnit">最小计费：</span></label>
<div class="layui-input-inline" style="width: 290px">
<input type="number" lay-affix="number" step="1" min="1" id="minimumUnit"
name="minimumUnit" placeholder="请填写最小计费单位" lay-verify="required|minUnit" value="0"
class="layui-input">
</div>
</fieldset>JS
html
layui.use(function () {
var form = layui.form;
// 页面加载时立即执行
var payMode = $('#devicePayModeID').val();
var conMode = $('#deviceConModeID').val();
if (payMode !== undefined && conMode !== undefined) {
console.log("初始化加载", payMode, conMode);
LoadUnit(conMode, payMode);
}
// select 事件
form.on('select(devicePayModeID)', function (data) {
var payMode = $('#devicePayModeID').val();
var conMode = $('#deviceConModeID').val();
console.log("conMode", conMode, "payMode", payMode);
LoadUnit(conMode, payMode);
});
// select 事件
form.on('select(deviceConModeID)', function (data) {
var payMode = $('#devicePayModeID').val();
var conMode = $('#deviceConModeID').val();
console.log("conMode", conMode, "payMode", payMode);
LoadUnit(conMode, payMode);
});
});
// 自定义验证规则
layui.form.verify({
cardTypeRequired: function(value, item) {
// 获取 xmSelect 当前选中的值
var selected = cardTypeSelect.getValue();
if (!selected || selected.length === 0) {
return '请选择至少一种卡片类型';
}
},
preAmountCheck: function(value, item) {
var conMode = $('#deviceConModeID').val();
if (conMode !== '1') return true; // 非预扣模式不校验
var minimumUnit = parseFloat($('#minimumUnit').val());
var preAmount = parseFloat(value);
// 检查是否为有效数字
if (isNaN(preAmount) || isNaN(minimumUnit)) {
return '请输入有效的数字';
}
// 核心校验：预扣费 >= 2 * 最小计费单位
if (preAmount < 2 * minimumUnit) {
return '预扣费金额必须不小于最小计费单位的2倍（当前最小单位：' + minimumUnit + '）';
}
},
minRate: function(value, item) {
var num = parseFloat(value);
if (isNaN(num) || num < 0.01) {
return '费率不能小于 0.01 元';
}
},
minUnit: function(value, item) {
// 实时从页面获取当前支付模式
var payMode = $('#devicePayModeID').val(); // ✅ 安全：DOM 查询
const baseMin = payMode === '0' ? 1 : 100;
const unit = payMode === '0' ? '秒' : '毫升';
const v = parseFloat(value);
if (isNaN(v)) {
return '请输入有效数字';
}
if (v < baseMin) {
return '最小计费单位不能小于' + baseMin + unit;
}
if (payMode == '0' && v > 60) {
return '计时实时扣费下，预扣金额为1~60！';
}
}
});
$('#minimumUnit').on('input', function() {
// 可选：如果 preAmount 已填写且不满足新规则，给出提示或清空
var conMode = $('#deviceConModeID').val();
var payMode = $('#devicePayModeID').val(); // ✅ 安全：DOM 查询
if (conMode !== '1') return true; // 非预扣模式不校验
var minUnit = parseFloat($(this).val()) || 0;
var preAmt = parseFloat($('#preAmount').val()) || 0;
if (preAmt > 0 && preAmt < 2 * minUnit) {
layer.tips('当前预扣费小于最小单位的2倍！', '#preAmount', {tips: [2, '#FF5722']});
}
});
var cardTypeSelect = xmSelect.render({
name: 'cardTypeSelect',
el: '#cardTypeSelect',
toolbar: {
show: true,
},
data: []
});
$.ajax({
url: "/cardType/getList",
type: "GET",
dataType: 'json',
async: false,
success: function (res) {
cardTypeSelect.update({
data: res.data.map(item => ({
name: item.cardTypeName,
value: item.cardTypeID
}))
});
},
});
// 获取区域选择数据
GetAreaSelect('deviceAreaID');
// 获取设备商户选择数据
GetDeviceMerchantSelect('deviceMerchantID');
var url = "/waterDevice/edit";
function LoadUnit(conMode, payMode) {
// 强制解除输入框禁用状态
$('#preAmount').prop('disabled', false);
// 获取单位文本
const unit = payMode === '0' ? '秒' : '毫升';
const isPreMode = conMode === '1';
// 切换默认值
const minVal = payMode === '0' ? '1' : '100';
// 动态更新 min 属性
$('#minimumUnit').attr('min', ''); // 关键：同步更新 min 属性
// 切换显示/隐藏逻辑
$('#preAmountBlock').toggle(isPreMode);
// 更新单位显示
$('#minimumUnitUnit').text(`最小计费单位(${unit}):`);
$('#firstLevelLimitUnit').text(`一阶限制值(${unit}):`);
$('#secondLevelLimitUnit').text(`二阶限制值(${unit}):`);
$('#thirdLevelLimitUnit').text(`三阶限制值(${unit}):`);
$('#fourthLevelLimitUnit').text(`四阶限制值(${unit}):`);
// 动态更新预扣模式下的单位显示
if (isPreMode) {
$('#preAmountUnit').text(`预扣费单位(${unit}):`);
$('#preAmount').attr('placeholder', `请输入${unit}数`);
// 预扣模式：启用输入框 + 恢复必填校验
$('#preAmount').prop('disabled', false).attr('lay-verify', 'required|preAmountCheck');
}else{
// 清空值，避免残留值触发校验
$('#preAmount').val('');
// 关闭残留的提示框.prop('disabled', true)
$('#preAmount').val('').removeAttr('lay-verify');
layer.closeAll('tips');
}
}