caimei-mall-admin-ui/src/views/finance/list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>收款ID:</span>
        <el-input v-model="listQuery.receiptId" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input v-model="listQuery.orderId" style="width:130px;" placeholder="订单ID" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>订单编号:</span>
        <el-input v-model="listQuery.orderNo" style="width:200px;" placeholder="订单编号" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input v-model="listQuery.userName" style="width:200px;" placeholder="客户名称" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>收款方:</span>
        <el-input v-model="listQuery.customer" style="width:200px;" placeholder="收款方" clearable @keyup.enter.native="getList" @clear="getList" />
      </div>
      <div class="filter-control">
        <span>收款方式:</span>
        <el-select v-model="listQuery.payWay" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="线上" :value="1" />
          <el-option label="线下" :value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款状态:</span>
        <el-select v-model="listQuery.receiptStatus" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待审核" :value="2" />
          <el-option label="审核通过" :value="3" />
          <el-option label="审核不通过" :value="4" />
          <el-option label="收款撤销" :value="5" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款账号:</span>
        <el-select v-model="listQuery.payType" style="width:150px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option v-for="item in receiptTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款进度:</span>
        <el-select v-model="listQuery.receiptProgress" style="width:120px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待收款" :value="1" />
          <el-option label="部分收款" :value="2" />
          <el-option label="已收款" :value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>关联数量:</span>
        <el-select v-model="listQuery.associationNum" style="width:150px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="关联一个订单" value="1" />
          <el-option label="关联多个订单" value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>下单时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <!-- <el-button type="primary" icon="el-icon-search" @click="getList">导出筛查结果</el-button> -->
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column label="收款ID" align="center" prop="receiptId" width="100" />
      <el-table-column label="收款时间" align="center" prop="receiptTime" width="200" />
      <el-table-column label="金额(元)" align="center" prop="receiptAmount" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.receiptAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款方式" align="center" prop="payWay">
        <template slot-scope="{ row }">
          {{ row.payWay | payWayFilters }}
        </template>
      </el-table-column>
      <el-table-column label="收款账号" align="center" prop="payType">
        <template slot-scope="{ row }">
          <span>{{ payTypeFilters(row.payType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="receiptStatus">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.receiptStatus == 2,
              'el-span-success': row.receiptStatus == 3,
              'el-span-danger': row.receiptStatus == 4,
              'el-span-danger': row.receiptStatus == 5,
            }"
          >
            {{ row.receiptStatus | receiptStatusFilters }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="userName">
        <template slot-scope="{ row }">
          {{ row.userName ? row.userName : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="关联订单号" align="center" prop="shopOrderNos" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleToDetails(row.receiptId)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getReceiptList, getReceiptTypeList } from '@/api/finance'
import pickerOptions from '@/utils/time-picker.js'

export default {
  filters: {
    payWayFilters(value) {
      // 收款方式
      const map = {
        1: '线上',
        2: '线下'
      }
      return map[value]
    },
    receiptStatusFilters(value) {
      // 收款状态
      const map = {
        2: '待审核',
        3: '审核通过',
        4: '审核未通过',
        5: '收款撤销'
      }
      return map[value]
    }
  },
  data() {
    return {
      time: '',
      list: null,
      pickerOptions,
      listLoading: true,
      searchTimeVal: '',
      total: 0,
      listQuery: {
        organizeId: this.$store.getters.organizeId,
        pageNum: 1,
        pageSize: 20,
        receiptId: '', // 收款ID
        orderId: '', // 订单ID
        orderNo: '', // 订单编号
        userName: '', // 机构名称
        payWay: '', // 收款方式
        payType: '', // 收款账号
        receiptProgress: '', // 收款进度
        associationNum: '', // 关联数量
        startTime: '', // 下单开始时间
        endTime: '' // 下单结束时间
      },
      receiptTypeList: []
    }
  },
  created() {
    this.getList()
    this.getReceiptTypeList()
  },
  methods: {
    // 获取收款列表
    async getList() {
      this.listLoading = true
      if (this.time && this.time.length > 0) {
        this.listQuery.startPayTime = this.time[0]
        this.listQuery.endPayTime = this.time[1]
      } else {
        this.listQuery.startPayTime = ''
        this.listQuery.endPayTime = ''
      }
      try {
        const res = await getReceiptList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    // 获取收款账号列表
    async getReceiptTypeList() {
      const res = await getReceiptTypeList()
      this.receiptTypeList = res.data
    },
    payTypeFilters(value) {
      // 收款账号
      let valueText = ''
      this.receiptTypeList.forEach(type => {
        if (value === type.id) { valueText = type.name } else { valueText = '---' }
      })
      console.log('valueText', valueText)
      return valueText
    },
    handleToDetails(receiptId) {
      this.$router.push({ path: '/finance/details', query: { receiptId: receiptId }})
    },
    onSubmit() {
      console.log('search')
    }
  }
}

</script>
<style scoped>
.el-span-warning{
  color: #E6A23C;
}
.el-span-success{
  color: #67C23A;
}
.el-span-danger{
  color: #F56C6C;
}
</style>