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.
332 lines
10 KiB
332 lines
10 KiB
<template> |
|
<div class="order"> |
|
<div class="frame"> |
|
<autocomplete class="mr20" :params="parameter.params" :config="configAutocomplete" /> |
|
<autocomplete class="mr20" :params="parameter.params" :config="configAutocompleteaccount" /> |
|
<el-select |
|
v-model="parameter.params.createUser" |
|
filterable |
|
remote |
|
reserve-keyword |
|
clearable |
|
placeholder="请输入姓名/手机号码" |
|
:remote-method="searchUserInfo" |
|
> |
|
<el-option v-for="item in sysCustomerList" :key="item.id" :label="item.userName" :value="item.id"> |
|
{{ item.phone }} ( {{ item.userName }} - {{ item.userCode }}) |
|
</el-option> |
|
</el-select> |
|
<!-- <el-input v-model="parameter.params.creater" placeholder="创建人姓名或手机号" clearable></el-input> --> |
|
<el-select v-model="parameter.params.transactionType" placeholder="交易类型" clearable> |
|
<el-option v-for="(item, index) in rechargeTypeEnum" :key="index" :label="item.label" :value="item.value"> </el-option> |
|
</el-select> |
|
<el-date-picker |
|
v-model="datetime" |
|
type="datetimerange" |
|
align="right" |
|
start-placeholder="开始时间" |
|
end-placeholder="结束时间" |
|
:default-time="['00:00:00', '23:59:59']" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
@change="changeDateTime" |
|
> |
|
</el-date-picker> |
|
<div class="buttons"> |
|
<el-button icon="el-icon-search" @click="search">查询</el-button> |
|
<el-button icon="el-icon-refresh" @click="reset">重置</el-button> |
|
</div> |
|
</div> |
|
<div class="table"> |
|
<div class="operation"></div> |
|
<el-table v-if="tableHeight" ref="multipleTable" :height="tableHeight" :data="tableData" style="width: 100%"> |
|
<el-table-column label="序号" type="index" :index="indexMethod" align="center" /> |
|
<el-table-column prop="refineryName" label="炼厂信息" show-overflow-tooltip align="center" min-width="180"> |
|
<template slot-scope="{ row }"> |
|
<p>{{ row.refineryName }}</p> |
|
<p>{{ row.refineryId }}</p> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="transactionType" label="交易类型" show-overflow-tooltip align="center"> |
|
<template slot-scope="{ row }"> |
|
<p> |
|
{{ rechargeTypeEnum.find(item => item.value == row.transactionType).label }} |
|
</p> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="transactionAmount" label="发生金额" align="center"></el-table-column> |
|
<el-table-column prop="balance" label="账户余额" align="center"> |
|
<template slot-scope="{ row }"> |
|
<p>上次：{{ row.lastBalance }}</p> |
|
<p>当前：{{ row.currentBalance }}</p> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="rechargeBalance" label="充值余额" align="center"> |
|
<template slot-scope="{ row }"> |
|
<p>上次：{{ row.lastRechargeBalance }}</p> |
|
<p>当前：{{ row.currentRechargeBalance }}</p> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="totalRechargeBalance" label="创建信息" align="center" min-width="180"> |
|
<template slot-scope="{ row }"> |
|
<p>{{ row.userName }}</p> |
|
<p>{{ row.createTime }}</p> |
|
</template> |
|
</el-table-column> |
|
|
|
<el-table-column label="操作" width="100"> |
|
<template slot-scope="{ row }"> |
|
<el-link type="primary" :underline="false" @click="detailBefore(row)">详情</el-link> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 分页 --> |
|
<pagination :parameter="parameter" @searchAgain="getByPage" /> |
|
</div> |
|
|
|
<el-drawer title="详情" direction="ltr" size="60%" :withHeader="false" :visible.sync="controlWindows.detail"> |
|
<general-details |
|
class="pft14" |
|
title="详情" |
|
:isHeader="true" |
|
v-if="controlWindows.detail" |
|
:sourceData="oilCompanyMatch" |
|
:mappingData="mappingData" |
|
:mappingData2="mappingData2" |
|
@close="controlWindows.detail = false" |
|
> |
|
<template #refineryType> |
|
<p> |
|
{{ refineryTypeEnum.find(item => item.value == oilCompanyMatch[0].accountType).label }} |
|
</p> |
|
</template> |
|
<template #accountStatus> |
|
<p> |
|
{{ oilCompanyMatch[0].accountStatus === 'ENABLE' ? '启用' : '禁用' }} |
|
</p> |
|
</template> |
|
</general-details> |
|
</el-drawer> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import serve from 'api/refineryAccount/accountDetails.js' |
|
|
|
import pagination from 'components/pagination/index.vue' |
|
import autocomplete from 'components/autocomplete/index.vue' |
|
import generalDetails from './components/generalDetails.vue' |
|
|
|
import { rechargeTypeEnum, refineryTypeEnum, refineryAccountTypeEnum } from 'utils/dataType.js' |
|
|
|
export default { |
|
components: { |
|
pagination, |
|
autocomplete, |
|
generalDetails |
|
}, |
|
data() { |
|
return { |
|
rechargeTypeEnum: rechargeTypeEnum, |
|
refineryTypeEnum: refineryTypeEnum, |
|
refineryAccountTypeEnum: refineryAccountTypeEnum, |
|
controlWindows: { |
|
addInfo: {}, |
|
detail: false |
|
}, |
|
configAutocomplete: { |
|
serveTarget: serve.getLikeByName, |
|
autocompleteKey: 'refineryName', |
|
labelKey: 'refineryName', |
|
valueKey: 'id', |
|
placeholder: '炼厂名称', |
|
querykey: 'refineryId' |
|
}, |
|
configAutocompleteaccount: { |
|
serveTarget: serve.getLikeRefineryAccount, |
|
autocompleteKey: 'accountName', |
|
labelKey: 'accountName', |
|
valueKey: 'id', |
|
placeholder: '炼厂账户名称', |
|
querykey: 'refineryAccountId' |
|
}, |
|
refineryList: [], |
|
tableHeight: 0, |
|
tableData: [], |
|
parameter: { |
|
currentPage: 1, |
|
pageSize: 10, |
|
total: 0, |
|
params: {} |
|
}, |
|
oilCompanyMatch: {}, |
|
mappingData: [ |
|
{ |
|
carTitle: '炼厂账户明细基础信息', |
|
carItems: [ |
|
{ label: '炼厂名称', value: 'refineryName' }, |
|
{ label: '炼厂ID', value: 'refineryId' }, |
|
{ label: '炼厂账户名称', value: 'accountName' }, |
|
{ label: '炼厂账户ID', value: 'refineryAccountId' }, |
|
{ label: '订单ID', value: 'orderId' }, |
|
{ label: '业务申请ID', value: 'reverseId' } |
|
] |
|
} |
|
], |
|
mappingData2: [ |
|
{ |
|
carTitle: '炼厂账户明细财务信息', |
|
carItems: [ |
|
{ label: '发生金额', value: 'transactionAmount' }, |
|
{ label: '交易类型', value: 'transactionType' }, |
|
{ label: '上次累计充值金额', value: 'lastTotalRechargeAmount' }, |
|
{ label: '当前累计充值金额', value: 'currentTotalRechargeAmount' }, |
|
{ label: '上次账户总余额', value: 'lastBalance' }, |
|
{ label: '当前账户总余额', value: 'currentBalance' }, |
|
{ label: '上次充值金额', value: 'lastRechargeBalance' }, |
|
{ label: '当前充值金额', value: 'currentRechargeBalance' }, |
|
{ label: '创建人', value: 'userName' }, |
|
{ label: '创建时间', value: 'createTime' }, |
|
{ label: '创建系统', value: 'createSource' } |
|
] |
|
} |
|
], |
|
datetime: [], |
|
sysCustomerList: [] |
|
} |
|
}, |
|
|
|
mounted() { |
|
this.$nextTick(() => { |
|
this.heightHandle() |
|
}) |
|
window.addEventListener('resize', this.$utils.debounce(this.heightHandle, 500)) |
|
}, |
|
created() { |
|
this.getByPage() |
|
}, |
|
methods: { |
|
search() { |
|
this.parameter.currentPage = 1 |
|
this.getByPage() |
|
}, |
|
// table list |
|
getByPage() { |
|
serve.getByPage(this.parameter).then(res => { |
|
this.tableData = res.data.list |
|
this.parameter.total = res.data.totalCount |
|
}) |
|
}, |
|
// 详情接口 |
|
detailBefore(row) { |
|
serve.getById(row.id).then(res => { |
|
this.detail(res.data) |
|
}) |
|
}, |
|
// 详情 |
|
detail(row) { |
|
this.oilCompanyMatch = [row] |
|
this.controlWindows.detail = true |
|
}, |
|
// 重置 |
|
reset() { |
|
Object.assign(this.parameter, { |
|
currentPage: 1, |
|
pageSize: 10, |
|
params: {} |
|
}) |
|
this.datetime = [] |
|
}, |
|
// table height |
|
heightHandle() { |
|
let bodyHeight = document.body.clientHeight |
|
let frameHeight = this.obtainElement('.frame').clientHeight |
|
let operationHeight = this.obtainElement('.operation').clientHeight |
|
let paginationHeight = this.obtainElement('.el-pagination').clientHeight |
|
this.tableHeight = bodyHeight - frameHeight - operationHeight - paginationHeight - 145 |
|
}, |
|
obtainElement(className) { |
|
return document.documentElement.querySelector(className) |
|
}, |
|
changeDateTime(val) { |
|
if (val) { |
|
this.parameter.params.startCreateTime = val[0] |
|
this.parameter.params.endCreateTime = val[1] |
|
} |
|
}, |
|
indexMethod(index) { |
|
return index + 1 |
|
}, |
|
searchUserInfo(info) { |
|
if (info && info !== '') { |
|
serve.searchInfo(info).then(res => { |
|
this.sysCustomerList = res.data |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.order { |
|
.pft14 { |
|
font-size: 14px; |
|
} |
|
.frame { |
|
margin: 20px; |
|
padding: 20px; |
|
// width: 100%; |
|
border-radius: 6px; |
|
border: 1px solid #e3e3e5; |
|
background: #fff; |
|
.el-input, |
|
.el-select { |
|
width: 183px; |
|
height: 40px; |
|
} |
|
.el-autocomplete + .el-select, |
|
.el-input + .el-input, |
|
.el-input + .el-select, |
|
.el-select + .el-select, |
|
.el-select + .el-input { |
|
margin-right: 20px; |
|
margin-bottom: 15px; |
|
} |
|
.mr20 { |
|
margin-right: 20px; |
|
} |
|
.buttons { |
|
text-align: right; |
|
} |
|
} |
|
|
|
.table { |
|
overflow: hidden; |
|
margin: 0 20px; |
|
padding-bottom: 20px; |
|
background: #fff; |
|
border-radius: 6px; |
|
border: 1px solid #e3e3e5; |
|
> .operation { |
|
box-sizing: content-box; |
|
padding: 15px; |
|
} |
|
.gray { |
|
color: #999; |
|
span { |
|
color: #333; |
|
} |
|
} |
|
.el-table { |
|
margin-bottom: 20px; |
|
border-radius: 10px 10px 0px 0px; |
|
} |
|
.el-link { |
|
margin-right: 10px; |
|
} |
|
} |
|
.pft14 { |
|
font-size: 14px; |
|
} |
|
} |
|
</style>
|
|
|