From 0946337dfe95d67ca0c64fadebe2d91187b2cee9 Mon Sep 17 00:00:00 2001
From: yulixing <yulixing@kingsome.cn>
Date: Thu, 16 May 2019 21:03:29 +0800
Subject: [PATCH] users permissions

---
 src/views/sys/permission.vue | 395 +++++++++++++++++++++++++++--------
 src/views/sys/users.vue      | 262 +++++++++++++++--------
 vue.config.js                |   2 +-
 3 files changed, 481 insertions(+), 178 deletions(-)

diff --git a/src/views/sys/permission.vue b/src/views/sys/permission.vue
index 2263ca0..7e6f4a1 100644
--- a/src/views/sys/permission.vue
+++ b/src/views/sys/permission.vue
@@ -3,61 +3,55 @@
     <!-- toolbar -->
     <div class="toolbar clearfix">
       <div class="l fl">
-        <el-button type="primary" @click="addGame">创建角色</el-button>
+        <el-button type="primary" @click="createRole">创建角色</el-button>
         <el-button type="danger" @click="batchDel" v-if="batch.show">批量删除</el-button>
         <el-button @click="batchOpt">{{batch.txt}}</el-button>
       </div>
       <div class="r fr">
-        <el-button type="primary">刷新</el-button>
+        <el-button type="primary" @click="refreshData">刷新</el-button>
       </div>
     </div>
     <!-- table -->
-    <el-table :data="tableData" style="width: 100%" class="table mgt-20 mgb-20">
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="width: 100%"
+      class="table mgt-20 mgb-20"
+      @selection-change="tableSelectionChange"
+    >
       <el-table-column type="selection" width="55" v-if="batch.show"/>
-      <el-table-column prop="gameid" label="角色" show-overflow-tooltip sortable/>
-      <el-table-column prop="name" label="描述" show-overflow-tooltip sortable/>
-      <el-table-column prop="name" label="备注" show-overflow-tooltip sortable/>
+      <el-table-column prop="name" label="角色" show-overflow-tooltip sortable/>
+      <el-table-column prop="rolename" label="英文名" show-overflow-tooltip sortable/>
+      <el-table-column prop="describe" label="描述" show-overflow-tooltip sortable/>
+      <el-table-column prop="comment" label="备注" show-overflow-tooltip sortable/>
       <el-table-column prop="name" label="操作" fixed="right" width="126">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="viewGame(scope.row)">查看</el-button>
-          <el-button type="text" size="small" @click="editGame(scope.row)">编辑</el-button>
-          <el-button type="text" size="small" @click="delGame(scope.row)">删除</el-button>
+          <el-button type="text" size="small" @click="editRole(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="delRole(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <!-- pagination -->
-    <el-pagination
-      @size-change="sizeChange"
-      @current-change="pageChange"
-      :hide-on-single-page="true"
-      :current-page="currentPage"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="10"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="400"
-      class="al-r"
-    ></el-pagination>
     <!-- Modal -->
-    <el-dialog title="分享类型列表" :visible.sync="modalVisible">
-      <el-tabs tab-position="left">
-        <el-tab-pane label="基础信息">
-          <el-form ref="baseForm" :model="baseForm" :rules="{}" label-width="100px">
+    <el-dialog title="编辑角色" :visible.sync="modalVisible" :before-close="closeModal">
+      <el-tabs tab-position="left" v-model="curTab">
+        <el-tab-pane label="基础信息" name="1">
+          <el-form ref="modalForm" :model="modalForm" :rules="modalFormRules" label-width="100px">
             <el-form-item label="角色名" prop="name">
-              <el-input v-model="baseForm.name"/>
+              <el-input v-model="modalForm.name"/>
             </el-form-item>
-            <el-form-item label="角色英文名" prop="name">
-              <el-input v-model="baseForm.name"/>
+            <el-form-item label="角色英文名" prop="rolename">
+              <el-input v-model="modalForm.rolename" :disabled="!isNew"/>
             </el-form-item>
-            <el-form-item label="角色描述" prop="name">
-              <el-input v-model="baseForm.name"/>
+            <el-form-item label="角色描述" prop="describe">
+              <el-input v-model="modalForm.describe"/>
             </el-form-item>
-            <el-form-item label="备注" prop="name">
-              <el-input type="textarea" v-model="baseForm.name"/>
+            <el-form-item label="备注" prop="comment">
+              <el-input type="textarea" v-model="modalForm.comment"/>
             </el-form-item>
           </el-form>
         </el-tab-pane>
-        <el-tab-pane label="基础权限">
-          <el-table :data="basePermission" border style="width: 100%">
+        <el-tab-pane label="基础权限" name="2">
+          <el-table :data="basePermissionArr" border style="width: 100%">
             <el-table-column prop="label" label="页面"/>
             <el-table-column label="可读">
               <template slot-scope="scope">
@@ -76,8 +70,8 @@
             </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane label="游戏管理">
-          <el-table :data="gamePermission" border style="width: 100%">
+        <el-tab-pane label="游戏管理" name="3">
+          <el-table :data="gamePermissionArr" border style="width: 100%">
             <el-table-column prop="label" label="页面"/>
             <el-table-column label="可读">
               <template slot-scope="scope">
@@ -98,23 +92,20 @@
         </el-tab-pane>
       </el-tabs>
       <span slot="footer">
-        <el-button>取 消</el-button>
-        <el-button type="primary">确 定</el-button>
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button type="primary" @click="saveEdit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import request from '@/utils/request'
+
 export default {
-  name: 'GameList',
+  name: 'SysPermission',
   data() {
     return {
-      // filter
-      filterData: {
-        gameid: '',
-        gameType: ''
-      },
       //  toolbar
       batch: {
         show: false,
@@ -127,71 +118,299 @@ export default {
           name: 'game'
         }
       ],
-      // pagination
-      currentPage: 1,
+      multipleSelection: [],
       // modal
-      modalVisible: true,
-      baseForm: {},
-      basePermission: [
-        {
-          label: '游戏列表',
+      isNew: true,
+      curTab: '1',
+      modalVisible: false,
+      modalForm: {},
+      modalFormRules: {
+        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
+        rolename: [
+          { required: true, message: '请输入角色英文名', trigger: 'blur' }
+        ],
+        describe: [
+          { required: true, message: '请输入角色描述', trigger: 'blur' }
+        ]
+      },
+      basePermissionTable: {
+        'game-list': {
           name: 'game-list',
+          label: '游戏列表',
           permission: 'readable'
         },
-        {
-          label: '配置管理',
-          name: 'settings',
-          permission: 'writeable'
+        'user-list': {
+          name: 'user-list',
+          label: '用户列表',
+          permission: 'readable'
+        },
+        'setting-list': {
+          name: 'setting-list',
+          label: '配置列表',
+          permission: 'readable'
         }
-      ],
-      gamePermission: [
-          {
-              label: '蔚蓝战纪',
-              name: 'game',
-              gameid: 12345,
-              permission: 'readable'
-          }
-      ]
+      },
+      basePermissionArr: [],
+      gamePermissionTable: {},
+      gamePermissionArr: []
     }
   },
+
+  mounted() {
+    this.getData()
+    this.getGameList()
+  },
   methods: {
-    // filter
-    search() {
-      console.log('搜索')
-    },
-    reset(formName) {
-      this.$refs[formName].resetFields()
-      console.log('重置')
-    },
     // toolbar
-    addGame() {
-      this.$router.push('/games/details/info')
-      console.log('添加游戏')
+    createRole() {
+      this.openModal(true)
     },
     batchDel() {
-      console.log('批量删除游戏')
+      this.$confirm(
+        `是否删除所选${this.multipleSelection.length}个角色？`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          request({
+            url: '/api/sys/permission/del',
+            method: 'post',
+            data: {
+              roleList: this.multipleSelection
+            }
+          }).then(res => {
+            const { data } = res
+            if (data.errcode !== 0) {
+              this.$notify.error({
+                title: '错误',
+                message: data.errmsg
+              })
+              return
+            }
+            this.$notify.success({
+              title: '成功',
+              message: '已成功删除所选角色'
+            })
+            this.refreshData()
+          })
+        })
+        .catch(() => {
+          this.$notify.info({
+            title: '消息',
+            message: '已取消删除'
+          })
+        })
+      console.log(this.multipleSelection)
     },
     batchOpt() {
       this.batch.show = !this.batch.show
       this.batch.txt = this.batch.show ? '关闭' : '批量操作'
-      console.log('批量操作')
+    },
+    refreshData() {
+      this.getData()
     },
     // table
-    viewGame(row) {
-      console.log('查看游戏')
+    getData() {
+      request({
+        url: '/api/sys/permission/list',
+        method: 'get'
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        console.log('refresh')
+        this.tableData = data.roleList
+      })
     },
-    editGame(row) {
-      console.log('编辑游戏')
+    editRole(row) {
+      this.openModal(false, row)
     },
-    delGame(row) {
-      console.log('删除游戏')
+    delRole(row) {
+      this.$confirm(`是否删除角色：${row.name}？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          request({
+            url: '/api/sys/permission/del',
+            method: 'post',
+            data: {
+              rolename: row.rolename
+            }
+          }).then(res => {
+            const { data } = res
+            if (data.errcode !== 0) {
+              this.$notify.error({
+                title: '错误',
+                message: data.errmsg
+              })
+              return
+            }
+            this.$notify.success({
+              title: '成功',
+              message: '已成功删除该角色'
+            })
+            this.refreshData()
+          })
+        })
+        .catch(() => {
+          this.$notify.info({
+            title: '消息',
+            message: '已取消删除'
+          })
+        })
     },
-    // pagination
-    sizeChange(val) {
-      console.log(`每页 ${val} 条`)
+    tableSelectionChange(val) {
+      this.multipleSelection = val
     },
-    pageChange(val) {
-      console.log(`当前页: ${val}`)
+    // modal
+    openModal(isNew, data) {
+      if (isNew) {
+        this.isNew = true
+        this.initModalFormData()
+      } else {
+        this.isNew = false
+        this.modalForm = JSON.parse(JSON.stringify(data))
+      }
+
+      this.basePermissionArr = this.perObjToArr(
+        this.basePermissionTable,
+        this.modalForm.basePermissionTable
+      )
+      this.gamePermissionArr = this.perObjToArr(
+        this.gamePermissionTable,
+        this.modalForm.gamePermissionTable
+      )
+      this.curTab = '1'
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.$refs['modalForm'].clearValidate()
+      this.modalVisible = false
+    },
+    getGameList() {
+      request({
+        url: '/api/games/list',
+        method: 'get'
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        const obj = {}
+        data.gameList.map(game => {
+          obj[game.game_id] = {
+            label: game.game_name,
+            game_id: game.game_id,
+            name: game.game_id,
+            permission: 'readable'
+          }
+        })
+        console.log(obj)
+        this.gamePermissionTable = obj
+      })
+    },
+    initModalFormData() {
+      this.modalForm = {
+        name: '',
+        rolename: '',
+        describe: '',
+        comment: '',
+        permissions: [],
+        basePermissionTable: '',
+        gamePermissionTable: ''
+      }
+    },
+    saveEdit() {
+      //组合权限
+      this.modalForm.permissions = []
+      this.basePermissionArr.map(item => {
+        this.modalForm.permissions.push(`${item.name}-${item.permission}`)
+      })
+      this.gamePermissionArr.map(item => {
+        this.modalForm.permissions.push(`${item.name}-${item.permission}`)
+      })
+      // 基础权限
+      this.modalForm.basePermissionTable = JSON.stringify(
+        this.perArrToObj(this.basePermissionArr)
+      )
+      // 游戏权限
+      this.modalForm.gamePermissionTable = JSON.stringify(
+        this.perArrToObj(this.gamePermissionArr)
+      )
+      // 表单验证
+      this.$refs['modalForm'].validate(valid => {
+        if (valid) {
+          //提交
+          const method = this.isNew ? 'add' : 'edit'
+          request({
+            url: `/api/sys/permission/${method}`,
+            method: 'post',
+            data: this.modalForm
+          }).then(res => {
+            const { data } = res
+            if (data.errcode !== 0) {
+              this.$notify.error({
+                title: '错误',
+                message: data.errmsg
+              })
+              return
+            }
+            this.$notify.success({
+              title: '成功',
+              message: this.isNew ? '已成功添加角色。' : '已成功修改角色信息。'
+            })
+            this.refreshData()
+          })
+          this.closeModal()
+          //并刷新
+        } else {
+          this.$notify.error({
+            title: '错误',
+            message: '基础信息填写有误，请修改'
+          })
+          return false
+        }
+      })
+    },
+    perObjToArr(a, b) {
+      b = b ? JSON.parse(b) : {}
+      const newTable = JSON.parse(JSON.stringify(a))
+      for (const key in b) {
+        if (b.hasOwnProperty(key)) {
+          if (newTable[key]) {
+            newTable[key] = b[key]
+          }
+        }
+      }
+      const permissionTable = []
+      for (const key in newTable) {
+        if (newTable.hasOwnProperty(key)) {
+          permissionTable.push(newTable[key])
+        }
+      }
+      return permissionTable
+    },
+    perArrToObj(arr) {
+      const obj = {}
+      arr.map(item => {
+        obj[item.name] = item
+      })
+      return obj
     }
   }
 }
diff --git a/src/views/sys/users.vue b/src/views/sys/users.vue
index 5e06cc9..73da635 100644
--- a/src/views/sys/users.vue
+++ b/src/views/sys/users.vue
@@ -1,30 +1,26 @@
 <template>
   <div class="app-container">
     <!-- filter -->
-    <el-form :inline="true" :model="filterData" class="filter" ref="filterForm">
-      <el-form-item label="姓名">
-        <el-input v-model="filterData.gameid" placeholder="游戏 ID"></el-input>
+    <el-form :inline="true" :model="filterForm" class="filter" ref="filterForm">
+      <el-form-item label="姓名" prop="fullname">
+        <el-input v-model="filterForm.fullname" placeholder="姓名"/>
       </el-form-item>
-      <el-form-item label="角色">
-        <el-select v-model="filterData.gameType" placeholder="角色">
-          <el-option label="区域一" value="shanghai"/>
-          <el-option label="区域二" value="beijing"/>
-        </el-select>
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="filterForm.username" placeholder="用户名"/>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="search">查询</el-button>
-        <el-button @click="reset('filterForm')">重置</el-button>
+        <el-button type="primary" @click="filterData">查询</el-button>
+        <el-button @click="resetForm('filterForm')">重置</el-button>
       </el-form-item>
     </el-form>
     <!-- toolbar -->
     <div class="toolbar clearfix">
       <div class="r fr">
-        <el-button type="primary">刷新</el-button>
+        <el-button type="primary" @click="refreshData">刷新</el-button>
       </div>
     </div>
     <!-- table -->
     <el-table :data="tableData" style="width: 100%" class="table mgt-20 mgb-20">
-      <el-table-column type="selection" width="55" v-if="batch.show"/>
       <el-table-column prop="fullname" label="姓名" show-overflow-tooltip sortable/>
       <el-table-column prop="username" label="用户名" show-overflow-tooltip sortable/>
       <el-table-column
@@ -32,8 +28,11 @@
         label="角色"
         show-overflow-tooltip
         sortable
-        :formatter="formRoles"
-      />
+      >
+        <template slot-scope="scope">
+          <el-tag v-for="(item, index) in scope.row.roles" :key="index" size="small" style="margin-right: 10px;">{{item}}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="createdAt"
         label="创建时间"
@@ -41,11 +40,22 @@
         sortable
         :formatter="formDate"
       />
-      <el-table-column prop="updatedAt" label="更新时间" show-overflow-tooltip sortable :formatter="formDate"/>
-      <el-table-column prop="lastLogin" label="最后登录时间" show-overflow-tooltip sortable :formatter="formDate"/>
-      <el-table-column label="操作" fixed="right">
+      <el-table-column
+        prop="updatedAt"
+        label="更新时间"
+        show-overflow-tooltip
+        sortable
+        :formatter="formDate"
+      />
+      <el-table-column
+        prop="comment"
+        label="备注"
+        show-overflow-tooltip
+        sortable
+      />
+      <el-table-column label="操作" fixed="right" width="55">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="editGame(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -56,39 +66,43 @@
       :hide-on-single-page="true"
       :current-page="currentPage"
       :page-sizes="[10, 20, 50, 100]"
-      :page-size="10"
+      :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
-      :total="400"
+      :total="userList.length"
       class="al-r"
     ></el-pagination>
     <!-- modal -->
     <el-dialog title="编辑用户" :visible.sync="modalVisible">
       <el-form ref="modalForm" :model="modalForm" :rules="modalRules" label-width="80px">
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="modalForm.name" disabled/>
+        <el-form-item label="姓名" prop="fullname">
+          <el-input v-model="modalForm.fullname" disabled/>
         </el-form-item>
-        <el-form-item label="用户名" prop="name">
-          <el-input v-model="modalForm.name" disabled/>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="modalForm.username" disabled/>
         </el-form-item>
-        <el-form-item label="密码" prop="name">
-          <el-input v-model="modalForm.name" disabled/>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="name">
-          <el-input v-model="modalForm.name" disabled/>
-        </el-form-item>
-        <el-form-item label="角色" prop="name">
-          <el-select v-model="modalForm.name" placeholder="请选择活动区域" style="width: 100%">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+        <el-form-item label="角色" prop="roles">
+          <el-select v-model="modalForm.roles" multiple placeholder="请选择用户角色" class="w100">
+            <el-option
+              v-for="item in roleList"
+              :key="item.rolename"
+              :label="item.name"
+              :value="item.name"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="备注" prop="name">
-          <el-input type="textarea" v-model="modalForm.name"/>
+        <el-form-item label="最后修改" prop="lastModifiedBy">
+          <el-input v-model="modalForm.lastModifiedBy" disabled/>
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updatedAt">
+          <el-input v-model="modalForm.updatedAt" disabled/>
+        </el-form-item>
+        <el-form-item label="备注" prop="comment">
+          <el-input type="textarea" v-model="modalForm.comment"/>
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button @click="innerModalVisible = false">取 消</el-button>
-        <el-button type="primary" @click="innerModalVisible = false">确 定</el-button>
+        <el-button @click="closeModal">取 消</el-button>
+        <el-button type="primary" @click="saveEdit">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -99,90 +113,160 @@ import request from '@/utils/request'
 import moment from 'moment'
 
 export default {
-  name: 'GameList',
+  name: 'SysUsers',
   data() {
     return {
       // filter
-      filterData: {
-        gameid: '',
-        gameType: ''
-      },
-      //  toolbar
-      batch: {
-        show: false,
-        txt: '批量操作'
+      filterForm: {
+        fullname: '',
+        username: ''
       },
       //   table
       tableData: [],
+      userList: [],
       // pagination
       currentPage: 1,
+      pageSize: 10,
       // modal
       modalVisible: false,
       modalForm: {},
-      modalRules: {}
+      modalRules: {},
+      roleList: []
     }
   },
   mounted() {
-    request({
-      url: '/api/sys/users/list',
-      method: 'get'
-    }).then(res => {
-      const { data } = res
-      console.log('users LIst', data)
-      this.tableData = data.userList
-    })
+    this.getData()
+    this.getRoleList()
   },
   methods: {
     // filter
-    search() {
-      console.log('搜索')
+    filterData() {
+      if (this.filterForm.fullname && this.filterForm.username) {
+        this.tableData = this.userList.filter(user => {
+          return (
+            user.fullname === this.filterForm.fullname &&
+            user.username === this.filterForm.username
+          )
+        })
+      } else if (this.filterForm.fullname) {
+        this.tableData = this.userList.filter(user => {
+          return user.fullname === this.filterForm.fullname
+        })
+      } else if (this.filterForm.username) {
+        this.tableData = this.userList.filter(user => {
+          return user.username === this.filterForm.username
+        })
+      }
     },
-    reset(formName) {
+    resetForm(formName) {
       this.$refs[formName].resetFields()
-      console.log('重置')
     },
     // toolbar
-    addGame() {
-      this.$router.push('/games/details/info')
-      console.log('添加游戏')
-    },
-    batchDel() {
-      console.log('批量删除游戏')
-    },
-    batchOpt() {
-      this.batch.show = !this.batch.show
-      this.batch.txt = this.batch.show ? '关闭' : '批量操作'
-      console.log('批量操作')
+    refreshData() {
+      this.getData(this.filterData)
     },
     // table
-    formRoles(row, column, cellValue, index) {
-      return cellValue.length === 0 ? '暂无' : cellValue.join('，')
+    getData(cb) {
+      request({
+        url: '/api/sys/users/list',
+        method: 'get'
+      }).then(res => {
+        console.log(res)
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        this.userList = data.userList
+        this.sliceData()
+        if (cb && cb instanceof Function) cb()
+      })
+    },
+    sliceData() {
+      this.tableData = this.userList.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+      )
     },
     formDate(row, column, cellValue, index) {
-
       return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:MM:SS') : '-'
     },
-
-    viewGame(row) {
-      console.log('查看游戏')
-    },
-    editGame(row) {
-      console.log('编辑游戏')
-    },
-    delGame(row) {
-      console.log('删除游戏')
+    editUser(row) {
+      this.openModal()
+      this.modalForm = JSON.parse(JSON.stringify(row))
+      this.modalForm.updatedAt = moment(this.modalForm.updatedAt).format(
+        'YYYY-MM-DD HH:MM:SS'
+      )
     },
     // pagination
     sizeChange(val) {
-      console.log(`每页 ${val} 条`)
+      this.pageSize = val
+      this.sliceData()
     },
     pageChange(val) {
-      console.log(`当前页: ${val}`)
+      this.currentPage = val
+      this.sliceData()
+    },
+    // modal
+    getRoleList() {
+      request({
+        url: '/api/sys/permission/list',
+        method: 'get'
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        }
+        this.roleList = data.roleList
+      })
+    },
+    openModal() {
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.modalVisible = false
+    },
+    saveEdit() {
+      const permissions = [];
+
+      for (let i = 0; i < this.roleList.length; i++) {
+        const role = this.roleList[i]
+        if (this.modalForm.roles.includes(role.name)) permissions.push(role._id)
+      }
+      request({
+        url: '/api/sys/users/edit',
+        method: 'post',
+        data: {
+          username: this.modalForm.username,
+          roles: this.modalForm.roles,
+          permissions: permissions,
+          comment: this.modalForm.comment
+        }
+      }).then(res => {
+        const { data } = res
+        if (data.errcode !== 0) {
+          this.$notify.error({
+            title: '错误',
+            message: data.errmsg
+          })
+          return
+        } else {
+          this.$notify.success({
+            title: '成功',
+            message: '已成功修改用户信息'
+          })
+          this.closeModal()
+          this.refreshData()
+        }
+      })
     }
   }
 }
 </script>
-
-<style lang="sass" scoped>
-
-</style>
diff --git a/vue.config.js b/vue.config.js
index 961ac58..6611fc8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -33,7 +33,7 @@ module.exports = {
     proxy: {
       // proxy all requests starting with /api to jsonplaceholder
       '^/api': {
-        target: 'http://localhost:3000', // 代理接口
+        target: 'http://localhost:2333', // 代理接口
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/' // 代理的路径