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.
464 lines
14 KiB
464 lines
14 KiB
<template> |
|
<div style="padding: 30px 40px 50px" class="statementInfo"> |
|
<div style="width: 100%; position: absolute; top: 15px; left: 0"> |
|
<div style="display: flex; align-items: center; padding-left: 20px"> |
|
<svg-icon icon-class="iconsiji2" style="font-size: 30px; margin-right: 10px" /> |
|
<span>结算单详情</span> |
|
</div> |
|
<el-divider style="width: 100%"></el-divider> |
|
</div> |
|
<el-row> |
|
<el-form ref="form" :model="importData" label-width="110px" size="mini"> |
|
<el-row class="borderBody"> |
|
<el-col :span="6"> |
|
<span class="spanLabel">结算单号</span> |
|
<br /> |
|
<span>{{ importData.settlementNo }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">审核状态</span> |
|
<br /> |
|
<el-tag effect="dark" :type="accountStateEnum.find(item => item.value == importData.auditState).type"> |
|
{{ accountStateEnum.find(item => item.value == importData.auditState).label }} |
|
</el-tag> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">客户类型</span> |
|
<br /> |
|
<span>{{ importData.settlementType == 1 ? '企业' : '炼厂' }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">客户名称</span> |
|
<br /> |
|
<span>{{ importData.settlementObjectName }}</span> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<span class="spanLabel">结算总金额</span> |
|
<br /> |
|
<span>{{ importData.settlementAmount }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">订单总金额</span> |
|
<br /> |
|
<span>{{ importData.orderAmount }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">充值总金额</span> |
|
<br /> |
|
<span>{{ importData.rechargeAmount }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">开票总金额</span> |
|
<br /> |
|
<span>{{ importData.invoicedAmount }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-col :span="12"> |
|
<span class="spanLabel">创建人</span> |
|
<br /> |
|
<span>{{ importData.createUserName }}</span> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-popover :disabled="!importData.createMark" placement="bottom" width="200" trigger="click" :content="importData.createMark"> |
|
<el-button slot="reference" size="mini">查看创建备注</el-button> |
|
</el-popover> |
|
</el-col> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">创建时间</span> |
|
<br /> |
|
<span>{{ importData.createTime }}</span> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-col :span="12"> |
|
<span class="spanLabel">审核人</span> |
|
<br /> |
|
<span>{{ importData.auditUserName }}</span> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-popover :disabled="!importData.auditMark" placement="bottom" width="200" trigger="click" :content="importData.auditMark"> |
|
<el-button slot="reference" size="mini">查看审核备注</el-button> |
|
</el-popover> |
|
</el-col> |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="spanLabel">审核时间</span> |
|
<br /> |
|
<span>{{ importData.auditTime }}</span> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
</el-row> |
|
<div slot="table"> |
|
<!--这里放表格和分页--> |
|
<!-- 列表开始 --> |
|
<el-table |
|
:max-height="tableHeight" |
|
:header-cell-style="{ background: '#f5f5f5' }" |
|
show-summary |
|
stripe |
|
:summary-method="getSummaries" |
|
:data="importData.orders" |
|
fit |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
> |
|
<el-table-column label="序号" type="index" :index="indexMethod" /> |
|
<template v-for="(item, index) in tableColumns"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:align="item.align" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
/> |
|
</template> |
|
</el-table> |
|
<!-- 列表结束 --> |
|
</div> |
|
<div class="button-style" :span="24"> |
|
<el-divider style="width: 100%"></el-divider> |
|
<el-button @click="close(1)" style="margin-right: 10px">关闭</el-button> |
|
<el-button v-if="importData.auditState == 0" type="primary" @click="submit" style="margin-right: 10px">结算单审核 </el-button> |
|
</div> |
|
<el-dialog class="dialogInfo" append-to-body :visible.sync="submitDialog" v-if="submitDialog" width="500px"> |
|
<el-form class="messageConfirm" ref="form" :model="importData" label-width="110px" size="mini"> |
|
<div style="width: 100%; position: absolute; top: 15px; left: 0"> |
|
<div style="display: flex; align-items: center; padding-left: 20px"> |
|
<div style="width: 5px; height: 20px; background: #1890ff"></div> |
|
<span style="margin-left: 10px">结算单审核</span> |
|
</div> |
|
<el-divider style="width: 100%"></el-divider> |
|
</div> |
|
<el-row style="padding: 0 20px"> |
|
<div style="width: 100%; margin-bottom: 35px; display: flex; align-items: center"> |
|
<img v-if="importData.settlementType == 1" style="width: 18px" src="../../assets/img/oilFinalStatement/jiesuandanQiye.png" alt="" /> |
|
<span style="margin-left: 10px">{{ importData.settlementObjectName }}</span> |
|
</div> |
|
<el-form-item label="结算总金额" prop="settlementAmount"> |
|
<span>{{ importData.settlementAmount }}元</span> |
|
</el-form-item> |
|
<el-form-item label="订单总金额" prop="orderAmount"> |
|
<span>{{ importData.orderAmount }}元</span> |
|
</el-form-item> |
|
<el-form-item label="充值总金额" prop="rechargeAmount"> |
|
<span>{{ importData.rechargeAmount }}元</span> |
|
</el-form-item> |
|
<el-form-item label="开票总金额" prop="realAmount"> |
|
<span>{{ importData.invoicedAmount }}元</span> |
|
</el-form-item> |
|
<el-form-item label="结算周期" prop="realAmount"> |
|
<span>{{ createT }}至 {{ endT }}</span> |
|
</el-form-item> |
|
<el-form-item label="订单总数" prop="companyName"> |
|
<span>{{ importData.orderQuantity }}条</span> |
|
</el-form-item> |
|
|
|
<el-form-item label="审核备注" prop="auditMark" style="width: 100%"> |
|
<el-input type="textarea" v-model="importData.auditMark"></el-input> |
|
</el-form-item> |
|
<div style="color: red; text-align: center; font-weight: 600">注意：确认后，无法再修改。请确认此次该的结算信息是否正确</div> |
|
</el-row> |
|
<div :span="24" style="margin-top: 50px; text-align: center; width: 100%"> |
|
<el-divider style="width: 100%"></el-divider> |
|
<div style="display: flex; justify-content: end; width: 90%; margin: 0 auto"> |
|
<el-button @click="close" size="mini">关闭</el-button> |
|
<el-button size="mini" type="danger" @click="save(-1)">审核驳回</el-button> |
|
<el-button size="mini" type="primary" @click="save(1)">审核通过</el-button> |
|
</div> |
|
</div> |
|
</el-form> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import internalCompanyApi from '@/api/user/internalCompany' |
|
|
|
export default { |
|
filters: {}, |
|
props: { |
|
importData: { |
|
type: Object, |
|
default() {} |
|
} |
|
}, |
|
data() { |
|
return { |
|
tableHeight: document.documentElement.clientHeight - 470 - 55, |
|
companyList: [], |
|
roleList: [], |
|
roleTypeList: [], |
|
submitDialog: false, |
|
accountStateEnum: [ |
|
{ |
|
label: '待审核', |
|
value: 0, |
|
type: 'warning' |
|
}, |
|
{ |
|
label: '已审核', |
|
value: 1, |
|
type: 'success' |
|
}, |
|
{ |
|
label: '审核失败', |
|
value: -1, |
|
type: 'danger' |
|
} |
|
], |
|
tableColumns: [ |
|
{ |
|
prop: 'id', |
|
minWidth: 180, |
|
label: '订单号', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell |
|
} |
|
}, |
|
|
|
{ |
|
prop: 'actAmount', |
|
minWidth: 120, |
|
label: '订单金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
cell = Number(cell).toFixed(2) |
|
return cell ? cell : '0.00' |
|
} |
|
}, |
|
{ |
|
prop: 'customerSettleAmount', |
|
minWidth: 120, |
|
label: '结算金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
cell = Number(cell).toFixed(2) |
|
return cell ? cell : '0.00' |
|
} |
|
}, |
|
{ |
|
prop: 'customerSettleAmount', |
|
minWidth: 120, |
|
label: '充值金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
cell = Number(cell).toFixed(2) |
|
return cell ? cell : '0.00' |
|
} |
|
}, |
|
{ |
|
prop: 'customerSettleAmount', |
|
minWidth: 120, |
|
label: '开票金额', |
|
show: true, |
|
render: (row, column, cell) => { |
|
cell = Number(cell).toFixed(2) |
|
return cell ? cell : '0.00' |
|
} |
|
}, |
|
{ |
|
prop: 'createTime', |
|
minWidth: 150, |
|
label: '创建日期', |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell |
|
} |
|
} |
|
], |
|
createT: '', |
|
endT: '' |
|
} |
|
}, |
|
created() { |
|
// 增加监听事件，窗口变化时得到高度。 |
|
window.addEventListener('resize', this.getHeight, false) |
|
}, |
|
methods: { |
|
settlement(val, data) { |
|
if (val == 0) { |
|
return '待审核' |
|
} |
|
if (val == 1) { |
|
return '已审核' |
|
} |
|
if (val == -1) { |
|
return '审核失败' |
|
} |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1 |
|
}, |
|
getHeight() { |
|
// 获取浏览器高度并计算得到表格所用高度。 |
|
this.tableHeight = document.documentElement.clientHeight - 470 - 55 |
|
}, |
|
close(val) { |
|
if (val == 1) { |
|
this.$emit('closeDialog') |
|
this.tableColumns = [] |
|
} else { |
|
this.submitDialog = false |
|
} |
|
}, |
|
submit() { |
|
let payRealAmountEnd = [] |
|
let customerSettleAmountList = [] |
|
this.importData.orders.forEach(item => { |
|
this.endT = item.createTime |
|
payRealAmountEnd.push(item.actAmount ? item.actAmount : '0') |
|
|
|
customerSettleAmountList.push(item.customerSettleAmount ? item.customerSettleAmount : '0') |
|
}) |
|
function sum(val) { |
|
return eval(val.join('+')) |
|
} |
|
this.importData.settlementAmount = Number(sum(customerSettleAmountList)).toFixed(2) |
|
this.importData.orderAmount = Number(sum(payRealAmountEnd)).toFixed(2) |
|
this.importData.rechargeAmount = Number(sum(customerSettleAmountList)).toFixed(2) |
|
this.importData.invoicedAmount = Number(sum(customerSettleAmountList)).toFixed(2) |
|
|
|
this.endT = this.endT.split(' ')[0] |
|
this.createT = this.importData.orders[0].createTime.split(' ')[0] |
|
this.submitDialog = true |
|
}, |
|
|
|
save(val) { |
|
var data = { |
|
id: this.importData.id, |
|
confirmSource: 'XOIL_OMS_WEB', |
|
settlementType: this.importData.settlementType |
|
} |
|
if (val == -1) { |
|
data.auditState = -1 |
|
} else if (val == 1) { |
|
data.auditState = 1 |
|
} |
|
|
|
data.auditMark = this.importData.auditMark |
|
internalCompanyApi.update(data).then(res => { |
|
if (res.code == 20000) { |
|
this.importData = res.data |
|
this.$message.success('操作成功') |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
} |
|
}) |
|
}, |
|
getSummaries(param) { |
|
const { columns, data } = param |
|
const sums = [] |
|
let actAmount = 0 // 订单金额 |
|
let customerSettleAmount = 0 // 充值=结算=开票 |
|
data.forEach(item => { |
|
customerSettleAmount += Number(item.customerSettleAmount) |
|
actAmount += Number(item.actAmount) |
|
}) |
|
columns.forEach((column, index) => { |
|
if (index === 0) { |
|
sums[index] = '合计' |
|
return |
|
} |
|
if (this.importData.settlementType == 1) { |
|
switch ( |
|
column.property // column.property可以匹配它的每一列的命名， 然后赋值 |
|
) { |
|
case 'customerSettleAmount': |
|
sums[index] = customerSettleAmount.toFixed(2) + '元' // 值取自后台 |
|
break |
|
case 'actAmount': |
|
sums[index] = actAmount.toFixed(2) + '元' |
|
break |
|
|
|
default: |
|
break |
|
} |
|
} |
|
}) |
|
|
|
return sums |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
.el-divider--horizontal { |
|
margin: 10px 0; |
|
} |
|
.el-form-item__content >>> .el-date-editor.el-input { |
|
width: 100%; |
|
} |
|
.el-divider--horizontal { |
|
margin: 10px 0; |
|
} |
|
.borderBody { |
|
box-shadow: 0px 0px 3px 0px #c1c1c1; |
|
padding: 20px 15px; |
|
margin-bottom: 30px; |
|
font-size: 14px; |
|
} |
|
.borderBody >>> .el-col { |
|
height: 55px; |
|
margin-bottom: 15px; |
|
padding-left: 10px; |
|
} |
|
.borderBody >>> .spanLabel { |
|
display: inline-block; |
|
color: #606266; |
|
font-weight: 700; |
|
margin-bottom: 10px; |
|
} |
|
.statementInfo >>> .el-table--fit th.gutter { |
|
background: #f5f5f5; |
|
} |
|
.el-dialog__wrapper >>> .el-dialog__header { |
|
text-align: center; |
|
} |
|
.dialogInfo >>> .el-dialog__body { |
|
padding: 10px 20px; |
|
} |
|
.dialogInfo .el-button { |
|
width: 80px; |
|
} |
|
.button-style { |
|
margin-top: 20px; |
|
text-align: right; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 15px; |
|
left: 0; |
|
} |
|
.button-style .el-button { |
|
width: 120px; |
|
} |
|
.el-form-item--mini.el-form-item { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.el-form-item--mini >>> .el-form-item__content { |
|
margin-left: 0 !important; |
|
} |
|
.messageConfirm .el-row { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-top: 25px; |
|
justify-content: space-between; |
|
} |
|
.messageConfirm .el-form-item { |
|
display: flex; |
|
flex-direction: column; |
|
width: 40%; |
|
align-items: normal; |
|
} |
|
.messageConfirm >>> .el-form-item__label { |
|
text-align: left; |
|
} |
|
</style>
|
|
|