新增一级菜单和子菜单

<template><div><!-- 表头 --><div style="color: #606266;margin-bottom: 10px;"><span style="border:4px solid #5D78FF;border-radius:60px;vertical-align: middle;"></span><span style="font-size: 22px;margin-left: 10px;vertical-align: middle;font-weight: lighter;">菜单管理</span><spanstyle="font-size: 14px;margin-left: 10px;vertical-align: middle;font-weight: lighter;color: #909399;">**请确保当前系统是否空闲，菜单操作会导致所有应用刷新页面，所有未保存数据都将会丢失**</span></div><div style="border-bottom:1px solid #DCDFE6;margin-bottom: 15px;"></div><!-- ******* --><div style="margin-bottom: 10px;"><el-button plain size="small" type="primary" @click="addmenus">新建一级菜单</el-button></div><div><el-table:data="tabledata.filter(item => item.path !== '/' && item.path !== '/home' && item.path !== '/hidde' && item.path !== '/login')"style="width: 100%;margin-bottom: 20px;" row-key="name" border default-expand-all:tree-props="{children: 'children'}" :row-class-name="rowClass"><el-table-column prop="name" label="Name" width="180px"></el-table-column><el-table-column prop="path" label="Path" width="180px" align="center"></el-table-column><el-table-column prop="meta.title" label="名称" width="120px" align="center"></el-table-column><el-table-column prop="component.__file" label="Url" align="center"></el-table-column><el-table-column label="操作" align="center" width="180px"><template slot-scope="scope"><el-button plain size="mini"v-if="scope.row.component.__file != 'src/renderer/components/Layout.vue'">编辑</el-button><el-button plain size="mini"v-if="scope.row.component.__file != 'src/renderer/components/Layout.vue'" type="danger"@click="handledel(scope.$index, scope.row)">删除</el-button><el-button plain size="mini"v-if="scope.row.component.__file == 'src/renderer/components/Layout.vue'" type="success"@click="handleadd(scope.$index, scope.row)">新增子菜单</el-button></template></el-table-column></el-table></div><!-- 创建一级菜单 --><el-dialog :visible.sync="newmenus" :append-to-body="true" :before-close="handleClose"><!-- 表头 --><div style="color: #606266;margin-bottom: 10px;"><span style="border:4px solid #5D78FF;border-radius:60px;vertical-align: middle;"></span><spanstyle="font-size: 22px;margin-left: 10px;vertical-align: middle;font-weight: lighter;">创建一级菜单</span></div><div style="border-bottom:1px solid #DCDFE6;margin-bottom: 15px;"></div><!-- ******* --><el-form ref="form" :model="menforms" label-width="100px"><el-form-item label="菜单名称: "><el-input v-model="menforms.mennames"></el-input></el-form-item><el-row><el-col :span="12"><el-form-item label="中文名称: "><el-input v-model="menforms.mencnames"></el-input></el-form-item></el-col></el-row><el-form-item label="图标: "><el-row><el-col :span="14"><el-input v-model="menforms.fileicon" :disabled="true"></el-input></el-col><el-col :span="4"><el-popover placement="left" width="600" trigger="click"><el-row><el-col v-for="(item,index) in cities" :key="index" :span="2" style="padding: 1px;"><el-button size="mini" circle :icon="item" @click="selectIcon(item)"></el-button></el-col></el-row><el-button style="margin-left: 5px;" size="mini" slot="reference" icon="el-icon-info"circle></el-button></el-popover></el-col></el-row></el-form-item><el-form-item label="子菜单名称: "><el-input v-model="menforms.filenames"></el-input></el-form-item><el-row><el-col :span="12"><el-form-item label="子中文名称: "><el-input v-model="menforms.filecnames"></el-input></el-form-item></el-col></el-row><el-form-item><el-button type="primary" style="width: 100%;" @click="addsetmenu">确定</el-button></el-form-item></el-form></el-dialog><!-- 创建子菜单 --><el-dialog :visible.sync="newmenu" :append-to-body="true" :before-close="handleClose"><!-- 表头 --><div style="color: #606266;margin-bottom: 10px;"><span style="border:4px solid #5D78FF;border-radius:60px;vertical-align: middle;"></span><spanstyle="font-size: 22px;margin-left: 10px;vertical-align: middle;font-weight: lighter;">创建子菜单</span></div><div style="border-bottom:1px solid #DCDFE6;margin-bottom: 15px;"></div><!-- ******* --><el-form ref="form" :model="menform" label-width="80px"><el-form-item label="菜单名称: "><el-input v-model="menform.menname"></el-input></el-form-item><el-form-item label="中文名称: "><el-input v-model="menform.mencname"></el-input></el-form-item><el-form-item label="应用信息: "><span style="color: #909399;">{{menall}}</span></el-form-item><el-form-item><el-button type="primary" style="width: 100%;" @click="onaddmenu">确定</el-button></el-form-item></el-form></el-dialog><!-- 删除 --><el-dialog title="警告!" :visible.sync="delmenu" width="30%" :append-to-body="true"><div style="color: #DD004E;"><h2>删除容易，制作难</h2><h2>你确定要删除 <span style="font-size: 18px;color: #546CE6;">{{delname}}</span> 这个菜单吗？</h2></div><span slot="footer" class="dialog-footer"><el-button @click="delmenu = false">取 消</el-button><el-button type="primary" @click="delmenukey">确 定</el-button></span></el-dialog></div>
</template>
<script>import set from '../../../../set.json'export default {data() {return {tabledata: [],newmenu: false, //子菜单newmenus: false, //一级菜单delmenu: false, //删除menform: { //子菜单表单menname: '',mencname: ''},menforms: { //一级菜单表单filenames: '',filecnames: '',mennames: '',mencnames: '',fileicon: ''},menall: '',delname: '',delkey: 0,cities: ["el-icon-platform-eleme","el-icon-eleme","el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-more","el-icon-more-outline","el-icon-star-on","el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success","el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help","el-icon-help","el-icon-minus","el-icon-plus","el-icon-check","el-icon-close","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-upload2","el-icon-download","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera","el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion","el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment","el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-share","el-icon-d-caret","el-icon-caret-left","el-icon-caret-right","el-icon-caret-bottom","el-icon-caret-top","el-icon-bottom-left","el-icon-bottom-right","el-icon-back","el-icon-right","el-icon-bottom","el-icon-top","el-icon-top-left","el-icon-top-right","el-icon-arrow-left","el-icon-arrow-right","el-icon-arrow-down","el-icon-arrow-up","el-icon-d-arrow-left","el-icon-d-arrow-right","el-icon-video-pause","el-icon-video-play","el-icon-refresh","el-icon-refresh-right","el-icon-refresh-left","el-icon-finished","el-icon-sort","el-icon-sort-up","el-icon-sort-down","el-icon-rank","el-icon-loading","el-icon-view","el-icon-c-scale-to-original","el-icon-date","el-icon-edit","el-icon-edit-outline","el-icon-folder","el-icon-folder-opened","el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-tickets","el-icon-document-remove","el-icon-document-delete","el-icon-document-copy","el-icon-document-checked","el-icon-document","el-icon-document-add","el-icon-printer","el-icon-paperclip","el-icon-takeaway-box","el-icon-search","el-icon-monitor","el-icon-attract","el-icon-mobile","el-icon-scissors","el-icon-umbrella","el-icon-headset","el-icon-brush","el-icon-mouse","el-icon-coordinate","el-icon-magic-stick","el-icon-reading","el-icon-data-line","el-icon-data-board","el-icon-pie-chart","el-icon-data-analysis","el-icon-collection-tag","el-icon-film","el-icon-suitcase","el-icon-suitcase-1","el-icon-receiving","el-icon-collection","el-icon-files","el-icon-notebook-1","el-icon-notebook-2","el-icon-toilet-paper","el-icon-office-building","el-icon-school","el-icon-table-lamp","el-icon-house","el-icon-no-smoking","el-icon-smoking","el-icon-shopping-cart-full","el-icon-shopping-cart-1","el-icon-shopping-cart-2","el-icon-shopping-bag-1","el-icon-shopping-bag-2","el-icon-sold-out","el-icon-sell","el-icon-present","el-icon-box","el-icon-bank-card","el-icon-money","el-icon-coin","el-icon-wallet","el-icon-discount","el-icon-price-tag","el-icon-news","el-icon-guide","el-icon-male","el-icon-female","el-icon-thumb","el-icon-cpu","el-icon-link","el-icon-connection","el-icon-open","el-icon-turn-off","el-icon-set-up","el-icon-chat-round","el-icon-chat-line-round","el-icon-chat-square","el-icon-chat-dot-round","el-icon-chat-dot-square","el-icon-chat-line-square","el-icon-message","el-icon-postcard","el-icon-position","el-icon-turn-off-microphone","el-icon-microphone","el-icon-close-notification","el-icon-bangzhu","el-icon-time","el-icon-odometer","el-icon-crop","el-icon-aim","el-icon-switch-button","el-icon-full-screen","el-icon-copy-document","el-icon-mic","el-icon-stopwatch","el-icon-medal-1","el-icon-medal","el-icon-trophy","el-icon-trophy-1","el-icon-first-aid-kit","el-icon-discover","el-icon-place","el-icon-location","el-icon-location-outline","el-icon-location-information","el-icon-add-location","el-icon-delete-location","el-icon-map-location","el-icon-alarm-clock","el-icon-timer","el-icon-watch-1","el-icon-watch","el-icon-lock","el-icon-unlock","el-icon-key","el-icon-service","el-icon-mobile-phone","el-icon-bicycle","el-icon-truck","el-icon-ship","el-icon-basketball","el-icon-football","el-icon-soccer","el-icon-baseball","el-icon-wind-power","el-icon-light-rain","el-icon-lightning","el-icon-heavy-rain","el-icon-sunrise","el-icon-sunrise-1","el-icon-sunset","el-icon-sunny","el-icon-cloudy","el-icon-partly-cloudy","el-icon-cloudy-and-sunny","el-icon-moon","el-icon-moon-night","el-icon-dish","el-icon-dish-1","el-icon-food","el-icon-chicken","el-icon-fork-spoon","el-icon-knife-fork","el-icon-burger","el-icon-tableware","el-icon-sugar","el-icon-dessert","el-icon-ice-cream","el-icon-hot-water","el-icon-water-cup","el-icon-coffee-cup","el-icon-cold-drink","el-icon-goblet","el-icon-goblet-full","el-icon-goblet-square","el-icon-goblet-square-full","el-icon-refrigerator","el-icon-grape","el-icon-watermelon","el-icon-cherry","el-icon-apple","el-icon-pear","el-icon-orange","el-icon-coffee","el-icon-ice-tea","el-icon-ice-drink","el-icon-milk-tea","el-icon-potato-strips","el-icon-lollipop","el-icon-ice-cream-square","el-icon-ice-cream-round"]}},methods: {//获取菜单列表menuslist() {this.tabledata = this.$router.options.routes},//表格增加子菜单按钮handleadd(index, row) {this.newmenu = true;this.menall = set.url + "src/renderer/components" + row.path + "/"},//表格删除按钮handledel(index, row) {this.delmenu = true;this.delname = row.name;this.menall = set.url + "src/renderer/components" + row.path + "/"},//删除提交delmenukey() {this.delkey = this.delkey + 1;if (this.delkey == 3) {this.delkey = 0;this.$message.warning({message: '哈哈！你被骗了宝贝，这里并不能删除！'})}},//窗口防止错点提示handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},rowClass({row,rowIndex}) {var opop = row.component.__fileif (opop === "src/renderer/components/Layout.vue") {return 'warning-row';}return '';},//创建子菜单提交onaddmenu() {let menunameData = new FormData();menunameData.append('name', this.menform.menname);menunameData.append('cname', this.menform.mencname);menunameData.append('url', this.menall + this.menform.menname + ".vue");this.$http.post('http://127.0.0.1:8090/index.php/Home/Menu/addmenus', menunameData).then(res => {console.log(res.data);if (res.data == "101") {this.$message.warning({message: '文件已存在'})} else {this.$message.warning({message: '创建成功'})}})},//创建一级菜单addmenus() {this.newmenus = true;},//获取图标selectIcon(city) {this.menforms.fileicon = city},//增加一级菜单提交addsetmenu(){if(this.menforms.mennames == "" || this.menforms.mencnames == "" || this.menforms.fileicon =="" || this.menforms.filenames == "" || this.menforms.filecnames == ""){this.$message.warning({message: '请填写完整信息'})}else{let menuData = new FormData();menuData.append('name', this.menforms.mennames);menuData.append('cname', this.menforms.mencnames);menuData.append('icon', this.menforms.fileicon);menuData.append('names', this.menforms.filenames);menuData.append('cnames', this.menforms.filecnames);this.$http.post('http://127.0.0.1:8090/index.php/Home/Menu/addmenu', menuData).then(res => {// console.log(res.data);if (res.data == "101") {this.$message.warning({message: '文件已存在'})} else {this.$message.warning({message: '创建成功'})}})}}},created() {// console.log(this.$router.options.routes)this.menuslist()}}
</script>
<style>.conls {text-align: center;}.el-table .warning-row {background: #f5f7fa;color: #000000;}.el-table__placeholder::before {background: url('../../../../static/images/file.png') no-repeat 0 3px;content: '';display: block;width: 16px;height: 18px;font-size: 16px;background-size: 16px;}
</style>

新增一级菜单和子菜单相关推荐

HTML5制作二级菜单（主菜单的子菜单）
HTML5制作二级菜单(主菜单的子菜单) 一.HTML文件代码二. CSS文件代码三.效果图一.HTML文件代码  <!DOCTYPE h ...
SWT 下菜单与子菜单添加的实现（详细图解）
SWT 为Java程序的用户界面设计提供了极大的方便,许多新手在刚刚接触SWT时,不知从何下手,往往在实现最简单的功能时也会遇到许许多多的麻烦,比如常遇到的菜单以及子菜单的添加,下面我用一个例程演示一 ...
Electron中实现菜单、子菜单、以及自带操作事件
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
js动态加载div显示主菜单和子菜单+jquery获取动态id
最近在做项目重构的主界面工作中,需要动态显示主菜单以及子菜单(各个界面的链接),查看原来老系统采用的是asp控件,但是重构的时候采用mvc框架,而且这些菜单并不是死的,而是通过其他界面来配置的,主菜单 ...
Menu详解（二）：利用XML生成菜单和子菜单
前言:上篇,我们说了有关代码生成菜单和子菜单的方法,这里我们再讲讲有关利用XML生成菜单和子菜单的问题. 业精于勤,荒于嬉,行成于思,毁于随 (日拱一卒) 系列文章: 1.<Menu详解(一): ...
选项菜单_上下文菜单_子菜单_图标菜单_自定义菜单_联系人标记弹出菜单
菜单控件<Menu > 选项菜单(Option Menu) 单击Menu实体按钮弹出,android中把它叫做option menu 上下文菜单(ContextMenu 是Menu的子接口 ...
（SubMenu）选项菜单和子菜单应用
菜单在桌面上应用广泛,几乎所有的桌面应用都有菜单.与桌面应用的菜单不同,Android应用中的菜单默认是看不见的,只有当用户按下手机上的"MENU"键时,系统才会显示该应用关联的菜 ...
选项菜单和子菜单(SubMenu)
/* * 选项菜单和子菜单(SubMenu) * 添加菜单和子菜单的步骤如下: * 1.重写Activity哦onCreateOptionsMenu(Menu menu)的方法, * 在该 ...
android之三大菜单（子菜单，选项菜单，上下文菜单）
今天班级同学聚餐,真的是喝的有点多,本来计划今天要完成这篇博客.有点喝多了,写的不好请见谅.想仔细了解的话,看官网说的,是中文的. https://developer.android.com/guid ...

新增一级菜单和子菜单

新增一级菜单和子菜单相关推荐

最新文章

热门文章