feat: 分离前端列表

resources/admin/components/admin/paginate/index.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="pt-2 pb-2 flex justify-end">
+    <el-pagination
+        background
+        :layout="layout"
+        :current-page="page"
+        :page-size="limit"
+        @current-change="changePage"
+        @size-change="changeLimit"
+        :total="total"
+        :page-sizes="pageSizes"
+    />
+</div>
+</template>
+
+<script lang="ts" setup>
+
+import {inject} from "vue";
+
+const layout = 'total,sizes,prev, pager,next'
+
+const pageSizes = [10, 20, 30, 50]
+
+const {page, limit, total, changePage, changeLimit} = inject('paginate')
+</script>
+
+<style scoped>
+
+</style>

resources/admin/components/admin/table/operate.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="pt-5 pl-2">
+        <Add @click="show(showParams)" />
+        <slot name="operate"/>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    show: {
+        type: Function,
+        required: true,
+    },
+
+    showParams: null
+})
+</script>
+
+<style scoped>
+
+</style>

resources/admin/components/admin/table/search.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
+    <el-form :inline="true">
+      <slot name="body" />
+      <el-form-item>
+        <el-button type="primary" @click="search()">
+          <Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" />
+          搜索
+        </el-button>
+        <el-button @click="reset()">
+          <Icon name="arrow-path" class="w-4 mr-1 -ml-1" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  search: {
+    type: Function,
+    required: true,
+  },
+
+  reset: {
+    type: Function,
+    required: true,
+  },
+})
+</script>
+
+<style scoped></style>

resources/admin/composables/curd/useCreate.ts

@@ -4,7 +4,7 @@ import { Code } from '/admin/enum/app'
 import Message from '/admin/support/message'
 import { FormInstance } from 'element-plus'
 import { AxiosResponse } from 'axios'
-import { isFunction } from'/admin/support/helper'
+import { isFunction } from '/admin/support/helper'
 
 // get table list
 export function useCreate(path: string, id: string | number | null = null, _formData: object = {}) {
@@ -17,23 +17,22 @@ export function useCreate(path: string, id: string | number | null = null, _form
   const beforeCreate = ref()
   // 更新前 hook
   const beforeUpdate = ref()
-  
+
   // store
   function store(path: string, id: string | number | null = null) {
     loading.value = true
     let promise: Promise<AxiosResponse> | null = null
     if (id) {
       if (isFunction(beforeUpdate.value)) {
-          beforeUpdate.value()
+        beforeUpdate.value()
       }
 
       promise = http.put(path + '/' + id, unref(formData))
     } else {
-      console.log(isFunction(beforeCreate.value), beforeCreate.value)
       if (isFunction(beforeCreate.value)) {
         beforeCreate.value()
       }
-      
+
       promise = http.post(path, unref(formData))
     }
 

resources/admin/composables/curd/useDestroy.ts

@@ -1,23 +1,22 @@
 import http from '/admin/support/http'
 import { Code } from '/admin/enum/app'
 import Message from '/admin/support/message'
-import { ref } from 'vue'
-import { isFunction } from'/admin/support/helper'
+import { ref, watch } from 'vue'
+import { isFunction } from '/admin/support/helper'
 
 export function useDestroy(confirm: string = '确认删除吗') {
   const isDeleted = ref(false)
 
   const beforeDestroy = ref()
-  
+
   // fetch list
   function destroy(path: string, id: string | number) {
     Message.confirm(confirm + '?', function () {
-      
       // before destroy
       if (isFunction(beforeDestroy.value)) {
         beforeDestroy.value()
       }
-      
+
       http
         .delete(path + '/' + id)
         .then(r => {
@@ -32,5 +31,14 @@ export function useDestroy(confirm: string = '确认删除吗') {
     })
   }
 
-  return { destroy, isDeleted }
+  const deleted = (reset: Function) => {
+    watch(isDeleted, function (value) {
+      if (value) {
+        isDeleted.value = false
+        reset()
+      }
+    })
+  }
+
+  return { destroy, deleted }
 }

resources/admin/composables/curd/useGetList.ts

@@ -1,16 +1,18 @@
 import http from '/admin/support/http'
-import { ref, unref } from 'vue'
+import {provide, ref, unref} from 'vue'
 import { Code } from '/admin/enum/app'
 import Message from '/admin/support/message'
 
 const initLimit = 10
 const initPage = 1;
+const initTotal = 10;
 
 // get table list
 export function useGetList(path: string) {
   const data = ref<object>()
-  const page = ref(initPage)
-  const limit = ref(initLimit)
+  const page = ref<number>(initPage)
+  const limit = ref<number>(initLimit)
+  const total = ref<number>(initTotal)
   const query = ref<object>({
     page: page.value,
     limit: limit.value,
@@ -28,6 +30,8 @@ export function useGetList(path: string) {
         closeLoading()
         if (r.data.code === Code.SUCCESS) {
           data.value = r.data
+          // @ts-ignore
+          total.value = data.value?.total
         } else {
           Message.error(r.data.message)
         }
@@ -48,6 +52,8 @@ export function useGetList(path: string) {
 
   // reset
   function reset() {
+    resetPage()
+
     query.value = Object.assign({ page: page.value, limit: limit.value })
 
     getList()
@@ -61,15 +67,24 @@ export function useGetList(path: string) {
     search()
   }
 
+  function resetPage() {
+      page.value = 1
+  }
+
   // change limit
   function changeLimit(l: number) {
     limit.value = l
+    resetPage()
     // @ts-ignore
     query.value.page = 1
     // @ts-ignore
     query.value.limit = l
+
     search()
   }
 
-  return { data, query, search, reset, changePage, changeLimit, loading }
+  // provider for paginate component
+  provide('paginate', {page, limit, total, changePage, changeLimit})
+
+  return { data, query, search, reset, loading }
 }

resources/admin/layout/components/header/index.vue

@@ -28,6 +28,7 @@
 <script setup lang="ts">
 import { useAppStore } from '/admin/stores/modules/app'
 import Notification from './notification.vue'
+import Search from './search.vue'
 
 const store = useAppStore()
 </script>

resources/admin/layout/components/header/search.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
     <div class="flex flex-row w-96">
-      <Icon name="magnifying-glass" class="hidden sm:block" @click="serachMenuVisable = true" />
+      <Icon name="magnifying-glass" class="hidden sm:block" @click="searchMenuVisiable = true" />
 
       <Teleport to="body">
-        <el-dialog v-model="serachMenuVisable" width="30%" draggable>
+        <el-dialog v-model="searchMenuVisiable" width="30%" draggable>
           <el-cascader :filterable="true" :options="options" @change="toWhere" placeholder="请输入菜单名称" clearable class="w-full" :show-all-levels="false" />
         </el-dialog>
       </Teleport>
@@ -18,7 +18,7 @@ import { Menu } from '/admin/types/Menu'
 import router from '/admin/router'
 import { ref, computed } from 'vue'
 
-const serachMenuVisable = ref(false)
+const searchMenuVisiable = ref(false)
 
 const permissionStore = usePermissionsStore()
 const options = computed(() => {
@@ -29,7 +29,7 @@ const toWhere = (value: string[]) => {
     router.push({ path: value[value.length - 1] })
   }
 
-  serachMenuVisable.value = false
+  searchMenuVisiable.value = false
 }
 
 /**