fix: vue&nest国际化模块优化分页和过滤 (opentiny#203)

packages/toolkits/pro/template/server/nestJs/src/i18/i18.controller.ts

@@ -9,21 +9,17 @@ import {
   Query,
   ParseIntPipe,
   DefaultValuePipe,
-  ParseBoolPipe,
+  ParseArrayPipe,
 } from '@nestjs/common';
 import { I18Service } from './i18.service';
 import { CreateI18Dto } from './dto/create-i18.dto';
 import { UpdateI18Dto } from './dto/update-i18.dto';
-import { CreateLang } from './dto/create-lang.dto';
 import { I18LangService } from './lang.service';
 import { Permission } from '../public/permission.decorator';
 
 @Controller('i18')
 export class I18Controller {
-  constructor(
-    private readonly i18Service: I18Service,
-    private readonly langService: I18LangService
-  ) {}
+  constructor(private readonly i18Service: I18Service) {}
 
   @Permission('i18n::add')
   @Post()
@@ -41,9 +37,19 @@ export class I18Controller {
   findAll(
     @Query('page', new DefaultValuePipe(1), ParseIntPipe) page?: number,
     @Query('limit', new DefaultValuePipe(0), ParseIntPipe) limit?: number,
-    @Query('all', ParseIntPipe) all?: number
+    @Query('all', ParseIntPipe) all?: number,
+    @Query('lang', new DefaultValuePipe([]), ParseArrayPipe) lang?: number[],
+    @Query('key') key?: string,
+    @Query('content') content?: string
   ) {
-    return this.i18Service.findAll(page, limit, Boolean(all));
+    return this.i18Service.findAll(
+      page,
+      limit,
+      Boolean(all),
+      lang,
+      content,
+      key
+    );
   }
 
   @Permission('i18n::query')

packages/toolkits/pro/template/server/nestJs/src/i18/i18.service.ts

@@ -3,7 +3,7 @@ import { CreateI18Dto } from './dto/create-i18.dto';
 import { UpdateI18Dto } from './dto/update-i18.dto';
 import { InjectRepository } from '@nestjs/typeorm';
 import { I18, Lang } from '@app/models';
-import { Repository } from 'typeorm';
+import { In, Like, Repository } from 'typeorm';
 import { paginate } from 'nestjs-typeorm-paginate';
 import { I18nTranslations } from '../.generate/i18n.generated';
 import { I18nContext, I18nService } from 'nestjs-i18n';
@@ -84,11 +84,23 @@ export class I18Service {
       },
     });
   }
-  async findAll(page?: number, limit?: number, all?: boolean) {
+  async findAll(
+    page?: number,
+    limit?: number,
+    all?: boolean,
+    lang?: number[],
+    content?: string,
+    key?: string
+  ) {
     let count = 0;
     if (all) {
       count = await this.i18.count();
     }
+    const where = {
+      lang: lang && lang.length ? { id: In(lang) } : undefined,
+      content: content ? Like(content) : undefined,
+      key: key ? Like(key) : undefined,
+    };
     if (page && limit) {
       return paginate<I18>(
         this.i18,
@@ -99,6 +111,7 @@ export class I18Service {
         {
           relations: ['lang'],
           loadEagerRelations: true,
+          where,
         }
       );
     } else {
@@ -111,6 +124,7 @@ export class I18Service {
         {
           relations: ['lang'],
           loadEagerRelations: true,
+          where,
         }
       );
     }

packages/toolkits/pro/template/tinyvue/src/api/local.ts

@@ -45,8 +45,13 @@ export const getAllLocalItems = (
   page?: number,
   limit?: number,
   all?: number,
+  filters?: {
+    [x: string]: number[] | string;
+  },
 ) => {
-  return axios.get<Locals>('/api/i18', { params: { page, limit, all } });
+  return axios.get<Locals>('/api/i18', {
+    params: { page, limit, all, ...filters },
+  });
 };
 
 export const createLocalItem = (data: CreateLocal) => {

packages/toolkits/pro/template/tinyvue/src/views/locale/components/locale-table.vue

@@ -5,23 +5,27 @@
     :fetch-data="fetchData"
     :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     :loading="loading"
+    remote-filter
     @edit-closed="onEditClosed"
   >
     <tiny-grid-column field="id" title="id" width="60"></tiny-grid-column>
     <tiny-grid-column
       field="key"
       title="key"
       :editor="{ component: 'input', autoselect: true }"
+      :filter="keyFilter"
     ></tiny-grid-column>
     <tiny-grid-column
       field="content"
       title="content"
       :editor="{ component: 'input' }"
+      :filter="contentFilter"
     ></tiny-grid-column>
     <tiny-grid-column
       field="lang"
       title="lang"
       :editor="{ component: 'select', options }"
+      :filter="langFilter"
     ></tiny-grid-column>
     <tiny-grid-column>
       <template #default="data">
@@ -45,6 +49,7 @@
   } from '@/api/local';
   import useLoading from '@/hooks/loading';
   import { useLocales } from '@/store/modules/locales';
+  import { FilterType, InputFilterValue } from '@/types/global';
   import {
     Notify,
     Grid as TinyGrid,
@@ -53,13 +58,31 @@
   } from '@opentiny/vue';
   import { computed, ref } from 'vue';
 
+  const grid = ref();
+  const localeStore = useLocales();
+
   export type LocalTableData = {
     id: number;
     key: string;
     content: string;
     lang: string;
   };
 
+  const keyFilter = {
+    inputFilter: true,
+  };
+  const contentFilter = {
+    inputFilter: true,
+  };
+  const langFilter = {
+    enumable: true,
+    multi: true,
+    values: localeStore.lang.map((language) => ({
+      label: language.name,
+      value: language.id,
+    })),
+  };
+
   const pagerConfig = ref({
     attrs: {
       currentPage: 1,
@@ -73,9 +96,6 @@
     },
   });
 
-  const grid = ref();
-  const items = ref<LocalTableData[]>([]);
-  const localeStore = useLocales();
   const options = computed(() =>
     localeStore.lang.map((language) => ({
       label: language.name,
@@ -88,33 +108,51 @@
   }
 
   let currentPage = 0;
+
+  const filterInputValue2String = (value: InputFilterValue) => {
+    let str = '';
+    if (value.relation === 'contains') {
+      str += '%';
+    }
+    str += value.text;
+    if (value.relation === 'startwith' || value.relation === 'contains') {
+      str += '%';
+    }
+    return str;
+  };
+
   const getData = ({
     page,
+    filters,
   }: {
     page: { pageSize: number; currentPage: number };
+    filters: FilterType;
   }) => {
+    const key = filters.key
+      ? filterInputValue2String(filters.key.value as InputFilterValue)
+      : undefined;
+    const content = filters.content
+      ? filterInputValue2String(filters.content.value as InputFilterValue)
+      : undefined;
+    const lang =
+      filters.lang && (filters.lang.value as number[]).length
+        ? (filters.lang.value as number[]).toString()
+        : undefined;
     const { pageSize } = page;
     currentPage = page.currentPage;
     setLoading(true);
     return new Promise((resolve) => {
-      getAllLocalItems(currentPage, pageSize, 0)
+      getAllLocalItems(currentPage, pageSize, 0, { key, content, lang })
         .then(({ data }) => {
-          if (items.value.length !== data.meta.totalItems) {
-            items.value = Array.from({ length: data.meta.totalItems }).fill({});
-          }
-          const offset = (currentPage - 1) * pageSize;
-          const l = offset;
-          for (let i = 0; i < data.items.length; i += 1) {
-            const item = data.items[i];
-            items.value[l + i] = {
-              id: item.id,
-              key: item.key,
-              content: item.content,
-              lang: item.lang.name,
-            };
-          }
           resolve({
-            result: items.value.slice(offset, offset + pageSize),
+            result: data.items.map((item) => {
+              return {
+                id: item.id,
+                key: item.key,
+                content: item.content,
+                lang: item.lang.name,
+              };
+            }),
             page: {
               total: data.meta.totalItems,
             },
@@ -154,7 +192,6 @@
         localeStore.$patch({
           locales: localeStore.locales.filter((locale) => locale.id !== row.id),
         });
-        items.value = items.value.filter((item) => item.id !== row.id);
         return deleteLocale(row.id);
       })
       .catch(() => {
@@ -167,5 +204,6 @@
 
   const fetchData = ref({
     api: getData,
+    filter: true,
   });
 </script>