权限管理修改样式

src/views/setting/role/index.vue

@@ -1,74 +1,73 @@
 <template>
-  <div class="app-container">
-    <div class="setting_title">权限管理</div>
-    <el-divider></el-divider>
-
-    <div class="mymain-container">
-      <div class="btn-group clearfix">
-        <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增角色</el-button>
-        </div>
-        <div class="fr">
+  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+    <template slot-scope="{activeKey, data}">
+      <div :style="{
+        width: '100%',
+        height: activeKey == 'list' ? '100%' : '0px',
+        overflow: 'hidden'
+      }">
+        <div class="app-container">
+          <div class="setting_title">权限管理</div>
+          <el-divider></el-divider>
+          <div class="mymain-container">
+            <div class="btn-group clearfix">
+              <div class="fl">
+                <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增角色</el-button>
+              </div>
+              <div class="fr">
+              </div>
+            </div>
+            <div class="table">
+              <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit
+                highlight-current-row stripe>
+                <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
+                <el-table-column align="center" label="角色" prop="name"></el-table-column>
+                <el-table-column align="center" label="操作" width="180">
+                  <template slot-scope="scope">
+                    <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)">设置权限</el-button>
+                    <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)"
+                      v-if="scope.row.adminRoleId != 1">编辑</el-button>
+                    <el-popconfirm style="margin-left: 10px;" title="确定删除吗？"
+                      @confirm="handleDelete(scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">
+                      <el-button slot="reference" type="text">删除</el-button>
+                    </el-popconfirm>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="pagination clearfix">
+              <div class="fr">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                  :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+                  layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
+                </el-pagination>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-
-      <div class="table">
-        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
-          stripe>
-          <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
-          <el-table-column align="center" label="角色" prop="name"></el-table-column>
-          <el-table-column align="center" label="操作" width="180">
-            <template slot-scope="scope">
-              <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)">设置权限</el-button>
-              <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)"
-                v-if="scope.row.adminRoleId != 1">编辑</el-button>
-              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.adminRoleId)"
-                v-if="scope.row.adminRoleId != 1">
-                <el-button slot="reference" type="text">删除</el-button>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
+      <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
+          <el-form-item label="角色名" prop="name">
+            <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
+          <el-button size="mini" type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
         </div>
       </div>
-    </div>
-
-    <!-- 新增编辑 -->
-    <el-dialog :title="addFormType == 'add' ? '新增角色' : '编辑角色'" :visible.sync="addFormVisible" :show-close="false"
-      width="40%" :close-on-click-modal="false">
-      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
-        <el-form-item label="角色名" prop="name">
-          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelAddForm">取 消</el-button>
-        <el-button type="primary" @click="submitAddForm">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 设置权限 -->
-    <el-dialog title="设置权限" :visible.sync="roleFormVisible" :show-close="false" width="1000" :close-on-click-modal="false"
-      custom-class="tree-dialog" top="50px">
-      <!-- :check-strictly="true" -->
-      <zj-tree :data="menuRoleList" show-checkbox :default-expand-all="true" node-key="moduleId" ref="tree"
-        highlight-current :props="defaultProps">
-      </zj-tree>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="roleFormVisible = false">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
-        <el-button type="primary" @click="submitRoleForm" v-if="editId != 1">确 定</el-button>
+      <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+        <zj-tree :data="menuRoleList" show-checkbox :default-expand-all="true" node-key="moduleId" ref="tree"
+          highlight-current :props="defaultProps">
+        </zj-tree>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="data.removeTab()">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
+          <el-button size="mini" type="primary" @click="submitRoleForm(data.removeTab)" v-if="editId != 1">确 定</el-button>
+        </div>
       </div>
-    </el-dialog>
-
-  </div>
+    </template>
+  </zj-tab-page>
 </template>
 
 <script>
@@ -84,10 +83,8 @@ export default {
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
-
       editId: null,
       addFormType: 'add',
-      addFormVisible: false,
       addForm: {
         name: '', // 角色名
       },
@@ -96,9 +93,6 @@ export default {
           { required: true, message: '请输入角色名', trigger: 'blur' }
         ],
       },
-
-      roleFormVisible: false,
-
       menuRoleList: [],
       defaultProps: {
         children: 'children',
@@ -118,12 +112,10 @@ export default {
   methods: {
     getList() {
       this.listLoading = true;
-
       let params = {
         pageNum: this.currentPage,
         pageSize: this.pageSize
       };
-
       getRoleList(params).then(res => {
         this.dataList = res.data.records;
         this.listTotal = res.data.total;
@@ -154,26 +146,30 @@ export default {
 
     // 新增编辑
     addOrEdit(type, id) {
-      this.addFormType = type;
-      this.addFormVisible = true;
-      if (type == 'edit') {
-        this.editId = id;
-        getRoleDetail({ adminRoleId: id }).then(res => {
-          this.addForm = {
-            name: res.data.name
+      this.$refs.tabPage.addTab({
+        activeKey: type,
+        key: type,
+        label: ({ add: "新增", edit: "编辑" })[type],
+        triggerEvent: () => {
+          this.$refs?.addForm?.resetFields();
+          this.$data.addForm = this.$options.data().addForm
+          this.addFormType = type;
+          if (type == 'edit') {
+            this.editId = id;
+            getRoleDetail({ adminRoleId: id }).then(res => {
+              this.addForm = {
+                name: res.data.name
+              }
+            })
           }
-        })
-      }
-    },
-
-    // 取消 新增编辑
-    cancelAddForm() {
-      this.addFormVisible = false;
-      this.$refs.addForm.resetFields();
+        },
+        closeEvent: () => {
+        }
+      })
     },
 
     // 提交 新增编辑
-    submitAddForm() {
+    submitAddForm(removeTab) {
       this.$refs.addForm.validate((valid) => {
         if (valid) {
           let params = {
@@ -182,13 +178,13 @@ export default {
           if (this.addFormType == 'edit') {
             params.adminRoleId = this.editId;
             editRole(params).then(res => {
-              this.cancelAddForm();
+              removeTab('list');
               this.getList();
               this.$successMsg('编辑成功');
             })
           } else {
             addRole(params).then(res => {
-              this.cancelAddForm();
+              removeTab('list');
               this.getList();
               this.$successMsg('新增成功');
             })
@@ -199,39 +195,47 @@ export default {
 
     // 设置权限 - 获取列表
     setMenuRole(id) {
-      this.roleFormVisible = true;
-      this.editId = id;
-
-      function aaa(list){
-        for(var item of list){
-          if(item.type==3){
-            item.tiling = true
-            item.labelWidthNum = 115
-          }
-          if(item.children && item.children.length){
-            aaa(item.children)
-          }
+      this.$refs.tabPage.addTab({
+        activeKey: "detail",
+        key: "detail",
+        label: "设置权限",
+        triggerEvent: () => {
+          this.$nextTick(() => {
+            this.editId = id;
+            function aaa(list) {
+              for (var item of list) {
+                if (item.type == 3) {
+                  item.tiling = true
+                  item.labelWidthNum = 115
+                }
+                if (item.children && item.children.length) {
+                  aaa(item.children)
+                }
+              }
+            }
+            getMenuList({ adminUserId: this.userid }).then(res => {
+              aaa(res.data);
+              this.menuRoleList = res.data
+            })
+            getMenuRoleIds({ adminRoleId: id }).then(res => {
+              this.$refs.tree.setCheckedKeys(res.data);
+            })
+          })
+        },
+        closeEvent: () => {
         }
-      }
-
-      getMenuList({ adminUserId: this.userid }).then(res => {
-        aaa(res.data);
-        this.menuRoleList = res.data
-      })
-      getMenuRoleIds({ adminRoleId: id }).then(res => {
-        this.$refs.tree.setCheckedKeys(res.data);
       })
     },
 
     // 设置权限 - 提交数据
-    submitRoleForm() {
+    submitRoleForm(removeTab) {
       let params = {
         adminModuleIds: this.$refs.tree.getCheckedKeys(),
         adminModuleIds2: this.$refs.tree.getHalfCheckedKeys(),
         adminRoleId: this.editId,
       }
       setMenuRole(params).then(res => {
-        this.roleFormVisible = false;
+        removeTab('list')
         this.getList();
         this.$successMsg();
       })