From 674091a7be8239d3592166810f52d9d4581eebb8 Mon Sep 17 00:00:00 2001
From: rainbro <33367671@qq.com>
Date: Thu, 19 Jun 2025 18:34:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AB=99=E7=82=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/agent/siteList.vue | 228 ++++++++++++++++++++++---------------------
 1 file changed, 119 insertions(+), 109 deletions(-)

diff --git a/src/views/agent/siteList.vue b/src/views/agent/siteList.vue
index a07815e..a3a5bcd 100644
--- a/src/views/agent/siteList.vue
+++ b/src/views/agent/siteList.vue
@@ -1,128 +1,126 @@
 <template>
-    <div class="elementWrap">
-        <div>
-            <div class="pageheader"> 
-                <div class="pageheader-left"> 
-                    <span class="pagetitle">站点列表</span>
-                    <GuipButton @click="showAddGroup" type="ignore">
-                        <svg-icon :size="16" :path="require('@/assets/site/addIcon.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />新增分组
-                    </GuipButton>
-                    <el-form>
-                        <GuipSelect v-model="currentGroup" :options="siteGroups" defaultValue="选项1"  labelKey="name" valueKey="id" style="margin-bottom: 0px;" clearable />
-                    </el-form>
-                </div> 
-                <GuipButton size="table" :href="addNewSiteUrl">新增站点</GuipButton> 
-            </div>
-            <el-form>
-                <GuipTable 
-                    :tableData="filteredSites" 
-                    ref="multipleTable" 
-                    @selectChange="handleSelectionChange"
-                    autoColumn="true" 
-                    :loading="tableLoading">
+    <div class="main-content12">
+        <div class="elementWrap">
+            <div>
+                <!-- page header -->
+                <div class="pageheader"> 
+                    <div class="pageheader-left"> 
+                        <span class="pagetitle">站点列表</span>
+                        <GuipButton @click="showAddGroup" type="ignore">
+                            <svg-icon :size="16" :path="require('@/assets/site/addIcon.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />新增分组
+                        </GuipButton>
+                        <el-form>
+                            <GuipSelect v-model="currentGroup" :options="siteGroups" defaultValue="选项1"  labelKey="name" valueKey="id" style="margin-bottom: 0px;" clearable />
+                        </el-form>
+                    </div> 
+                    <GuipButton size="table" @click="addNewSite">新增站点</GuipButton> 
+                </div>
 
-                    <el-table-column prop="short_name" label="站点简称">
-                        <template slot-scope="scope">
-                            <div class="flex cell_render">
-                                <el-link :href="scope.row.domain" target="_blank" class="black">{{ scope.row.short_name }}</el-link>
-                                <svg-icon :size="16" :path="require('@/assets/site/form_link.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="regtime" label="注册时间"></el-table-column>
-                    <el-table-column prop="group" label="站点分组">
-                        <template #default="{ row,$index }">
-                            <el-popover v-model="row.showPopover" 
-                                        placement="top" 
-                                        trigger="manual" :append-to-body="false"  :visible-arrow="true"
-                                        popper-class="custom-popover">
+                <!-- page content -->
+                <el-form>
+                    <GuipTable :tableData="filteredSites" ref="multipleTable" @selectChange="handleSelectionChange" autoColumn="true" :loading="tableLoading">
 
-                                <div class="group_select">
-                                    <GuipSelect v-model="selected_group" :options="siteGroups" defaultValue="站点分组" labelKey="name" valueKey="id" placeholder="请选择分组" @change="addSiteGroupIndex(row)" />
+                        <el-table-column prop="short_name" label="站点简称">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    <el-link :href="scope.row.domain" target="_blank" class="black">{{ scope.row.short_name }}</el-link>
+                                    <svg-icon :size="16" :path="require('@/assets/site/form_link.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                                 </div>
-                                <template #reference>
-                                    <div class="flex cell_render" @click="groupSetting(row, $index)">
-                                        <span v-if="row.group">{{ row.group }}</span>
-                                        <span class="gray" v-else>未分组</span>
-                                        <svg-icon :size="16" :path="currentIcon" :color="'#8A9099'" :hoverColor="'#006AFF'" />
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column prop="regtime" label="注册时间"></el-table-column>
+
+                        <el-table-column prop="group" label="站点分组">
+                            <template #default="{ row,$index }">
+                                <el-popover v-model="row.showPopover" 
+                                            placement="top" 
+                                            trigger="manual" :append-to-body="false"  :visible-arrow="true"
+                                            popper-class="custom-popover">
+
+                                    <div class="group_select">
+                                        <GuipSelect v-model="selected_group" :options="siteGroups" defaultValue="站点分组" labelKey="name" valueKey="id" placeholder="请选择分组" @change="addSiteGroupIndex(row)" />
                                     </div>
-                                </template>
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="phone_services" label="手机服务">
-                        <template slot="header">
-                            <div class="flex cell_render">
-                                <span>手机服务</span>
-                            </div>
-                            <el-popover placement="bottom" trigger="click">
-                                <el-select v-model="currentPhoneService" clearable placeholder="请选择" >
-                                    <el-option v-for="item in phoneServices" :key="item.id" :label="item.value" :value="item.id"></el-option>
-                                </el-select>
-                                <el-image class="ml-4 mt-6" :src="fitlerIcon" slot="reference"></el-image>
-                            </el-popover>
-                        </template>
-                        <template slot-scope="scope">
-                            <span v-if="scope.row.phone_services">{{ scope.row.phone_services }}</span>
-                            <span class="gray" v-else>一</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="config_progress_status_desc" label="状态">
-                        <template slot-scope="scope">
-                            <div class="flex cell_render">
-                                <span class="green" v-if="scope.row.config_progress_status == 5">{{ scope.row.config_progress_status_desc }}</span>
-                                <div class="flex cell_render" v-else>
-                                    <span class="red">{{ scope.row.config_progress_status_desc }}</span>
-                                    <svg-icon :size="16" :path="require('@/assets/site/more.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" @click="toggleIcon" />
+                                    <template #reference>
+                                        <div class="flex cell_render" @click="groupSetting(row, $index)">
+                                            <span v-if="row.group">{{ row.group }}</span>
+                                            <span class="gray" v-else>未分组</span>
+                                            <svg-icon :size="16" :path="currentIcon" :color="'#8A9099'" :hoverColor="'#006AFF'" />
+                                        </div>
+                                    </template>
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column prop="phone_services" label="手机服务">
+                            <template slot="header">
+                                <div class="flex cell_render">
+                                    <span>手机服务</span>
                                 </div>
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="操作" fixed="right">
-                        <el-link type="primary" :href="serviceListUrl" target="_blank" class="mr-16">服务列表</el-link>
-                        <el-link type="primary" :href="siteSettingUrl" target="_blank">站点设置</el-link>
-                    </el-table-column>
-                </GuipTable>
+                                <el-popover placement="bottom" trigger="click">
+                                    <el-select v-model="currentPhoneService" clearable placeholder="请选择" >
+                                        <el-option v-for="item in phoneServices" :key="item.id" :label="item.value" :value="item.id"></el-option>
+                                    </el-select>
+                                    <el-image class="ml-4 mt-6" :src="fitlerIcon" slot="reference"></el-image>
+                                </el-popover>
+                            </template>
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.phone_services">{{ scope.row.phone_services }}</span>
+                                <span class="gray" v-else>一</span>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column prop="config_progress_status_desc" label="状态">
+                            <template slot-scope="scope">
+                                <div class="flex cell_render">
+                                    <span class="green" v-if="scope.row.config_progress_status == 5">{{ scope.row.config_progress_status_desc }}</span>
+                                    <div class="flex cell_render" v-else>
+                                        <span class="red">{{ scope.row.config_progress_status_desc }}</span>
+                                        <svg-icon :size="16" :path="require('@/assets/site/more.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" @click="toggleIcon" />
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column label="操作" fixed="right">
+                            <el-link type="primary" :href="serviceListUrl" target="_blank" class="mr-16">服务列表</el-link>
+                            <el-link type="primary" :href="siteSettingUrl" target="_blank">站点设置</el-link>
+                        </el-table-column>
 
-                <GuipDialog :dialogVisible="addGroupDialogVisible" title="新增分组" :show-close-button="false"
-                    :show-cancel-button="showCancelButton" @confirm="addGroup" @cancel="cancleAddGroup"
-                    @close="closeAddGroup" @addGroupDialogVisibleChange="addGroupDialogVisibleChange">
-                    <!-- 自定义内容 -->
-                    <div>
-                        <GuipInput ref="GuipInput" addClass="w510" v-model="groupname" label="分组名称" prop="groupid" placeholder="请输入分组名称" />
-                    </div>
-                </GuipDialog>
-            </el-form>
+                    </GuipTable>
+
+                    <!-- 新增分组 --->
+                    <GuipDialog :dialogVisible="addGroupDialogVisible" title="新增分组" :show-close-button="false"
+                        :show-cancel-button="showCancelButton" @confirm="addGroup" @cancel="cancleAddGroup"
+                        @close="closeAddGroup" @addGroupDialogVisibleChange="addGroupDialogVisibleChange">
+                        <div>
+                            <GuipInput ref="GuipInput" addClass="w510" v-model="groupname" label="分组名称" prop="groupid" placeholder="请输入分组名称" />
+                        </div>
+                    </GuipDialog>
+                </el-form>
+            </div>
+            <Footer></Footer>
         </div>
-        <Footer></Footer>
     </div>
-    
 </template>
 
 <script>
 
 import GuipTable from '@/components/GuipTable.vue';
 import Footer from '@/components/Footer.vue';
-// import GuipToolTip from '@/components/GuipToolTip.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 import GuipSelect from '@/components/GuipSelect.vue';
-// import HoverButton from '@/components/HoverButton.vue'
 import GuipButton from '@/components/GuipButton.vue';
 import GuipInput from '@/components/GuipInput.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
 
-// import { mapState } from 'vuex'
-// import store from '@/store';
-
 export default {
     name: 'siteList',
     components: {
         Footer,
         GuipTable,
-        // GuipToolTip,
         SvgIcon,
         GuipSelect,
-        // HoverButton,
         GuipButton,
         GuipInput,
         GuipDialog,
@@ -139,25 +137,32 @@ export default {
             siteGroups: [],
             // 分组id
             gid: 0,
+            // 服务列表url
             serviceListUrl: '/ui',
+            // 站点设置url
             siteSettingUrl: '/ui',
+            // 新增站点url
             addNewSiteUrl: '/ui',
             popoverFlag:false,
-            value: '',
+            // 站点分组名称
             selected_group: '',
             isUpIco: false, 
             currentIcon: require('@/assets/site/drop_icon.svg'),
-            visible: false,
             currentGroup: '',
             fitlerIcon: require('@/assets/site/filter.svg'),
+            // 手机服务
             phoneServices: [
                 {'id': 0,  value: '不限' },
                 {'id': 1,  value: '微信H5' },
                 {'id': 2,  value: '小程序' },
             ],
+            // 当前选中的手机服务
             currentPhoneService: '',
+            // 添加分组弹框显示标识
             addGroupDialogVisible: false,
+            // 取消按钮显示
             showCancelButton: true,
+            // 确定按钮显示
             groupname: '',
         }
     },
@@ -166,6 +171,7 @@ export default {
         this.getSiteGroups()
     },
     methods: {
+        // 获取站点列表
         getSiteList() {
             this.tableLoading = true
             const that = this
@@ -180,12 +186,12 @@ export default {
                 this.tableLoading = false
                 this.$nextTick(() => {
                     that.siteList = response.data.sitelist
-                    console.log(that.siteList,'---that.siteList');
                 })
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
+        // 获取站点分组
         getSiteGroups() {
             const that = this
             that.siteGroups = []
@@ -198,7 +204,6 @@ export default {
             }).then(response => {
                 this.$nextTick(() => {
                     that.siteGroups = response.data
-                    console.log(that.siteGroups,'---that.siteGroups');
                 })
             }).catch(error => {
                 console.error(error, 'error')
@@ -206,8 +211,16 @@ export default {
         },
         // 点击站点分组单元格时触发
         groupSetting(row, index) {
+            // 如果已经打开当前行的弹框，则关闭
+            if (row.showPopover === true) {
+                row['showPopover'] = false;
+                // 切换图标
+                this.toggleIcon();
+
+                return;
+            }
+
             // 如果存在分组 则显示已设置分组
-            this.selected_group = '';
             if (row.group) {
                 this.selected_group = row.group;
             }
@@ -284,7 +297,6 @@ export default {
         },
         // 弹框相关方法---start
         showAddGroup() {
-            console.log('点击了添加分组');
             this.addGroupDialogVisible = true;
         },
         // 确认按钮事件
@@ -315,28 +327,28 @@ export default {
         },
         // 取消按钮事件
         cancleAddGroup() {
-            console.log('点击了取消按钮');
             this.addGroupDialogVisible = false;
         },
         // 关闭弹框事件
         closeAddGroup() {
-            console.log('弹框已关闭');
             this.addGroupDialogVisible = false;
         },
         addGroupDialogVisibleChange(data) {
             console.log(data, 'data098908090');
         },
         // 弹框相关方法---end
+        addNewSite() {
+            window.open(this.addNewSiteUrl, '_blank');
+        }
     },
     computed: {
+        // 筛选表格数据
         filteredSites() {
-            console.log(this.currentGroup, 'this.currentGroup');
             let result = this.siteList;
             if (this.currentGroup) {
                 result = result.filter(site => site.groupid == this.currentGroup);
             }
 
-            console.log(this.currentPhoneService, 'this.currentPhoneService');
             if (this.currentPhoneService >= 0) {
                 if (this.currentPhoneService == 1) {
                     result = result.filter(site => site.is_open_h5 == 1);
@@ -344,8 +356,6 @@ export default {
                     result = result.filter(site => site.is_open_xcx == 1);
                 }
             }
-
-            console.log(result, 'result');
             return result;
         }