@{ ViewData["Title"] = "IPList"; Layout = "~/Views/Shared/_Layout_layui.cshtml"; } @section Css { } <div class="demoTable layui-form" style="padding: 10px; background-color: #D4E7F0; "> <div class="layui-inline"> <select name="Floor" id="sel_Floor" lay-verify="required" lay-filter="Floor" lay-search> <option value="">Select Floor</option> </select> </div> <div class="layui-input-inline"> <select name="IP" id="sel_IP" lay-verify="required" lay-filter="IP" lay-search> <option value="">Select IP Segment</option> </select> </div> <div class="layui-input-inline"> <select id="sel_SearchType" lay-verify="required" lay-filter="SearchType" lay-search> <option value="">Search Type</option> <option value="UserName">UserName</option> <option value="AssgnName">AssgnName</option> <option value="IPAddress">IPAddress</option> <option value="MacAddress">MacAddress</option> <option value="NodeName">NodeName</option> </select> </div> <div class="layui-inline"> <input type="text" id="txt_SearchVal" name="SearchVal" required lay-verify="required" placeholder="Search Keywords" autocomplete="off" class="layui-input"> </div> @*<div class="layui-inline"> <input type="text" id="AssgnName" name="AssgnName" required lay-verify="required" placeholder="Assgn Name" autocomplete="off" class="layui-input"> </div> <div class="layui-inline"> <input type="text" id="IPAddress" name="IPAddress" required lay-verify="required" placeholder="IP Address" autocomplete="off" class="layui-input"> </div> <div class="layui-inline"> <input type="text" id="MacAddress" name="MacAddress" required lay-verify="required" placeholder="Mac Address" autocomplete="off" class="layui-input"> </div> <div class="layui-inline"> <input type="text" id="NodeName" name="NodeName" required lay-verify="required" placeholder="Node Name" autocomplete="off" class="layui-input"> </div>*@ <button class="layui-btn layui-btn-normal" id="btnSearch" data-type="reload" style="color:white;">Search</button> <button id="btnAdd" type="button" class="layui-btn layui-btn-primary layui-border-blue Add" style="margin-left:30px;">Assign</button> <button type="button" class="layui-btn layui-btn-primary layui-border-blue Add" id="btnUploadFiles" title="请使用规范模板填写规范数据导入" style=" margin-left: 0px;"> <i class="layui-icon"></i>导入 </button> <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="btnExport" style=" margin-left: 0px;"> <i class="layui-icon"></i>导出 </button> <a href="~/Downloads/IP管理导入模板.xlsx" class="layui-font-blue Add" target="_blank">导入模板</a> </div> <table class="layui-hide" id="tbList" lay-filter="tbList"></table> <script type="text/html" id="tbListToolbar"> <button type="button" title="edit" lay-event="edit" class="layui-btn layui-btn-primary layui-btn-sm Edit"> <i class="layui-icon"></i> </button> <button type="button" title="delete" lay-event="del" class="layui-btn layui-btn-primary layui-btn-sm Delete"> <i class="layui-icon"></i> </button> </script> @section Scripts { <script src="~/lib/excel.js"></script> <script> layui.use(function () { var element = layui.element; var table = layui.table; var form = layui.form; var upload = layui.upload; var DataTable = []; var IPSegmentList = []; element.tabChange('docDemoTabBrief', 1); var tb = table.render({ elem: '#tbList' , url: "/IPList/QueryablePageList" , height: 'full-180' , method: 'post' //, toolbar: true //, defaultToolbar: ['exports'] //, title: 'IP管理数据表' , page: true , limits: [100, 200, 300, 500, 1000] , limit: 300 //每页默认显示的数量 , cellMinWidth: 80 //全局定义常规单元格的最小宽度 , where: { Floor: "xxx" } //, //initSort: { // field: 'Id' //排序字段，对应 cols 设定的各字段名 // , type: 'asc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 //} , cols: [[ /*{ type: 'numbers', width: 80, title: 'Number' }*/ , { field: 'Id', title: 'Id', hide: true } , { field: 'IP', width: 140, title: 'IP' } , { field: 'Floor', title: 'Floor' } , { field: 'MacAddress', width: 140, title: 'MacAddress' } , { field: 'NodeName', title: 'NodeName' } , { field: 'UserName', title: 'UserName' } , { field: 'Location', title: 'Location' } , { field: 'PurposeName', title: 'PurposeName' } , { field: 'Device', title: 'Device' } /*, { field: 'ComputerName', title: 'ComputerName' }*/ , { field: 'Assgn', title: 'Assgn', templet: function (d) { var tstr = objValidate.IsNull(d.Assgn, ""); if (tstr != "") { tstr = tstr.substring(tstr.lastIndexOf("|") + 1); } return tstr; } } , { field: 'Date', title: 'Date', width: 110, templet: function (d) { return objDate.DateToStr(d.Date, "/", 10, ''); } } , { field: 'Expired', title: 'Expired', width: 110, templet: function (d) { return objDate.DateToStr(d.Expired, "/", 10, ''); } } , { field: 'Id', width: 130, title: 'Operate', toolbar: '#tbListToolbar' } ]] , done: function (res, curr, count) { //console.log(res); DataTable = res.data; for (var i in res.data) { $("tr[data-index=" + i + "]").css("background-color", res.data[i].Color); } ////得到当前页码 //console.log(curr); ////得到数据总量 //console.log(count); //功能权限控制 LoadFunJurisdiction(); } , error: function (a, b) { console.log(a); console.log(b); } }); var uploadInst = upload.render({ elem: '#btnUploadFiles' //绑定元素 , url: '/FileManage/UploadFile' //上传接口 , data: { TargetTable: 'IPList' } , accept: 'file' //允许上传的文件类型 , acceptMime: "xlsx/*" , exts: "xls|xlsx" , done: function (res) { //上传完毕回调 $.ajax({ type: "Pst", url: "/IPList/ExcelToTable", async: true, data: { FilePath: res.data.FilePath }, success: function (data) { if (data.code == 0) { layer.alert('导入成功!', { title: '提示', icon: 1 }); active.EditReload(); } else if (data.code == -2) { layer.alert('导入失败,IP:' + data.data + '存在不规范Mac地址!', { title: '提示', icon: 5 }); } else if (data.code == -3) { layer.alert('导入失败,表格中mac地址重复:' + data.data + '!', { title: '提示', icon: 5 }); } else if (data.code == -4) { layer.alert('导入失败,数据库中已存在同Floor重复mac地址:' + data.data + '!', { title: '提示', icon: 5 }); } else { layer.alert('导入失败,请检查模板规范,导入时不要打开文件占用进程!', { title: '提示', icon: 5 }); } } }); } , error: function () { //请求异常回调 } }); //$.ajax({ // type: "Pst", // url: "/IPList/ExcelToTable", // async: true, // data: { FilePath: "" }, // success: function (data) { // if (data.code == 0) { // layer.alert('导入成功!', { title: '提示', icon: 1 }); // active.EditReload(); // } // else if (data.code == -2) { // layer.alert('导入失败,IP:' + data.data + '存在不规范Mac地址!', { title: '提示', icon: 5 }); // } // else if (data.code == -3) { // layer.alert('导入失败,表格中mac地址重复:' + data.data + '!', { title: '提示', icon: 5 }); // } // else if (data.code == -4) { // layer.alert('导入失败,数据库中已存在同Floor重复mac地址:' + data.data + '!', { title: '提示', icon: 5 }); // } // else { // layer.alert('导入失败,请检查模板规范,导入时不要打开文件占用进程!', { title: '提示', icon: 5 }); // } // } //}); var active = { reload: function () { //Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), UserName: $("#UserName").val(), AssgnName: $("#AssgnName").val() // , IPAddress: $("#IPAddress").val(), MacAddress: $("#MacAddress").val(), NodeName: $("#NodeName").val() // 查询搜索用 数据重载 table.reloadData('tbList', { where: { Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), SearchType: $("#sel_SearchType").val(), SearchVal: $("#txt_SearchVal").val() } , page: { curr: 1 //重新从第 1 页开始 } }); }, EditReload: function () { //编辑时的重载，当前页码不变 table.reloadData('tbList', { where: { Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), SearchType: $("#sel_SearchType").val(), SearchVal: $("#txt_SearchVal").val() } }); } //加载Floor数据 , LoadFloorList: function () { $.ajax({ type: "Get", url: "/SegmentList/QueryableNotDeletedDistinct", async: true, data: {}, success: function (data) { $("#sel_Floor").empty(); var data = data.data; var html = '<option value="">Select Floor</option>'; console.log(data); for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i] + '">' + data[i] + '</option>'; } $("#sel_Floor").append(html); layui.form.render("select"); } }); } //加载IPSegment数据 , LoadIPSegmentList: function () { $.ajax({ type: "Get", url: "/SegmentList/QueryableNotDeletedWhere", async: true, data: {}, success: function (data) { $("#sel_IP").empty(); var data = data.data; IPSegmentList = data; var html = '<option value="">Select IP Segment</option>'; /*console.log(data);*/ $.each(data, function (i, v) { //console.log(v.Floor + " | " + selVal); //if (v.Floor == selVal) { html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>'; //} }); $("#sel_IP").append(html); layui.form.render("select"); } }); } , AddSystemLog: function () { $.post("/IPList/AddSystemLog", { OperateType: "export", OperateModule: "SearchIP", OperateFunction: "导出IP信息", OperatePage: "导出IP信息:IPList/Index" }, function (data) { }); } }; //新增 $("#btnAdd").click(function () { //window.location.href = "/IPList/Edit"; layer.open({ type: 2, title: 'Add IP Management', shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['680px', '480px'], content: '/IPList/Edit', end: function () { active.EditReload(); } }); }); table.on('tool(tbList)', function (obj) { // 双击 toolDouble var data = obj.data; //console.log(obj.data); //console.log(obj.data.id); if (obj.event === 'del') { layer.confirm('确定要删除行吗?', { title: '提示', icon: 3 }, function (index) { var Ids = []; Ids.push(obj.data.Id); var parameterData = { Id: obj.data.Id, MacAddress: "", Location: "", Device: "", NodeName: "", UserName: "", ComputerName: "", Expired: null, PurposeId: 0 }; //console.log(Ids); $.post("/IPList/UpdateClearIP", parameterData, function (data) { //console.log(ResponseData); if (data.code == 0) { //obj.del(); 为保证数据真实，此处改为重载 active.EditReload(); layer.close(index); } else { layer.alert('操作失败!', { title: '提示', icon: 5 }); } }); }); } else if (obj.event === 'edit') { layer.open({ type: 2, title: 'Edit Purpose', shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['680px', '480px'], content: '/IPList/Edit?Id=' + obj.data.Id + '', end: function () { active.EditReload(); } }); } }); //选择Floor下拉框事件 form.on('select(Floor)', function (data) { var selVal = data.value; var result = IPSegmentList.filter(function (item) { return item.Floor == selVal; }); $("#sel_IP").empty(); var html = '<option value="">Select IP Segment</option>'; if (!objValidate.NotNull(selVal)) { result = IPSegmentList; } $.each(result, function (i, v) { html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>'; }); $("#sel_IP").append(html); layui.form.render("select"); }); //选择IPSegment下拉框事件 form.on('select(IP)', function (data) { console.log(data.value); //得到被选中的值 var selVal = data.value; if (!objValidate.NotNull(selVal)) { return false; } var result = IPSegmentList.find(function (item) { return item.IPSegment == selVal; }); $("#sel_Floor").val(result.Floor); layui.form.render("select"); }); //搜索 $("#btnSearch").click(function () { active.reload(); }); //导出 $("#btnExport").click(function () { //$.ajax({ // type: "Get", // url: "/FileManage/ExportExcel2", // async: true, // data: {}, // success: function (data) { // window.open('/Downloads/' + data.data, '_blank'); // } //}); //console.log(tb); //console.log(DataTable); var ArrData = []; $.each(DataTable, function (i, v) { var tstr = objValidate.IsNull(v.Assgn, ""); if (tstr != "") { tstr = tstr.substring(tstr.lastIndexOf("|") + 1); } ArrData.push([v.IP, v.Floor, v.MacAddress, v.NodeName, v.UserName, v.Location, v.PurposeName, v.Device , tstr, objDate.DateToStr(v.Date, "/", 10, ''), objDate.DateToStr(v.Expired, "/", 10, '')]) }); var exportData = [] exportData.push.apply(exportData, [['IP', 'Floor', 'MacAddress', 'NodeName', 'UserName', 'Location', 'PurposeName', 'Device' , 'Assgn', 'Date', 'Expired']]); exportData.push.apply(exportData, ArrData); LAY_EXCEL.exportExcel(exportData, 'IP管理表_' + objDate.GetCurrentDate() + '.xlsx', 'xlsx'); active.AddSystemLog(); }); active.LoadFloorList(); active.LoadIPSegmentList(); }); </script> }