|
|
|
@ -2,147 +2,257 @@ |
|
|
|
<!-- :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"> |
|
|
|
<el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%" |
|
|
|
:key="random()"> |
|
|
|
<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"> |
|
|
|
<span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助' |
|
|
|
}}</span> |
|
|
|
<span class="">{{ scope.row.name }}</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="stock" label="今日供货价"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="flex cell_render"> |
|
|
|
<span>¥{{ scope.row.stock }}/篇</span> |
|
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt=""> |
|
|
|
<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="售价"> |
|
|
|
<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-popover v-model="row.price_popover" placement="top" trigger="manual" |
|
|
|
:ref="`popover-${$index}`" @show="popshow"> |
|
|
|
<!-- 弹框内容 --> |
|
|
|
<div style="text-align: center"> |
|
|
|
<GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价" |
|
|
|
placeholder="请输入售价" unit="元"> |
|
|
|
</GuipInput> |
|
|
|
<div v-else class="flex"> |
|
|
|
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价" |
|
|
|
unit="元"> |
|
|
|
</GuipInput> |
|
|
|
<span class="shortspan">/</span> |
|
|
|
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符"> |
|
|
|
</GuipInput> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> --> |
|
|
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
|
|
|
<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> |
|
|
|
<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.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span> |
|
|
|
<span v-else :key="random()">¥{{ row.price }}/篇</span> |
|
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt=""> |
|
|
|
<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="stock" label="排序"> |
|
|
|
<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"> |
|
|
|
<el-popover v-model="row.num_popover" placement="top" trigger="manual" |
|
|
|
:ref="`popover-${$index}`" @show="popshow"> |
|
|
|
<!-- 弹框内容 --> |
|
|
|
<div style="text-align: center"> |
|
|
|
<GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字"> |
|
|
|
</GuipInput> |
|
|
|
<p style=" width: 252px; |
|
|
|
margin-left: 40px; |
|
|
|
text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p> |
|
|
|
<!-- <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, 'num')">取消</GuipButton> |
|
|
|
<GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton> |
|
|
|
<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, 'num')"> |
|
|
|
<span slot="reference" @click="handlePriceClick(row, $index, 'phoneService')"> |
|
|
|
<div class="flex cell_render"> |
|
|
|
<span>{{ row.num }}</span> |
|
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt=""> |
|
|
|
<span>{{ row.phoneService }}</span> |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</el-popover> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="stock" label="收款方式" width="195"> |
|
|
|
<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.payment == '0' ? 'normal_payment' : 'self_payment')">{{ scope.row.payment |
|
|
|
<span :class="(scope.row.status == '0' ? 'in_services' : 'in_config')">{{ |
|
|
|
scope.row.status |
|
|
|
== |
|
|
|
'0' ? '默认站点支付' : '自定义支付' }}</span> |
|
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt=""> |
|
|
|
'0' ? '运行中' : '配置中' }}</span> |
|
|
|
<img class="edit_icon" src="@/assets/site/more_setIcon.png" alt=""> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="stock" label="状态"> |
|
|
|
<!-- <template slot-scope="scope"> |
|
|
|
<GuipSwitch :modelValue="scope.row.homeFlag" @change="onSwitchChange(scope.row)"> |
|
|
|
</GuipSwitch> |
|
|
|
</template> --> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" width="112"> |
|
|
|
<el-table-column fixed="right" label="操作" width="182"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="flex"> |
|
|
|
<el-button type="text">服务列表</el-button> |
|
|
|
<el-button @click="handleClick(scope.row)" type="text">站点设置</el-button> |
|
|
|
<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="tableData1.length"> |
|
|
|
: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: 'HomeView', |
|
|
|
name: 'sitelist', |
|
|
|
components: { |
|
|
|
// HelloWorld |
|
|
|
// GuipInput, |
|
|
|
Footer, |
|
|
|
GuipButton |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData1:[], |
|
|
|
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: '无手机服务' |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
// HelloWorld |
|
|
|
Footer, |
|
|
|
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"> |
|
|
|
<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> |
zq
2 months ago
