<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>一线城市维护title>
<link href="${ctx}/static/css/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="${ctx}/static/css/bootstrap/bootstrap-table.css" rel="stylesheet"/>
<link href="${ctx}/static/fonts/font-awesome.css" rel="stylesheet"/>
head>
<body>
<div class="container">
<div id="toolbar" class="btn-group">
<button id="btn-add" type="button" class="btn btn-default" data-toggle="modal">
<span class="glyphicon glyphicon-plus" aria-hidden="true">span>新增
button>
<button id="btn-edit" type="button" class="btn btn-default" data-toggle="modal">
<span class="glyphicon glyphicon-pencil" aria-hidden="true">span>修改
button>
<button id="btn-delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-trash" aria-hidden="true">span>删除
button>
div>
<table id="city-list-table">table>
<div id="city-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="edit-city"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
button>
<h4 id="modal-title" class="modal-title">编辑h4>
div>
<div class="modal-body">
<input id="id-city-modal" name="id" type="hidden"/>
<div class="form-group">
<label for="name-city-modal">城市名称label>
<input id="name-city-modal" name="cityName" class="form-control" style="margin-bottom: 13px"
type="text" placeholder="请输入城市名称" required="required"/>
div>
<div class="form-group">
<label for="type-city-modal">城市等级label>
<select id="type-city-modal" name="cityType" class="form-control"
style="margin-bottom: 13px"
readonly="readonly" disabled="disabled">
<option value="1">一线城市option>
<option value="2">二线城市option>
select>
div>
<div class="form-group">
<label for="organization-code-city-modal">组织编号label>
<input id="organization-code-city-modal" name="organizationCode" class="form-control "
placeholder="请输入组织编号" required="required" style="margin-bottom: 13px"/>
div>
div>
<div class="modal-footer">
<button id="btn-city-confirm" class="btn btn-primary" onclick="addOrUpdate()">保存button>
<button id="btn-city-cancel" class="btn" data-dismiss="modal">取消button>
div>
div>
div>
div>
<div id="info-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="result"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
button>
<h4 class="modal-title">温馨提示h4>
div>
<div class="modal-body">
<h5 id="info-modal-message">h5>
div>
<div class="modal-footer">
<button id="btn-confirm" class="btn btn-primary">确定button>
<button id="btn-cancel" class="btn" data-dismiss="modal">取消button>
div>
div>
div>
div>
div>
body>
<script src="${ctx}/static/js/bootstrap/jquery-3.2.0.js">script>
<script src="${ctx}/static/js/bootstrap/bootstrap.js">script>
<script src="${ctx}/static/js/bootstrap/bootstrap-table.js">script>
<script src="${ctx}/static/js/bootstrap/bootstrap-table-zh-CN.js">script>
<script src="${ctx}/static/js/uc/city.js">script>
html>
$(function () {
var oTable = new TableInit();
oTable.Init();
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = {};
oTableInit.Init = function () {
$('#city-list-table').bootstrapTable({
url: 'city/list',
method: 'GET',
dataType: 'json',
toolbar: '#toolbar',
striped: true,
cache: false,
pagination: true,
sortable: false,
sortOrder: "asc",
queryParams: oTableInit.queryParams,
sidePagination: "server",
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
search: true,
strictSearch: true,
showColumns: true,
showRefresh: false,
minimumCountColumns: 2,
clickToSelect: true,
height: 600,
uniqueId: "id",
showToggle: false,
cardView: false,
detailView: false,
columns: [{
radio: true
}, {
field: 'cityName',
title: '城市名称'
}, {
field: 'cityType',
title: '城市等级',
formatter: oTableInit.cityTypeFormat
}, {
field: 'organizationCode',
title: '机构代码'
}, {
title: "查看门店",
formatter: oTableInit.operatorFormat
}],
onExpandRow: function (index, row, $detail) {
var oSubTableInit = new SubTableInit();
oSubTableInit.Init(index, row, $detail);
}
});
};
oTableInit.queryParams = function (params) {
var temp = {
limit: params.limit,
offset: params.offset,
cityName: params.search
};
return temp;
};
oTableInit.cityTypeFormat = function (value, row, index) {
if (value === 1) {
return '一线城市';
} else {
return '二线城市';
}
};
oTableInit.operatorFormat = function (value, row, index) {
return '';
};
return oTableInit;
};
var SubTableInit = function () {
var oTableInit = {};
var organizationCode;
oTableInit.Init = function (index, row, $detail) {
organizationCode = row.organizationCode;
var cur_table = $detail.html('').find('table');
$(cur_table).bootstrapTable({
url: 'organization/list',
method: 'GET',
dataType: 'json',
striped: true,
cache: false,
pagination: true,
sortable: false,
sortOrder: "asc",
sidePagination: "server",
pageNumber: 1,
pageSize: 10,
pageList: [10, 25],
minimumCountColumns: 2,
clickToSelect: true,
uniqueId: "id",
showToggle: false,
cardView: false,
detailView: false,
queryParams: oTableInit.queryParams,
columns: [{
field: 'name',
title: '门店名称'
}, {
field: 'orgType',
title: '机构类别',
formatter: oTableInit.orgTypeFormat
}, {
field: 'code',
title: '机构代码'
}]
});
};
oTableInit.queryParams = function (params) {
if (organizationCode === "undefined" || organizationCode === null) {
showInfoModal("系统异常，请联系管理员");
return null;
}
var temp = {
limit: params.limit,
offset: params.offset,
organizationCode: organizationCode
};
return temp;
};
oTableInit.orgTypeFormat = function (value, row, index) {
if (value === "SHOP") {
return "门店";
}
return value;
};
return oTableInit;
};
var infoModal = $("#info-modal");
var infoModalMessage = $("#info-modal-message");
var btnConfirm = $("#btn-confirm");
var btnCancel = $("#btn-cancel");
var cityTable = $('#city-list-table');
var ButtonInit = function () {
var oInit = {};
var postdata = {};
oInit.Init = function () {
var addBtn = $("#btn-add");
var editBtn = $("#btn-edit");
var deleteBtn = $("#btn-delete");
editBtn.click(function (event) {
event.preventDefault();
editBtn.removeAttr('data-target');
var organizationCityDictionary = cityTable.bootstrapTable('getSelections')[0];
if (!isChosen(organizationCityDictionary)) {
return;
}
$("#modal-title").html("编辑");
editBtn.attr('data-target', "#city-modal");
$("#id-city-modal").val(organizationCityDictionary.id);
$("#name-city-modal").val(organizationCityDictionary.cityName);
if (organizationCityDictionary.cityType === 1) {
$("#type-city-modal").val(1);
} else if (organizationCityDictionary.cityType === 2) {
$("#type-city-modal").val(2);
}
$("#organization-code-city-modal").val(organizationCityDictionary.organizationCode);
});
addBtn.click(function (event) {
addBtn.removeAttr('data-target');
clearCityModal();
$("#modal-title").html("添加");
addBtn.attr('data-target', "#city-modal");
});
deleteBtn.click(function (event) {
var organizationCityDictionary = cityTable.bootstrapTable('getSelections')[0];
if (!isChosen(organizationCityDictionary)) {
return;
}
var options = cityTable.bootstrapTable('getOptions');
showConfirmModal("是否要删除该城市：" + organizationCityDictionary.cityName);
btnConfirm.click(function (event) {
$.ajax({
type: "DELETE",
url: "city/" + organizationCityDictionary.id,
success: function (result) {
showInfoModal('删除成功');
$('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: options.pageNumber});
},
error: function (result) {
showInfoModal('删除失败\n' + result.responseText);
$('#city-list-table').bootstrapTable('refresh', {silent: true});
}
});
});
})
};
return oInit;
};
function addOrUpdate() {
var id = $("#id-city-modal").val();
var cityName = $("#name-city-modal").val();
var cityType = $("#type-city-modal").val();
var organizationCode = $("#organization-code-city-modal").val();
if (isEmpty(cityName) || isEmpty(cityType) || isEmpty(organizationCode)) {
showInfoModal('参数不能为空');
return;
}
var options = cityTable.bootstrapTable('getOptions');
var page = options.pageNumber;
if (id === "undefined" || id === null || id === "") {
page = options.totalPages;
}
if (options.totalRows % options.pageSize === 0) {
page += 1;
}
$('#city-modal').modal('hide');
$.ajax({
type: "POST",
url: "city",
data: {id: id, cityName: cityName, cityType: cityType, organizationCode: organizationCode},
success: function (result) {
showInfoModal('保存成功');
$('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: page});
},
error: function (result) {
showInfoModal('保存失败\n' + result.responseText);
$('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: page});
}
});
}
function isChosen(organizationCityDictionary) {
if (typeof(organizationCityDictionary) === "undefined" || organizationCityDictionary === null) {
showInfoModal("请先选择城市");
return false;
}
return true;
}
function showInfoModal(message) {
btnConfirm.hide();
btnCancel.html("关闭");
infoModalMessage.html(message);
infoModal.modal('show');
}
function showConfirmModal(message) {
btnConfirm.show();
btnCancel.html("取消");
infoModal.modal('show');
infoModalMessage.html(message);
}
function isEmpty(param) {
return param === 'undefined' || param === null || param === '';
}
function clearCityModal() {
$("#id-city-modal").val('');
$("#name-city-modal").val('');
$("#organization-code-city-modal").val('');
}
