角色添加

src/api/menu.js

@@ -37,6 +37,7 @@ export function deleteMenu(id) {
     method: 'post'
   })
 }
+
 export function updateSelective(id, data) {
   return request({
     url: '/sys/menu/update/selective/' + id,
@@ -44,3 +45,10 @@ export function updateSelective(id, data) {
     data: data
   })
 }
+
+export function sysMenuTree() {
+  return request({
+    url: '/sys/menu/tree',
+    method: 'get'
+  })
+}

src/api/role.js

@@ -1,38 +1,40 @@
 import request from '@/utils/request'
 
-export function getRoutes() {
+export function fetchList(query) {
   return request({
-    url: '/vue-element-admin/routes',
-    method: 'get'
+    url: '/sys/role/list',
+    method: 'get',
+    params: query
   })
 }
 
-export function getRoles() {
+export function getMenu(id) {
   return request({
-    url: '/vue-element-admin/roles',
+    url: '/sys/role/' + id,
     method: 'get'
   })
 }
 
-export function addRole(data) {
+export function updateMenu(id, data) {
   return request({
-    url: '/vue-element-admin/role',
+    url: '/sys/role/update/' + id,
     method: 'post',
-    data
+    data: data
   })
 }
 
-export function updateRole(id, data) {
+export function createMenu(data) {
   return request({
-    url: `/vue-element-admin/role/${id}`,
-    method: 'put',
-    data
+    url: '/sys/role/create',
+    method: 'post',
+    data: data
   })
 }
 
-export function deleteRole(id) {
+export function deleteMenu(id) {
   return request({
-    url: `/vue-element-admin/role/${id}`,
-    method: 'delete'
+    url: '/sys/role/delete/' + id,
+    method: 'post'
   })
 }
+

src/router/modules/sys.js

@@ -28,7 +28,7 @@ const sysRouter = {
           path: 'form',
           hidden: true,
           component: () => import('@/views/sys/menus/form.vue'),
-          name: 'SysMenus',
+          name: 'SysAddMenus',
           meta: { title: '菜单编辑' }
         }
       ]
@@ -51,14 +51,14 @@ const sysRouter = {
           path: 'add',
           hidden: true,
           component: () => import('@/views/sys/roles/add.vue'),
-          name: 'SysRoles',
+          name: 'SysAddRoles',
           meta: { title: '添加角色' }
         },
         {
           path: 'update',
           hidden: true,
           component: () => import('@/views/sys/roles/update.vue'),
-          name: 'SysRoles',
+          name: 'SysUpdateRoles',
           meta: { title: '编辑角色' }
         }
       ]

src/utils/request.js

@@ -67,6 +67,16 @@ service.interceptors.response.use(
         })
       }
       return Promise.reject(new Error(res.message || 'Error'))
+    } if (res.code === -99) {
+      MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('resetToken').then(() => {
+          location.reload()// 为了重新实例化vue-router对象 避免bug
+        })
+      })
     } else {
       return res
     }

src/views/login/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="login-container">
+  <div class="login-container" :style="'background-image:' + bgImage">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
-      label-position="left">
+             label-position="left"
+    >
 
       <div class="title-container">
         <h3 class="title">采美后台登录</h3>
@@ -12,7 +13,8 @@
           <svg-icon icon-class="user" />
         </span>
         <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text"
-          tabindex="1" autocomplete="on" />
+                  tabindex="1" autocomplete="on"
+        />
       </el-form-item>
 
       <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
@@ -21,8 +23,9 @@
             <svg-icon icon-class="password" />
           </span>
           <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-            placeholder="Password" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock"
-            @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
+                    placeholder="Password" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock"
+                    @blur="capsTooltip = false" @keyup.enter.native="handleLogin"
+          />
           <span class="show-pwd" @click="showPwd">
             <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
           </span>
@@ -30,18 +33,8 @@
       </el-tooltip>
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-        @click.native.prevent="handleLogin">登录</el-button>
-
-      <div style="position:relative">
-        <div class="tips">
-          <span>Username : admin</span>
-          <span>Password : any</span>
-        </div>
-        <div class="tips">
-          <span style="margin-right:18px;">Username : editor</span>
-          <span>Password : any</span>
-        </div>
-      </div>
+                 @click.native.prevent="handleLogin"
+      >登录</el-button>
     </el-form>
 
     <el-dialog title="Or connect with" :visible.sync="showDialog">
@@ -54,143 +47,144 @@
 </template>
 
 <script>
-  import {
-    validUsername
-  } from '@/utils/validate'
+import {
+  validUsername
+} from '@/utils/validate'
 
-  export default {
-    name: 'Login',
-    data() {
-      const validateUsername = (rule, value, callback) => {
-        if (!validUsername(value)) {
-          callback(new Error('Please enter the correct user name'))
-        } else {
-          callback()
-        }
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('Please enter the correct user name'))
+      } else {
+        callback()
       }
-      const validatePassword = (rule, value, callback) => {
-        if (value.length < 6) {
-          callback(new Error('The password can not be less than 6 digits'))
-        } else {
-          callback()
-        }
-      }
-      return {
-        loginForm: {
-          username: 'charles',
-          password: '123456'
-        },
-        loginRules: {
-          username: [{
-            required: true,
-            trigger: 'blur',
-            validator: validateUsername
-          }],
-          password: [{
-            required: true,
-            trigger: 'blur',
-            validator: validatePassword
-          }]
-        },
-        passwordType: 'password',
-        capsTooltip: false,
-        loading: false,
-        showDialog: false,
-        redirect: undefined,
-        otherQuery: {}
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('The password can not be less than 6 digits'))
+      } else {
+        callback()
       }
+    }
+    return {
+      loginForm: {
+        username: 'charles',
+        password: '123456'
+      },
+      loginRules: {
+        username: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateUsername
+        }],
+        password: [{
+          required: true,
+          trigger: 'blur',
+          validator: validatePassword
+        }]
+      },
+      passwordType: 'password',
+      capsTooltip: false,
+      loading: false,
+      showDialog: false,
+      redirect: undefined,
+      otherQuery: {},
+      bgImage: 'url(' + require('@/assets/images/bg.jpg') + ')'
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        const query = route.query
+        if (query) {
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // window.addEventListener('storage', this.afterQRScan)
+  },
+  mounted() {
+    if (this.loginForm.username === '') {
+      this.$refs.username.focus()
+    } else if (this.loginForm.password === '') {
+      this.$refs.password.focus()
+    }
+  },
+  destroyed() {
+    // window.removeEventListener('storage', this.afterQRScan)
+  },
+  methods: {
+    checkCapslock(e) {
+      const {
+        key
+      } = e
+      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
     },
-    watch: {
-      $route: {
-        handler: function(route) {
-          const query = route.query
-          if (query) {
-            this.redirect = query.redirect
-            this.otherQuery = this.getOtherQuery(query)
-          }
-        },
-        immediate: true
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
       }
-    },
-    created() {
-      // window.addEventListener('storage', this.afterQRScan)
-    },
-    mounted() {
-      if (this.loginForm.username === '') {
-        this.$refs.username.focus()
-      } else if (this.loginForm.password === '') {
+      this.$nextTick(() => {
         this.$refs.password.focus()
-      }
+      })
     },
-    destroyed() {
-      // window.removeEventListener('storage', this.afterQRScan)
-    },
-    methods: {
-      checkCapslock(e) {
-        const {
-          key
-        } = e
-        this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-      },
-      showPwd() {
-        if (this.passwordType === 'password') {
-          this.passwordType = ''
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$store.dispatch('user/login', this.loginForm)
+            .then(() => {
+              this.$router.push({
+                path: this.redirect || '/',
+                query: this.otherQuery
+              })
+              this.loading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
         } else {
-          this.passwordType = 'password'
+          console.log('error submit!!')
+          return false
         }
-        this.$nextTick(() => {
-          this.$refs.password.focus()
-        })
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            this.$store.dispatch('user/login', this.loginForm)
-              .then(() => {
-                this.$router.push({
-                  path: this.redirect || '/',
-                  query: this.otherQuery
-                })
-                this.loading = false
-              })
-              .catch(() => {
-                this.loading = false
-              })
-          } else {
-            console.log('error submit!!')
-            return false
-          }
-        })
-      },
-      getOtherQuery(query) {
-        return Object.keys(query).reduce((acc, cur) => {
-          if (cur !== 'redirect') {
-            acc[cur] = query[cur]
-          }
-          return acc
-        }, {})
-      }
-      // afterQRScan() {
-      //   if (e.key === 'x-admin-oauth-code') {
-      //     const code = getQueryObject(e.newValue)
-      //     const codeMap = {
-      //       wechat: 'code',
-      //       tencent: 'code'
-      //     }
-      //     const type = codeMap[this.auth_type]
-      //     const codeName = code[type]
-      //     if (codeName) {
-      //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-      //         this.$router.push({ path: this.redirect || '/' })
-      //       })
-      //     } else {
-      //       alert('第三方登录失败')
-      //     }
-      //   }
-      // }
+      })
+    },
+    getOtherQuery(query) {
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== 'redirect') {
+          acc[cur] = query[cur]
+        }
+        return acc
+      }, {})
     }
+    // afterQRScan() {
+    //   if (e.key === 'x-admin-oauth-code') {
+    //     const code = getQueryObject(e.newValue)
+    //     const codeMap = {
+    //       wechat: 'code',
+    //       tencent: 'code'
+    //     }
+    //     const type = codeMap[this.auth_type]
+    //     const codeName = code[type]
+    //     if (codeName) {
+    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
+    //         this.$router.push({ path: this.redirect || '/' })
+    //       })
+    //     } else {
+    //       alert('第三方登录失败')
+    //     }
+    //   }
+    // }
   }
+}
 </script>
 
 <style lang="scss">
@@ -209,6 +203,9 @@
 
   /* reset element-ui css */
   .login-container {
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: cover;
     .el-input {
       display: inline-block;
       height: 47px;

src/views/sys/menus/form.vue

@@ -4,8 +4,7 @@
     <el-card class="form-container" shadow="never">
       <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
         <el-form-item label="上级菜单：" prop="parentId">
-          <span>{{ parentTitle }}</span>
-          <el-input v-model="menu.parentId" hidden />
+          <el-input v-model="parentTitle" />
         </el-form-item>
         <el-form-item label="菜单名称：" prop="title">
           <el-input v-model="menu.title" />
@@ -52,6 +51,10 @@ export default {
   name: 'MenuForm',
   data() {
     return {
+      rules: {
+        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '前端名称不能为空', trigger: 'blur' }]
+      },
       parentTitle: '',
       menu: Object.assign({}, defaultMenu),
       isEdit: false
@@ -59,13 +62,19 @@ export default {
   },
   watch: {
     $route(route) {
-      this.resetParentId()
-      this.getFormData()
+      if (this.$route.query.parentId != null) {
+        this.resetParentId()
+      } else {
+        this.getFormData()
+      }
     }
   },
   created() {
-    this.resetParentId()
-    this.getFormData()
+    if (this.$route.query.parentId != null) {
+      this.resetParentId()
+    } else {
+      this.getFormData()
+    }
   },
   methods: {
     isElementIcon(value) {
@@ -97,6 +106,7 @@ export default {
         this.isEdit = false
         this.menu = Object.assign({}, defaultMenu)
       }
+      console.log('this.menu', this.menu)
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()

src/views/sys/menus/list.vue

@@ -22,13 +22,13 @@
       <el-table-column label="路由名称" align="center">
         <template slot-scope="{row}">{{ row.name }}</template>
       </el-table-column>
-      <el-table-column label="前端图标" width="150" align="center">
+      <el-table-column label="前端图标" width="80" align="center">
         <template slot-scope="{row}">
           <i v-if="isElementIcon(row.icon)" :class="row.icon" />
           <svg-icon v-else-if="row.icon" :icon-class="row.icon" />
         </template>
       </el-table-column>
-      <el-table-column label="状态" width="150" align="center">
+      <el-table-column label="状态" width="80" align="center">
         <template slot-scope="{row}">
           <el-switch
             v-model="row.status"
@@ -40,18 +40,20 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="排序" width="150" align="center">
+      <el-table-column label="排序" width="80" align="center">
         <template slot-scope="{row}">
           <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="handleOnInputBlur(row)" />
         </template>
       </el-table-column>
-      <el-table-column label="设置" width="150" align="center">
+      <el-table-column label="设置" width="250" align="center">
         <template slot-scope="{row}">
           <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单
           </el-button>
+          <el-button plain size="mini" @click="handleAddMenus(row)">添加子菜单
+          </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
+      <el-table-column label="操作" width="150" align="center">
         <template slot-scope="{row}">
           <el-button size="mini" type="primary" @click="handleUpdate(row)">编辑
           </el-button>
@@ -164,6 +166,9 @@ export default {
     handleCreate() {
       this.$router.push({ path: '/sys/menus/form' })
     },
+    handleAddMenus(row) {
+      this.$router.push({ path: '/sys/menus/form', query: { parentId: row.id, title: row.title }})
+    },
     handleDelete(row) {
       this.$confirm('是否要删除该菜单', '提示', {
         confirmButtonText: '确定',

src/views/sys/roles/components/rolesDetail.vue

@@ -1,47 +1,21 @@
 <template>
   <el-card class="form-container" shadow="never">
-    <el-form ref="productCateFrom" :model="productCate" :rules="rules" label-width="150px">
-      <el-form-item label="分类名称：" prop="name">
-        <el-input v-model="productCate.name" />
+    <el-form ref="productCateFrom" :model="rolesForm" :rules="rules" label-width="150px">
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input v-model="rolesForm.roleName" maxlength="20" />
       </el-form-item>
-      <el-form-item label="上级分类：">
-        <el-select v-model="productCate.parentId" placeholder="请选择分类" @change="changeAttrProductCate">
-          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
+      <el-form-item label="角色描述：" prop="roleDesc">
+        <el-input v-model="rolesForm.roleDesc" maxlength="20" />
       </el-form-item>
-      <el-form-item label="数量单位：">
-        <el-input v-model="productCate.productUnit" />
-      </el-form-item>
-      <el-form-item label="排序：">
-        <el-input v-model="productCate.sort" />
-      </el-form-item>
-      <el-form-item label="是否显示：">
-        <el-radio-group v-model="productCate.showStatus">
-          <el-radio :label="1">是</el-radio>
-          <el-radio :label="0">否</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="是否显示在导航栏：">
-        <el-radio-group v-model="productCate.navStatus">
-          <el-radio :label="1">是</el-radio>
-          <el-radio :label="0">否</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="分类图标：">
-        <!-- <single-upload v-model="productCate.icon" /> -->
-      </el-form-item>
-      <el-form-item v-for="(filterProductAttr, index) in filterProductAttrList" :key="filterProductAttr.key" :label="index | filterLabelFilter">
-        <el-cascader v-model="filterProductAttr.value" clearable :options="filterAttrs" @change="changeFilterProductAttrFn" />
-        <!-- <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button> -->
-      </el-form-item>
-      <!-- <el-form-item>
-        <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
-      </el-form-item> -->
-      <el-form-item label="关键词：">
-        <el-input v-model="productCate.keywords" />
-      </el-form-item>
-      <el-form-item label="分类描述：">
-        <el-input v-model="productCate.description" type="textarea" :autosize="true" />
+      <el-form-item label="角色授权：">
+        <el-tree
+          ref="tree"
+          :data="treeData"
+          show-checkbox
+          node-key="id"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
@@ -52,35 +26,20 @@
 </template>
 
 <script>
-// import { fetchList, createProductCate, updateProductCate, getProductCate } from '@/api/productCate'
-// import { fetchListWithAttr } from '@/api/productAttrCate'
-// import { getProductAttrInfo } from '@/api/productAttr'
-// import SingleUpload from '@/components/Upload/singleUpload'
+import { updateMenu, createMenu } from '@/api/role'
+import { sysMenuTree } from '@/api/menu'
+import { validAlphabets } from '@/utils/validate'
 
-const defaultProductCate = {
-  description: '',
-  icon: '',
-  keywords: '',
-  name: '',
-  navStatus: 0,
-  parentId: 0,
-  productUnit: '',
-  showStatus: 0,
-  sort: 0,
-  productAttributeIdList: []
+const defaultRole = {
+  roleDesc: '',
+  roleName: '',
+  menuIds: '',
+  id: 0
 }
 export default {
   name: 'ProductCateDetail',
   // components: { SingleUpload },
-  filters: {
-    filterLabelFilter(index) {
-      if (index === 0) {
-        return '筛选属性：'
-      } else {
-        return ''
-      }
-    }
-  },
+  filters: { },
   props: {
     isEdit: {
       type: Boolean,
@@ -88,16 +47,31 @@ export default {
     }
   },
   data() {
+    const validateRoleName = (rule, value, callback) => {
+      if (!validAlphabets(value)) {
+        callback(new Error('请输入英文角色名称'))
+      } else {
+        callback()
+      }
+    }
     return {
-      productCate: Object.assign({}, defaultProductCate),
+      rolesForm: Object.assign({}, defaultRole),
       selectProductCateList: [],
       rules: {
-        name: [
-          { required: true, message: '请输入品牌名称', trigger: 'blur' },
-          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
+        roleName: [
+          { required: true, message: '请输入英文角色名称', trigger: 'blur', validator: validateRoleName },
+          { min: 2, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        roleDesc: [
+          { required: true, message: '请输入角色描述', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
         ]
       },
-      filterAttrs: [],
+      treeData: [],
+      defaultProps: {
+        children: 'subMenus',
+        label: 'title'
+      },
       filterProductAttrList: [
         {
           value: []
@@ -123,68 +97,19 @@ export default {
       //   }
       // })
     } else {
-      this.productCate = Object.assign({}, defaultProductCate)
+      this.rolesForm = Object.assign({}, defaultRole)
     }
-    this.getSelectProductCateList()
+    this.getSysMenuTree()
   },
   methods: {
-    getSelectProductCateList() {
-      // fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
-      //   this.selectProductCateList = response.data.list
-      //   this.selectProductCateList.unshift({ id: 0, name: '无上级分类' })
-      //   this.selectProductCateList.forEach(el => {
-      //     // eslint-disable-next-line eqeqeq
-      //     if (el.id == this.productCate.parentId) {
-      //       this.changOptionName = el.name
-      //     }
-      //   })
-      //   console.log(this.changOptionName)
-      //   this.getProductAttrCateList()
-      // })
-    },
-    getProductAttrCateList() {
-      console.log(this.changOptionName)
-      // const params = { productAttrCateId: null, parentName: this.changOptionName }
-      // fetchListWithAttr(params).then(response => {
-      //   const list = response.data
-      //   for (let i = 0; i < list.length; i++) {
-      //     const productAttrCate = list[i]
-      //     const children = []
-      //     if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
-      //       for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
-      //         children.push({
-      //           label: productAttrCate.productAttributeList[j].name,
-      //           value: productAttrCate.productAttributeList[j].id
-      //         })
-      //       }
-      //     }
-      //     // this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
-      //     this.filterAttrs.push({ label: productAttrCate.name, value: productAttrCate.id })
-      //   }
-      // })
+    handleNodeClick(data, node) {
+      console.log(node)
+      debugger
     },
-    getProductAttributeIdList() {
-      // 获取选中的筛选商品属性
-      const productAttributeIdList = []
-      for (let i = 0; i < this.filterProductAttrList.length; i++) {
-        const item = this.filterProductAttrList[i]
-        if (item.value !== null && item.value.length === 1) {
-          productAttributeIdList.push(item.value[0])
-        }
-      }
-      return productAttributeIdList
-    },
-    changeAttrProductCate(value) {
-      this.selectProductCateList.forEach(el => {
-        // eslint-disable-next-line eqeqeq
-        if (value == el.id) {
-          this.changOptionName = el.name
-        }
+    getSysMenuTree() { // 属性菜单
+      sysMenuTree().then(response => {
+        this.treeData = response.data
       })
-      console.log(this.changOptionName)
-    },
-    changeFilterProductAttrFn(value) {
-      console.log(value)
     },
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
@@ -195,26 +120,26 @@ export default {
             type: 'warning'
           }).then(() => {
             if (this.isEdit) {
-              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
-              // updateProductCate(this.$route.query.id, this.productCate).then(response => {
-              //   this.$message({
-              //     message: '修改成功',
-              //     type: 'success',
-              //     duration: 1000
-              //   })
-              //   this.$router.back()
-              // })
+              this.rolesForm.menuIds = this.getCheckedNodes()
+              updateMenu(this.$route.query.id, this.rolesForm).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
             } else {
-              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
-              // createProductCate(this.productCate).then(response => {
-              //   this.$refs[formName].resetFields()
-              //   this.resetForm(formName)
-              //   this.$message({
-              //     message: '提交成功',
-              //     type: 'success',
-              //     duration: 1000
-              //   })
-              // })
+              this.rolesForm.menuIds = this.getCheckedNodes()
+              createMenu(this.rolesForm).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+              })
             }
           })
         } else {
@@ -227,15 +152,16 @@ export default {
         }
       })
     },
+    getCheckedNodes() { // 获取选中系统菜单Id
+      console.log(this.$refs.tree.getCheckedNodes())
+      const res = this.$refs.tree.getCheckedNodes()
+      const menuIds = res[0].id
+      console.log('menuIds', menuIds)
+      return menuIds
+    },
     resetForm(formName) {
       this.$refs[formName].resetFields()
-      this.productCate = Object.assign({}, defaultProductCate)
-      this.getSelectProductCateList()
-      this.filterProductAttrList = [
-        {
-          value: []
-        }
-      ]
+      this.rolesForm = Object.assign({}, defaultRole)
     },
     removeFilterAttr(productAttributeId) {
       if (this.filterProductAttrList.length === 1) {

src/views/sys/roles/list.vue

@@ -6,28 +6,28 @@
       </el-button>
     </div>
     <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
-      <el-table-column align="center" width="50">
-        <template slot-scope="scope">{{ scope.row.id }}</template>
+      <el-table-column label="序号" align="center" width="50">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
       </el-table-column>
       <el-table-column label="角色名称" align="center">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
+        <template slot-scope="scope">{{ scope.row.roleName }}</template>
       </el-table-column>
       <el-table-column label="角色描述" width="100" align="center">
-        <template slot-scope="scope">{{ scope.row.desc }}</template>
+        <template slot-scope="scope">{{ scope.row.roleDesc }}</template>
       </el-table-column>
       <el-table-column label="创建时间" align="center">
-        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
+        <template slot-scope="scope">{{ scope.row.createTime }}</template>
       </el-table-column>
       <el-table-column label="更新时间" align="center">
         <template slot-scope="scope">{{ scope.row.updateTime }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
+      <el-table-column label="操作" width="250" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleShowNextLevel(scope.$index, scope.row)">分配
+          <el-button size="mini" type="primary" @click="handleShowNextLevel(scope.$index, scope.row)">分配
           </el-button>
-          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          <el-button size="mini" type="primary" @click="handleUpdate(scope.$index, scope.row)">修改
           </el-button>
-          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { fetchList, deleteMenu } from '@/api/menu'
+import { fetchList, deleteMenu } from '@/api/role'
 import Pagination from '@/components/Pagination'
 
 export default {
@@ -74,31 +74,9 @@ export default {
   data() {
     return {
       tableKey: 0,
-      list: [
-        {
-          id: 1,
-          name: 'admim',
-          desc: '管理员',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 2,
-          name: 'user',
-          desc: '普通用户',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 3,
-          name: 'admim',
-          desc: '管理员',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        }
-      ],
+      list: [],
       total: 5,
-      listLoading: false,
+      listLoading: true,
       listQuery: {
         pageNum: 1,
         pageSize: 10,
@@ -109,12 +87,12 @@ export default {
   watch: {
     $route(route) {
       this.resetParentId()
-      // this.getList()
+      this.getList()
     }
   },
   created() {
     this.resetParentId()
-    // this.getList()
+    this.getList()
   },
   methods: {
     isElementIcon(value) {
@@ -145,10 +123,10 @@ export default {
       this.$router.push({ path: '/sys/roles', query: { parentId: row.id }})
     },
     handleUpdate(index, row) {
-      this.$router.push({ path: '/sys/roles/form', query: { id: row.id }})
+      this.$router.push({ path: '/sys/roles/update', query: { id: row.id }})
     },
     handleCreate() {
-      this.$router.push({ path: '/sys/roles/form' })
+      this.$router.push({ path: '/sys/roles/add' })
     },
     handleDelete(index, row) {
       this.$confirm('是否要删除该菜单', '提示', {