feat: add EpTableProBar component

mock/system.ts

@@ -60,7 +60,7 @@ export default [
         code: 0,
         data: [
           {
-            name: "pure-admin",
+            name: "杭州总公司",
             parentId: 0,
             sort: 0,
             leaderUserId: 1,
@@ -72,7 +72,7 @@ export default [
             remark: "备注、备注、备注、备注、备注、备注、备注"
           },
           {
-            name: "深圳总公司",
+            name: "郑州分公司",
             parentId: 100,
             sort: 1,
             leaderUserId: 104,
@@ -108,7 +108,7 @@ export default [
             remark: "备注、备注、备注、备注、备注、备注、备注"
           },
           {
-            name: "长沙分公司",
+            name: "深圳分公司",
             parentId: 100,
             sort: 2,
             leaderUserId: null,

package.json

@@ -75,6 +75,7 @@
     "@iconify-icons/fa": "^1.2.2",
     "@iconify-icons/fa-solid": "^1.2.2",
     "@iconify-icons/fluent": "^1.2.5",
+    "@iconify-icons/mdi": "^1.2.8",
     "@iconify-icons/ri": "^1.2.1",
     "@iconify-icons/uil": "^1.2.1",
     "@iconify/vue": "^3.2.1",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   "@iconify-icons/fa": ^1.2.2
   "@iconify-icons/fa-solid": ^1.2.2
   "@iconify-icons/fluent": ^1.2.5
+  "@iconify-icons/mdi": ^1.2.8
   "@iconify-icons/ri": ^1.2.1
   "@iconify-icons/uil": ^1.2.1
   "@iconify/vue": ^3.2.1
@@ -154,6 +155,7 @@ devDependencies:
   "@iconify-icons/fa": 1.2.2
   "@iconify-icons/fa-solid": 1.2.2
   "@iconify-icons/fluent": 1.2.5
+  "@iconify-icons/mdi": 1.2.8
   "@iconify-icons/ri": 1.2.1
   "@iconify-icons/uil": 1.2.1
   "@iconify/vue": 3.2.1_vue@3.2.32
@@ -997,6 +999,15 @@ packages:
       "@iconify/types": 1.1.0
     dev: true
 
+  /@iconify-icons/mdi/1.2.8:
+    resolution:
+      {
+        integrity: sha512-yG/fH+6PGTTPhqcgdk0NZ465pDIJebdxWDTPPe9P2Fd76bxaoCIcMQSqv/V9g5ADrELdrK1CmHnro+/jd42/0A==
+      }
+    dependencies:
+      "@iconify/types": 1.1.0
+    dev: true
+
   /@iconify-icons/ri/1.2.1:
     resolution:
       {

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -112,6 +112,12 @@ import FlUser from "@iconify-icons/fluent/person-12-filled";
 addIcon("peoples", Peoples);
 addIcon("flUser", FlUser);
 
+// Material Design Icons
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
+addIcon("expand", Expand);
+addIcon("unExpand", UnExpand);
+
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIcon",

src/components/ReTable/README.md

@@ -0,0 +1,16 @@
+## 一款基于`element-plus`表格封装的`table-crud`组件库，采用`tsx`语法编写，通过一些灵活的配置项即可实现增删改查
+
+### wait todo
+
+- 搜索组件
+- 表格组件
+- 弹框组件
+- form 组件
+
+### completed
+
+- 操作栏组件
+
+目前只完成了操作栏组件，后续有时间慢慢完善对应组件，因为作者比较忙，暂无具体计划完成时间，忘谅解，当然非常欢迎 pr，等这些组件全部完成后，我会单独抽离成`npm`包的形式发布。
+
+注意：该组件库为了快速成型，内部依赖了`windicss`。

src/components/ReTable/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import epTableProBar from "./src/bar";
+
+export const EpTableProBar = Object.assign(epTableProBar, {
+  install(app: App) {
+    app.component(epTableProBar.name, epTableProBar);
+  }
+});

src/components/ReTable/src/bar.tsx

@@ -0,0 +1,216 @@
+import { emitter } from "/@/utils/mitt";
+import { IconifyIconOffline } from "../../ReIcon";
+import { defineComponent, ref, computed, PropType } from "vue";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+
+export const loadingSvg = `
+  <path class="path" d="
+    M 30 15
+    L 28 17
+    M 25.61 25.61
+    A 15 15, 0, 0, 1, 15 30
+    A 15 15, 0, 1, 1, 27.99 7.5
+    L 15 15
+  "
+    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+  />
+`;
+
+const props = {
+  // 头部最左边的标题
+  title: {
+    type: String,
+    default: "列表"
+  },
+  // 表格数据
+  dataList: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可
+  tableRef: {
+    type: Object as PropType<any>,
+    default() {
+      return {};
+    }
+  },
+  // 是否显示加载动画，默认false 不加载
+  loading: {
+    type: Boolean,
+    default: false
+  }
+};
+
+export default defineComponent({
+  name: "epTableProBar",
+  props,
+  emits: ["refresh"],
+  setup(props, { emit, slots }) {
+    const buttonRef = ref();
+    const checkList = ref([]);
+    const currentWidth = ref(0);
+    const size = ref("default");
+    const isExpandAll = ref(true);
+
+    const getDropdownItemStyle = computed(() => {
+      return s => {
+        return {
+          background:
+            s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+          color: s === size.value ? "#f4f4f5" : "#000"
+        };
+      };
+    });
+
+    function onExpand() {
+      isExpandAll.value = !isExpandAll.value;
+      toggleRowExpansionAll(props.dataList, isExpandAll.value);
+    }
+
+    function toggleRowExpansionAll(data, isExpansion) {
+      data.forEach(item => {
+        props.tableRef.toggleRowExpansion(item, isExpansion);
+        if (item.children !== undefined && item.children !== null) {
+          toggleRowExpansionAll(item.children, isExpansion);
+        }
+      });
+    }
+
+    // 监听容器
+    emitter.on("resize", ({ detail }) => {
+      const { width } = detail;
+      currentWidth.value = width;
+    });
+
+    const dropdown = {
+      dropdown: () => (
+        <el-dropdown-menu class="translation">
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("large")}
+            onClick={() => (size.value = "large")}
+          >
+            松散
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("default")}
+            onClick={() => (size.value = "default")}
+          >
+            默认
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("small")}
+            onClick={() => (size.value = "small")}
+          >
+            紧凑
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      )
+    };
+
+    const reference = {
+      reference: () => (
+        <IconifyIconOffline
+          class="cursor-pointer outline-none"
+          icon="setting"
+          width="16"
+          color="#606266"
+          onMouseover={e => (buttonRef.value = e.currentTarget)}
+        />
+      )
+    };
+
+    return () => (
+      <>
+        <div
+          v-resize
+          class="w-99/100 mt-6 p-2 bg-white"
+          v-loading={props.loading}
+          element-loading-svg={loadingSvg}
+          element-loading-svg-view-box="-10, -10, 50, 50"
+        >
+          <div class="flex justify-between w-full h-60px p-4">
+            <p class="font-bold">
+              {currentWidth.value > 390 ? props.title : "列表"}
+            </p>
+            <div class="flex items-center justify-around">
+              <div class="flex mr-4">{slots?.buttons()}</div>
+              {props.tableRef?.size ? (
+                <>
+                  <el-tooltip
+                    effect="dark"
+                    content={isExpandAll.value ? "折叠" : "展开"}
+                    placement="top"
+                  >
+                    <IconifyIconOffline
+                      class="cursor-pointer outline-none"
+                      icon={isExpandAll.value ? "unExpand" : "expand"}
+                      width="16"
+                      color="#606266"
+                      onClick={() => onExpand()}
+                    />
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                </>
+              ) : undefined}
+              <el-tooltip effect="dark" content="刷新" placement="top">
+                <IconifyIconOffline
+                  class="cursor-pointer outline-none"
+                  icon="refresh-right"
+                  width="16"
+                  color="#606266"
+                  onClick={() => emit("refresh")}
+                />
+              </el-tooltip>
+              <el-divider direction="vertical" />
+
+              <el-tooltip effect="dark" content="密度" placement="top">
+                <el-dropdown v-slots={dropdown} trigger="click">
+                  <IconifyIconOffline
+                    class="cursor-pointer outline-none"
+                    icon="density"
+                    width="16"
+                    color="#606266"
+                  />
+                </el-dropdown>
+              </el-tooltip>
+              <el-divider direction="vertical" />
+
+              <el-popover v-slots={reference} width="200" trigger="click">
+                <el-checkbox-group v-model={checkList.value}>
+                  <el-checkbox label="序号列" />
+                  <el-checkbox label="勾选列" />
+                </el-checkbox-group>
+              </el-popover>
+            </div>
+
+            <el-tooltip
+              popper-options={{
+                modifiers: [
+                  {
+                    name: "computeStyles",
+                    options: {
+                      adaptive: false,
+                      enabled: false
+                    }
+                  }
+                ]
+              }}
+              placement="top"
+              virtual-ref={buttonRef.value}
+              virtual-triggering
+              trigger="hover"
+              content="列设置"
+            />
+          </div>
+          {props.dataList.length > 0 ? (
+            slots.default({ size: size.value, checkList: checkList.value })
+          ) : (
+            <el-empty description="暂无数据" />
+          )}
+        </div>
+      </>
+    );
+  }
+});

src/views/system/dept/index.vue

@@ -6,36 +6,22 @@ export default {
 
 <script setup lang="ts">
 import dayjs from "dayjs";
-import { loadingSvg } from "../load";
 import { handleTree } from "/@/utils/tree";
 import { getDeptList } from "/@/api/system";
 import { FormInstance } from "element-plus";
-import { reactive, ref, onMounted, computed } from "vue";
+import { reactive, ref, onMounted } from "vue";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+import { EpTableProBar } from "/@/components/ReTable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const form = reactive({
   user: "",
   status: ""
 });
-const buttonRef = ref();
+let dataList = ref([]);
-const tooltipRef = ref();
-let treeData = ref([]);
-let checkList = ref([]);
 let loading = ref(true);
-let visible = ref(false);
-let size = ref("default");
 
 const formRef = ref<FormInstance>();
-
+const tableRef = ref();
-const getDropdownItemStyle = computed(() => {
-  return s => {
-    return {
-      background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
-      color: s === size.value ? "#f4f4f5" : "#000"
-    };
-  };
-});
 
 function handleUpdate(row) {
   console.log(row);
@@ -45,10 +31,6 @@ function handleDelete(row) {
   console.log(row);
 }
 
-function onCheckChange(val) {
-  console.log("onCheckChange", val);
-}
-
 function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
 }
@@ -56,7 +38,7 @@ function handleSelectionChange(val) {
 async function onSearch() {
   loading.value = true;
   let { data } = await getDeptList();
-  treeData.value = handleTree(data);
+  dataList.value = handleTree(data);
   setTimeout(() => {
     loading.value = false;
   }, 500);
@@ -105,110 +87,27 @@ onMounted(() => {
       </el-form-item>
     </el-form>
 
-    <div
+    <EpTableProBar
-      class="w-99/100 mt-6 p-2 bg-white"
+      title="部门列表"
-      v-loading="loading"
+      :loading="loading"
-      :element-loading-svg="loadingSvg"
+      :tableRef="tableRef"
-      element-loading-svg-view-box="-10, -10, 50, 50"
+      :dataList="dataList"
+      @refresh="onSearch"
     >
-      <div class="flex justify-between w-full h-60px p-4">
+      <template #buttons>
-        <p class="font-bold">部门列表</p>
+        <el-button type="primary" :icon="useRenderIcon('add')">
-        <div class="w-220px flex items-center justify-around">
+          新增部门
-          <el-button type="primary" :icon="useRenderIcon('add')"
+        </el-button>
-            >新增部门</el-button
-          >
-          <el-tooltip effect="dark" content="刷新" placement="top">
-            <IconifyIconOffline
-              class="cursor-pointer outline-none ml-4"
-              icon="refresh-right"
-              width="20"
-              color="#606266"
-              @click="onSearch"
-            />
-          </el-tooltip>
-          <el-divider direction="vertical" />
-
-          <el-tooltip effect="dark" content="密度" placement="top">
-            <el-dropdown id="header-translation" trigger="click">
-              <IconifyIconOffline
-                class="cursor-pointer outline-none"
-                icon="density"
-                width="20"
-                color="#606266"
-              />
-              <template #dropdown>
-                <el-dropdown-menu class="translation">
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('large')"
-                    @click="size = 'large'"
-                  >
-                    松散
-                  </el-dropdown-item>
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('default')"
-                    @click="size = 'default'"
-                  >
-                    默认
-                  </el-dropdown-item>
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('small')"
-                    @click="size = 'small'"
-                  >
-                    紧凑
-                  </el-dropdown-item>
-                </el-dropdown-menu>
       </template>
-            </el-dropdown>
+      <template v-slot="{ size, checkList }">
-          </el-tooltip>
-          <el-divider direction="vertical" />
-
-          <el-popover :width="200" trigger="click">
-            <template #reference>
-              <IconifyIconOffline
-                class="cursor-pointer outline-none"
-                icon="setting"
-                width="20"
-                color="#606266"
-                @mouseover="e => (buttonRef = e.currentTarget)"
-                @mouseenter="visible = true"
-                @mouseleave="visible = false"
-              />
-            </template>
-            <el-checkbox-group v-model="checkList" @change="onCheckChange">
-              <el-checkbox label="序号列" />
-              <el-checkbox label="勾选列" />
-            </el-checkbox-group>
-          </el-popover>
-        </div>
-
-        <el-tooltip
-          ref="tooltipRef"
-          v-model:visible="visible"
-          :popper-options="{
-            modifiers: [
-              {
-                name: 'computeStyles',
-                options: {
-                  adaptive: false,
-                  enabled: false
-                }
-              }
-            ]
-          }"
-          placement="top"
-          :virtual-ref="buttonRef"
-          virtual-triggering
-          trigger="click"
-          content="列设置"
-        />
-      </div>
         <el-table
+          ref="tableRef"
           border
           row-key="id"
           table-layout="auto"
           default-expand-all
           :size="size"
-        :data="treeData"
+          :data="dataList"
           :header-cell-style="{ background: '#fafafa', color: '#606266' }"
           @selection-change="handleSelectionChange"
         >
@@ -249,8 +148,18 @@ onMounted(() => {
               }}</span>
             </template>
           </el-table-column>
-        <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column
-        <el-table-column label="操作" align="center" width="130">
+            label="备注"
+            align="center"
+            prop="remark"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            fixed="right"
+            label="操作"
+            align="center"
+            width="130"
+          >
             <template #default="scope">
               <el-button type="text" @click="handleUpdate(scope.row)"
                 >修改</el-button
@@ -265,6 +174,7 @@ onMounted(() => {
             </template>
           </el-table-column>
         </el-table>
-    </div>
+      </template>
+    </EpTableProBar>
   </div>
 </template>

src/views/system/load.ts

@@ -1,10 +0,0 @@
-export const loadingSvg = `
-        <path class="path" d="
-          M 30 15
-          L 28 17
-          M 25.61 25.61
-          A 15 15, 0, 0, 1, 15 30
-          A 15 15, 0, 1, 1, 27.99 7.5
-          L 15 15
-        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
-      `;

src/views/system/role/index.vue

@@ -6,13 +6,12 @@ export default {
 
 <script setup lang="ts">
 import dayjs from "dayjs";
-import { loadingSvg } from "../load";
 import { getRoleList } from "/@/api/system";
 import { FormInstance } from "element-plus";
 import { ElMessageBox } from "element-plus";
+import { reactive, ref, onMounted } from "vue";
+import { EpTableProBar } from "/@/components/ReTable";
 import { Switch, message } from "@pureadmin/components";
-import { reactive, ref, onMounted, computed } from "vue";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const form = reactive({
@@ -20,28 +19,14 @@ const form = reactive({
   user: "",
   status: ""
 });
-const buttonRef = ref();
+let dataList = ref([]);
-const tooltipRef = ref();
-let roleList = ref([]);
 let pageSize = ref(10);
 let totalPage = ref(0);
-let checkList = ref([]);
 let loading = ref(true);
-let visible = ref(false);
-let size = ref("default");
 let switchLoadMap = ref({});
 
 const formRef = ref<FormInstance>();
 
-const getDropdownItemStyle = computed(() => {
-  return s => {
-    return {
-      background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
-      color: s === size.value ? "#f4f4f5" : "#000"
-    };
-  };
-});
-
 function handleUpdate(row) {
   console.log(row);
 }
@@ -58,10 +43,6 @@ function handleSizeChange(val: number) {
   console.log(`${val} items per page`);
 }
 
-function onCheckChange(val) {
-  console.log("onCheckChange", val);
-}
-
 function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
 }
@@ -105,7 +86,7 @@ function onChange(checked, { $index, row }) {
 async function onSearch() {
   loading.value = true;
   let { data } = await getRoleList();
-  roleList.value = data.list;
+  dataList.value = data.list;
   totalPage.value = data.total;
   setTimeout(() => {
     loading.value = false;
@@ -158,114 +139,23 @@ onMounted(() => {
       </el-form-item>
     </el-form>
 
-    <div
+    <EpTableProBar
-      class="w-99/100 mt-6 p-2 bg-white"
+      title="角色列表"
-      v-loading="loading"
+      :loading="loading"
-      :element-loading-svg="loadingSvg"
+      :dataList="dataList"
-      element-loading-svg-view-box="-10, -10, 50, 50"
+      @refresh="onSearch"
     >
-      <div class="flex justify-between w-full h-60px p-4">
+      <template #buttons>
-        <p class="font-bold">角色列表</p>
-        <div class="w-220px flex items-center justify-around">
         <el-button type="primary" :icon="useRenderIcon('add')"
           >新增角色</el-button
         >
-          <!-- <el-button type="success" :icon="useRenderIcon('import')"
-            >导入</el-button
-          >
-          <el-button type="warning" :icon="useRenderIcon('export')"
-            >导出</el-button
-          > -->
-          <el-tooltip effect="dark" content="刷新" placement="top">
-            <IconifyIconOffline
-              class="cursor-pointer outline-none ml-4"
-              icon="refresh-right"
-              width="20"
-              color="#606266"
-              @click="onSearch"
-            />
-          </el-tooltip>
-          <el-divider direction="vertical" />
-
-          <el-tooltip effect="dark" content="密度" placement="top">
-            <el-dropdown id="header-translation" trigger="click">
-              <IconifyIconOffline
-                class="cursor-pointer outline-none"
-                icon="density"
-                width="20"
-                color="#606266"
-              />
-              <template #dropdown>
-                <el-dropdown-menu class="translation">
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('large')"
-                    @click="size = 'large'"
-                  >
-                    松散
-                  </el-dropdown-item>
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('default')"
-                    @click="size = 'default'"
-                  >
-                    默认
-                  </el-dropdown-item>
-                  <el-dropdown-item
-                    :style="getDropdownItemStyle('small')"
-                    @click="size = 'small'"
-                  >
-                    紧凑
-                  </el-dropdown-item>
-                </el-dropdown-menu>
       </template>
-            </el-dropdown>
+      <template v-slot="{ size, checkList }">
-          </el-tooltip>
-          <el-divider direction="vertical" />
-
-          <el-popover :width="200" trigger="click">
-            <template #reference>
-              <IconifyIconOffline
-                class="cursor-pointer outline-none"
-                icon="setting"
-                width="20"
-                color="#606266"
-                @mouseover="e => (buttonRef = e.currentTarget)"
-                @mouseenter="visible = true"
-                @mouseleave="visible = false"
-              />
-            </template>
-            <el-checkbox-group v-model="checkList" @change="onCheckChange">
-              <el-checkbox label="序号列" />
-              <el-checkbox label="勾选列" />
-            </el-checkbox-group>
-          </el-popover>
-        </div>
-
-        <el-tooltip
-          ref="tooltipRef"
-          v-model:visible="visible"
-          :popper-options="{
-            modifiers: [
-              {
-                name: 'computeStyles',
-                options: {
-                  adaptive: false,
-                  enabled: false
-                }
-              }
-            ]
-          }"
-          placement="top"
-          :virtual-ref="buttonRef"
-          virtual-triggering
-          trigger="click"
-          content="列设置"
-        />
-      </div>
         <el-table
           border
           table-layout="auto"
           :size="size"
-        :data="roleList"
+          :data="dataList"
           :header-cell-style="{ background: '#fafafa', color: '#606266' }"
           @selection-change="handleSelectionChange"
         >
@@ -280,7 +170,7 @@ onMounted(() => {
             type="index"
             label="序号"
             align="center"
-          width="60"
+            width="70"
           />
           <el-table-column label="角色编号" align="center" prop="id" />
           <el-table-column label="角色编码" align="center" prop="code" />
@@ -312,7 +202,12 @@ onMounted(() => {
               }}</span>
             </template>
           </el-table-column>
-        <el-table-column label="操作" width="130" align="center">
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="130"
+            align="center"
+          >
             <template #default="scope">
               <el-button type="text" @click="handleUpdate(scope.row)"
                 >修改</el-button
@@ -338,6 +233,7 @@ onMounted(() => {
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
-    </div>
+      </template>
+    </EpTableProBar>
   </div>
 </template>