// 一些常复用的块封装 // 事件 申明(全局才可获取调用) var vm_header = null; // 顶部vue对象 var vm_table = null; // 表格vue对象 var vm_editTan = null; // 修改弹框vue对象 // admin后台的dom创建方法集成 var adminDom = { // 获取XML文件 hostPath: "/flqAdmin/", // 项目根目录 requestGet: function (XMLurlC) { // 加载XMLDoc var xhttp = null; if (window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); } else { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET", XMLurlC, false); xhttp.send(); // 获得dom return xhttp.responseText; }, // 顶部悬浮 筛选栏 header: { // dom节点、vue对象创造 creat: function (objC) { if (typeof(objC.el)=="undefined") { objC.el = ""; } // 要在哪个标签里面书写dom if (typeof(objC.touchSearch)=="undefined") { objC.touchSearch = function () {}; } // 某种行为触发搜索后的回调 // 请求对应的pageHeader.xml var dom_str = adminDom.requestGet(adminDom.hostPath+"js/pageHeader.xml"); // 打印xml的节点 $(objC.el).html(dom_str); // 顶部vue对象 实例化 vm_header = new Vue({ el: "#admin-header", // 数据 data: { // 返回按钮 back: { show: false, // 是否显示 value: "", // 按钮文字 touch: function () {}, // 事件触发 }, // 搜索下拉框 select: { show: false, // 是否显示 list: [], // 可选列表 result: "", // 选择结果 touch: function () {}, // 事件触发 // 值改变事件 action_change: function() { // 获取下拉框结果 var thisKey = $(".admin-header select[name='select']").val(); // 将结果给事件触发 vm_header.select.touch(thisKey); }, }, // 输入框 input: { show: true, num: 1, // 输入框数量 type: "text", // 输入框类型 placeholder: "输入关键字", // 默认提示文字 result: ["","",""], // 输入结果,因为可能是多个输入框,所以是结果数组,先初始化3个 // 搜索按钮点击 action_click: function() { // 隐藏筛选弹框 if (document.getElementsByClassName("admin-header-screen").length > 0) { var classScreen = $(".admin-header-screen").attr("class").split(" "); var displayIndex = classScreen.indexOf("displayNone"); if (displayIndex < 0) { classScreen.push("displayNone"); $(".admin-header-screen").attr("class", classScreen.join(" ")); } } // 进入搜索方法 if (vm_table != null) { // 将页码回到1 vm_table.opt.page = 1; vm_table.opt.pageMax = 1; // 表格内容数据初始化 vm_table.tbody.tr = new Array(); // 进行搜索 vm_table.search(); } else { vm_header.search(); } }, }, // 切换 change: { show: false, // 是否显示 list: [], // 可选列表 result: "", // 最终结果 touch: function () {}, // 事件触发 // 值改变事件 action_click: function(itemC) { if (itemC.key != vm_header.change.result) { // 选中的key赋值 vm_header.change.result = itemC.key; // 将结果key值给事件触发 vm_header.change.touch(itemC.key); // 进行表格数据刷新 if (vm_table != null) { // 将页码回到1 vm_table.opt.page = 1; vm_table.opt.pageMax = 1; // 表格内容数据初始化 vm_table.tbody.tr = new Array(); // 进行搜索 vm_table.search(); } else { vm_header.search(); } } }, }, // 筛选项 screen: { show: false, // 是否显示 list: [], // 可选列表 touch: function () {}, // 事件触发 // 展开 / 收起 点击 action_show: function () { $(".admin-header-screen").toggleClass("displayNone"); }, // 筛选子项点击 action_screenClick: function (item, item2, index2) { // 将当前所点击的项状态改变 item2.check = !item2.check; // 如果不允许多选且这个已经选了,那么将其他的取消 if (item.muchCheck==false && item2.check==true) { for (var i = 0; i < item.child.length; i++) { if (i!=index2) { item.child[i].check = false; } } } // 获取当前结果 var thisScreen = vm_header.resultGet(); vm_header.screen.touch(thisScreen.screen); }, }, }, // 额外方法 methods: { // 筛选栏 获取筛选结果 resultGet: function () { // 返回值初始化 var back = { select: { result: vm_header.select.result }, // 下拉列表 input: [], // 搜索输入 change: { result: vm_header.change.result }, // 右上切换 screen: [], // 展开的筛选项结果 }; // 获取输入结果 for (var i = 0, mo = vm_header.input.result; i < mo.length; i++) { // 当前行的初始化 var su_obj = { result: mo[i] }; back.input.push(su_obj); } // 获取筛选项结果 for (var i = 0, mo = vm_header.screen.list; i < mo.length; i++) { // 当前行的初始化 var su_obj = { title: mo[i].title, result: [] }; // 根据child的check添加 for (var j = 0, mo2 = mo[i].child; j < mo2.length; j++) { if (mo2[j].check == true) { su_obj.result = su_obj.result.concat(mo2[j].key); } } if (su_obj.result.length <= 0) { su_obj.result.push(""); } // 但是如果输入组件中有内容,那么以输入为准 if (mo[i].input && mo[i].input.num > 0) { var hadString = false; var su_objresult = []; $("#adminHeaderOpt"+i+" input").each(function() { var su_input = $(this).val(); if (typeof(su_input)!="undefined" && su_input.length > 0) { hadString = true; } su_objresult.push(su_input); }); if (hadString == true) { su_obj.result = su_objresult; } } back.screen.push(su_obj); } // 返回结果 return back; }, // 相当于搜索的行为,这是用于触发回调 search: function () { // 获取筛选结果 var result_header = {}; if (vm_header != null) { result_header = vm_header.resultGet(); } // 获取表格设置 var result_table = {}; if (vm_table != null) { result_table = vm_table.resultGet(); } // 组合两个结果 var back = result_header; back["table"] = result_table.table; // 获取成功后触发搜索回调 objC.touchSearch(back); }, } }); }, // 返回按钮设置 back: function (objC) { if (typeof(objC.show)!="undefined") { vm_header.back.show = objC.show; } if (typeof(objC.value)!="undefined") { vm_header.back.value = objC.value; } if (typeof(objC.touch)!="undefined") { vm_header.back.touch = objC.touch; } }, // 下拉框数据设置 select: function (objC) { /* 格式提示: objC.list = [ { key: "spID", value: "商品ID" } ]; */ if (typeof(objC.show)!="undefined") { vm_header.select.show = objC.show; } if (typeof(objC.list)!="undefined") { vm_header.select.list = objC.list; if (objC.list.length > 0) { vm_header.select.result = objC.list[0].key; } } if (typeof(objC.touch)!="undefined") { vm_header.select.touch = objC.touch; } }, // 输入框 input: function (objC) { if (typeof(objC.show)!="undefined") { vm_header.input.show = objC.show; } if (typeof(objC.num)!="undefined") { vm_header.input.num = objC.num; } if (typeof(objC.type)!="undefined") { vm_header.input.type = objC.type; } if (typeof(objC.placeholder)!="undefined") { vm_header.input.placeholder = objC.placeholder; } }, // 右上角内容切换 change: function (objC) { /* 格式提示: objC.list = [ { key: "tong", value: "柱状表" }, { key: "tong", value: "线性表" }, { key: "tong", value: "全部" } ]; */ if (typeof(objC.show)!="undefined") { vm_header.change.show = objC.show; } if (typeof(objC.list)!="undefined") { vm_header.change.list = objC.list; // 初始化结果为第一个key if (objC.list.length > 0) { vm_header.change.result = objC.list[0].key; } } if (typeof(objC.touch)!="undefined") { vm_header.change.touch = objC.touch; } }, // 开启筛选 screen: function (objC) { /* 格式提示: objC.list = [ { title: "价格", muchCheck: false, // 是否可以多选 child: [ { key: [30], value: "¥30", check: false, }, { key: [0, 50], value: "¥0~¥50", check: false, }, { key: [50, 300], value: "¥50~¥300", check: false, }, ], input: { type: "number", num: 2 }, } ]; */ if (typeof(objC.show)!="undefined") { vm_header.screen.show = objC.show; } if (typeof(objC.list)!="undefined") { vm_header.screen.list = objC.list; } if (typeof(objC.touch)!="undefined") { vm_header.screen.touch = objC.touch; } }, }, // 数据表格 创建dom table: { // dom节点、vue对象创造 creat: function (objC) { if (typeof(objC.el)=="undefined") { objC.el = ""; } // 要在哪个标签里面书写dom if (typeof(objC.touchSearch)=="undefined") { objC.touchSearch = function () {}; } // 某种行为触发搜索后的回调 // 请求对应的pageHeader.xml var dom_str = adminDom.requestGet(adminDom.hostPath+"js/pageTable.xml"); // 打印xml的节点 $(objC.el).html(dom_str); // 表格vue对象 实例化 vm_table = new Vue({ el: objC.el, // 数据 data: { // 表格设置 opt: { showCheck: true, // 行选择列开启? showSerial: true, // 行序数开启? allCheck: false, // 是否全选 order: "", // 排序选择值 page: 1, // 当前页码 pageMax: 1, // 最大页码数量 pageSize: 20, // 每页数据 }, // 表格头排 thead: { show: true, // 是否显示 th: [], // th列表 // 全选按钮点击 action_allCheckClick: function () { // 已经是全选状态 if (typeof(vm_table.opt.allCheck)!="undefined" && vm_table.opt.allCheck==true) { // 将每一行不选中 for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { mo[i]["check"] = false; } // 全选取消 vm_table.opt.allCheck = false; } else { // 将每一行选中 for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { mo[i]["check"] = true; } // 全选触发 vm_table.opt.allCheck = true; } }, // 列表排序 点击 action_orderClick: function (orderKey) { if (orderKey != vm_table.opt.order) { vm_table.opt.order = orderKey; } else { vm_table.opt.order = ""; } // 将页码回到1 vm_table.opt.page = 1; // 表格内容数据初始化 vm_table.tbody.tr = new Array(); // 进行搜索 vm_table.search(); }, }, // 表格内容 tbody: { show: true, // 是否显示 multiChose:true, tr: [], // tr列表 // 某一行选中 点击 action_trClick: function (itemC) { // 将所有状态清除 if(objC.multiChose!=undefined && objC.multiChose==false) { for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { mo[i]["check"]=false; } } // 将当前行的选中状态反向 if (typeof(itemC.check)=="undefined") { itemC["check"] = true; } else { itemC["check"] = !itemC["check"]; } // 是否形成全选 var allCheckTF = true; for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { if (typeof(mo[i]["check"])=="undefined" || mo[i]["check"]==false) { allCheckTF = false; break; } } if (allCheckTF == true) { vm_table.opt.allCheck = true; } else { vm_table.opt.allCheck = false; } }, }, // 表格工具 tools: { show: true, list: [ { "title": "新建", "name": "add", "icon": "fi fi-plus" }, { "title": "删除", "name": "del", "icon": "fi fi-trash" }, { "title": "修改", "name": "edit", "icon": "fi fi-edit-box" }, ], touch: function () {}, // 事件触发 // tools工具栏 点击 action_toolsClick: function (itemC) { // 返回值初始化 var back = { toolName: itemC.name, // 工具按钮name list: [], // 被选中行的列表,其中的每一个行也是一个数组 }; // 循环表格中的行 for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { // 看看哪些选中了 if (typeof(mo[i].check)!="undefined" && mo[i].check == true) { // 当前行初始化为 数组 var mo_zu = new Array(); // 将每一个td的数据放入 该数组 for (var j = 0, moTh = vm_table.thead.th, moTd = mo[i].td; j < moTh.length; j++) { var jiedian = { title: moTh[j].title, key: moTd[j].key, value: moTd[j].value, }; mo_zu.push(jiedian); } // 加入最终返回值的 选中行列表 back.list.push(mo_zu); } } // 触发回调 if (back.toolName != "add" && back.list.length <= 0) { doui.showToast({ content: "未选择" }); } else { vm_table.tools.touch(back); } }, }, // 翻页区域 pageTool: { // 表格页码改变 action_pageChange: function (typeC) { // 上一页 if (typeC == "shang") { if (vm_table.opt.page > 1) { vm_table.opt.page--; } else { return false; } } // 下一页 else if (typeC=="xia") { if (typeof(vm_table.opt.pageMax)!="number") { vm_table.opt.page++; } else if (vm_table.opt.page < vm_table.opt.pageMax) { vm_table.opt.page++; } else { return false; } } // 直接跳转 else if (typeC == "jump") { if ($("#pageToolZhuandao").val() && $("#pageToolZhuandao").val().length > 0) { var mo = parseInt($("#pageToolZhuandao").val()); if (mo < 1 || mo > vm_table.opt.pageMax) { doui.showToast({ content: "页码不在范围内" }); return false; } else { vm_table.opt.page = mo; } } } // 表格内容数据初始化 vm_table.tbody.tr = new Array(); // 进行搜索 vm_table.search(); }, }, }, // 初始化layui表单元素修饰 updated: function() { layui.use('form', function() { var form = layui.form; form.render(); }); }, // 通用方法 methods: { // 表格 获取设置结果 resultGet: function () { // 返回值初始化 var back = { table: { order: "", // 列表排序 page: 1, // 当前页码 pageMax: 1, // 最大页码数 pageSize: 20, // 每页数据条数 }, }; back.table.order = vm_table.opt.order; back.table.page = vm_table.opt.page; back.table.pageMax = vm_table.opt.pageMax; back.table.pageSize = vm_table.opt.pageSize; // 结果回调 return back; }, // 相当于搜索的行为,这是用于触发回调 search: function () { // 获取筛选结果 var result_header = {}; if (vm_header != null) { result_header = vm_header.resultGet(); } // 获取表格设置 var result_table = {}; if (vm_table != null) { result_table = vm_table.resultGet(); } // 组合两个结果 var back = result_header; back["table"] = result_table.table; // 获取成功后触发搜索回调 objC.touchSearch(back); } }, }); }, // 表格的相关设置 opt: function (objC) { if (typeof(objC.showCheck)!="undefined") { vm_table.opt.showCheck = objC.showCheck; } // 是否开启“选中” if (typeof(objC.showSerial)!="undefined") { vm_table.opt.showSerial = objC.showSerial; } // 是否开启“序号” if (typeof(objC.allCheck)!="undefined") { vm_table.opt.allCheck = objC.allCheck; } // 是否已经“全选” if (typeof(objC.order)!="undefined") { vm_table.opt.order = objC.order; } // 当前排序所选key有效值 if (typeof(objC.page)!="undefined") { vm_table.opt.page = objC.page; } // 当前页码 if (typeof(objC.pageMax)!="undefined") { vm_table.opt.pageMax = objC.pageMax; } // 最大页码数 if (typeof(objC.pageSize)!="undefined") { vm_table.opt.pageSize = objC.pageSize; } // 每页数据条数 }, // thead thead: function (objC) { /* 格式提示: objC.th = [ { title: "ID", // 肉眼看见的表格头排显示文字 width: "", // 该列宽度 orderUp: "", // 升序key传递值 orderDown: "", // 降序key传递值 // 是否可以触发修改 edit: { type: "radio", // text-文本输入 radio-单选 checks-多选 select-下拉列表 date-时间 datetime-local-包含时分的时间 toggle-开关型 file-文件选择 placeholder: "", list: [ { key: "0", value: "正常" }, { key: "1", value: "删除" }, { key: "2", value: "封禁" } ], }, } ]; */ if (typeof(objC.show)!="undefined") { vm_table.thead.show = objC.show; } if (typeof(objC.th)!="undefined") { vm_table.thead.th = objC.th; } }, // tbody tbody: function (objC) { /* 格式提示: objC.tr = [ { check: false, // 当前行是否已选中 td: [ // td列 { title: "ID", key: "d13wc4r321fc4", value: "d13wc4r321fc4", class: "", style: "" }, { title: "图片", key: "http://www.baidu.com/hollo.jpg", value: "http://www.baidu.com/hollo.jpg", dataType: "img", class: "", style: "", }, { title: "链接", key: "http://www.alibaba.com", value: "http://www.alibaba.com", dataType: "link", class: "", style: "", }, ], } ]; */ if (typeof(objC.show)!="undefined") { vm_table.tbody.show = objC.show; } if (typeof(objC.tr)!="undefined") { vm_table.tbody.tr = objC.tr; } }, // 工具栏 tools: function (objC) { if (typeof(objC.show)!="undefined") { vm_table.tools.show = objC.show; } if (typeof(objC.list)!="undefined") { vm_table.tools.list = objC.list; } if (typeof(objC.touch)!="undefined") { vm_table.tools.touch = objC.touch; } }, // 行选择初始化 initCheck: function () { // 循环表格中的行 将每个行设置为未选中 for (var i = 0, mo = vm_table.tbody.tr; i < mo.length; i++) { mo[i]["check"] = false; } // 非全选 vm_table.opt.allCheck = false; }, }, // 数据修改弹框(遵守规则,一次只能操作一行) editTan: { // dom节点、vue对象创造 creat: function (objC) { if (typeof(objC.el)=="undefined") { objC.el = "body"; } // 要在哪个标签里面书写dom if (typeof(objC.touch)=="undefined") { objC.touch = function () {}; } // 操作变更触发的回调方法 if (typeof(objC.touchSubmit)=="undefined") { objC.touchSubmit = function () {}; } // 提交按钮点击触发的回调方法 // 请求对应的pageHeader.xml var dom_str = adminDom.requestGet(adminDom.hostPath+"js/pageEditTan.xml"); // 打印xml的节点 $(objC.el).append(dom_str); // vue实例化 vm_editTan = new Vue({ el: "#admin-edit-tan", data: { // 弹框设置 opt: { title: "新建", // 弹框标题 }, // 完全复制表格的thead数据 thead: { show: true, th: [], }, // 初始存在的操作数据 thereData: { show: false, // 修改框上 是否显示存在的数据 list: [], // 已经存在的数据列表 }, }, // 初始化layui表单元素修饰 updated: function() { layui.use('form', function() { var form = layui.form; form.render(); //监听指定开关 form.on('switch(switchTest)', function(data) { var value = 0; if (this.checked) { value = 1; } vm_editTan.thereData.list[this.title].key = value; }); }); }, methods: { // 关闭按钮 点击 closeClick: function () { adminDom.editTan.remove(); }, // 操作变化 触发 action_change: function (indexC, thereD) { var back = { index: indexC, title: thereD.title, key: thereD.key, value: thereD.value, }; objC.touch(back); }, // 复选框选项 点击 checkClick: function (editListItem, tdItem) { var index = tdItem.key.indexOf(editListItem.key); // 如果是选过的 从key中除去该选项 if (index >= 0) { tdItem.key.splice(index, 1); } // 没有则添加 else { tdItem.key.push(editListItem.key); } }, // 文件资源获取,{ key: (用来保存新选择的文件对象), value: (是已经拥有的老数据) } fileInputChange: function (indexC) { // 获取当前组件选择的文件 var back = $("#adminEditTanFileInput"+indexC)[0].files[0]; // 保存到 key vm_editTan.thereData.list[indexC].key = back; // 是否改变标识 if (typeof(back)=="object") { vm_editTan.thereData.list[indexC].change = true; // 获取文件本地路径 var reader = new FileReader(); reader.onload = function (e) { vm_editTan.thereData.list[indexC].filePath = e.target.result; }; reader.readAsDataURL(back); } else { vm_editTan.thereData.list[indexC].change = false; } // 是否删除标识 if (typeof(vm_editTan.thereData.list[indexC].del)=="undefined") { vm_editTan.thereData.list[indexC]["del"] = false; } }, // 确定提交点击 subClick: function () { // 构造返回数据 var back = vm_editTan.thereData; // 触发 objC.touchSubmit(back); } }, }); // 获取表格thead if (vm_table != null) { vm_editTan.thead = JSON.parse( JSON.stringify(vm_table.thead) ); } }, // 弹框设置 opt: function (objC) { if (typeof(objC.title)!="undefined") { vm_editTan.opt.title = objC.title; } // 弹框标题 }, // 定义初始操作数据 thereData: function (objC) { /* 格式提示: 相当于表格中的一行数据 objC.list = [ { title: "ID", key: "d13wc4r321fc4", value: "d13wc4r321fc4", class: "", style: "" }, { title: "图片", key: "http://www.baidu.com/hollo.jpg", value: "http://www.baidu.com/hollo.jpg", dataType: "img", class: "", style: "", }, { title: "链接", key: "http://www.alibaba.com", value: "http://www.alibaba.com", dataType: "link", class: "", style: "", }, ], */ if (typeof(objC.show)!="undefined") { vm_editTan.thereData.show = objC.show; } if (typeof(objC.list)!="undefined") { // 重新定义传递进来的list var listNew = JSON.parse( JSON.stringify(objC.list) ); // 对列表的一些项做初始化 for (var i = 0, mo = vm_editTan.thead.th; i < mo.length; i++) { // 如果是file型,初始化del为false if (mo[i].edit && mo[i].edit.type == "file") { listNew[i]["change"] = false; listNew[i]["del"] = false; listNew[i]["filePath"] = ""; } } // 赋值 vm_editTan.thereData.list = listNew; } // 如果不想显示已经存在的数据,那么自我新建模版 if (vm_editTan.thereData.show == false) { var mo_zu = new Array(); for (var i = 0, mo = vm_editTan.thead.th; i < mo.length; i++) { var jiedian = { title: mo[i].title, key: "", value: "" }; // 如果是多选项,将key设置为数组 if (mo[i].edit && mo[i].edit.type == "check") { jiedian.key = []; } // 如果是file型,初始化del为false else if (mo[i].edit && mo[i].edit.type == "file") { jiedian["change"] = false; jiedian["del"] = false; jiedian["filePath"] = ""; } mo_zu.push(jiedian); } vm_editTan.thereData.list = mo_zu; } }, // 删除dom remove: function () { $("#admin-edit-tan").remove(); }, }, };