update 管理员列表/角色/菜单 编辑提交

src/api/api_sys.js

@@ -8,12 +8,17 @@ export const apiSysUserList = params => {
   return http({ url: '/renren-fast-server/sys/user/list', method: 'get', params })
 }
 
-// 获取角色列表
+// 获取角色选择列表
 export const apiSysRoleSelect = params => {
   return http({ url: '/renren-fast-server/sys/role/select', method: 'get', params })
 }
 
-// 新增/编辑
+// 用户编辑
+export const apiSysUserInfo = (params, id) => {
+  return http({ url: `/renren-fast-server/sys/user/info${id}`, method: 'get', params })
+}
+
+// 提交（用户）
 export const apiSysUserConfirm = (data, type) => {
   return http({ url: `/renren-fast-server/sys/user${type}`, method: 'post', data })
 }
@@ -26,7 +31,35 @@ export const apiSysRoleList = params => {
   return http({ url: '/renren-fast-server/sys/role/list', method: 'get', params })
 }
 
-// 角色管理列表
+// 角色编辑
+export const apiSysRoleInfo = (params, id) => {
+  return http({ url: `/renren-fast-server/sys/role/info${id}`, method: 'get', params })
+}
+
+// 角色提交
+export const apiSysRoleConfirm = (data, type) => {
+  return http({ url: `/renren-fast-server/sys/role${type}`, method: 'post', data })
+}
+
+/**
+ * 菜单管理
+ */
+// 菜单管理列表
 export const apiSysMenuList = params => {
   return http({ url: '/renren-fast-server/sys/menu/list', method: 'get', params })
 }
+
+// 获取菜单选择列表
+export const apiSysMenuSelect = params => {
+  return http({ url: '/renren-fast-server/sys/menu/select', method: 'get', params })
+}
+
+// 菜单编辑
+export const apiSysMenuInfo = (params, id) => {
+  return http({ url: `/renren-fast-server/sys/menu/info${id}`, method: 'get', params })
+}
+
+// 菜单提交
+export const apiSysMenuConfirm = (data, type) => {
+  return http({ url: `/renren-fast-server/sys/menu${type}`, method: 'post', data })
+}

src/views/modules/sys/menu-add-or-update.vue

@@ -3,7 +3,7 @@
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleConfirm()" label-width="80px">
       <el-form-item label="类型" prop="type">
         <el-radio-group v-model="dataForm.type">
           <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
@@ -13,10 +13,7 @@
         <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
       </el-form-item>
       <el-form-item label="上级菜单" prop="parentName">
-        <el-popover
+        <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
-          ref="menuListPopover"
-          placement="bottom-start"
-          trigger="click">
           <el-tree
             :data="menuList"
             :props="menuListTreeProps"
@@ -42,11 +39,7 @@
       <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
         <el-row>
           <el-col :span="22">
-            <el-popover
+            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
-              ref="iconListPopover"
-              placement="bottom-start"
-              trigger="click"
-              popper-class="mod-menu__icon-popover">
               <div class="mod-menu__icon-inner">
                 <div class="mod-menu__icon-list">
                   <el-button
@@ -72,7 +65,7 @@
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <el-button type="primary" @click="handleConfirm()">确定</el-button>
     </span>
   </el-dialog>
 </template>
@@ -80,6 +73,8 @@
 <script>
   import { treeDataTranslate } from '@/utils'
   import Icon from '@/icons'
+  import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
+
   export default {
     data () {
       var validateUrl = (rule, value, callback) => {
@@ -105,21 +100,16 @@
           iconList: []
         },
         dataRule: {
-          name: [
+          name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
-            { required: true, message: '菜单名称不能为空', trigger: 'blur' }
+          parentName: [{ required: true, message: '上级菜单不能为空', trigger: 'change' }],
-          ],
+          url: [{ validator: validateUrl, trigger: 'blur' }]
-          parentName: [
-            { required: true, message: '上级菜单不能为空', trigger: 'change' }
-          ],
-          url: [
-            { validator: validateUrl, trigger: 'blur' }
-          ]
         },
         menuList: [],
         menuListTreeProps: {
           label: 'name',
           children: 'children'
-        }
+        },
+        apiType: '' // api类型
       }
     },
     created () {
@@ -127,38 +117,68 @@
     },
     methods: {
       init (id) {
-        this.dataForm.id = id || 0
+        this.handleGetSysMenuSelect()
-        this.$http({
+        if (id) {
-          url: this.$http.adornUrl('/sys/menu/select'),
+          this.dataForm.id = id || 0
-          method: 'get',
+          this.apiType = '/update'
-          params: this.$http.adornParams()
+          this.handleEdit()
-        }).then(({data}) => {
+        } else { // 新增
-          this.menuList = treeDataTranslate(data.menuList, 'menuId')
+          this.apiType = '/save'
-        }).then(() => {
+        }
+      },
+      // 获取下拉选择的菜单列表
+      handleGetSysMenuSelect () {
+        apiSysMenuSelect({}).then(res => {
+          this.menuList = treeDataTranslate(res.menuList, 'menuId')
           this.visible = true
           this.$nextTick(() => {
             this.$refs['dataForm'].resetFields()
-          })
-        }).then(() => {
-          if (!this.dataForm.id) {
-            // 新增
             this.menuListTreeSetCurrentNode()
-          } else {
+          })
-            // 修改
+        })
-            this.$http({
+      },
-              url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
+      // 编辑
-              method: 'get',
+      handleEdit () {
-              params: this.$http.adornParams()
+        apiSysMenuInfo({}, `/${this.dataForm.id}`).then(res => {
-            }).then(({data}) => {
+          this.dataForm.id = res.menu.menuId
-              this.dataForm.id = data.menu.menuId
+          this.dataForm.type = res.menu.type
-              this.dataForm.type = data.menu.type
+          this.dataForm.name = res.menu.name
-              this.dataForm.name = data.menu.name
+          this.dataForm.parentId = res.menu.parentId
-              this.dataForm.parentId = data.menu.parentId
+          this.dataForm.url = res.menu.url
-              this.dataForm.url = data.menu.url
+          this.dataForm.perms = res.menu.perms
-              this.dataForm.perms = data.menu.perms
+          this.dataForm.orderNum = res.menu.orderNum
-              this.dataForm.orderNum = data.menu.orderNum
+          this.dataForm.icon = res.menu.icon
-              this.dataForm.icon = data.menu.icon
+          this.menuListTreeSetCurrentNode()
-              this.menuListTreeSetCurrentNode()
+        })
+      },
+      // 提交
+      handleConfirm () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            let params = {
+              'menuId': this.dataForm.id || undefined,
+              'type': this.dataForm.type,
+              'name': this.dataForm.name,
+              'parentId': this.dataForm.parentId,
+              'url': this.dataForm.url,
+              'perms': this.dataForm.perms,
+              'orderNum': this.dataForm.orderNum,
+              'icon': this.dataForm.icon
+            }
+            apiSysMenuConfirm(params, this.apiType).then(res => {
+              if (res && res.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(res.msg)
+              }
             })
           }
         })
@@ -176,41 +196,6 @@
       // 图标选中
       iconActiveHandle (iconName) {
         this.dataForm.icon = iconName
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
-              method: 'post',
-              data: this.$http.adornData({
-                'menuId': this.dataForm.id || undefined,
-                'type': this.dataForm.type,
-                'name': this.dataForm.name,
-                'parentId': this.dataForm.parentId,
-                'url': this.dataForm.url,
-                'perms': this.dataForm.perms,
-                'orderNum': this.dataForm.orderNum,
-                'icon': this.dataForm.icon
-              })
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
       }
     }
   }

src/views/modules/sys/menu.vue

@@ -5,72 +5,25 @@
         <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
     </el-form>
-
+    <el-table :data="dataList" row-key="menuId" border style="width: 100%;">
-    <el-table
+      <el-table-column prop="name" header-align="center" min-width="150" label="名称"></el-table-column>
-      :data="dataList"
+      <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单"></el-table-column>
-      row-key="menuId"
+      <el-table-column header-align="center" align="center" label="图标">
-      border
-      style="width: 100%; ">
-      <el-table-column
-        prop="name"
-        header-align="center"
-        min-width="150"
-        label="名称" >
-      </el-table-column>
-      <el-table-column
-        prop="parentName"
-        header-align="center"
-        align="center"
-        width="120"
-        label="上级菜单">
-      </el-table-column>
-      <el-table-column
-        header-align="center"
-        align="center"
-        label="图标">
         <template slot-scope="scope">
           <icon-svg :name="scope.row.icon || ''"></icon-svg>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column prop="type" header-align="center" align="center" label="类型">
-        prop="type"
-        header-align="center"
-        align="center"
-        label="类型">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
           <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
           <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column prop="orderNum" header-align="center" align="center" label="排序号"></el-table-column>
-        prop="orderNum"
+      <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL"></el-table-column>
-        header-align="center"
+      <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识"></el-table-column>
-        align="center"
+      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-        label="排序号">
-      </el-table-column>
-      <el-table-column
-        prop="url"
-        header-align="center"
-        align="center"
-        width="150"
-        :show-overflow-tooltip="true"
-        label="菜单URL">
-      </el-table-column>
-      <el-table-column
-        prop="perms"
-        header-align="center"
-        align="center"
-        width="150"
-        :show-overflow-tooltip="true"
-        label="授权标识">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
         <template slot-scope="scope">
           <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
           <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
@@ -78,13 +31,15 @@
       </el-table-column>
     </el-table>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="handleGetTableList"></add-or-update>
   </div>
 </template>
 
 <script>
   import AddOrUpdate from './menu-add-or-update'
   import { treeDataTranslate } from '@/utils'
+  import { apiSysMenuList } from '@/api/api_sys'
+
   export default {
     data () {
       return {
@@ -98,18 +53,13 @@
       AddOrUpdate
     },
     activated () {
-      this.getDataList()
+      this.handleGetTableList()
     },
     methods: {
       // 获取数据列表
-      getDataList () {
+      handleGetTableList () {
-        this.dataListLoading = true
+        apiSysMenuList({}).then(res => {
-        this.$http({
+          this.dataList = treeDataTranslate(res, 'menuId')
-          url: this.$http.adornUrl('/sys/menu/list'),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          this.dataList = treeDataTranslate(data, 'menuId')
           this.dataListLoading = false
         })
       },
@@ -138,7 +88,7 @@
                 type: 'success',
                 duration: 1500,
                 onClose: () => {
-                  this.getDataList()
+                  this.handleGetTableList()
                 }
               })
             } else {

src/views/modules/sys/role-add-or-update.vue

@@ -30,8 +30,7 @@
 
 <script>
   import { treeDataTranslate } from '@/utils'
-  import { apiSysMenuList, apiSysUserConfirm } from '@/api/api_sys'
+  import { apiSysMenuList, apiSysRoleInfo, apiSysRoleConfirm } from '@/api/api_sys'
-  import { apiGetUserInfo } from '@/api/api_user'
 
   export default {
     data () {
@@ -56,17 +55,17 @@
     },
     methods: {
       init (id) {
+        this.handleGetSysMenuList()
         if (id) {
           this.dataForm.id = id || 0
           this.handleEdit()
           this.apiType = '/update'
         } else {
-          this.handleAdd()
           this.apiType = '/save'
         }
       },
-      // 新增
+      // 获取权限列表
-      handleAdd (id) {
+      handleGetSysMenuList () {
         apiSysMenuList({}).then(res => {
           this.menuList = treeDataTranslate(res, 'menuId')
           this.visible = true
@@ -78,7 +77,7 @@
       },
       // 编辑
       handleEdit () {
-        apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
+        apiSysRoleInfo({}, `/${this.dataForm.id}`).then(res => {
           if (res && res.code === 0) {
             this.dataForm.roleName = res.role.roleName
             this.dataForm.remark = res.role.remark
@@ -100,7 +99,7 @@
               'remark': this.dataForm.remark,
               'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
             }
-            apiSysUserConfirm(params, this.apiType).then(res => {
+            apiSysRoleConfirm(params, this.apiType).then(res => {
               if (res && res.code === 0) {
                 this.$message({
                   message: '操作成功',

src/views/modules/sys/user-add-or-update.vue

@@ -40,8 +40,7 @@
 
 <script>
   import { isEmail, isMobile } from '@/utils/validate'
-  import { apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
+  import { apiSysUserInfo, apiSysRoleSelect, apiSysUserConfirm } from '@/api/api_sys'
-  import { apiGetUserInfo } from '@/api/api_user'
 
   export default {
     data () {
@@ -107,17 +106,17 @@
     },
     methods: {
       init (id) {
+        this.handleGetSysRoleSelect()
         if (id) {
           this.dataForm.id = id || 0
           this.handleEdit()
           this.apiType = '/update'
         } else {
-          this.handleAdd()
           this.apiType = '/save'
         }
       },
-      // 新增
+      // 获取角色选择列表
-      handleAdd (id) {
+      handleGetSysRoleSelect (id) {
         apiSysRoleSelect({}).then(res => {
           this.roleList = res && res.code === 0 ? res.list : []
           this.visible = true
@@ -128,7 +127,7 @@
       },
       // 编辑
       handleEdit () {
-        apiGetUserInfo({}, `/${this.dataForm.id}`).then(res => {
+        apiSysUserInfo({}, `/${this.dataForm.id}`).then(res => {
           if (res && res.code === 0) {
             this.$nextTick(() => {
               this.dataForm.username = res.user.username