UI改版测试V0
This commit is contained in:
liuwei
@@ -3,362 +3,100 @@
|
||||
{% block title %}虚拟群组管理 - 机器人管理后台{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- 虚拟群组管理 -->
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>虚拟群组管理</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="float: right; margin-left: 10px;"
|
||||
@click="showCreateVirtualGroupDialog">
|
||||
创建虚拟群组
|
||||
</el-button>
|
||||
<el-input
|
||||
placeholder="搜索虚拟群组..."
|
||||
v-model="searchQuery"
|
||||
style="width: 200px; float: right"
|
||||
clearable>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 虚拟群组列表 -->
|
||||
<el-table
|
||||
:data="filteredVirtualGroups"
|
||||
style="width: 100%"
|
||||
border>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-table
|
||||
:data="props.row.groups"
|
||||
style="width: 100%">
|
||||
<el-table-column label="微信群ID" prop="id" width="280"></el-table-column>
|
||||
<el-table-column label="微信群名称" prop="name"></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="removeGroupFromVirtual(props.row.id, scope.row.id)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-button size="small" type="primary" @click="showAddGroupDialog(props.row)">添加微信群</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="虚拟群组名称" prop="name"></el-table-column>
|
||||
<el-table-column label="包含群数量">
|
||||
<template slot-scope="scope">
|
||||
{% raw %}{{ scope.row.groups.length }}{% endraw %} 个群
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="editVirtualGroup(scope.row)">编辑</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="deleteVirtualGroup(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div class="page-shell virtual-page">
|
||||
<div class="page-hero">
|
||||
<div class="page-hero-copy">
|
||||
<div class="page-eyebrow">Virtual Groups Workspace</div>
|
||||
<h1>虚拟群组管理</h1>
|
||||
<p>管理虚拟群组与其包含的微信群，让分组运营与消息路由更清楚。</p>
|
||||
</div>
|
||||
<div class="page-hero-actions">
|
||||
<el-input placeholder="搜索虚拟群组..." v-model="searchQuery" class="hero-search" clearable>
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="showCreateVirtualGroupDialog">创建虚拟群组</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="16" class="overview-grid">
|
||||
<el-col :span="8"><el-card class="overview-card overview-card--primary"><div class="overview-label">虚拟群组数</div><div class="overview-value">{% raw %}{{ virtualGroups.length }}{% endraw %}</div><div class="overview-note">当前定义的虚拟群组数量</div></el-card></el-col>
|
||||
<el-col :span="8"><el-card class="overview-card"><div class="overview-label">可用微信群</div><div class="overview-value">{% raw %}{{ allGroups.length }}{% endraw %}</div><div class="overview-note">可纳入虚拟群组的微信群</div></el-card></el-col>
|
||||
<el-col :span="8"><el-card class="overview-card overview-card--soft"><div class="overview-label">筛选结果</div><div class="overview-value">{% raw %}{{ filteredVirtualGroups.length }}{% endraw %}</div><div class="overview-note">当前搜索命中的虚拟群组</div></el-card></el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 创建虚拟群组对话框 -->
|
||||
<el-dialog
|
||||
title="创建虚拟群组"
|
||||
:visible.sync="createVirtualGroupDialogVisible"
|
||||
width="30%">
|
||||
|
||||
<el-card class="workspace-card" shadow="hover">
|
||||
<div slot="header" class="workspace-header"><div><h3>虚拟群组列表</h3><p>展开每个虚拟群组可以查看其包含的微信群并进行增删。</p></div></div>
|
||||
<el-table :data="filteredVirtualGroups" style="width:100%">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<div class="expand-shell">
|
||||
<el-table :data="props.row.groups" style="width:100%">
|
||||
<el-table-column label="微信群ID" prop="id" width="280"></el-table-column>
|
||||
<el-table-column label="微信群名称" prop="name"></el-table-column>
|
||||
<el-table-column label="操作" width="120"><template slot-scope="scope"><el-button size="mini" type="danger" @click="removeGroupFromVirtual(props.row.id, scope.row.id)">移除</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<div class="expand-actions"><el-button size="small" type="primary" @click="showAddGroupDialog(props.row)">添加微信群</el-button></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="虚拟群组名称" min-width="260"><template slot-scope="scope"><div class="entity-cell"><div class="entity-badge">{% raw %}{{ scope.$index + 1 }}{% endraw %}</div><div class="entity-copy"><div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div><div class="entity-subtitle">ID: {% raw %}{{ scope.row.id }}{% endraw %}</div></div></div></template></el-table-column>
|
||||
<el-table-column label="包含群数量" width="140" align="center"><template slot-scope="scope">{% raw %}{{ scope.row.groups.length }}{% endraw %} 个群</template></el-table-column>
|
||||
<el-table-column label="操作" width="220"><template slot-scope="scope"><div class="action-row"><el-button size="mini" type="primary" plain @click="editVirtualGroup(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="deleteVirtualGroup(scope.row)">删除</el-button></div></template></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog title="创建虚拟群组" :visible.sync="createVirtualGroupDialogVisible" width="30%">
|
||||
<div class="dialog-intro">为一组微信群创建统一的虚拟分组名称，方便集中管理。</div>
|
||||
<el-form :model="virtualGroupForm" :rules="virtualGroupRules" ref="virtualGroupForm">
|
||||
<el-form-item label="群组名称" prop="name">
|
||||
<el-input v-model="virtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="群组名称" prop="name"><el-input v-model="virtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input></el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="createVirtualGroupDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitCreateVirtualGroup">确定</el-button>
|
||||
</span>
|
||||
<span slot="footer" class="dialog-footer"><el-button @click="createVirtualGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitCreateVirtualGroup">确定</el-button></span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑虚拟群组对话框 -->
|
||||
<el-dialog
|
||||
title="编辑虚拟群组"
|
||||
:visible.sync="editVirtualGroupDialogVisible"
|
||||
width="30%">
|
||||
|
||||
<el-dialog title="编辑虚拟群组" :visible.sync="editVirtualGroupDialogVisible" width="30%">
|
||||
<div class="dialog-intro">修改虚拟群组名称，不影响已包含的微信群列表。</div>
|
||||
<el-form :model="editVirtualGroupForm" :rules="virtualGroupRules" ref="editVirtualGroupForm">
|
||||
<el-form-item label="群组名称" prop="name">
|
||||
<el-input v-model="editVirtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="群组名称" prop="name"><el-input v-model="editVirtualGroupForm.name" placeholder="请输入虚拟群组名称"></el-input></el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="editVirtualGroupDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitEditVirtualGroup">确定</el-button>
|
||||
</span>
|
||||
<span slot="footer" class="dialog-footer"><el-button @click="editVirtualGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitEditVirtualGroup">确定</el-button></span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加微信群对话框 -->
|
||||
<el-dialog
|
||||
title="添加微信群到虚拟群组"
|
||||
:visible.sync="addGroupDialogVisible"
|
||||
width="50%">
|
||||
|
||||
<el-dialog title="添加微信群到虚拟群组" :visible.sync="addGroupDialogVisible" width="50%">
|
||||
<div class="dialog-intro">从可用微信群中选择一个加入当前虚拟群组。</div>
|
||||
<el-form :model="addGroupForm" :rules="addGroupRules" ref="addGroupForm">
|
||||
<el-form-item label="选择微信群" prop="wx_group_id">
|
||||
<el-select
|
||||
v-model="addGroupForm.wx_group_id"
|
||||
filterable
|
||||
placeholder="请选择微信群"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="group in availableGroups"
|
||||
:key="group.wxid"
|
||||
:label="group.name"
|
||||
:value="group.wxid">
|
||||
<span style="float: left">{% raw %}{{ group.name }}{% endraw %}</span>
|
||||
<span style="float: right; color: #94a3b8; font-size: 13px">{% raw %}{{ group.wxid }}{% endraw %}</span>
|
||||
</el-option>
|
||||
<el-select v-model="addGroupForm.wx_group_id" filterable placeholder="请选择微信群" style="width:100%">
|
||||
<el-option v-for="group in availableGroups" :key="group.wxid" :label="group.name" :value="group.wxid"><span style="float:left">{% raw %}{{ group.name }}{% endraw %}</span><span style="float:right;color:#94a3b8;font-size:13px">{% raw %}{{ group.wxid }}{% endraw %}</span></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addGroupDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitAddGroup">确定</el-button>
|
||||
</span>
|
||||
<span slot="footer" class="dialog-footer"><el-button @click="addGroupDialogVisible = false">取消</el-button><el-button type="primary" @click="submitAddGroup">确定</el-button></span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
mixins: [baseApp],
|
||||
data() {
|
||||
return {
|
||||
virtualGroups: [],
|
||||
searchQuery: '',
|
||||
// 创建虚拟群组相关数据
|
||||
createVirtualGroupDialogVisible: false,
|
||||
virtualGroupForm: {
|
||||
name: ''
|
||||
},
|
||||
virtualGroupRules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入虚拟群组名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 编辑虚拟群组相关数据
|
||||
editVirtualGroupDialogVisible: false,
|
||||
editVirtualGroupForm: {
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
// 添加微信群相关数据
|
||||
addGroupDialogVisible: false,
|
||||
currentVirtualGroupId: '',
|
||||
addGroupForm: {
|
||||
wx_group_id: ''
|
||||
},
|
||||
addGroupRules: {
|
||||
wx_group_id: [
|
||||
{ required: true, message: '请选择微信群', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
availableGroups: [],
|
||||
allGroups: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredVirtualGroups() {
|
||||
if (!this.searchQuery) return this.virtualGroups;
|
||||
const query = this.searchQuery.toLowerCase();
|
||||
return this.virtualGroups.filter(group =>
|
||||
group.name.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.currentView = '12'; // 设置当前视图为虚拟群组管理
|
||||
this.loadVirtualGroups();
|
||||
this.loadAllGroups();
|
||||
},
|
||||
methods: {
|
||||
loadVirtualGroups() {
|
||||
axios.get('/virtual_group/api/virtual_groups')
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.virtualGroups = response.data.data.chatGroups || [];
|
||||
} else {
|
||||
this.$message.error('加载虚拟群组失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载虚拟群组失败:', error);
|
||||
this.$message.error('加载虚拟群组失败');
|
||||
});
|
||||
},
|
||||
loadAllGroups() {
|
||||
axios.get('/contacts/api/groups')
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
const groups = response.data.data.groups;
|
||||
this.allGroups = Object.entries(groups).map(([wxid, name]) => ({
|
||||
wxid,
|
||||
name: name || wxid
|
||||
}));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载群组列表失败:', error);
|
||||
this.$message.error('加载群组列表失败');
|
||||
});
|
||||
},
|
||||
showCreateVirtualGroupDialog() {
|
||||
this.virtualGroupForm = { name: '' };
|
||||
this.createVirtualGroupDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.virtualGroupForm && this.$refs.virtualGroupForm.clearValidate();
|
||||
});
|
||||
},
|
||||
submitCreateVirtualGroup() {
|
||||
this.$refs.virtualGroupForm.validate(valid => {
|
||||
if (valid) {
|
||||
axios.post('/virtual_group/api/virtual_groups', this.virtualGroupForm)
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('创建虚拟群组成功');
|
||||
this.createVirtualGroupDialogVisible = false;
|
||||
this.loadVirtualGroups();
|
||||
} else {
|
||||
this.$message.error(response.data.error || '创建虚拟群组失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('创建虚拟群组失败:', error);
|
||||
this.$message.error('创建虚拟群组失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
editVirtualGroup(group) {
|
||||
this.editVirtualGroupForm = {
|
||||
id: group.id,
|
||||
name: group.name
|
||||
};
|
||||
this.editVirtualGroupDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editVirtualGroupForm && this.$refs.editVirtualGroupForm.clearValidate();
|
||||
});
|
||||
},
|
||||
submitEditVirtualGroup() {
|
||||
this.$refs.editVirtualGroupForm.validate(valid => {
|
||||
if (valid) {
|
||||
axios.put(`/virtual_group/api/virtual_groups/${this.editVirtualGroupForm.id}`, {
|
||||
name: this.editVirtualGroupForm.name
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('更新虚拟群组成功');
|
||||
this.editVirtualGroupDialogVisible = false;
|
||||
this.loadVirtualGroups();
|
||||
} else {
|
||||
this.$message.error(response.data.error || '更新虚拟群组失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新虚拟群组失败:', error);
|
||||
this.$message.error('更新虚拟群组失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteVirtualGroup(group) {
|
||||
this.$confirm(`确定要删除虚拟群组 "${group.name}" 吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
axios.delete(`/virtual_group/api/virtual_groups/${group.id}`)
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('删除虚拟群组成功');
|
||||
this.loadVirtualGroups();
|
||||
} else {
|
||||
this.$message.error(response.data.error || '删除虚拟群组失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除虚拟群组失败:', error);
|
||||
this.$message.error('删除虚拟群组失败');
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
showAddGroupDialog(virtualGroup) {
|
||||
this.currentVirtualGroupId = virtualGroup.id;
|
||||
this.addGroupForm = { wx_group_id: '' };
|
||||
|
||||
// 过滤掉已经在虚拟群组中的微信群
|
||||
const existingGroupIds = virtualGroup.groups.map(g => g.id);
|
||||
this.availableGroups = this.allGroups.filter(g => !existingGroupIds.includes(g.wxid));
|
||||
|
||||
this.addGroupDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addGroupForm && this.$refs.addGroupForm.clearValidate();
|
||||
});
|
||||
},
|
||||
submitAddGroup() {
|
||||
this.$refs.addGroupForm.validate(valid => {
|
||||
if (valid) {
|
||||
axios.post(`/virtual_group/api/virtual_groups/${this.currentVirtualGroupId}/groups`, {
|
||||
wx_group_id: this.addGroupForm.wx_group_id
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('添加微信群成功');
|
||||
this.addGroupDialogVisible = false;
|
||||
this.loadVirtualGroups();
|
||||
} else {
|
||||
this.$message.error(response.data.error || '添加微信群失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加微信群失败:', error);
|
||||
this.$message.error('添加微信群失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
removeGroupFromVirtual(virtualGroupId, wxGroupId) {
|
||||
this.$confirm('确定要从虚拟群组中移除该微信群吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
axios.delete(`/virtual_group/api/virtual_groups/${virtualGroupId}/groups/${wxGroupId}`)
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('移除微信群成功');
|
||||
this.loadVirtualGroups();
|
||||
} else {
|
||||
this.$message.error(response.data.error || '移除微信群失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('移除微信群失败:', error);
|
||||
this.$message.error('移除微信群失败');
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
new Vue({
|
||||
el:'#app', mixins:[baseApp],
|
||||
data(){ return { virtualGroups:[], searchQuery:'', createVirtualGroupDialogVisible:false, virtualGroupForm:{name:''}, virtualGroupRules:{name:[{required:true,message:'请输入虚拟群组名称',trigger:'blur'}]}, editVirtualGroupDialogVisible:false, editVirtualGroupForm:{id:'',name:''}, addGroupDialogVisible:false, currentVirtualGroupId:'', addGroupForm:{wx_group_id:''}, addGroupRules:{wx_group_id:[{required:true,message:'请选择微信群',trigger:'change'}]}, availableGroups:[], allGroups:[] } },
|
||||
computed:{ filteredVirtualGroups(){ if(!this.searchQuery) return this.virtualGroups; const query=this.searchQuery.toLowerCase(); return this.virtualGroups.filter(group=>group.name.toLowerCase().includes(query)); } },
|
||||
mounted(){ this.currentView='12'; this.loadVirtualGroups(); this.loadAllGroups(); },
|
||||
methods:{
|
||||
loadVirtualGroups(){ axios.get('/virtual_group/api/virtual_groups').then(response=>{ if(response.data.success){ this.virtualGroups=response.data.data.chatGroups||[]; } else { this.$message.error('加载虚拟群组失败'); } }).catch(error=>{ console.error('加载虚拟群组失败:', error); this.$message.error('加载虚拟群组失败'); }); },
|
||||
loadAllGroups(){ axios.get('/contacts/api/groups').then(response=>{ if(response.data.success){ const groups=response.data.data.groups; this.allGroups=Object.entries(groups).map(([wxid,name])=>({wxid,name:name||wxid})); } }).catch(error=>{ console.error('加载群组列表失败:', error); this.$message.error('加载群组列表失败'); }); },
|
||||
showCreateVirtualGroupDialog(){ this.virtualGroupForm={name:''}; this.createVirtualGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.virtualGroupForm&&this.$refs.virtualGroupForm.clearValidate(); }); },
|
||||
submitCreateVirtualGroup(){ this.$refs.virtualGroupForm.validate(valid=>{ if(valid){ axios.post('/virtual_group/api/virtual_groups', this.virtualGroupForm).then(response=>{ if(response.data.success){ this.$message.success('创建虚拟群组成功'); this.createVirtualGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'创建虚拟群组失败'); } }).catch(error=>{ console.error('创建虚拟群组失败:', error); this.$message.error('创建虚拟群组失败'); }); } }); },
|
||||
editVirtualGroup(group){ this.editVirtualGroupForm={ id:group.id, name:group.name }; this.editVirtualGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.editVirtualGroupForm&&this.$refs.editVirtualGroupForm.clearValidate(); }); },
|
||||
submitEditVirtualGroup(){ this.$refs.editVirtualGroupForm.validate(valid=>{ if(valid){ axios.put(`/virtual_group/api/virtual_groups/${this.editVirtualGroupForm.id}`, { name:this.editVirtualGroupForm.name }).then(response=>{ if(response.data.success){ this.$message.success('更新虚拟群组成功'); this.editVirtualGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'更新虚拟群组失败'); } }).catch(error=>{ console.error('更新虚拟群组失败:', error); this.$message.error('更新虚拟群组失败'); }); } }); },
|
||||
deleteVirtualGroup(group){ this.$confirm(`确定要删除虚拟群组 "${group.name}" 吗?`,'提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{ axios.delete(`/virtual_group/api/virtual_groups/${group.id}`).then(response=>{ if(response.data.success){ this.$message.success('删除虚拟群组成功'); this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'删除虚拟群组失败'); } }).catch(error=>{ console.error('删除虚拟群组失败:', error); this.$message.error('删除虚拟群组失败'); }); }).catch(()=>{}); },
|
||||
showAddGroupDialog(virtualGroup){ this.currentVirtualGroupId=virtualGroup.id; this.addGroupForm={ wx_group_id:'' }; const existingGroupIds=virtualGroup.groups.map(g=>g.id); this.availableGroups=this.allGroups.filter(g=>!existingGroupIds.includes(g.wxid)); this.addGroupDialogVisible=true; this.$nextTick(()=>{ this.$refs.addGroupForm&&this.$refs.addGroupForm.clearValidate(); }); },
|
||||
submitAddGroup(){ this.$refs.addGroupForm.validate(valid=>{ if(valid){ axios.post(`/virtual_group/api/virtual_groups/${this.currentVirtualGroupId}/groups`, { wx_group_id:this.addGroupForm.wx_group_id }).then(response=>{ if(response.data.success){ this.$message.success('添加微信群成功'); this.addGroupDialogVisible=false; this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'添加微信群失败'); } }).catch(error=>{ console.error('添加微信群失败:', error); this.$message.error('添加微信群失败'); }); } }); },
|
||||
removeGroupFromVirtual(virtualGroupId, wxGroupId){ this.$confirm('确定要从虚拟群组中移除该微信群吗?','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{ axios.delete(`/virtual_group/api/virtual_groups/${virtualGroupId}/groups/${wxGroupId}`).then(response=>{ if(response.data.success){ this.$message.success('移除微信群成功'); this.loadVirtualGroups(); } else { this.$message.error(response.data.error||'移除微信群失败'); } }).catch(error=>{ console.error('移除微信群失败:', error); this.$message.error('移除微信群失败'); }); }).catch(()=>{}); }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.page-shell{display:flex;flex-direction:column;gap:16px}.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(59,130,246,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}.page-hero-actions{display:flex;align-items:center;gap:12px}.hero-search{width:260px}.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;font-weight:700;margin-bottom:8px}.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}.page-hero-copy p{color:#64748b;font-size:14px}.overview-grid .el-col{margin-bottom:16px}.overview-card{min-height:112px}.overview-card--primary{background:linear-gradient(180deg, rgba(79,70,229,.10), rgba(255,255,255,.94)) !important}.overview-card--soft{background:linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.94)) !important}.overview-label{font-size:13px;color:#64748b;margin-bottom:14px}.overview-value{font-size:30px;font-weight:700;color:#0f172a;margin-bottom:10px}.overview-note{font-size:12px;color:#94a3b8}.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.workspace-header h3{font-size:18px;margin-bottom:4px}.workspace-header p{font-size:13px;color:#64748b}.entity-cell{display:flex;align-items:center;gap:12px}.entity-badge{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(79,70,229,.10);color:#4f46e5;font-size:12px;font-weight:700;flex-shrink:0}.entity-title{font-size:14px;font-weight:600;color:#0f172a}.entity-subtitle{margin-top:4px;font-size:12px;color:#94a3b8}.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.expand-shell{padding:8px 0}.expand-actions{margin-top:12px}.dialog-intro{margin-bottom:14px;color:#64748b;font-size:13px}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user