refactor: system pages (#399)

* refactor: system pages

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

* chore: update

src/views/system/user/hook.tsx

@@ -1,11 +1,25 @@
-import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
+import { getUserList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { type PaginationProps } from "@pureadmin/table";
+import { reactive, ref, computed, onMounted } from "vue";
 
-export function useColumns() {
+export function useUser() {
+  const form = reactive({
+    username: "",
+    mobile: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
   const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
   const columns: TableColumnList = [
     {
       type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
     },
     {
       label: "用户编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 130
     },
     {
       label: "用户名称",
-      prop: "username"
+      prop: "username",
+      minWidth: 130
     },
     {
       label: "用户昵称",
-      prop: "nickname"
+      prop: "nickname",
+      minWidth: 130
     },
     {
       label: "性别",
       prop: "sex",
+      minWidth: 90,
       cellRenderer: ({ row, props }) => (
         <el-tag
           size={props.size}
@@ -47,16 +65,18 @@ export function useColumns() {
     {
       label: "部门",
       prop: "dept",
+      minWidth: 90,
       formatter: ({ dept }) => dept.name
     },
     {
       label: "手机号码",
-      prop: "mobile"
+      prop: "mobile",
+      minWidth: 90
     },
     {
       label: "状态",
       prop: "status",
-      width: 130,
+      minWidth: 90,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -73,7 +93,7 @@ export function useColumns() {
     },
     {
       label: "创建时间",
-      width: 180,
+      minWidth: 90,
       prop: "createTime",
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -85,6 +105,15 @@ export function useColumns() {
       slot: "operation"
     }
   ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -128,7 +157,59 @@ export function useColumns() {
       });
   }
 
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getUserList();
+    dataList.value = data.list;
+    pagination.total = data.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
   return {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
   };
 }

src/views/system/user/index.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import tree from "./tree.vue";
-import { useColumns } from "./columns";
-import { getUserList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-import { type FormInstance } from "element-plus";
-import { TableProBar } from "@/components/ReTable";
-import { type PaginationProps } from "@pureadmin/table";
+import { useUser } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
 import Role from "@iconify-icons/ri/admin-line";
@@ -21,69 +18,28 @@ defineOptions({
   name: "User"
 });
 
-const form = reactive({
-  username: "",
-  mobile: "",
-  status: ""
-});
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
-
-const pagination = reactive<PaginationProps>({
-  total: 0,
-  pageSize: 10,
-  currentPage: 1,
-  background: true
-});
-
-function handleUpdate(row) {
-  console.log(row);
-}
-
-function handleDelete(row) {
-  console.log(row);
-}
-
-function handleCurrentChange(val: number) {
-  console.log(`current page: ${val}`);
-}
-
-function handleSizeChange(val: number) {
-  console.log(`${val} items per page`);
-}
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-
-async function onSearch() {
-  loading.value = true;
-  const { data } = await getUserList();
-  dataList.value = data.list;
-  pagination.total = data.total;
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
-
-onMounted(() => {
-  onSearch();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useUser();
 </script>
 
 <template>
-  <div class="main flex">
-    <tree />
-    <div class="flex-1 ml-4">
+  <div class="main">
+    <tree class="w-[17%] float-left" />
+    <div class="float-right w-[81%]">
       <el-form
         ref="formRef"
         :inline="true"
@@ -95,6 +51,7 @@ onMounted(() => {
             v-model="form.username"
             placeholder="请输入用户名称"
             clearable
+            class="!w-[160px]"
           />
         </el-form-item>
         <el-form-item label="手机号码：" prop="mobile">
@@ -102,10 +59,16 @@ onMounted(() => {
             v-model="form.mobile"
             placeholder="请输入手机号码"
             clearable
+            class="!w-[160px]"
           />
         </el-form-item>
         <el-form-item label="状态：" prop="status">
-          <el-select v-model="form.status" placeholder="请选择" clearable>
+          <el-select
+            v-model="form.status"
+            placeholder="请选择"
+            clearable
+            class="!w-[160px]"
+          >
             <el-option label="已开启" value="1" />
             <el-option label="已关闭" value="0" />
           </el-select>
@@ -125,12 +88,7 @@ onMounted(() => {
         </el-form-item>
       </el-form>
 
-      <TableProBar
-        title="用户管理"
-        :loading="loading"
-        :dataList="dataList"
-        @refresh="onSearch"
-      >
+      <PureTableBar title="用户管理" @refresh="onSearch">
         <template #buttons>
           <el-button type="primary" :icon="useRenderIcon(AddFill)">
             新增用户
@@ -141,6 +99,7 @@ onMounted(() => {
             border
             align-whole="center"
             table-layout="auto"
+            :loading="loading"
             :size="size"
             :data="dataList"
             :columns="columns"
@@ -182,7 +141,7 @@ onMounted(() => {
               </el-popconfirm>
               <el-dropdown>
                 <el-button
-                  class="ml-3"
+                  class="ml-3 mt-[2px]"
                   link
                   type="primary"
                   :size="size"
@@ -193,7 +152,7 @@ onMounted(() => {
                   <el-dropdown-menu>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                         link
                         type="primary"
                         :size="size"
@@ -204,7 +163,7 @@ onMounted(() => {
                     </el-dropdown-item>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                        :class="buttonClass"
                         link
                         type="primary"
                         :size="size"
@@ -219,7 +178,7 @@ onMounted(() => {
             </template>
           </pure-table>
         </template>
-      </TableProBar>
+      </PureTableBar>
     </div>
   </div>
 </template>

src/views/system/user/svg/expand.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>

src/views/system/user/svg/unexpand.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>

src/views/system/user/tree.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { handleTree } from "@/utils/tree";
-import type { ElTree } from "element-plus";
 import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
 
-import LocationCompany from "@iconify-icons/ep/add-location";
-import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
-import Expand from "@iconify-icons/mdi/arrow-expand-down";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import Reset from "@iconify-icons/ri/restart-line";
 import Dept from "@iconify-icons/ri/git-branch-line";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Reset from "@iconify-icons/ri/restart-line";
 import Search from "@iconify-icons/ep/search";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import LocationCompany from "@iconify-icons/ep/add-location";
+import ExpandIcon from "./svg/expand.svg?component";
+import UnExpandIcon from "./svg/unexpand.svg?component";
 
 interface Tree {
   id: number;
@@ -20,17 +19,26 @@ interface Tree {
   highlight?: boolean;
   children?: Tree[];
 }
+
+const treeRef = ref();
+const treeData = ref([]);
+const isExpand = ref(true);
+const searchValue = ref("");
+const highlightMap = ref({});
+const { proxy } = getCurrentInstance();
 const defaultProps = {
   children: "children",
   label: "name"
 };
-
-const treeData = ref([]);
-const searchValue = ref("");
-const { proxy } = getCurrentInstance();
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
-const highlightMap = ref({});
+const buttonClass = computed(() => {
+  return [
+    "!h-[20px]",
+    "reset-margin",
+    "!text-gray-500",
+    "dark:!text-white",
+    "dark:hover:!text-primary"
+  ];
+});
 
 const filterNode = (value: string, data: Tree) => {
   if (!value) return true;
@@ -54,13 +62,14 @@ function nodeClick(value) {
 }
 
 function toggleRowExpansionAll(status) {
+  isExpand.value = status;
   const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
   for (let i = 0; i < nodes.length; i++) {
     nodes[i].expanded = status;
   }
 }
 
-// 重置状态（选中状态、搜索框值、树初始化）
+/** 重置状态（选中状态、搜索框值、树初始化） */
 function onReset() {
   highlightMap.value = {};
   searchValue.value = "";
@@ -73,12 +82,12 @@ watch(searchValue, val => {
 
 onMounted(async () => {
   const { data } = await getDeptList();
-  treeData.value = handleTree(data as any);
+  treeData.value = handleTree(data);
 });
 </script>
 
 <template>
-  <div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
+  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
     <div class="flex items-center h-[34px]">
       <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
         部门列表
@@ -99,7 +108,7 @@ onMounted(async () => {
           </el-icon>
         </template>
       </el-input>
-      <el-dropdown>
+      <el-dropdown :hide-on-click="false">
         <IconifyIconOffline
           class="w-[28px] cursor-pointer"
           width="18px"
@@ -109,29 +118,18 @@ onMounted(async () => {
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                :class="buttonClass"
                 link
                 type="primary"
-                :icon="useRenderIcon(Expand)"
-                @click="toggleRowExpansionAll(true)"
+                :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
+                @click="toggleRowExpansionAll(isExpand ? false : true)"
               >
-                展开全部
+                {{ isExpand ? "折叠全部" : "展开全部" }}
               </el-button>
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
-                link
-                type="primary"
-                :icon="useRenderIcon(UnExpand)"
-                @click="toggleRowExpansionAll(false)"
-              >
-                折叠全部
-              </el-button>
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <el-button
-                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                :class="buttonClass"
                 link
                 type="primary"
                 :icon="useRenderIcon(Reset)"