|
@@ -1,105 +1,316 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
|
|
<head>
|
|
|
- <th:block th:include="include :: header('申请记录')" />
|
|
|
+ <th:block th:include="include :: header('用户列表')" />
|
|
|
+ <th:block th:include="include :: layout-latest-css" />
|
|
|
+ <th:block th:include="include :: ztree-css" />
|
|
|
<th:block th:include="include :: datetimepicker-css" />
|
|
|
+ <th:block th:include="include :: lustep-css" />
|
|
|
+ <th:block th:include="include :: select2-css" />
|
|
|
+ <th:block th:include="include :: bootstrap-fileinput-css" />
|
|
|
</head>
|
|
|
-<body class="white-bg">
|
|
|
- <div class="container-div">
|
|
|
- <div class="row">
|
|
|
- <div class="col-sm-12 search-collapse">
|
|
|
- <form id="record_form">
|
|
|
- <input type="hidden" id="recordId" name="recordId" th:value="${intRecord.id}">
|
|
|
- </form>
|
|
|
+<body class="gray-bg">
|
|
|
+<div class="wrapper wrapper-content animated fadeInRight">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <!--步骤条start-->
|
|
|
+ <div class="ibox">
|
|
|
+ <div class="ibox-title">
|
|
|
+ <div id="test" style="height: 40px; padding: 36px 0px;">
|
|
|
+ <div id="luStep"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="col-sm-12">
|
|
|
- <div class="col-sm-12 select-table table-striped">
|
|
|
- <table id="bootstrap-table"></table>
|
|
|
+ <!--步骤条end-->
|
|
|
+ <!--主表字段start-->
|
|
|
+ <div class="ibox">
|
|
|
+ <div class="ibox-content">
|
|
|
+ <form method="get" class="form-horizontal" id="form-record-edit">
|
|
|
+ <input type="hidden" name="id" th:value="${intRecord.id}">
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-2 control-label is-required">申请部门名称</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <input type="text" disabled class="form-control" th:value="${intRecord.applyDeptName}">
|
|
|
+ </div>
|
|
|
+ <label class="col-sm-2 control-label is-required">申请人</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <input type="text" disabled class="form-control" th:value="${intRecord.applyUserName}">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-2 control-label is-required">联系方式</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <input type="text" name="tel" class="form-control" maxlength="11" th:value="${intRecord.tel}" required>
|
|
|
+ </div>
|
|
|
+ <label class="col-sm-2 control-label is-required">调用者IP</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <input type="input" name="ip" class="form-control" maxlength="15" th:value="${intRecord.ip}" required>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-2 control-label is-required">接口提供部门</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group">
|
|
|
+ <input name="provideDeptName" th:value="${intRecord.provideDeptName}" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control" required>
|
|
|
+ <input name="provideDeptId" th:value="${intRecord.provideDeptId}" type="hidden" id="treeId"/>
|
|
|
+ <span class="input-group-addon"><i class="fa fa-search"></i></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-2 control-label is-required">每天调用频率</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <input type="input" class="form-control" name="frequency" maxlength="10" th:value="${intRecord.frequency}" required>
|
|
|
+ </div>
|
|
|
+ <label class="col-sm-2 control-label is-required">使用时效</label>
|
|
|
+ <div class="col-sm-4">
|
|
|
+ <div class="input-group date">
|
|
|
+ <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
|
|
+ <input type="text" class="form-control" id="duration" name="duration" placeholder="从 - 至" th:value="${intRecord.duration}" required>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--主表字段end-->
|
|
|
+ <!--子表字段start-->
|
|
|
+ <div class="ibox">
|
|
|
+ <div class="ibox-title">
|
|
|
+ <button type="button" class="btn btn-w-m btn-success" onclick="selectInterface()">获取部门接口</button>
|
|
|
+ </div>
|
|
|
+ <div class="ibox-content">
|
|
|
+ <div class="panel-group" id="accordion">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--子表字段end-->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <th:block th:include="include :: footer" />
|
|
|
- <script th:inline="javascript">
|
|
|
+</div>
|
|
|
+<div class="row">
|
|
|
+ <div class="col-sm-offset-5 col-sm-10">
|
|
|
+ <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
|
|
|
+ <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+
|
|
|
+<th:block th:include="include :: footer" />
|
|
|
+<th:block th:include="include :: layout-latest-js" />
|
|
|
+<th:block th:include="include :: ztree-js" />
|
|
|
+<th:block th:include="include :: datetimepicker-js" />
|
|
|
+<th:block th:include="include :: lustep-js" />
|
|
|
+<th:block th:include="include :: select2-js" />
|
|
|
+<th:block th:include="include :: bootstrap-fileinput-js" />
|
|
|
+<script th:inline="javascript">
|
|
|
|
|
|
- var editFlag = [[${@permission.hasPermi('apply:record:edit')}]];
|
|
|
- var prefix = ctx + "apply/record";
|
|
|
+ let prefix = ctx + "system";
|
|
|
+ let datas = [[${@dict.getType('share_type')}]];
|
|
|
+ let apply_prefix = ctx + "apply/record"
|
|
|
+ let deptName = "提供部门";
|
|
|
+ let num = 0;
|
|
|
+ let interfaces = [[${intDetailedList}]];
|
|
|
|
|
|
- function submitHandler() {
|
|
|
+ $(function() {
|
|
|
+ /** 范围选择日期框 **/
|
|
|
+ layui.use('laydate', function(){
|
|
|
+ let laydate = layui.laydate;
|
|
|
+ laydate.render({
|
|
|
+ elem: '#duration',
|
|
|
+ range: true
|
|
|
+ });
|
|
|
+ });
|
|
|
+ /** 回显接口 **/
|
|
|
+ renderInterface(interfaces);
|
|
|
+ console.log(interfaces);
|
|
|
+ });
|
|
|
|
|
|
+ /** 回显接口 **/
|
|
|
+ function renderInterface(data){
|
|
|
+ let html =
|
|
|
+ '<div class="panel panel-default">' +
|
|
|
+ ' <div class="panel-heading">' +
|
|
|
+ ' <h5 class="panel-title">' +
|
|
|
+ ' <a data-toggle="collapse" data-parent="#accordion" href="##id#" onclick="openOrClose(this)">#interfaceName#</a>' +
|
|
|
+ ' <span class="panel_sj on" name="#id#"></span>' +
|
|
|
+ ' </h5>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div id="#id#" class="panel-collapse collapse">' +
|
|
|
+ ' <div class="panel-body">' +
|
|
|
+ ' <form class="form-horizontal" id="#formId#">' +
|
|
|
+ ' <input type="hidden" name="intId" value="#id#">' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">接口地址</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <input type="text" class="form-control" disabled value="#interfaceAddress#">' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">接口用途</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <input type="text" class="form-control" name="purpose" value="#purpose#">' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">附件</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <iframe id="#file_upload#" src="/apply/record/uploadFrame/#subId#" width="100%" height="412px" frameborder="0" seamless></iframe>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </form>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ '</div>';
|
|
|
+ for(let i=0;i<data.length;i++){
|
|
|
+ let docm = html.replace(/#interfaceName#/g,data[i].interfaceName);
|
|
|
+ docm = docm.replace(/#interfaceAddress#/g,data[i].interfaceAddress);
|
|
|
+ docm = docm.replace(/#purpose#/g,data[i].purpose);
|
|
|
+ docm = docm.replace(/#id#/g,data[i].intId);
|
|
|
+ docm = docm.replace(/#subId#/g,data[i].subId);
|
|
|
+ docm = docm.replace(/#formId#/g,"sub-form"+num);
|
|
|
+ docm = docm.replace(/#file_upload#/g,"file_upload"+num);
|
|
|
+ $("#accordion").append(docm);
|
|
|
+ num += 1;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- $(function() {
|
|
|
- var options = {
|
|
|
- url: prefix + "/intDetailedList",
|
|
|
- pagination: false,
|
|
|
- showSearch: false,
|
|
|
- showRefresh: false,
|
|
|
- showToggle: false,
|
|
|
- showColumns: false,
|
|
|
- columns: [{
|
|
|
- field: 'index',
|
|
|
- align: 'center',
|
|
|
- title: "序号",
|
|
|
- formatter: function (value, row, index) {
|
|
|
- var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
|
|
|
- return columnIndex + $.table.serialNumber(index);
|
|
|
- }
|
|
|
- },{
|
|
|
- field: 'intName',
|
|
|
- align: 'center',
|
|
|
- title: '接口名称'
|
|
|
- },{
|
|
|
- field: 'intCode',
|
|
|
- align: 'center',
|
|
|
- title: '接口编码'
|
|
|
- },{
|
|
|
- field: 'strAt',
|
|
|
- align: 'center',
|
|
|
- title: '开始时间'
|
|
|
- },{
|
|
|
- field: 'endAt',
|
|
|
- align: 'center',
|
|
|
- title: '结束时间'
|
|
|
- },{
|
|
|
- field: 'secretKey',
|
|
|
- align: 'center',
|
|
|
- title: 'secret_key'
|
|
|
- },{
|
|
|
- visible: editFlag !== 'hidden',
|
|
|
- title: '状态',
|
|
|
- align: 'center',
|
|
|
- formatter: function (value, row, index) {
|
|
|
- return statusTools(row);
|
|
|
- }
|
|
|
- }]
|
|
|
- };
|
|
|
- $.table.init(options);
|
|
|
- });
|
|
|
+ /**手风琴右侧上下箭头样式变换控制**/
|
|
|
+ function openOrClose(dom) {
|
|
|
+ let name = $(dom).attr("href").substr(1);
|
|
|
+ if($("span[name="+name+"]").hasClass("on")){
|
|
|
+ $("span[name="+name+"]").removeClass("on");
|
|
|
+ }else{
|
|
|
+ $("span[name="+name+"]").eq(0).addClass("on");
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /* 状态显示 */
|
|
|
- function statusTools(row) {
|
|
|
- if (row.status === '0') {
|
|
|
- return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
|
|
|
- } else {
|
|
|
- return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
|
|
|
- }
|
|
|
+ /**获取部门接口弹窗**/
|
|
|
+ function selectInterface() {
|
|
|
+ let deptId = $("#treeId").val();
|
|
|
+ if(deptId == "" || deptId == null){
|
|
|
+ $.modal.alertError('请先选择接口提供部门');
|
|
|
+ }else{
|
|
|
+ let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId;
|
|
|
+ $.modal.open("请选择接口", url,1050,380,interfaceCallback);
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /**取得子页面选择的接口ids**/
|
|
|
+ function interfaceCallback(index, layero) {
|
|
|
+ let rows = layero.find("iframe")[0].contentWindow.$.table.selectFirstColumns();
|
|
|
+ renderInterfaceHtml(rows.join());
|
|
|
+ layer.close(index);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**根据数据渲染接口手风琴**/
|
|
|
+ function renderInterfaceHtml(ids) {
|
|
|
+ $.post(prefix + "/interfaceinfo/selectInterfaceByIds",{
|
|
|
+ ids:ids
|
|
|
+ },function(res){
|
|
|
+ if(res.length > 0){
|
|
|
+ let html =
|
|
|
+ '<div class="panel panel-default">' +
|
|
|
+ ' <div class="panel-heading">' +
|
|
|
+ ' <h5 class="panel-title">' +
|
|
|
+ ' <a data-toggle="collapse" data-parent="#accordion" href="##id#" onclick="openOrClose(this)">#interfaceName#</a>' +
|
|
|
+ ' <span class="panel_sj on" name="#id#"></span>' +
|
|
|
+ ' </h5>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div id="#id#" class="panel-collapse collapse">' +
|
|
|
+ ' <div class="panel-body">' +
|
|
|
+ ' <form class="form-horizontal" id="#formId#">' +
|
|
|
+ ' <input type="hidden" name="intId" value="#id#">' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">接口地址</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <input type="text" class="form-control" disabled value="#interfaceAddress#">' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">接口用途</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <input type="text" class="form-control" name="purpose">' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' <div class="form-group">' +
|
|
|
+ ' <label class="col-sm-2 control-label">附件</label>' +
|
|
|
+ ' <div class="col-sm-10">' +
|
|
|
+ ' <iframe id="#file_upload#" src="/apply/record/uploadFrame" width="100%" height="412px" frameborder="0" seamless></iframe>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </form>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ '</div>';
|
|
|
+ $("#accordion").html("");
|
|
|
+ num = 0;
|
|
|
+ for(let i=0;i<res.length;i++){
|
|
|
+ let docm = html.replace(/#interfaceName#/g,res[i].interfaceName);
|
|
|
+ docm = docm.replace(/#interfaceAddress#/g,res[i].interfaceAddress);
|
|
|
+ docm = docm.replace(/#id#/g,res[i].id);
|
|
|
+ docm = docm.replace(/#formId#/g,"sub-form"+num);
|
|
|
+ docm = docm.replace(/#file_upload#/g,"file_upload"+num);
|
|
|
+ $("#accordion").append(docm);
|
|
|
+ num += 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- /* 接口管理-停用 */
|
|
|
- function disable(id) {
|
|
|
- $.modal.confirm("确认要停用该接口吗?", function() {
|
|
|
- $.operate.post(prefix + "/changeStatus", { "id": id, "status": 0 });
|
|
|
- })
|
|
|
+ /**选择部门树**/
|
|
|
+ function selectDeptTree() {
|
|
|
+ var treeId = $("#treeId").val();
|
|
|
+ var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
|
|
|
+ var url = ctx + "system/dept/selectDeptTree/" + deptId;
|
|
|
+ var options = {
|
|
|
+ title: '选择部门',
|
|
|
+ width: "380",
|
|
|
+ url: url,
|
|
|
+ callBack: doSubmit
|
|
|
+ };
|
|
|
+ $.modal.openOptions(options);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**选择部门树回调方法**/
|
|
|
+ function doSubmit(index, layero){
|
|
|
+ var tree = layero.find("iframe")[0].contentWindow.$._tree;
|
|
|
+ if ($.tree.notAllowParents(tree)) {
|
|
|
+ var body = layer.getChildFrame('body', index);
|
|
|
+ $("#treeId").val(body.find('#treeId').val());
|
|
|
+ $("#treeName").val(body.find('#treeName').val());
|
|
|
+ layer.close(index);
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /**step步骤条**/
|
|
|
+ let data = {
|
|
|
+ data: ['开始', '政数局审批', deptName+'审批', '完成'],
|
|
|
+ index: 1 //0是第一步(0~3)
|
|
|
+ };
|
|
|
+ let dom = $('#luStep');
|
|
|
+ dom.stepInit(data);
|
|
|
|
|
|
- /* 接口管理-启用 */
|
|
|
- function enable(id) {
|
|
|
- $.modal.confirm("确认要启用该接口吗?", function() {
|
|
|
- $.operate.post(prefix + "/changeStatus", { "id": id, "status": 1 });
|
|
|
- })
|
|
|
+
|
|
|
+ /**表单提交方法**/
|
|
|
+ function submitHandler() {
|
|
|
+ let subData = [];
|
|
|
+ let formData = $("#form-record-edit").serializeArray();
|
|
|
+ for (let i = 0; i < num; i++) {
|
|
|
+ let data = $("#sub-form"+i).serializeArray();
|
|
|
+ let elem = {};
|
|
|
+ elem.name = "file";
|
|
|
+ elem.value = $("#file_upload"+i).contents().find("input[name='_file']").val();
|
|
|
+ data.push(elem);
|
|
|
+ subData.push(data);
|
|
|
+ }
|
|
|
+ if ($.validate.form()) {
|
|
|
+ let sub = {"name":"subData","value":JSON.stringify(subData)};
|
|
|
+ formData.push(sub);
|
|
|
+ $.operate.saveTab(apply_prefix + "/edit", formData);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- </script>
|
|
|
+</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|