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

Write Preview
Loading…
Cancel
Save