2022/8/24 角色权限框架

src/views/dataPermission/index.vue

@@ -16,6 +16,7 @@
         border
         @expand-change="getNode"
         header-row-class-name="custom-table-header"
+        height="450"
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
       <el-table-column type="selection" width="60" align="center"></el-table-column>
@@ -33,22 +34,8 @@
         </template>
       </el-table-column>
     </el-table>
-       <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="800px" :before-close="close">
+    <el-dialog :title="title" :visible.sync="visible" width="800px" :before-close="close" :append-to-body="true">
       <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
-           <!-- <el-form-item label="所属租户" prop="tenant">
-              <el-tooltip
-                  class="item"
-                  effect="dark"
-                  :disabled="!userinfo.tenantName"
-                  :content="userinfo.tenantName"
-                  placement="top-start"
-                >
-                <el-input v-model="userinfo.tenantName" placeholder="请输入所属租户" :readonly="true" ></el-input>
-                </el-tooltip>
-            </el-form-item> -->
            <el-form-item label="所属功能" prop="function">
             <el-input v-model="ruleForm.function" size="small" :readonly="true" placeholder="请输入所属功能"></el-input>
         </el-form-item>
@@ -57,19 +44,8 @@
         </el-form-item>
         <el-form-item label="数据权限">
              <template>
-
               <div class="add"><el-button type="primary" @click="addList()">添加</el-button> </div>
                   <div style="border:1px solid #C0C0C0;border-radius:4px;overflow:auto;min-height:200px;padding: 10px 20px">
-                    <!-- <el-row :gutter="24" v-for="(item,i) in dataList" :key="i" class="listItem">
-                      <el-col :span="3" :class="item.logicOpr ? 'normal' : 'hidden'" style="background: rgba(0,0,0,0)"><span><el-input  v-model="item.logicOpr"></el-input></span></el-col>
-                      <el-col :span="7"><el-input v-model="item.field"></el-input></el-col>
-                      <el-col :span="3"><el-input v-model="item.opr"></el-input></el-col>
-                      <el-col :span="7"><el-input v-model="item.value"></el-input></el-col>
-                      <el-col :span="4">
-                      <el-button><i class="el-icon-delete"></i> </el-button>
-                      </el-col>
-                    </el-row> -->
-
                     <el-row :gutter="24" v-for="(item,i) in list" :key="i" class="listItem">
                       <el-col :span="4" style="padding:0">
                         <span>
@@ -150,6 +126,10 @@ export default {
     TreeItem
   },
   data() {
+    name: 'DataPermission'
+    props: {
+
+    }
     return {
       options:[{label:'你好',value:1},{label:'你好1',value:2},{label:'你好2',value:3}],   
       visible: false,

src/views/role/index.vue

@@ -43,81 +43,59 @@
         </template>
       </el-table-column>
     </el-table>
-     <div class="pagination">
+    <!-- 分页 -->
+    <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="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
-           v-model="ruleForm.function"
-              :options="functionList"
-              :props="{multiple:true, checkStrictly: true,value:'id',label:'name' }"
-              collapse-tags
-              placeholder="请输入功能权限"
-              clearable
-              @visible-change="getDataList"
-              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-dialog :title="title" :visible.sync="visible" width="1100px" max-height="800" :before-close="close">
+      <div style="height: 500px">
+        <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
         
-            <el-table-column type="expand">
-              <template style="width:80%;" slot-scope="scope">
-                <div >
-                  <!-- <el-table
-                    :data="scope.row.children"
-                     :row-key="getRowKeys"
-                    border
-                    @selection-change="handleSelectionChange"
-                  > -->
-
-                  <el-table
-                      border
-                      :data="scope.row.children"
-                      row-key="id"
-                      ref="multiTable"
-                      @selection-change="handleSelectionChange"
-                    >
-
-                    <!-- <el-table-column type="selection" width="60" align="center"> -->
-
-                    <!-- </el-table-column> -->
-                    <el-table-column label="功能名称" align="left" prop="name">
-                        
-                      <template slot-scope="scope">
-                         <el-checkbox-group v-model="checkList" style="display:inline-block" @change="handleCheckedCitiesChange">
-                          <el-checkbox :label="scope.row.id">{{scope.row.name}}</el-checkbox></el-checkbox-group>
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="操作" align="center">
-                      <template slot-scope="scope">
-                        <span v-if="checkList.filter(item=>item==scope.row.id)[0]">添加</span>
-                      </template>
-                      <!-- <span v-if="multipleSelection">{{multipleSelection}}</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-form-item label="角色名称" prop="name">
+            <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
+          </el-form-item>
+          <el-form-item label="权限" prop="function">
+            <el-table
+              :row-key="functionList.id"
+              :data="functionList"
+              v-loading="loading"
+              max-height="370"
+            >
+              <el-table-column type="expand">
+                <template style="width:80%;" slot-scope="scope">
+                  <div >
+                    <el-table
+                        border
+                        :data="scope.row.children"
+                        row-key="id"
+                        ref="multiTable"
+                        @selection-change="handleSelectionChange"
+                      >
+                      <el-table-column label="功能名称" align="left" prop="name">
+                        <template slot-scope="scope">
+                          <el-checkbox-group v-model="checkList" style="display:inline-block" @change="handleCheckedCitiesChange">
+                            <el-checkbox :label="scope.row.id">{{scope.row.name}}</el-checkbox></el-checkbox-group>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="操作" align="center">
+                        <template slot-scope="scope">
+                        <!-- <span v-if="multipleSelection">{{multipleSelection}}</span> -->
+                          <i v-if="checkList.filter(item=>item==scope.row.id)[0]" class="el-icon-plus" @click="premissVisibale">添加</i>
+                        </template>
+                      </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"
               :options="dataList"
@@ -125,41 +103,49 @@
               collapse-tags
               placeholder="请输入数据权限"
               clearable
-              style="width:100%"></el-cascader>
-          <!-- <el-input v-model="ruleForm.data" placeholder="请输入数据权限"></el-input> -->
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="close">取 消</el-button>
-        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
+              style="width:100%">
+            </el-cascader>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
+          </el-form-item>
+        </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="close">取 消</el-button>
+          <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 新增中选中功能后的添加弹窗 -->
+    <el-dialog :title="permissTitle" :visible.sync="permissVisible" width="1100px" :before-close="premissClose" custom-class="permiss">
+    <div style="height: 600px;">
+      <DataPermission></DataPermission>
+    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import DataPermission from '../dataPermission'
 export default {
   components: {
-    Treeselect
+    Treeselect,
+    DataPermission
   },
   data() {
     return {
-      //  getRowKeys(row){
-			// 	return row.id
-			// },
       checkList:[],
-     checked: true,
+      checked: true,
       visible: false,
       loading: false,
       btnLoading: false,
+      permissVisible: false,
       total: 0,
       tableData: [],
       title: '',
+      permissTitle: '',
       showDataList:false,
       functionList:[],
       dataList: [],
@@ -175,7 +161,6 @@ export default {
       },
       rules: {
         name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
-        // function: [{ required: true, message: '请选择功能权限', trigger: 'change' },],
       },
     }
   },
@@ -197,16 +182,10 @@ export default {
    handleCheckedCitiesChange(value) {
         console.log(value)
       },
-
-
-
       handleSelectionChange(val) {
         console.log( val,this.$refs.multipleTable.selection)
-        
-        // this.$refs.multipleTable.toggleRowSelection(val[0])
         this.multipleSelection = val;
       },
-
     normalizer(node) {
       return {
         id: node.id,
@@ -216,7 +195,7 @@ export default {
     handleAdd() {
       this.title = '新增角色'
       this.visible = true
-     this.ruleForm={
+      this.ruleForm={
         function:[]
       }
     },
@@ -225,9 +204,16 @@ export default {
       this.visible = true
       this.ruleForm = { ...row }
     },
+    premissVisibale() {
+      this.permissTitle = '数据权限管理'
+      this.permissVisible = true
+    },
     close() {
       this.visible = false
     },
+    premissClose() {
+      this.permissVisible = false
+    },
      handleCurrentChange(val) {
       this.queryParams.current = val;
       this.getList();
@@ -320,4 +306,7 @@ export default {
 .admin-role {
 
 }
+.permiss {
+  height: 2000px;
+}
 </style>