feat: 分离前端列表

modules/Develop/Support/Generate/Create/FrontTable.php

@@ -93,8 +93,11 @@ class FrontTable extends Creator
         return Str::of(File::get($this->getTableStub()))->replace([
             $this->table, $this->search, $this->api, $this->paginate, $this->useList
         ], [
-            $this->getTableContent(), $this->getSearchContent(),
-            "'{$this->apiString}'", $this->getPaginateStubContent(), $this->getUseList()
+            $this->getTableContent(),
+            $this->getSearchContent(),
+            $this->apiString,
+            $this->getPaginateStubContent(),
+            $this->getUseList()
         ])->toString();
     }
 
@@ -215,15 +218,7 @@ HTML;
      */
     protected function getPaginateStubContent(): string
     {
-        return $this->hasPaginate ?
-            File::get(
-                dirname(__DIR__).DIRECTORY_SEPARATOR
-
-                .'stubs'.DIRECTORY_SEPARATOR.'vue'.
-
-                DIRECTORY_SEPARATOR.'paginate.stub'
-            )
-        : '';
+        return $this->hasPaginate ? '<Paginate />' : '';
     }
 
     /**
@@ -232,9 +227,7 @@ HTML;
      */
     protected function getUseList(): string
     {
-        return $this->hasPaginate ?
-        'const { data, query, search, reset, changePage, changeLimit, loading } = useGetList(api)' :
-            'const { data, query, search, reset, loading } = useGetList(api)';
+        return 'const { data, query, search, reset, loading } = useGetList(api)';
     }
 
     /**

modules/Develop/Support/Generate/stubs/vue/paginate.stub

@@ -1,12 +0,0 @@
-<div class="pt-2 pb-2 flex justify-end">
-    <el-pagination
-      background
-      layout="total,sizes,prev,pager,next"
-      :current-page="query.page"
-      :page-size="query.limit"
-      @current-change="changePage"
-      @size-change="changeLimit"
-      :total="total"
-      :page-sizes="[1, 10, 20, 30, 50]"
-    />
-</div>

modules/Develop/Support/Generate/stubs/vue/table.stub

@@ -1,24 +1,12 @@
 <template>
   <div>
-    <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">
-        {search}
-        <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>
+    <Search :search="search" :reset="reset">
+      <template v-slot:body>
+         {search}
+      </template>
+    </Search>
     <div class="pl-2 pr-2 bg-white dark:bg-regal-dark rounded-lg mt-4">
-      <div class="pt-5 pl-2">
-        <Add @click="show(null)" />
-      </div>
+      <Operate :show="show" />
       <el-table :data="tableData" class="mt-3" v-loading="loading">
         {table}
         <el-table-column label="操作" width="200">
@@ -28,8 +16,9 @@
           </template>
         </el-table-column>
       </el-table>
-      {paginate}
+      <Paginate />
     </div>
+
     <Dialog v-model="visible" :title="title" destroy-on-close>
       <Create @close="close" :primary="id" :api="api" />
     </Dialog>
@@ -41,23 +30,18 @@ import { computed, onMounted, ref, watch } from 'vue'
 import Create from './create.vue'
 import { useGetList } from '/admin/composables/curd/useGetList'
 import { useDestroy } from '/admin/composables/curd/useDestroy'
-import { useEnabled } from '/admin/composables/curd/useEnabled'
 import { t } from '/admin/support/helper'
 
 const visible = ref<boolean>(false)
 const id = ref(null)
-const api = {api}
-const title = ref<string>('');
+const api = '{api}'
+const title = ref<string>('')
 
+// const { data, query, search, reset, loading } = useGetList(api)
 {useList}
-
-const { destroy, isDeleted } = useDestroy()
-const { enabled } = useEnabled()
-
-onMounted(() => search())
+const { destroy, deleted } = useDestroy()
 
 const tableData = computed(() => data.value?.data)
-const total = computed(() => data.value?.total)
 
 const close = () => {
   visible.value = false
@@ -70,9 +54,9 @@ const show = primary => {
   visible.value = true
 }
 
-watch(isDeleted, function (){
-  // change origin status
-  isDeleted.value = false
-  reset();
+onMounted(() => {
+  search()
+
+  deleted(reset)
 })
 </script>