diff --git a/epmet-oper-web/src/views/modules/customer/role.vue b/epmet-oper-web/src/views/modules/customer/role.vue
new file mode 100644
index 0000000..6f79e22
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/customer/role.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="role-container">
+    <el-card class="flex1">
+      <!-- <div class="now-name">
+        当前客户: {{customerName}}
+         <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" width="50"></el-table-column>
+        <!-- <el-table-column prop="roleId" label="角色ID"></el-table-column> -->
+        <el-table-column prop="roleName" label="角色名称" 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" 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.internalMsg
+            })
+          }
+        })
+    },
+    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.internalMsg
+            })
+          }
+        })
+    }
+  }
+}
+</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>