From 9fa1d9d2ea93073d3857025ea372cbb615757f70 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 22 Jun 2022 20:16:33 +0800
Subject: [PATCH] perf: use `@pureadmin/table` replace `el-table`

---
 src/views/system/dept/columns.tsx |  66 ++++++++
 src/views/system/dept/index.vue   | 115 +++++---------
 src/views/system/role/columns.tsx |   4 +-
 src/views/system/role/index.vue   |   2 +-
 src/views/system/user/columns.tsx | 130 ++++++++++++++++
 src/views/system/user/index.vue   | 246 ++++++++----------------------
 6 files changed, 301 insertions(+), 262 deletions(-)
 create mode 100644 src/views/system/dept/columns.tsx
 create mode 100644 src/views/system/user/columns.tsx

diff --git a/src/views/system/dept/columns.tsx b/src/views/system/dept/columns.tsx
new file mode 100644
index 000000000..fb891ff80
--- /dev/null
+++ b/src/views/system/dept/columns.tsx
@@ -0,0 +1,66 @@
+import { ref } from "vue";
+import dayjs from "dayjs";
+
+export function useColumns() {
+  const columns = ref([
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 60,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      width: 60
+    },
+    {
+      label: "状态",
+      prop: "status",
+      width: 80,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.status === 1 ? "danger" : "success"}
+          effect="plain"
+        >
+          {row.status === 0 ? "关闭" : "开启"}
+        </el-tag>
+      )
+    },
+    {
+      label: "创建时间",
+      width: 180,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 140,
+      slot: "operation"
+    }
+  ]);
+
+  return {
+    columns
+  };
+}
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 5eaebe318..9cc96b830 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
+import { useColumns } from "./columns";
 import { handleTree } from "/@/utils/tree";
 import { getDeptList } from "/@/api/system";
 import { FormInstance } from "element-plus";
+import { PureTable } from "@pureadmin/table";
 import { reactive, ref, onMounted } from "vue";
 import { EpTableProBar } from "/@/components/ReTable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
@@ -17,6 +18,7 @@ const form = reactive({
 });
 let dataList = ref([]);
 let loading = ref(true);
+const { columns } = useColumns();
 
 const formRef = ref<FormInstance>();
 const tableRef = ref();
@@ -88,7 +90,7 @@ onMounted(() => {
     <EpTableProBar
       title="部门列表"
       :loading="loading"
-      :tableRef="tableRef"
+      :tableRef="tableRef?.getTableRef()"
       :dataList="dataList"
       @refresh="onSearch"
     >
@@ -98,94 +100,47 @@ onMounted(() => {
         </el-button>
       </template>
       <template v-slot="{ size, checkList }">
-        <el-table
+        <PureTable
           ref="tableRef"
           border
+          align="center"
           row-key="id"
           table-layout="auto"
           default-expand-all
           :size="size"
           :data="dataList"
+          :columns="columns"
+          :checkList="checkList"
           :header-cell-style="{ background: '#fafafa', color: '#606266' }"
           @selection-change="handleSelectionChange"
         >
-          <el-table-column
-            v-if="checkList.includes('勾选列')"
-            type="selection"
-            align="center"
-            width="55"
-          />
-          <el-table-column
-            v-if="checkList.includes('序号列')"
-            type="index"
-            align="center"
-            label="序号"
-            width="60"
-          />
-          <el-table-column label="部门名称" prop="name" width="180" />
-          <el-table-column label="排序" align="center" prop="sort" width="60" />
-          <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"
-              >
-                {{ scope.row.status === 0 ? "关闭" : "开启" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="创建时间"
-            align="center"
-            width="180"
-            prop="createTime"
-            :formatter="
-              ({ createTime }) => {
-                return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
-              }
-            "
-          />
-          <el-table-column
-            label="备注"
-            align="center"
-            prop="remark"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            fixed="right"
-            label="操作"
-            align="center"
-            width="140"
-          >
-            <template #default="scope">
-              <el-button
-                class="reset-margin"
-                link
-                type="primary"
-                :size="size"
-                @click="handleUpdate(scope.row)"
-                :icon="useRenderIcon('edits')"
-              >
-                修改
-              </el-button>
-              <el-popconfirm title="是否确认删除?">
-                <template #reference>
-                  <el-button
-                    class="reset-margin"
-                    link
-                    type="primary"
-                    :size="size"
-                    :icon="useRenderIcon('delete')"
-                    @click="handleDelete(scope.row)"
-                  >
-                    删除
-                  </el-button>
-                </template>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon('edits')"
+            >
+              修改
+            </el-button>
+            <el-popconfirm title="是否确认删除?">
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon('delete')"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </PureTable>
       </template>
     </EpTableProBar>
   </div>
diff --git a/src/views/system/role/columns.tsx b/src/views/system/role/columns.tsx
index 3babbca2f..020cf13ac 100644
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -66,7 +66,7 @@ export function useColumns() {
     },
     {
       label: "创建时间",
-      width: "180",
+      width: 180,
       prop: "createTime",
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -74,7 +74,7 @@ export function useColumns() {
     {
       label: "操作",
       fixed: "right",
-      width: "180",
+      width: 180,
       slot: "operation"
     }
   ]);
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 231c03009..5f9186ea4 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="tsx">
+<script setup lang="ts">
 import { useColumns } from "./columns";
 import { getRoleList } from "/@/api/system";
 import { PureTable } from "@pureadmin/table";
diff --git a/src/views/system/user/columns.tsx b/src/views/system/user/columns.tsx
new file mode 100644
index 000000000..54bf398a5
--- /dev/null
+++ b/src/views/system/user/columns.tsx
@@ -0,0 +1,130 @@
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { ElMessageBox } from "element-plus";
+import { Switch, message } from "@pureadmin/components";
+
+export function useColumns() {
+  const switchLoadMap = ref({});
+
+  const columns = ref([
+    {
+      type: "selection",
+      width: 55,
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "用户编号",
+      prop: "id"
+    },
+    {
+      label: "用户名称",
+      prop: "username"
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname"
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.sex === 1 ? "danger" : ""}
+          effect="plain"
+        >
+          {row.sex === 1 ? "女" : "男"}
+        </el-tag>
+      )
+    },
+    {
+      label: "部门",
+      prop: "dept",
+      formatter: ({ dept }) => dept.name
+    },
+    {
+      label: "手机号码",
+      prop: "mobile"
+    },
+    {
+      label: "状态",
+      prop: "status",
+      width: 130,
+      cellRenderer: scope => (
+        <Switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model:checked={scope.row.status}
+          checkedValue={1}
+          unCheckedValue={0}
+          checked-children="已开启"
+          un-checked-children="已关闭"
+          onChange={() => onChange(scope)}
+        />
+      )
+    },
+    {
+      label: "创建时间",
+      width: 180,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 180,
+      slot: "operation"
+    }
+  ]);
+
+  function onChange({ row, index }) {
+    ElMessageBox.confirm(
+      `确认要<strong>${
+        row.status === 0 ? "停用" : "启用"
+      }</strong><strong style='color:var(--el-color-primary)'>${
+        row.username
+      }</strong>用户吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: true
+          }
+        );
+        setTimeout(() => {
+          switchLoadMap.value[index] = Object.assign(
+            {},
+            switchLoadMap.value[index],
+            {
+              loading: false
+            }
+          );
+          message.success("已成功修改用户状态");
+        }, 300);
+      })
+      .catch(() => {
+        row.status === 0 ? (row.status = 1) : (row.status = 0);
+      });
+  }
+
+  return {
+    columns
+  };
+}
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 2ac753922..c90452bf3 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
 import tree from "./tree.vue";
+import { useColumns } from "./columns";
 import { getUserList } from "/@/api/system";
+import { PureTable } from "@pureadmin/table";
 import { reactive, ref, onMounted } from "vue";
 import { EpTableProBar } from "/@/components/ReTable";
-import { Switch, message } from "@pureadmin/components";
-import { ElMessageBox, type FormInstance } from "element-plus";
+import { type FormInstance } from "element-plus";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 defineOptions({
@@ -21,7 +21,7 @@ let dataList = ref([]);
 let pageSize = ref(10);
 let totalPage = ref(0);
 let loading = ref(true);
-let switchLoadMap = ref({});
+const { columns } = useColumns();
 
 const formRef = ref<FormInstance>();
 
@@ -45,46 +45,6 @@ function handleSelectionChange(val) {
   console.log("handleSelectionChange", val);
 }
 
-function onChange(checked, { $index, row }) {
-  ElMessageBox.confirm(
-    `确认要<strong>${
-      row.status === 0 ? "停用" : "启用"
-    }</strong><strong style='color:var(--el-color-primary)'>${
-      row.username
-    }</strong>用户吗?`,
-    "系统提示",
-    {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-      dangerouslyUseHTMLString: true,
-      draggable: true
-    }
-  )
-    .then(() => {
-      switchLoadMap.value[$index] = Object.assign(
-        {},
-        switchLoadMap.value[$index],
-        {
-          loading: true
-        }
-      );
-      setTimeout(() => {
-        switchLoadMap.value[$index] = Object.assign(
-          {},
-          switchLoadMap.value[$index],
-          {
-            loading: false
-          }
-        );
-        message.success("已成功修改用户状态");
-      }, 300);
-    })
-    .catch(() => {
-      row.status === 0 ? (row.status = 1) : (row.status = 0);
-    });
-}
-
 async function onSearch() {
   loading.value = true;
   let { data } = await getUserList();
@@ -166,152 +126,80 @@ onMounted(() => {
           </el-button>
         </template>
         <template v-slot="{ size, checkList }">
-          <el-table
+          <PureTable
             border
+            align="center"
             table-layout="auto"
             :size="size"
             :data="dataList"
+            :columns="columns"
+            :checkList="checkList"
             :header-cell-style="{ background: '#fafafa', color: '#606266' }"
             @selection-change="handleSelectionChange"
           >
-            <el-table-column
-              v-if="checkList.includes('勾选列')"
-              type="selection"
-              align="center"
-              width="55"
-            />
-            <el-table-column
-              v-if="checkList.includes('序号列')"
-              type="index"
-              label="序号"
-              align="center"
-              width="70"
-            />
-            <el-table-column label="用户编号" align="center" prop="id" />
-            <el-table-column label="用户名称" align="center" prop="username" />
-            <el-table-column label="用户昵称" align="center" prop="nickname" />
-            <el-table-column label="性别" align="center" prop="sex">
-              <template #default="scope">
-                <el-tag
-                  :size="size"
-                  :type="scope.row.sex === 1 ? 'danger' : ''"
-                  effect="plain"
-                >
-                  {{ scope.row.sex === 1 ? "女" : "男" }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="部门"
-              align="center"
-              prop="dept"
-              :formatter="
-                ({ dept }) => {
-                  return dept.name;
-                }
-              "
-            />
-            <el-table-column label="手机号码" align="center" prop="mobile" />
-            <el-table-column
-              label="状态"
-              align="center"
-              width="130"
-              prop="status"
-            >
-              <template #default="scope">
-                <Switch
-                  :size="size === 'small' ? 'small' : 'default'"
-                  :loading="switchLoadMap[scope.$index]?.loading"
-                  v-model:checked="scope.row.status"
-                  :checkedValue="1"
-                  :unCheckedValue="0"
-                  checked-children="已开启"
-                  un-checked-children="已关闭"
-                  @change="checked => onChange(checked, scope)"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="创建时间"
-              align="center"
-              width="180"
-              prop="createTime"
-              :formatter="
-                ({ createTime }) => {
-                  return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
-                }
-              "
-            />
-            <el-table-column
-              fixed="right"
-              label="操作"
-              width="180"
-              align="center"
-            >
-              <template #default="scope">
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  @click="handleUpdate(scope.row)"
-                  :icon="useRenderIcon('edits')"
-                >
-                  修改
-                </el-button>
-                <el-popconfirm title="是否确认删除?">
-                  <template #reference>
-                    <el-button
-                      class="reset-margin"
-                      link
-                      type="primary"
-                      :size="size"
-                      :icon="useRenderIcon('delete')"
-                      @click="handleDelete(scope.row)"
-                    >
-                      删除
-                    </el-button>
-                  </template>
-                </el-popconfirm>
-                <el-dropdown>
+            <template #operation="{ row }">
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                @click="handleUpdate(row)"
+                :icon="useRenderIcon('edits')"
+              >
+                修改
+              </el-button>
+              <el-popconfirm title="是否确认删除?">
+                <template #reference>
                   <el-button
-                    class="ml-3"
+                    class="reset-margin"
                     link
                     type="primary"
                     :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"
-                          link
-                          type="primary"
-                          :size="size"
-                          :icon="useRenderIcon('password')"
-                        >
-                          重置密码
-                        </el-button>
-                      </el-dropdown-item>
-                      <el-dropdown-item>
-                        <el-button
-                          class="reset-margin !h-20px !text-gray-500"
-                          link
-                          type="primary"
-                          :size="size"
-                          :icon="useRenderIcon('role')"
-                        >
-                          分配角色
-                        </el-button>
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </template>
-            </el-table-column>
-          </el-table>
+                    :icon="useRenderIcon('delete')"
+                    @click="handleDelete(row)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+              <el-dropdown>
+                <el-button
+                  class="ml-3"
+                  link
+                  type="primary"
+                  :size="size"
+                  @click="handleUpdate(row)"
+                  :icon="useRenderIcon('more')"
+                />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        class="reset-margin !h-20px !text-gray-500"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon('password')"
+                      >
+                        重置密码
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button
+                        class="reset-margin !h-20px !text-gray-500"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon('role')"
+                      >
+                        分配角色
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </PureTable>
           <el-pagination
             class="flex justify-end mt-4"
             :small="size === 'small' ? true : false"