初始化项目
This commit is contained in:
18500206848
417
src/views/workstation/workbench/index - 副本.vue
Normal file
417
src/views/workstation/workbench/index - 副本.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="benchWarp">
|
||||
<!-- top -->
|
||||
<div class="benchTop">
|
||||
<!-- 合作企业概况 -->
|
||||
<div class="bgWhite survey">
|
||||
<div class="title">合作企业概况</div>
|
||||
<div class="content">
|
||||
<div class="box" v-for="item in survey" :key="item.title">
|
||||
<p class="surveyTitle">{{item.title}}</p>
|
||||
<p class="surveyNum">{{negativeTurnZero(item.num)}}</p>
|
||||
<button class="lookDetail" @click="goEnterprise(item)">查看明细</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 待处理事项 -->
|
||||
<div class="bgWhite pending">
|
||||
<div class="title">待处理事项</div>
|
||||
<div class="content">
|
||||
<div class="box" v-for="item in pending" :key="item.title">
|
||||
<p class="pendingTitle">{{item.title}}</p>
|
||||
<p class="pendingNum">{{negativeTurnZero(item.num)}}</p>
|
||||
<button class="lookDetail" @click="goTask(item)">去跟进</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom -->
|
||||
<div class="benchBottom">
|
||||
<!-- 邀请码动态 -->
|
||||
<div class="bgWhite invitationCode">
|
||||
<div class="title">邀请码动态</div>
|
||||
<div style="height: 19px;"></div>
|
||||
<bench :table-data="benchData" :total="total" :width="tableWidth" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></bench>
|
||||
</div>
|
||||
<!-- 在线客服 -->
|
||||
<div class="tips">
|
||||
<div class="bgWhite customerService">
|
||||
<div class="title">在线客服</div>
|
||||
<div class="customerContent">
|
||||
<div class="img"></div>
|
||||
<div class="font">
|
||||
<p>扫码在线咨询</p>
|
||||
<div style="height: 10px;"></div>
|
||||
<p>周一至周六 9:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息中心 -->
|
||||
<div class="bgWhite tip">
|
||||
<div class="tipTop">
|
||||
<div class="title">客户消息</div>
|
||||
<div class="more" @click="goUrl('/tenant/news/index')">更多></div>
|
||||
</div>
|
||||
<div style="height: 9px;"></div>
|
||||
<div v-if="manage.length === 0" style="text-align: center;color: #909399;height: 276px;line-height: 276px;">暂无数据</div>
|
||||
<div v-else class="tipListBox">
|
||||
<div v-for="item in manage" :key="item">
|
||||
<p @click="lookNews(item)" style="cursor:pointer;">[<span>{{item.categoryName}}</span>] {{item.title}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer
|
||||
title="查看"
|
||||
:with-header="false"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:size="drawerSize">
|
||||
<div v-html="content">
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 占位 -->
|
||||
<div style="height: 35px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bench from "./table/bench";
|
||||
import {getWorkbenchCompanySurveyVO, getMissionTodoVO, getinviteDynamicVOList} from '@/api/workstation/workbench'
|
||||
import { getList } from "@/api/tenant/notice";
|
||||
import { getNotice } from "@/api/desk/notice";
|
||||
import {setStore} from '@/util/store'
|
||||
import { negativeTurnZero } from "@/util/validate";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {bench},
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
drawerSize: '1000px',
|
||||
content: '',
|
||||
tableWidth: 100+'%',
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
survey: [
|
||||
{
|
||||
title: '绑定企业',
|
||||
num: 0,
|
||||
status: 2
|
||||
},
|
||||
{
|
||||
title: '审核中企业',
|
||||
num: 0,
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
title: '已开户企业',
|
||||
num: 0,
|
||||
status: 2
|
||||
},
|
||||
],
|
||||
pending: [
|
||||
// {
|
||||
// title: '逾期未支付任务',
|
||||
// num: 0,
|
||||
// status: 2,
|
||||
// url: '/workstation/task/index'
|
||||
// },
|
||||
{
|
||||
title: '逾期未支付的服务费订单',
|
||||
num: 0,
|
||||
status: 1,
|
||||
url: `/workstation/orderGoods/index?jlStatus=jlStatus`
|
||||
},
|
||||
{
|
||||
title: '超30天未发任务',
|
||||
num: 0,
|
||||
status: 1,
|
||||
url: '/workstation/task/index'
|
||||
},
|
||||
],
|
||||
manage: [],
|
||||
benchData: []
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.getWorkbenchCompanySurveyVO()
|
||||
await this.getMissionTodoVO()
|
||||
await this.getinviteDynamicVOList()
|
||||
await this.newsInit()
|
||||
},
|
||||
mounted() {
|
||||
this.tableWidth = document.getElementsByClassName('benchWarp')[0].clientWidth - 305 + 'px'
|
||||
},
|
||||
methods: {
|
||||
negativeTurnZero,
|
||||
lookNews (item) {
|
||||
getNotice(item.id).then((res) => {
|
||||
const data = res.data.data;
|
||||
this.drawer = true
|
||||
this.content = data.content
|
||||
});
|
||||
},
|
||||
newsInit() {
|
||||
var userType = 3
|
||||
if (this.loginType === 'Type-T') {
|
||||
userType = 1
|
||||
} else if (this.loginType === 'Type-S') {
|
||||
userType = 3
|
||||
}
|
||||
getList(
|
||||
1,
|
||||
10,
|
||||
{},
|
||||
userType
|
||||
).then((res) => {
|
||||
this.manage = res.data.data.records;
|
||||
});
|
||||
},
|
||||
goUrl (url) {
|
||||
this.$router.push(url)
|
||||
},
|
||||
getinviteDynamicVOList () {
|
||||
var params = {
|
||||
current: this.current,
|
||||
size: this.size
|
||||
}
|
||||
getinviteDynamicVOList(params).then(res => {
|
||||
this.benchData = res.data.data.records
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
getWorkbenchCompanySurveyVO(){
|
||||
getWorkbenchCompanySurveyVO().then(e => {
|
||||
this.survey[0].num = e.data.data.bind
|
||||
this.survey[1].num = e.data.data.examine
|
||||
this.survey[2].num = e.data.data.openAccount
|
||||
})
|
||||
},
|
||||
getMissionTodoVO(){
|
||||
getMissionTodoVO().then(e => {
|
||||
this.pending[0].num = e.data.data.overdueInsure
|
||||
this.pending[1].num = e.data.data.missionBeforeMarch
|
||||
})
|
||||
},
|
||||
goTask(item){
|
||||
setStore({name: 'taskStatus', content: item.status, type: 'session'})
|
||||
this.$router.push(item.url)
|
||||
},
|
||||
goEnterprise (item){
|
||||
setStore({name: 'enterpriseStatus', content: item.status, type: 'session'})
|
||||
this.$router.push('/workstation/enterprise/index')
|
||||
},
|
||||
handleSizeChange(val){
|
||||
this.size = val
|
||||
this.getinviteDynamicVOList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.current = val
|
||||
this.getinviteDynamicVOList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p{
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* 底色 */
|
||||
.bgWhite{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
/* 标题 */
|
||||
.title{
|
||||
font-weight: bold;
|
||||
height: 30px;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
}
|
||||
.benchWarp{
|
||||
padding: 0 20px !important;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.benchTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.survey, .pending{
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.survey{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pending{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.content .box{
|
||||
text-align: center;
|
||||
}
|
||||
.content .box .surveyTitle, .pendingTitle{
|
||||
/*width: 71px;*/
|
||||
height: 25px;
|
||||
font-size: 18px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
|
||||
/*font-size: 13px;*/
|
||||
/*color: #999999;*/
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
.content .box .surveyNum, .pendingNum{
|
||||
/*width: 36px;*/
|
||||
height: 42px;
|
||||
font-size: 30px;
|
||||
/*font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
line-height: 42px;
|
||||
|
||||
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 650;*/
|
||||
margin: 15px 0 !important;
|
||||
}
|
||||
|
||||
.content .box .lookDetail{
|
||||
font-size: 18px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #3F9EFF;
|
||||
line-height: 25px;
|
||||
width: 119px;
|
||||
height: 39px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3F9EFF;
|
||||
|
||||
|
||||
/*color: #999999;*/
|
||||
/*border: 1px solid #999999;*/
|
||||
background: #FFFFFF;
|
||||
/*border-radius: 10px;*/
|
||||
/*font-size: 12px;*/
|
||||
}
|
||||
.content .box .goJob{
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
color: #0066FF;
|
||||
border: 1px solid #0066FF;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.benchBottom{
|
||||
display: flex;
|
||||
}
|
||||
.invitationCode{
|
||||
width: calc(100% - 550px);
|
||||
padding: 18px 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tips{
|
||||
width: 250px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.customerService{
|
||||
width: 414px;
|
||||
/*height: 224px;*/
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
|
||||
/*height: 120px;*/
|
||||
margin-bottom: 20px;
|
||||
padding: 18px 30px;
|
||||
}
|
||||
.customerService .customerContent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.customerService .customerContent .img{
|
||||
width: 115px;
|
||||
height: 115px;
|
||||
background: #D8D8D8;
|
||||
margin-right: 15px;
|
||||
margin-top: 20px;
|
||||
background: url("/manage/img/kefu.jpg") no-repeat;
|
||||
background-size: 115px 115px;
|
||||
}
|
||||
.customerService .customerContent .font{
|
||||
/*width: 96px;*/
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
/*font-family: PingFangSC-Regular, PingFang SC;*/
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
/*line-height: 30px;*/
|
||||
|
||||
|
||||
/*font-size: 12px;*/
|
||||
/*color: #666666;*/
|
||||
}
|
||||
.tip{
|
||||
padding: 18px 30px;
|
||||
width: 414px;
|
||||
/*height: 375px;*/
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tip .tipTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tip .tipTop .more{
|
||||
cursor: pointer;
|
||||
height: 22px;
|
||||
font-size: 16px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #3F9EFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
.tipListBox{
|
||||
height: 276px;
|
||||
overflow: auto;
|
||||
}
|
||||
.tipListBox div{
|
||||
display: flex;
|
||||
margin: 11px 0;
|
||||
}
|
||||
.tipListBox p{
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
/*font-family: PingFangSC-Regular, PingFang SC;*/
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
|
||||
|
||||
/*margin: 7px 0 !important;*/
|
||||
/*font-size: 12px;*/
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tipListBox span{
|
||||
color: #3F9EFF;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/workstation/workbench/index.jpeg
Normal file
BIN
src/views/workstation/workbench/index.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
src/views/workstation/workbench/index.png
Normal file
BIN
src/views/workstation/workbench/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 458 KiB |
212
src/views/workstation/workbench/index.vue
Normal file
212
src/views/workstation/workbench/index.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="benchWarp">
|
||||
<!-- top -->
|
||||
<div class="benchTop">
|
||||
<!-- 合作企业概况 -->
|
||||
<div class="bgWhite survey">
|
||||
<img src="./index.jpeg" width="100%" height="100%">
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom -->
|
||||
<!-- 占位 -->
|
||||
<div style="height: 35px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p{
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* 底色 */
|
||||
.bgWhite{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
/* 标题 */
|
||||
.title{
|
||||
font-weight: bold;
|
||||
height: 30px;
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
}
|
||||
.benchWarp{
|
||||
padding: 0 20px !important;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.benchTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.survey, .pending{
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.survey{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.pending{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.content .box{
|
||||
text-align: center;
|
||||
}
|
||||
.content .box .surveyTitle, .pendingTitle{
|
||||
/*width: 71px;*/
|
||||
height: 25px;
|
||||
font-size: 18px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
|
||||
/*font-size: 13px;*/
|
||||
/*color: #999999;*/
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
.content .box .surveyNum, .pendingNum{
|
||||
/*width: 36px;*/
|
||||
height: 42px;
|
||||
font-size: 30px;
|
||||
/*font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
line-height: 42px;
|
||||
|
||||
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 650;*/
|
||||
margin: 15px 0 !important;
|
||||
}
|
||||
|
||||
.content .box .lookDetail{
|
||||
font-size: 18px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #3F9EFF;
|
||||
line-height: 25px;
|
||||
width: 119px;
|
||||
height: 39px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3F9EFF;
|
||||
|
||||
|
||||
/*color: #999999;*/
|
||||
/*border: 1px solid #999999;*/
|
||||
background: #FFFFFF;
|
||||
/*border-radius: 10px;*/
|
||||
/*font-size: 12px;*/
|
||||
}
|
||||
.content .box .goJob{
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
color: #0066FF;
|
||||
border: 1px solid #0066FF;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.benchBottom{
|
||||
display: flex;
|
||||
}
|
||||
.invitationCode{
|
||||
width: calc(100% - 550px);
|
||||
padding: 18px 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tips{
|
||||
width: 250px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.customerService{
|
||||
width: 414px;
|
||||
/*height: 224px;*/
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
|
||||
/*height: 120px;*/
|
||||
margin-bottom: 20px;
|
||||
padding: 18px 30px;
|
||||
}
|
||||
.customerService .customerContent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.customerService .customerContent .img{
|
||||
width: 115px;
|
||||
height: 115px;
|
||||
background: #D8D8D8;
|
||||
margin-right: 15px;
|
||||
margin-top: 20px;
|
||||
background: url("/manage/img/kefu.jpg") no-repeat;
|
||||
background-size: 115px 115px;
|
||||
}
|
||||
.customerService .customerContent .font{
|
||||
/*width: 96px;*/
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
/*font-family: PingFangSC-Regular, PingFang SC;*/
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
/*line-height: 30px;*/
|
||||
|
||||
|
||||
/*font-size: 12px;*/
|
||||
/*color: #666666;*/
|
||||
}
|
||||
.tip{
|
||||
padding: 18px 30px;
|
||||
width: 414px;
|
||||
/*height: 375px;*/
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tip .tipTop{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tip .tipTop .more{
|
||||
cursor: pointer;
|
||||
height: 22px;
|
||||
font-size: 16px;
|
||||
/*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
|
||||
font-weight: normal;
|
||||
color: #3F9EFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
.tipListBox{
|
||||
height: 276px;
|
||||
overflow: auto;
|
||||
}
|
||||
.tipListBox div{
|
||||
display: flex;
|
||||
margin: 11px 0;
|
||||
}
|
||||
.tipListBox p{
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
/*font-family: PingFangSC-Regular, PingFang SC;*/
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
|
||||
|
||||
/*margin: 7px 0 !important;*/
|
||||
/*font-size: 12px;*/
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tipListBox span{
|
||||
color: #3F9EFF;
|
||||
}
|
||||
</style>
|
||||
131
src/views/workstation/workbench/table/bench.vue
Normal file
131
src/views/workstation/workbench/table/bench.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:style="{'width': width}"
|
||||
:height="height">
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="inviteCode"
|
||||
label="邀请码">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="realName"
|
||||
label="绑定人">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="手机号">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.phone}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="city"
|
||||
label="绑定企业">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #3F9EFF;">{{negativeTurnZero(scope.row.bind)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="address"
|
||||
label="审核中企业">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #3F9EFF;">{{negativeTurnZero(scope.row.examine)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="zip"
|
||||
label="已开户企业">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #3F9EFF;">{{negativeTurnZero(scope.row.openAccount)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="goUrl('/workstation/InvitationCode/index')">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 占位 -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div :style="{'width': width}" style="overflow: auto">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="pageSizes"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { negativeTurnZero } from "@/util/validate";
|
||||
/*
|
||||
* width 表格宽度滚动
|
||||
* pageSizes 分页数组
|
||||
* pageSize 分页默认选中
|
||||
* total 合计
|
||||
* height 表格高度
|
||||
* tableData 表格数据
|
||||
* */
|
||||
export default {
|
||||
name: "bench",
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: 1375 + 'px'
|
||||
},
|
||||
pageSizes: {
|
||||
default: [10, 20, 30, 40]
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 400
|
||||
},
|
||||
tableData: []
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
negativeTurnZero,
|
||||
goUrl(url){
|
||||
this.$router.push(url)
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.$emit('handleSizeChange', val)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.$emit('handleCurrentChange', val)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user