Merge branch 'main' of github.com:pure-admin/vue-pure-admin into gitee

locales/zh-CN.yaml

@@ -40,7 +40,7 @@ menus:
   hsmessage: 消息提示组件
   hsvideo: 视频组件
   hssegmented: 分段控制器组件
-  hswaterfall: 瀑布流组件
+  hswaterfall: 瀑布流无限滚动组件
   hsmap: 地图组件
   hsdraggable: 拖拽组件
   hssplitPane: 切割面板

mock/system.ts

@@ -1,9 +1,9 @@
 import { MockMethod } from "vite-plugin-mock";
 
 export default [
-  // 角色
+  // 用户
   {
-    url: "/role",
+    url: "/user",
     method: "post",
     response: () => {
       return {
@@ -11,58 +11,114 @@ export default [
         data: {
           list: [
             {
-              createTime: 1605456000000,
+              username: "admin",
-              updateTime: 1645477701000,
+              nickname: "admin",
-              creator: "admin",
+              remark: "管理员",
-              updater: "",
+              deptId: 103,
-              deleted: false,
+              postIds: [1],
-              tenantId: 1,
+              mobile: "15888888888",
+              sex: 0,
               id: 1,
-              name: "超级管理员",
-              code: "super_admin",
-              sort: 1,
               status: 0,
-              type: 1,
+              createTime: 1605456000000,
-              remark: "超级管理员",
+              dept: {
-              dataScope: 1,
+                id: 103,
-              dataScopeDeptIds: null
+                name: "研发部门"
+              }
             },
             {
+              username: "pure",
+              nickname: "pure",
+              remark: "不要吓我",
+              deptId: 104,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 100,
+              status: 1,
               createTime: 1605456000000,
-              updateTime: 1645477700000,
+              dept: {
-              creator: "admin",
+                id: 104,
-              updater: "",
+                name: "市场部门"
-              deleted: false,
+              }
-              tenantId: 1,
-              id: 2,
-              name: "普通角色",
-              code: "common",
-              sort: 2,
-              status: 0,
-              type: 1,
-              remark: "普通角色",
-              dataScope: 2,
-              dataScopeDeptIds: null
             },
             {
+              username: "小姐姐",
+              nickname: "girl",
+              remark: null,
+              deptId: 106,
+              postIds: null,
+              mobile: "15888888888",
+              sex: 1,
+              id: 103,
+              status: 1,
               createTime: 1605456000000,
-              updateTime: 1647698441000,
+              dept: {
-              creator: "",
+                id: 106,
-              updater: "1",
+                name: "财务部门"
-              deleted: false,
+              }
-              tenantId: 1,
+            },
-              id: 101,
+            {
-              name: "测试账号",
+              username: "小哥哥",
-              code: "test",
+              nickname: "boy",
-              sort: 0,
+              remark: null,
+              deptId: 107,
+              postIds: [],
+              mobile: "15888888888",
+              sex: 0,
+              id: 104,
               status: 0,
-              type: 2,
+              createTime: 1605456000000,
-              remark: "132",
+              dept: {
-              dataScope: 1,
+                id: 107,
-              dataScopeDeptIds: []
+                name: "运维部门"
+              }
             }
           ],
-          total: 3
+          total: 4
+        }
+      };
+    }
+  },
+  // 角色
+  {
+    url: "/role",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          createTime: 1605456000000, // 时间戳（毫秒ms）
+          updateTime: 1684512000000,
+          creator: "admin",
+          id: 1,
+          name: "超级管理员",
+          code: "admin",
+          status: 1, // 状态 1 启用 0 停用
+          remark: "超级管理员拥有最高权限"
+        },
+        {
+          createTime: 1605456000000,
+          updateTime: 1684512000000,
+          creator: "admin",
+          id: 2,
+          name: "普通角色",
+          code: "common",
+          status: 1,
+          remark: "普通角色拥有部分权限"
+        }
+      ];
+      list = list.filter(item => item.name.includes(body?.name));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      if (body.code) list = list.filter(item => item.code === body.code);
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
         }
       };
     }
@@ -83,7 +139,7 @@ export default [
             phone: "15888888888",
             principal: "@cname()",
             email: "@email",
-            status: 1,
+            status: 1, // 状态 1 启用 0 停用
             type: 1, // 1 公司 2 分公司 3 部门
             createTime: 1605456000000,
             remark: "@cparagraph(1, 3)"
@@ -208,84 +264,5 @@ export default [
         ]
       };
     }
-  },
-  // 用户
-  {
-    url: "/user",
-    method: "post",
-    response: () => {
-      return {
-        success: true,
-        data: {
-          list: [
-            {
-              username: "admin",
-              nickname: "admin",
-              remark: "管理员",
-              deptId: 103,
-              postIds: [1],
-              mobile: "15888888888",
-              sex: 0,
-              id: 1,
-              status: 0,
-              createTime: 1605456000000,
-              dept: {
-                id: 103,
-                name: "研发部门"
-              }
-            },
-            {
-              username: "pure",
-              nickname: "pure",
-              remark: "不要吓我",
-              deptId: 104,
-              postIds: [1],
-              mobile: "15888888888",
-              sex: 0,
-              id: 100,
-              status: 1,
-              createTime: 1605456000000,
-              dept: {
-                id: 104,
-                name: "市场部门"
-              }
-            },
-            {
-              username: "小姐姐",
-              nickname: "girl",
-              remark: null,
-              deptId: 106,
-              postIds: null,
-              mobile: "15888888888",
-              sex: 1,
-              id: 103,
-              status: 1,
-              createTime: 1605456000000,
-              dept: {
-                id: 106,
-                name: "财务部门"
-              }
-            },
-            {
-              username: "小哥哥",
-              nickname: "boy",
-              remark: null,
-              deptId: 107,
-              postIds: [],
-              mobile: "15888888888",
-              sex: 0,
-              id: 104,
-              status: 0,
-              createTime: 1605456000000,
-              dept: {
-                id: 107,
-                name: "运维部门"
-              }
-            }
-          ],
-          total: 4
-        }
-      };
-    }
   }
 ] as MockMethod[];

package.json

@@ -30,8 +30,8 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.6",
+    "@logicflow/core": "^1.2.7",
-    "@logicflow/extension": "^1.2.6",
+    "@logicflow/extension": "^1.2.7",
     "@pureadmin/descriptions": "^1.1.1",
     "@pureadmin/table": "^2.1.0",
     "@pureadmin/utils": "^1.8.9",
@@ -56,20 +56,21 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.1",
     "qrcode": "^1.5.3",
     "qs": "^6.11.1",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^9.3.1",
+    "swiper": "^9.3.2",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.3.2",
+    "v3-infinite-loading": "^1.2.2",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-pdf-embed": "^1.1.6",
     "vue-router": "^4.2.0",
-    "vue-types": "^5.0.2",
+    "vue-types": "^5.0.3",
     "vue-virtual-scroller": "2.0.0-beta.7",
     "vue-waterfall-plugin-next": "^2.2.1",
     "vue3-danmaku": "1.4.0-beta.1",
@@ -94,8 +95,8 @@
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.6",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^7.1.0",
@@ -105,7 +106,7 @@
     "cssnano": "^6.0.1",
     "eslint": "^8.40.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint-plugin-vue": "^9.13.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "picocolors": "^1.0.0",
@@ -119,7 +120,7 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
-    "stylelint": "^15.6.1",
+    "stylelint": "^15.6.2",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended": "^12.0.0",
@@ -132,9 +133,9 @@
     "stylelint-scss": "^5.0.0",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.2",
-    "terser": "^5.17.3",
+    "terser": "^5.17.4",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
+    "vite": "^4.3.7",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
@@ -153,6 +154,7 @@
     },
     "allowedDeprecatedVersions": {
       "sourcemap-codec": "*",
+      "w3c-hr-time": "*",
       "stable": "*"
     }
   },

src/api/system.ts

@@ -5,8 +5,12 @@ type Result = {
   data?: {
     /** 列表数据 */
     list: Array<any>;
-    /** 总数 */
+    /** 总条目数 */
     total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
   };
 };
 

src/components/ReIcon/src/Select.vue

@@ -228,7 +228,7 @@ watch(
 :deep(.el-tabs__nav-wrap) {
   position: static;
   margin: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
 }
 
 :deep(.el-tabs__content) {

src/components/RePureTableBar/src/bar.tsx

@@ -200,7 +200,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
+        <div {...attrs} class="w-[99/100] mt-4 px-2 pb-2 bg-bg_color">
           <div class="flex justify-between w-full h-[60px] p-4">
             <p class="font-bold truncate">{props.title}</p>
             <div class="flex items-center justify-around">
@@ -245,6 +245,7 @@ export default defineComponent({
 
               <el-popover
                 v-slots={reference}
+                placement="bottom-start"
                 popper-style={{ padding: 0 }}
                 width="160"
                 trigger="click"

src/router/modules/components.ts

@@ -12,7 +12,7 @@ export default {
   children: [
     {
       path: "/components/dialog",
-      name: "Dialog",
+      name: "DialogPage",
       component: () => import("@/views/components/dialog/index.vue"),
       meta: {
         title: $t("menus.hsdialog"),
@@ -51,7 +51,7 @@ export default {
     },
     {
       path: "/components/video",
-      name: "Video",
+      name: "VideoPage",
       component: () => import("@/views/components/video/index.vue"),
       meta: {
         title: $t("menus.hsvideo")
@@ -59,7 +59,7 @@ export default {
     },
     {
       path: "/components/map",
-      name: "Map",
+      name: "MapPage",
       component: () => import("@/views/components/map/index.vue"),
       meta: {
         title: $t("menus.hsmap"),
@@ -91,7 +91,7 @@ export default {
     },
     {
       path: "/components/button",
-      name: "Button",
+      name: "ButtonPage",
       component: () => import("@/views/components/button/index.vue"),
       meta: {
         title: $t("menus.hsbutton")

src/utils/http/index.ts

@@ -63,7 +63,7 @@ class PureHttp {
       async (config: PureHttpRequestConfig): Promise<any> => {
         // 开启进度条动画
         NProgress.start();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof config.beforeRequestCallback === "function") {
           config.beforeRequestCallback(config);
           return config;
@@ -123,7 +123,7 @@ class PureHttp {
         const $config = response.config;
         // 关闭进度条动画
         NProgress.done();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof $config.beforeResponseCallback === "function") {
           $config.beforeResponseCallback(response);
           return response.data;
@@ -159,7 +159,7 @@ class PureHttp {
       ...axiosConfig
     } as PureHttpRequestConfig;
 
-    // 单独处理自定义请求/响应回掉
+    // 单独处理自定义请求/响应回调
     return new Promise((resolve, reject) => {
       PureHttp.axiosInstance
         .request(config)

src/views/components/button/index.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 
 defineOptions({
-  name: "Button"
+  name: "ButtonPage"
 });
 
 const { VITE_PUBLIC_PATH } = import.meta.env;

src/views/components/dialog/index.vue

@@ -7,7 +7,7 @@ import forms, { type FormProps } from "./form.vue";
 import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
 
 defineOptions({
-  name: "Dialog"
+  name: "DialogPage"
 });
 
 const router = useRouter();

src/views/components/map/index.vue

@@ -2,7 +2,7 @@
 import { Amap } from "@/components/ReMap";
 
 defineOptions({
-  name: "Map"
+  name: "MapPage"
 });
 </script>
 

src/views/components/video/index.vue

@@ -8,7 +8,7 @@ import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
 
 defineOptions({
-  name: "Video"
+  name: "VideoPage"
 });
 
 onMounted(() => {

src/views/components/waterfall/index.vue

@@ -2,8 +2,10 @@
 import { getList } from "./api";
 import error from "./error.png";
 import loading from "./loading.png";
-import { onMounted, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
 import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
 
@@ -31,8 +33,8 @@ const options = reactive({
       rowPerView: 2
     }
   },
-  // 动画效果
+  // 动画效果 https://animate.style/
-  animationEffect: "animate__fadeInUp",
+  animationEffect: "animate__zoomInUp",
   // 动画时间
   animationDuration: 1000,
   // 动画延迟
@@ -53,15 +55,26 @@ const options = reactive({
 const page = ref(1);
 const list = ref([]);
 const pageSize = ref();
+const loadingInstance = ref();
 
 /** 加载更多 */
 function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
   getList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
-    list.value.push(...res);
+    setTimeout(() => {
-    page.value += 1;
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
   });
 }
 
@@ -79,73 +92,60 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card shadow="never" class="!h-[85vh]">
+  <el-scrollbar height="87vh" class="content">
-    <template #header>
+    <Waterfall :list="list" v-bind="options">
-      <div class="card-header">
+      <template #item="{ item, url, index }">
-        <span class="font-medium">
+        <div
-          瀑布流组件，采用开源的
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
-          <el-link
+          @click="handleClick(item)"
-            href="https://github.com/heikaimu/vue3-waterfall-plugin"
+        >
-            target="_blank"
+          <div class="overflow-hidden">
-            style="margin: 0 4px 5px; font-size: 16px"
+            <LazyImg
-          >
+              :url="url"
-            vue-waterfall-plugin-next
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
-          </el-link>
+            />
-        </span>
+          </div>
-      </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-    </template>
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-    <el-scrollbar height="78vh" class="content">
+              {{ item.name }}
-      <Waterfall :list="list" v-bind="options">
+            </h4>
-        <template #item="{ item, url, index }">
+            <div
-          <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-            class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+            >
-            @click="handleClick(item)"
+              <div class="text-gray-50">$ {{ item.price }}</div>
-          >
+              <div>
-            <div class="overflow-hidden">
+                <button
-              <LazyImg
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                :url="url"
+                  @click.stop="handleDelete(item, index)"
-                class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+                >
-              />
+                  删除
-            </div>
+                </button>
-            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-              <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-                {{ item.name }}
-              </h4>
-              <div
-                class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-              >
-                <div class="text-gray-50">$ {{ item.price }}</div>
-                <div>
-                  <button
-                    class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                    @click.stop="handleDelete(item, index)"
-                  >
-                    删除
-                  </button>
-                </div>
               </div>
             </div>
           </div>
-        </template>
+        </div>
-      </Waterfall>
+      </template>
+    </Waterfall>
 
-      <div class="flex justify-center py-10">
+    <!-- <div class="flex justify-center py-10">
         <button
           class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
           @click="handleLoadMore"
         >
           加载更多
         </button>
-      </div>
+      </div> -->
 
-      <el-backtop
+    <el-backtop
-        title="回到顶部"
+      title="回到顶部"
-        :right="35"
+      :right="35"
-        :visibility-height="400"
+      :visibility-height="400"
-        target=".content .el-scrollbar__wrap"
+      target=".content .el-scrollbar__wrap"
-      >
+    >
-        <backTop />
+      <backTop />
-      </el-backtop>
+    </el-backtop>
-    </el-scrollbar>
+
-  </el-card>
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
 </template>

src/views/system/dept/form.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { formRules } from "./rule";
-import { FormProps } from "./types";
 import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
 import { usePublicHooks } from "../hooks";
 
 const props = withDefaults(defineProps<FormProps>(), {

src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useDept } from "./hook";
+import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
@@ -35,7 +35,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input
@@ -138,3 +138,11 @@ const {
     </PureTableBar>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/system/dept/utils/hook.tsx

@@ -1,12 +1,12 @@
 import dayjs from "dayjs";
-import editForm from "./form.vue";
+import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
-import { usePublicHooks } from "../hooks";
 import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { type FormItemProps } from "./types";
+import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
+import { type FormItemProps } from "../utils/types";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 
 export function useDept() {

src/views/system/role/form.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-form-item label="角色名称" prop="name">
+      <el-input
+        v-model="newFormInline.name"
+        clearable
+        placeholder="请输入角色名称"
+      />
+    </el-form-item>
+
+    <el-form-item label="角色标识" prop="code">
+      <el-input
+        v-model="newFormInline.code"
+        clearable
+        placeholder="请输入角色标识"
+      />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入备注信息"
+        type="textarea"
+      />
+    </el-form-item>
+  </el-form>
+</template>

src/views/system/role/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRole } from "./hook";
+import { useRole } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Database from "@iconify-icons/ri/database-2-line";
+// import Database from "@iconify-icons/ri/database-2-line";
-import More from "@iconify-icons/ep/more-filled";
+// import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -24,11 +24,13 @@ const {
   columns,
   dataList,
   pagination,
-  buttonClass,
+  // buttonClass,
   onSearch,
   resetForm,
-  handleUpdate,
+  openDialog,
+  handleMenu,
   handleDelete,
+  // handleDatabase,
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange
@@ -41,7 +43,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
@@ -66,8 +68,8 @@ const {
           clearable
           class="!w-[180px]"
         >
-          <el-option label="已开启" value="1" />
+          <el-option label="已启用" value="1" />
-          <el-option label="已关闭" value="0" />
+          <el-option label="已停用" value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -85,9 +87,17 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
+    <PureTableBar
+      title="角色列表（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
           新增角色
         </el-button>
       </template>
@@ -118,11 +128,24 @@ const {
               type="primary"
               :size="size"
               :icon="useRenderIcon(EditPen)"
-              @click="handleUpdate(row)"
+              @click="openDialog('编辑', row)"
             >
               修改
             </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Menu)"
+              @click="handleMenu"
+            >
+              菜单权限
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -130,20 +153,18 @@ const {
                   type="primary"
                   :size="size"
                   :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                 >
                   删除
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-dropdown>
+            <!-- <el-dropdown>
               <el-button
                 class="ml-3 mt-[2px]"
                 link
                 type="primary"
                 :size="size"
                 :icon="useRenderIcon(More)"
-                @click="handleUpdate(row)"
               />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -154,6 +175,7 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
                     >
                       菜单权限
                     </el-button>
@@ -165,13 +187,14 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Database)"
+                      @click="handleDatabase"
                     >
                       数据权限
                     </el-button>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
-            </el-dropdown>
+            </el-dropdown> -->
           </template>
         </pure-table>
       </template>
@@ -183,4 +206,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>

src/views/system/role/utils/hook.tsx

@@ -1,9 +1,13 @@
 import dayjs from "dayjs";
+import editForm from "../form.vue";
 import { message } from "@/utils/message";
 import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type FormItemProps } from "../utils/types";
 import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";
 
 export function useRole() {
   const form = reactive({
@@ -11,9 +15,11 @@ export function useRole() {
     code: "",
     status: ""
   });
+  const formRef = ref();
   const dataList = ref([]);
   const loading = ref(true);
   const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -21,19 +27,6 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    // {
-    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-    //   type: "selection",
-    //   width: 55,
-    //   align: "left",
-    //   fixed: "left"
-    // },
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
     {
       label: "角色编号",
       prop: "id",
@@ -49,25 +42,6 @@ export function useRole() {
       prop: "code",
       minWidth: 150
     },
-    {
-      label: "角色类型",
-      prop: "type",
-      minWidth: 150,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.type === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.type === 1 ? "内置" : "自定义"}
-        </el-tag>
-      )
-    },
-    {
-      label: "显示顺序",
-      prop: "sort",
-      minWidth: 100
-    },
     {
       label: "状态",
       minWidth: 130,
@@ -78,13 +52,19 @@ export function useRole() {
           v-model={scope.row.status}
           active-value={1}
           inactive-value={0}
-          active-text="已开启"
+          active-text="已启用"
-          inactive-text="已关闭"
+          inactive-text="已停用"
           inline-prompt
+          style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
       )
     },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
     {
       label: "创建时间",
       minWidth: 180,
@@ -95,19 +75,19 @@ export function useRole() {
     {
       label: "操作",
       fixed: "right",
-      width: 180,
+      width: 240,
       slot: "operation"
     }
   ];
-  const buttonClass = computed(() => {
+  // const buttonClass = computed(() => {
-    return [
+  //   return [
-      "!h-[20px]",
+  //     "!h-[20px]",
-      "reset-margin",
+  //     "reset-margin",
-      "!text-gray-500",
+  //     "!text-gray-500",
-      "dark:!text-white",
+  //     "dark:!text-white",
-      "dark:hover:!text-primary"
+  //     "dark:hover:!text-primary"
-    ];
+  //   ];
-  });
+  // });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -115,7 +95,7 @@ export function useRole() {
         row.status === 0 ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
         row.name
-      }</strong>角色吗?`,
+      }</strong>吗?`,
       "系统提示",
       {
         confirmButtonText: "确定",
@@ -141,7 +121,7 @@ export function useRole() {
               loading: false
             }
           );
-          message("已成功修改角色状态", {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
             type: "success"
           });
         }, 300);
@@ -151,12 +131,9 @@ export function useRole() {
       });
   }
 
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
   function handleDelete(row) {
-    console.log(row);
+    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
   }
 
   function handleSizeChange(val: number) {
@@ -173,9 +150,12 @@ export function useRole() {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getRoleList();
+    const { data } = await getRoleList(toRaw(form));
     dataList.value = data.list;
     pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
     setTimeout(() => {
       loading.value = false;
     }, 500);
@@ -187,6 +167,56 @@ export function useRole() {
     onSearch();
   };
 
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}角色`,
+      props: {
+        formInline: {
+          name: row?.name ?? "",
+          code: row?.code ?? "",
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 菜单权限 */
+  function handleMenu() {
+    message("等菜单管理页面开发后完善");
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
   onMounted(() => {
     onSearch();
   });
@@ -197,11 +227,13 @@ export function useRole() {
     columns,
     dataList,
     pagination,
-    buttonClass,
+    // buttonClass,
     onSearch,
     resetForm,
-    handleUpdate,
+    openDialog,
+    handleMenu,
     handleDelete,
+    // handleDatabase,
     handleSizeChange,
     handleCurrentChange,
     handleSelectionChange

src/views/system/role/utils/rule.ts

@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+});

src/views/system/role/utils/types.ts

@@ -0,0 +1,15 @@
+// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
+
+interface FormItemProps {
+  /** 角色名称 */
+  name: string;
+  /** 角色编号 */
+  code: string;
+  /** 备注 */
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };

src/views/system/user/index.vue

@@ -44,7 +44,7 @@ const {
         ref="formRef"
         :inline="true"
         :model="form"
-        class="bg-bg_color w-[99/100] pl-8 pt-4"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
@@ -186,4 +186,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>