添加权限页面

src/views/modules/org/org.vue

@@ -1,68 +1,74 @@
 <template>
-  <div class="mod-user">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+  <div class="mod-menu">
+    <el-form :inline="true" :model="dataForm">
       <el-form-item>
-        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getDataList()">查询</el-button>
-        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
     </el-form>
+
     <el-table
       :data="dataList"
+      row-key="menuId"
       border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
+      style="width: 100%; ">
+      <el-table-column type="selection" width="40">
+    	  <template slot-scope="scope">
+        	<el-radio :label="scope.row.name" v-model="radioId"></el-radio>
+        </template>
+      </el-table-column>
       <el-table-column
-        type="selection"
+        prop="name"
         header-align="center"
-        align="center"
-        width="50">
+        min-width="150"
+        label="名称" >
       </el-table-column>
       <el-table-column
-        prop="userId"
+        prop="parentName"
         header-align="center"
         align="center"
-        width="80"
-        label="ID">
+        width="120"
+        label="上级菜单">
       </el-table-column>
       <el-table-column
-        prop="username"
         header-align="center"
         align="center"
-        label="用户名">
+        label="图标">
+        <template slot-scope="scope">
+          <icon-svg :name="scope.row.icon || ''"></icon-svg>
+        </template>
       </el-table-column>
       <el-table-column
-        prop="email"
+        prop="type"
         header-align="center"
         align="center"
-        label="邮箱">
+        label="类型">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
+          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
+          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
+        </template>
       </el-table-column>
       <el-table-column
-        prop="mobile"
+        prop="orderNum"
         header-align="center"
         align="center"
-        label="手机号">
+        label="排序号">
       </el-table-column>
       <el-table-column
-        prop="status"
+        prop="url"
         header-align="center"
         align="center"
-        label="状态">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
-          <el-tag v-else size="small">正常</el-tag>
-        </template>
+        width="150"
+        :show-overflow-tooltip="true"
+        label="菜单URL">
       </el-table-column>
       <el-table-column
-        prop="createTime"
+        prop="perms"
         header-align="center"
         align="center"
-        width="180"
-        label="创建时间">
+        width="150"
+        :show-overflow-tooltip="true"
+        label="授权标识">
       </el-table-column>
       <el-table-column
         fixed="right"
@@ -71,20 +77,11 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
-          <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
+          <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
+          <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
   </div>
@@ -92,19 +89,15 @@
 
 <script>
   import AddOrUpdate from './org-add-or-update'
+  import { treeDataTranslate } from '@/utils'
   export default {
     data () {
       return {
-        dataForm: {
-          userName: ''
-        },
+        dataForm: {},
         dataList: [],
-        pageIndex: 1,
-        pageSize: 10,
-        totalPage: 0,
         dataListLoading: false,
-        dataListSelections: [],
-        addOrUpdateVisible: false
+        addOrUpdateVisible: false,
+        radioId: ''
       }
     },
     components: {
@@ -118,39 +111,14 @@
       getDataList () {
         this.dataListLoading = true
         this.$http({
-          url: this.$http.adornUrl('/sys/user/list'),
+          url: this.$http.adornUrl('/sys/menu/list'),
           method: 'get',
-          params: this.$http.adornParams({
-            'page': this.pageIndex,
-            'limit': this.pageSize,
-            'username': this.dataForm.userName
-          })
+          params: this.$http.adornParams()
         }).then(({data}) => {
-          if (data && data.code === 0) {
-            this.dataList = data.page.list
-            this.totalPage = data.page.totalCount
-          } else {
-            this.dataList = []
-            this.totalPage = 0
-          }
+          this.dataList = treeDataTranslate(data, 'menuId')
           this.dataListLoading = false
         })
       },
-      // 每页数
-      sizeChangeHandle (val) {
-        this.pageSize = val
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 当前页
-      currentChangeHandle (val) {
-        this.pageIndex = val
-        this.getDataList()
-      },
-      // 多选
-      selectionChangeHandle (val) {
-        this.dataListSelections = val
-      },
       // 新增 / 修改
       addOrUpdateHandle (id) {
         this.addOrUpdateVisible = true
@@ -160,18 +128,15 @@
       },
       // 删除
       deleteHandle (id) {
-        var userIds = id ? [id] : this.dataListSelections.map(item => {
-          return item.userId
-        })
-        this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           this.$http({
-            url: this.$http.adornUrl('/sys/user/delete'),
+            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
             method: 'post',
-            data: this.$http.adornData(userIds, false)
+            data: this.$http.adornData()
           }).then(({data}) => {
             if (data && data.code === 0) {
               this.$message({
@@ -191,3 +156,8 @@
     }
   }
 </script>
+<style lang="scss" scoped>
+::v-deep .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>