andyliu
/
KprUnionMgrPlatform


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增开通申请')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-apply-add">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">申请人：</label>
                <div class="col-sm-8">
                    <select id="userId" name="userId" class="form-control" required  onchange="getLoginName();">
                        <option value="">请选择</option>
                        <option th:each="user:${userList}" th:text="${user.userName}" th:value="${user.userId}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">本系统登录名：</label>
                <div class="col-sm-8">
                    <input id="loginName" name="loginName" class="form-control" type="text" required readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">申请类型：</label>
                <div class="col-sm-8">
                    <select name="applyType" class="form-control m-b" th:with="type=${@dict.getType('sys_apply_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <h4 class="form-header h4">子系统</h4>
            <div class="row">
                <input type="hidden" id="childDatas" name="childDatas">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="table1" class="table table-bordered table-hover"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <link th:href="@{/ajax/libs/table-edit/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/table-edit/bootstrap-table.min.css}" rel="stylesheet"/>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table.min.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-zh-CN.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-edit.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-table-edit.min.js}"></script>
    <script th:src="@{/ajax/libs/table-edit/bootstrap-select.js}"></script>
    <th:block th:include="include :: select2-js" />

    <script th:inline="javascript">
        var prefix = ctx + "system/apply";
        var danganList =[[${danganList}]];
        $("#form-apply-add").validate({
            focusCleanup: true
        });

        function getLoginName(){
          var userId=  $("#userId").val();
            $.ajax({
                url: ctx + "/system/user/getUserNameById",
                data: {userId:userId},
                type: "post",
                async: false,
                success: function(result) {
                  $("#loginName").val(result.loginName);
                }
            })
        }

        $(function() {
            loadEditTable();
        });


        var bool = false;
        function loadEditTable(){
            $.modal.alertWarning("此功能暂未开放");
            $.modal.close();//关闭当前窗口
            return;
            $('#table1').bootstrapTable('destroy');
            $('#table1').bootstrapTable({
                method: 'post',
                url: ctx + "system/a/list",
                editable:true,//开启编辑模式
                clickToSelect: true,
                cache : false,
                columns: [
                    {
                        field: 'danganId',
                        title: '子系统名称',
                        align:"center",
                        edit: {
                            required: true, editable:false,type: 'select', data: danganList,
                            valueField: 'danganId',
                            textField: 'danganName',
                            onSelect: function (val, rec) {
                                var data = $("#table1").bootstrapTable('getData');
                                bool = data.some(item=>item.danganId==val);
                            }
                        },
                    },
                    {
                        field: 'loginName',
                        title: '子系统登录名',
                        align:"center",
                        edit:{required:true ,type:'text'}
                    },
                    {
                        title:"操作",
                        align:"center",
                        formatter : operateFormatter1,
                        edit:false
                    }
                ],
                onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
                    if(reason === 'save') {
                        var $td = $el.closest('tr').children();
                        $td.eq(-1).html((row.price*row.number).toFixed(2));
                        $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
                    } else if(reason === 'nochange') {
                        $el.closest('tr').next().find('.editable').editable('show');
                    }
                },
                onEditableSave: function (field, row, oldValue, $el) {
                    $table = $('#table1').bootstrapTable({});
                    $table.bootstrapTable('updateRow', {index: row.rowId, row: row});
                }
            });
        }

        function operateFormatter1(value, row, index) {
            return [
                "<a class=\"remove\" href='javascript:removeRow("+index+")' title=\"删除改行\">",
                "<i class='glyphicon glyphicon-remove'></i>",
                "</a>     "
            ].join('');
        }

        $('#table1').on( 'click', 'td:has(.editable)', function (e) {
            e.stopPropagation(); // 阻止事件的冒泡行为
            $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态
        } );

        function addRow(){
            var rows = [];
            $('#table1').bootstrapTable('append',rows);
        }

        //删除指定行
        function removeRow(deleteIndex){
            $('#table1').bootstrapTable('removeRow', deleteIndex);
        }

        function submitHandler() {
            var tableData = $("#table1").bootstrapTable('getData');
            $("#childDatas").val(JSON.stringify(tableData));
            if ($.validate.form()) {
                if(tableData.length==0){
                    $.modal.alertWarning("请选择子系统！");
                    return;
                }
                for (var i = 0;i<tableData.length;i++){
                    if(tableData[i].danganId == "" || tableData[i].danganId == null){
                        $.modal.alertWarning("请选择子系统名称！");
                        return;
                    }
                    if(tableData[i].loginName == "" || tableData[i].loginName == null){
                        $.modal.alertWarning("请选择子系统登录名！");
                        return;
                    }
                }
                $.operate.save(prefix + "/add", $('#form-apply-add').serialize());
            }
        }

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