You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
10 KiB
258 lines
10 KiB
<!-- 站点列表 -->
|
|
<!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
|
|
:filter-method="filterHandler" -->
|
|
<template>
|
|
<div class="siteList-wrap column">
|
|
<div class="siteList-main ">
|
|
<div class="flex-between">
|
|
<div class="left flex">
|
|
<h2>站点列表</h2>
|
|
<GuipButton size="medium" type="normal" @click="cancelEdit(row, 'price')">
|
|
<img src="@/assets/site/form_link.svg" alt="">新增分组
|
|
</GuipButton>
|
|
</div>
|
|
<div class="right">
|
|
<GuipButton size="medium" @click="cancelEdit(row, 'price')">
|
|
<img src="@/assets/site/form_link.svg" alt="">新增分组
|
|
</GuipButton>
|
|
</div>
|
|
</div>
|
|
<el-form>
|
|
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
|
|
style="width: 100%" :key="random()">
|
|
<!-- 其他列 -->
|
|
<el-table-column prop="name" label="站点简称" width="210">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<span class="">{{ scope.row.name }}</span>
|
|
<img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="registerDate" label="注册时间"></el-table-column>
|
|
|
|
<!-- 价格列 -->
|
|
<el-table-column label="站点分组">
|
|
<template v-slot="{ row, $index }">
|
|
<el-popover v-model="row.price_popover" placement="top" trigger="manual"
|
|
:ref="`popover-${$index}`" @show="popshow">
|
|
<!-- 弹框内容 -->
|
|
|
|
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
|
|
<div class="flex"
|
|
style="text-align: right; margin-top: 32px;justify-content: flex-end;">
|
|
<GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
|
|
<GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定
|
|
</GuipButton>
|
|
</div>
|
|
<!-- 触发弹框的按钮 -->
|
|
<span slot="reference" @click="handlePriceClick(row, $index, 'price')">
|
|
<div class="flex cell_render">
|
|
<span v-if="row.group" :key="random()">{{ groupList[row.group] }}</span>
|
|
<img class="edit_icon" src="@/assets/site/drop_icon.svg" alt="">
|
|
</div>
|
|
</span>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
|
|
:filter-method="filterHandler">
|
|
<template v-slot="{ row, $index }">
|
|
<el-popover v-model="row.num_popover" placement="top" trigger="manual"
|
|
:ref="`popover-${$index}`" @show="popshow">
|
|
<!-- 弹框内容 -->
|
|
<div style="text-align: center">
|
|
<div class="flex"
|
|
style="text-align: right; margin-top: 32px;justify-content: flex-end;">
|
|
<GuipButton size="medium" @click="cancelEdit(row, 'phoneService')">取消
|
|
</GuipButton>
|
|
<GuipButton type="primary" @click="savePrice(row, 'phoneService')"
|
|
size="medium">确定
|
|
</GuipButton>
|
|
</div>
|
|
</div>
|
|
<!-- 触发弹框的按钮 -->
|
|
<span slot="reference" @click="handlePriceClick(row, $index, 'phoneService')">
|
|
<div class="flex cell_render">
|
|
<span>{{ row.phoneService }}</span>
|
|
</div>
|
|
</span>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="195">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render" @click="popPayMentModal(scope.row)">
|
|
<span :class="(scope.row.status == '0' ? 'in_services' : 'in_config')">{{
|
|
scope.row.status
|
|
==
|
|
'0' ? '运行中' : '配置中' }}</span>
|
|
<img class="edit_icon" src="@/assets/site/more_setIcon.png" alt="">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="182">
|
|
<template slot-scope="scope">
|
|
<div class="flex">
|
|
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
|
|
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
|
|
:total="tableData.length">
|
|
</el-pagination>
|
|
</el-form>
|
|
</div>
|
|
<Footer></Footer>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Footer from '@/components/Footer.vue';
|
|
// import GuipInput from '@/components/GuipInput.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
|
|
export default {
|
|
name: 'sitelist',
|
|
components: {
|
|
// HelloWorld
|
|
// GuipInput,
|
|
Footer,
|
|
GuipButton
|
|
},
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
name: '哈哈哈',
|
|
registerDate: '2025.02.18',
|
|
group: '1',
|
|
phoneService: '',
|
|
status: '1',//配置中中
|
|
},
|
|
{
|
|
name: '知网学诚教育',
|
|
registerDate: '2025.02.18',
|
|
group: '2',
|
|
phoneService: '',
|
|
status: '0',//运行中
|
|
},
|
|
],
|
|
groupList: {
|
|
1: '内部测试',
|
|
2: '查重站点'
|
|
},
|
|
phoneServicelist:
|
|
{
|
|
0: '不限',
|
|
1: ' H5',
|
|
2: '小程序',
|
|
3: '无手机服务'
|
|
|
|
},
|
|
currentPage: 1, //当前页
|
|
pageSize: 2, //每页的容量
|
|
total: 0, //列表总数
|
|
phoneService: [
|
|
{
|
|
text: '不限',
|
|
value: '0'
|
|
},
|
|
{
|
|
text: 'H5',
|
|
value: '1'
|
|
},
|
|
{
|
|
text: '小程序',
|
|
value: '2'
|
|
},
|
|
{
|
|
text: 'H5以及小程序',
|
|
value: '3'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
popshow() {
|
|
var ariaEls = document.querySelectorAll('.el-popover')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
|
|
ariaEls = document.querySelectorAll('.el-radio__original')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
},
|
|
random() {
|
|
var randomNumber = Math.random();
|
|
return randomNumber
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
},
|
|
// 列筛选
|
|
filterHandler(value, row, column) {
|
|
const property = column['property'];
|
|
return row[property] === value;
|
|
},
|
|
handleSetClick(row) {
|
|
console.log(row);
|
|
},
|
|
handleServiceClick(row) {
|
|
console.log(row);
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.siteList-wrap {
|
|
padding: 12px;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.in_services {
|
|
color: #0DAF49;
|
|
}
|
|
|
|
.in_config {
|
|
color: #FF4D4F;
|
|
}
|
|
|
|
.siteList-main {
|
|
flex: 1;
|
|
padding: 32px 36px;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
// span {
|
|
// color: #1E2226;
|
|
// }
|
|
|
|
.edit_icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: none;
|
|
transition: all .3s;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.el-table__row:hover {
|
|
.edit_icon {
|
|
display: block;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|