|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-input v-model="listQuery.id" placeholder="收款ID" class="filter-item" />
|
|
|
+ <el-input v-model="listQuery.orderId" placeholder="订单ID" class="filter-item" />
|
|
|
+ <el-input v-model="listQuery.orderNo" placeholder="订单编号" class="filter-item" />
|
|
|
+ <el-input v-model="listQuery.userName" placeholder="客户名称" class="filter-item" />
|
|
|
+ <el-select v-model="listQuery.payWay" placeholder="收款方式" class="filter-item">
|
|
|
+ <el-option v-for="item in payWayOptions" :key="item.id" :label="item.type" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.receiptType" placeholder="收款类别" class="filter-item">
|
|
|
+ <el-option v-for="item in receiptTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.receiptStatus" placeholder="收款状态" class="filter-item">
|
|
|
+ <el-option v-for="item in receiptStatusOptions" :key="item.id" :label="item.type" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.payType" placeholder="收款账号" class="filter-item">
|
|
|
+ <el-option v-for="item in payTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.receiptProgress" placeholder="收款进度" class="filter-item">
|
|
|
+ <el-option label="收款进度" value="" />
|
|
|
+ <el-option label="待收" value="1" />
|
|
|
+ <el-option label="部分收" value="2" />
|
|
|
+ <el-option label="全收" value="2" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.receiptOrderType" placeholder="订单类型" class="filter-item">
|
|
|
+ <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.associationNum" placeholder="关联数量" class="filter-item">
|
|
|
+ <el-option label="关联数量" value="" />
|
|
|
+ <el-option label="单个" value="1" />
|
|
|
+ <el-option label="多个" value="2" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.organizeId" placeholder="组织" class="filter-item">
|
|
|
+ <el-option label="组织" value="" />
|
|
|
+ <el-option label="采美" value="0" />
|
|
|
+ <el-option label="呵呵商城" value="9999" />
|
|
|
+ <el-option label="维沙" value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button class="filter-item" type="primary" icon="el-icon-document" @click="handleDownload">
|
|
|
+ 导出Excel
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
|
|
|
+ <el-table-column label="序号" align="center" width="50">
|
|
|
+ <template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="收款ID" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.id }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="收款时间" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.receiptDate }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="金额(￥)" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.receiptAmount }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="收款方式" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-text="getPayWayText(row.payWay)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="款项类别" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-text="getReceiptTypeText(row.receiptType)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="收款账号" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-text="getPayTypeText(row.payType)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="收款状态" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-text="getReceiptStatusText(row.receiptStatus)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="机构名称" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{ row.userName }}
|
|
|
+ <span v-if="row.suffix" style="color:red;">（{{ row.suffix }}）</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单类型" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-text="getOrderTypeText(row.orderType)" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="关联订单号" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.orders }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="150" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-button size="mini" type="primary" @click="handleDetail(row)">查看详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fetchList, getReceiptType } from '@/api/caimei/finance/receipt'
|
|
|
+import { parseTime } from '@/utils'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+export default {
|
|
|
+ name: 'ReceiptList',
|
|
|
+ components: { Pagination },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableKey: 0,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ id: '',
|
|
|
+ orderId: '',
|
|
|
+ orderNo: '',
|
|
|
+ userName: '',
|
|
|
+ payWay: '',
|
|
|
+ receiptType: '',
|
|
|
+ receiptStatus: '',
|
|
|
+ payType: '',
|
|
|
+ receiptProgress: '',
|
|
|
+ receiptOrderType: '',
|
|
|
+ associationNum: '',
|
|
|
+ organizeId: ''
|
|
|
+ },
|
|
|
+ payTypeOptions: [{ id: '', type: '收款账号' }],
|
|
|
+ payWayOptions: [
|
|
|
+ { id: '', type: '收款方式' },
|
|
|
+ { id: '1', type: '线上' },
|
|
|
+ { id: '2', type: '线下' },
|
|
|
+ { id: '3', type: '余额抵扣' }
|
|
|
+ ],
|
|
|
+ receiptTypeOptions: [
|
|
|
+ { id: '', type: '款项类别' },
|
|
|
+ { id: '1', type: '订单款' },
|
|
|
+ { id: '2', type: '非订单款' },
|
|
|
+ { id: '3', type: '返佣款' },
|
|
|
+ { id: '5', type: '供应商退款' },
|
|
|
+ { id: '6', type: '超级会员款' },
|
|
|
+ { id: '7', type: '二手商品上架费' }
|
|
|
+ ],
|
|
|
+ receiptStatusOptions: [
|
|
|
+ { id: '', type: '收款状态' },
|
|
|
+ { id: '1', type: '待确认' },
|
|
|
+ { id: '2', type: '已确认' },
|
|
|
+ { id: '3', type: '审核通过' },
|
|
|
+ { id: '4', type: '审核未通过' },
|
|
|
+ { id: '5', type: '收款撤销' }
|
|
|
+ ],
|
|
|
+ orderTypeOptions: [
|
|
|
+ { id: '', type: '订单类型' },
|
|
|
+ { id: '0', type: '协销' },
|
|
|
+ { id: '1', type: '自主' },
|
|
|
+ { id: '2', type: '呵呵' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getType()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ fetchList(this.listQuery).then(response => {
|
|
|
+ this.listLoading = false
|
|
|
+ this.list = response.data.results
|
|
|
+ this.total = response.data.totalRecord
|
|
|
+ // Just to simulate the time of the request
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ }, 1.5 * 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getType() {
|
|
|
+ getReceiptType().then(response => {
|
|
|
+ this.payTypeOptions = response.data
|
|
|
+ this.payTypeOptions.unshift({ id: '', type: '收款账号' })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOptionText(id, options) {
|
|
|
+ let text = ''
|
|
|
+ options.forEach(item => {
|
|
|
+ if (item.id === id) {
|
|
|
+ text = item.type
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return text
|
|
|
+ },
|
|
|
+ getPayTypeText(id) {
|
|
|
+ return this.getOptionText(id, this.payTypeOptions)
|
|
|
+ },
|
|
|
+ getPayWayText(id) {
|
|
|
+ return this.getOptionText(id, this.payWayOptions)
|
|
|
+ },
|
|
|
+ getReceiptTypeText(id) {
|
|
|
+ return this.getOptionText(id, this.receiptTypeOptions)
|
|
|
+ },
|
|
|
+ getReceiptStatusText(id) {
|
|
|
+ return this.getOptionText(id, this.receiptStatusOptions)
|
|
|
+ },
|
|
|
+ getOrderTypeText(id) {
|
|
|
+ return this.getOptionText(id, this.orderTypeOptions)
|
|
|
+ },
|
|
|
+ handleDetail(row) {
|
|
|
+ this.$router.push({ path: '/finance/receipt/detail', query: { id: row.id }})
|
|
|
+ },
|
|
|
+ handleDownload() {
|
|
|
+ this.downloadLoading = true
|
|
|
+ import('@/vendor/Export2Excel').then(excel => {
|
|
|
+ // 序号 进账时间 金额(¥) 进账方式 款项类别 进账账号 状态 订单类型 关联订单号 订单ID 运费 税费 订单金额(¥) 关联金额
|
|
|
+ const tHeader = ['Id', '进账时间', '金额(¥)', '进账方式', '款项类别', '进账账号', '状态', '订单类型', '关联订单号', '订单ID', '运费', '税费', '订单金额(¥)', '关联金额', '备注']
|
|
|
+ const filterVal = ['id', 'receiptDate', 'receiptAmount', 'payWay', 'receiptType', 'payType', 'receiptStatus', 'orderType', 'orders', 'orderId', 'freight', 'orderTax', 'orderFee', 'associateAmount', 'noOrderReason']
|
|
|
+ const list = this.list
|
|
|
+ const data = this.formatJson(filterVal, list)
|
|
|
+ excel.export_json_to_excel({
|
|
|
+ header: tHeader,
|
|
|
+ data,
|
|
|
+ filename: '收款列表',
|
|
|
+ autoWidth: true,
|
|
|
+ bookType: 'xlsx'
|
|
|
+ })
|
|
|
+ this.downloadLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map(v => filterVal.map(j => {
|
|
|
+ if (j === 'receiptDate') {
|
|
|
+ return parseTime(v[j])
|
|
|
+ } else if (j === 'payType') {
|
|
|
+ return this.getPayTypeText(v[j])
|
|
|
+ } else if (j === 'payWay') {
|
|
|
+ return this.getPayWayText(v[j])
|
|
|
+ } else if (j === 'receiptType') {
|
|
|
+ return this.getReceiptTypeText(v[j])
|
|
|
+ } else if (j === 'receiptStatus') {
|
|
|
+ return this.getReceiptStatusText(v[j])
|
|
|
+ } else if (j === 'orderType') {
|
|
|
+ return this.getOrderTypeText(v[j])
|
|
|
+ } else {
|
|
|
+ return v[j]
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.filter-item{
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 15px;
|
|
|
+}
|
|
|
+</style>
|
