1.2.3 后台操作按钮调整及其新增开启拼团功能

2019-11-19 13:44:19 +08:00
commit 4faa83dc0c
307 changed files with 23684 additions and 0 deletions
--- a/src/views/system/role/form.vue
+++ b/src/views/system/role/form.vue
@ -0,0 +1,142 @@
+<template>
+  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增角色' : '编辑角色'" append-to-body width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <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
+            v-for="item in dateScopes"
+            :key="item"
+            :label="item"
+            :value="item"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="form.dataScope === '自定义'" label="数据权限">
+        <treeselect v-model="deptIds" :options="depts" multiple style="width: 370px" placeholder="请选择" />
+      </el-form-item>
+      <el-form-item label="描述信息">
+        <el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDepts } from '@/api/dept'
+import { add, edit } from '@/api/role'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  components: { Treeselect },
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dateScopes: ['全部', '本级', '自定义'],
+      loading: false, dialog: false, depts: [], deptIds: [],
+      form: { name: '', depts: [], remark: '', dataScope: '本级', level: 3 },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      if (this.form.dataScope === '自定义' && this.deptIds.length === 0) {
+        this.$message({
+          message: '自定义数据权限不能为空',
+          type: 'warning'
+        })
+      } else {
+        this.form.depts = []
+        if (this.form.dataScope === '自定义') {
+          for (let i = 0; i < this.deptIds.length; i++) {
+            this.form.depts.push({
+              id: this.deptIds[i]
+            })
+          }
+        }
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            if (this.isAdd) {
+              this.doAdd()
+            } else this.doEdit()
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { name: '', depts: [], remark: '', dataScope: '本级', level: 3 }
+    },
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content
+      })
+    },
+    changeScope() {
+      if (this.form.dataScope === '自定义') {
+        this.getDepts()
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -0,0 +1,321 @@
+<template>
+  <div class="app-container">
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd"/>
+    <!--工具栏-->
+    <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="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+      <!-- 新增 -->
+      <div v-permission="['ADMIN','ROLES_ALL','ROLES_CREATE']" style="display: inline-block;margin: 0px 2px;">
+        <el-button
+          class="filter-item"
+          size="mini"
+          type="primary"
+          icon="el-icon-plus"
+          @click="add">新增</el-button>
+      </div>
+    </div>
+    <el-row :gutter="15">
+      <!--角色管理-->
+      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <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" fixed="right">
+              <template slot-scope="scope">
+                <el-button v-permission="['ADMIN','ROLES_ALL','ROLES_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
+                <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"
+            :current-page="page + 1"
+            style="margin-top: 8px;"
+            layout="total, prev, pager, next, sizes"
+            @size-change="sizeChange"
+            @current-change="pageChange"/>
+        </el-card>
+      </el-col>
+      <!-- 授权 -->
+      <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">
+            <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="menuLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="saveMenu">保存</el-button>
+          </div>
+          <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>
+  </div>
+</template>
+
+<script>
+import checkPermission from '@/utils/permission'
+import initData from '@/mixins/initData'
+import { del } from '@/api/role'
+import { getPermissionTree } from '@/api/permission'
+import { getMenusTree } from '@/api/menu'
+import { parseTime } from '@/utils/index'
+import eForm from './form'
+import { editPermission, editMenu, get } from '@/api/role'
+export default {
+  name: 'Role',
+  components: { eForm },
+  mixins: [initData],
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      currentId: 0, permissionLoading: false, menuLoading: false, showButton: false, opt: '菜单分配',
+      delLoading: false, permissions: [], permissionIds: [], menus: [], menuIds: []
+    }
+  },
+  created() {
+    this.getPermissions()
+    this.getMenus()
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    parseTime,
+    checkPermission,
+    beforeInit() {
+      this.showButton = false
+      this.url = 'api/roles'
+      const sort = 'level,asc'
+      const query = this.query
+      const value = query.value
+      this.params = { page: this.page, size: this.size, sort: sort }
+      if (value) { this.params['blurry'] = value }
+      // 清空权限与菜单的选中
+      this.$refs.permission.setCheckedKeys([])
+      this.$refs.menu.setCheckedKeys([])
+      return true
+    },
+    subDelete(id) {
+      this.delLoading = true
+      del(id).then(res => {
+        this.delLoading = false
+        this.$refs[id].doClose()
+        this.dleChangePage()
+        this.init()
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+      }).catch(err => {
+        this.delLoading = false
+        this.$refs[id].doClose()
+        console.log(err.response.data.message)
+      })
+    },
+    getPermissions() {
+      getPermissionTree().then(res => {
+        this.permissions = res
+      })
+    },
+    getMenus() {
+      getMenusTree().then(res => {
+        this.menus = res
+      })
+    },
+    handleCurrentChange(val) {
+      if (val) {
+        const _this = this
+        // 清空权限与菜单的选中
+        this.$refs.permission.setCheckedKeys([])
+        this.$refs.menu.setCheckedKeys([])
+        // 保存当前的角色id
+        this.currentId = val.id
+        // 点击后显示按钮
+        this.showButton = true
+        // 初始化
+        this.menuIds = []
+        this.permissionIds = []
+        // 菜单数据需要特殊处理
+        val.menus.forEach(function(data, index) {
+          let add = true
+          for (let i = 0; i < val.menus.length; i++) {
+            if (data.id === val.menus[i].pid) {
+              add = false
+              break
+            }
+          }
+          if (add) {
+            _this.menuIds.push(data.id)
+          }
+        })
+        // 处理权限数据
+        val.permissions.forEach(function(data, index) {
+          _this.permissionIds.push(data.id)
+        })
+      }
+    },
+    savePermission() {
+      this.permissionLoading = true
+      const role = { id: this.currentId, permissions: [] }
+      this.$refs.permission.getCheckedKeys().forEach(function(data, index) {
+        const permission = { id: data }
+        role.permissions.push(permission)
+      })
+      editPermission(role).then(res => {
+        this.$notify({
+          title: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.permissionLoading = false
+        this.update()
+      }).catch(err => {
+        this.permissionLoading = false
+        console.log(err.response.data.message)
+      })
+    },
+    saveMenu() {
+      this.menuLoading = true
+      const role = { id: this.currentId, menus: [] }
+      // 得到半选的父节点数据，保存起来
+      this.$refs.menu.getHalfCheckedNodes().forEach(function(data, index) {
+        const permission = { id: data.id }
+        role.menus.push(permission)
+      })
+      // 得到已选中的 key 值
+      this.$refs.menu.getCheckedKeys().forEach(function(data, index) {
+        const permission = { id: data }
+        role.menus.push(permission)
+      })
+      editMenu(role).then(res => {
+        this.$notify({
+          title: '保存成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.menuLoading = false
+        this.update()
+      }).catch(err => {
+        this.menuLoading = false
+        console.log(err.response.data.message)
+      })
+    },
+    update() {
+      // 无刷新更新 表格数据
+      get(this.currentId).then(res => {
+        for (let i = 0; i < this.data.length; i++) {
+          if (res.id === this.data[i].id) {
+            this.data[i] = res
+            break
+          }
+        }
+      })
+    },
+    add() {
+      this.isAdd = true
+      this.$refs.form.dialog = true
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.deptIds = []
+      _this.form = { id: data.id, name: data.name, remark: data.remark, depts: data.depts, dataScope: data.dataScope, level: data.level }
+      if (_this.form.dataScope === '自定义') {
+        _this.getDepts()
+      }
+      for (let i = 0; i < _this.form.depts.length; i++) {
+        _this.deptIds[i] = _this.form.depts[i].id
+      }
+      _this.dialog = true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .role-span {
+    font-weight: bold;color: #303133;
+    font-size: 15px;
+  }
+</style>
+
+<style scoped>
+  /deep/ .el-tree-node__label{
+    margin-left: 5px;
+  }
+</style>