打印

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@antv/data-set": "^0.11.8",
     "@antv/g2": "^4.2.10",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^1.3.5",
     "clipboard": "^2.0.11",

src/api/printCount.ts

@@ -0,0 +1,12 @@
+import request from '@/benyun/utils/request'
+//查询
+export function query(data:any){
+	return request({
+		url: '/print/printStat/page',
+		method: 'GET',
+    params:data,
+    headers:{
+      'Print-User':'admin'
+    }
+	})
+}

src/api/printLog.ts

@@ -0,0 +1,12 @@
+import request from '@/benyun/utils/request'
+//查询
+export function query(data:any){
+	return request({
+		url: '/print/printLog/page',
+		method: 'GET',
+    params:data,
+    headers:{
+      'Print-User':'admin'
+    }
+	})
+}

src/api/system/menu.ts

@@ -0,0 +1,60 @@
+import request from '@/benyun/utils/request'
+
+// 查询菜单列表
+export function listMenu(query:any) {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询菜单详细
+export function getMenu(menuId:any) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'get'
+  })
+}
+
+// 查询菜单下拉树结构
+export function treeselect() {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function roleMenuTreeselect(roleId:any) {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增菜单
+export function addMenu(data:any) {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateMenu(data:any) {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delMenu(menuId:any) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  })
+}

src/benyun/components/byTable/byTable.vue

@@ -60,8 +60,12 @@
             <component v-else-if="item.component" :is="item.component" :ref="item.prop+'Comp'" :propConfig="item.compConfig" :parentValue="row"
               :propValue="row[item.field]" @onChange="onChange($event, row,item.field)" />
             <template v-else>
-              <div v-if="item.isDetail" :class="{'ellipsis':item.ellipsis}" :title="row[item.field]" :style="{ 'text-align': item.align }" class="tdCol detail" @click="detail(row)">{{ row[item.field] }}</div>
-              <div class="tdCol" :class="{'ellipsis':item.ellipsis}" :title="row[item.field]" :style="{ 'text-align': item.align }" v-else>{{ row[item.field] }}</div>
+              <div v-if="item.isDetail" :class="{'ellipsis':item.ellipsis}" :title="row[item.field]" :style="{ 'text-align': item.align }" class="tdCol detail" @click="detail(row)">
+                {{ item.formatField ? formatField(item,row) : row[item.field] }}
+              </div>
+              <div class="tdCol" :class="{'ellipsis':item.ellipsis}" :title="row[item.field]" :style="{ 'text-align': item.align }" v-else>
+                {{ item.formatField ? formatField(item,row) : row[item.field] }}
+              </div>
             </template>
             
           </template>
@@ -120,6 +124,7 @@
       slot: true/false  //是否插槽
       isDetail:true/false  //点击详情
       tree-node: true/false  //展开节点
+      formatField:(item)=>{}  //格式化内容
     }],
     request:{}
   }
@@ -236,6 +241,13 @@ export default class ByTable extends VueViews {
     return true
   }
 
+  //格式化内容
+  formatField(config:any,row:any){
+    if(config.formatField){
+      return config.formatField(row)
+    }
+  }
+
   //组件值的变化
   onChange(val:any,row:any,code:string){
     if(val && (val as any).constructor == Object){

src/components/HelloWorld.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/IconSelect/index.vue

@@ -0,0 +1,68 @@
+<!-- @author young
+<template>
+  <div class="icon-body">
+    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
+      <i slot="suffix" class="el-icon-search el-input__icon" />
+    </el-input>
+    <div class="icon-list">
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
+        <span>{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from './requireIcons'
+export default {
+  name: 'IconSelect',
+  data() {
+    return {
+      name: '',
+      iconList: icons
+    }
+  },
+  methods: {
+    filterIcons() {
+      this.iconList = icons
+      if (this.name) {
+        this.iconList = this.iconList.filter(item => item.includes(this.name))
+      }
+    },
+    selectedIcon(name) {
+      this.$emit('selected', name)
+      document.body.click()
+    },
+    reset() {
+      this.name = ''
+      this.iconList = icons
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .icon-body {
+    width: 100%;
+    padding: 10px;
+    .icon-list {
+      height: 200px;
+      overflow-y: scroll;
+      div {
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: -5px;
+        cursor: pointer;
+        width: 33%;
+        float: left;
+      }
+      span {
+        display: inline-block;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+      }
+    }
+  }
+</style>

src/components/IconSelect/requireIcons.js

@@ -0,0 +1,11 @@
+
+const req = require.context('../../assets/icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const icons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default icons

src/components/skuModal/productModal.vue

@@ -156,9 +156,7 @@ export default class ProductModal extends Vue {
   //显示弹窗
   show(){
     if(this.data.length ==0){
-      this.time =setInterval(()=>{
-        this.getList()
-      },500) 
+      this.getList()
     }
     if(this.$refs.view){
       (this.$refs.view as any).clearCheckboxRow();
@@ -167,12 +165,15 @@ export default class ProductModal extends Vue {
   getList(){
     if(!this.$refs.view){
       if(this.timeNum > 5){
-        clearInterval(this.time)
+        return
       }
+      setTimeout(()=>{
+        this.getList()
+      },500) 
       this.timeNum ++;
+
       return
     }
-    clearInterval(this.time)
     let query:any = (this.$refs.view as any).getQuery();
     query.isLikeSearch = '1';
     this.load = true;

src/components/supplierModal/supplierModal.vue

@@ -141,9 +141,7 @@ export default class SupplierModal extends Vue {
   //显示弹窗
   show(){
     if(this.data.length ==0){
-      this.time =setInterval(()=>{
-        this.getList()
-      },500) 
+      this.getList()
     }
     if(this.$refs.view){
       (this.$refs.view as any).clearCheckboxRow();
@@ -152,12 +150,14 @@ export default class SupplierModal extends Vue {
   getList(){
     if(!this.$refs.view){
       if(this.timeNum > 5){
-        clearInterval(this.time)
+        return
       }
+      setTimeout(()=>{
+        this.getList()
+      },500) 
       this.timeNum ++;
       return
     }
-    clearInterval(this.time)
     let query:any = (this.$refs.view as any).getQuery();
     query.isLikeSearch = '1';
     this.$emit('supplierRequestAfter',query);

src/components/userModal/userModal.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-input placeholder="请选择标签" :value="userValue.userName" @clear="clearValue" size="small" class="myinpuy-with-select" clearable>
+      <el-button slot="append" icon="el-icon-more" @click="value = true"></el-button>
+    </el-input>
+    <vxe-modal v-model="value" id="userDialogModal" v-loading="load" width="900px" height="80%" @show="show" show-zoom resize transfer show-footer>
+      <template #title>
+        <span>选择用户</span>
+      </template>
+      <template #default>
+        <module-view :propConfig="config" ref="view" @pagination="getList" @onRefresh="getList" @resert="queryList" @search="queryList"  />
+      </template>
+      <template #footer>
+        <div class="btn">
+          <el-button plain size="small" @click="value = false">取消</el-button>
+          <el-button type="primary" size="small" @click="confirm">确定</el-button>
+        </div>
+      </template>
+    </vxe-modal>
+  </div>
+ 
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { listUser } from '@/api/system/user'
+@Component
+export default class UserModal extends Vue {
+  value=false;
+  load=false;
+  isSearch=false
+  timeNum = 0;
+  userValue:any={};
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small',
+      },
+      columns:[
+        [{
+          span:10,
+          label:'用户名称',
+          prop:'userName',
+          component:'by-input',
+          labelWidth:'120px',
+          compConfig:{
+            attr:{
+              clearable:true
+            }
+          }
+        },{
+          span:10,
+          label:'部门',
+          prop:'deptId',
+          component:'select-tree',
+          labelWidth:'120px',
+          compConfig:{
+            attr:{
+              clearable:true,
+              retConfig:{
+                deptId:'id',
+                deptName:'label'
+              },
+              label:'label',
+            },
+            request:{
+              url:'/system/dept/treeselect',
+              method:"GET"
+            }
+          }
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        radio:true,
+        seq:true,
+        align:'center',
+        triggerRowCheck:'row',
+        pageSize:10
+      },
+      columns:[{
+        title:'用户名称',
+        field:'userName'
+      },{
+        title:'用户昵称',
+        field:'nickName'
+      },{
+        title:'部门',
+        field:'deptName',
+        formatField:(row:any) =>{
+          if(row.dept?.deptName){
+            return row.dept.deptName
+          }else{
+            return '';
+          }
+        }
+      }]
+    }
+  }
+  mounted(){
+    
+  }
+  //分页
+  pagination(){
+    if(this.isSearch){
+      this.queryList();
+    }else{
+      this.getList()
+    }
+  }
+  show(){
+    this.getList();
+  }
+  //列表请求（只有分页，不包含搜素条件）
+  getList(){
+    if(!this.$refs.view){
+      if(this.timeNum > 5){
+        return
+      }
+      setTimeout(()=>{
+        this.getList()
+      },500) 
+      this.timeNum ++;
+      return
+    }
+    this.isSearch = false;
+    let data = (this.$refs.view as any).getPage();
+    delete data.total;
+    this.requestList(data);
+  }
+  //列表请求（包含分页和搜素条件）
+  queryList(){
+    this.isSearch = true;
+    let data = (this.$refs.view as any).getQuery();
+    delete data.total;
+    this.requestList(data);
+  }
+  requestList(data:any){
+    this.load = true;
+    listUser(data).then((res:any) => {
+      this.load = false;
+      (this.$refs.view as any).setTableValue(res.rows);
+      let page = {
+        total: res.data.total //总条数
+      };
+      (this.$refs.view as any).setPage(page)
+
+    }).catch(()=>{
+      this.load = false;
+    })
+  }
+  //获取已选中表格数据
+  getSelectdata(){
+    let data:Array<any>=[];
+    if(this.$refs.view){
+      data = (this.$refs.view as any).getSelectData()
+    }
+    return data;
+  }
+  //确定
+  confirm(){
+    let data:Array<any>=this.getSelectdata();
+    if(data.length == 0){
+      this.$message('请选择用户！')
+      return
+    }
+    this.userValue.userId = data[0].userId;
+    this.userValue.userName = data[0].userName;
+    this.value = false;
+    this.onChange();
+  }
+  onChange(){
+    this.$emit('onChange',this.userValue);
+  }
+  // 清空数据
+  clearValue(){
+    this.userValue = {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/main.ts

@@ -48,7 +48,8 @@ import warehousePosition from './components/warehousePosition/warehousePosition.
 Vue.component('warehousePosition', warehousePosition);
 import byLog from './components/byLog/byLog.vue';
 Vue.component('byLog', byLog);
-
+import userModal from './components/userModal/userModal.vue';
+Vue.component('user-modal', userModal);
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size

src/views/print/printCount/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="print-count">
+    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { query} from '@/api/printCount'
+@Component({components:{}})
+export default class PrintCount extends Vue {
+  load=false;
+  isSearch=false
+  timeNum = 0;
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small'
+      },
+      columns:[
+        [{
+          span:8,
+          label:'模板名称',
+          prop:'templateName',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              clearable:true
+            }
+          }
+        },{
+          span:8,
+          label:'外部用户标识',
+          prop:'userId',
+          component:'user-modal',
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true,
+        add:true,
+        delete:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        checkbox:true
+      },
+      columns:[{
+        title:'外部用户标识',
+        field:'userId',
+        width:130
+      },{
+        title:'模板名称',
+        field:'templateName'
+      },{
+        title:'打印次数',
+        field:'printCount',
+        width:130
+      },{
+        title:'最后一次打印时间',
+        field:'lastTime',
+        width:150
+      }]
+    }
+  }
+  //分页
+  pagination(){
+    if(this.isSearch){
+      this.queryList();
+    }else{
+      this.getList()
+    }
+  }
+  //列表请求（只有分页，不包含搜素条件）
+  getList(){
+    if(!this.$refs.view){
+      if(this.timeNum > 5){
+        return
+      }
+      setTimeout(()=>{
+        this.getList()
+      },500) 
+      this.timeNum ++;
+      return
+    }
+    this.isSearch = false;
+    let data = (this.$refs.view as any).getPage();
+    delete data.total;
+    this.requestList(data);
+  }
+  //列表请求（包含分页和搜素条件）
+  queryList(){
+    this.isSearch = true;
+    let data = (this.$refs.view as any).getQuery();
+    delete data.total;
+    this.requestList(data);
+  }
+  requestList(data:any){
+    this.load = true;
+    query(data).then((res:any) => {
+      this.load = false;
+      (this.$refs.view as any).setTableValue(res.data.records);
+      let page = {
+        pageNo: res.data.current, //当前页
+        pageSize: res.data.size, //每页条数
+        total: res.data.total //总条数
+      };
+      (this.$refs.view as any).setPage(page)
+
+    }).catch(()=>{
+      this.load = false;
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.print-count{
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+}
+</style>

src/views/print/printLog/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="print-log">
+    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList"/>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { query} from '@/api/printLog'
+@Component({components:{}})
+export default class PrintLog extends Vue {
+  load=false;
+  isSearch=false
+  timeNum = 0;
+  config:any={
+    attr:{
+      calculateH:true
+    },
+    search:{
+      attr:{
+        size:'small'
+      },
+      columns:[
+        [{
+          span:8,
+          label:'模板名称',
+          prop:'templateName',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              clearable:true
+            }
+          }
+        },{
+          span:8,
+          label:'打印时间',
+          prop:'printTime',
+          component:'user-modal',
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true,
+        add:true,
+        delete:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        checkbox:true
+      },
+      columns:[{
+        title:'外部用户标识',
+        field:'userId',
+        width:130
+      },{
+        title:'模板名称',
+        field:'templateName'
+      },{
+        title:'打印时间',
+        field:'printTime',
+        width:150
+      },{
+        title:'输出类型',
+        field:'outType',
+        width:120
+      },{
+        title:'输出是否成功',
+        field:'success',
+        width:120
+      }]
+    }
+  }
+  //分页
+  pagination(){
+    if(this.isSearch){
+      this.queryList();
+    }else{
+      this.getList()
+    }
+  }
+  //列表请求（只有分页，不包含搜素条件）
+  getList(){
+    if(!this.$refs.view){
+      if(this.timeNum > 5){
+        return
+      }
+      setTimeout(()=>{
+        this.getList()
+      },500) 
+      this.timeNum ++;
+      return
+    }
+    this.isSearch = false;
+    let data = (this.$refs.view as any).getPage();
+    delete data.total;
+    this.requestList(data);
+  }
+  //列表请求（包含分页和搜素条件）
+  queryList(){
+    this.isSearch = true;
+    let data = (this.$refs.view as any).getQuery();
+    delete data.total;
+    this.requestList(data);
+  }
+  requestList(data:any){
+    this.load = true;
+    query(data).then((res:any) => {
+      this.load = false;
+      (this.$refs.view as any).setTableValue(res.data.records);
+      let page = {
+        pageNo: res.data.current, //当前页
+        pageSize: res.data.size, //每页条数
+        total: res.data.total //总条数
+      };
+      (this.$refs.view as any).setPage(page)
+
+    }).catch(()=>{
+      this.load = false;
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.print-log{
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+}
+</style>

src/views/print/printPermission/index.vue

@@ -120,13 +120,8 @@ export default class PrintPermission extends Vue {
         columns:[
           [{
             label:'外部用户标识',
-            prop:'userId',
-            component:'by-input',
-            compConfig:{
-              attr:{
-                clearable:true
-              }
-            }
+            prop:'userName',
+            component:'user-modal'
           }],
           [{
             label:'角色',
@@ -279,8 +274,41 @@ export default class PrintPermission extends Vue {
       (this.$refs.view as any).initFormTool();
     }
     if(n == 'onDelete'){
-      
+      this.multipleDel();
+    }
+  }
+  //多个删除
+  multipleDel(){
+    let data = (this.$refs.view as any).getSelectData();
+    if(data.length == 0){
+      this.$message('请选择需要删除的数据！')
+      return
+    }
+    let ids:Array<any>=[];
+    for(const item of data){
+      ids.push(item.id);
     }
+    this.$confirm('此操作将永久删除选中的数据, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      this.del(ids);
+    }).catch(() => {});
+  }
+  //删除
+  del(data:Array<any>){
+    this.load = true;
+    del({ids:data}).then(()=>{
+      this.load = false;
+      this.$message({
+        message:'删除成功！',
+        type:'success'
+      })
+      this.pagination();
+    }).catch(()=>{
+      this.load = false;
+    })
   }
   //点击详情
   detail(){

src/views/print/printTemplate/index.vue

@@ -206,9 +206,9 @@ export default class PrintTemplate extends Vue {
     }
   }
   mounted(){
-    this.$nextTick(()=>{
+    // this.$nextTick(()=>{
       this.getList()
-    })
+    // })
   }
   //预览
   preView(){
@@ -233,6 +233,7 @@ export default class PrintTemplate extends Vue {
       outType:'PDF'
     }).then((res:any) => {
       this.load=false;
+      (window as any).open(res);
 
     }).catch((err:any)=>{
       this.load=false;

src/views/system/menu/index.vue

@@ -0,0 +1,453 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="菜单名称" prop="menuName">
+        <el-input
+          v-model="queryParams.menuName"
+          placeholder="请输入菜单名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:menu:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      row-key="menuId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+      <el-table-column prop="icon" label="图标" align="center" width="100">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="status" label="状态" width="80">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button 
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:add']"
+          >新增</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:menu:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改菜单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级菜单">
+              <treeselect
+                v-model="form.parentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择上级菜单"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="菜单类型" prop="menuType">
+              <el-radio-group v-model="form.menuType">
+                <el-radio label="M">目录</el-radio>
+                <el-radio label="C">菜单</el-radio>
+                <el-radio label="F">按钮</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="form.menuType != 'F'">
+            <el-form-item label="菜单图标" prop="icon">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect ref="iconSelect" @selected="selected" />
+                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    class="el-input__icon"
+                    style="height: 32px;width: 16px;"
+                  />
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                是否外链
+              </span>
+              <el-radio-group v-model="form.isFrame">
+                <el-radio label="0">是</el-radio>
+                <el-radio label="1">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item prop="path">
+              <span slot="label">
+                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                路由地址
+              </span>
+              <el-input v-model="form.path" placeholder="请输入路由地址" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item prop="component">
+              <span slot="label">
+                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                组件路径
+              </span>
+              <el-input v-model="form.component" placeholder="请输入组件路径" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'M'">
+            <el-form-item>
+              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+              <span slot="label">
+                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                权限字符
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item>
+              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
+              <span slot="label">
+                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                路由参数
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType == 'C'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                是否缓存
+              </span>
+              <el-radio-group v-model="form.isCache">
+                <el-radio label="0">缓存</el-radio>
+                <el-radio label="1">不缓存</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                显示状态
+              </span>
+              <el-radio-group v-model="form.visible">
+                <el-radio
+                  v-for="dict in dict.type.sys_show_hide"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.menuType != 'F'">
+            <el-form-item>
+              <span slot="label">
+                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                <i class="el-icon-question"></i>
+                </el-tooltip>
+                菜单状态
+              </span>
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+
+export default {
+  name: "Menu",
+  dicts: ['sys_show_hide', 'sys_normal_disable'],
+  components: { Treeselect, IconSelect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      menuList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        menuName: undefined,
+        visible: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        menuName: [
+          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+        ],
+        path: [
+          { required: true, message: "路由地址不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.form.icon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+      listMenu(this.queryParams).then(response => {
+        this.menuList = this.handleTree(response.data, "menuId");
+        this.loading = false;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listMenu().then(response => {
+        this.menuOptions = [];
+        const menu = { menuId: 0, menuName: '主类目', children: [] };
+        menu.children = this.handleTree(response.data, "menuId");
+        this.menuOptions.push(menu);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        menuId: undefined,
+        parentId: 0,
+        menuName: undefined,
+        icon: undefined,
+        menuType: "M",
+        orderNum: undefined,
+        isFrame: "1",
+        isCache: "0",
+        visible: "0",
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.menuId) {
+        this.form.parentId = row.menuId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加菜单";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      getMenu(row.menuId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改菜单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.menuId != undefined) {
+            updateMenu(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addMenu(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
+        return delMenu(row.menuId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>