v1.9 发布，详情查看发行版说明

2019-05-18 12:22:50 +08:00
parent f0255b5e33
commit 98fa128eda
56 changed files with 454 additions and 258 deletions
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,93 +1,105 @@
 <template>
  <div class="app-container">
    <eHeader :query="query"/>
-    <!--表格渲染-->
-    <div :style="'height: auto;max-height:' + height + 'overflow-y: auto;'">
-      <el-table v-loading="loading" :data="data" highlight-current-row size="small" style="width: 100%;" @current-change="handleCurrentChange">
-        <el-table-column prop="name" label="名称"/>
-        <el-table-column prop="dataScope" label="数据权限"/>
-        <el-table-column prop="remark" label="描述"/>
-        <el-table-column prop="createTime" label="创建日期">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="150px" align="center">
-          <template slot-scope="scope">
-            <edit v-if="checkPermission(['ADMIN','ROLES_ALL','ROLES_EDIT'])" :data="scope.row" :sup_this="sup_this"/>
-            <el-popover
-              v-if="checkPermission(['ADMIN','ROLES_ALL','ROLES_DELETE'])"
-              :ref="scope.row.id"
-              placement="top"
-              width="180">
-              <p>确定删除本条数据吗？</p>
-              <div style="text-align: right; margin: 0">
-                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
-              </div>
-              <el-button slot="reference" type="danger" size="mini">删除</el-button>
-            </el-popover>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页组件-->
-    <el-pagination
-      :total="total"
-      style="margin-top: 8px;"
-      layout="total, prev, pager, next, sizes"
-      @size-change="sizeChange"
-      @current-change="pageChange"/>
-    <!--这里是授权模块代码-->
-    <el-row :gutter="20" style="margin-top: 5px;">
-      <!--权限分配-->
-      <el-col :span="12">
+    <el-row :gutter="15">
+      <!--角色管理-->
+      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
-            <span class="role-span">权限分配</span>
-            <el-button
-              v-if="showButton && checkPermission(['ADMIN','ROLES_ALL','ROLES_EDIT'])"
-              :loading="permissionLoading"
-              icon="el-icon-check"
-              size="mini"
-              style="float: right; padding: 4px 10px"
-              type="info"
-              @click="savePermission">保存</el-button>
-          </div>
-          <div style="min-height: 320px;max-height:500px;overflow-y: auto;">
-            <el-tree
-              ref="permission"
-              :data="permissions"
-              :default-checked-keys="permissionIds"
-              :props="defaultProps"
-              show-checkbox
-              node-key="id"/>
+            <span class="role-span">角色列表</span>
+            <div id="opt" style="float: right">
+              <el-radio-group v-model="opt" size="mini">
+                <el-radio-button label="菜单分配"/>
+                <el-radio-button label="权限分配"/>
+              </el-radio-group>
+            </div>
          </div>
+          <el-table v-loading="loading" :data="data" highlight-current-row size="small" style="width: 100%;" @current-change="handleCurrentChange">
+            <el-table-column prop="name" label="名称"/>
+            <el-table-column prop="dataScope" label="数据权限"/>
+            <el-table-column prop="level" label="角色级别"/>
+            <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
+            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="checkPermission(['ADMIN','ROLES_ALL','ROLES_EDIT','ROLES_DELETE'])" label="操作" width="130px" align="center">
+              <template slot-scope="scope">
+                <edit v-permission="['ADMIN','ROLES_ALL','ROLES_EDIT']" :data="scope.row" :sup_this="sup_this"/>
+                <el-popover
+                  v-permission="['ADMIN','ROLES_ALL','ROLES_DELETE']"
+                  :ref="scope.row.id"
+                  placement="top"
+                  width="180">
+                  <p>确定删除本条数据吗？</p>
+                  <div style="text-align: right; margin: 0">
+                    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+                    <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+                  </div>
+                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
+                </el-popover>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <el-pagination
+            :total="total"
+            style="margin-top: 8px;"
+            layout="total, prev, pager, next, sizes"
+            @size-change="sizeChange"
+            @current-change="pageChange"/>
        </el-card>
      </el-col>
-      <!--菜单分配-->
-      <el-col :span="12">
-        <el-card class="box-card" shadow="never">
+      <!-- 授权 -->
+      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+        <el-card v-show="opt === '菜单分配'" class="box-card" shadow="never">
          <div slot="header" class="clearfix">
-            <span class="role-span">菜单分配</span>
+            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
+              <span class="role-span">菜单分配</span>
+            </el-tooltip>
            <el-button
-              v-if="showButton && checkPermission(['ADMIN','ROLES_ALL','ROLES_EDIT'])"
+              v-permission="['ADMIN','ROLES_ALL','ROLES_EDIT']"
+              :disabled="!showButton"
              :loading="menuLoading"
              icon="el-icon-check"
              size="mini"
-              style="float: right; padding: 4px 10px"
-              type="info"
+              style="float: right; padding: 6px 9px"
+              type="primary"
              @click="saveMenu">保存</el-button>
          </div>
-          <div style="min-height: 320px;max-height:500px;overflow-y: auto;">
-            <el-tree
-              ref="menu"
-              :data="menus"
-              :default-checked-keys="menuIds"
-              :props="defaultProps"
-              show-checkbox
-              node-key="id"/>
+          <el-tree
+            ref="menu"
+            :data="menus"
+            :default-checked-keys="menuIds"
+            :props="defaultProps"
+            accordion
+            show-checkbox
+            node-key="id"/>
+        </el-card>
+        <el-card v-show="opt === '权限分配'" class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <el-tooltip class="item" effect="dark" content="选择指定角色分配权限" placement="top">
+              <span class="role-span">权限分配</span>
+            </el-tooltip>
+            <el-button
+              v-permission="['ADMIN','ROLES_ALL','ROLES_EDIT']"
+              :disabled="!showButton"
+              :loading="permissionLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="savePermission">保存</el-button>
          </div>
+          <el-tree
+            ref="permission"
+            :data="permissions"
+            :default-checked-keys="permissionIds"
+            :props="defaultProps"
+            show-checkbox
+            accordion
+            node-key="id"/>
        </el-card>
      </el-col>
    </el-row>
@@ -113,9 +125,8 @@ export default {
        children: 'children',
        label: 'label'
      },
-      currentId: 0, permissionLoading: false, menuLoading: false, showButton: false,
-      delLoading: false, sup_this: this, permissions: [], permissionIds: [], menus: [], menuIds: [],
-      height: document.documentElement.clientHeight - 94.5 - 260 + 'px;'
+      currentId: 0, permissionLoading: false, menuLoading: false, showButton: false, opt: '菜单分配',
+      delLoading: false, sup_this: this, permissions: [], permissionIds: [], menus: [], menuIds: []
    }
  },
  created() {
@@ -125,12 +136,6 @@ export default {
      this.init()
    })
  },
-  mounted: function() {
-    const that = this
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 - 260 + 'px;'
-    }
-  },
  methods: {
    parseTime,
    checkPermission,
@@ -139,7 +144,7 @@ export default {
      this.$refs.menu.setCheckedKeys([])
      this.showButton = false
      this.url = 'api/roles'
-      const sort = 'id,desc'
+      const sort = 'level,asc'
      const query = this.query
      const value = query.value
      this.params = { page: this.page, size: this.size, sort: sort }
@@ -266,7 +271,7 @@ export default {
 }
 </script>

-<style scoped>
+<style rel="stylesheet/scss" lang="scss">
  .role-span {
    font-weight: bold;color: #303133;
    font-size: 15px;
--- a/src/views/system/role/module/edit.vue
+++ b/src/views/system/role/module/edit.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <el-button size="mini" type="success" @click="to">编辑</el-button>
+    <el-button size="mini" type="primary" icon="el-icon-edit" @click="to"/>
    <eForm ref="form" :sup_this="sup_this" :is-add="false"/>
  </div>
 </template>
@@ -22,7 +22,7 @@ export default {
    to() {
      const _this = this.$refs.form
      _this.deptIds = []
-      _this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, depts: this.data.depts, dataScope: this.data.dataScope }
+      _this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, depts: this.data.depts, dataScope: this.data.dataScope, level: this.data.level }
      if (_this.form.dataScope === '自定义') {
        _this.getDepts()
      }
--- a/src/views/system/role/module/form.vue
+++ b/src/views/system/role/module/form.vue
@@ -4,6 +4,9 @@
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" style="width: 370px;"/>
      </el-form-item>
+      <el-form-item label="角色级别" prop="sort">
+        <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 370px;"/>
+      </el-form-item>
      <el-form-item label="数据范围">
        <el-select v-model="form.dataScope" style="width: 370px" placeholder="请选择数据范围" @change="changeScope">
          <el-option
@@ -48,7 +51,7 @@ export default {
    return {
      dateScopes: ['全部', '本级', '自定义'],
      loading: false, dialog: false, depts: [], deptIds: [],
-      form: { name: '', depts: [], remark: '', dataScope: '本级' },
+      form: { name: '', depts: [], remark: '', dataScope: '本级', level: 3 },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
@@ -120,7 +123,7 @@ export default {
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
-      this.form = { name: '', depts: [], remark: '', dataScope: '本级' }
+      this.form = { name: '', depts: [], remark: '', dataScope: '本级', level: 3 }
    },
    getDepts() {
      getDepts({ enabled: true }).then(res => {
@@ -136,5 +139,8 @@ export default {
 }
 </script>

-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
+  }
 </style>
--- a/src/views/system/role/module/header.vue
+++ b/src/views/system/role/module/header.vue
@@ -2,11 +2,11 @@
  <div class="head-container">
    <!-- 搜索 -->
    <el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
+    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 新增 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
-        v-if="checkPermission(['ADMIN','ROLES_ALL','ROLES_CREATE'])"
+        v-permission="['ADMIN','ROLES_ALL','ROLES_CREATE']"
        class="filter-item"
        size="mini"
        type="primary"
@@ -14,14 +14,10 @@
        @click="$refs.form.dialog = true">新增</el-button>
      <eForm ref="form" :is-add="true"/>
    </div>
-    <!-- 导出 -->
-    <el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
  </div>
 </template>

 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import { parseTime } from '@/utils/index'
 import eForm from './form'
 // 查询条件
 export default {
@@ -38,33 +34,9 @@ export default {
    }
  },
  methods: {
-    checkPermission,
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
-    },
-    download() {
-      this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['ID', '名称', '描述', '创建日期']
-        const filterVal = ['id', 'name', 'remark', 'createTime']
-        const data = this.formatJson(filterVal, this.$parent.data)
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: 'table-list'
-        })
-        this.downloadLoading = false
-      })
-    },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => {
-        if (j === 'createTime') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
    }
  }
 }