perf: 优化角色、部门管理页面

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -25,10 +25,13 @@ import Tickets from "@iconify-icons/ep/tickets";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
 import Notebook from "@iconify-icons/ep/notebook";
 import Rank from "@iconify-icons/ep/rank";
-import videoPlay from "@iconify-icons/ep/video-play";
+import VideoPlay from "@iconify-icons/ep/video-play";
 import Monitor from "@iconify-icons/ep/monitor";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Delete from "@iconify-icons/ep/delete";
+import More from "@iconify-icons/ep/more-filled";
 addIcon("check", Check);
 addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
@@ -51,52 +54,56 @@ addIcon("location", Location);
 addIcon("tickets", Tickets);
 addIcon("office-building", OfficeBuilding);
 addIcon("notebook", Notebook);
-addIcon("video-play", videoPlay);
+addIcon("video-play", VideoPlay);
 addIcon("rank", Rank);
 addIcon("monitor", Monitor);
 addIcon("search", Search);
 addIcon("refresh", Refresh);
+addIcon("edits", EditPen);
+addIcon("delete", Delete);
+addIcon("more", More);
 
 // remixicon
-import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import nodeTree from "@iconify-icons/ri/node-tree";
-import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import questionLine from "@iconify-icons/ri/question-line";
-import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-import informationLine from "@iconify-icons/ri/information-line";
-import closeCircleLine from "@iconify-icons/ri/close-circle-line";
-import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
-import addFill from "@iconify-icons/ri/add-circle-line";
-import listCheck from "@iconify-icons/ri/list-check";
-import more2Fill from "@iconify-icons/ri/more-2-fill";
-
-addIcon("arrow-right-s-line", arrowRightSLine);
-addIcon("arrow-left-s-line", arrowLeftSLine);
-addIcon("logout-circle-r-line", logoutCircleRLine);
-addIcon("node-tree", nodeTree);
-addIcon("ubuntu-fill", ubuntuFill);
-addIcon("question-line", questionLine);
-addIcon("checkbox-circle-line", checkboxCircleLine);
-addIcon("information-line", informationLine);
-addIcon("close-circle-line", closeCircleLine);
-addIcon("arrow-up-line", arrowUpLine);
-addIcon("arrow-down-line", arrowDownLine);
-addIcon("bookmark-2-line", bookmark2Line);
-addIcon("add", addFill);
-addIcon("list-check", listCheck);
-addIcon("more-2-fill", more2Fill);
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import NodeTree from "@iconify-icons/ri/node-tree";
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import QuestionLine from "@iconify-icons/ri/question-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+import InformationLine from "@iconify-icons/ri/information-line";
+import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import Database from "@iconify-icons/ri/database-2-line";
+addIcon("arrow-right-s-line", ArrowRightSLine);
+addIcon("arrow-left-s-line", ArrowLeftSLine);
+addIcon("logout-circle-r-line", LogoutCircleRLine);
+addIcon("node-tree", NodeTree);
+addIcon("ubuntu-fill", UbuntuFill);
+addIcon("question-line", QuestionLine);
+addIcon("checkbox-circle-line", CheckboxCircleLine);
+addIcon("information-line", InformationLine);
+addIcon("close-circle-line", CloseCircleLine);
+addIcon("arrow-up-line", ArrowUpLine);
+addIcon("arrow-down-line", ArrowDownLine);
+addIcon("bookmark-2-line", Bookmark2Line);
+addIcon("add", AddFill);
+addIcon("list-check", ListCheck);
+addIcon("more-2-fill", More2Fill);
+addIcon("database", Database);
 
 // Font Awesome 4
-import faUser from "@iconify-icons/fa/user";
-import faLock from "@iconify-icons/fa/lock";
-import faSignOut from "@iconify-icons/fa/sign-out";
-addIcon("fa-user", faUser);
-addIcon("fa-lock", faLock);
-addIcon("fa-sign-out", faSignOut);
+import FaUser from "@iconify-icons/fa/user";
+import FaLock from "@iconify-icons/fa/lock";
+import FaSignOut from "@iconify-icons/fa/sign-out";
+addIcon("fa-user", FaUser);
+addIcon("fa-lock", FaLock);
+addIcon("fa-sign-out", FaSignOut);
 
 // Unicons
 import Import from "@iconify-icons/uil/import";

src/style/element-plus.scss

@@ -36,7 +36,12 @@
   z-index: 99999 !important;
 }
 
-// 自定义popover的类名
+/* 重置button中icon的margin */
+.reset-margin [class*="el-icon"] + span {
+  margin-left: 2px !important;
+}
+
+/* 自定义popover的类名 */
 .pure-popper {
   padding: 0 !important;
 }

src/views/system/dept/index.vue

@@ -79,11 +79,11 @@ onMounted(() => {
           :loading="loading"
           @click="onSearch"
         >
-          搜索</el-button
-        >
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
-          >重置</el-button
-        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
+          重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -129,6 +129,7 @@ onMounted(() => {
           <el-table-column label="状态" align="center" prop="status" width="80">
             <template #default="scope">
               <el-tag
+                :size="size"
                 :type="scope.row.status === 0 ? 'danger' : 'success'"
                 effect="plain"
               >
@@ -141,13 +142,12 @@ onMounted(() => {
             align="center"
             width="180"
             prop="createTime"
-          >
-            <template #default="scope">
-              <span>{{
-                dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
-              }}</span>
-            </template>
-          </el-table-column>
+            :formatter="
+              ({ createTime }) => {
+                return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
+              }
+            "
+          />
           <el-table-column
             label="备注"
             align="center"
@@ -158,17 +158,29 @@ onMounted(() => {
             fixed="right"
             label="操作"
             align="center"
-            width="130"
+            width="140"
           >
             <template #default="scope">
-              <el-button type="text" @click="handleUpdate(scope.row)"
-                >修改</el-button
+              <el-button
+                class="reset-margin"
+                type="text"
+                :size="size"
+                @click="handleUpdate(scope.row)"
+                :icon="useRenderIcon('edits')"
               >
+                修改
+              </el-button>
               <el-popconfirm title="是否确认删除?">
                 <template #reference>
-                  <el-button type="text" @click="handleDelete(scope.row)"
-                    >删除</el-button
+                  <el-button
+                    class="reset-margin"
+                    type="text"
+                    :size="size"
+                    :icon="useRenderIcon('delete')"
+                    @click="handleDelete(scope.row)"
                   >
+                    删除
+                  </el-button>
                 </template>
               </el-popconfirm>
             </template>

src/views/system/role/index.vue

@@ -15,8 +15,8 @@ import { Switch, message } from "@pureadmin/components";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const form = reactive({
+  name: "",
   code: "",
-  user: "",
   status: ""
 });
 let dataList = ref([]);
@@ -49,7 +49,11 @@ function handleSelectionChange(val) {
 
 function onChange(checked, { $index, row }) {
   ElMessageBox.confirm(
-    `确认要<strong>停用</strong><strong style='color:var(--el-color-primary)'>${row.name}</strong>角色吗?`,
+    `确认要<strong>${
+      row.status === 0 ? "停用" : "启用"
+    }</strong><strong style='color:var(--el-color-primary)'>${
+      row.name
+    }</strong>角色吗?`,
     "系统提示",
     {
       confirmButtonText: "确定",
@@ -112,16 +116,16 @@ onMounted(() => {
       :model="form"
       class="bg-white w-99/100 pl-8 pt-4"
     >
-      <el-form-item label="角色编码：" prop="code">
-        <el-input v-model="form.code" placeholder="请输入" clearable />
+      <el-form-item label="角色名称：" prop="name">
+        <el-input v-model="form.name" placeholder="请输入" clearable />
       </el-form-item>
-      <el-form-item label="角色名称：" prop="user">
-        <el-input v-model="form.user" placeholder="请输入" clearable />
+      <el-form-item label="角色标识：" prop="code">
+        <el-input v-model="form.code" placeholder="请输入" clearable />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
         <el-select v-model="form.status" placeholder="请选择" clearable>
-          <el-option label="开启" value="1" />
-          <el-option label="关闭" value="0" />
+          <el-option label="已开启" value="1" />
+          <el-option label="已关闭" value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -131,11 +135,11 @@ onMounted(() => {
           :loading="loading"
           @click="onSearch"
         >
-          搜索</el-button
-        >
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)"
-          >重置</el-button
-        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
+          重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -146,9 +150,9 @@ onMounted(() => {
       @refresh="onSearch"
     >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon('add')"
-          >新增角色</el-button
-        >
+        <el-button type="primary" :icon="useRenderIcon('add')">
+          新增角色
+        </el-button>
       </template>
       <template v-slot="{ size, checkList }">
         <el-table
@@ -173,10 +177,26 @@ onMounted(() => {
             width="70"
           />
           <el-table-column label="角色编号" align="center" prop="id" />
-          <el-table-column label="角色编码" align="center" prop="code" />
           <el-table-column label="角色名称" align="center" prop="name" />
-          <el-table-column label="角色排序" align="center" prop="sort" />
-          <el-table-column label="状态" align="center" prop="status">
+          <el-table-column label="角色标识" align="center" prop="code" />
+          <el-table-column label="角色类型" align="center" prop="type">
+            <template #default="scope">
+              <el-tag
+                :size="size"
+                :type="scope.row.type === 1 ? 'danger' : ''"
+                effect="plain"
+              >
+                {{ scope.row.type === 1 ? "内置" : "自定义" }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示顺序" align="center" prop="sort" />
+          <el-table-column
+            label="状态"
+            align="center"
+            width="130"
+            prop="status"
+          >
             <template #default="scope">
               <Switch
                 :size="size === 'small' ? 'small' : 'default'"
@@ -195,30 +215,74 @@ onMounted(() => {
             align="center"
             width="180"
             prop="createTime"
-          >
-            <template #default="scope">
-              <span>{{
-                dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
-              }}</span>
-            </template>
-          </el-table-column>
+            :formatter="
+              ({ createTime }) => {
+                return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
+              }
+            "
+          />
           <el-table-column
             fixed="right"
             label="操作"
-            width="130"
+            width="180"
             align="center"
           >
             <template #default="scope">
-              <el-button type="text" @click="handleUpdate(scope.row)"
-                >修改</el-button
+              <el-button
+                class="reset-margin"
+                type="text"
+                :size="size"
+                @click="handleUpdate(scope.row)"
+                :icon="useRenderIcon('edits')"
               >
+                修改
+              </el-button>
               <el-popconfirm title="是否确认删除?">
                 <template #reference>
-                  <el-button type="text" @click="handleDelete(scope.row)"
-                    >删除</el-button
+                  <el-button
+                    class="reset-margin"
+                    type="text"
+                    :size="size"
+                    :icon="useRenderIcon('delete')"
+                    @click="handleDelete(scope.row)"
                   >
+                    删除
+                  </el-button>
                 </template>
               </el-popconfirm>
+              <el-dropdown>
+                <el-button
+                  class="ml-3"
+                  type="text"
+                  :size="size"
+                  @click="handleUpdate(scope.row)"
+                  :icon="useRenderIcon('more')"
+                />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        class="reset-margin !h-20px !text-gray-500"
+                        type="text"
+                        :size="size"
+                        :icon="useRenderIcon('menu')"
+                      >
+                        菜单权限
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button
+                        class="reset-margin !h-20px !text-gray-500"
+                        type="text"
+                        :size="size"
+                        :icon="useRenderIcon('database')"
+                      >
+                        数据权限
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
@@ -237,3 +301,9 @@ onMounted(() => {
     </EpTableProBar>
   </div>
 </template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+</style>