Authored by 张凯

Merge branch 'master-500-prod-joke-new' into 'master-500-prod'

指标组管理调整

1,指标组管理,增加指标组描述字段,放到标识列后,将备注列加宽,可以出现横向滚动条。
2,指标组管理,绑定资源类型时,将对应的code值也赋值
3,指标组管理,新增和修改页面增加指标组描述字段

See merge request !770
/** 指标组新增 */
layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype'], function (exports) {
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var common = layui.common;
var admin = layui.admin;
var view = layui.view;
var element = layui.element;
// 对外暴露的接口
exports('kpiflagEdit', function (data) {
var flagId = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var kpiFlagTableData = [];
var resTypeTableData = [];
var appTableData = [];
var serverTableData = [];
// 加载遮罩
var loading;
// 如果是编辑,回显数据
var flag = {
id: '',
flag: '',
name: '',
remark: '',
bindResTypeCount: 0,
bindAppCount: 0,
bindServerCount: 0,
bindList: []
};
if (flagId) {
$.ajax({
url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId,
type: 'get',
success: function (res) {
flag = res.object;
form.val('form-flag-edit', res.object);
kpiFlagTableData = res.data;
reloadKpiFlagTable();
}
});
admin.req({
url: domainName + '/api-web/manage/restype/list',
data: {
flagId: flagId
}
}).done(function (response) {
resTypeTableData = response.data;
reloadResTypeTable();
});
admin.req({
url: domainName + '/api-web/manage/application/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
appTableData = response.data;
reloadAppTable();
});
admin.req({
url: domainName + '/api-web/manage/server/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
serverTableData = response.data;
reloadServerTable();
});
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var common = layui.common;
var admin = layui.admin;
var view = layui.view;
var element = layui.element;
// 对外暴露的接口
exports('kpiflagEdit', function (data) {
var flagId = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var kpiFlagTableData = [];
var resTypeTableData = [];
var appTableData = [];
var serverTableData = [];
// 加载遮罩
var loading;
// 如果是编辑,回显数据
var flag = {
id: '',
flag: '',
name: '',
remark: '',
bindResTypeCount: 0,
bindAppCount: 0,
bindServerCount: 0,
bindList: []
};
if (flagId) {
$.ajax({
url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId,
type: 'get',
success: function (res) {
flag = res.object;
form.val('form-flag-edit', res.object);
kpiFlagTableData = res.data;
reloadKpiFlagTable();
}
});
admin.req({
url: domainName + '/api-web/manage/restype/list',
data: {
flagId: flagId
}
}).done(function (response) {
resTypeTableData = response.data;
reloadResTypeTable();
});
admin.req({
url: domainName + '/api-web/manage/application/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
element.render('collapse');
}).done(function (response) {
appTableData = response.data;
reloadAppTable();
});
admin.req({
url: domainName + '/api-web/manage/server/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
serverTableData = response.data;
reloadServerTable();
});
}
element.render('collapse');
form.render();
// 刷新指标表格
var kpiflagTable = table.render({
elem: '#kpiflag-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: kpiFlagTableData
, cols: [[{
field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) {
return d.kpi.kpiName
}
}, {
field: 'kpiIdent', title: '指标分类', align: 'center',
templet: function (d) {
switch (d.kpi.kpiIdent) {
case '0':
return '基本指标';
case '1':
return '性能指标';
case '2':
return '状态指标';
case '3':
return '告警指标';
default:
return '';
}
}
},
{
title: '唯一标志', align: 'center',
templet: function (d) {
var radioDom = $('<input type="checkbox" name="isUnique" data-index="' + (d.LAY_INDEX-1) + '" lay-skin="switch" lay-text="是|否" lay-filter="switchIsUnique">') ;
var isUnique = kpiFlagTableData[(d.LAY_INDEX-1)].isUnique;
if (isUnique === '1') { //当是1时,表示时唯一标志
radioDom.attr('checked', true);
}else{
radioDom.attr('checked', false);
}
return radioDom.prop('outerHTML');
}
},
{
title: '排序', align: 'center',
templet: function (d) {
var selectDom = $('<select class="defaultSortSel" class="layui-select" data-index="' + (d.LAY_INDEX-1) + '" lay-filter="select-kpiflag-table-isSort">' +
'<option>无</option>' +
'<option>正序</option>' +
'<option>倒序</option>' +
'</select>');
var defaultSort = kpiFlagTableData[(d.LAY_INDEX-1)].defaultSort;
if (defaultSort == 'asc') {
selectDom.find('option:contains("正序")').attr('selected', 'selected');
} else if (defaultSort == 'desc') {
selectDom.find('option:contains("倒序")').attr('selected', 'selected');
} else {
selectDom.find('option:contains("无")').attr('selected', 'selected');
}
return selectDom.prop('outerHTML');
}
}, {
field: 'sort', title: '列表顺序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-kpiflag-table-sort-' + (d.LAY_INDEX-1) + '" data-index="' + (d.LAY_INDEX-1) + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">');
var sort = kpiFlagTableData[(d.LAY_INDEX-1)].sort;
if (sort != null) {
inputDom.attr("value", sort);
}
return inputDom.prop('outerHTML');
}
},
{field: 'createUser', title: '创建人', align: 'center'},
{field: 'createTime', title: '创建人', align: 'center'},
{
title: '操作',width: 100, align: 'center', templet: '<div><span data-index="{{(d.LAY_INDEX-1)}}" class="link link-kpiflag-delete">' +
'<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>'
}]],
done: function (res, curr, count) {
form.render();
// 刷新指标表格
var kpiflagTable = table.render({
elem: '#kpiflag-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: kpiFlagTableData
, cols: [[{
field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) {
return d.kpi.kpiName
}
}, {
field: 'kpiIdent', title: '指标分类', align: 'center',
templet: function (d) {
switch (d.kpi.kpiIdent) {
case '0':
return '基本指标';
case '1':
return '性能指标';
case '2':
return '状态指标';
case '3':
return '告警指标';
default:
return '';
}
}
}, {
title: '唯一标志', align: 'center',
templet: function (d) {
var radioDom = $('<form class="layui-form">' +
'<div class="layui-form-item layui-form-item-flex"><div class="layui-input-block input-flex-1"><input type="radio" data-index="' + d.LAY_TABLE_INDEX + '" name="isUnique" lay-filter="rdo-kpiflag-table-isUnique"></div></div>' +
'</form>');
if (d.isUnique === '1') {
radioDom.find('input[type="radio"]').attr('checked', true);
}
return radioDom.prop('outerHTML');
}
}, {
title: '是否排序指标', align: 'center',
templet: function (d) {
var selectDom = $('<select data-index="' + d.LAY_TABLE_INDEX + '" lay-filter="select-kpiflag-table-isSort">' +
'<option>是</option>' +
'<option>否</option>' +
'</select>')
if (d.sort != '' && d.sort != null) {
selectDom.find('option:contains("是")').attr('selected', 'selected');
} else {
selectDom.find('option:contains("否")').attr('selected', 'selected');
}
return selectDom.prop('outerHTML');
}
}, {
field: 'sort', title: '列表顺序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-kpiflag-table-sort-' + d.LAY_TABLE_INDEX + '" data-index="' + d.LAY_TABLE_INDEX + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">');
if (d.sort != '' && d.sort != null) {
inputDom.attr("value", d.sort);
} else {
inputDom.attr('disabled', true);
}
return inputDom.prop('outerHTML');
}
}, {
title: '操作',
align: 'center',
templet: '<div><span data-index="{{d.LAY_TABLE_INDEX}}" class="link link-kpiflag-delete">' +
'<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>'
}]],
done: function (res, curr, count) {
form.render();
// 是否排序下拉框改变事件
form.on('select(select-kpiflag-table-isSort)', function (data) {
var index = $(data.elem).data('index');
if (data.value === '是') {
$('#txt-kpiflag-table-sort-' + index).attr('disabled', false);
} else {
kpiFlagTableData[index].sort = '';
$('#txt-kpiflag-table-sort-' + index).val('');
$('#txt-kpiflag-table-sort-' + index).attr('disabled', true);
}
});
// radio选择事件
form.on('radio(rdo-kpiflag-table-isUnique)', function (data) {
for (var i = 0; i < kpiFlagTableData.length; i++) {
kpiFlagTableData[i].isUnique = '0';
}
kpiFlagTableData[$(data.elem).data('index')].isUnique = '1';
});
// 排序输入框输入事件
$('.txt-kpiflag-table-sort').change(function () {
kpiFlagTableData[$(this).data('index')].sort = $(this).val();
});
// 删除事件
$('.link-kpiflag-delete').click(function () {
kpiFlagTableData.splice($(this).data('index'), 1);
reloadKpiFlagTable();
});
}
$(".kpiflag-edit-table .layui-table-body,.kpiflag-edit-table .layui-table-box,.kpiflag-edit-table .layui-table-cell").css('overflow', 'visible');
// 排序下拉框改变事件
form.on('select(select-kpiflag-table-isSort)', function (data) {
var index = $(data.elem).data('index');
var defaultSort = 'none';
if (data.value === '正序') {
defaultSort = 'asc';
} else if (data.value === '倒序') {
defaultSort = 'desc';
}
kpiFlagTableData[index].defaultSort = defaultSort;
});
// 资源类型绑定表格
var resTypeBindTable = table.render({
elem: '#table-flag-bind-retype'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: resTypeTableData
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'resTypeName', title: '名称', align: 'center', sort: true, width: '280'
}, {
field: 'resTypeCode', title: '编码', align: 'center', sort: true, width: '390'
}, {
field: 'resTypeDesc', title: '类别', align: 'center', sort: true, width: '280'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '275'
}, {
title: '操作', align: 'center', fixed: 'right', width: '170',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-restype-delete').click(function () {
resTypeTableData.splice($(this).data('index'), 1);
reloadResTypeTable();
});
}
//唯一标志开关事件
form.on('switch(switchIsUnique)', function(data){
if (this.checked){
kpiFlagTableData[$(data.elem).data('index')].isUnique = '1';
}else{
kpiFlagTableData[$(data.elem).data('index')].isUnique = '0';
}
});
// 应用绑定表格
var appBindTable = table.render({
elem: '#table-flag-bind-app'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240'
}, {
field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193',
templet: function (d) {
return d.busType.busTypeName;
}
}, {
field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190'
}, {
title: '操作', align: 'center', fixed: 'right', width: '190',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-app-delete').click(function () {
appTableData.splice($(this).data('index'), 1);
reloadAppTable();
});
}
// 排序输入框输入事件
$('.txt-kpiflag-table-sort').change(function () {
kpiFlagTableData[$(this).data('index')].sort = $(this).val();
});
// 服务绑定表格
var serverBindTable = table.render({
elem: '#table-flag-bind-server'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190'
}, {
field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.busType.busTypeName;
}
}, {
field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.appName;
}
}, {
field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160'
}, {
title: '操作', align: 'center', fixed: 'right', width: '173',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-server-delete').click(function () {
serverTableData.splice($(this).data('index'), 1);
reloadServerTable();
});
}
// 删除事件
$('.link-kpiflag-delete').click(function () {
kpiFlagTableData.splice($(this).data('index'), 1);
reloadKpiFlagTable();
});
// 绑定资源类型
$('#btn-kpi-flag-restype-bind').click(function () {
//先关闭已经打开的资源类型页签
$('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click');
var resourcetype = layui.resourcetype();
common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () {
var checks = resourcetype.getResTypeChecks();
$.each(checks, function (index, value) {
var flag = true;
$.each(resTypeTableData, function (i, v) {
if (value.resTypeId === v.resTypeId) {
flag = false;
return;
}
});
if (flag) {
resTypeTableData.push(value);
}
});
reloadResTypeTable();
return true;
}, null, ['90%', '90%'])
}
});
// 资源类型绑定表格
var resTypeBindTable = table.render({
elem: '#table-flag-bind-retype'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: resTypeTableData
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'resTypeName', title: '名称', align: 'center', sort: true
}, {
field: 'resTypeCode', title: '编码', align: 'center', sort: true
}, {
field: 'resTypeDesc', title: '类别', align: 'center', sort: true
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true
}, {
title: '操作', align: 'center', fixed: 'right', width: '170',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-restype-delete').click(function () {
resTypeTableData.splice($(this).data('index'), 1);
reloadResTypeTable();
});
}
});
// 绑定应用
$('#btn-kpi-flag-app-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('application-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(appTableData, function (i, v) {
if (value.appId === v.appId) {
flag = false;
return;
}
});
if (flag) {
appTableData.push(value);
}
});
reloadAppTable();
return true;
}, null, ['1500px', '90%'])
// 应用绑定表格
var appBindTable = table.render({
elem: '#table-flag-bind-app'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240'
}, {
field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193',
templet: function (d) {
return d.busType.busTypeName;
}
}, {
field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190'
}, {
title: '操作', align: 'center', fixed: 'right', width: '190',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-app-delete').click(function () {
appTableData.splice($(this).data('index'), 1);
reloadAppTable();
});
}
});
// 服务绑定表格
var serverBindTable = table.render({
elem: '#table-flag-bind-server'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190'
}, {
field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.busType.busTypeName;
}
}, {
field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.appName;
}
}, {
field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160'
}, {
title: '操作', align: 'center', fixed: 'right', width: '173',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-server-delete').click(function () {
serverTableData.splice($(this).data('index'), 1);
reloadServerTable();
});
}
});
// 绑定服务
$('#btn-kpi-flag-server-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('server-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(serverTableData, function (i, v) {
if (value.serverId === v.serverId) {
flag = false;
return;
}
});
if (flag) {
serverTableData.push(value);
}
});
reloadServerTable();
return true;
}, null, ['1500px', '90%'])
// 绑定资源类型
$('#btn-kpi-flag-restype-bind').click(function () {
//先关闭已经打开的资源类型页签
$('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click');
var resourcetype = layui.resourcetype();
common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () {
var checks = resourcetype.getResTypeChecks();
$.each(checks, function (index, value) {
var flag = true;
$.each(resTypeTableData, function (i, v) {
if (value.resTypeId === v.resTypeId) {
flag = false;
return;
}
});
if (flag) {
// value.createUser = form.val('form-flag-edit').createUser;
// value.createTime = common.getToday('');
resTypeTableData.push(value);
}
});
reloadResTypeTable();
return true;
}, null, ['90%', '90%'])
});
// 绑定应用
$('#btn-kpi-flag-app-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('application-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(appTableData, function (i, v) {
if (value.appId === v.appId) {
flag = false;
return;
}
});
if (flag) {
appTableData.push(value);
}
});
reloadAppTable();
return true;
}, null, ['1500px', '90%'])
});
// 绑定服务
$('#btn-kpi-flag-server-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('server-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(serverTableData, function (i, v) {
if (value.serverId === v.serverId) {
flag = false;
return;
}
});
if (flag) {
serverTableData.push(value);
}
});
reloadServerTable();
return true;
}, null, ['1500px', '90%'])
});
// 刷新指标表格
function reloadKpiFlagTable() {
kpiflagTable.reload({
page: {curr: 1},
data: kpiFlagTableData
});
}
// 刷新指标表格
function reloadKpiFlagTable() {
kpiflagTable.reload({
page: {curr: 1},
data: kpiFlagTableData
});
}
// 刷新绑定资源类型表格
function reloadResTypeTable() {
$('#txt-flag-bind-resTypeCount').html(resTypeTableData.length);
resTypeBindTable.reload({
page: {curr: 1},
data: resTypeTableData
});
}
// 刷新绑定资源类型表格
function reloadResTypeTable() {
$('#txt-flag-bind-resTypeCount').html(resTypeTableData.length);
resTypeBindTable.reload({
page: {curr: 1},
data: resTypeTableData
});
}
// 刷新绑定应用表格
function reloadAppTable() {
$('#txt-flag-bind-appCount').html(appTableData.length);
appBindTable.reload({
page: {curr: 1},
data: appTableData
});
}
// 刷新绑定服务表格
function reloadServerTable() {
$('#txt-flag-bind-serverCount').html(serverTableData.length);
serverBindTable.reload({
page: {curr: 1},
data: serverTableData
});
}
// 刷新绑定应用表格
function reloadAppTable() {
$('#txt-flag-bind-appCount').html(appTableData.length);
appBindTable.reload({
page: {curr: 1},
data: appTableData
});
// 表单提交事件
form.on('submit(form-flag-edit)', function (data) {
loading = layer.load(2);
var flag = {
id: flagId,
flag: '',
name: '',
remark: '',
dimension: '',
kpiFlagList: kpiFlagTableData,
bindList: []
};
$.each(resTypeTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.resTypeId,
bindType: '1',
bindCode: v.resTypeCode
});
});
$.each(appTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.appId,
bindType: '2'
});
});
$.each(serverTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.serverId,
bindType: '3'
});
});
Object.assign(flag, form.val('form-flag-edit'));
admin.req({
url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(flag),
error: function () {
layer.close(loading);
}
// 刷新绑定服务表格
function reloadServerTable() {
$('#txt-flag-bind-serverCount').html(serverTableData.length);
serverBindTable.reload({
page: {curr: 1},
data: serverTableData
});
}).done(function (response) {
layer.close(loading);
if (response.success) {
layer.msg('保存成功', {icon: 1, timeout: 3000});
layer.closeAll('page');
table.reload('kpiflag_table', {
page: {
curr: 1
}
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
dimension: $('select[name="dimension"]').val()
}
});
} else {
layer.msg('保存失败', {icon: 2, timeout: 3000});
}
});
return false;
});
// 表单提交事件
form.on('submit(form-flag-edit)', function (data) {
loading = layer.load(2);
var flag = {
id: flagId,
flag: '',
name: '',
remark: '',
kpiFlagList: kpiFlagTableData,
bindList: []
};
$.each(resTypeTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.resTypeId,
bindType: '1'
});
});
$.each(appTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.appId,
bindType: '2'
});
});
$.each(serverTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.serverId,
bindType: '3'
});
});
Object.assign(flag, form.val('form-flag-edit'));
admin.req({
url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(flag),
error: function () {
layer.close(loading);
}
}).done(function (response) {
layer.close(loading);
if (response.success) {
layer.msg('保存成功', {icon: 1, timeout: 3000});
layer.closeAll('page');
table.reload('kpiflag_table', {
page: {
curr: 1
}
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
}
});
} else {
layer.msg('保存失败', {icon: 2, timeout: 3000});
// 选择指标
$('#btn-kpiflag-kpi-bind').click(function () {
$('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'kpiIndexChooseHtml',
type: 1,
area: ['90%', '800px'],
btn: ['确定', '取消'],
scrollbar: true,
success: function () {
view(this.id).render('/baseconfig/kpi/index', {});
},
yes: function (index, layero) {
var kpiIndex = layui.kpiIndex({});
var data = kpiIndex.getData();
if (data.length > 0) {
$.each(data, function (i, e) {
var flag = true;
$.each(kpiFlagTableData, function (j, k) {
if (e.kpiId == k.kpiId) {
flag = false;
}
});
if (flag == true) {
kpiFlagTableData.push({
id: '',
flagId: flagId,
kpiId: e.kpiId,
defaultSort: e.defaultSort,
kpi: {
kpiId: e.kpiId,
kpiName: e.kpiName,
kpiIdent: e.kpiIdent
},
isUnique: '0',
sort: i,
createUser: form.val('form-flag-edit').createUser,
createTime: common.getToday('')
});
}
});
layer.close(index);
reloadKpiFlagTable();
} else {
layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000})
return false;
});
// 选择指标
$('#btn-kpiflag-kpi-bind').click(function () {
$('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'kpiIndexChooseHtml',
type: 1,
area: ['90%', '800px'],
btn: ['确定', '取消'],
scrollbar: true,
success: function () {
view(this.id).render('/baseconfig/kpi/index', {});
},
yes: function (index, layero) {
var kpiIndex = layui.kpiIndex({});
var data = kpiIndex.getData();
if (data.length > 0) {
$.each(data, function (i, e) {
var flag = true;
$.each(kpiFlagTableData, function (j, k) {
if (e.kpiId == k.kpiId) {
flag = false;
}
});
if (flag == true) {
kpiFlagTableData.push({
id: '',
flagId: flagId,
kpiId: e.kpiId,
kpi: {
kpiId: e.kpiId,
kpiName: e.kpiName,
kpiIdent: e.kpiIdent
},
isUnique: '0',
sort: ''
});
}
});
layer.close(index);
reloadKpiFlagTable();
} else {
layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000})
return false;
}
}
});
form.render();
});
}
}
});
form.render();
});
});
});
});
\ No newline at end of file
... ...
... ... @@ -66,12 +66,13 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
{type: 'checkbox'}
, {field: 'index', title: '序号', align: 'center', type: 'numbers'}
, {
field: 'name', title: '名称', align: 'center', sort: true,
field: 'name', title: '名称', align: 'center', sort: true,width: 200,
templet: '<div>' +
'<span kpiflag-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span>' +
'</div>'
}
, {field: 'flag', title: '标识', align: 'center', sort: true}
, {field: 'flag', title: '标识', align: 'center', sort: true,width: 200}
, {field: 'describes', title: '指标组描述', align: 'left',width: 300}
, { field: 'dimension', title: '维度', align: 'center', width: 80, templet: `
<div>
{{#
... ... @@ -84,11 +85,11 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
</div>
`
}
, {field: 'kpis', title: '绑定指标', align: 'left'}
, {field: 'restypes', title: '绑定资源类型', align: 'left'}
, {field: 'kpis', title: '绑定指标', align: 'left',width: 500}
, {field: 'restypes', title: '绑定资源类型', align: 'left',width: 300}
, {field: 'createUser', title: '创建人',width: 100, align: 'center'}
, {field: 'createTime', title: '创建时间', align: 'center'}
, {field: 'remark', title: '备注', align: 'left'}
, {field: 'createTime', title: '创建时间', align: 'center',width: 180}
, {field: 'remark', title: '备注', align: 'left',width: 500}
, {
title: '操作',
align: 'center',
... ...
<article>
<form action="" class="layui-form layui-form-pane" lay-filter="form-flag-edit">
<fieldset class="layui-elem-field layui-field-title">
<legend>基本信息</legend>
</fieldset>
<div class="layui-form-item">
<div class="inline-half layui-inline ">
<label class="layui-form-label">编码</label>
<div class="layui-input-inline">
<input class="layui-input" lay-verify="required" name="flag" placeholder="请输入编码" type="text">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input class="layui-input" lay-verify="required" name="name" placeholder="请输入名称" required
type="text">
</div>
</div>
<form class="layui-form layui-form-pane" action="" lay-filter="form-flag-edit">
<fieldset class="layui-elem-field layui-field-title">
<legend>基本信息</legend>
</fieldset>
<div class="layui-form-item">
<div class="inline-half layui-inline ">
<label class="layui-form-label">编码<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="flag" lay-verify="required" placeholder="请输入编码" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">说明</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark" placeholder="请输入说明"></textarea>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">维度<span style="color: red">*</span></label>
<div class="layui-input-inline">
<select name="dimension" lay-verify="required" class="layui-select">
<option value="">=选择维度=</option>
<option value="1D">一维</option>
<option value="2D">二维</option>
</select>
</div>
<button class="hide" id="btn-kpiflag-submit" lay-filter="kpi-flag-submit" lay-submit>提交</button>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定指标&nbsp;&nbsp;
<button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i
class="layui-icon">&#xe624;</i></button>
</legend>
</fieldset>
<div class="layui-form-item layui-form-item-flex">
<table class="input-flex-1" id="kpiflag-edit-table"></table>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">名称<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required" placeholder="请输入名称" class="layui-input">
</div>
<div class="layui-form-item layui-form-item-flex hide">
<div class="layui-input-block input-flex-1">
<input name="chartType" title="列表" type="radio" value="">
<input name="chartType" title="折线图" type="radio" value="">
<input name="chartType" title="柱状图" type="radio" value="">
<input name="chartType" title="饼图" type="radio" value="">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">描述<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="describes" required lay-verify="required" placeholder="请输入名称" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i
class="layui-icon">&#xe654;</i>绑定到资源类型
</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i
class="layui-icon">&#xe654;</i>绑定到应用
</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i
class="layui-icon">&#xe654;</i>绑定到服务
</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">创建人<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="createUser" required lay-verify="required" placeholder="请输入创建人" class="layui-input">
</div>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定信息</legend>
</fieldset>
<div class="layui-collapse" id="div-flag-bind">
<div class="layui-colla-item flex-1">
<h2 class="layui-colla-title">绑定的资源类型&nbsp;&nbsp;数量:<span id="txt-flag-bind-resTypeCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-retype"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的应用&nbsp;&nbsp;数量:<span id="txt-flag-bind-appCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-app"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的服务&nbsp;&nbsp;数量:<span id="txt-flag-bind-serverCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-server"></table>
</div>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">创建时间</label>
<div class="layui-input-inline">
<input type="text" name="createTime" required lay-verify="required" disabled placeholder="请输入创建人" class="layui-input">
</div>
</form>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">说明</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入说明" class="layui-textarea"></textarea>
</div>
</div>
<button id="btn-kpiflag-submit" class="hide" lay-submit lay-filter="kpi-flag-submit">提交</button>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定指标&nbsp;&nbsp;
<button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i class="layui-icon">&#xe624;</i></button>
</legend>
</fieldset>
<div class="layui-form-item layui-form-item-flex kpiflag-edit-table">
<table id="kpiflag-edit-table" class="input-flex-1"></table>
</div>
<div class="layui-form-item layui-form-item-flex hide">
<div class="layui-input-block input-flex-1">
<input type="radio" name="chartType" value="" title="列表">
<input type="radio" name="chartType" value="" title="折线图">
<input type="radio" name="chartType" value="" title="柱状图">
<input type="radio" name="chartType" value="" title="饼图">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i class="layui-icon">&#xe654;</i>绑定到资源类型</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i class="layui-icon">&#xe654;</i>绑定到应用</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i class="layui-icon">&#xe654;</i>绑定到服务</button>
</div>
</div>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定信息</legend>
</fieldset>
<div class="layui-collapse" id="div-flag-bind">
<div class="layui-colla-item flex-1">
<h2 class="layui-colla-title">绑定的资源类型&nbsp;&nbsp;数量:<span id="txt-flag-bind-resTypeCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-retype"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的应用&nbsp;&nbsp;数量:<span id="txt-flag-bind-appCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-app"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的服务&nbsp;&nbsp;数量:<span id="txt-flag-bind-serverCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-server"></table>
</div>
</div>
</div>
</form>
</article>
<script>
layui.use('kpiflagEdit', function (fn) {
fn({{ d }});
});
</script>
layui.use('kpiflagEdit', function (fn) {
fn({{d}});
});
</script>
\ No newline at end of file
... ...
... ... @@ -5,16 +5,23 @@
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status">
<form class="layui-form layui-card-header layuiadmin-card-header-auto"
lay-filter="kpiflag-form">
<form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="kpiflag-form">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input autocomplete="off" class="layui-input" id="kpiflag_keyword"
lay-tips="关键字检索包含: </br>指标组名称" name="kpiflag_keyword"
placeholder="输入关键字,回车搜索"
type="text">
<input style="display: none" type="text">
<input type="text" id="kpiflag_keyword" name="kpiflag_keyword" placeholder="输入关键字,回车搜索" autocomplete="off"
lay-tips="关键字检索包含: </br>指标组名称</br>flag</br>备注</br>绑定资源类型</br>绑定指标"
class="layui-input">
<input type="text" style="display: none">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<select name="dimension" class="layui-select" lay-filter="change">
<option value="">=选择维度=</option>
<option value="1D">一维</option>
<option value="2D">二维</option>
</select>
</div>
</div>
<button class="layui-btn layui-btn-normal" id="kpiflagQueryBtn" type="button">
... ... @@ -27,12 +34,8 @@
</div>
<div class="layui-card-body">
<div class="warn-btns">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="addkpiflag" type="button"><i
class="layui-icon">&#xe654;</i>新增
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="delkpiflag" type="button"><i
class="layui-icon">&#xe640;</i>删除
</button>
<button id="addkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe654;</i>新增</button>
<button id="delkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe640;</i>删除</button>
</div>
<table id="kpiflag_table"></table>
</div>
... ... @@ -45,4 +48,4 @@
layui.use('kpiflagIndex', function (fn) {
fn();
});
</script>
</script>
\ No newline at end of file
... ...