feat: 网站增加搜索和分组过滤

2024-09-20 23:55:58 +08:00 · 2022-12-30 16:13:13 +08:00 · 2022-12-30 16:13:13 +08:00 · 83199c41cb
parent f27b173f63
commit 83199c41cb
9 changed files with 101 additions and 25 deletions
--- a/backend/app/dto/request/website.go
+++ b/backend/app/dto/request/website.go
@ -6,6 +6,8 @@ import (

 type WebsiteSearch struct {
 	dto.PageInfo
+	Name           string `json:"name"`
+	WebsiteGroupID uint   `json:"websiteGroupId"`
 }

 type WebsiteCreate struct {
--- a/backend/app/repo/website.go
+++ b/backend/app/repo/website.go
@ -13,6 +13,7 @@ type IWebsiteRepo interface {
 	WithDomain(domain string) DBOption
 	WithAlias(alias string) DBOption
 	WithWebsiteSSLID(sslId uint) DBOption
+	WithGroupID(groupId uint) DBOption
 	Page(page, size int, opts ...DBOption) (int64, []model.Website, error)
 	List(opts ...DBOption) ([]model.Website, error)
 	GetFirst(opts ...DBOption) (model.Website, error)
@ -49,7 +50,13 @@ func (w *WebsiteRepo) WithAlias(alias string) DBOption {

 func (w *WebsiteRepo) WithWebsiteSSLID(sslId uint) DBOption {
 	return func(db *gorm.DB) *gorm.DB {
-		return db.Where("web_site_ssl_id = ?", sslId)
+		return db.Where("website_ssl_id = ?", sslId)
+	}
+}
+
+func (w *WebsiteRepo) WithGroupID(groupId uint) DBOption {
+	return func(db *gorm.DB) *gorm.DB {
+		return db.Where("website_group_id = ?", groupId)
 	}
 }

--- a/backend/app/service/website.go
+++ b/backend/app/service/website.go
@ -8,6 +8,7 @@ import (
 	"fmt"
 	"github.com/1Panel-dev/1Panel/backend/app/dto/request"
 	"github.com/1Panel-dev/1Panel/backend/app/dto/response"
+	"github.com/1Panel-dev/1Panel/backend/app/repo"
 	"github.com/1Panel-dev/1Panel/backend/buserr"
 	"os"
 	"path"
@ -55,8 +56,18 @@ func NewWebsiteService() IWebsiteService {
 }

 func (w WebsiteService) PageWebsite(req request.WebsiteSearch) (int64, []response.WebsiteDTO, error) {
-	var websiteDTOs []response.WebsiteDTO
-	total, websites, err := websiteRepo.Page(req.Page, req.PageSize)
+	var (
+		websiteDTOs []response.WebsiteDTO
+		opts        []repo.DBOption
+	)
+	opts = append(opts, commonRepo.WithOrderBy("created_at desc"))
+	if req.Name != "" {
+		opts = append(opts, websiteRepo.WithDomain(req.Name))
+	}
+	if req.WebsiteGroupID != 0 {
+		opts = append(opts, websiteRepo.WithGroupID(req.WebsiteGroupID))
+	}
+	total, websites, err := websiteRepo.Page(req.Page, req.PageSize, opts...)
 	if err != nil {
 		return 0, nil, err
 	}
--- a/frontend/src/api/interface/website.ts
+++ b/frontend/src/api/interface/website.ts
@ -29,6 +29,7 @@ export namespace Website {

    export interface WebSiteSearch extends ReqPage {
        name: string;
+        websiteGroupId: number;
    }

    export interface WebSiteRecover {
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -949,6 +949,7 @@ export default {
        data: '数据',
        ever: '永久',
        nextYear: '一年后',
+        allGroup: '所有分组',
    },
    nginx: {
        serverNamesHashBucketSizeHelper: '服务器名字的hash表大小',
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@ -186,3 +186,8 @@
    left: 50%;
    transform: translate(-50%, -50%);
 }
+
+.table-button {
+    display: inline;
+    margin-right: 5px;
+}
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@ -200,4 +200,9 @@ onMounted(() => {
 .a-card:hover {
    transform: scale(1.1);
 }
+
+.table-button {
+    display: inline;
+    margin-right: 5px;
+}
 </style>
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@ -8,17 +8,8 @@
                    </el-col>
                    <el-col :span="6">
                        <div style="float: right">
-                            <el-input
-                                style="display: inline; margin-right: 5px"
-                                v-model="searchName"
-                                clearable
-                                @clear="search()"
-                            ></el-input>
-                            <el-button
-                                style="display: inline; margin-right: 5px"
-                                v-model="searchName"
-                                @click="search()"
-                            >
+                            <el-input class="table-button" v-model="searchName" clearable @clear="search()"></el-input>
+                            <el-button class="table-button" @click="search()" icon="Search">
                                {{ $t('app.search') }}
                            </el-button>
                        </div>
@ -302,7 +293,7 @@ onUnmounted(() => {
 });
 </script>

-<style lang="scss">
+<style scoped lang="scss">
 .i-card {
    height: 60px;
    cursor: pointer;
@ -318,4 +309,9 @@ onUnmounted(() => {
    border-color: $primary-color;
    z-index: 1;
 }
+
+.table-button {
+    display: inline;
+    margin-right: 5px;
+}
 </style>
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@ -8,10 +8,40 @@
                    <LayoutContent :header="$t('website.website')">
                        <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search()">
                            <template #toolbar>
+                                <el-row>
+                                    <el-col :span="10">
                                        <el-button type="primary" icon="Plus" @click="openCreate">
                                            {{ $t('commons.button.create') }}
                                        </el-button>
-                                <el-button type="primary" plain @click="openGroup">{{ $t('website.group') }}</el-button>
+                                        <el-button type="primary" plain @click="openGroup">
+                                            {{ $t('website.group') }}
+                                        </el-button>
+                                    </el-col>
+                                    <el-col :span="14">
+                                        <div style="float: right">
+                                            <div class="table-button">
+                                                <el-select v-model="req.websiteGroupId" @change="search()">
+                                                    <el-option :label="$t('website.allGroup')" :value="0"></el-option>
+                                                    <el-option
+                                                        v-for="(group, index) in groups"
+                                                        :key="index"
+                                                        :label="group.name"
+                                                        :value="group.id"
+                                                    ></el-option>
+                                                </el-select>
+                                            </div>
+                                            <el-input
+                                                class="table-button"
+                                                v-model="req.name"
+                                                clearable
+                                                @clear="search()"
+                                            ></el-input>
+                                            <el-button type="primary" icon="Search" @click="search()">
+                                                {{ $t('app.search') }}
+                                            </el-button>
+                                        </div>
+                                    </el-col>
+                                </el-row>
                            </template>
                            <el-table-column
                                :label="$t('commons.table.name')"
@ -113,7 +143,7 @@ import { onMounted, reactive, ref } from '@vue/runtime-core';
 import CreateWebSite from './create/index.vue';
 import DeleteWebsite from './delete/index.vue';
 import WebSiteGroup from './group/index.vue';
-import { OpWebsite, SearchWebsites, UpdateWebsite } from '@/api/modules/website';
+import { ListGroups, OpWebsite, SearchWebsites, UpdateWebsite } from '@/api/modules/website';
 import { Website } from '@/api/interface/website';
 import AppStatus from '@/components/app-status/index.vue';
 import NginxConfig from './nginx/index.vue';
@ -153,24 +183,35 @@ const uploadRef = ref();
 const dialogBackupRef = ref();
 const data = ref();
 let dateRefs: Map<number, any> = new Map();
+let groups = ref<Website.Group[]>([]);

 const paginationConfig = reactive({
    currentPage: 1,
    pageSize: 20,
    total: 0,
 });
-
-const search = async () => {
-    const req = {
+let req = reactive({
    name: '',
    page: paginationConfig.currentPage,
    pageSize: paginationConfig.pageSize,
-    };
+    websiteGroupId: 0,
+});
+
+const search = async () => {
+    req.page = paginationConfig.currentPage;
+    req.pageSize = paginationConfig.currentPage;
    SearchWebsites(req).then((res) => {
        data.value = res.data.items;
        paginationConfig.total = res.data.total;
    });
 };
+
+const listGroup = async () => {
+    await ListGroups().then((res) => {
+        groups.value = res.data;
+    });
+};
+
 const setting = () => {
    openNginxConfig.value = true;
 };
@ -314,5 +355,12 @@ const opWebsite = (op: string, id: number) => {

 onMounted(() => {
    search();
+    listGroup();
 });
 </script>
+<style lang="scss">
+.table-button {
+    display: inline;
+    margin-right: 5px;
+}
+</style>