haiwei-module-admin 1.0.0

package/src/views/role/components/tree/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <nm-box page header refresh title="角色列表" icon="role" @refresh="refresh">
+    <template v-slot:toolbar>
+      <nm-button :code="buttons.add.code" type="text" icon="add" @click="add" />
+      <nm-button :code="buttons.edit.code" type="text" icon="edit" @click="edit" :disabled="canEdit" />
+    </template>
+    <el-tree ref="tree" v-bind="tree" v-on="on">
+      <span style="width:100%;height:32px;line-height:32px;" slot-scope="{ data }">
+        <el-tooltip v-if="data.isSpecified" effect="dark" content="指定角色，在其他业务模块中硬编码的角色，不允许编辑删除" placement="top">
+          <nm-icon class="nm-size-20 nm-text-warning" name="star-fill" />
+        </el-tooltip>
+        <nm-icon class="nm-size-20" v-else name="role" />
+        <span class="nm-m-l-5" :title="data.remarks">{{ data.label }}</span>
+        <nm-button v-if="!data.isSpecified" :code="buttons.del.code" type="text" icon="delete" class="nm-pull-right nm-text-danger" @click.native.stop="del(data)" />
+      </span>
+    </el-tree>
+
+    <!--保存页-->
+    <save-page :id="curr.id" :visible.sync="dialog.save" @success="refresh" />
+  </nm-box>
+</template>
+<script>
+import page from '../../index/page'
+import SavePage from '../save'
+const api = $api.admin.role
+export default {
+  components: { SavePage },
+  data() {
+    return {
+      tree: {
+        data: [],
+        nodeKey: 'id',
+        highlightCurrent: true
+      },
+      on: {
+        'current-change': this.onTreeChange
+      },
+      selection: null,
+      curr: { id: '' },
+      dialog: {
+        save: false
+      },
+      buttons: page.buttons
+    }
+  },
+  computed: {
+    canEdit() {
+      return !this.selection || this.selection.isSpecified
+    }
+  },
+  methods: {
+    //刷新
+    refresh() {
+      api.query().then(data => {
+        let treeData = data.rows.map(m => {
+          return {
+            id: m.id,
+            label: m.name,
+            remarks: m.remarks,
+            isSpecified: m.isSpecified
+          }
+        })
+        this.tree.data = treeData
+
+        //选中第一个
+        if (treeData.length > 0) {
+          this.selection = treeData[0]
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.selection.id)
+            this.$emit('change', this.selection)
+          })
+        }
+      })
+    },
+    add() {
+      this.curr.id = ''
+      this.dialog.save = true
+    },
+    edit() {
+      if (!this.selection) {
+        this._warning('请选择要修改的角色')
+        return
+      }
+      this.curr.id = this.selection.id
+      this.dialog.save = true
+    },
+    del(role) {
+      this._delete(async () => {
+        this._openLoading('正在删除，请稍后...')
+        api
+          .remove(role.id)
+          .then(() => {
+            this._closeLoading()
+            this._success('删除成功~')
+            this.refresh()
+          })
+          .catch(() => {
+            this._closeLoading()
+          })
+      }, this.msg).catch(() => {})
+    },
+    onTreeChange(data) {
+      if (this.selection === data) return
+      this.selection = data
+      this.$emit('change', this.selection)
+    }
+  },
+  created() {
+    this.refresh()
+  }
+}
+</script>

package/src/views/role/index/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <nm-container>
+    <nm-split v-model="split">
+      <template v-slot:left>
+        <role-tree ref="tree" @change="onTreeChange" />
+      </template>
+      <template v-slot:right>
+        <nm-tabs>
+          <el-tabs type="border-card">
+            <el-tab-pane v-if="_hasButton(buttons.bindMenus)">
+              <span slot="label"><nm-icon name="menu" /> 菜单绑定</span>
+              <menu-bind :id="roleId" />
+            </el-tab-pane>
+            <el-tab-pane v-if="_hasButton(buttons.bindPages)" lazy>
+              <span slot="label"><nm-icon name="web" /> 页面授权</span>
+              <page-bind :id="roleId" />
+            </el-tab-pane>
+            <el-tab-pane v-if="_hasButton(buttons.bindPlatform)" lazy>
+              <span slot="label"><nm-icon name="android" /> 平台授权</span>
+              <platform-bind :id="roleId" />
+            </el-tab-pane>
+          </el-tabs>
+        </nm-tabs>
+      </template>
+    </nm-split>
+  </nm-container>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+import page from './page'
+import RoleTree from '../components/tree'
+import MenuBind from '../components/menu-bind'
+import PageBind from '../components/page-bind'
+import PlatformBind from '../components/platform-bind'
+export default {
+  name: page.name,
+  mixins: [mixins.button],
+  components: { RoleTree, MenuBind, PageBind, PlatformBind },
+  data() {
+    return {
+      split: 0.2,
+      roleId: '',
+      buttons: page.buttons
+    }
+  },
+  methods: {
+    onTreeChange(data) {
+      this.roleId = data.id
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-admin-role-menus-tree {
+  &-node {
+    position: relative;
+    padding-left: 300px;
+    height: 26px;
+    line-height: 26px;
+
+    &-label {
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+</style>

package/src/views/role/index/page.js

@@ -0,0 +1,64 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '角色管理'
+  this.icon = 'role'
+  this.name = 'admin_role'
+  this.path = '/admin/role'
+
+  // 关联权限
+  this.permissions = [`${this.name}_query_get`]
+
+  // 按钮
+  this.buttons = {
+    add: {
+      text: '添加',
+      type: 'text',
+      icon: 'add',
+      code: `${this.name}_add`,
+      permissions: [`${this.name}_add_post`]
+    },
+    edit: {
+      text: '编辑',
+      type: 'text',
+      icon: 'edit',
+      code: `${this.name}_edit`,
+      permissions: [`${this.name}_edit_get`, `${this.name}_update_post`]
+    },
+    del: {
+      text: '删除',
+      type: 'text',
+      icon: 'delete',
+      code: `${this.name}_del`,
+      permissions: [`${this.name}_delete_delete`]
+    },
+    bindMenus: {
+      text: '菜单绑定',
+      type: 'text',
+      icon: 'bind',
+      code: `${this.name}_bind_menus`,
+      permissions: [`${this.name}_BindMenus_get`, `${this.name}_BindMenus_post`]
+    },
+    bindPages: {
+      text: '页面授权',
+      type: 'text',
+      icon: 'bind',
+      code: `${this.name}_bind_pages`,
+      permissions: [`${this.name}_BindPages_get`, `${this.name}_BindPages_post`]
+    },
+    bindPlatform: {
+      text: '平台授权',
+      type: 'text',
+      icon: 'bind',
+      code: `${this.name}_bind_platform`,
+      permissions: [`admin_permission_tree_get`, `${this.name}_BindPlatformPermissions_get`, `${this.name}_BindPlatformPermissions_post`]
+    }
+  }
+})()
+
+/** 路由信息 */
+export const route = {
+  page,
+  component: () => import(/* webpackChunkName: "admin.role" */ './index')
+}
+
+export default page