From 2a48b99e14f71e470dd2f7cb82322b443b79980e Mon Sep 17 00:00:00 2001
From: rainbro <33367671@qq.com>
Date: Thu, 19 Jun 2025 16:20:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=88=86=E7=BB=84=20?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/agent/siteList.vue b/src/views/agent/siteList.vue
index dad3c67..a07815e 100644
--- a/src/views/agent/siteList.vue
+++ b/src/views/agent/siteList.vue
@@ -4,9 +4,11 @@
             <div class="pageheader"> 
                 <div class="pageheader-left"> 
                     <span class="pagetitle">站点列表</span>
-                    <GuipButton type="ignore"><svg-icon :size="16" :path="require('@/assets/site/addIcon.svg')" :color="'#8A9099'" :hoverColor="'#006AFF'" />按钮</GuipButton>
+                    <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" placeholder="请选择分组"  labelKey="name" valueKey="id" style="margin-bottom: 0px;" />
+                        <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> 
@@ -30,19 +32,19 @@
                     <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" :ref="`groupPopover-${row.uid}`"
+                            <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="addSiteGroup(row)" />
+                                    <GuipSelect v-model="selected_group" :options="siteGroups" defaultValue="站点分组" labelKey="name" valueKey="id" placeholder="请选择分组" @change="addSiteGroupIndex(row)" />
                                 </div>
                                 <template #reference>
-                                    <div class="flex cell_render" @click="showGroupSetting(row, $index)">
+                                    <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'" @click="toggleIcon" />
+                                        <svg-icon :size="16" :path="currentIcon" :color="'#8A9099'" :hoverColor="'#006AFF'" />
                                     </div>
                                 </template>
                             </el-popover>
@@ -50,18 +52,15 @@
                     </el-table-column>
                     <el-table-column prop="phone_services" label="手机服务">
                         <template slot="header">
-                            <div class="flex cell_render" @click="visible = !visible">
+                            <div class="flex cell_render">
                                 <span>手机服务</span>
-                                <img class="ml-4" src="@/assets/site/filter.svg" />
                             </div>
-                            <el-select v-model="value" placeholder="请选择">
-                                <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                                </el-option>
-                            </el-select>
+                            <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>
@@ -84,6 +83,15 @@
                         <el-link type="primary" :href="siteSettingUrl" target="_blank">站点设置</el-link>
                     </el-table-column>
                 </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>
@@ -100,7 +108,8 @@ 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 GuipInput from '@/components/GuipInput.vue';
+import GuipDialog from '@/components/GuipDialog.vue';
 
 // import { mapState } from 'vuex'
 // import store from '@/store';
@@ -115,13 +124,20 @@ export default {
         GuipSelect,
         // HoverButton,
         GuipButton,
-        // GuipInput,
+        GuipInput,
+        GuipDialog,
     },
     data() {
         return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            // 表格加载
             tableLoading: true,
+            // 站点列表
             siteList: [],
+            // 站点分组
             siteGroups: [],
+            // 分组id
             gid: 0,
             serviceListUrl: '/ui',
             siteSettingUrl: '/ui',
@@ -133,6 +149,16 @@ export default {
             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: '',
         }
     },
     mounted() {
@@ -140,11 +166,6 @@ export default {
         this.getSiteGroups()
     },
     methods: {
-        init() {
-            this.gid = this.$route.query.gid
-            this.getSiteList()
-            //this.getSiteGroups()
-        },
         getSiteList() {
             this.tableLoading = true
             const that = this
@@ -153,7 +174,7 @@ export default {
                 gid: this.gid,
             },{
                 headers:{
-                    'Auth': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU'
+                    'Auth': this.token
                 }
             }).then(response => {
                 this.tableLoading = false
@@ -172,7 +193,7 @@ export default {
                 gid: this.gid,
             },{
                 headers:{
-                    'Auth': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU'
+                    'Auth': this.token
                 }
             }).then(response => {
                 this.$nextTick(() => {
@@ -184,7 +205,7 @@ export default {
             })
         },
         // 点击站点分组单元格时触发
-        showGroupSetting(row, index) {
+        groupSetting(row, index) {
             // 如果存在分组 则显示已设置分组
             this.selected_group = '';
             if (row.group) {
@@ -205,13 +226,13 @@ export default {
             this.toggleIcon();
         },
         // 保存站点分组
-        addSiteGroup(row) {
+        addSiteGroupIndex(row) {
             this.$http('POST', '/agentnew/ajax_add_site_group_index', {
                 groupid: this.selected_group,
                 uid: row.uid,
             },{
                 headers:{
-                    'Auth': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU'
+                    'Auth': this.token
                 }
             }).then(response => {
                 if (response.status) {
@@ -236,7 +257,7 @@ export default {
             })
         },
         // 取消编辑
-        cancleGroupSetting(row) {
+        cancleGroupIndexSetting(row) {
             // 关闭弹框
             row['showPopover'] = false;
             this.popoverFlag = false
@@ -261,6 +282,51 @@ export default {
             // 单选的时候是 对象
             console.log(data, '表格行信息');
         },
+        // 弹框相关方法---start
+        showAddGroup() {
+            console.log('点击了添加分组');
+            this.addGroupDialogVisible = true;
+        },
+        // 确认按钮事件
+        addGroup() {
+            this.addGroupDialogVisible = false;
+
+            this.$http('POST', '/agentnew/ajax_add_site_group', {
+                name: this.groupname,
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    if (response.status) {
+                        this.$message.success(response.info);
+                        // 更新分组
+                        this.getSiteGroups()
+                        // 清空分组名称
+                        this.groupname = ''
+                    } else {
+                        this.$message.error(response.info);
+                    }
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        // 取消按钮事件
+        cancleAddGroup() {
+            console.log('点击了取消按钮');
+            this.addGroupDialogVisible = false;
+        },
+        // 关闭弹框事件
+        closeAddGroup() {
+            console.log('弹框已关闭');
+            this.addGroupDialogVisible = false;
+        },
+        addGroupDialogVisibleChange(data) {
+            console.log(data, 'data098908090');
+        },
+        // 弹框相关方法---end
     },
     computed: {
         filteredSites() {
@@ -269,9 +335,20 @@ export default {
             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);
+                } else if (this.currentPhoneService == 2) {
+                    result = result.filter(site => site.is_open_xcx == 1);
+                }
+            }
+
             console.log(result, 'result');
             return result;
         }
+        
     },
 }
 </script>
@@ -307,6 +384,9 @@ export default {
 .ml-4 {
     margin-left: 4px;
 }
+.mt-6 {
+    margin-top: 6px;
+}
 
 .red {
     color: #FF4D4F;