monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 019f3cfe92e8c1b9c241310c5cd4aac49117eee2 1 parent c5d1e1ae

杭州-乙方运维-配置页面优化

Inline Side-by-side
Showing 4 changed files with 421 additions and 1 deletions
@@ -161,7 +161,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se @@ -161,7 +161,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
161 '<button data-id="' + d.busId + '" lay-tips="删除" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-delete"><i class="layui-icon layui-icon-delete"></i></button>' + 161 '<button data-id="' + d.busId + '" lay-tips="删除" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-delete"><i class="layui-icon layui-icon-delete"></i></button>' +
162 '<button data-id="' + d.busId + '" lay-tips="资源分配" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-res-config"><i class="layui-icon layui-icon-menu-fill"></i></button>' + 162 '<button data-id="' + d.busId + '" lay-tips="资源分配" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-res-config"><i class="layui-icon layui-icon-menu-fill"></i></button>' +
163 '<button data-id="' + d.busId + '" lay-tips="授权" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-authorize"><i class="layui-icon layui-icon-auz"></i></button>' + 163 '<button data-id="' + d.busId + '" lay-tips="授权" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-authorize"><i class="layui-icon layui-icon-auz"></i></button>' +
164 - '<button data-id="' + d.busId + '" data-code="'+ d.busTypeCode +'" lay-tips="乙方运维配置" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-yf-config"><i class="layui-icon layui-icon-set-fill"></i></button>' + 164 + // '<button data-id="' + d.busId + '" data-code="'+ d.busTypeCode +'" lay-tips="乙方运维配置" type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-bustype-yf-config"><i class="layui-icon layui-icon-set-fill"></i></button>' +
165 '</div>' 165 '</div>'
166 } else { 166 } else {
167 return '' + 167 return '' +
  1 +// 业务类型管理
  2 +layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'sessions', 'commonDetail', 'treeTable', 'xmSelect', 'userlist', 'reslist'], function (exports) {
  3 + var $ = layui.$;
  4 + var form = layui.form;
  5 + var layer = layui.layer;
  6 + var admin = layui.admin;
  7 + var table = layui.table;
  8 + var treeTable = layui.treeTable;
  9 + var xmSelect = layui.xmSelect;
  10 + var laytpl = layui.laytpl;
  11 + var view = layui.view;
  12 + var common = layui.common;
  13 + var commonDetail = layui.commonDetail;
  14 + var domainName = common.domainName;
  15 +
  16 + // 对外暴露的接口
  17 + exports('bustypeAdd', function (data) {
  18 + var sessions = layui.sessions;
  19 + var accessToken = sessions.getToken()['access_token'];
  20 + var userSelect = {}
  21 + var opsSelect={}
  22 + initUserSelect();
  23 + //渲染运维负责人
  24 + initUserSelectOps();
  25 + // 加载遮罩
  26 + var loading;
  27 +
  28 +
  29 + var oldBusTypeCode = data && data.busTypeCode ? data.busTypeCode : '';
  30 +
  31 + var busType;
  32 +
  33 + // 父业务下拉框
  34 + admin.req({
  35 + url: domainName + '/api-web/manage/bustype/page',
  36 + data: {
  37 + page: -1,
  38 + limit: -1,
  39 + parentId: '0'
  40 + }
  41 + }).done(function (response) {
  42 + var options = '';
  43 + $.each(response.data, function (i, v) {
  44 + options += ' <option value="' + v.busId + '">' + v.busTypeName + '</option> '
  45 + });
  46 + $('select[name="parentId"]').append(options);
  47 +
  48 + // 如果是新增，就对busType进行初始化
  49 + if (!oldBusTypeCode) {
  50 + busType = {
  51 + busTypeCode: '',
  52 + busTypeName: '',
  53 + busTypeDesc: '',
  54 + admin: '',
  55 + isUse: '',
  56 + important: '',
  57 + sort: '',
  58 + isLeaf: '1'
  59 + }
  60 + form.render();
  61 + } else {
  62 + // 如果是编辑模式，回写数据
  63 + admin.req({
  64 + url: domainName + '/api-web/manage/bustype/page',
  65 + data: {
  66 + page: 1,
  67 + limit: 10,
  68 + busTypeCode: oldBusTypeCode
  69 + }
  70 + }).done(function (response) {
  71 + busType = response.data[0];
  72 + form.val('form-bustype-edit', busType);
  73 + $('form[lay-filter="form-bustype-edit"] input[name="busTypeCode"]').attr('readonly', true);
  74 + userSelect.setValue([busType.admin]);
  75 + opsSelect.setValue(busType.principal.split(","));
  76 + form.render();
  77 + });
  78 + }
  79 + });
  80 + // 业务类型编号改变判断是否已经存在
  81 + $('#txt-bustype-code').change(function () {
  82 + if (checkBusTypeCodeExist($(this).val())) {
  83 + $(this).val(oldBusTypeCode);
  84 + layer.msg('该编码已存在，请重新输入!', {icon: 2, time: 3000});
  85 + }
  86 + });
  87 + //设置乙方运维项目
  88 + form.on('switch(system_type)', function (obj) {
  89 + //sign=fale 不是乙方运维项目 sign=true 是乙方运维项目
  90 + var sign = obj.elem.checked;
  91 + if(!sign){//不是乙方运维
  92 + $('#select_principalName').addClass("hide");
  93 + opsSelect.setValue([]);
  94 + layui.jquery('input[name="isvirtual"]').removeAttr('checked'); //改变开关为 关
  95 + //重新渲染
  96 + form.render();
  97 + }else{//是乙方运维
  98 + $('#select_principalName').removeClass('hide');
  99 + //渲染下拉框
  100 + initUserSelectOps();
  101 + }
  102 + });
  103 +
  104 +
  105 + // 绑定表单提交事件
  106 + form.on('submit(bus-type-submit)', function (data) {
  107 + loading = layer.load(2);
  108 + busType = Object.assign(busType, data.field);
  109 + //是否启用
  110 + if (!data.field.isUse) {
  111 + busType.isUse = '0'
  112 + }
  113 + //是否是乙方运维
  114 + if (!data.field.system_type) {
  115 + busType.system_type = '0'
  116 + }
  117 + //是否是虚拟业务
  118 + if (!data.field.isvirtual) {
  119 + busType.isvirtual = '1'
  120 + }
  121 + if (busType.parentId == busType.busId) {
  122 + // 防止循环引用
  123 + busType.parentId = '0';
  124 + }
  125 + //获取业务负责人信息
  126 + userSelect.getValue("")
  127 + busType.nickname = userSelect.getValue("name")[0];
  128 + busType.admin = userSelect.getValue("value")[0];
  129 + //获取业务运维负责人
  130 + busType.principalName = opsSelect.getValue("nameStr");
  131 + busType.principal = opsSelect.getValue("valueStr");
  132 + delete busType.select
  133 + admin.req({
  134 + url: domainName + '/api-web/manage/bustype/save?access_token=' + accessToken,
  135 + type: 'POST',
  136 + contentType: 'application/json',
  137 + data: JSON.stringify(busType),
  138 + error: function () {
  139 + layer.close(loading);
  140 + }
  141 + }).done(function (response) {
  142 + layer.close(loading);
  143 + if (response.success) {
  144 + layer.msg('保存成功!', {icon: 1, time: 3000});
  145 + layer.closeAll('page');
  146 + $('#btn-bustype-reload-table').click();
  147 + } else {
  148 + layer.msg('保存失败!', {icon: 2, time: 3000});
  149 + }
  150 + });
  151 + return false;
  152 + });
  153 +
  154 +
  155 + /**
  156 + * 判断该业务类型编号是否已经存在
  157 + *
  158 + * @param busTypeCode 业务类型编号
  159 + * @returns {boolean} 存在: true，不存在: false
  160 + */
  161 + function checkBusTypeCodeExist(busTypeCode) {
  162 + var result = true;
  163 + admin.req({
  164 + url: domainName + '/api-web/manage/bustype/page',
  165 + async: false,
  166 + data: {
  167 + page: 1,
  168 + limit: 10,
  169 + busTypeCode: busTypeCode
  170 + }
  171 + }).done(function (response) {
  172 + if (response.data.length === 0) {
  173 + result = false;
  174 + }
  175 + });
  176 + return result;
  177 + }
  178 +
  179 + //初始化用户下拉列表框
  180 + function initUserSelect() {
  181 + $.ajax({
  182 + url: domainName + '/api-user/users/getAll?access_token=' + accessToken,
  183 + success: function (res) {
  184 + userSelect = xmSelect.render({
  185 + el: '.adminUser',
  186 + radio: true,
  187 + clickClose: true,
  188 + prop: {
  189 + name: 'nickname',
  190 + value: 'username'
  191 + },
  192 + filterable: true,
  193 + layVerify: 'required',
  194 + layVerType: 'msg',
  195 + data: res,
  196 + })
  197 + }
  198 + })
  199 + }
  200 +
  201 + //初始化用户下拉列表框
  202 + function initUserSelectOps() {
  203 + $.ajax({
  204 + url: domainName + '/api-user/users/getAll?access_token=' + accessToken,
  205 + success: function (res) {
  206 + opsSelect = xmSelect.render({
  207 + el: '#opsProject-username-select',
  208 + prop: {
  209 + name: 'nickname',
  210 + value: 'username'
  211 + },
  212 + data: res,
  213 + })
  214 + }
  215 + })
  216 + }
  217 +
  218 + });
  219 +});
  1 +<!--新增/编辑弹出框-->
  2 +<article>
  3 + <div class="layui-card">
  4 + <form class="layui-form form-edit layui-form-pane" action="" lay-filter="form-bustype-edit">
  5 + <div class="layui-form-item">
  6 + <label class="layui-form-label">父业务<span style="color: red">*</span></label>
  7 + <div class="layui-input-block">
  8 + <select name="parentId" class="layui-select" lay-verify="required">
  9 + <option value="0" selected>root</option>
  10 + </select>
  11 + </div>
  12 + </div>
  13 + <div class="layui-form-item">
  14 + <label class="layui-form-label">编码<span style="color: red">*</span></label>
  15 + <div class="layui-input-block">
  16 + <input type="text" id="txt-bustype-code" name="busTypeCode" lay-verify="required" placeholder="请输入编码" class="layui-input">
  17 + </div>
  18 + </div>
  19 + <div class="layui-form-item">
  20 + <label class="layui-form-label">名称<span style="color: red">*</span></label>
  21 + <div class="layui-input-block">
  22 + <input type="text" id="txt-bustype-name" name="busTypeName" lay-verify="required" placeholder="请输入名称" class="layui-input">
  23 + </div>
  24 + </div>
  25 +<!-- <div class="layui-form-item">-->
  26 +<!-- <label class="layui-form-label">负责人</label>-->
  27 +<!-- <div class="layui-input-block">-->
  28 +<!-- <input type="text" id="txt-bustype-admin" name="admin" lay-verify="required" placeholder="请输入负责人" class="layui-input">-->
  29 +<!-- </div>-->
  30 +<!-- </div>-->
  31 + <div class="layui-form-item">
  32 + <label class="layui-form-label">负责人<span style="color: red">*</span></label>
  33 + <div class="layui-input-block adminUser">
  34 + </div>
  35 + </div>
  36 +<!-- <div class="layui-form-item">-->
  37 +<!-- <label class="layui-form-label">负责人电话</label>-->
  38 +<!-- <div class="layui-input-block">-->
  39 +<!-- <input type="text" id="txt-bustype-admintel" name="adminTel" lay-verify="required|phone" placeholder="请输入负责人电话" class="layui-input">-->
  40 +<!-- </div>-->
  41 +<!-- </div>-->
  42 + <div class="layui-form-item">
  43 + <label class="layui-form-label">是否使用<span style="color: red">*</span></label>
  44 + <div class="layui-input-block">
  45 + <input type="checkbox" lay-skin="switch" name="isUse" value="1" lay-text="是|否" checked/>
  46 + </div>
  47 + </div>
  48 + <div class="layui-form-item">
  49 + <label class="layui-form-label">重要程度<span style="color: red">*</span></label>
  50 + <div class="layui-input-block">
  51 + <select name="important" class="layui-select" lay-verify="required">
  52 + <option value="1">核心</option>
  53 + <option value="2">重要</option>
  54 + <option value="3">一般</option>
  55 + <option value="9">虚拟业务</option>
  56 + </select>
  57 + </div>
  58 + </div>
  59 + <div class="layui-form-item">
  60 + <label class="layui-form-label">排序<span style="color: red">*</span></label>
  61 + <div class="layui-input-block">
  62 + <input type="number" placeholder="请输入排序" name="sort" class="layui-input" lay-verify="required">
  63 + </div>
  64 + </div>
  65 + <div class="layui-form-item">
  66 + <label class="layui-form-label textarea-label">描述</label>
  67 + <div class="layui-input-block">
  68 + <textarea name="busTypeDesc" placeholder="请输入业务类型描述" class="layui-textarea"></textarea>
  69 + </div>
  70 + </div>
  71 + <div class="layui-form-item">
  72 + <label class="layui-form-label">乙方运维<span style="color: red">*</span></label>
  73 + <div class="layui-input-block">
  74 + <input type="checkbox" lay-skin="switch" name="system_type" value="1" lay-filter="system_type" lay-text="是|否" checked/>
  75 + </div>
  76 + </div>
  77 + <div class="layui-form-item" id="select_principalName">
  78 + <label class="layui-form-label">运维负责人：</label>
  79 + <div class="layui-input-block">
  80 + <div id="opsProject-username-select" name="principalName"></div>
  81 + </div>
  82 + </div>
  83 + <div class="layui-form-item">
  84 + <label class="layui-form-label">虚拟业务<span style="color: red">*</span></label>
  85 + <div class="layui-input-block">
  86 + <input type="checkbox" lay-skin="switch" name="isvirtual" lay-filter="switch_isVirtual" value="0" lay-text="是|否" checked/>
  87 + </div>
  88 + </div>
  89 + <button id="btn-bustype-submit" class="hide" lay-submit lay-filter="bus-type-submit">提交</button>
  90 + </form>
  91 + </div>
  92 +</article>
  93 +<script>
  94 + layui.use('bustypeAdd', function (fn) {
  95 + fn({{d}});
  96 + });
  97 +</script>
  1 +<title>业务类型管理</title>
  2 +<article class="page-container">
  3 + <div class="page-panel">
  4 + <div class="main">
  5 + <div class="layui-card">
  6 + <div class="layui-card-header">
  7 + <div class="layui-status">
  8 + <form class="layui-card-header layuiadmin-card-header-auto layui-form" lay-filter="bustype-query-form">
  9 + <div class="layui-form-item">
  10 + <div class="layui-inline">
  11 + <div class="layui-input-inline layui-input-inline--long">
  12 + <input type="text" id="condition-bustype-name" lay-tips="关键字检索包含 </br>业务名称" placeholder="输入关键字，回车搜索" autocomplete="off" class="layui-input">
  13 + </div>
  14 + </div>
  15 + <div class="layui-inline">
  16 + <button id="bustypeQueryBtn" type="button" class="layui-btn layui-btn-normal" ><i
  17 + class="layui-icon layui-icon-search"></i>查询
  18 + </button>
  19 + </div>
  20 + </div>
  21 + </form>
  22 + </div>
  23 + </div>
  24 + <div class="layui-card-body">
  25 + <div class="warn-btns">
  26 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="bustype-create">
  27 + <i class="layui-icon">&#xe654;</i>新增
  28 + </button>
  29 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-bustype-delete">
  30 + <i class="layui-icon">&#xe640;</i>删除
  31 + </button>
  32 + <button class="layui-btn layui-btn-sm layui-btn-normal hide" id="btn-bustype-authorization">
  33 + <i class="layui-icon">&#xe672;</i>授权
  34 + </button>
  35 + <button class="layui-btn layui-btn-sm layui-btn-normal hide" id="btn-bustype-reload-table">
  36 + <i class="layui-icon">&#xe654;</i>刷新表格
  37 + </button>
  38 + <span class="auto-flush" id="span-bustype-total">共 0 个业务</span>
  39 + </div>
  40 + <table id="bustype-table" lay-filter="bustypetable"></table>
  41 + </div>
  42 + </div>
  43 + </div>
  44 + </div>
  45 +</article>
  46 +
  47 +<script type="text/html" id="bustype-reslist-table">
  48 + <div class="page-panel">
  49 + <div class="main">
  50 + <div class="layui-card">
  51 + <div class="layui-card-header">
  52 + <div class="layui-status">
  53 + <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="bustype-res-list-query-form">
  54 + <div class="layui-form-item">
  55 + <div class="layui-inline">
  56 + <div class="layui-input-inline layui-input-inline--long">
  57 + <input id="bustype_reslist_keyword" type="text" name="title" placeholder="输入关键字，回车搜索" class="layui-input">
  58 + </div>
  59 + </div>
  60 + <div class="layui-inline">
  61 + <div class="layui-input-inline">
  62 + <select name="bustype_reslist_restype" id="bustype_reslist_restype" lay-filter="bustype_reslist_restype">
  63 + <option value="">=资源类型=</option>
  64 + </select>
  65 + </div>
  66 + </div>
  67 +
  68 + <div class="layui-inline">
  69 + <div class="layui-input-inline">
  70 + <select name="bustype_reslist_resStatus" id="bustype_reslist_resStatus" lay-filter="bustype_reslist_resStatus" lay-verify="required">
  71 + <option value="">=资源状态=</option>
  72 + <option value="1">中</option>
  73 + <option value="2">良</option>
  74 + <option value="3">优</option>
  75 + </select>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </form>
  80 + </div>
  81 + </div>
  82 + <div class="layui-card-body">
  83 + <div class="warn-btns bustype-btns">
  84 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="bustype-reslist-add">
  85 + <i class="layui-icon">&#xe654;</i>添加绑定
  86 + </button>
  87 + <button class="layui-btn layui-btn-sm layui-btn-normal" id="bustype-reslist-unbind">
  88 + <i class="layui-icon">&#xe64d;</i>取消绑定
  89 + </button>
  90 + </div>
  91 + <table id="bustype_reslist_resListTable"></table>
  92 + </div>
  93 + </div>
  94 + </div>
  95 + </div>
  96 +</script>
  97 +<script template lay-done="layui.data.sendParams(d.params)"></script>
  98 +<script>
  99 + layui.data.sendParams = function (params) {
  100 + layui.use('bustype', function (fn) {
  101 + fn(params);
  102 + });
  103 + };
  104 +</script>