update

src/api/oauth.js

@@ -1,31 +1,30 @@
 import request from '@/utils/request'
 
 export function getCaptcha() {
-    return request({
-        url: '/oauth/getCaptcha',
-        method: 'post'
-    })
+  return request({
+    url: '/oauth/getCaptcha',
+    method: 'post'
+  })
 }
 
 export function login(data) {
-    return request({
-        url: '/oauth/login',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/oauth/login',
+    method: 'post',
+    data
+  })
 }
 
-
 export function getOauthInfo() {
-    return request({
-        url: '/oauth/getOauthInfo',
-        method: 'post'
-    })
+  return request({
+    url: '/oauth/getOauthInfo',
+    method: 'post'
+  })
 }
 
 export function loginOut() {
-    return request({
-        url: '/oauth/loginOut',
-        method: 'post'
-    })
-}
+  return request({
+    url: '/oauth/loginOut',
+    method: 'post'
+  })
+}

src/api/role.js

@@ -15,3 +15,27 @@ export function deleteByIds(ids) {
     data: ids
   })
 }
+
+export function save(data) {
+  return request({
+    url: '/user/role/save',
+    method: 'post',
+    data
+  })
+}
+
+export function updateById(roleId, data) {
+  return request({
+    url: '/user/role/updateById',
+    method: 'post',
+    params: { id: roleId },
+    data
+  })
+}
+
+export function findAllAuthorities() {
+  return request({
+    url: '/user/authority/findAllAuthorities',
+    method: 'post'
+  })
+}

src/styles/index.scss

@@ -68,3 +68,7 @@ div:focus {
   margin-top: 15px;
   text-align: right;
 }
+.action-bar-container{
+  margin-bottom: 15px;
+  text-align: right;
+}

src/views/user/role/DialogForm.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    v-if="visible"
+    title="收货地址"
+    :visible.sync="visible"
+  >
+    <el-form :model="form" label-width="150px" v-loading="isLoading">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="角色名称">
+            <el-input v-model="form.name" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="备注说明">
+        <el-input type="textarea" v-model="form.remark" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item v-for="authority in listAllAuthorities" :key="authority.id" :label="authority.remark">
+        <el-checkbox-group v-model="form.listAuthorities">
+          <el-checkbox
+            v-for="children in authority.children"
+            :key="children.id"
+            :label="children.id"
+          >
+            {{ children.remark + '[' + children.name + ']' }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import { findAllAuthorities, save, updateById } from '@/api/role'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      isLoading: false,
+      listAllAuthorities: [],
+      form: {}
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      if (!data.listAuthorities) {
+        data.listAuthorities = []
+      }
+      this.form = Object.assign({}, data)
+
+      this.isLoading = true
+      findAllAuthorities().then(listAllAuthorities => {
+        this.listAllAuthorities = listAllAuthorities
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    handleSubmit() {
+      console.log(this.form)
+      this.isLoading = true
+      if (this.form.id) {
+        updateById(this.form.id, this.form).then(() => {
+          this.visible = false
+          this.$emit('ok')
+        }).finally(() => {
+          this.isLoading = false
+        })
+      } else {
+        save(this.form).then(res => {
+          this.visible = false
+          this.$emit('ok')
+        }).finally(() => {
+          this.isLoading = false
+        })
+      }
+    }
+  }
+}
+</script>

src/views/user/role/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="app-container">
+    <el-row class="action-bar-container" type="flex" justify="end">
+      <el-button type="primary" @click.native="editRow({})">新建</el-button>
+    </el-row>
     <el-table
       v-loading="isLoading"
       :data="pageData.data"
@@ -38,7 +41,7 @@
               操作<i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>编辑</el-dropdown-item>
+              <el-dropdown-item @click.native="editRow(scope.row)">编辑</el-dropdown-item>
               <el-dropdown-item @click.native="deleteByIds([scope.row.id])">删除</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -55,13 +58,16 @@
       @current-change="handleCurrentChange"
     >
     </el-pagination>
+    <dialog-form ref="dialogForm" @ok="fetchData"/>
   </div>
 </template>
 
 <script>
 import { findPage, deleteByIds } from '@/api/role'
+import DialogForm from './DialogForm'
 
 export default {
+  components: { DialogForm },
   data() {
     return {
       isLoading: true,
@@ -73,6 +79,9 @@ export default {
     this.fetchData()
   },
   methods: {
+    editRow(rowData) {
+      this.$refs.dialogForm.open(rowData)
+    },
     deleteByIds(ids) {
       console.log(`当前页: ${ids}`)
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {