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

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 {

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)
 	}
 }
 

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
+	var (
-	total, websites, err := websiteRepo.Page(req.Page, req.PageSize)
+		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
 	}

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 {

frontend/src/lang/modules/zh.ts

@@ -949,6 +949,7 @@ export default {
         data: '数据',
         ever: '永久',
         nextYear: '一年后',
+        allGroup: '所有分组',
     },
     nginx: {
         serverNamesHashBucketSizeHelper: '服务器名字的hash表大小',

frontend/src/styles/common.scss

@@ -186,3 +186,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
 }
+
+.table-button {
+    display: inline;
+    margin-right: 5px;
+}

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>

frontend/src/views/app-store/installed/index.vue

@@ -8,17 +8,8 @@
                     </el-col>
                     <el-col :span="6">
                         <div style="float: right">
-                            <el-input
+                            <el-input class="table-button" v-model="searchName" clearable @clear="search()"></el-input>
-                                style="display: inline; margin-right: 5px"
+                            <el-button class="table-button" @click="search()" icon="Search">
-                                v-model="searchName"
-                                clearable
-                                @clear="search()"
-                            ></el-input>
-                            <el-button
-                                style="display: inline; margin-right: 5px"
-                                v-model="searchName"
-                                @click="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>

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,
 });
-
+let req = reactive({
-const search = async () => {
-    const req = {
     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>