OAAudit

OAAudit Dialog

by redoak2000

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<button id="do_audit">审批</button>
<div id="dcht-oa-audit-dialog" title="请选择OA审批信息">
  <form>
    <fieldset class="form-group">
      <legend>OA审批方式</legend>
      <div class="form-check">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="audit_type" id="audit_type_oa" value="oa_sn" checked>
          按OA审批编号
          <input type="text" class="form-control" id="oa_sn" placeholder="OA审批编号">
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="radio" class="form-check-input" name="audit_type" id="audit_type_sel" value="sel">
          表格中选中的合同
        </label>
      </div>
    </fieldset>
    <div class="form-group">
      <label for="memo">审批备注</label>
      <textarea class="form-control" id="memo" rows="3"></textarea>
    </div>

  </form>

</div>

CSS

.container {
  margin-top: 20px;
  margin-bottom: 20px;
}

TypeScript

function checkRegexp(o, regexp, n) {
  if (!(regexp.test(o.val()))) {
    o.addClass("ui-state-error");
    //o.tooltip()
    return false;
  } else {
    return true;
  }
}

function init_dcht_ao_audit() {
  let oa_sn_elem = $("#oa_sn")
  let allFields = $([]).add(oa_sn_elem)
  $("#dcht-oa-audit-dialog").show().dialog({
    autoOpen: false,
    height: 300,
    width: 480,
    modal: true,
    buttons: {
      "审批": function() {


        allFields.removeClass("ui-state-error");
        let bValid = checkRegexp(oa_sn_elem, /^[A-Z]{1}\d{5}$/, "OA审批编号为1个字母加5个数字。");
        if (bValid) {
          $(this).dialog("close");
        }
      },
      "取消": function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      allFields.val("").removeClass("ui-state-error");
    }
  });
}

$(function() {

  init_dcht_ao_audit();

  $("#do_audit")
    .button()
    .click(function() {
			 //do_dcht_ao_audit();
       $("#dcht-oa-audit-dialog").dialog("open");
    });
});