haiwei-module-admin 1.0.0

package/src/views/module/index/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <nm-container>
+    <nm-box v-bind="box">
+      <template v-slot:title
+        >模块中心<span class="nm-p-l-10 nm-size-12">
+          当前模块：<label class="nm-text-primary">{{ list.length }}</label></span
+        >
+      </template>
+      <template v-slot:toolbar>
+        <nm-button icon="refresh" size="mini" @click="refresh" />
+      </template>
+      <div class="module-list">
+        <div class="module-list-item" v-for="(item, i) in list" :key="i">
+          <div class="module-list-item-bar" :style="{ backgroundColor: item.color }"></div>
+          <div class="module-list-item-wrapper">
+            <div class="module-list-item-icon" :style="{ backgroundColor: item.color }"><nm-icon :name="item.icon" /></div>
+            <div class="module-list-item-info">
+              <p>
+                {{ getNo(item) }}_{{ item.name
+                }}<label class="api-request-count"
+                  >访问<label class="nm-text-warning nm-p-l-3 nm-p-r-3">{{ item.apiRequestCount }}</label
+                  >次</label
+                >
+              </p>
+              <p><span>编码：</span>{{ item.code }}</p>
+              <p><span>版本：</span>{{ item.version }}</p>
+              <p :title="item.remarks"><span>说明：</span>{{ item.remarks }}</p>
+            </div>
+            <div class="module-list-item-btn">
+              <nm-button text="接口" size="mini" type="success" @click="openPermission(item)" />
+              <nm-button text="页面" size="mini" type="primary" @click="openPage(item)" />
+              <nm-button text="删除" size="mini" type="danger" @click="remove(item)" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </nm-box>
+    <!--接口列表-->
+    <permission-list :module="module" :visible.sync="dialog.permission" />
+    <!--页面列表-->
+    <page-list :module="module" :visible.sync="dialog.page" />
+  </nm-container>
+</template>
+<script>
+import PermissionList from '../components/permission-list'
+import PageList from '../components/page-list'
+import page from './page'
+// 接口
+const { query } = $api.admin.module
+
+export default {
+  name: page.name,
+  components: { PermissionList, PageList },
+  data() {
+    return {
+      list: [],
+      colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#6d3cf7', '#0079de'],
+      box: {
+        page: true,
+        header: true,
+        icon: 'app',
+        fullscreen: true,
+        loading: false
+      },
+      dialog: {
+        permission: false,
+        page: false
+      },
+      buttons: page.buttons,
+      module: {}
+    }
+  },
+  methods: {
+    refresh() {
+      this.box.loading = true
+      query()
+        .then(data => {
+          this.list = data.map(m => {
+            m.color = this.colors[parseInt(Math.random() * this.colors.length)]
+            return m
+          })
+          this.box.loading = false
+        })
+        .catch(() => {
+          this.box.loading = false
+        })
+    },
+    getNo(item) {
+      return item.number < 10 ? '0' + item.number : '' + item.number
+    },
+    openPermission(m) {
+      this.module = m
+      this.dialog.permission = true
+    },
+    openPage(m) {
+      this.module = m
+      this.dialog.page = true
+    },
+    remove() {
+      this._warning('在线删除模块功能开发中，敬请期待~', '提示')
+    }
+  },
+  created() {
+    this.refresh()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.module-list {
+  height: 100%;
+  &-item {
+    position: relative;
+    display: inline-block;
+    margin: 0 1% 10px 0;
+    width: 24%;
+    height: 100px;
+
+    &:nth-child(2n + 1) {
+      margin-left: 0.5%;
+    }
+
+    &:nth-child(2n) {
+      margin-right: 0.5%;
+    }
+
+    &-bar {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      height: 2px;
+      width: 0;
+      margin-left: 0;
+      transition: all 0.3s ease-in-out;
+      z-index: 9999;
+    }
+
+    &-wrapper {
+      position: absolute;
+      padding: 0 0 0 80px;
+      width: 100%;
+      border: 1px solid #ebeef5;
+      box-sizing: border-box;
+      cursor: pointer;
+      background-color: #fff;
+      height: 100px;
+      transition: all 0.3s ease-in-out;
+      overflow: hidden;
+    }
+
+    &-icon {
+      position: absolute;
+      left: 10px;
+      top: 20px;
+      width: 60px;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      font-size: 40px;
+      transition: all 0.4s ease-in-out;
+      color: #fff;
+      border-radius: 30px;
+    }
+
+    &-info {
+      padding: 5px 10px 5px 0;
+      height: 80px;
+      line-height: 1.7;
+      font-size: 12px;
+
+      p {
+        position: relative;
+        padding-left: 34px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-all;
+        color: #606266;
+
+        span {
+          position: absolute;
+          left: 0;
+        }
+      }
+
+      p:first-child {
+        padding-left: 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .api-request-count {
+        float: right;
+        font-size: 11px;
+        font-weight: 400;
+      }
+    }
+
+    &-btn {
+      padding: 10px;
+      text-align: right;
+
+      .el-button--mini {
+        padding: 4px 6px;
+      }
+    }
+
+    &:hover {
+      .module-list-item-bar {
+        width: 100% !important;
+        margin-left: -50%;
+      }
+
+      .module-list-item-wrapper {
+        height: 135px;
+        z-index: 999;
+        box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.5);
+      }
+
+      .module-list-item-icon {
+        transform: rotateZ(360deg);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+/** 页面信息 */
+const page = new (function() {
+  this.title = '模块中心'
+  this.icon = 'product'
+  this.name = 'admin_module'
+  this.path = '/admin/module'
+
+  // 关联权限
+  this.permissions = [`${this.name}_query_get`, `admin_permission_query_get`, `admin_permission_querybycodes_get`]
+
+  // 按钮
+  this.buttons = {}
+})()
+
+/** 路由信息 */
+export const route = {
+  page,
+  component: () => import(/* webpackChunkName: "admin.module" */ './index')
+}
+
+export default page

package/src/views/role/components/menu-bind/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <nm-box page :header="false" footer :loading="loading">
+    <el-alert title="提示" type="warning" class="nm-m-b-10" description="路由菜单基于页面配置，同一个页面可以配置任意个菜单" show-icon> </el-alert>
+    <el-tree ref="tree" class="nm-admin-role-menus-tree" v-bind="menuTree">
+      <div class="nm-admin-role-menus-tree-node" slot-scope="{ data }">
+        <span class="nm-admin-role-menus-tree-node-label"><nm-icon :name="data.item.icon || 'attachment'" /> {{ data.label }}</span>
+      </div>
+    </el-tree>
+
+    <template v-slot:footer>
+      <nm-button type="success" text="保存" @click="save" />
+      <nm-button type="info" text="重置" @click="reset" />
+    </template>
+  </nm-box>
+</template>
+<script>
+const menuApi = $api.admin.menu
+const { queryBindMenus, bindMenus } = $api.admin.role
+export default {
+  data() {
+    return {
+      loading: false,
+      menuTree: {
+        data: [],
+        nodeKey: 'id',
+        'expand-on-click-node': false,
+        'default-expand-all': true,
+        'show-checkbox': true
+      },
+      menus: []
+    }
+  },
+  props: {
+    //角色ID
+    id: String
+  },
+  methods: {
+    queryMenuTree() {
+      this.loading = true
+      menuApi.getTree().then(data => {
+        this.menuTree.data = [data]
+        this.loading = false
+      })
+    },
+    queryBindMenus() {
+      this.menus = []
+      if (this.id) {
+        this.loading = true
+        queryBindMenus(this.id).then(data => {
+          this.menus = data
+          this.reset()
+          this.loading = false
+        })
+      }
+    },
+    save() {
+      let model = {
+        roleId: this.id,
+        menus: this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
+      }
+      this.loading = true
+      bindMenus(model).then(() => {
+        this._success('保存成功')
+        this.menus = model.menus
+        this.loading = false
+      })
+    },
+    reset() {
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(this.menus)
+      })
+    }
+  },
+  created() {
+    this.queryMenuTree()
+    this.queryBindMenus()
+  },
+  watch: {
+    id() {
+      //延迟加载，防止无法渲染已选择的数据
+      setTimeout(this.queryBindMenus, 100)
+    }
+  }
+}
+</script>

package/src/views/role/components/page-bind/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <nm-box page :header="false" footer :loading="loading">
+    <el-alert
+      title="提示"
+      type="warning"
+      class="nm-m-b-10"
+      description="Web端授权是通过绑定页面以及按钮实现的，页面以及按钮都会关联所用到接口权限，因此只要绑定了页面以及按钮就能拥有所关联的接口权限"
+      show-icon
+    >
+    </el-alert>
+
+    <nm-box class="nm-m-b-5" no-padding>
+      <el-form label-width="100px">
+        <el-form-item class="nm-m-b-0" label="快捷操作：">
+          <el-checkbox label="全选" @change="onCheckAllChange"></el-checkbox>
+        </el-form-item>
+      </el-form>
+    </nm-box>
+
+    <el-tree ref="tree" class="nm-admin-role-menus-tree" v-bind="tree" @check="onTreeCheck">
+      <div class="nm-admin-role-menus-tree-node" slot-scope="{ data }">
+        <span class="nm-admin-role-menus-tree-node-label">{{ data.label }}</span>
+        <div class="nm-admin-role-menus-tree-node-buttons">
+          <el-checkbox v-for="btn in data.buttons" :key="btn.code" v-model="btn.checked" :label="btn.text" :disabled="!data.checked"></el-checkbox>
+        </div>
+      </div>
+    </el-tree>
+
+    <template v-slot:footer>
+      <nm-button type="success" text="保存" @click="save" />
+      <nm-button type="info" text="重置" @click="resetTree" />
+    </template>
+  </nm-box>
+</template>
+<script>
+import { mapState } from 'vuex'
+const moduleApi = $api.admin.module
+const { queryBindPages, bindPages } = $api.admin.role
+export default {
+  data() {
+    return {
+      loading: false,
+      tree: {
+        data: [],
+        nodeKey: 'code',
+        'expand-on-click-node': false,
+        'default-expand-all': true,
+        'show-checkbox': true
+      },
+      bindPages: [],
+      pages: []
+    }
+  },
+  props: {
+    //角色ID
+    id: String
+  },
+  computed: {
+    ...mapState('app/page', { allPages: 'pages' })
+  },
+  methods: {
+    resolveTreeData() {
+      this.loading = true
+      //获取模块列表
+      moduleApi.select().then(data => {
+        data.forEach(m => {
+          let node = {
+            id: m.value.toLowerCase(),
+            label: m.label,
+            checked: false,
+            children: this.allPages
+              .filter(x => x.moduleCode.toLowerCase() === m.value.toLowerCase())
+              .map(y => {
+                let buttons = []
+                for (let key in y.buttons) {
+                  let btn = y.buttons[key]
+                  buttons.push({
+                    text: btn.text,
+                    code: btn.code,
+                    permissions: btn.permissions,
+                    checked: false
+                  })
+                }
+                let page = {
+                  code: y.code,
+                  label: y.name,
+                  buttons: buttons,
+                  permissions: y.permissions,
+                  checked: false
+                }
+
+                this.pages.push(page)
+                return page
+              })
+          }
+          this.tree.data.push(node)
+        })
+        this.loading = false
+
+        this.queryBindPages()
+      })
+    },
+    queryBindPages() {
+      this.bindPages = []
+      if (this.id) {
+        this.loading = true
+        queryBindPages(this.id).then(data => {
+          this.bindPages = data.pages
+          this.resetTree()
+          this.loading = false
+        })
+      }
+    },
+    save() {
+      let model = {
+        roleId: this.id,
+        pages: this.pages
+          .filter(m => m.checked)
+          .map(m => {
+            let buttons = m.buttons.filter(n => n.checked)
+            let page = {
+              code: m.code,
+              buttons: buttons.map(x => x.code),
+              permissions: m.permissions
+            }
+
+            if (page.buttons && page.buttons.length > 0) {
+              buttons.forEach(x => {
+                if (x.permissions && x.permissions.length > 0) {
+                  x.permissions.forEach(y => {
+                    page.permissions.push(y)
+                  })
+                }
+              })
+            }
+
+            return page
+          })
+      }
+      this.loading = true
+      bindPages(model).then(() => {
+        this._success('保存成功')
+        this.loading = false
+      })
+    },
+    /**重置树 */
+    resetTree() {
+      let checkedKeys = []
+
+      //已绑定的菜单
+      this.pages.forEach(m => {
+        let n = this.bindPages.find(x => x.code === m.code)
+        if (n) {
+          checkedKeys.push(m.code)
+          m.checked = true
+          if (m.buttons && m.buttons.length > 0) {
+            m.buttons.forEach(x => {
+              x.checked = n.buttons.includes(x.code)
+            })
+          }
+        } else {
+          m.checked = false
+          if (m.buttons && m.buttons.length > 0) {
+            m.buttons.forEach(x => {
+              x.checked = false
+            })
+          }
+        }
+      })
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(checkedKeys)
+      })
+    },
+    onCheckAllChange(checked) {
+      let checkedKeys = []
+      if (checked) {
+        this.pages.forEach(m => {
+          m.checked = true
+          checkedKeys.push(m.code)
+          if (m.buttons && m.buttons.length > 0) {
+            m.buttons.forEach(x => {
+              x.checked = true
+            })
+          }
+        })
+      } else {
+        this.pages.forEach(m => {
+          m.checked = false
+          if (m.buttons && m.buttons.length > 0) {
+            m.buttons.forEach(x => {
+              x.checked = false
+            })
+          }
+        })
+      }
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(checkedKeys)
+      })
+    },
+    onTreeCheck(data, nodes) {
+      this.pages.forEach(m => {
+        m.checked = nodes.checkedNodes.findIndex(n => n.code === m.code) > -1
+        if (!m.checked && m.buttons && m.buttons.length > 0) {
+          m.buttons.forEach(m => {
+            m.checked = false
+          })
+        }
+      })
+    }
+  },
+  created() {
+    this.resolveTreeData()
+  },
+  watch: {
+    id() {
+      //延迟加载，防止无法渲染已选择的数据
+      setTimeout(this.queryBindPages, 100)
+    }
+  }
+}
+</script>

package/src/views/role/components/platform-bind/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <nm-box page :header="false" footer :loading="loading">
+    <el-alert title="提示" type="warning" class="nm-m-10" description="平台授权是给Web平台以外的平台绑定权限使用的，比如安卓、IOS、小程序等等" show-icon> </el-alert>
+    <el-form label-width="100px">
+      <el-form-item style="width:500px;margin:15px 0;" label="选择平台：">
+        <nm-platform-select v-model="platform" no-web @change="queryBindPlatformPermissions" :clearable="false" />
+      </el-form-item>
+    </el-form>
+    <el-tree ref="tree" v-bind="tree">
+      <span slot-scope="{ data }">
+        <nm-icon name="attachment" />
+        <span class="nm-m-l-5"
+          >{{ data.label
+          }}<label v-if="data.item.isPermission" class="nm-p-l-5 nm-text-info nm-size-14" style="font-style: italic;"
+            >(<label>{{ data.item.code }}</label
+            >)</label
+          ></span
+        >
+      </span>
+    </el-tree>
+    <template v-slot:footer>
+      <nm-button type="success" text="保存" @click="save" />
+      <nm-button type="info" text="重置" @click="reset" />
+    </template>
+  </nm-box>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+const api = $api.admin.permission
+const { queryBindPlatformPermissions, bindPlatformPermissions } = $api.admin.role
+export default {
+  mixins: [mixins.visible],
+  data() {
+    return {
+      tree: {
+        data: [],
+        nodeKey: 'id',
+        defaultExpandAll: true,
+        showCheckbox: true
+      },
+      platform: 1,
+      loading: false,
+      permissions: []
+    }
+  },
+  props: {
+    id: String
+  },
+  methods: {
+    queryPermissionTree() {
+      this.loading = true
+      api
+        .tree()
+        .then(data => {
+          this.tree.data = [data]
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    queryBindPlatformPermissions() {
+      this.loading = true
+      queryBindPlatformPermissions({ roleId: this.id, platform: this.platform }).then(data => {
+        this.permissions = data
+        this.reset()
+        this.loading = false
+      })
+    },
+    save() {
+      let permissions = this.$refs.tree
+        .getCheckedNodes()
+        .filter(m => m.item.isPermission)
+        .map(m => {
+          return m.item.code
+        })
+      this.loading = true
+      bindPlatformPermissions({ roleId: this.id, platform: this.platform, permissions })
+        .then(() => {
+          this._success('保存成功')
+          this.permissions = permissions
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    reset() {
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(this.permissions)
+      })
+    }
+  },
+  created() {
+    this.queryPermissionTree()
+    this.queryBindPlatformPermissions()
+  },
+  watch: {
+    id() {
+      this.platform = 1
+      this.queryBindPlatformPermissions()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <nm-form-dialog ref="form" v-bind="form" v-on="on" :visible.sync="visible_">
+    <el-row>
+      <el-col :span="20" :offset="1">
+        <el-form-item label="名称：" prop="name">
+          <el-input v-model="form.model.name" />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remarks">
+          <el-input type="textarea" v-model="form.model.remarks"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </nm-form-dialog>
+</template>
+<script>
+import { mixins } from 'netmodular-ui'
+
+// 接口
+const { add, edit, update } = $api.admin.role
+
+export default {
+  mixins: [mixins.formSave],
+  data() {
+    return {
+      title: '角色',
+      actions: {
+        add,
+        edit,
+        update
+      },
+      form: {
+        width: '30%',
+        model: {
+          id: '',
+          name: '',
+          remarks: ''
+        },
+        rules: {
+          name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+        }
+      }
+    }
+  }
+}
+</script>