refactor: 页面布局样式优化和接口合理性优化

Former-commit-id: 4af1b0aa5aca3569f540e3bcad99f6e14741e855

src/views/system/role/index.vue

@@ -5,23 +5,23 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
+import { onMounted, reactive, ref, toRefs } from 'vue';
 import {
   listRolePages,
   updateRole,
   getRoleFormDetail,
   addRole,
   deleteRoles,
-  getRoleResources,
-  updateRoleResource
+  getRoleMenuIds,
+  updateRoleMenus
 } from '@/api/role';
 import { listResources } from '@/api/menu';
 
 import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { RoleFormData, RoleItem, RoleQueryParam } from '@/types/api/role';
-import { Resource } from '@/types/api/menu';
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import { Option, Dialog } from '@/types/common';
 
 const emit = defineEmits(['roleClick']);
 const queryFormRef = ref(ElForm);
@@ -30,12 +30,8 @@ const resourceRef = ref(ElTree);
 
 const state = reactive({
   loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
+  // 选中ID
+  ids: [] as number[],
   queryParams: {
     pageNum: 1,
     pageSize: 10
@@ -45,14 +41,14 @@ const state = reactive({
   dialog: {
     title: '',
     visible: false
-  },
+  } as Dialog,
   formData: {} as RoleFormData,
   rules: {
     name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
   },
-  resourceDialogVisible: false,
-  resourceOptions: [] as Resource[],
+  menuDialogVisible: false,
+  resourceOptions: [] as Option[],
   btnPerms: {} as any,
   // 勾选的菜单ID
   checkedMenuIds: new Set([]),
@@ -65,20 +61,22 @@ const state = reactive({
 });
 
 const {
+  ids,
   loading,
-  multiple,
   queryParams,
   roleList,
   total,
   dialog,
   formData,
   rules,
-  resourceDialogVisible,
+  menuDialogVisible,
   checkedRole,
-  resourceOptions,
-  btnPerms
+  resourceOptions
 } = toRefs(state);
 
+/**
+ * 查询
+ */
 function handleQuery() {
   emit('roleClick', {});
   state.loading = true;
@@ -89,7 +87,7 @@ function handleQuery() {
   });
 }
 /**
- * 查询重置
+ * 重置查询
  */
 function resetQuery() {
   queryFormRef.value.resetFields();
@@ -98,8 +96,6 @@ function resetQuery() {
 
 function handleSelectionChange(selection: any) {
   state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
 }
 
 function handleRowClick(row: any) {
@@ -107,14 +103,14 @@ function handleRowClick(row: any) {
 }
 
 function handleAdd() {
-  state.dialog = {
+  dialog.value = {
     title: '添加角色',
     visible: true
   };
 }
 
 function handleUpdate(row: any) {
-  state.dialog = {
+  dialog.value = {
     title: '修改角色',
     visible: true
   };
@@ -131,13 +127,13 @@ function submitFormData() {
       if (state.formData.id) {
         updateRole(state.formData.id as any, state.formData).then(() => {
           ElMessage.success('修改角色成功');
-          cancel();
+          closeDialog();
           handleQuery();
           loading.value = false;
         });
       } else {
         addRole(state.formData).then(() => {
-          cancel();
+          closeDialog();
           ElMessage.success('新增角色成功');
           handleQuery();
           loading.value = false;
@@ -150,9 +146,8 @@ function submitFormData() {
 /**
  * 取消
  */
-function cancel() {
+function closeDialog() {
   dialog.value.visible = false;
-  formData.value.id = undefined;
   dataFormRef.value.resetFields();
   dataFormRef.value.clearValidate();
 }
@@ -176,25 +171,11 @@ function handleDelete(row: any) {
     .catch(() => ElMessage.info('已取消删除'));
 }
 
-const handleResourceCheckChange = (
-  data: Resource,
-  isCheck: boolean,
-  sonHasCheck: boolean
-) => {
-  console.log('data', data);
-  console.log('isCheck', isCheck);
-  if (data.perms) {
-    data.perms.forEach(item => {
-      btnPerms.value[item.value] = isCheck;
-    });
-  }
-};
-
 /**
  * 资源分配
  */
-function openRoleResourceDialog(row: RoleItem) {
-  resourceDialogVisible.value = true;
+function showRoleMenuDialog(row: RoleItem) {
+  menuDialogVisible.value = true;
   loading.value = true;
 
   const roleId: any = row.id;
@@ -206,80 +187,35 @@ function openRoleResourceDialog(row: RoleItem) {
   // 获取所有的资源
   listResources().then(response => {
     resourceOptions.value = response.data;
-
-    // 获取角色拥有的资源
-    getRoleResources(roleId).then(({ data }) => {
-      // 勾选的菜单回显
-      const checkedMenuIds = data.menuIds;
+    // 角色拥有的资源
+    getRoleMenuIds(roleId).then(({ data }) => {
+      // 勾选回显
+      const checkedMenuIds = data;
       resourceRef.value.setCheckedKeys(checkedMenuIds);
-
-      nextTick(() => {
-        // 勾选的权限回显
-        const rolePermIds = data.permIds;
-
-        state.allPermIds = filterResourcePermIds(response.data, []);
-        if (state.allPermIds) {
-          state.allPermIds.forEach(permId => {
-            if (rolePermIds.indexOf(permId) > -1) {
-              btnPerms.value[permId] = true;
-            } else {
-              btnPerms.value[permId] = false;
-            }
-          });
-        }
-        loading.value = false;
-      });
+      loading.value = false;
     });
   });
 }
-
-const filterResourcePermIds = (resources: Resource[], permIds: string[]) => {
-  resources.forEach(resource => {
-    if (resource.perms) {
-      resource.perms.forEach(perm => {
-        permIds.push(perm.value);
-      });
-    }
-    if (resource.children) {
-      filterResourcePermIds(resource.children, permIds);
-    }
-  });
-  return permIds;
-};
 /**
  * 分配资源提交
  */
 function handleRoleResourceSubmit() {
-  const checkedMenuIds: any[] = resourceRef.value
+  const checkedMenuIds: number[] = resourceRef.value
     .getCheckedNodes(false, true)
     .map((node: any) => node.value);
 
-  const checkedPermIds = [] as string[];
-  if (state.allPermIds) {
-    state.allPermIds.forEach(permId => {
-      if (btnPerms.value[permId]) {
-        checkedPermIds.push(permId);
-      }
-    });
-  }
-
-  const RoleResource = {
-    menuIds: checkedMenuIds,
-    permIds: checkedPermIds
-  };
-
-  updateRoleResource(checkedRole.value.id, RoleResource).then(res => {
+  updateRoleMenus(checkedRole.value.id, checkedMenuIds).then(res => {
     ElMessage.success('分配权限成功');
-    state.resourceDialogVisible = false;
+    menuDialogVisible.value = false;
     handleQuery();
   });
 }
 
 /**
- * 取消资源分配
+ * 关闭资源弹窗
  */
-function cancelResourceAssign() {
-  state.resourceDialogVisible = false;
+function closeMenuDialogVisible() {
+  menuDialogVisible.value = false;
 }
 
 onMounted(() => {
@@ -289,104 +225,106 @@ onMounted(() => {
 
 <template>
   <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
+    <div class="search">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item prop="name" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="角色名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card>
+      <template #header>
         <el-button type="success" :icon="Plus" @click="handleAdd"
           >新增</el-button
         >
         <el-button
           type="danger"
           :icon="Delete"
-          :disabled="multiple"
+          :disabled="ids.length === 0"
           @click="handleDelete"
           >删除</el-button
         >
-      </el-form-item>
+      </template>
+      <!--table-->
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="roleList"
+        @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
+        highlight-current-row
+        border
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="角色名称" prop="name" min-width="300" />
+        <el-table-column label="角色编码" prop="code" width="200" />
 
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="角色名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
+        <el-table-column label="状态" align="center" width="150">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
 
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-table-column label="排序" align="center" width="100" prop="sort" />
+        <el-table-column prop="createTime" label="创建时间" width="250" />
+        <el-table-column prop="updateTime" label="修改时间" width="250" />
 
-    <!-- 数据表格 -->
-    <el-table
-      ref="dataTableRef"
-      v-loading="loading"
-      :data="roleList"
-      @selection-change="handleSelectionChange"
-      @row-click="handleRowClick"
-      highlight-current-row
-      border
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色名称" prop="name" min-width="300" />
-      <el-table-column label="角色编码" prop="code" width="200" />
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-tooltip content="分配资源" effect="light">
+              <el-button
+                type="success"
+                circle
+                plain
+                @click.stop="showRoleMenuDialog(scope.row)"
+              >
+                <svg-icon icon-class="perm" />
+              </el-button>
+            </el-tooltip>
 
-      <el-table-column label="状态" align="center" width="150">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="排序" align="center" width="100" prop="sort" />
-      <el-table-column prop="createTime" label="创建时间" width="250" />
-      <el-table-column prop="updateTime" label="修改时间" width="250" />
-
-      <el-table-column label="操作" align="center" width="200">
-        <template #default="scope">
-          <el-tooltip content="分配资源" effect="light">
             <el-button
-              type="success"
+              type="primary"
+              :icon="Edit"
               circle
               plain
-              @click.stop="openRoleResourceDialog(scope.row)"
-            >
-              <svg-icon icon-class="perm" />
-            </el-button>
-          </el-tooltip>
+              @click.stop="handleUpdate(scope.row)"
+            />
+            <el-button
+              type="danger"
+              :icon="Delete"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
 
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
+      <!-- pagination -->
+      <pagination
+        v-if="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
 
-    <!-- 分页工具条 -->
-    <pagination
-      v-if="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
+    <!-- dialog -->
     <el-dialog
       :title="dialog.title"
       v-model="dialog.visible"
@@ -427,7 +365,7 @@ onMounted(() => {
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitFormData">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -435,7 +373,7 @@ onMounted(() => {
     <!--分配资源弹窗-->
     <el-dialog
       :title="'【' + checkedRole.name + '】资源分配'"
-      v-model="resourceDialogVisible"
+      v-model="menuDialogVisible"
       width="800px"
     >
       <el-scrollbar max-height="600px" v-loading="loading">
@@ -445,25 +383,9 @@ onMounted(() => {
           show-checkbox
           :data="resourceOptions"
           :default-expand-all="true"
-          @check-change="handleResourceCheckChange"
         >
           <template #default="{ data }">
             {{ data.label }}
-
-            <div v-if="data.perms" class="resource-tree-node">
-              <el-divider direction="vertical" />
-              <div class="node-content">
-                <el-checkbox
-                  v-for="perm in data.perms"
-                  :key="perm.value"
-                  :label="perm.value"
-                  border
-                  size="small"
-                  v-model="btnPerms[perm.value]"
-                  >{{ perm.label }}</el-checkbox
-                >
-              </div>
-            </div>
           </template>
         </el-tree>
       </el-scrollbar>
@@ -473,48 +395,9 @@ onMounted(() => {
           <el-button type="primary" @click="handleRoleResourceSubmit"
             >确 定</el-button
           >
-          <el-button @click="cancelResourceAssign">取 消</el-button>
+          <el-button @click="closeMenuDialogVisible">取 消</el-button>
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
-
-<style lang="scss">
-.resource-tree-node {
-  width: 100%;
-  flex-wrap: wrap;
-  display: flex;
-  font-size: 14px;
-  justify-content: flex-end;
-  margin: 0 50px;
-  .node-content {
-    width: 400px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .el-divider--vertical {
-    height: 2em !important;
-  }
-}
-.el-tree-node__content {
-  height: auto !important;
-}
-
-.el-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  &:hover {
-    background-color: var(--el-tree-node-hover-bg-color);
-  }
-  &:active {
-    background-color: var(--el-tree-node-hover-bg-color);
-  }
-}
-
-.el-checkbox.el-checkbox--small {
-  margin: 5px;
-  z-index: 999;
-  background: #fff;
-}
-</style>