zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增分组 分组筛选

pull/51/head
rainbro 2 weeks ago
parent
1f6292b638
commit
2a48b99e14
1 changed files with 109 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      src/views/agent/siteList.vue

138
src/views/agent/siteList.vue
View File

@ -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;

Write Preview
Loading…
Cancel
Save