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.
333 lines
8.3 KiB
333 lines
8.3 KiB
<template> |
|
<basic-container> |
|
<avue-crud |
|
:option="option" |
|
:table-loading="loading" |
|
:data="data" |
|
:page.sync="page" |
|
:permission="permissionList" |
|
:before-open="beforeOpen" |
|
v-model="form" |
|
ref="crud" |
|
@row-update="rowUpdate" |
|
@row-save="rowSave" |
|
@row-del="rowDel" |
|
@search-change="searchChange" |
|
@search-reset="searchReset" |
|
@current-change="currentChange" |
|
@size-change="sizeChange" |
|
@refresh-change="refreshChange" |
|
@on-load="onLoad" |
|
> |
|
<template slot="totalFee" slot-scope="scope"> |
|
{{ printFn(scope.row.totalFee / 10000) }} |
|
</template> |
|
<template #menu="{ row }"> |
|
<el-button |
|
type="text" |
|
size="mini" |
|
icon="el-icon-view" |
|
@click="check(row)" |
|
> |
|
查看 |
|
</el-button> |
|
</template> |
|
<template slot="menuLeft"> |
|
<el-button |
|
size="small" |
|
plain |
|
type="warning" |
|
icon="el-icon-download" |
|
@click="handleExport" |
|
>导出 |
|
</el-button> |
|
</template> |
|
</avue-crud> |
|
<!-- 导出弹窗 --> |
|
<el-dialog |
|
title="导出" |
|
:visible.sync="dialogVisible" |
|
width="30%" |
|
append-to-body |
|
:before-close="handleClose" |
|
> |
|
<el-form ref="exp" :model="exp" label-width="80px" :rules="exps"> |
|
<el-form-item label="租户名称" prop="tenantId"> |
|
<el-select |
|
v-model="exp.tenantId" |
|
placeholder="请选择租户" |
|
style="width: 90%" |
|
size="mini" |
|
> |
|
<el-option |
|
v-for="(item, index) in arr" |
|
:label="item.tenantName" |
|
:value="item.tenantId" |
|
:key="index" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="日期" prop="yyyyMMdd"> |
|
<el-date-picker |
|
type="date" |
|
placeholder="请选择日期" |
|
v-model="exp.yyyyMMdd" |
|
format="yyyy-MM-dd" |
|
valueFormat="yyyyMMdd" |
|
style="width: 90%" |
|
size="mini" |
|
></el-date-picker> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleClose">取 消</el-button> |
|
<el-button type="primary" @click="submit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
<!-- 查看弹窗 --> |
|
<Dialog |
|
:visit="visit" |
|
:content="content" |
|
:title="title" |
|
@detail="detail" |
|
></Dialog> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { getDetail, getList, select } from "@/api/core/bill/dailyBill"; |
|
import { mapGetters } from "vuex"; |
|
import Dialog from "./components/check/index.vue"; |
|
import * as math from "mathjs"; |
|
import website from "@/config/website"; |
|
import { getToken } from "@/util/auth"; |
|
export default { |
|
components: { |
|
Dialog, |
|
}, |
|
data() { |
|
return { |
|
form: {}, |
|
query: {}, |
|
loading: true, |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
dialogVisible: false, |
|
exp: { |
|
tenantId: "", |
|
yyyyMMdd: "", |
|
}, |
|
arr: [], |
|
option: { |
|
tip: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
border: true, |
|
index: true, |
|
addBtn: false, |
|
viewBtn: false, |
|
editBtn: false, |
|
delBtn: false, |
|
columnBtn: false, |
|
selection: false, |
|
dialogClickModal: false, |
|
dialogWidth: "45%", |
|
column: [ |
|
{ |
|
label: "客户", |
|
prop: "tenantId", |
|
type: "radio", |
|
search: true, |
|
dicUrl: "/api1/bd-system/tenant/selectExceptAdmin", |
|
props: { |
|
label: "tenantName", |
|
value: "tenantId", |
|
}, |
|
searchLabelWidth: 90, |
|
slot: true, |
|
hide: true, |
|
editDisplay: false, |
|
}, |
|
{ |
|
label: "账单时间", |
|
type: "date", |
|
format: "yyyy-MM-dd", |
|
valueFormat: "yyyyMMdd", |
|
prop: "date", |
|
search: true, |
|
searchLabelWidth: 90, |
|
slot: true, |
|
editDisplay: false, |
|
}, |
|
|
|
{ |
|
label: "客户名称", |
|
prop: "tenantName", |
|
labelWidth: 100, |
|
searchLabelWidth: 90, |
|
slot: true, |
|
editDisplay: false, |
|
}, |
|
{ |
|
label: "API名称", |
|
prop: "apiName", |
|
editDisplay: false, |
|
}, |
|
{ |
|
label: "计费次数", |
|
prop: "totalCount", |
|
|
|
slot: true, |
|
editDisplay: false, |
|
}, |
|
{ |
|
label: "优惠次数", |
|
prop: "cacheCount", |
|
editDisplay: false, |
|
}, |
|
{ |
|
label: "账单金额(元)", |
|
prop: "totalFee", |
|
labelWidth: 100, |
|
slot: true, |
|
editDisplay: false, |
|
}, |
|
], |
|
}, |
|
data: [], |
|
exps: { |
|
tenantId: [ |
|
{ required: true, message: "请选择租户", trigger: "change" }, |
|
], |
|
yyyyMMdd: [ |
|
{ required: true, message: "请选择日期", trigger: "change" }, |
|
], |
|
}, |
|
visit: false, //查看布尔值 |
|
content: {}, //查看对象 |
|
title: "", //查看标题 |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["permission"]), |
|
permissionList() { |
|
return { |
|
viewBtn: this.vaildData(this.permission.sourceApi_view, false), |
|
editBtn: this.vaildData(this.permission.sourceApi_edit, false), |
|
delBtn: this.vaildData(this.permission.sourceApi_delete, false), |
|
}; |
|
}, |
|
}, |
|
created() { |
|
this.zhlist(); |
|
}, |
|
methods: { |
|
beforeOpen(done, type) { |
|
if (["edit", "view"].includes(type)) { |
|
getDetail(this.form.id).then((res) => { |
|
this.form = res.data.data; |
|
this.form.totalFee = this.printFn(res.data.data.totalFee / 10000); |
|
}); |
|
} |
|
done(); |
|
}, |
|
searchReset() { |
|
this.query = {}; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.query = params; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page, params); |
|
done(); |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page, this.query); |
|
}, |
|
onLoad(page, params = {}) { |
|
this.loading = true; |
|
getList( |
|
page.currentPage, |
|
page.pageSize, |
|
Object.assign(params, this.query) |
|
).then((res) => { |
|
const data = res.data.data; |
|
this.page.total = data.total; |
|
this.data = data.records; |
|
this.loading = false; |
|
}); |
|
}, |
|
//租户列表 |
|
zhlist() { |
|
select().then((res) => { |
|
if (res.data.code == 200) { |
|
this.arr = res.data.data; |
|
} |
|
}); |
|
}, |
|
//导出弹窗 |
|
handleExport() { |
|
this.dialogVisible = true; |
|
}, |
|
//关闭弹窗 |
|
handleClose() { |
|
this.dialogVisible = false; |
|
this.$refs.exp.resetFields(); |
|
}, |
|
//确认 |
|
submit() { |
|
this.$refs.exp.validate((valid) => { |
|
if (valid) { |
|
if (process.env.NODE_ENV === "production") { |
|
window.open( |
|
`http://223.99.228.240:18081/bd-core/tenant/dailybill/export-excel?${ |
|
this.website.tokenHeader |
|
}=${getToken()}&tenantId=${this.exp.tenantId}&yyyyMMdd=${ |
|
this.exp.yyyyMMdd |
|
}` |
|
); |
|
} else { |
|
window.open( |
|
`/api1/bd-core/tenant/dailybill/export-excel?${ |
|
this.website.tokenHeader |
|
}=${getToken()}&tenantId=${this.exp.tenantId}&yyyyMMdd=${ |
|
this.exp.yyyyMMdd |
|
}` |
|
); |
|
} |
|
this.dialogVisible = false; |
|
this.$refs.exp.resetFields(); |
|
} |
|
}); |
|
}, |
|
printFn(value) { |
|
const precision = 14; |
|
return Number(math.format(value, precision)); |
|
}, |
|
//查看 |
|
check(row) { |
|
this.visit = true; |
|
this.title = row.apiName; |
|
getDetail(row.id).then((res) => { |
|
this.content = res.data.data; |
|
}); |
|
}, |
|
//关闭详情 |
|
detail() { |
|
this.visit = false; |
|
this.content = {}; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style></style>
|
|
|