实现功能
提交按钮功能：
点击提交按钮的时候都会弹出模态框，但是有不同的状态：
审核状态未通过：弹出未通过理由的input输入框，模态框中除了取消和确定按钮，新增确定并保存医院的按钮
审核状态已通过：如果新增医院的经纬度没有填写，会提示填写经纬度，填写之后点击提交按钮，模态框中显示确定和取消按钮
审核状态待审核：模态框中显示确定和取消按钮
添加医院的html代码：
<div> <label for="first-name"> <span>所属医院</span> </label> <div> @if($data->hospitalid > 0) **如果医院的id>0,就是存在对应的医院，让下面的输入框不能修改** <input type="text" disabled value="{{$data->hospital->name}}" required="required"> @else **如果医院的id<=0,就是不存在对应的医院，让下面的输入框可以修改，同时填写医院的经纬度** <input type="text" value="{{$data->hospital_info}}" required="required"> <div> <input type="text" placeholder="请输入医院经度" > <input type="text" placeholder="请输入医院纬度 " > </div> @endif </div> </div>
审核状态的相关html代码：
<div> <label>审核状态</label> <div> <select required="" @if($data->is_verify == 1) disabled @endif data="{{$data->is_verify}}"> <option value="1" @if($data->is_verify == 1) selected @endif>未通过</option> <option value="2" @if($data->is_verify == 2) selected @endif>已通过</option> <option value="0" @if($data->is_verify == 0) selected @endif>待审核</option> </select> <input type="text" placeholder='填写未通过理由' value="{{$data->check_reason}}"> **如果未通过审核的话会弹出这个input输入框，填写未通过理由** </div> </div>
总的表单提交按钮html代码：
<div> <div> <button type="button" >提交</button> **这个提交按钮的功能与上面的审核状态和添加医院相关信息有关系** 点击提交按钮的时候，弹出模态框，此时的模态框有两种状态： 1. <button type="reset">返回</button> </div> </div>
模态框的相应html代码：
<div tabindex="-1" role="dialog"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>确认提交吗？</h4> </div> {{--<div>--}} {{--</div>--}} <div> <button type="button" data-dismiss="modal">取消</button> <button type="button" data-dismiss="modal" >确定 </button> <button type="button" data-dismiss="modal" >确定并保存医院 </button> </div> </div> </div> </div>
js代码：
var hospitalId = {{$data->hospitalid}}; **拿到对应医院的id** **下面是点击提交按钮时的处理函数** $('#edit-submit').click(function () { is_verify = $('select[name=is_verify]').val(); **拿到审核状态下拉框的值** if (is_verify == 1) { **未通过的时候** if (!$('input[name=check_reason]').val()) { layer.msg('请填写未通过理由'); **如果选择未通过的时候，后面的未通过理由没有填写，值为空，弹出提示信息请填写未通过理由** return false; } } if (hospitalId <= 0) { **如果医院不存在的话** if (is_verify == 1) { //审核未通过 $('#save_hospital_btn').show() **模态框中新增确定并保存医院的按钮出现** } else if(is_verify == 2) { //审核通过 if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) { layer.msg('请填写医院的经纬度'); **所属医院下面的经纬度有一个没填写都会弹出提示信息** return false; } $('#save_hospital_btn').hide() **模态框中新增确定并保存医院的按钮消失** } else { **这个else中的条件就是 ： 待审核中** $('#save_hospital_btn').hide() **模态框中新增确定并保存医院的按钮消失** } } $('#confirmSubmit').modal('show'); **只要点击提交按钮模态框就会显示** });
$(function(){ $(":input[name=is_verify]").on("change",function(e){ **审核状态的下拉列表发生变化的时候触发这个函数** console.log($(this).attr("data"),$(this).val()); if($(this).attr("data") == 1){ layer.msg('已通过审批用户不可继续审批',{time:1000},function () { $(this).val(1); $(this).reset(); }); return false; } else { if ($(this).val() == 1) { **如果审核状态是未通过，显示输入未通过理由的input输入框** $('.Nopass').show(); } else { $('.Nopass').hide(); } } }); });