|
|
|
@@ -0,0 +1,487 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div class="header_main" |
|
|
|
:style="`background-image:url(${require('@/assets/images/sunVillage_info/list_head.png')})`" |
|
|
|
> |
|
|
|
凭证列表 |
|
|
|
<div class="return_btn" @click="back"></div> |
|
|
|
<div class="filter-btn" @click="filterList"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <p class="top_head_title">{{deptName}}{{yearMonth[0]}}年{{yearMonth[1]}}月份</p>--> |
|
|
|
|
|
|
|
<div class="list_main"> |
|
|
|
|
|
|
|
<paged-list |
|
|
|
ref="pagedList" |
|
|
|
:page-num.sync="queryParams.pageNum" |
|
|
|
:page-size.sync="queryParams.pageSize" |
|
|
|
:total.sync="total" |
|
|
|
:getListFunc="getListReq" |
|
|
|
v-model="dataList" |
|
|
|
:reload.sync="refreshing" |
|
|
|
> |
|
|
|
<van-collapse v-model="collapseItem" accordion> |
|
|
|
<van-collapse-item :name="index" class="item" v-for="(item,index) in dataList" :key="index"> |
|
|
|
<template #title> |
|
|
|
<div class="info" @click.stop="viewItem(item.id)"> |
|
|
|
<div class="title"> |
|
|
|
<p class="num-label">{{selectDictLabel(voucher_word, item.voucherWord)}}-{{item.num}}号</p> |
|
|
|
<p class="news_title">{{item.bookDate}}</p> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
<div class="amount-icon"></div> |
|
|
|
<span class="amount">{{item.voucherAmount}}元</span> |
|
|
|
<div class="attachment-icon"></div> |
|
|
|
<span class="attachment">{{item.attachmentAccount}}附件</span> |
|
|
|
</div> |
|
|
|
<div class="icon_approved" v-if="!!item.checkedBy"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<div v-for="(d, di) in item.detailList" :key="di" class="voucher-detail"> |
|
|
|
<van-row class="voucher-detail-item"> |
|
|
|
<van-col class="voucher-summary" span="10">{{d.voucherSummary}}</van-col> |
|
|
|
<van-col class="voucher-subject" span="8"> |
|
|
|
<div class="voucher-subject-id">{{d.subjectId}}</div><br/> |
|
|
|
<div class="voucher-subject-name">{{d.subjectNameAll}}</div> |
|
|
|
</van-col> |
|
|
|
<van-col class="voucher-amount" span="6">{{d.jieAmount ? '借' : '贷'}} ¥ {{d.jieAmount || d.daiAmount}}</van-col> |
|
|
|
</van-row> |
|
|
|
<div class="divider"></div> |
|
|
|
</div> |
|
|
|
</van-collapse-item> |
|
|
|
</van-collapse> |
|
|
|
</paged-list> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<van-popup v-model="dateVisible" position="bottom"> |
|
|
|
<van-datetime-picker |
|
|
|
ref="picker" |
|
|
|
v-model="currentDate" |
|
|
|
type="year-month" |
|
|
|
title="请选择账期" |
|
|
|
:min-date="minDate" |
|
|
|
:max-date="maxDate" |
|
|
|
@confirm="onConfirm" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import PagedList from "@/components/common/PagedList.vue"; |
|
|
|
import {voucherList} from "@/api/finance/voucher"; |
|
|
|
import {getLoginBook} from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
import {date_format, strtotime} from "@/utils"; |
|
|
|
import {houseGetDicts} from "@/utils/data"; |
|
|
|
export default { |
|
|
|
name: "voucherList", |
|
|
|
components: {PagedList}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
refreshing: false, |
|
|
|
dataList:[], |
|
|
|
total: 0, |
|
|
|
queryParams:{ |
|
|
|
pageNum:1, |
|
|
|
pageSize:10, |
|
|
|
orderByColumn:'num', |
|
|
|
isAsc:'asc', |
|
|
|
year:'', |
|
|
|
month: '', |
|
|
|
}, |
|
|
|
yearMonth:[], |
|
|
|
deptName:'', |
|
|
|
collapseItem: '', |
|
|
|
dateVisible: false, |
|
|
|
minDate: null, |
|
|
|
maxDate: null, |
|
|
|
currentDate: new Date(), |
|
|
|
voucher_word: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
let cd = this.$route.query.currentDay; |
|
|
|
houseGetDicts('voucher_word').then((resp) => { |
|
|
|
this.voucher_word = resp.data; |
|
|
|
}); |
|
|
|
getLoginBook().then((res) => { |
|
|
|
if(res.data.startDay) |
|
|
|
this.minDate = strtotime(res.data.startDay, 'yyyy-MM'); |
|
|
|
if(res.data.currentDay) |
|
|
|
this.maxDate = strtotime(res.data.currentDay, 'yyyy-MM'); |
|
|
|
if(!cd) |
|
|
|
cd = res.data.currentDay; |
|
|
|
if(cd) |
|
|
|
{ |
|
|
|
this.currentDate = strtotime(cd, 'yyyy-MM'); |
|
|
|
this.setupYearMonth(cd); |
|
|
|
} |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getList() { |
|
|
|
this.collapseItem = ''; |
|
|
|
this.refreshing = true; |
|
|
|
}, |
|
|
|
getListReq(pageInfo) { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
voucherList(this.queryParams).then((response) => { |
|
|
|
response.rows.forEach((x) => this.dataList.push(x)); |
|
|
|
resolve(response); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
gotoViewItem(id){ |
|
|
|
this.$router.push({ |
|
|
|
name: 'sunVillageInfoVoucher', |
|
|
|
query: { |
|
|
|
vocherId: id, |
|
|
|
intent: 'view', |
|
|
|
}, |
|
|
|
}).catch(() => {}); |
|
|
|
}, |
|
|
|
viewItem(id){ |
|
|
|
// 保存当前查询年月 |
|
|
|
if(this.queryParams.year && this.queryParams.month) |
|
|
|
{ |
|
|
|
this.$router.replace(`/voucherList?currentDay=${this.queryParams.year}-${this.queryParams.month}`, () => this.gotoViewItem(id), () => this.gotoViewItem(id) ); |
|
|
|
} |
|
|
|
else |
|
|
|
this.gotoViewItem(id); |
|
|
|
}, |
|
|
|
back() { |
|
|
|
this.$router.back(); |
|
|
|
}, |
|
|
|
filterList() { |
|
|
|
this.dateVisible = true; |
|
|
|
}, |
|
|
|
onConfirm(data) { |
|
|
|
this.dateVisible = false; |
|
|
|
this.setupYearMonth(date_format(data, 'yyyy-MM')); |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
setupYearMonth(ym) { |
|
|
|
if(!ym) |
|
|
|
return; |
|
|
|
this.queryParams.year = ym.substring(0, 4); |
|
|
|
this.queryParams.month = ym.substring(5, 7); |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
/deep/ .van-cell { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
/deep/ .van-collapse-item__content { |
|
|
|
padding: .2rem .1rem; |
|
|
|
} |
|
|
|
.home_wrapper{ |
|
|
|
background: #e9e9e9; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
.header_main{ |
|
|
|
height: 116px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 116px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
position: relative; |
|
|
|
.return_btn{ |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
.filter-btn{ |
|
|
|
width: 56.4px; |
|
|
|
height: 40.8px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/icon-s-fliter.png') center center no-repeat; |
|
|
|
background-size: 47px 34px; |
|
|
|
position: absolute; |
|
|
|
right: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.record_main{ |
|
|
|
padding:30px 22px; |
|
|
|
.record_det{ |
|
|
|
height: 38px; |
|
|
|
line-height: 38px; |
|
|
|
display: flex; |
|
|
|
justify-content:space-between; |
|
|
|
.year_l{ |
|
|
|
font-size: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: #858585; |
|
|
|
|
|
|
|
.unit{ |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.icon{ |
|
|
|
width: 23px; |
|
|
|
height: 12px; |
|
|
|
display: block; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_1.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-bottom: 4px; |
|
|
|
margin-right: 8px; |
|
|
|
&.zk { |
|
|
|
transform: rotate(0deg) |
|
|
|
} |
|
|
|
&.ss{ |
|
|
|
transform: rotate(180deg) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.total_r{ |
|
|
|
font-size: 26px; |
|
|
|
letter-spacing: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.record_list{ |
|
|
|
display: flex; |
|
|
|
flex-flow: wrap; |
|
|
|
margin-top: 12PX; |
|
|
|
.flex_block{ |
|
|
|
font-size: 30px; |
|
|
|
color: #878787; |
|
|
|
padding-right: 30px; |
|
|
|
&.current{ |
|
|
|
color: #4199fe; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main{ |
|
|
|
padding:15px 22px; |
|
|
|
.item{ |
|
|
|
/*height: 140px;*/ |
|
|
|
border-radius: 30px; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
padding:25px 32px; |
|
|
|
/*display: flex;*/ |
|
|
|
margin-bottom: 20px; |
|
|
|
justify-content: space-between; |
|
|
|
min-height: 140px; |
|
|
|
.info{ |
|
|
|
margin-right: 1rem; |
|
|
|
position: relative; |
|
|
|
.title{ |
|
|
|
display: flex; |
|
|
|
font-size: 32px; |
|
|
|
align-items: center; |
|
|
|
height: 58px; |
|
|
|
.icon_box{ |
|
|
|
width: 34px; |
|
|
|
display: block; |
|
|
|
height: 30px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_2.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.news_title{ |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-break: break-all; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.num-label{ |
|
|
|
margin-right: .2rem; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-break: break-all; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.tips_mark{ |
|
|
|
width: 34px; |
|
|
|
height: 34px; |
|
|
|
background: #fa0c0c; |
|
|
|
border-radius: 8px; |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
line-height: 34px; |
|
|
|
margin-left: 10px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.time{ |
|
|
|
font-size: 24px; |
|
|
|
color: #858585; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 30px; |
|
|
|
margin-top: 6px; |
|
|
|
.amount-icon{ |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/icon-s-rmb.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
color: #FF0000; |
|
|
|
} |
|
|
|
.amount{ |
|
|
|
color: #FF0000; |
|
|
|
} |
|
|
|
.attachment-icon{ |
|
|
|
margin-left: .3rem; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/icon-s-attachment.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
color: #FF0000; |
|
|
|
} |
|
|
|
.attachment{ |
|
|
|
} |
|
|
|
} |
|
|
|
.icon_approved { |
|
|
|
width: 1.5rem; |
|
|
|
height: 1.5rem; |
|
|
|
background: url("../../../assets/images/finance/theApproved.png") no-repeat; |
|
|
|
background-size: contain; |
|
|
|
position: absolute; |
|
|
|
right: 0.05rem; |
|
|
|
top: 0.15rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.operation{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: right; |
|
|
|
text-align: right; |
|
|
|
.opera_btn{ |
|
|
|
width: 52px; |
|
|
|
height: 52px; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content:center; |
|
|
|
|
|
|
|
&.delete{ |
|
|
|
background:#df0707; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon{ |
|
|
|
width: 22px; |
|
|
|
height: 29px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_7.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.edit{ |
|
|
|
background: #79cf13; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 26px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_6.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.view{ |
|
|
|
background: #3494ff; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 29px; |
|
|
|
height: 21px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_3.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.list{ |
|
|
|
background: #79cf13; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 29px; |
|
|
|
height: 21px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_10.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.bottom_tips{ |
|
|
|
font-size: 24px; |
|
|
|
color: #a7a6a6; |
|
|
|
text-align: center; |
|
|
|
margin-top: 32px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; |
|
|
|
background-size: 260px 2px; |
|
|
|
.xs{ |
|
|
|
padding:0 8px; |
|
|
|
background: #e9e9e9; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.top_head_title{ |
|
|
|
font-size: 16PX; |
|
|
|
text-align: center; |
|
|
|
padding: 15PX 0; |
|
|
|
} |
|
|
|
.voucher-detail { |
|
|
|
.voucher-detail-item { |
|
|
|
display: flex; |
|
|
|
.voucher-summary { |
|
|
|
display: flex; |
|
|
|
justify-content: left; |
|
|
|
align-items: center; |
|
|
|
font-size: 0.3rem; |
|
|
|
} |
|
|
|
.voucher-subject { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
.voucher-subject-id { |
|
|
|
text-align: center; |
|
|
|
font-size: 0.3rem; |
|
|
|
} |
|
|
|
.voucher-subject-name { |
|
|
|
text-align: center; |
|
|
|
font-size: 0.2rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.voucher-amount { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 0.3rem; |
|
|
|
color: #FF0000; |
|
|
|
} |
|
|
|
} |
|
|
|
.divider { |
|
|
|
margin: .2rem .5rem; |
|
|
|
background-color: #EEEEEE; |
|
|
|
height: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
zhaodengke
5 months ago
