From 42d63461da172f33fedc794359e9bef3646417df Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 26 一月 2021 14:42:36 +0800 Subject: [PATCH] # --- src/main/webapp/views/tag/tag.html | 284 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 256 insertions(+), 28 deletions(-) diff --git a/src/main/webapp/views/tag/tag.html b/src/main/webapp/views/tag/tag.html index bec2702..b524dbb 100644 --- a/src/main/webapp/views/tag/tag.html +++ b/src/main/webapp/views/tag/tag.html @@ -8,55 +8,283 @@ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> <link rel="stylesheet" href="../../static/css/cool.css" media="all"> - <link rel="stylesheet" href="../../static/css/common.css" media="all"> + <link rel="stylesheet" href="../../static/css/admin.css" media="all"> <style> - .layui-btn { - color: #fff; + #detail { + padding: 25px 30px 0 0; } </style> </head> <body> -<!-- 鎼滅储鏍� --> -<div id="search-box" class="layui-form layui-card-header"> - <div class="layui-inline"> - <div class="layui-input-inline"> - <input class="layui-input" type="text" name="uuid" placeholder="缂栧彿" autocomplete="off"> +<!-- 姝f枃寮�濮� --> +<div class="layui-fluid"> + <div class="layui-card"> + <div class="layui-card-body"> + <!-- 鏁版嵁琛ㄦ牸 --> + <table id="tag"></table> </div> </div> - - <!-- 寰呮坊鍔� --> - <div id="data-search-btn" class="layui-btn-container layui-form-item"> - <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">鎼滅储</button> - <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">閲嶇疆</button> - </div> </div> - -<!-- 琛ㄦ牸 --> -<div class="layui-form"> - <table class="layui-hide" id="tag" lay-filter="tag"></table> -</div> -<script type="text/html" id="toolbar"> - <div class="layui-btn-container"> - <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">鏂板</button> - <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">鍒犻櫎</button> - <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">瀵煎嚭</button> - </div> -</script> <script type="text/html" id="operate"> <a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">淇敼</a> <a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">鍒犻櫎</a> </script> +<!-- 琛ㄥ崟寮圭獥 --> +<script type="text/html" id="editDialog"> + <form id="detail" class="layui-form"> + <input id="id" type="hidden"> + <input id="uuid" type="hidden"> + <input id="path" type="hidden"> + <input id="pathName" type="hidden"> + <input id="img" type="hidden"> + <input id="brief" type="hidden"> + <input id="level" type="hidden"> + <input id="count" type="hidden"> + <input id="createTime$" type="hidden"> + <input id="createBy" type="hidden"> + <input id="updateTime$" type="hidden"> + <input id="updateBy" type="hidden"> + <div class="layui-row"> + + <div class="layui-col-md6"> + + <div class="layui-form-item"> + <label class="layui-form-label">涓婄骇鑿滃崟</label> + <div class="layui-input-block"> + <div id="tagParentSel" class="ew-xmselect-tree"></div> + </div> + </div> + + <div class="layui-form-item"> + <label class="layui-form-label layui-form-required">褰掔被鍚嶇О</label> + <div class="layui-input-block"> + <input id="name" placeholder="璇疯緭鍏ュ綊绫诲悕绉�" class="layui-input" lay-vertype="tips" lay-verify="required" required=""> + </div> + </div> + + <div class="layui-form-item"> + <label class="layui-form-label">璐熻矗浜�</label> + <div class="layui-input-block"> + <input id="leading" placeholder="璇疯緭鍏ヨ礋璐d汉" class="layui-input" lay-vertype="tips" lay-verify="required" required=""> + </div> + </div> + + </div> + + <div class="layui-col-md6"> + + <div class="layui-form-item"> + <label class="layui-form-label">绫诲瀷</label> + <div class="layui-input-block"> + <select id="type"> + <option value="">璇烽�夋嫨绫诲瀷</option> + <option value="1">鐩掕</option> + <option value="2">琚嬭</option> + <option value="0">鍏朵粬</option> + </select> + </div> + </div> + + <div class="layui-form-item"> + <label class="layui-form-label">鐘舵��</label> + <div class="layui-input-block"> + <select id="status"> + <option value="" style="display: none"></option> + <option value="1">姝e父</option> + <option value="0">绂佺敤</option> + </select> + </div> + </div> + + <div class="layui-form-item"> + <label class="layui-form-label">鎺掑簭</label> + <div class="layui-input-block"> + <input id="sort" placeholder="璇疯緭鍏ユ帓搴�" class="layui-input" lay-vertype="tips" lay-verify="required" required=""> + </div> + </div> + + <div class="layui-form-item"> + <label class="layui-form-label">澶囨敞</label> + <div class="layui-input-block"> + <input id="memo" placeholder="璇疯緭鍏ュ娉�" class="layui-input" lay-vertype="tips" lay-verify="required" required=""> + </div> + </div> + + </div> + </div> + <hr class="layui-bg-gray"> + <div class="layui-form-item text-right"> + <button class="layui-btn" lay-filter="authoritiesEditSubmit" lay-submit="">淇濆瓨</button> + <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">鍙栨秷</button> + </div> + </form> +</script> + <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> -<script type="text/javascript" src="../../static/js/tag/tag.js" charset="utf-8"></script> -<iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe> +<script> + layui.config({ + base: baseUrl + "/static/layui/lay/modules/" + }).use(['form','treeTable', 'admin', 'xmSelect'], function() { + var $ = layui.jquery; + var layer = layui.layer; + var form = layui.form; + var admin = layui.admin; + var treeTable = layui.treeTable; + var xmSelect = layui.xmSelect; + var tbDataList = []; + var insTb = treeTable.render({ + elem: '#tag', + url: baseUrl+'/tag/list/auth', + headers: {token: localStorage.getItem('token')}, + height: 'full-200', + toolbar: ['<p>', + '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>娣诲姞</button> ', + '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>鍒犻櫎</button>', + '</p>'].join(''), + tree: { + iconIndex: 1, // 鎶樺彔鍥炬爣鏄剧ず鍦ㄧ鍑犲垪 + isPidData: true, // 鏄惁鏄痠d銆乸id褰㈠紡鏁版嵁 + idName: 'id', // id瀛楁鍚嶇О + pidName: 'parentId' // pid瀛楁鍚嶇О + }, + cols: [[ + {type: 'checkbox'} + ,{field: 'name', align: 'left',title: '鍚嶇О', minWidth: 150} + ,{field: 'uuid', align: 'center',title: '缂栧彿'} + // ,{field: 'parentId', align: 'center',title: '鐖剁骇'} + ,{field: 'parentName', align: 'center',title: '鐖剁骇鍚嶇О'} + // ,{field: 'path', align: 'center',title: '鍏宠仈璺緞'} + // ,{field: 'pathName', align: 'center',title: '鍏宠仈璺緞鍚�'} + ,{field: 'type$', align: 'center',title: '绫诲瀷'} + ,{field: 'leading', align: 'center',title: '璐熻矗浜�'} + ,{field: 'img', align: 'center',title: '鍥剧墖'} + // ,{field: 'brief', align: 'center',title: '绠�瑕佹弿杩�'} + ,{field: 'count', align: 'center',title: '鏁伴噺'} + ,{field: 'sort', align: 'center',title: '鎺掑簭'} + ,{field: 'status$', align: 'center',title: '鐘舵��'} + ,{field: 'updateTime$', align: 'center',title: '淇敼鏃堕棿'} + ,{field: 'updateBy$', align: 'center',title: '淇敼浜哄憳', hide: true} + ,{field: 'memo', align: 'center',title: '澶囨敞', hide: true} + + ,{fixed: 'right', title:'鎿嶄綔', align: 'center', toolbar: '#operate', width:150} + ]], + done: function (data) { + insTb.expandAll(); + tbDataList = data; + } + }); + + /* 琛ㄦ牸鎿嶄綔鍒楃偣鍑讳簨浠� */ + treeTable.on('tool(tag)', function (obj) { + if (obj.event === 'edit') { // 淇敼 + showEditModel(obj.data); + } else if (obj.event === 'del') { // 鍒犻櫎 + doDel(obj); + } + }); + + /* 琛ㄦ牸澶村伐鍏锋爮鐐瑰嚮浜嬩欢 */ + treeTable.on('toolbar(tag)', function (obj) { + if (obj.event === 'add') { // 娣诲姞 + showEditModel(); + } else if (obj.event === 'del') { // 鍒犻櫎 + var checkRows = insTb.checkStatus(); + if (checkRows.length === 0) { + layer.msg('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁', {icon: 2}); + return; + } + var ids = checkRows.map(function (d) { + return d.authorityId; + }); + doDel({ids: ids}); + } + }); + + /* 鏄剧ず琛ㄥ崟寮圭獥 */ + function showEditModel(mData) { + layer.open({ + type: 1, + area: '600px', + offset: '100px', + title: (mData ? '淇敼' : '娣诲姞') + '鏉冮檺', + content: $('#editDialog').html(), + skin: 'layui-cool-class', + success: function (layero, dIndex) { + // 鍥炴樉琛ㄥ崟鏁版嵁 + form.val('detail', mData); + // 琛ㄥ崟鎻愪氦浜嬩欢 + form.on('submit(authoritiesEditSubmit)', function (data) { + data.field.parentId = insXmSel.getValue('valueStr'); + var loadIndex = layer.load(2); + $.get(mData ? '../../json/ok.json' : '../../json/ok.json', data.field, function (res) { + layer.close(loadIndex); + if (res.code === 200) { + layer.close(dIndex); + layer.msg(res.msg, {icon: 1}); + insTb.refresh(); + } else { + layer.msg(res.msg, {icon: 2}); + } + }, 'json'); + return false; + }); + // 娓叉煋涓嬫媺鏍� + var insXmSel = xmSelect.render({ + el: '#tagParentSel', + height: '250px', + data: insTb.options.data, + initValue: mData ? [mData.parentId] : [], + model: {label: {type: 'text'}}, + prop: { + name: 'name', + value: 'id' + }, + radio: true, + clickClose: true, + tree: { + show: true, + indent: 15, + strict: false, + expandedKeys: true + } + }); + // 寮圭獥涓嶅嚭鐜版粴鍔ㄦ潯 + $(layero).children('.layui-layer-content').css('overflow', 'visible'); + layui.form.render('select'); + } + }); + } + + /* 鍒犻櫎 */ + function doDel(obj) { + layer.confirm('纭畾瑕佸垹闄ら�変腑鏁版嵁鍚楋紵', { + skin: 'layui-layer-admin', + shade: .1 + }, function (i) { + layer.close(i); + var loadIndex = layer.load(2); + $.get('../../json/ok.json', {id: obj.data ? obj.data.authorityId : obj.ids}, function (res) { + layer.close(loadIndex); + if (res.code === 200) { + layer.msg(res.msg, {icon: 1}); + insTb.refresh(); + } else { + layer.msg(res.msg, {icon: 2}); + } + }, 'json'); + }); + } + + }); +</script> </body> </html> -- Gitblit v1.9.1