ZhiYeJianKang/职业健康平台后端/target/dzzyb/webpage/modules/sys/userForm.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<html>
<head>
    <title>用户管理</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript">
        var validateForm;

        function doSubmit() {//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if (validateForm.form()) {
                $("#inputForm").submit();
                return true;
            }

            return false;
        }

        $(document).ready(function () {
            $("#photoFilePath").attr("value", "${photoPath}");
            $("#photoFileName").attr("value", "${photoNm}");
            $("#photoFileNm").attr("value", "${photoPath}" + "${photoNm}");
            $("#no").focus();
            validateForm = $("#inputForm").validate({
                rules: {
                    loginName: {remote: "${ctx}/sys/user/checkLoginName?oldLoginName=" + encodeURIComponent('${user.loginName}')}//设置了远程验证，在初始化时必须预先调用一次。
                },
                messages: {
                    loginName: {remote: "用户登录名已存在"},
                    confirmNewPassword: {equalTo: "输入与上面相同的密码"}
                },
                submitHandler: function (form) {
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });

            //在ready函数中预先调用一次远程校验函数，是一个无奈的回避案。(刘高峰）
            //否则打开修改对话框，不做任何更改直接submit,这时再触发远程校验，耗时较长，
            //submit函数在等待远程校验结果然后再提交，而layer对话框不会阻塞会直接关闭同时会销毁表单，因此submit没有提交就被销毁了导致提交表单失败。
            $("#inputForm").validate().element($("#loginName"));
        });

    </script>
    <link rel="stylesheet" href="${ctxStatic}/layui-v2.4.5/layui/css/layui.css" media="all">
</head>
<body>
<form:form id="inputForm" modelAttribute="user" action="${ctx}/sys/user/save" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
    <tbody>
    <tr>
        <td class="active"><label class="pull-right"><font color="red">*</font>用户名:</label></td>
        <td><form:input path="name" htmlEscape="false" maxlength="50" class="form-control required"/></td>
        <td class="active"><label class="pull-right"><font color="red">*</font>登录名:</label></td>
        <td><input id="oldLoginName" name="oldLoginName" type="hidden" value="${user.loginName}">
            <form:input path="loginName" htmlEscape="false" maxlength="50" class="form-control required userName"/>
        </td>
    </tr>

    <tr>
        <td class="active"><label class="pull-right"><c:if test="${empty user.id}"><font color="red">*</font></c:if>密码:</label>
        </td>
        <td><input id="newPassword" name="newPassword" type="password" value="" maxlength="50" minlength="3"
                   class="form-control ${empty user.id?'required':''}"/>
            <c:if test="${not empty user.id}">
                <span class="help-inline">若不修改密码，请留空。</span>
            </c:if></td>
        <td class="active"><label class="pull-right"><c:if test="${empty user.id}"><font color="red">*</font></c:if>确认密码:</label>
        </td>
        <td>
            <input id="confirmNewPassword" name="confirmNewPassword" type="password"
                   class="form-control ${empty user.id?'required':''}" value="" maxlength="50" minlength="3"
                   equalTo="#newPassword"/>
        </td>
    </tr>


    <tr>
        <td class="active"><label class="pull-right"><font color="red">*</font>所属地区:</label></td>
        <td>
            <sys:treeselect id="area" name="area.id" value="${user.area.id}" labelName="area.name"
                            labelValue="${user.area.name}" title="区域" url="/sys/area/treeData" extId="${area.id}"
                            cssClass="form-control m-s" allowClear="true"/>
        </td>

        <td class="width-15" class="active"><label class="pull-right"><font color="red">*</font>所属组织:</label></td>
        <td class="width-35" onlick="checkOffice()">
            <sys:treeselect id="office" name="office.id" value="${user.office.id}" labelName="office.name"
                            labelValue="${user.office.name}" title="部门" url="/sys/office/treeData?type=2"
                            cssClass="form-control m-s" allowClear="true" notAllowSelectParent="true"/>
        </td>
    </tr>


    <tr>
        <td class="active"><label class="pull-right"><font color="red">*</font>用户角色:</label></td>
        <td colspan="3">
            <form:checkboxes path="roleIdList" items="${allRoles}" itemLabel="name" itemValue="id" htmlEscape="false"
                             cssClass="i-checks required"/>
            <label id="roleIdListn-error" class="error" for="roleIdList"></label>
        </td>
    </tr>

    <tr>
        <td class="active"><label class="pull-right"><font color="red">*</font>用户类型:</label></td>
        <td>
            <form:select id="jgType" path="jgType" class="form-control required" name="jgType">
                <c:forEach items="${jgType}" var="t">
                    <form:option value="${t.value}" itemLabel="label" itemValue="value"
                                 htmlEscape="false">${t.label}</form:option>
                </c:forEach>
            </form:select>
        </td>

        <td class="active td-jg" hidden="hidden"><label class="pull-right"><font color="red">*</font>选择机构:</label></td>
        <td class="td-jg" hidden="hidden">
            <form:input name="jgId" type="hidden" id="jgId" path="jgId" htmlEscape="false"/>
            <form:input onclick="qiyename()" path="jgName" readonly="true" htmlEscape="false" type="text" name="jgName"
                        id="jgName" lay-verify="title" autocomplete="off" placeholder="请选择机构" class="layui-input"/>
        </td>
    </tr>

    <tr>
        <td class="active"><label class="pull-right"><font color="red">*</font>账号是否可用:</label></td>
        <td>
            <form:select id="loginFlag" path="loginFlag" class="form-control required" name="loginFlag">
                <c:forEach items="${dlzt}" var="t">
                    <form:option value="${t.value}" itemLabel="label" itemValue="value"
                                 htmlEscape="false">${t.label}</form:option>
                </c:forEach>
            </form:select>
        </td>
    </tr>


    <tr>
        <td colspan="5" style="text-align: center"><font color="red">以下选填</font></td>
    </tr>
    <tr>
        <td class="active"><label class="pull-right">卫健局名称:</label></td>
        <td>
            <form:input path="sanName" htmlEscape="false" maxlength="100" class="form-control"/>
        </td>

        <td class="active"><label class="pull-right">负责人:</label></td>
        <td>
            <form:input path="principalName" htmlEscape="false" maxlength="100" class="form-control"/>
        </td>

    </tr>

    <tr>
        <td class="active"><label class="pull-right">邮箱:</label></td>
        <td>
            <form:input path="email" htmlEscape="false" maxlength="100" class="form-control email"/>
        </td>

        <td class="active"><label class="pull-right">电话:</label></td>
        <td>
            <form:input path="phone" htmlEscape="false" maxlength="100" class="form-control"/>
        </td>
    </tr>


    <tr>
        <td class="active"><label class="pull-right">地址:</label></td>
        <td>
            <form:input path="address" htmlEscape="false" maxlength="100" class="form-control"/>
        </td>

        <td class="width-15 active"><label class="pull-right">头像：</label></td>
        <td class="width-35" colspan="1">
                <form:hidden id="photo" path="photo" htmlEscape="false" maxlength="255" class="input-xlarge"/>
            <c:choose>
            <c:when test="${user.viewFlag == '1'}">
                <sys:webuploader prefixid="photo" inputwidth="65%" inputDisabled="" btnUpDisplay="none"
                                 btnDelDisplay="none" ftpfilepath="photo/"/>
            </c:when>
            <c:otherwise>
                <sys:webuploader prefixid="photo" inputwidth="65%" inputDisabled="" btnUpDisplay="block"
                                 ftpfilepath="photo/"/>
            </c:otherwise>
            </c:choose>
    </tr>

    <tr>
        <td class="active"><label class="pull-right">备注:</label></td>
        <td colspan="3"><form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200"
                                       class="form-control"/></td>
    </tr>


    <c:if test="${not empty user.id}">
        <tr>
            <td class=""><label class="pull-right">创建时间:</label></td>
            <td><span class="lbl"><fmt:formatDate value="${user.createDate}" type="both" dateStyle="full"/></span></td>
            <td class=""><label class="pull-right">最后登陆:</label></td>
            <td><span class="lbl">IP: ${user.loginIp}&nbsp;&nbsp;&nbsp;&nbsp;时间：<fmt:formatDate
                    value="${user.loginDate}" type="both" dateStyle="full"/></span></td>
        </tr>
    </c:if>

    </form:form>
    </tbody>
</table>

<div id="win-jg-table" hidden="hidden">
    <div class="demoTable">
        输入企业名称：
        <div class="layui-inline">
            <input class="layui-input" name="qiyeName" id="demoReload" autocomplete="off">
        </div>
        <button type="button" class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table class="layui-table" id="jgTable" lay-filter="orders_list"></table>
</div>

<script src="${ctxStatic}/layui-v2.4.5/layui/layui.js"></script>


<script type="text/javascript">
    $("#jgType").on('change', function () {
        var jgType = $("#jgType").val();
        layui.use(['table'], function () {
            var table = layui.table;
            //渲染数据表格
            table.render({
                elem: '#jgTable'   //渲染的目标对象
                , url: '${ctx}/zyb/logon/jgAll'
                , where: {tName: jgType}
                , id: 'testReload'
                , title: '企业数据表'//数据导出来的标题
                , height: '500'
                , cellMinWidth: 200 //设置列的最小默认宽度
                , page: true  //是否启用分页
                , cols: [[   //列表数据
                    {type: 'radio'}
                    , {field: 'companyName', title: '企业名称'}
                ]],done: function (res) {
                    console.log(res);
                    if (res.code === 500) {
                        $(".td-jg").hide();
                    } else {
                        $(".td-jg").show();
                    }
                }
            });

            /*table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });*/

            table.on('radio(orders_list)', function (obj) {
                var checkStatus = table.checkStatus('testReload');
            });

            /**
             * 查询
             */
            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            tName: jgType,
                            companyName: demoReload.val()
                        }
                    }, 'data');
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    });

    $("#jgType").change();

    function qiyename() {

        layer.open({
            title: "选择机构",
            type: 1,
            area: ['70%', '70%'],
            maxmin: true, //开启最大化最小化按钮
            content: $("#win-jg-table"),
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                // var iframeWindow = window[layero.find('iframe')[0]['name']];
                var params = layui.table.checkStatus('testReload').data;
                document.getElementById('jgName').value = params[0].companyName;
                document.getElementById('jgId').value = params[0].id;

                layer.close(index);

            }
        });
    }


</script>
</body>
</html>