在layui近期的开发中,遇到一则需求:设备的故障原因明确,点选即可,但是又需要维修人员将该原因自动输入到文本框进行记录。
同样的事情,做两遍,对操作人员来说是不友好的,何况又是在手机端使用的情况,如果解决不重复劳动,不给维修人员增加麻烦,减少打字环节呢?
HTML代码
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">点位重启</label></div>
<div class="weui-cell__bd">
<input type="radio" name="poi_restart" lay-filter="poi_restart" value="1" title="是">
<input type="radio" name="poi_restart" lay-filter="poi_restart" value="0" title="否" checked>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">无主电源</label></div>
<div class="weui-cell__bd">
<input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="1" title="是">
<input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="0" title="否" checked>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">无光信号</label></div>
<div class="weui-cell__bd">
<input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="1" title="是">
<input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="0" title="否" checked>
</div>
</div>
<div class="weui-media-box weui-media-box_text">
<p class="weui-media-box__desc" style="margin-bottom: 10px;">维修描述</p>
<div class="weui-media-box__title">
<input class="weui-input" type="text" name="poi_md" id="poi_md"/>
</div>
</div>
</div>
layUI交互代码
/*单选自动输入事件*/
var ele = document.getElementById("poi_md");
/*01.重启*/
form.on("radio(poi_restart)", function (data) {
//console.log(data.value);
var thisValue=data.value;
if (thisValue == '1') {
var a = ele.value + "重启,";
$("#poi_md").val(a);
} else{
var b = ele.value.replace('重启,','');
$("#poi_md").val(b);
}
});
/*02.主电源*/
form.on("radio(poi_noelectricity)", function (data) {
var thisValue=data.value;
if (thisValue == '1') {
var a = ele.value + "无主电源,";
$("#poi_md").val(a);
} else{
var b = ele.value.replace('无主电源,','');
$("#poi_md").val(b);
}
});
/*03.无光信号*/
form.on("radio(poi_nolight)", function (data) {
var thisValue=data.value;
if (thisValue == '1') {
var a = ele.value + "无光信号,";
$("#poi_md").val(a);
} else{
var b = ele.value.replace('无光信号,','');
$("#poi_md").val(b);
}
});
lockdatav Done !