重构

package-lock.json

@@ -27,7 +27,7 @@
         "eslint-plugin-promise": "^5.1.0",
         "eslint-plugin-vue": "^7.17.0",
         "sass": "1.32.13",
-        "vite": "^2.5.6",
+        "vite": "^2.5.7",
         "vite-plugin-vue2": "^1.8.2",
         "vue-template-compiler": "^2.6.14"
       }
@@ -5634,9 +5634,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.6.tgz",
-      "integrity": "sha512-P++qzXuOPhTql8iDamsatlJfD7/yGi8NCNwzyqkB2p0jrNJC567WEdXiKn3hQ+ZV8amQmB2dTH6svo3Z2tJ6MQ==",
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.7.tgz",
+      "integrity": "sha512-hyUoWmRPhjN1aI+ZSBqDINKdIq7aokHE2ZXiztOg4YlmtpeQtMwMeyxv6X9YxHZmvGzg/js/eATM9Z1nwyakxg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.12.17",
@@ -10341,9 +10341,9 @@
       }
     },
     "vite": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.6.tgz",
-      "integrity": "sha512-P++qzXuOPhTql8iDamsatlJfD7/yGi8NCNwzyqkB2p0jrNJC567WEdXiKn3hQ+ZV8amQmB2dTH6svo3Z2tJ6MQ==",
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.7.tgz",
+      "integrity": "sha512-hyUoWmRPhjN1aI+ZSBqDINKdIq7aokHE2ZXiztOg4YlmtpeQtMwMeyxv6X9YxHZmvGzg/js/eATM9Z1nwyakxg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.12.17",

package.json

@@ -30,7 +30,7 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.17.0",
     "sass": "1.32.13",
-    "vite": "^2.5.6",
+    "vite": "^2.5.7",
     "vite-plugin-vue2": "^1.8.2",
     "vue-template-compiler": "^2.6.14"
   }

src/components/layout/Aside.vue

@@ -24,16 +24,19 @@ export default {
   data() {
     return {
       menuList: [
-        {
-          name: '设置',
-          path: '/settings/users',
-          icon: 'el-icon-setting',
-          children: [
-            { name: '成员管理', path: '/settings/users' },
-            { name: '角色管理', path: '/settings/roles' },
-            { name: '权限管理', path: '/settings/permissions' }
-          ]
-        }
+        // {
+        //   name: '设置',
+        //   path: '/settings/users',
+        //   icon: 'el-icon-setting',
+        //   children: [
+        //     { name: '成员管理', path: '/settings/users' },
+        //     { name: '角色管理', path: '/settings/roles' },
+        //     { name: '权限管理', path: '/settings/permissions' }
+        //   ]
+        // }
+        { name: '成员管理', path: '/settings/users', icon: 'el-icon-user' },
+        { name: '角色管理', path: '/settings/roles', icon: 'el-icon-star-off' },
+        { name: '权限管理', path: '/settings/permissions', icon: 'el-icon-coordinate' }
       ]
     }
   },

src/main.js

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

src/modules/app/api.js

@@ -36,3 +36,31 @@ export function deleteApp(id, data) {
 export function updateAppSecretKey(id, data) {
   return httpRequest.patch(`/api/permissions/admin/v1/${id}/application/secret-key`, data)
 }
+
+/**
+ * 获取应用管理员
+ */
+export function getAppAdminUsers(params) {
+  return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/assign/app-users`, { params })
+}
+
+/**
+ * 删除应用管理员
+ */
+export function deleteAppAdminUsers(appid, data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/assign/remove-app-users`, data)
+}
+
+/**
+ * 创建成员
+ */
+export function createUser(appid, data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/user`, data)
+}
+
+/**
+ * 创建应用管理员
+ */
+export function createAppAdminUsers(appid, data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/assign/users-to-app`, data)
+}

src/modules/app/components/AdminUsers.vue

+<template>
+  <app-card title="管理员">
+    <app-list v-bind="tableOptions" ref="list">
+      <template #header-aside>
+        <!-- <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="onRemove(row)">删除</el-button>
+      </template>
+    </app-list>
+    <el-dialog title="添加管理员" :close-on-click-modal="false" :visible.sync="visible" width="500px">
+      <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>
+      </el-form>
+      <template #footer>
+        <el-button type="text" @click="visible = false">取消</el-button>&nbsp;&nbsp;
+        <el-button type="primary" size="medium" @click="onPrimary">保存</el-button>
+      </template>
+    </el-dialog>
+  </app-card>
+</template>
+
+<script>
+import UserAutocomplete from '@/components/base/UserAutocomplete.vue'
+
+import { getAppAdminUsers, deleteAppAdminUsers } from '../api'
+export default {
+  components: { UserAutocomplete },
+  data() {
+    return {
+      visible: false,
+      form: {},
+      rules: {}
+    }
+  },
+  computed: {
+    appid() {
+      return this.$route.params.id
+    },
+    tableOptions() {
+      return {
+        remote: { httpRequest: getAppAdminUsers, params: { app_id: this.appid } },
+        columns: [
+          { label: '姓名', prop: 'ssoUser.realname' },
+          { label: '昵称', prop: 'ssoUser.nickname' },
+          { label: '手机号', prop: 'ssoUser.mobile' },
+          { label: '邮箱', prop: 'ssoUser.email' },
+          { label: '最后登录时间', prop: 'last_login_time' },
+          { label: '操作', slots: 'table-x', align: 'center', width: 150, fixed: 'right' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 删除
+    onRemove(row) {
+      this.$confirm('管理员删除请谨慎操作，确定删除？', '删除管理员', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.handleRemove(row)
+      })
+    },
+    // 删除
+    handleRemove(row) {
+      const ids = [row.id]
+      deleteAppAdminUsers(this.appid, { user_ids: JSON.stringify(ids) }).then(res => {
+        this.$message({ type: 'success', message: '删除成功' })
+        this.$refs.list.refetch()
+      })
+    },
+    onPrimary() {}
+  }
+}
+</script>

src/modules/app/views/Detail.vue

@@ -26,6 +26,7 @@
         <el-descriptions-item label="创建者ID">{{ createUser.id }}</el-descriptions-item>
       </el-descriptions>
     </app-card>
+    <admin-users></admin-users>
     <editform
       :visible.sync="visible"
       :isEdit="true"
@@ -37,12 +38,12 @@
 </template>
 
 <script>
-import AppCard from '@/components/base/AppCard.vue'
-import Editform from '../components/Editform.vue'
+import AdminUsers from '../components/AdminUsers.vue'
 import { getApp, deleteApp, updateAppSecretKey } from '../api.js'
+
 export default {
   props: { id: { type: String } },
-  components: { AppCard, Editform },
+  components: { Editform: () => import('../components/Editform.vue'), AdminUsers },
   data() {
     return {
       visible: false,

src/modules/app/views/List.vue

@@ -14,12 +14,10 @@
 </template>
 
 <script>
-import AppList from '@/components/base/AppList.vue'
-import AppCard from '@/components/base/AppCard.vue'
-import Editform from '../components/Editform.vue'
 import { getAppList } from '../api'
+
 export default {
-  components: { AppList, AppCard, Editform },
+  components: { Editform: () => import('../components/Editform.vue') },
   data() {
     return {
       visible: false

src/modules/settings/permissions/api.js

@@ -10,20 +10,20 @@ export function getPermissionList(params) {
 /**
  * 创建权限
  */
-export function createPermission(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/permission`, data)
+export function createPermission(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/permission`, data)
 }
 
 /**
  * 修改权限
  */
-export function updatePermission(id, data) {
-  return httpRequest.put(`/api/permissions/admin/v1/application/${id}/permission`, data)
+export function updatePermission(data) {
+  return httpRequest.put(`/api/permissions/admin/v1/application/${data.id}/permission`, data)
 }
 
 /**
  * 批量删除权限
  */
-export function deletePermissions(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/batch-delete/permissions`, data)
+export function deletePermissions(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/batch-delete/permissions`, data)
 }

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

@@ -75,7 +75,8 @@ export default {
     },
     // 创建权限
     create() {
-      createPermission(this.appid, this.form).then(res => {
+      const params = Object.assign({ app_id: this.appid }, this.form)
+      createPermission(params).then(res => {
         this.$message.success('创建成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)
@@ -83,8 +84,8 @@ export default {
     },
     // 编辑权限
     edit() {
-      const params = this.$_.pick(this.form, ['name', 'tag', 'type', 'desc', 'effect_uris'])
-      updatePermission(this.form.id, params).then(res => {
+      const params = this.$_.pick(this.form, ['id', 'name', 'tag', 'type', 'desc', 'effect_uris'])
+      updatePermission(params).then(res => {
         this.$message.success('修改成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)

src/modules/settings/permissions/index.js

@@ -2,12 +2,12 @@ const routes = [
   {
     path: '/settings',
     component: () => import('@/components/layout/Index.vue'),
-    meta: { title: '设置' },
+    // meta: { title: '设置' },
     children: [
       {
         path: 'permissions',
-        component: () => import('./views/List.vue'),
-        meta: { title: '权限管理' }
+        component: () => import('./views/List.vue')
+        // meta: { title: '权限管理' }
       }
     ]
   }

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

@@ -21,15 +21,11 @@
 </template>
 
 <script>
-// 组件
-import AppList from '@/components/base/AppList.vue'
-import AppCard from '@/components/base/AppCard.vue'
-import Editform from '../components/Editform.vue'
 // 接口
 import { getPermissionList, deletePermissions } from '../api'
 
 export default {
-  components: { AppCard, AppList, Editform },
+  components: { Editform: () => import('../components/Editform.vue') },
   data() {
     return {
       visible: false,
@@ -100,7 +96,7 @@ export default {
     // 删除
     handleRemove(row) {
       const ids = [row.id]
-      deletePermissions(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+      deletePermissions({ app_id: this.appid, ids: JSON.stringify(ids) }).then(res => {
         this.$message({ type: 'success', message: '删除成功' })
         this.$refs.list.refetch()
       })

src/modules/settings/roles/api.js

@@ -10,20 +10,58 @@ export function getRoleList(params) {
 /**
  * 创建角色
  */
-export function createRole(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/role`, data)
+export function createRole(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/role`, data)
 }
 
 /**
  * 修改角色
  */
-export function updateRole(id, data) {
-  return httpRequest.put(`/api/permissions/admin/v1/application/${id}/role`, data)
+export function updateRole(data) {
+  return httpRequest.put(`/api/permissions/admin/v1/application/${data.id}/role`, data)
 }
 
 /**
  * 批量删除角色
  */
-export function deleteRoles(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/batch-delete/roles`, data)
+export function deleteRoles(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/batch-delete/roles`, data)
+}
+
+/**
+ * 添加角色用户
+ */
+export function addRoleUsers(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/assign/users-to-role`, data)
+}
+/**
+ * 获取角色用户
+ */
+export function getRoleUsers(params) {
+  return httpRequest.post(`/api/permissions/admin/v1/${params.app_id}/application/assign/role-users`, params)
+}
+/**
+ * 删除角色用户
+ */
+export function deleteRoleUsers(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/assign/remove-role-users`, data)
+}
+
+/**
+ * 获取权限列表
+ */
+export function getPermissionList(params) {
+  return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/permissions`, { params })
+}
+/**
+ * 获取角色所有权限
+ */
+export function getRolePermissions(params) {
+  return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/assign/role-permissions`, { params })
+}
+/**
+ * 更新角色权限
+ */
+export function updateRolePermissions(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/assign/permissions-to-role`, data)
 }

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

@@ -63,7 +63,8 @@ export default {
     },
     // 新增角色
     create() {
-      createRole(this.appid, this.form).then(res => {
+      const params = Object.assign({ app_id: this.appid }, this.form)
+      createRole(params).then(res => {
         this.$message.success('新增成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)
@@ -71,7 +72,7 @@ export default {
     },
     // 编辑角色
     edit() {
-      updateRole(this.form.id, this.form).then(res => {
+      updateRole(this.form).then(res => {
         this.$message.success('修改成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)

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

+<template>
+  <el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
+    <el-tree
+      :data="permissions"
+      show-checkbox
+      default-expand-all
+      node-key="id"
+      ref="tree"
+      highlight-current
+      :props="defaultProps"
+    >
+    </el-tree>
+    <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 { getPermissionList, getRolePermissions, updateRolePermissions } from '../api.js'
+export default {
+  props: {
+    data: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      permissions: [], // 所有权限
+      currentPermissions: [], // 当前角色权限
+      defaultProps: { children: 'children', label: 'name' }
+    }
+  },
+  computed: {
+    appid() {
+      return this.$store.state.appid
+    }
+  },
+  beforeMount() {
+    // 获取所有权限
+    this.getPermissions()
+    // 获取当前角色的权限
+    this.getRolePermissions()
+  },
+  methods: {
+    // 获取所有权限
+    getPermissions() {
+      const params = { app_id: this.appid }
+      getPermissionList(params).then(res => {
+        this.permissions = res.data.data
+      })
+    },
+    // 获取当前角色的权限
+    getRolePermissions() {
+      getRolePermissions({ app_id: this.appid, role_id: this.data.id }).then(res => {
+        console.log(res)
+      })
+    },
+    // 取消
+    onCancel() {
+      this.$emit('update:visible', false)
+    },
+    // 确定
+    onPrimary() {
+      const params = {
+        app_id: this.appid,
+        role_id: this.data.id,
+        permission_ids: JSON.stringify(this.$refs.tree.getCheckedKeys())
+      }
+      updateRolePermissions(params).then(res => {
+        this.$message.success('配置成功')
+        this.$emit('update:visible', false)
+        this.$emit('success', res.data)
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

src/modules/settings/roles/index.js

@@ -2,12 +2,17 @@ const routes = [
   {
     path: '/settings',
     component: () => import('@/components/layout/Index.vue'),
-    meta: { title: '设置' },
+    // meta: { title: '设置' },
     children: [
       {
         path: 'roles',
-        component: () => import('./views/List.vue'),
-        meta: { title: '角色管理' }
+        component: () => import('./views/List.vue')
+        // meta: { title: '角色管理' }
+      },
+      {
+        path: 'roles/:id/users',
+        component: () => import('./views/List.vue')
+        // meta: { title: '角色成员' }
       }
     ]
   }

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

@@ -6,12 +6,14 @@
       </template>
       <template v-slot:table-x="{ row }">
         <el-button type="text" @click="handleUpdate(row)">修改</el-button>
-        <el-button type="text">权限配置</el-button>
+        <el-button type="text" @click="handlePermission(row)">权限配置</el-button>
+        <el-button type="text">成员管理</el-button>
       </template>
       <template #footer>
         <el-button type="primary" @click="onRemove" :disabled="!multipleSelection.length">删除</el-button>
       </template>
     </app-list>
+    <!-- 创建/编辑 -->
     <editform
       :visible.sync="visible"
       :isEdit="isEdit"
@@ -19,23 +21,25 @@
       @success="handleSuccess"
       v-if="visible"
     ></editform>
+    <!-- 权限配置 -->
+    <permissions :visible.sync="permisssionVisible" :data="editRaw" v-if="permisssionVisible"></permissions>
   </app-card>
 </template>
 
 <script>
-// 组件
-import AppList from '@/components/base/AppList.vue'
-import AppCard from '@/components/base/AppCard.vue'
-import Editform from '../components/Editform.vue'
 // 接口
 import { getRoleList, deleteRoles } from '../api'
 export default {
-  components: { AppCard, AppList, Editform },
+  components: {
+    Editform: () => import('../components/Editform.vue'),
+    Permissions: () => import('../components/Permissions.vue')
+  },
   data() {
     return {
       visible: false,
       isEdit: false, // 是否是编辑状态
       editRaw: {}, // 编辑的数据
+      permisssionVisible: false, // 是否显示权限设置
       multipleSelection: [] // 已选择的数据
     }
   },
@@ -67,7 +71,7 @@ export default {
           { label: '角色名称', prop: 'name' },
           { label: '标识', prop: 'tag' },
           { label: '角色描述', prop: 'desc' },
-          { label: '操作', slots: 'table-x', align: 'right', width: 150, fixed: 'right' }
+          { label: '操作', slots: 'table-x', align: 'right', width: 200, fixed: 'right' }
         ]
       }
     }
@@ -93,6 +97,11 @@ export default {
       this.editRaw = row
       this.visible = true
     },
+    // 权限配置
+    handlePermission(row) {
+      this.editRaw = row
+      this.permisssionVisible = true
+    },
     // 删除
     onRemove() {
       this.$confirm('角色删除请谨慎操作，确定删除？', '删除角色', {
@@ -104,7 +113,7 @@ export default {
     // 删除
     handleRemove() {
       const ids = this.multipleSelection.map(item => item.id)
-      deleteRoles(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+      deleteRoles({ app_id: this.appid, ids: JSON.stringify(ids) }).then(res => {
         this.$message({ type: 'success', message: '删除成功' })
         this.$refs.list.refetch()
       })

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

+<template>
+  <app-card>
+    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+      <template #header-aside>
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加成员</el-button>
+      </template>
+      <template #footer>
+        <el-button type="primary" @click="onRemove" :disabled="!multipleSelection.length">删除</el-button>
+      </template>
+    </app-list>
+    <editform
+      :visible.sync="visible"
+      :isEdit="isEdit"
+      :data="editRaw"
+      @success="handleSuccess"
+      v-if="visible"
+    ></editform>
+  </app-card>
+</template>
+
+<script>
+// 组件
+import Editform from '../components/Editform.vue'
+// 接口
+import { getUserList, deleteUsers, getRoleList } from '../api'
+
+export default {
+  components: { Editform },
+  data() {
+    return {
+      roles: [],
+      visible: false,
+      isEdit: false, // 是否是编辑状态
+      editRaw: {}, // 编辑的数据
+      multipleSelection: [] // 已选择的数据
+    }
+  },
+  computed: {
+    appid() {
+      return this.$store.state.appid
+    },
+    // 列表配置
+    tableOptions() {
+      return {
+        remote: {
+          httpRequest: getUserList,
+          params: { app_id: this.$store.state.appid, role_id: '' }
+        },
+        filters: [
+          // {
+          //   type: 'input',
+          //   prop: 'name',
+          //   placeholder: '输入邮箱/手机号码搜索'
+          // },
+          {
+            type: 'select',
+            prop: 'role_id',
+            options: this.roles,
+            labelKey: 'name',
+            valueKey: 'id',
+            placeholder: '选择角色'
+          }
+        ],
+        columns: [
+          { type: 'selection' },
+          { type: 'index' },
+          // { label: 'SSO ID', prop: 'sso_id' },
+          { label: '姓名', prop: 'sso_user.realname' },
+          { label: '角色', prop: 'roles', slots: 'table-roles' },
+          { 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: 'last_login_time' },
+          { label: '账号状态', prop: 'status', slots: 'table-status', width: '140' },
+          { label: '操作', slots: 'table-x', align: 'right', width: '80', fixed: 'right' }
+        ]
+      }
+    }
+  },
+  beforeMount() {
+    this.getRoleList()
+  },
+  methods: {
+    getRoleList() {
+      getRoleList({ app_id: this.appid, limit: 100 }).then(res => {
+        this.roles = res.data.data
+      })
+    },
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    // 创建成功刷新列表
+    handleSuccess() {
+      this.$refs.list.refetch()
+    },
+    // 创建
+    handleCreate() {
+      this.isEdit = false
+      this.editRaw = {}
+      this.visible = true
+    },
+    // 编辑
+    handleUpdate(row) {
+      this.isEdit = true
+      this.editRaw = row
+      this.visible = true
+    },
+    // 删除
+    onRemove() {
+      this.$confirm('成员删除请谨慎操作，确定删除？', '删除成员', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(this.handleRemove)
+    },
+    // 删除
+    handleRemove() {
+      const ids = this.multipleSelection.map(item => item.id)
+      deleteUsers(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+        this.$message({ type: 'success', message: '删除成功' })
+        this.$refs.list.refetch()
+      })
+    }
+  }
+}
+</script>

src/modules/settings/users/api.js

@@ -17,27 +17,34 @@ export function getRoleList(params) {
 /**
  * 创建成员
  */
-export function createUser(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/user`, data)
+export function createUser(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/user`, data)
 }
 
 /**
  * 修改成员
  */
-export function updateUser(id, data) {
-  return httpRequest.put(`/api/permissions/admin/v1/application/${id}/user`, data)
+export function updateUser(data) {
+  return httpRequest.put(`/api/permissions/admin/v1/application/${data.id}/user`, data)
 }
 
 /**
  * 修改成员状态
  */
-export function updateUserStatus(id, data) {
-  return httpRequest.put(`/api/permissions/admin/v1/application/${id}/user-status`, data)
+export function updateUserStatus(data) {
+  return httpRequest.put(`/api/permissions/admin/v1/application/${data.id}/user-status`, data)
 }
 
 /**
  * 批量删除成员
  */
-export function deleteUsers(appid, data) {
-  return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/batch-delete/users`, data)
+export function deleteUsers(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/batch-delete/users`, data)
+}
+
+/**
+ * 创建应用管理员
+ */
+export function createAppAdminUsers(data) {
+  return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/assign/users-to-app`, data)
 }

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

@@ -74,9 +74,9 @@ export default {
     },
     // 添加成员
     create() {
-      const params = Object.assign({}, this.form)
+      const params = Object.assign({ app_id: this.appid }, this.form)
       params.role_ids = JSON.stringify(params.role_ids)
-      createUser(this.appid, params).then(res => {
+      createUser(params).then(res => {
         this.$message.success('添加成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)
@@ -86,7 +86,7 @@ export default {
     edit() {
       const params = Object.assign({}, this.form)
       params.role_ids = JSON.stringify(params.role_ids)
-      updateUser(this.form.id, params).then(res => {
+      updateUser(params).then(res => {
         this.$message.success('修改成功')
         this.$emit('update:visible', false)
         this.$emit('success', res.data)

src/modules/settings/users/index.js

@@ -2,12 +2,12 @@ const routes = [
   {
     path: '/settings',
     component: () => import('@/components/layout/Index.vue'),
-    meta: { title: '设置' },
+    // meta: { title: '设置' },
     children: [
       {
         path: 'users',
-        component: () => import('./views/List.vue'),
-        meta: { title: '成员管理' }
+        component: () => import('./views/List.vue')
+        // meta: { title: '成员管理' }
       }
     ]
   }

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

@@ -23,6 +23,7 @@
       </template>
       <template #footer>
         <el-button type="primary" @click="onRemove" :disabled="!multipleSelection.length">删除</el-button>
+        <el-button type="primary" @click="setAdmin" :disabled="!multipleSelection.length">设为管理员</el-button>
       </template>
     </app-list>
     <editform
@@ -36,15 +37,11 @@
 </template>
 
 <script>
-// 组件
-import AppList from '@/components/base/AppList.vue'
-import AppCard from '@/components/base/AppCard.vue'
-import Editform from '../components/Editform.vue'
 // 接口
-import { getUserList, deleteUsers, getRoleList, updateUserStatus } from '../api'
+import { getUserList, deleteUsers, getRoleList, updateUserStatus, createAppAdminUsers } from '../api'
 
 export default {
-  components: { AppCard, AppList, Editform },
+  components: { Editform: () => import('../components/Editform.vue') },
   data() {
     return {
       roles: [],
@@ -138,13 +135,21 @@ export default {
     // 删除
     handleRemove() {
       const ids = this.multipleSelection.map(item => item.id)
-      deleteUsers(this.appid, { ids: JSON.stringify(ids) }).then(res => {
+      deleteUsers({ app_id: this.appid, ids: JSON.stringify(ids) }).then(res => {
         this.$message({ type: 'success', message: '删除成功' })
         this.$refs.list.refetch()
       })
     },
     changeStatus(row) {
-      updateUserStatus(row.id, { status: row.status }).then(res => {
+      updateUserStatus({ id: row.id, status: row.status }).then(res => {
+        this.$refs.list.refetch()
+      })
+    },
+    // 设为管理员
+    setAdmin() {
+      const ids = this.multipleSelection.map(item => item.id)
+      createAppAdminUsers({ app_id: this.appid, user_ids: JSON.stringify(ids) }).then(res => {
+        this.$message({ type: 'success', message: '设置成功' })
         this.$refs.list.refetch()
       })
     }

src/modules/test/api.js

-import httpRequest from '@/utils/axios'
-
-/**
- * 获取商品列表
- */
-export function getGoodsList(data) {
-  return httpRequest.post('/api/shop/commodity/spu/search', data).then({})
-}

src/modules/test/index.js

-import AppLayout from '@/components/layout/Index.vue'
-
-const routes = [
-  {
-    path: '/test',
-    component: AppLayout,
-    children: [{ path: '', component: () => import('./views/List.vue') }]
-  }
-]
-
-export { routes }

src/modules/test/views/List.vue

-<template>
-  <app-card>
-    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
-      <template #header-aside>
-        <el-button type="primary">创建</el-button>
-      </template>
-      <template v-slot:table-x="{ row }">
-        <el-button type="text">编辑</el-button>
-        <el-button type="text" @click="onRemove(row)">删除</el-button>
-      </template>
-    </app-list>
-  </app-card>
-</template>
-
-<script>
-// 组件
-import AppList from '@/components/base/AppList.vue'
-import AppCard from '@/components/base/AppCard.vue'
-// 接口
-// import { getGoodsList } from '../api'
-
-export default {
-  components: { AppCard, AppList },
-  data() {
-    return {}
-  },
-  computed: {
-    // 列表配置
-    tableOptions() {
-      return {
-        // remote: {
-        //   httpRequest: getGoodsList,
-        //   params: { shop_id: this.shopId, spu_id: '', spu_name: '', group_id: '', price_min: '', price_max: '' },
-        //   beforeRequest: this.beforeRequest
-        // },
-        filters: [
-          {
-            type: 'input',
-            prop: 'spu_name',
-            placeholder: '商品名称'
-          },
-          {
-            type: 'select',
-            prop: 'group_id',
-            options: this.groupList,
-            labelKey: 'group_name',
-            valueKey: 'group_id',
-            placeholder: '商品分组'
-          },
-          { prop: 'price_zone', slots: 'filter-price' }
-        ],
-        columns: [
-          { label: '日期', prop: 'date', minWidth: 140 },
-          { label: '姓名', prop: 'name', align: 'center', minWidth: 140 },
-          { label: '地址', prop: 'address', minWidth: 120 },
-          { label: '操作', slots: 'table-x', align: 'right', width: 150 }
-        ],
-        data: [
-          {
-            date: '2016-05-02',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
-          },
-          {
-            date: '2016-05-04',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1517 弄'
-          },
-          {
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          },
-          {
-            date: '2016-05-03',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1516 弄'
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    beforeRequest(params, isReset) {
-      // 重置
-      if (isReset) {
-        params.price_min = ''
-        params.price_max = ''
-      }
-      params.status = this.activeName === '0' ? '' : this.activeName
-      params.price_zone = `${params.price_min || ''},${params.price_max || ''}`
-      return params
-    },
-    handleClick() {
-      this.$refs.list.refetch(true)
-    },
-    // 编辑
-    handleUpdate(row) {
-      this.$router.push({ name: 'goodsEdit', params: { id: row.spu_id } })
-    },
-    // 删除
-    onRemove() {
-      this.$confirm('商品删除请谨慎操作，确定删除？', '删除商品', {
-        confirmButtonText: '删除',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(this.handleRemove)
-    },
-    // 删除
-    handleRemove() {
-      // const data = this.multipleSelection.map(item => ({ spu_id: item.spu_id }))
-      // deleteGoods({ shop_id: this.shopId, data }).then(res => {
-      //   this.$refs.list.refetch(true)
-      // })
-    },
-    // 推广
-    handlePromote(row) {
-      this.shareUrl = `${import.meta.env.VITE_H5_PREVIEW_URL}/buy?shop_id=${row.shop_id}&spu_id=${row.spu_id}`
-      this.shareDialogVisible = true
-    },
-    // 复制
-    handleCopy(row) {
-      this.$router.push({ name: 'goodsAdd', query: { id: row.spu_id } })
-    },
-    // 选择
-    handleSelectionChange(value) {
-      this.multipleSelection = value
-    },
-    // 上架
-    handleUpdateStatus(status) {
-      // const data = this.multipleSelection.map(item => ({ spu_id: item.spu_id, status }))
-      // updateGoodsStatus({ shop_id: this.shopId, data }).then(res => {
-      //   this.$refs.list.refetch()
-      // })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.filter-price {
-  .el-input {
-    width: 140px;
-  }
-}
-</style>