角色权限变路由

4 years ago · c73c2d75f2
2 changed files with 526 additions and 0 deletions
--- a/epmet-oper-web/src/views/modules/productConfig/workRoleAuth.vue
+++ b/epmet-oper-web/src/views/modules/productConfig/workRoleAuth.vue
@ -0,0 +1,403 @@
+<template>
+  <div class="role-container">
+    <el-card class="flex1">
+      <div class="now-name">
+        上下拖动可改变角色顺序
+        <el-button type="primary"
+                   size="small"
+                   @click="handleSaveSort">保存顺序</el-button>
+      </div>
+      <el-table ref="roleTable"
+                v-loading="loading1"
+                :data="roleList"
+                row-key="roleKey"
+                border
+                style="width: 100%">
+        <el-table-column type="index"
+                         header-align="center"
+                         align="center"
+                         width="50"></el-table-column>
+        <!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
+        <el-table-column prop="roleName"
+                         label="角色名称"
+                         header-align="center"
+                         align="center"
+                         width="160">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.isEdit"
+                      v-model="scope.row.roleName"
+                      clearable>
+            </el-input>
+            <span v-else>{{scope.row.constName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="!funcShow"
+                         prop="roleKey"
+                         header-align="center"
+                         align="center"
+                         label="角色Key"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary"
+                       size="mini"
+                       @click="toOperationConfig(scope.row.roleKey, scope.row.roleName)">功能权限</el-button>
+            <!-- <span v-if="scope.row.isEdit" style="display: inline-block; margin-left: 10px;">
+              <el-button type="primary" size="small" @click="handleSaveChange(scope.row)">保存</el-button>
+              <el-button  size="small" @click="scope.row.isEdit=false">取消</el-button>
+            </span>
+            <el-button v-else type="primary" size="mini" @click="handleChangeName(scope.row)">修改名称</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :visible.sync="funcShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               width="70%"
+               top="30px"
+               title="功能列表"
+               @closed="handleDialogClosed">
+      <div class="role-flex"
+           v-if="funcShow">
+        <el-card class="flex1">
+          <div class="now-name">当前角色: {{roleName}}</div>
+          <div class="now-name">
+            <el-button type="primary"
+                       size="small"
+                       @click="saveOperations4Role">保存功能</el-button>
+          </div>
+          <el-table v-loading="loading2"
+                    height="580"
+                    ref="opeTable"
+                    :data="opeList"
+                    border
+                    @select="handleSelectionChange">
+            <el-table-column type="selection"
+                             width="55"></el-table-column>
+            <!-- <el-table-column prop="operationKey" label="操作Key"></el-table-column> -->
+            <el-table-column prop="operationName"
+                             label="操作名称"></el-table-column>
+            <!-- <el-table-column prop="brief" label="简介"></el-table-column> -->
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button type="primary"
+                           size="small"
+                           @click="toScopeConfig(scope.row.operationKey, scope.row.operationName)">范围配置</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+        <el-card v-show="roleShow"
+                 style="width: 250px; margin-left: 10px;">
+          <div class="now-name">当前功能: {{funcName}}</div>
+          <div class="now-name">
+            <el-button type="primary"
+                       size="small"
+                       @click="saveSettings">保存范围</el-button>
+          </div>
+          <div>
+            <el-row :gutter="12">
+              <el-col v-loading="loading3">
+                <el-card shadow="hover">
+                  <el-checkbox-group class="t"
+                                     v-model="checkedScopes"
+                                     @change="roleChange">
+                    <el-checkbox v-for="scope in scopeOptions"
+                                 :label="scope.scopeKey"
+                                 :key="scope.scopeKey">{{scope.scopeName}}</el-checkbox>
+                  </el-checkbox-group>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+export default {
+  name: 'RoleList',
+  props: {
+    customerId: {
+      type: String,
+      default: ''
+    },
+    customerName: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      loading1: false,
+      loading2: false,
+      loading3: false,
+      funcShow: false,
+      roleShow: false,
+      roleName: '',
+      funcName: '',
+      roleList: [],
+      opeList: [],
+      roleKey: '',
+      operationKey: '',
+      scopeOptions: [],
+      settingOptions: [],
+      checkedScopes: [],
+      checkedSettings: [],
+      operateSection: [], // 功能选择列表
+      scopeSection: [] // 范围选择列表
+    }
+  },
+  created () {
+    this.listRolesByCustomerId()
+  },
+  mounted () {
+    this.dragRoleSort()
+  },
+  beforeDestroy () {
+    let _data = this.$data
+    for (let n in _data) {
+      if (typeof _data[n] === 'boolean') _data[n] = false
+      if (typeof _data[n] === 'string') _data[n] = ''
+      if (typeof _data[n] === 'object') _data[n] = []
+    }
+  },
+  methods: {
+    handleDialogClosed () {
+      this.roleName = ''
+      this.roleKey = ''
+      this.funcName = ''
+      this.operateSection = []
+      this.scopeSection = []
+      this.funcShow = false
+      this.roleShow = false
+    },
+    listRolesByCustomerId (customerId) {
+      this.loading1 = true
+      this.$http
+        .post('/epmetuser/govstaffrole/roletemplates')
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0) {
+            this.roleList = res.data.map(item => {
+              return {
+                ...item,
+                constName: item.roleName,
+                isEdit: false
+              }
+            })
+          }
+          setTimeout(() => {
+            this.loading1 = false
+          }, 500)
+        })
+    },
+    listOperations4AccessConfig (roleKey) {
+      this.roleKey = roleKey
+      this.loading2 = true
+      this.$http.post('/gov/access/config/roledefaultops/' + roleKey).then((resp) => {
+        this.opeList = resp.data.data
+        this.$nextTick(function() {
+          this.defaultCheck() // 每次更新了数据，触发这个函数即可。
+        })
+        setTimeout(() => {
+          this.loading2 = false
+        }, 500)
+      })
+    },
+    listSettingOptions (operationKey) {
+      let params = {
+        roleKey: this.roleKey,
+        operationKey: operationKey
+      }
+      console.log('checkedScopes', this.checkedScopes)
+      this.loading3 = true
+      this.$http
+        .post('/gov/access/config/opedefaultscopes/list', params)
+        .then(resp => {
+          console.log('scopeOptions', resp.data)
+          this.scopeOptions = resp.data.data
+          resp.data.data.forEach(item => {
+            if (item.assigned) this.checkedScopes.push(item.scopeKey)
+          })
+          console.log('checkedScopes222', this.checkedScopes)
+          this.settingOptions = resp.data.data
+          setTimeout(() => {
+            this.loading3 = false
+          }, 500)
+        })
+    },
+    defaultCheck () {
+      for (var index in this.opeList) {
+        let role = this.opeList[index]
+        if (role.assigned) {
+          this.$refs.opeTable.toggleRowSelection(role, true)
+        }
+      }
+    },
+    toOperationConfig (roleKey, roleName) {
+      this.roleName = roleName
+      this.funcShow = true
+      this.opeList = []
+      this.listOperations4AccessConfig(roleKey)
+    },
+    toScopeConfig (operationKey, operationName) {
+      this.roleShow = true
+      this.operationKey = operationKey
+      this.funcName = operationName
+      this.checkedScopes = []
+      this.listSettingOptions(operationKey)
+    },
+    saveOperations4Role () {
+      let param = {
+        roleKey: this.roleKey,
+        operationKeys: this.operateSection.map(item => item.operationKey)
+      }
+      this.$http.post('/gov/access/config/roledefaultopes/save', param).then(
+        resp => {
+          const { code, msg } = resp.data
+          if (code === 0 && msg === 'success') {
+            this.$message({
+              message: '操作成功',
+              type: 'success'
+            })
+            this.listOperations4AccessConfig(this.roleKey)
+          } else {
+            this.$message({
+              message: msg,
+              type: 'error'
+            })
+          }
+        }
+      )
+    },
+    saveSettings () {
+      let param = {
+        roleKey: this.roleKey,
+        operationKey: this.operationKey,
+        scopeKeys: this.scopeSection
+      }
+
+      this.$http.post('/gov/access/config/opedefaultscopes/save', param).then(
+        resp => {
+          const { code, msg } = resp.data
+          if (code === 0 && msg === 'success') {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.listSettingOptions(this.operationKey)
+          } else {
+            this.$message({
+              message: msg,
+              type: 'error'
+            })
+          }
+        }
+      )
+    },
+    roleChange (val) {
+      // console.log('valooo', val)
+      this.scopeSection = val
+      // this.saveSettings(val)
+    },
+    handleSelectionChange (val) {
+      // console.log('val', val)
+      this.operateSection = val
+      // this.saveOperations4Role(val)
+    },
+    handleChangeName (row) {
+      row.isEdit = true
+    },
+    handleSaveChange (row) {
+      let data = {
+        roleKey: row.roleKey,
+        roleName: row.roleName
+      }
+      this.$http
+        .post('/epmetuser/govstaffrole/update-role', data)
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0 && res.msg === 'success') {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.listRolesByCustomerId(this.customerId)
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.msg
+            })
+          }
+        })
+    },
+    dragRoleSort () {
+      const el = this.$refs.roleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      this.sortTable = Sortable.create(el, {
+        group: 'dragTable',
+        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+        // setData: function(dataTransfer, dragEl) {
+        //   dataTransfer.setData("Text", dragEl.textContent);
+        // },
+        delay: 0,
+        onChange: evt => {
+          // console.log(evt)
+        },
+        onEnd: evt => {
+          const targetRow = this.roleList.splice(evt.oldIndex, 1)[0]
+          this.roleList.splice(evt.newIndex, 0, targetRow)
+        }
+      })
+    },
+    handleSaveSort () {
+      let data = {
+        roleIdList: this.roleList.map(item => {
+          return item.roleKey
+        })
+      }
+      this.$http
+        .post('/epmetuser/govstaffrole/save-sortorder', data)
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0 && res.msg === 'success') {
+            this.$message({
+              type: 'success',
+              message: '保存成功'
+            })
+            this.listRolesByCustomerId(this.customerId)
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.msg
+            })
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style>
+.role-container,
+.role-flex {
+  display: flex;
+}
+.flex1 {
+  flex: 1;
+}
+.now-name {
+  /* display: flex;
+  justify-content: space-between; */
+  margin-bottom: 10px;
+}
+.aui-wrapper .el-card + .el-card {
+  margin-top: 0;
+}
+.role-container .el-dialog__body {
+  padding: 0 20px 20px;
+}
+</style>
--- a/epmet-oper-web/src/views/modules/workPc/startupConfig.vue
+++ b/epmet-oper-web/src/views/modules/workPc/startupConfig.vue
@ -0,0 +1,123 @@
+<template>
+  <el-card shadow="never"
+           class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-form :inline="true"
+               :model="dataForm"
+               @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button type="primary"
+                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                row-key="id"
+                border
+                :height="tableHeight"
+                style="width: 100%;">
+        <el-table-column prop="name"
+                         :label="$t('menu.name')"
+                         header-align="center"
+                         min-width="150"></el-table-column>
+        <el-table-column prop="icon"
+                         :label="$t('menu.icon')"
+                         header-align="center"
+                         align="center">
+          <template slot-scope="scope">
+            <svg class="icon-svg"
+                 aria-hidden="true">
+              <use :xlink:href="`#${scope.row.icon}`"></use>
+            </svg>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type"
+                         :label="$t('menu.type')"
+                         header-align="center"
+                         align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.type === 0"
+                    size="small">{{ $t('menu.type0') }}</el-tag>
+            <el-tag v-else
+                    size="small"
+                    type="info">{{ $t('menu.type1') }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort"
+                         :label="$t('menu.sort')"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="url"
+                         :label="$t('menu.url')"
+                         header-align="center"
+                         align="center"
+                         width="150"
+                         :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="permissions"
+                         :label="$t('menu.permissions')"
+                         header-align="center"
+                         align="center"
+                         width="150"
+                         :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column :label="$t('handle')"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         width="150">
+          <template slot-scope="scope">
+            <el-button type="text"
+                       size="small"
+                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="showCustomerMenu(scope.row.id)">{{ '客户配置' }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible"
+                     ref="addOrUpdate"
+                     @refreshDataList="getDataList"></add-or-update>
+      <!-- 客户菜单配置 -->
+      <customer-add-or-update ref="customerForm"
+                              @refreshDataList="getDataList"></customer-add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './menu-add-or-update'
+import { mapGetters } from 'vuex'
+import CustomerAddOrUpdate from './customer-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/gov/access/menu/list',
+        deleteURL: '/gov/access/menu'
+      },
+      customerFormVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate, CustomerAddOrUpdate
+  },
+  computed: {
+    tableHeight () {
+      // return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
+      return this.clientHeight - 210
+    },
+    ...mapGetters(['clientHeight', 'resolution']),
+  },
+  methods: {
+    showCustomerMenu (tableId) {
+      this.$refs['customerForm'].init(tableId)
+    }
+  }
+}
+</script>