<!doctype html> <html> <head> <meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"> <title>页é¢è§’色</title> <script type="text/javascript"> var pageVue = null; function loadJsCss(callback) { var jscss_urls = []; window.top.initJsCss(document, jscss_urls, callback); }; function initVue() { new ListVue({ el: "#vbody", data: { dataname: "sys_right_role", orderby: "role_type, order_no", title: "", isPagination: false, menuList: [], refresh_menu: true, selectPageObj: {}, start_expanded_keys: [], //默认展开的èœå• checkedMenu: [], //默认选ä¸èœå• defaultProps: { children: 'children', label: 'title' }, tableFields_tab: [ {isshow: "T", field: "name", name: "Tabåç§°", align: "left"}, // {isshow: "T", field: "is_visible", name: "是å¦å¯è§", align: "center"}, // {isshow: "T", field: "is_active", name: "是å¦å¯ç¼–辑", align: "center", type:"switch"}, ], tableData_tab: [], tab_tableHeight: 100, dataname_p: "md_product", isRefresh_p: true, tableFields_p: [], tableData_p: [], pagesize_p: 10, pagenum_p: 1, total_p: 0, tableHeight_p: 100, filterfieldClick: {}, tablefieldClick: {}, formfieldClick: {}, activeName: "", tableFields_button: [ {isshow: "T", field: "sys_page_tab__name", name: "Tabåç§°", align: "left"}, {isshow: "T", field: "title", name: "按钮åç§°", align: "left"}, {isshow: "T", field: "name", name: "åç§°", align: "left"}, {isshow: "T", field: "type", name: "类型", align: "left"}, // {isshow: "T", field: "is_active", name: "是å¦å¯ç”¨", align: "center", type:"switch"}, ], tableData_button: [], selectButtons: [], selectTabs: [], oldRolePage: [], oldarr: [], oldsarr: [], checkarrbutton: [], checkarrtab: [], pageid: "", savem: false, savebt: false, ischange: false, title_name: null, treeTxtFormatter: "{title}", treeTxtFormatter_bt: "{name}ã€{type}】", bt_selected: [], options_tree_bt: [], tablebuttonclick: [], }, created() { }, mounted() { //èŽ·å–æ•°æ® this.activeName = "button"; this.initData(); this.$nextTick(() => { // 以æœåŠ¡çš„æ–¹å¼è°ƒç”¨çš„ Loading 需è¦å¼‚æ¥å…³é— hideLoading(); }); }, methods:{ initData() { var me = this; this.tablebuttonClick(); this.onQuery(function(result, callback) {//查询åŽçš„回调,用于获å–å—æ®µçš„ if (result.meta && result.meta[me.dataname] && result.meta[me.dataname].fields) { var metas = clone(result.meta[me.dataname].fields); var filterFields_ = []; var tableFields_ = []; metas.map(f=>{ f.isshow = "T"; if (f.isfilter) { filterFields_.push(clone(f)); } else { var filter_f = clone(f); filter_f.isshow = "F"; filterFields_.push(filter_f); } tableFields_.push(clone(f)); }) if (!me.filterFields || (me.filterFields && me.filterFields.length == 0)) { me.filterFields = clone(filterFields_); me.tableFields = clone(tableFields_); //å—æ®µæ•°ç»„è½¬å—æ®µobj,目的为了ç›é€‰æ—¶èŽ·å–å—æ®µå±žæ€§ me.fieldsToFieldsObj(); //è®¾ç½®å—æ®µäº‹ä»¶ me.tableFieldClick(); } } if (callback) { callback(); } me.getMenuAll(); }); }, onTableDataAfter(){ var me = this; this.$nextTick(() => { // 以æœåŠ¡çš„æ–¹å¼è°ƒç”¨çš„ Loading 需è¦å¼‚æ¥å…³é— let clientHeight = document.documentElement.clientHeight; let filter_height = document.getElementsByClassName('h_form_filter').length ? document.getElementsByClassName('h_form_filter')[0].offsetHeight : 0; me.tableHeight = clientHeight - filter_height - 20; }); }, rowClick(obj) { var me = this; me.reseta(); this.selectedrow = obj.row; this.getMenuByRole(); }, getMenuAll() { var me = this; var param_ = {} Server.call("root/client/getMenuTreeAll", param_, function(result) { //éåŽ†æ ‘æ•°æ®ï¼Œå°†æ ¹èŠ‚ç‚¹çš„menu_id设置为id var menus_tree = clone(result.data.menus); // var menus_tree2 = clone(result.data.menus); me.menuToPageTree(menus_tree); me.menuList = clone(menus_tree); // me.tableDataAfter_p(); var row = me.tableData[0]; me.$refs.table1.setCurrentRow(row) me.selectedrow = row; me.getMenuByRole(); // me.menuToPageTree(menus_tree, function(menus) { // me.menuList = clone(menus); // // me.tableDataAfter_p(); // var row = me.tableData[0]; // me.$refs.table1.setCurrentRow(row) // me.selectedrow = row; // me.getMenuByRole(); // }) }) }, menuToPageTree2(oldmenus, callback) { var me = this; oldmenus.map(om=>{ if (om.children) { me.menuToPageTree2(om.children); } else if (om.page_id) { om.id = om.page_id } }) if (callback) { callback(oldmenus); } }, menuToPageTree(oldmenus) { var me = this; oldmenus.map(om=>{ if (om.children) { me.menuToPageTree(om.children); } // else if (om.page_id) { // om.id = om.page_id // } else if (om.menu_id) { om.id = om.menu_id } }) }, tableDataAfter_p() { var me = this; if (this.tableFields_p.length > 0){ this.isRefresh_p = false; this.$nextTick(function(){ this.isRefresh_p = true; this.$nextTick(function(){ me.tableHeight_p = me.tableHeight }) }) } }, tablebuttonClick() { var me = this; var tablebuttonclick = []; tablebuttonclick = [ { isbuttonshow: true, //type: "", code: "add", isselected: false, classname:"", onclick: function(obj) { me.addData(); } }, { isbuttonshow: true, //type: "", code: "edit", isselected: true, classname:"", onclick: function(obj) { me.editData("edit", obj.selectedList[0]); } }, { isbuttonshow: true, type: "danger", code: "delete", isselected: true, classname:"", onclick: function(obj) { me.delData(obj.selectedList[0]); } } ] this.tablebuttonclick = tablebuttonclick; }, tableFieldClick() { var me = this; //ç›é€‰å—段事件设置 //è¡¨æ ¼å—æ®µäº‹ä»¶è®¾ç½® this.tablefieldClick = { user_list: {//å—æ®µäº‹ä»¶è®¾ç½® defaultval: { val: "查看",//空值时的显示值 onclick: function(obj) {//默认值点击事件,æ¤äº‹ä»¶éœ€è¦è®¾ç½®valæ‰æœ‰æ•ˆ me.getUserList(obj); } }, }, }; //表å•å—æ®µäº‹ä»¶è®¾ç½® }, // 角色列表的查看点击 getUserList(obj){ console.log("obj",obj) let me = this let row = obj.row var config = ({ totab: false, //true: 以Tabå¯¼èˆªçš„æ–¹å¼æ‰“å¼€ url: "module/config/page/employee_role_list.html", width: 950, height: 550, text: "用户列表", sceneCode: "browse", data: row, delta: {}, callback: function(obj, callback) { console.log(obj.row); if (callback) { callback(); } } }); me.doPopupByPublic(config); }, reseta(){ this.$nextTick(() => { this.$refs.menuTree.setCheckedKeys([]) }); }, getTabButtonByPageId(pageId, menuId) { var me = this; let param_t = { dataname: "sys_page_tab", filter: "page_id = '" + pageId + "'" } Server.call("root/data/getEntitySet", param_t, function(result_tab) { var tab_list_ = result_tab.data.entityset; let param_b = { dataname: "sys_page_button", filter: "sys_page_button.page_id = '" + pageId + "'", orderby: "sys_page_button.page_id, tab_id", } Server.call("root/data/getEntitySet", param_b, function(result_button) { var button_list_ = result_button.data.entityset; var tab_button_list_ = []; var options_tree_bt_ = []; tab_list_.map(t=>{ var t_ = { id: t.id, name: t.name, type: "T" } tab_button_list_.push(t_) }) button_list_.map(b=>{ var b_ = { id: b.id, name: b.title, type: "B", parent_id: b.tab_id } tab_button_list_.push(b_) }) options_tree_bt_ = ArrayToTree(clone(tab_button_list_), "name", "parent_id", null, null, null, null); me.options_tree_bt = clone(options_tree_bt_); me.getTabButtonByRole(pageId, menuId, me.selectedrow.id) }) }) }, getTabButtonByRole(pageId, menuId, role_id) { var me = this; let param_ = { dataname: "sys_right_role_page_tab", filter: "role_id = '" + role_id + "' and page_id = '" + pageId + "' and menu_id='" + menuId + "'" } Server.call("root/data/getEntitySet", param_, function(result_tab) { var tab_list_ = result_tab.data.entityset; let param_b = { dataname: "sys_right_role_page_button", filter: "role_id = '" + role_id + "' and page_id = '" + pageId + "' and menu_id='" + menuId + "'" } Server.call("root/data/getEntitySet", param_b, function(result_button) { var button_list_ = result_button.data.entityset; var bt_selected_ = []; tab_list_.map(t=>{ bt_selected_.push(t.tab_id); }) button_list_.map(b=>{ bt_selected_.push(b.button_id); }) me.bt_selected = clone(bt_selected_); }) }) }, getTabList(pageId) { var me = this; let param_ = { isClientMode: false, dataname: "sys_page_tab", filter: "page_id = '"+pageId+"'" } Server.call("root/data/getEntitySet", param_, function(result) { // console.log(result.data.entityset) var temparr1 = [] me.oldsarr = result.data.entityset; temparr1 = clone(me.oldsarr); // temparr1.map((e,index)=>{ // e.is_active = null; // }) me.oldsarr = temparr1; var temparr = [] me.tableData_tab = result.data.entityset; temparr = clone(me.tableData_tab); // temparr.map((e,index)=>{ // e.is_active = null; // }) me.tableData_tab = temparr; if(me.selectedrow.id){ me.getTabByRole(pageId); } }); }, getButtonList(pageId){ var me = this; console.log(pageId) let param_ = { isClientMode: false, dataname: "sys_page_button", filter: "sys_page_button.page_id = '"+pageId+"'", orderby: "sys_page_button.page_id, tab_id", } Server.call("root/data/getEntitySet", param_, function(result) { console.log(result.data.entityset) var temparr1 = [] me.oldarr = result.data.entityset; temparr1 = clone(me.oldarr); // temparr1.map((e,index)=>{ // e.is_active = null; // }) me.oldarr = temparr1; var temparr = [] me.tableData_button = result.data.entityset; temparr = clone(me.tableData_button); // temparr.map((e,index)=>{ // e.is_active = null; // }) me.tableData_button = temparr; if(me.selectedrow.id){ me.getButtonByRole(pageId); } }); }, getTabByRole(pageId){ var me = this; let param_ = { dataname: "sys_right_role_page_tab", filter: "role_id = '"+this.selectedrow.id+"' and page_id = '"+pageId+"'" } me.tableData_tab = me.oldsarr; Server.call("root/data/getEntitySet", param_, function(result) { var data_ = result.data.entityset; // var tableData_tab_ = clone(me.tableData_tab); // if(data_[0]){ // tableData_tab_.map((e,index)=>{ // if(e.id == data_[index].tab_id){ // tableData_tab_[index].is_active = data_[index].is_active; // if(data_[index].is_active){ // tableData_tab_[index].is_visible = true; // } // } // }) // } // me.tableData_tab = tableData_tab_; var checkarr = []; data_.map(e=>{ checkarr.push(e.tab_id) }) console.log(checkarr) // toggleSelection me.$refs.table_tab.toggleSelection(checkarr); }); }, getButtonByRole(pageId){ var me = this; let param_ = { isClientMode: false, dataname: "sys_right_role_page_button", filter: "role_code = '"+this.selectedrow.id+"' and page_id = '"+pageId+"'" } me.tableData_button = me.oldarr; Server.call("root/data/getEntitySet", param_, function(result) { var data_ = result.data.entityset; // var tableData_button_ = clone(me.tableData_button); // if(data_[0]){ // tableData_button_.map((e,index)=>{ // if(e.id == data_[index].button_id){ // tableData_button_[index].is_active = data_[index].is_active; // if(data_[index].is_active){ // tableData_button_[index].is_visible = true; // } // } // }) // } // me.tableData_button = tableData_button_; // console.log(data_) var checkarr = []; data_.map(e=>{ checkarr.push(e.button_id) }) console.log(checkarr) // toggleSelection me.$refs.table_button.toggleSelection(checkarr); }); }, getMenuByRole(){ var me = this; let param_ = { isClientMode: false, dataname: "sys_right_role_menu", filter: "role_id = '"+this.selectedrow.id+"'", } me.oldRolePage = []; me.checkedMenu = []; Server.call("root/data/getEntitySet", param_, function(result) { me.oldRolePage = clone(result.data.entityset); var checkedMenu_ = clone(me.checkedMenu); me.oldRolePage.map(sm=>{ checkedMenu_.push(sm.menu_id) }) me.checkedMenu = checkedMenu_; }); }, onQueryAfter() { this.pagenum_p = 1; this.tableData_p = []; this.total_p = 0; }, btTreeCheckClick(obj) { let me = this; var data = obj.data, checked = obj.checked, indeterminate = obj.indeterminate; this.ischange = true; }, menuTreeCheckClick(obj) { let me = this; var data = obj.data, checked = obj.checked, indeterminate = obj.indeterminate; this.title_name = ""; this.menuId = ""; this.pageid = ""; this.options_tree_bt = []; this.bt_selected = []; }, menuTreeNodeClick(obj) { let me = this; var data = obj.data, node = obj.node, e = obj.el; // if(me.ischange){ // Root.confirm('有未ä¿å˜çš„æŒ‰é”®æˆ–Tab,是å¦ä¿å˜ï¼Ÿ', '未ä¿å˜æç¤º', { // confirmButtonText: 'ä¿å˜', // cancelButtonText: 'ä¸ä¿å˜', // type: 'warning' // }).then(() => { // me.onSaveResourceByPage(); // }).catch(() => { // me.ischange = false; // Root.message({ // type: 'info', // message: '已喿¶ˆ' // }); // }); // return // } // this.getButtonList(data.page_id); // this.getTabList(data.page_id); this.title_name = ""; this.menuId = ""; this.pageid = ""; this.options_tree_bt = []; this.bt_selected = []; if (data.page_id) { if (!node.checked) { //å¦‚æžœæ²¡æœ‰è¢«é€‰ä¸ Root.message({ type: 'warning', message: '仅选ä¸çš„èœå•å¯é…置资æº' }); this.$refs.menuTree.setCurrentKey(); return } this.$refs.menuTree.setCurrentKey(data.id); } if (data && data.page_id) { me.pageid = data.page_id; me.menuId = data.id; me.title_name = data.title; this.getTabButtonByPageId(me.pageid, me.menuId); } }, //ä¿å˜å•个页é¢çš„èµ„æºæƒé™ onSaveResourceByPage() { let me = this; var select_bt = this.$refs.btTree.getCheckedNodes(); var select_bt_keys = this.$refs.btTree.getCheckedKeys(); if(!this.selectedrow.id) { this.$message({ message: '请先选择左侧角色', type: 'warning' }); return; } var cbuttons = []; var ctabs = []; select_bt.map(bt=>{ if (bt.type == "T") { // tab ctabs.push(bt.id); } else if (bt.type == "B") { // button var b_ = { tab_id: bt.parent_id, button_id: bt.id } cbuttons.push(b_); } }) let param_ = { roleId: this.selectedrow.id, roleCode: this.selectedrow.code, menuId: me.menuId, pageId: me.pageid, buttons: cbuttons, tabs: ctabs, } console.log(param_); // return me.savebt = true; Server.call("root/system/saveBtnAndTab", param_, function(result) { if(result.success){ me.roleRefresh(param_.roleId, function(){ me.$message({ message: 'ä¿å˜æˆåŠŸ', type: 'success' }); me.savebt = false; me.ischange = false; }); } }, function(result) { me.savebt = false; }); }, // åˆ·æ–°ç¼“å˜ roleRefresh(roleId, callback) { var me = this; let param_ = { role_id: roleId } console.log(param_); Server.call("root/system/reloadRole", param_, function(result) { if(result.success){ if (callback) { callback() } } }, function(result) { me.savebt = false; }); }, saveResourceByPage(type) { let me = this; let ids = ""; this.selectButtons; this.selectTabs; let arr = this['select' + type] console.log(this['select' + type]) for (let i = 0; i < arr.length; i++) { if (ids == "") { ids = arr[i]; } else { ids += "','" + arr[i]; } } console.log(ids) var roleType = this.selectRole.type; let filter_ = " role_id = '" + this.selectRole.id + "' and type = '" + type.substring(0, type.length - 1).toLowerCase() + "' and resource_id in('" + ids + "')"; param_ = { dataname: "resourceRole", filter: filter_, } //return Server.call("root/data/deleteEntityByFilter", param_, function(result) { console.log(result); let arr_ = me.selectMenu[me.menuId][type.toLowerCase()]; let type_ = type.substring(0, type.length - 1).toLowerCase(); var array_ = clone(arr_); me.doSaveResourceByPage(array_, type_); }); }, doSaveResourceByPage(array, type, callback) { var me = this; if (array.length) { var array_row_ = array[0]; var row_ = { role_id: me.selectRole.id, type: type, resource_id: array_row_.id, } var param_ = { dataname: "resourceRole", entity: row_ } Server.call("root/data/saveEntity", param_, function(result) { console.log(result); array.remove(array_row_); if (array.length) { me.doSaveResourceByPage(array, type, callback); } else { me.$message({ message: 'ä¿å˜æˆåŠŸ', type: 'success' }); if (callback) { callback(); } } }); } else { me.$message({ message: 'ä¿å˜æˆåŠŸ', type: 'success' }); if (callback) { callback(); } } }, onInitFilter(){ this.reseta(); this.selectedrow = {}; this.pageid = ""; }, handleClick(tab) { // if (tab.name == "button") { // //this.getButtonByRole(); // this.getPermissionByRole("button"); // } // if (tab.name == "tab") { // this.getPermissionByRole("tab"); // } // if (tab.name == "table") { // this.getPermissionByRole("table"); // } // if (tab.name == "form") { // this.getPermissionByRole("form"); // } }, getPermissionByRole(type) { let me = this; var type_ = type; var roleType = this.selectRole.type let filter_ = "EXISTS ( SELECT resource_id FROM resource_role WHERE type = '" + type + "' AND resource_id = v_menu.id and role_id='" + this.selectRole.id + "' )" var param_ = { dataname: "v_menu", filter: filter_ } Server.call("root/data/getEntitySet", param_, function(result) { console.log(result); if (result && result.data.entityset) { let data_ = result.data.entityset; let arr = []; let leafarr = []; me.start_expanded_keys = []; me.checkedMenu = []; for (let i = 0; i < data_.length; i++) { arr[i] = data_[i].id; if (data_[i].page_id) { leafarr.push(data_[i].id); } } if (type == 'menu') { me.checkedMenu_ = arr; me.start_expanded_keys = leafarr; me.checkedMenu = leafarr; me.refresh_menu = false; //me.isStrictly=false; me.$forceUpdate() me.$nextTick(() => { me.refresh_menu = true; //me.$refs.menuTree.setCheckedKeys(arr) }); } else if (type == 'panel') { me.selectPanels = arr; me.selectMenu[me.menuId].panels = arr; console.log(me.selectMenu[me.menuId].panels) } else if (type == 'button') { me.selectButtons = arr; me.selectMenu[me.menuId].buttons = arr; //me.$refs.table_button.toggleSelection(data_); } else if (type == 'table') { me.selectTables = arr; me.selectMenu[me.menuId].tables = arr; } else if (type == 'tableField') { me.selectTableFields = arr; me.selectFieldsByTable[me.menuId][me.tableId] = arr; } else if (type == 'form') { me.selectForms = arr; me.selectMenu[me.menuId].forms = arr; } else if (type == 'formField') { me.selectFormFields = arr; me.selectFieldsByForm[me.menuId][me.formId] = arr; } else if (type == 'tab') { me.selectTabs = arr; me.selectMenu[me.menuId].tabs = arr; } } }); }, //ä¿å˜èœå•æƒé™ onSaveMenuByRole() { let me = this; let resultMenu = this.$refs.menuTree.getCheckedNodes(true); let resultpages = this.$refs.menuTree.getCheckedKeys(true); // var pages_ = []; // resultMenu.map(m=>{ // if (m.page_id) { // pages_.push(m.page_id); // } // }) let menu_list = [] resultMenu.map(e => { menu_list.push({menuId: e.id,pageId: e.page_id,remark: e.title}) }) let param_ = { dataName: "sys_right_role_menu", // roleCode: this.selectedrow.code, roleId: this.selectedrow.id, menus: menu_list, } console.log("aaaa", param_); // return me.savem = true; Server.call("root/system/saveRoleMenus", param_, function(result) { if(result.success){ me.$message({ message: 'ä¿å˜æˆåŠŸ', type: 'success' }); me.savem=false; // if(window.top.vue.roleselect.name == me.selectedrow.name){ // window.top.vue.refreshMenu(); // } } }, function(result) { me.savem=false; }); }, doSaveMenuByRole(resultMenu, callback) { var me = this; if (resultMenu.length) { var resultMenu_ = resultMenu[0]; var row_ = { role_id: me.selectRole.id, type: "menu", resource_id: resultMenu_, role_type: me.selectRole.type, } var param_ = { dataname: "resourceRole", entity: row_ } Server.call("root/data/saveEntity", param_, function(result) { console.log(result); resultMenu.remove(resultMenu_); if (resultMenu.length) { me.doSaveMenuByRole(resultMenu, callback); } else { me.$message({ message: 'ä¿å˜æˆåŠŸ', type: 'success' }); if (callback) { callback(); } } }); } else { if (callback) { callback(); } } }, addData(){ var me = this; var config = { totab: false, //true: 以Tabå¯¼èˆªçš„æ–¹å¼æ‰“å¼€ width: "500px", height: "300px", icon: "icon-product", text: "页颿ƒé™æ–°å¢ž", id: "page_role_edit",//totab: trueæ—¶éœ€è®¾ç½®ï¼Œç”¨äºŽåˆ¤æ–æ˜¯å¦å·²æ‰“å¼€æ¤é¡µé¢ url: "module/config/page/page_role_edit.html", data: {}, delta: {}, sceneCode: "add", callback: function(obj, callback) { me.onQuery(); if (callback) { callback(); } } }; me.doPopupByPublic(config); }, editData(sceneCode, row) { var me = this; // var row = this.selectedrow; if (!row || !row.id) { Root.message({ type: 'warning', message: '请选择è¦ç¼–辑的数æ®' }); return false; } var config = { totab: false, //true: 以Tabå¯¼èˆªçš„æ–¹å¼æ‰“å¼€ width: "500px", height: "300px", icon: "icon-product", text: "页颿ƒé™ä¿®æ”¹", id: "page_role_edit",//totab: trueæ—¶éœ€è®¾ç½®ï¼Œç”¨äºŽåˆ¤æ–æ˜¯å¦å·²æ‰“å¼€æ¤é¡µé¢ url: "module/config/page/page_role_edit.html", data: row, delta: me.dataname, sceneCode: sceneCode,//"refuseedit",//"approval", //"add"//"browse", callback: function(obj, callback) { me.onQuery(); if (callback) { callback(); } } }; me.doPopupByPublic(config); }, delData(row) { let me = this; // let row = this.selectedrow; let name_ = "该数æ®"; if (!this.dataname) { Root.message({ type: 'warning', message: '该事件需指定数æ®å¯¹è±¡' }); return } if (!row.id) { Root.message({ type: 'warning', message: '该事件需å˜åœ¨æ•°æ®ID' }); return } Root.confirm('ç¡®å®šåˆ é™¤' + name_ + 'å—?', 'åˆ é™¤æç¤º', { confirmButtonText: 'åˆ é™¤', cancelButtonText: 'å–æ¶ˆ', type: 'warning' }).then(() => { let param = { id: row.id, dataname: this.dataname, } Server.call("root/data/deleteEntity", param, function(result) { console.log(result); Root.message({ type: 'success', message: 'åˆ é™¤æˆåŠŸ!' }); me.doQuery(); }); }).catch(() => { Root.message({ type: 'info', message: '已喿¶ˆåˆ 除' }); }); }, } }); }; loadJsCss(function () { initVue(); }); </script> <style> /* 在vue.jsä¸ v-cloak 这个指令是防æ¢é¡µé¢åŠ è½½æ—¶å‡ºçŽ° vuejs çš„å˜é‡å而设计的 */ [v-cloak] { display: none !important; } .table_title, .el-tree-node__label { font-size: 12px !important; } </style> </head> <body style="margin: 0px;"> <div v-cloak id="vbody"> <div id="page_root"> <div class="h_dialog__body" style="margin-top: 10px;"> <div style="width: 100%; height: 100%; box-sizing: border-box;"> <div style="width: 29%; height: 100%; float: left; border: 1px solid #ccc;"> <div style="height: 32px; border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;"> <div class="table_title" style="line-height: 32px;"> <span>页é¢è§’色列表</span> </div> <!-- <div style="margin-right: 5px"> <el-button-group style="margin-left: 3px"> <el-button @click="addData" :icon="buttonsconfig.add.icon">{{buttonsconfig.add.name}}</el-button> <el-button @click="editData":icon="buttonsconfig.alter.icon">{{buttonsconfig.alter.name}}</el-button> <el-button @click="delData" :disabled="!(selectedrow && selectedrow.id)" type="danger" :icon="buttonsconfig.delete.icon">{{buttonsconfig.delete.name}}</el-button> </el-button-group> </div> --> </div> <h-table v-if="isRefresh && tableFields.length" ref="table1" :table-fields="tableFields" :table-data="tableData" :is-edit-table-data="isEditTableData" :table-height="tableHeight - 76" :table-field-click="tablefieldClick" :table-buttons-click="tablebuttonclick" :is-highlight-row="true" :tableloading="tableloading" :filtersobj="filterObj" :isdraggableorder="false" :is-pagination="false" :isfilterfield="false" :isbasicfilterfields="false" :istablebuttons="false" v-on:get-data="getData" v-on:row-click="rowClick" > </h-table> <!-- :pagesize="pagesize" :pagenum="pagenum" :total="total" --> </div> <div :style="{width: '70%', height: tableHeight +'px', float: 'right', border: '1px solid #ccc'}"> <el-container> <el-aside :style="{width: '280px', height: tableHeight +'px'} "> <div class="table_title" style="border-bottom: 1px solid #ccc; width: 260px; height: 32px; padding-left: 20px;"> <div style="float: left; margin-left: 10px; line-height: 32px;"> <span>èœå•</span> </div> <div style="float: right; margin-right: 5px; line-height: 32px;"> <el-button @click="onSaveMenuByRole" :loading="savem":icon="buttonsconfig.save.icon">{{buttonsconfig.save.name}}</el-button> </div> </div> <div :style="{width: '280px', height: tableHeight - 35 +'px', overflow: 'auto'}"> <!-- <el-tree v-if="refresh_menu" style="margin: 10px;" ref="menuTree" :data="menuList" show-checkbox highlight-current node-key="id" :default-expanded-keys="start_expanded_keys" :default-checked-keys="checkedMenu" :props="defaultProps" @node-click="menuTreeNodeClick" > </el-tree> --> <h-tree v-if="refresh_menu" ref="menuTree" :tree-txt-formatter="treeTxtFormatter" :is-checkbox="true" :default-expand-all="false" :tree-data="menuList" :default-checked-keys="checkedMenu" :is-readonly="true" :expand-on-click-node="true" @node-click="menuTreeNodeClick" @check-click="menuTreeCheckClick" > </h-tree> </div> </el-aside> <el-main :style="{height: tableHeight +'px', 'border-left': '1px solid #ccc', padding: 0}"> <div class="table_title" style="border-bottom: 1px solid #ccc; height: 32px; padding-left: 20px;"> <div style="float: left; margin-left: 10px; line-height: 32px;"> <span>{{title_name ? title_name : "请选择èœå•"}}</span> </div> <div style="float: right; margin-right: 5px; line-height: 32px;"> <el-button @click="onSaveResourceByPage" :loading="savebt" :disabled="!(pageid && options_tree_bt.length)":icon="buttonsconfig.save.icon">{{buttonsconfig.save.name}}</el-button> </div> </div> <div :style="{height: (tableHeight - 35) +'px', padding: '0px 10px', 'box-sizing': 'border-box', overflow: 'auto'}"> <h-tree ref="btTree" :tree-txt-formatter="treeTxtFormatter_bt" :is-checkbox="true" :checkstrictly="true" :default-expand-all="true" :tree-data="options_tree_bt" :default-checked-keys="bt_selected" :is-readonly="true" @check-click="btTreeCheckClick" > </h-tree> </div> </el-main> </el-container> </div> </div> </div> </div> </div> <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;"> <div class="spinner"> <div class="cube1"></div> <div class="cube2"></div> </div> </div> </body> </html>