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/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>