2022/8/23 角色权限框架

src/views/role/index.vue

@@ -6,11 +6,10 @@
       </el-form-item>
       <el-form-item>
         <el-button type="" size="small" @click="getList" v-if="$permission('/admin/role/check')">查询</el-button>
-        <el-button type="primary" size="small" @click="handleAdd(0)" v-if="$permission('/admin/role/add')">新增</el-button>
+        <el-button type="primary" size="small" @click="handleAdd()" v-if="$permission('/admin/role/add')">新增</el-button>
       </el-form-item>
     </el-form>
     <el-table
-        row-key="id"
         v-loading="loading"
         :data="tableData"
         border
@@ -19,14 +18,14 @@
     >
       <el-table-column prop="name" label="角色名称" align="" show-overflow-tooltip></el-table-column>
       <el-table-column label="功能权限" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
+        <!-- <template slot-scope="scope">
           <span v-for="item in scope.row.functionList">{{item.name}}
           </span>
-        </template>
+        </template> -->
       </el-table-column>
       <el-table-column label="数据权限" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
-          <span v-for="item in scope.row.dataList">{{item.name}}
+          <span v-for="item in scope.row.dataList" :key="item.id">{{item.name}}
           </span>
         </template>
       </el-table-column>
@@ -47,14 +46,14 @@
      <div class="pagination">
       <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
     </div>
-    <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="close">
+    <el-dialog :title="title" :visible.sync="visible" width="1000px" :before-close="close">
       <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
       
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
         </el-form-item>
-        <el-form-item label="功能权限" prop="function">
-           <el-cascader
+        <el-form-item label="权限" prop="function">
+           <!-- <el-cascader
            v-model="ruleForm.function"
               :options="functionList"
               :props="{multiple:true, checkStrictly: true,value:'id',label:'name' }"
@@ -62,12 +61,46 @@
               placeholder="请输入功能权限"
               clearable
               @visible-change="getDataList"
-              style="width:100%"></el-cascader>
+              style="width:100%"></el-cascader> -->
           <!-- <el-input v-model="ruleForm.function" placeholder="请输入功能权限"></el-input> -->
+          <el-table
+            :row-key="functionList.id"
+            :data="functionList"
+            v-loading="loading"
+          >
+            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
+            <el-table-column type="expand">
+              <template style="width:80%;" slot-scope="scope">
+                <div :id="scope.row.id">
+                  <el-table
+                    :data="scope.row.children"
+                    row-key="id"
+                    border
+                  >
+                    <el-table-column type="selection" width="60" align="center">
+
+                    </el-table-column>
+                    <el-table-column label="功能名称" align="left" prop="name">
+
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                      <!-- <span v-if="multipleSelection">{{multipleSelection}}</span> -->
+                      <span>添加</span>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="应用名称" align="left">
+              <template slot-scope="scope">
+                <span>{{scope.row.name}}</span>
+              </template>
+            </el-table-column>
+          </el-table>
         </el-form-item>
          <el-form-item label="数据权限" prop="data" v-if="showDataList">
             <el-cascader
-           v-model="ruleForm.data"
+              v-model="ruleForm.data"
               :options="dataList"
               :props="{multiple:true, checkStrictly: false,value:'id',label:'dataName' }"
               collapse-tags
@@ -105,7 +138,9 @@ export default {
       title: '',
       showDataList:false,
       functionList:[],
-      dataList:[],
+      dataList: [],
+      multipleSelection: [],
+      expands:[],
       queryParams: {
         size: 10,
         current: 1,
@@ -140,7 +175,7 @@ export default {
         label: node.name,
       }
     },
-    handleAdd(id) {
+    handleAdd() {
       this.title = '新增角色'
       this.visible = true
      this.ruleForm={