<template>
<div style="margin:10px;">
<el-card>
<el-table ref="multipleTable" :data="tableData" border style="100%;">
<el-table-column type="index" label="序号" width="200px" align="center"> </el-table-column>
<el-table-column prop="name" label="寄存人姓名" align="center"></el-table-column>
<el-table-column prop="mobile" label="寄存人联系方式" align="center"></el-table-column>
<el-table-column prop="pieces" label="寄存件数" align="center"></el-table-column>
<el-table-column prop="pay_count" label="支付金额" align="center"></el-table-column>
<el-table-column prop="location_desp" label="寄存位置" align="center"></el-table-column>
<el-table-column prop="mobile" label="状态" align="center" :formatter="formatter"></el-table-column>
<el-table-column prop="picture" label="图片" align="center">
<template slot-scope="{row}">
//点击图片放大下载第三方包：cnpm i v-viewer
<div v-if="row.picture" v-viewer>
<img v-for="item in row.picture.split(',')" :src="item" :key="item" style="80px;height:80px;margin-left:10px;" />
</div>
</template>
</el-table-column>
<el-table-column prop="disabled" label="是否可用" align="center">
<template slot-scope="scope">
<span>{{scope.row.disabled == 0 ? '不可用' : '可用'}}</span>
</template>
</el-table-column>
<el-table-column prop="in_time" label="存入时间" align="center"></el-table-column>
<el-table-column prop="pay_type" label="支付方式" align="center">
<template slot-scope="scope">
<span>{{scope.row.pay_type == 1 ? '支付宝' : (scope.row.pay_type == 2 ? '微信' : '现金')}}</span>
</template>
</el-table-column>
<el-table-column prop="pay_status" label="支付状态" align="center">
<template slot-scope="scope">
<span>{{scope.row.pay_status == 0 ? '未支付' : '已支付'}}</span>
</template>
</el-table-column>
<el-table-column prop="invoice_status" label="发票状态" align="center">
<template slot-scope="scope">
<span>{{scope.row.invoice_status == 0 ? '未开发票' : '已开发票'}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" >
<template slot-scope="scope">
<el-button type="text" @click="changeStatus(scope.row)">开放设置</el-button>
<el-button type="text" @click="changeDisabled(scope.row)">可用设置</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination class="page-container" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]"
background :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
@current-change="handleCurrentChange" @size-change="handleSizeChange" />
</el-card>
</div>
</template>
<script>
import { queryRecordList } from '@/api/deposit.js' //后台接口定义的方法
export default {
data() {
return {
tableData:[],
currentPage:1,
pageSize:10,
total:0
}
},
created () {
this.getRecordList();
},
methods: {
formatter(row){
if(row.status == 1) {
return '未存入'
}else if(row.status == 2){
return '已存入'
}else if(row.status == 3){
return '已提取'
}else if(row.status == 4){
return '已取消（工作人员取消）'
}else if(row.status == 5){
return '已取消（用户主动取消）'
}
},
getRecordList() {
let params = {
pageIndex:this.currentPage,
pageSize:this.pageSize
}
queryRecordList(params).then(res=>{
this.tableData = res.data.records
res.data.records.map(e => {
e.in_time = e.in_time ? e.in_time.split('.')[0].replace('T', ' ') : '';
return e
});
})
},
handleCurrentChange(val) {
this.currentPage = val
this.getPageList(val)
},
getPageList(val) {
this.$nextTick(() => {
this.getRecordList(val, this.tableData.size)
})
},
handleSizeChange(val) {
this.pageSize = val
// 重新请求数据
this.getRecordList(val)
},
},
};
</script>
<style>
img {
border-style: none;
300px;
}
</style>
<style scoped>
</style>