页面修改

src/api/system/index.js

@@ -80,13 +80,12 @@ export function getMenuList(data) {
  * 获取菜单详情
  * @param {JSON参数} data 
  */
-export function getMenuInfo(data)
-{
-    return request({
-        url: '/Public/GetMenu',
-        method: 'post',
-        data
-      })
+export function getMenuInfo(data) {
+  return request({
+    url: '/Public/GetMenu',
+    method: 'post',
+    data
+  })
 }
 
 /**
@@ -100,3 +99,52 @@ export function saveMenu(data) {
     data
   })
 }
+
+/**
+ * 获取树形结构菜单
+ * @param {JSON参数} data 
+ */
+export function queryTreeMenu(data) {
+  return request({
+    url: '/Public/GetTreeMenu',
+    method: 'post',
+    data
+  })
+}
+
+
+/**
+ * 获取角色分页列表
+ * @param {JSON参数} data 
+ */
+export function queryRolePage(data) {
+  return request({
+    url: '/Public/GetRolePageList',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取角色详情
+ * @param {JSON参数} data 
+ */
+export function queryRoleInfo(data) {
+  return request({
+    url: '/Public/GetRole',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 保存角色
+ * @param {JSON参数} data 
+ */
+export function saveRoleInfo(data) {
+  return request({
+    url: '/Public/SetRole',
+    method: 'post',
+    data
+  })
+}

src/components/system/role-form.vue

@@ -2,30 +2,19 @@
   <q-dialog v-model="persistent" content-class="bg-grey-1" 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>
+        <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="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.MenuName" ref="MenuName"
-            class="col-6 q-pr-lg q-pb-lg" label="菜单名称" :rules="[val => !!val || '请填写菜单名称']" />
-          <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.MenuUrl" ref="MenuUrl"
-            class="col-6 q-pr-lg q-pb-lg" label="菜单地址" />
-          <q-select class="col-6 q-pb-lg" v-model="objOption.MenuType" :options="MenuTypeOpts" emit-value map-options
-            label="菜单类型" @input="queryMenuList()" />
-          <q-select class="col-6 q-pb-lg" v-model="objOption.MenuLevel" :options="MenuLevelOpts" emit-value map-options
-            label="菜单等级" @input="queryMenuList()" />
-          <q-select :option-value="(item) => item === null ? null : item.MenuId" option-label="MenuName"
-            v-model="objOption.ParentId" :options="MenuList" label="上级菜单" :dense="false" emit-value map-options
-            class="col-6 q-pb-lg" />
-          <q-input stack-label maxlength="50" :dense="false" v-model="objOption.MenuIcon" class="col-6 q-pr-lg q-pb-lg"
-            label="图标" />
-          <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.SortNum"
-            class="col-6 q-pr-lg q-pb-lg" label="排序" />
+          <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.RoleName" ref="RoleName"
+            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.RoleIntro" ref="RoleIntro"
+            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 class="text-grey-6 text-caption">注意：关闭后，角色将无法正常使用.</div>
           </div>
         </div>
       </q-card-section>
@@ -33,7 +22,7 @@
       <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" />
+          @click="saveRole" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -41,11 +30,9 @@
 
 <script>
   import {
-    getMenuList,
-    saveMenu,
-    getMenuTypeList,
-    getMenuLevelList,
-    getMenuInfo
+    queryTreeMenu,
+    queryRoleInfo,
+    saveRoleInfo,
   } from '../../api/system/index'
   export default {
     props: {
@@ -56,20 +43,12 @@
     },
     data() {
       return {
-        //菜单等级
-        MenuLevelOpts: [],
-        //菜单类型
-        MenuTypeOpts: [],
         persistent: true,
         objOption: {
-          MenuId: 0, //菜单编号
-          ParentId: 0, //父级节点编号
-          MenuName: "", //菜单名称
-          MenuUrl: "", //菜单地址
-          MenuIcon: "", //菜单图标
-          MenuLevel: -1, //菜单等级
-          MenuType: -1, //菜单类型
-          SortNum: 0, //排序
+          RoleId: 0, //角色编号
+          RoleName: "", //角色名称
+          RoleIntro: "", //角色介绍
+          RoleAuth: "", //角色权限
           Status: 0, //状态(0-正常,1-禁用)},
         },
         optionTitle: "",
@@ -79,7 +58,7 @@
       }
     },
     mounted() {
-      this.initData();
+      this.queryMenuList();
       this.initObj()
     },
     methods: {
@@ -87,61 +66,32 @@
       queryMenuList() {
         this.MenuList = [];
         var qMsg = {
-          MenuLevel: Number(this.objOption.MenuLevel - 1),
-          MenuType: this.objOption.MenuType
+
         }
-        getMenuList(qMsg).then(res => {
-          var tempArray = [];
-          if (res.Data && res.Data.length > 0) {
-            res.Data.forEach(item => {
-              var obj = {
-                MenuId: item.MenuId.toString(),
-                MenuName: item.MenuName
-              };
-              tempArray.push(obj);
-            });
-          }
-          this.MenuList = tempArray;
-          this.$forceUpdate();
+        queryTreeMenu(qMsg).then(res => {
+          console.log("res", res);
         })
       },
-      //初始化下拉框
-      initData() {
-        this.MenuTypeOpts = getMenuTypeList();
-        this.MenuLevelOpts = getMenuLevelList();
-      },
+
       //初始化表单
       initObj() {
-        if (this.saveObj && this.saveObj.MenuId > 0) {
-          if (this.saveObj.MenuType > 0 || this.saveObj.MenuLevel > 0) {
-            this.objOption.MenuType = this.saveObj.MenuType;
-            this.objOption.MenuLevel = this.saveObj.MenuLevel;
-            this.queryMenuList();
-          }
-          getMenuInfo({
-            MenuId: this.saveObj.MenuId
+        if (this.saveObj && this.saveObj.RoleId > 0) {
+          queryRoleInfo({
+            RoleId: this.saveObj.RoleId
           }).then(res => {
-            this.objOption.MenuId = res.Data.MenuId;
-            this.objOption.ParentId = res.Data.ParentId.toString();
-            this.objOption.MenuName = res.Data.MenuName;
-            this.objOption.MenuUrl = res.Data.MenuUrl;
-            this.objOption.MenuIcon = res.Data.MenuIcon;
-            this.objOption.MenuLevel = res.Data.MenuLevel;
-            this.objOption.MenuType = res.Data.MenuType;
-            this.objOption.SortNum = res.Data.SortNum;
+            this.objOption.RoleId = res.Data.RoleId;
+            this.objOption.RoleName = res.Data.RoleName;
+            this.objOption.RoleIntro = res.Data.RoleIntro;
+            this.objOption.RoleAuth = res.Data.RoleAuth;
             this.objOption.Status = res.Data.Status;
           })
-          this.optionTitle = "修改菜单信息"
+          this.optionTitle = "修改角色信息"
         } else {
-          this.optionTitle = "新增菜单"
-          this.objOption.MenuId = 0;
-          this.objOption.ParentId = 0;
-          this.objOption.MenuName = "";
-          this.objOption.MenuUrl = "";
-          this.objOption.MenuIcon = "";
-          this.objOption.MenuLevel = -1;
-          this.objOption.MenuType = -1;
-          this.objOption.SortNum = 0;
+          this.optionTitle = "新增角色"
+          this.objOption.RoleId = 0;
+          this.objOption.RoleName = "";
+          this.objOption.RoleIntro = "";
+          this.objOption.RoleAuth = "";
           this.objOption.Status = 0;
         }
       },
@@ -151,9 +101,9 @@
         this.persistent = false
       },
       //保存菜单
-      saveSystemMenu() {
+      saveRole() {
         this.saveLoading = true
-        saveMenu(this.objOption).then(res => {
+        saveRoleInfo(this.objOption).then(res => {
           this.saveLoading = false
           this.$q.notify({
             icon: 'iconfont icon-chenggong',

src/pages/system/role.vue

@@ -3,20 +3,8 @@
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3">
-          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuName"
-            label="菜单名称" />
-        </div>
-        <div class="col-3">
-          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuUrl"
-            label="菜单地址" />
-        </div>
-        <div class="col-3">
-          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuType" :options="MenuTypeOpts"
-            emit-value map-options label="菜单类型" />
-        </div>
-        <div class="col-3">
-          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuLevel"
-            :options="MenuLevelOpts" emit-value map-options label="菜单等级" />
+          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.RoleName"
+            label="角色名称" />
         </div>
         <div class="col-3">
           <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
@@ -24,12 +12,12 @@
         </div>
       </div>
       <div class="page-option">
-        <q-btn color="accent" class="q-mr-md" icon="add" label="新增菜单" @click="EditMenu(null)" />
+        <q-btn color="accent" class="q-mr-md" icon="add" label="新增角色" @click="EditRole(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">
+        separator="none" title="角色信息" :data="data" :columns="columns" row-key="name">
         <template v-slot:body-cell-Status="props">
           <q-td :props="props">
             <q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
@@ -42,80 +30,60 @@
         <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)" />
+              @click="EditRole(props.row)" />
           </q-td>
         </template>
       </q-table>
-      <menu-form v-if="persistent_menu" :save-obj="menuObjOption" @close="closeMenuSaveForm" @success="refreshPage">
-      </menu-form>
+      <role-form v-if="persistent_role" :save-obj="roleObjOption" @close="closeroleSaveForm" @success="refreshPage">
+      </role-form>
     </div>
   </div>
 </template>
 
 <script>
   import {
-    getMenuPage,
-    getMenuTypeList,
-    getMenuLevelList
+    queryRolePage
   } from '../../api/system/index'
-  import menuForm from '../../components/system/menu-form'
+  import roleForm from '../../components/system/role-form'
   export default {
     meta: {
-      title: "菜单管理"
+      title: "角色管理"
     },
     components: {
-      menuForm,
+      roleForm,
     },
     data() {
       return {
         currentUrl: "",
         columns: [{
-            name: 'MenuId',
-            label: '菜单编号',
-            field: 'MenuId',
+            name: 'RoleId',
+            label: '角色编号',
+            field: 'RoleId',
             align: 'left'
           },
           {
-            name: 'MenuName',
+            name: 'RoleName',
             required: true,
-            label: '菜单名称',
+            label: '角色名称',
             align: 'left',
-            field: row => row.MenuName
-          },
-          {
-            name: 'MenuUrl',
-            label: '菜单地址',
-            field: 'MenuUrl',
-            align: 'left'
-          },
-          {
-            name: 'MenuTypeStr',
-            label: '菜单类型',
-            field: 'MenuTypeStr',
-            align: 'left'
+            field: row => row.RoleName
           },
           {
-            name: 'MenuLevel',
-            label: '菜单等级',
-            field: 'MenuLevel',
+            name: 'RoleIntro',
+            label: '描述',
+            field: 'RoleIntro',
             align: 'left'
           },
           {
-            name: 'MenuIcon',
-            label: '图标',
-            field: 'MenuIcon',
+            name: 'CreateByName',
+            label: '创建人',
+            field: 'CreateByName',
             align: 'left'
           },
           {
-            name: 'SortNum',
-            label: '排序',
-            field: 'SortNum',
-            align: 'left'
-          },
-          {
-            name: 'CreateTimeStr',
+            name: 'CreateDateStr',
             label: '创建时间',
-            field: 'CreateTimeStr',
+            field: 'CreateDateStr',
             align: 'left'
           },
           {
@@ -127,7 +95,7 @@
           {
             name: 'optioned',
             label: '操作',
-            field: 'MenuId'
+            field: 'RoleId'
           }
         ],
         data: [],
@@ -145,51 +113,38 @@
             value: '1'
           }
         ],
-        //菜单等级
-        MenuLevelOpts: [],
-        //菜单类型
-        MenuTypeOpts: [],
         msg: {
           pageIndex: 1,
           pageSize: 12,
           rowsPerPage: 12,
-          MenuName: "",
-          MenuUrl: "",
-          MenuLevel: -1,
-          MenuType: -1,
+          RoleName: "",
           Status: "-1",
         },
         pageCount: 0,
-        persistent_menu: false,
-        menuObjOption: null,
-        persistentExamine_menu: false
+        persistent_role: false,
+        roleObjOption: null,
+        persistentExamine_role: false
       }
     },
     mounted() {
-      this.initData();
       this.currentUrl = this.$route.path
-      this.getmenulist()
+      this.getRolelist()
     },
     methods: {
-      //初始化下拉框
-      initData() {
-        this.MenuTypeOpts = getMenuTypeList();
-        this.MenuLevelOpts = getMenuLevelList();
-      },
       //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;
-        this.getmenulist();
+        this.getRolelist();
       },
       //翻页
       changePage(val) {
         this.msg.pageIndex = val;
-        this.getmenulist()
+        this.getRolelist()
       },
       //获取菜单分页列表
-      getmenulist() {
+      getRolelist() {
         this.loading = true;
-        getMenuPage(this.msg).then(res => {
+        queryRolePage(this.msg).then(res => {
           this.loading = false
           this.data = res.Data.PageData
           this.pageCount = res.Data.PageCount
@@ -199,29 +154,26 @@
       },
       //刷新页面
       refreshPage() {
-        if (!this.menuObjOption) {
+        if (!this.roleObjOption) {
           this.msg.pageIndex = 1;
-          this.msg.MenuName = "";
-          this.msg.MenuUrl = "";
-          this.msg.MenuLevel = -1;
-          this.msg.MenuType = -1;
+          this.msg.RoleName = "";
           this.msg.Status = "-1";
         }
-        this.getmenulist()
+        this.getRolelist()
       },
-      //新增修改菜单
-      EditMenu(obj) {
+      //新增修改角色
+      EditRole(obj) {
         if (obj) {
-          this.menuObjOption = obj
+          this.roleObjOption = obj
         } else {
-          this.menuObjOption = null
+          this.roleObjOption = null
         }
-        this.persistent_menu = true
+        this.persistent_role = true
       },
       //关闭弹窗
-      closeMenuSaveForm() {
-        this.persistent_menu = false
-        this.persistentExamine_menu = false
+      closeroleSaveForm() {
+        this.persistent_role = false
+        this.persistentExamine_role = false
       }
     }
   }