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
da88a444db
commit
674091a7be
1 changed files with 119 additions and 109 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. 228
      src/views/agent/siteList.vue

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

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

Write Preview
Loading…
Cancel
Save