From c6aceeb53e33834479c834532df56ce194ef6f16 Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Mon, 24 Aug 2020 10:17:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9D=83=E9=99=90=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customer/customize/CustomerList.vue       | 163 +++++++-----
 .../modules/customer/customize/roleList.vue   | 241 ++++++++++++++++++
 2 files changed, 334 insertions(+), 70 deletions(-)
 create mode 100644 epmet-oper-web/src/views/modules/customer/customize/roleList.vue

diff --git a/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue b/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
index 1e66f46..49cd837 100644
--- a/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
+++ b/epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue
@@ -1,93 +1,103 @@
 <template>
-  <el-card shadow="never"
-           class="aui-card--fill">
-    <div v-show="showType==='list'"
-         class="mod-/oper/customize__homecomponent}">
+  <el-card shadow="never" class="aui-card--fill">
+    <div v-show="showType==='list'" class="mod-/oper/customize__homecomponent}">
       <el-form :inline="true">
         <el-form-item>
-          <el-input v-model="ruleForm.name"
-                    placeholder="请输入客户名称"
-                    :clearable="true"></el-input>
+          <el-input v-model="ruleForm.name" placeholder="请输入客户名称" :clearable="true"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary"
-                     @click="submitForm(ruleForm)">查询</el-button>
+          <el-button type="primary" @click="submitForm(ruleForm)">查询</el-button>
         </el-form-item>
       </el-form>
 
-      <el-table :data="customerList"
-                border
-                style="width: 100%;">
-        <el-table-column label="客户名称"
-                         header-align="center"
-                         align="center"
-                         prop="customerName"></el-table-column>
-        <el-table-column label="logo"
-                         header-align="center"
-                         align="center"
-                         prop="logo">
+      <el-table :data="customerList" border style="width: 100%;">
+        <el-table-column label="客户名称" header-align="center" align="center" prop="customerName"></el-table-column>
+        <el-table-column label="logo" header-align="center" align="center" prop="logo">
           <template slot-scope="scope">
-            <el-image style="width: 50px; height: 50px"
-                      :src="scope.row.logo"
-                      @click="addSrcList(scope.row.logo)"
-                      :preview-src-list="srcList"></el-image>
+            <el-image
+              style="width: 50px; height: 50px"
+              :src="scope.row.logo"
+              @click="addSrcList(scope.row.logo)"
+              :preview-src-list="srcList"
+            ></el-image>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('handle')"
-                         fixed="right"
-                         header-align="center"
-                         align="center"
-                         width="350">
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="350"
+        >
           <template slot-scope="scope">
-            <el-button type="text"
-                       size="small"
-                       @click="showMiniHome(scope.row.customerId,scope.row.customerName,0)">居民端首页</el-button>
-            <el-button type="text"
-                       size="small"
-                       @click="showMiniHome(scope.row.customerId,scope.row.customerName,1)">工作端首页</el-button>
-            <el-button type="text"
-                       size="small"
-                       @click="showConfigItem(scope.row.customerId,scope.row.customerName)">功能配置</el-button>
-            <el-button type="text"
-                       size="small"
-                       @click="showLimitConfig(scope.row.customerId,scope.row.customerName)">角色权限</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showMiniHome(scope.row.customerId,scope.row.customerName,0)"
+            >居民端首页</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showMiniHome(scope.row.customerId,scope.row.customerName,1)"
+            >工作端首页</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showConfigItem(scope.row.customerId,scope.row.customerName)"
+            >功能配置</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="showLimitConfig(scope.row.customerId,scope.row.customerName)"
+            >角色权限</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination :current-page="pageNo"
-                     :page-sizes="[10, 20, 50, 100]"
-                     :page-size="pageSize"
-                     layout="total, sizes, prev, pager, next, jumper"
-                     :total="total"
-                     @size-change="pageSizeChangeHandle"
-                     @current-change="pageCurrentChangeHandle">
-      </el-pagination>
+      <el-pagination
+        :current-page="pageNo"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      ></el-pagination>
     </div>
     <div v-show="showType==='miniHome'">
-
-      <mini-home ref="ref_mini_home"
-                 @cancleBack='cancleBack'></mini-home>
+      <mini-home ref="ref_mini_home" @cancleBack="cancleBack"></mini-home>
     </div>
     <div v-show="showType==='config'">
-
-      <config-item ref="ref_config_item"
-                   @cancleBack='cancleBack'></config-item>
+      <config-item ref="ref_config_item" @cancleBack="cancleBack"></config-item>
     </div>
+
+    <el-dialog
+      :visible.sync="funcVisible"
+      title="功能列表"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="90%"
+      top="30px"
+    >
+      <role-list v-if="funcVisible" :customer-id="customerId" :customer-name="customerName" />
+    </el-dialog>
   </el-card>
 </template>
 
 <script>
 import ConfigItem from './ConfigItem'
 import MiniHome from './MiniHome'
+import RoleList from './roleList'
 export default {
   data () {
     return {
+      funcVisible: false,
       diaName: '功能配置',
       noImg: '暂无图片',
       customerList: [],
       input: '',
 
       customerId: '',
+      customerName: '',
       pageNo: 1,
       pageSize: 10,
       ruleForm: { name: '' },
@@ -95,11 +105,13 @@ export default {
       total: 0,
       srcList: [],
 
-      showType: 'list'// 显示的组件类型
+      showType: 'list' // 显示的组件类型
     }
   },
   components: {
-    ConfigItem, MiniHome
+    ConfigItem,
+    MiniHome,
+    RoleList
   },
   created () {
     this.queryCustomerList()
@@ -111,12 +123,14 @@ export default {
         pageNo: this.pageNo,
         pageSize: this.pageSize
       }
-      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
-        if (res.code === 0) {
-          this.customerList = res.data.list
-          this.total = res.data.total
-        }
-      })
+      this.$http
+        .post('/oper/crm/customer/pagequery', params)
+        .then(({ data: res }) => {
+          if (res.code === 0) {
+            this.customerList = res.data.list
+            this.total = res.data.total
+          }
+        })
     },
     submitForm (formName) {
       let params = {
@@ -124,15 +138,21 @@ export default {
         pageNo: this.pageNo,
         pageSize: this.pageSize
       }
-      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
-        if (res.code === 0) {
-          this.customerList = res.data.list
-        }
-      })
+      this.$http
+        .post('/oper/crm/customer/pagequery', params)
+        .then(({ data: res }) => {
+          if (res.code === 0) {
+            this.customerList = res.data.list
+          }
+        })
     },
     showMiniHome (customerId, customerName, type) {
       this.showType = 'miniHome'
-      this.$refs['ref_mini_home'].startSetWxIndex(customerId, customerName, type)
+      this.$refs['ref_mini_home'].startSetWxIndex(
+        customerId,
+        customerName,
+        type
+      )
     },
 
     // 功能配置
@@ -143,7 +163,10 @@ export default {
 
     // 显示权限配置
     showLimitConfig (customerId, customerName) {
-      this.$message.warning('当前功能还未开发')
+      this.customerId = customerId
+      this.customerName = customerName
+      this.funcVisible = !this.funcVisible
+      // this.$message.warning("当前功能还未开发");
     },
 
     pageCurrentChangeHandle (val) {
diff --git a/epmet-oper-web/src/views/modules/customer/customize/roleList.vue b/epmet-oper-web/src/views/modules/customer/customize/roleList.vue
new file mode 100644
index 0000000..59fa256
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer/customize/roleList.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="role-container">
+    <el-card class="flex1">
+      <div class="now-name">当前客户: {{customerName}}</div>
+      <el-table v-loading="loading1" :data="roleList" border style="width: 100%">
+        <el-table-column type="index" width="50"></el-table-column>
+        <!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
+        <el-table-column prop="roleName" label="角色名称"></el-table-column>
+        <el-table-column prop="roleKey" label="角色Key"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="toOperationConfig(scope.row.roleId, scope.row.roleName)">功能权限</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card v-show="funcShow" class="flex1" style="margin: 0 10px;">
+      <div class="now-name">当前角色: {{roleName}}</div>
+      <el-table
+        v-loading="loading2"
+        max-height="580"
+        ref="opeTable"
+        :data="opeList"
+        border
+        style="width: 100%"
+        @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" class="flex1">
+      <div class="now-name">当前功能: {{funcName}}</div>
+      <div>
+        <el-row :gutter="12">
+        <el-col :span="12" 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"
+                :checked="scope.assigned"
+              >{{scope.scopeName}}</el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-col>
+        <!-- <el-col :span="8">
+          <el-card shadow="hover">
+            <el-checkbox-group class="t" v-model="checkedSettings">
+              <el-checkbox
+                v-for="setting in settingOptions"
+                :label="setting.settingKey"
+                :key="setting.settingKey"
+                :checked="setting.assigned"
+              >{{setting.settingName}}</el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-col> -->
+      </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+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: [],
+      roleId: ''
+    }
+  },
+  created () {
+    this.listRolesByCustomerId(this.customerId)
+  },
+  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] = []
+      console.log(n, _data[n])
+    }
+  },
+  methods: {
+    listRolesByCustomerId (customerId) {
+      this.loading1 = true
+      this.$http
+        .post('/epmetuser/govstaffrole/rolesbycustomer/' + customerId)
+        .then(({ data: res }) => {
+          console.log('ressss', res)
+          if (res.code === 0) {
+            this.roleList = res.data
+          }
+          setTimeout(() => {
+            this.loading1 = false
+          }, 500)
+        })
+    },
+    listOperations4AccessConfig (roleId) {
+      this.roleId = roleId
+      this.loading2 = true
+      this.$http.post('/gov/access/config/roleopes/' + roleId).then((resp) => {
+        this.opeList = resp.data.data
+        this.$nextTick(function () {
+          this.defaultCheck() // 每次更新了数据，触发这个函数即可。
+        })
+        setTimeout(() => {
+          this.loading2 = false
+        }, 500)
+      })
+    },
+    listSettingOptions (operationKey) {
+      let params = {
+        roleId: this.roleId,
+        operationKey: operationKey
+      }
+      this.loading3 = true
+      this.$http
+        .post('/gov/access/config/configoptions', params)
+        .then(resp => {
+          console.log('scopeOptions', resp.data)
+          this.scopeOptions = resp.data.data.scopeOptions
+          this.settingOptions = resp.data.data.settingOptions
+          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 (roleId, roleName) {
+      this.roleName = roleName
+      this.funcShow = true
+      this.opeList = []
+      this.listOperations4AccessConfig(roleId)
+    },
+    toScopeConfig (operationKey, operationName) {
+      this.roleShow = true
+      this.operationKey = operationKey
+      this.funcName = operationName
+      this.checkedScopes = []
+      this.listSettingOptions(operationKey)
+    },
+    saveOperations4Role (val) {
+      let param = {
+        roleId: this.roleId,
+        opes: val
+      }
+      this.$http.post('/gov/access/config/saveroleopes', param).then(
+        resp => {
+          this.$message({
+            message: '操作成功',
+            type: 'success'
+          })
+          this.listOperations4AccessConfig(this.roleId)
+        }
+      )
+    },
+    saveSettings (val) {
+      let param = {
+        roleId: this.roleId,
+        operationKey: this.operationKey,
+        scopeKeys: val,
+        settingKeys: this.checkedSettings
+      }
+
+      this.$http.post('/gov/access/config/saveconfig', param).then(
+        resp => {
+          this.$message({
+            type: 'success',
+            message: '保存成功'
+          })
+          this.listSettingOptions(this.operationKey)
+        }
+      )
+    },
+    roleChange (val) {
+      console.log('valooo', val)
+      this.saveSettings(val)
+    },
+    handleSelectionChange (val) {
+      this.saveOperations4Role(val)
+    }
+  }
+}
+</script>
+
+<style>
+.role-container {
+  display: flex;
+}
+.flex1 {
+  flex: 1;
+}
+.now-name {
+  margin-bottom: 10px;
+}
+.aui-wrapper .el-card + .el-card {
+  margin-top: 0;
+}
+</style>