新增权限管理页面

package-lock.json

@@ -9,6 +9,7 @@
       "dependencies": {
         "axios": "^0.21.4",
         "element-ui": "^2.15.6",
+        "lodash": "^4.17.21",
         "query-string": "^7.0.1",
         "vue": "^2.6.14",
         "vue-router": "^3.5.2",
@@ -4011,8 +4012,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
@@ -9058,8 +9058,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.21.4",
     "element-ui": "^2.15.6",
+    "lodash": "^4.17.21",
     "query-string": "^7.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.2",

src/components/base/AppList.vue

@@ -277,6 +277,7 @@ export default {
 }
 .table-list-hd {
   display: flex;
+  margin-bottom: 10px;
 }
 .table-list-filter {
   flex: 1;

src/main.js

@@ -6,12 +6,15 @@ import modules from './modules'
 // 公共css
 import '@/assets/css/base.css'
 import beforeEnter from '@/utils/beforeEnter'
-
+import _ from 'lodash'
 // Element-UI
 import ElementUI from 'element-ui'
 import '@/assets/theme/style.scss'
 Vue.use(ElementUI, { size: 'small' })
 
+// lodash
+Vue.prototype.$_ = _
+
 // 注册模块
 modules({ router, store })
 

src/modules/app/components/Editform.vue

 <template>
   <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
-    <el-form ref="form" :model="form" :rules="rules" :hide-required-asterisk="true" label-position="top">
+    <el-form ref="form" :model="form" :rules="rules" label-position="top">
       <el-form-item label="应用名称" prop="name">
         <el-input v-model="form.name" clearable></el-input>
       </el-form-item>
-      <el-form-item label="应用别名" prop="alias_name">
-        <el-input v-model="form.alias_name" clearable></el-input>
-      </el-form-item>
       <el-form-item label="应用描述" prop="desc">
         <el-input type="textarea" v-model="form.desc" clearable></el-input>
       </el-form-item>
+      <el-form-item label="应用别名" prop="alias_name">
+        <el-input v-model="form.alias_name" clearable></el-input>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;

src/modules/app/views/List.vue

@@ -2,7 +2,7 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list">
       <template #header-aside>
-        <el-button type="primary" @click="visible = true">创建应用</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="visible = true">创建应用</el-button>
       </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleView(row)">查看</el-button>

src/modules/settings/permissions/api.js

@@ -8,7 +8,7 @@ export function getPermissionList(params) {
 }
 
 /**
- * 新增权限
+ * 创建权限
  */
 export function createPermission(appid, data) {
   return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/permission`, data)

src/modules/settings/permissions/components/Editform.vue

+<template>
+  <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" label-position="top">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="唯一标识" prop="tag">
+        <el-input v-model="form.tag" clearable :disabled="isEdit"></el-input>
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-radio-group v-model="form.type">
+          <el-radio :label="1">功能权限</el-radio>
+          <el-radio :label="2">菜单权限</el-radio>
+          <el-radio :label="3">资源权限</el-radio>
+          <el-radio :label="4">按钮权限</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="路由" prop="effect_uris">
+        <el-input type="textarea" v-model="form.effect_uris" clearable placeholder="多个请用英文逗号隔开"></el-input>
+      </el-form-item>
+      <el-form-item label="权限描述" prop="desc">
+        <el-input type="textarea" v-model="form.desc" clearable></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;
+      <el-button type="primary" size="medium" @click="onPrimary">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { createPermission, updatePermission } from '../api.js'
+export default {
+  props: {
+    isEdit: { type: Boolean, default: false },
+    data: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      form: { parent_id: '0', type: '', name: '', tag: '', desc: '', effect_uris: '' },
+      rules: {
+        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
+        tag: [{ required: true, message: '请输入权限唯一标识', trigger: 'blur' }],
+        type: [{ required: true, message: '请选择权限类型', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    data: {
+      immediate: true,
+      handler(data) {
+        this.form = Object.assign({}, this.form, data)
+      }
+    }
+  },
+  computed: {
+    appid() {
+      return this.$store.state.appid
+    },
+    title() {
+      return this.isEdit ? '修改权限' : '创建权限'
+    }
+  },
+  methods: {
+    // 取消
+    onCancel() {
+      this.$emit('update:visible', false)
+    },
+    // 确定
+    onPrimary() {
+      this.$refs.form.validate().then(() => {
+        this.isEdit ? this.edit() : this.create()
+      })
+    },
+    // 创建权限
+    create() {
+      createPermission(this.appid, this.form).then(res => {
+        this.$message.success('创建成功')
+        this.$emit('update:visible', false)
+        this.$emit('success', res.data)
+      })
+    },
+    // 编辑权限
+    edit() {
+      const params = this.$_.pick(this.form, ['name', 'tag', 'type', 'desc', 'effect_uris'])
+      updatePermission(this.form.id, params).then(res => {
+        this.$message.success('修改成功')
+        this.$emit('update:visible', false)
+        this.$emit('success', res.data)
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

src/modules/settings/permissions/views/List.vue

 <template>
   <app-card>
-    <app-list v-bind="tableOptions" ref="list">
+    <app-list v-bind="tableOptions" ref="list" row-key="id" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary">创建权限</el-button>
+        <el-button type="primary" @click="handleCreate()">创建权限</el-button>
       </template>
       <template v-slot:table-x="{ row }">
-        <el-button type="text" @click="handleUpdate">编辑权限</el-button>
-        <el-button type="text">权限配置</el-button>
+        <el-button type="text" @click="handleCreate(row)">新增</el-button>
+        <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
         <el-button type="text" @click="onRemove(row)">删除</el-button>
       </template>
     </app-list>
+    <editform
+      :visible.sync="visible"
+      :isEdit="isEdit"
+      :data="editRaw"
+      @success="handleSuccess"
+      v-if="visible"
+    ></editform>
   </app-card>
 </template>
 
@@ -17,63 +24,87 @@
 // 组件
 import AppList from '@/components/base/AppList.vue'
 import AppCard from '@/components/base/AppCard.vue'
+import Editform from '../components/Editform.vue'
 // 接口
-// import { getRoleList } from '../api'
+import { getPermissionList, deletePermissions } from '../api'
 
 export default {
-  components: { AppCard, AppList },
+  components: { AppCard, AppList, Editform },
   data() {
-    return {}
+    return {
+      visible: false,
+      isEdit: false, // 是否是编辑状态
+      editRaw: {}, // 编辑的数据
+      multipleSelection: [] // 已选择的数据
+    }
   },
   computed: {
+    appid() {
+      return this.$store.state.appid
+    },
     // 列表配置
     tableOptions() {
       return {
-        // remote: {
-        //   httpRequest: getRoleList,
-        //   params: { },
-        // },
+        remote: {
+          httpRequest: getPermissionList,
+          params: { app_id: this.$store.state.appid, name: '', tag: '' }
+        },
         columns: [
-          { label: '权限名称', prop: 'name', minWidth: 140 },
-          { label: '权限', prop: 'count', align: 'center', minWidth: 140 },
-          { label: '操作', slots: 'table-x', align: 'right', width: 150 }
-        ],
-        data: [
-          {
-            name: '管理员',
-            count: '4'
-          },
-          {
-            name: '教师',
-            count: '12'
-          },
+          { label: '权限名称', prop: 'name' },
+          { label: '标识', prop: 'tag' },
           {
-            name: '教务',
-            count: '4'
+            label: '类型',
+            prop: 'type',
+            computed({ row }) {
+              const map = { 1: '功能权限', 2: '菜单权限', 3: '资源权限', 4: '按钮权限' }
+              return map[row.type] || row.type
+            }
           },
-          {
-            name: '助教',
-            count: '10'
-          }
+          { label: '权限描述', prop: 'desc' },
+          { label: '操作', slots: 'table-x', align: 'center', width: 150, fixed: 'right' }
         ]
       }
     }
   },
   methods: {
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    // 创建成功刷新列表
+    handleSuccess() {
+      this.$refs.list.refetch()
+    },
+    // 创建
+    handleCreate(row) {
+      this.isEdit = false
+      this.editRaw = row ? { parent_id: row.id } : { parent_id: '0' }
+      this.visible = true
+    },
     // 编辑
     handleUpdate(row) {
-      console.log(row)
+      this.isEdit = true
+      this.editRaw = row
+      this.visible = true
     },
     // 删除
-    onRemove() {
+    onRemove(row) {
       this.$confirm('权限删除请谨慎操作，确定删除？', '删除权限', {
         confirmButtonText: '删除',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(this.handleRemove)
+      }).then(() => {
+        this.handleRemove(row)
+      })
     },
     // 删除
-    handleRemove() {}
+    handleRemove(row) {
+      const ids = [row.id]
+      deletePermissions(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+        this.$message({ type: 'success', message: '删除成功' })
+        this.$refs.list.refetch()
+      })
+    }
   }
 }
 </script>

src/modules/settings/roles/api.js

@@ -8,7 +8,7 @@ export function getRoleList(params) {
 }
 
 /**
- * 新增角色
+ * 创建角色
  */
 export function createRole(appid, data) {
   return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/role`, data)

src/modules/settings/roles/components/Editform.vue

 <template>
   <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
-    <el-form ref="form" :model="form" :rules="rules" :hide-required-asterisk="true" label-position="top">
-      <el-form-item label="角色名称" prop="name">
+    <el-form ref="form" :model="form" :rules="rules" label-position="top">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="form.name" clearable></el-input>
       </el-form-item>
-      <el-form-item label="角色唯一标识" prop="tag">
+      <el-form-item label="唯一标识" prop="tag">
         <el-input v-model="form.tag" clearable :disabled="isEdit"></el-input>
       </el-form-item>
-      <el-form-item label="角色描述" prop="desc">
+      <el-form-item label="描述" prop="desc">
         <el-input type="textarea" v-model="form.desc" clearable></el-input>
       </el-form-item>
     </el-form>
@@ -47,7 +47,7 @@ export default {
       return this.$store.state.appid
     },
     title() {
-      return this.isEdit ? '修改角色' : '创建角色'
+      return this.isEdit ? '修改角色' : '新增角色'
     }
   },
   methods: {
@@ -61,10 +61,10 @@ export default {
         this.isEdit ? this.edit() : this.create()
       })
     },
-    // 创建角色
+    // 新增角色
     create() {
       createRole(this.appid, this.form).then(res => {
-        this.$message.success('创建成功')
+        this.$message.success('新增成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)
       })

src/modules/settings/roles/views/List.vue

@@ -2,7 +2,7 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary" @click="handleCreate">创建角色</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增角色</el-button>
       </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleUpdate(row)">修改</el-button>
@@ -29,7 +29,6 @@ import AppCard from '@/components/base/AppCard.vue'
 import Editform from '../components/Editform.vue'
 // 接口
 import { getRoleList, deleteRoles } from '../api'
-
 export default {
   components: { AppCard, AppList, Editform },
   data() {
@@ -68,7 +67,7 @@ export default {
           { label: '角色名称', prop: 'name' },
           { label: '标识', prop: 'tag' },
           { label: '角色描述', prop: 'desc' },
-          { label: '操作', slots: 'table-x', align: 'right', width: 150 }
+          { label: '操作', slots: 'table-x', align: 'right', width: 150, fixed: 'right' }
         ]
       }
     }

src/modules/settings/users/api.js

@@ -15,7 +15,7 @@ export function getRoleList(params) {
 }
 
 /**
- * 新增成员
+ * 创建成员
  */
 export function createUser(appid, data) {
   return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/user`, data)

src/modules/settings/users/components/Editform.vue

 <template>
   <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="602px">
-    <el-form ref="form" :model="form" :rules="rules" :hide-required-asterisk="true" label-position="top">
+    <el-form ref="form" :model="form" :rules="rules" label-position="top">
       <el-form-item label="紫荆账号" prop="sso_id">
         <user-autocomplete v-model="form.sso_id"></user-autocomplete>
       </el-form-item>
@@ -50,7 +50,7 @@ export default {
       return this.$store.state.appid
     },
     title() {
-      return this.isEdit ? '修改成员' : '新增成员'
+      return this.isEdit ? '修改成员' : '添加成员'
     }
   },
   beforeMount() {
@@ -72,12 +72,12 @@ export default {
         this.isEdit ? this.edit() : this.create()
       })
     },
-    // 新增成员
+    // 添加成员
     create() {
       const params = Object.assign({}, this.form)
       params.role_ids = JSON.stringify(params.role_ids)
       createUser(this.appid, params).then(res => {
-        this.$message.success('创建成功')
+        this.$message.success('添加成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)
       })

src/modules/settings/users/views/List.vue

@@ -2,7 +2,7 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary" @click="handleCreate">新增成员</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加成员</el-button>
       </template>
       <template v-slot:table-roles="{ row }">
         <el-tag v-for="(item, index) in row.roles" :key="index" style="margin: 5px 5px 5px 0">{{ item.name }}</el-tag>
@@ -89,10 +89,10 @@ export default {
           { label: '昵称', prop: 'sso_user.nickname' },
           { label: '手机号', prop: 'sso_user.mobile' },
           { label: '邮箱', prop: 'sso_user.email' },
-          { label: '创建时间', prop: 'created_at' },
-          { label: '修改时间', prop: 'updated_at' },
+          // { label: '创建时间', prop: 'created_at' },
+          // { label: '修改时间', prop: 'updated_at' },
           { label: '最后登录时间', prop: 'last_login_time' },
-          { label: '状态', prop: 'status', slots: 'table-status', width: '140' },
+          { label: '账号状态', prop: 'status', slots: 'table-status', width: '140' },
           { label: '操作', slots: 'table-x', align: 'right', width: '80', fixed: 'right' }
         ]
       }

src/modules/test/views/List.vue

@@ -2,7 +2,7 @@
   <app-card>
     <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary">新增</el-button>
+        <el-button type="primary">创建</el-button>
       </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text">编辑</el-button>