新增页面

src/api/system/index.js

@@ -172,6 +172,49 @@ export function queryTreeMenu(data) {
   })
 }
 
+/**
+ * 获取菜单功能权限分页列表
+ */
+export function queryMenuFunctionPage(data) {
+  return request({
+    url: '/Public/GetMenuFunctionPage',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 新增修改菜单功能权限
+ */
+export function saveMenuFunction(data) {
+  return request({
+    url: '/Public/SetMenuFunction',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 根据菜单功能权限编号获取功能权限实体
+ */
+export function queryMenuFunction(data) {
+  return request({
+    url: '/Public/GetMenuFunction',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 修改菜单功能权限状态
+ */
+export function saveMenuFunctionStatus(data) {
+  return request({
+    url: '/Public/SetMenuFunctionStatus',
+    method: 'post',
+    data
+  })
+}
 
 /**
  * 获取角色分页列表

src/components/system/menufunction-form.vue

+<template>
+  <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.MenuId==0?'新增菜单功能权限信息':'修改菜单功能权限信息'}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="text-caption q-mb-lg q-px-md text-grey-6">菜单功能权限信息</div>
+        <div class="row wrap">
+          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.FunctionName" ref="FunctionName"
+            class="col-6 q-pr-lg q-pb-lg" label="功能名称" :rules="[val => !!val || '请填写功能名称']" />
+          <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.FunctionCode" ref="FunctionCode"
+            class="col-6 q-pr-lg q-pb-lg" label="功能编码" />
+          <q-input filled stack-label maxlength="200" :dense="false" v-model="objOption.Remarks" ref="Remarks"
+            class="col-6 q-pr-lg q-pb-lg" label="功能备注" />
+          <div class="col-6 q-pr-lg q-pb-lg q-pt-lg">
+            <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0"
+              v-model="objOption.Status" />
+            <div class="text-grey-6 text-caption">注意：关闭后，菜单功能权限将无法正常使用.</div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" color="dark" style="font-weight:400 !important" @click="closeSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="saveSystemMenu" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+  import {
+    saveMenuFunction,
+    queryMenuFunction
+  } from '../../api/system/index'
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          Id: 0, //主键编号
+          MenuId: 0, //菜单编号
+          FunctionName: "", //权限名称
+          FunctionCode: "", //权限编号
+          Remarks: "", //权限备注
+          Status: 0, //状态(0-正常,1-禁用)},
+        },
+        optionTitle: "",
+        saveLoading: false,
+      }
+    },
+    mounted() {
+      this.initObj()
+    },
+    methods: {
+      //初始化表单
+      initObj() {
+        if (this.saveObj && this.saveObj.Id > 0) {
+          queryMenuFunction({
+            Id: this.saveObj.Id
+          }).then(res => {
+            this.objOption.Id = res.Data.Id;
+            this.objOption.MenuId = res.Data.MenuId;
+            this.objOption.FunctionName = res.Data.FunctionName;
+            this.objOption.FunctionCode = res.Data.FunctionCode;
+            this.objOption.Remarks = res.Data.Remarks;
+            this.objOption.Status = res.Data.Status;
+          })
+          this.optionTitle = "修改菜单功能权限信息"
+        } else {
+          this.optionTitle = "新增菜单功能权限"
+          this.objOption.Id = 0;
+          this.objOption.MenuId = 0;
+          this.objOption.FunctionName = "";
+          this.objOption.FunctionCode = "";
+          this.objOption.Remarks = "";
+          this.objOption.Status = 0;
+        }
+      },
+      //关闭弹窗
+      closeSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      //保存菜单
+      saveSystemMenu() {
+        this.saveLoading = true
+        saveMenuFunction(this.objOption).then(res => {
+          this.saveLoading = false
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          this.$emit("success")
+          this.closeSaveForm()
+        }).catch(() => {
+          this.saveLoading = false
+        })
+      }
+    },
+  }
+
+</script>

src/pages/system/dept.vue

@@ -56,7 +56,6 @@
     </div>
   </div>
 </template>
-
 <script>
   import {
     getDeptPage,

src/pages/system/menu.vue

@@ -44,6 +44,9 @@
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
               @click="EditMenu(props.row)" />
+              
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="功能权限"
+              @click="gotomenufunction(props.row)" />
           </q-td>
         </template>
       </q-table>
@@ -172,6 +175,13 @@
       this.getmenulist()
     },
     methods: {
+      //跳转到功能权限
+      gotomenufunction(obj) {
+        var tempStr = '/system/menufunction?menuId=' + obj.MenuId;
+        this.$router.push({
+          path: tempStr
+        });
+      },
       //初始化下拉框
       initData() {
         this.MenuTypeOpts = getMenuTypeList();

src/pages/system/menufunction.vue

+<template>
+  <div class="page-body">
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+      </div>
+      <div class="page-option">
+        <q-btn color="accent" class="q-mr-md" icon="add" label="新增功能权限" @click="EditMenu(null)" />
+      </div>
+    </div>
+    <div class="page-content">
+      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
+        separator="none" title="菜单功能权限信息" :data="data" :columns="columns" row-key="name">
+        <template v-slot:body-cell-Status="props">
+          <q-td :props="props">
+            <q-toggle size="md" color="primary" :false-value="1" :true-value="0" v-model="props.row.Status"
+              title="注意：关闭后，分类将无法正常使用." @input="DeleteMenu(props.row)" />
+          </q-td>
+        </template>
+        <template v-slot:bottom>
+          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
+            :input="true" @input="changePage" />
+        </template>
+        <template v-slot:body-cell-optioned="props">
+          <q-td :props="props">
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
+              @click="EditMenu(props.row)" />
+          </q-td>
+        </template>
+      </q-table>
+      <menufunction-form v-if="isShowMenuForm" :save-obj="menuObjOption" @close="closeMenuSaveForm" @success="refreshPage">
+      </menufunction-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    queryMenuFunctionPage,
+    saveMenuFunctionStatus
+  } from '../../api/system/index'
+  import menufunctionForm from '../../components/system/menufunction-form'
+  export default {
+    meta: {
+      title: "菜单管理"
+    },
+    components: {
+      menufunctionForm,
+    },
+    data() {
+      return {
+        currentUrl: "",
+        columns: [ 
+          {
+            name: 'MenuName',
+            required: true,
+            label: '菜单名称',
+            align: 'left',
+            field: row => row.MenuName
+          },
+          {
+            name: 'FunctionName',
+            label: '功能名称',
+            field: 'FunctionName',
+            align: 'left'
+          },
+          {
+            name: 'FunctionCode',
+            label: '功能编码',
+            field: 'FunctionCode',
+            align: 'left'
+          },
+          {
+            name: 'Remarks',
+            label: '备注',
+            field: 'Remarks',
+            align: 'left'
+          },
+          {
+            name: 'Status',
+            label: '状态',
+            align: 'left',
+            field: 'Status'
+          },
+          {
+            name: 'optioned',
+            label: '操作',
+            field: 'MenuId'
+          }
+        ],
+        data: [],
+        loading: true,
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          rowsPerPage: 12,
+          MenuId: 0
+        },
+        MenuId: 0,
+        pageCount: 0,
+        isShowMenuForm: false,
+        menuObjOption: null,
+      }
+    },
+    mounted() {
+      if (this.$route.query.menuId) {
+        this.MenuId = this.$route.query.menuId;
+        this.msg.MenuId = this.MenuId
+      }
+      this.currentUrl = this.$route.path
+      this.getmenufunctionpage()
+    },
+    methods: {
+      //重新查询
+      resetSearch() {
+        this.msg.pageIndex = 1;
+        this.getmenufunctionpage();
+      },
+      //翻页
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getmenufunctionpage()
+      },
+      //获取菜单分页列表
+      getmenufunctionpage() {
+        this.loading = true;
+        queryMenuFunctionPage(this.msg).then(res => {
+          this.loading = false;
+          this.data = res.Data.PageData;
+          this.pageCount = res.Data.PageCount;
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+      //刷新页面
+      refreshPage() {
+        if (!this.menuObjOption) {
+          this.msg.pageIndex = 1;
+        }
+        this.getmenufunctionpage()
+      },
+      //新增修改菜单
+      EditMenu(obj) {
+        if (obj) {
+          this.menuObjOption = obj
+        } else {
+          this.menuObjOption = null
+        }
+        this.isShowMenuForm = true
+      },
+      //关闭弹窗
+      closeMenuSaveForm() {
+        this.isShowMenuForm = false
+      },
+      //修改菜单状态
+      DeleteMenu(obj) {
+        var that = this;
+        var delMsg = {
+          Id: obj.Id,
+          Status: obj.Status
+        };
+        var tipMsg = "";
+        if (delMsg.Status == 0) {
+          tipMsg = "是否启用【" + obj.FunctionName + "】菜单?";
+        } else {
+          tipMsg = "是否禁用【" + obj.FunctionName + "】菜单?";
+        }
+        this.$q.dialog({
+          title: '提示信息',
+          message: tipMsg,
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          saveMenuFunctionStatus(delMsg).then(res => {
+            if (res.Code == 1) {
+              that.$q.notify({
+                icon: 'iconfont icon-chenggong',
+                color: 'accent',
+                timeout: 2000,
+                message: '操作成功',
+                position: 'top'
+              })
+              that.getmenufunctionpage();
+            }
+          })
+        }).onCancel(() => {
+          obj.Status = obj.Status == 1 ? 0 : 1;
+        });
+      }
+    }
+  }
+
+</script>
+<style lang="sass">
+  @import url('~assets/css/table.sass');
+
+</style>

src/router/routes.js

@@ -52,6 +52,11 @@ const routes = [{
         component: () =>
           import("pages/system/menu.vue")
       },
+      {
+        path: "/system/menufunction", //菜单功能权限管理
+        component: () =>
+          import("pages/system/menufunction.vue")
+      },
       {
         path: "/system/dept", //部门管理
         component: () =>