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

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>子订单ID:</span>
        <el-input
          v-model="listQuery.shopOrderId"
          style="width:180px;"
          placeholder="子订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
          @input="e => (listQuery.shopOrderId = checkedInput(e))"
        />
      </div>
      <div class="filter-control">
        <span>子订单编号:</span>
        <el-input
          v-model="listQuery.shopOrderNo"
          style="width:180px;"
          placeholder="子订单编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input
          v-model="listQuery.orderId"
          style="width:180px;"
          placeholder="订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
          @input="e => (listQuery.orderId = checkedInput(e))"
        />
      </div>
      <div class="filter-control">
        <span>订单编号:</span>
        <el-input
          v-model="listQuery.orderNo"
          style="width:180px;"
          placeholder="订单编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>供应商:</span>
        <el-input
          v-model="listQuery.shopName"
          style="width:180px;"
          placeholder="供应商"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input
          v-model="listQuery.clubName"
          style="width:180px;"
          placeholder="机构名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>付款状态:</span>
        <el-select v-model="listQuery.status" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="未付款" value="0" />
          <el-option label="部分付款" value="1" />
        </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="success" :disabled="!orderRadio" icon="el-icon-document-add" @click="handleApplySub">付款申请</el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      default-expand-all
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column label="商品信息" type="expand" width="50">
        <template slot-scope="{row}">
          <el-table :data="row.newOrderProducts" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="商品名" align="center" prop="name" />
            <el-table-column label="规格" align="center" prop="unit" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="退货" align="center" prop="returnedPurchaseProductNum">
              <template slot-scope="scope">
                <span>{{ scope.row.returnedPurchaseProductNum ? scope.row.returnedPurchaseProductNum : 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="price">
              <template slot-scope="scope">
                <span>{{ scope.row.price | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="总价" align="center" prop="totalFee">
              <template slot-scope="scope">
                <span>{{ scope.row.totalFee | amountfilters }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
        <template slot-scope="{row}">
          <span class="el-p-link" @click="handleOrderDetails(row)">{{ row.orderNo }}({{ row.orderId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo">
        <template slot-scope="{row}">
          <span class="el-p-link" @click="handleOrderDetails(row)">{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center" prop="payTotalFee">
        <template slot-scope="{row}">
          <span>{{ row.payTotalFee | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款金额" align="center" prop="receiptTotalFee">
        <template slot-scope="{row}">
          <span>{{ row.receiptTotalFee | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款状态" align="center" prop="orderReceiptStatus">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.orderReceiptStatus == 1 || row.orderReceiptStatus == 3,
              'el-span-success': row.orderReceiptStatus == 2
            }"
          >
            {{ row.orderReceiptStatus | receiptStatusFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="付款状态" align="center" prop="payStatus">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.payStatus == 1,
              'el-span-success': row.payStatus == 2,
              'el-span-danger': row.payStatus == 3
            }"
          >
            {{ row.payStatus | payStatusFilter }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="商品费" align="center" prop="productAmount">
        <template slot-scope="{row}">
          <span>{{ row.productAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="clubName" />
      <el-table-column label="机构运费" align="center" prop="freight">
        <template slot-scope="{row}">
          <span>{{ row.postageInfo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="供应商" align="center" prop="shopName" />
      <el-table-column label="供应商运费" align="center" prop="shopPostFee">
        <template slot-scope="{row}">
          <span>{{ row.shopPostFee | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应付采美" align="center" prop="waitPayCmAmount">
        <template slot-scope="{row}">
          <span class="el-span-danger">{{ row.waitPayCmAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应付供应商" align="center" prop="shouldPayShopAmount">
        <template slot-scope="{row}">
          <span class="el-span-danger">{{ row.shouldPayShopAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleToRecord(row.shopOrderId)">退/付款记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>10" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

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

export default {
  filters: {
    receiptStatusFilter(status) {
      const map = {
        1: '待收款',
        2: '部分收款',
        3: '已收款'
      }
      return map[status]
    },
    payStatusFilter(status) {
      const map = {
        1: '待付款',
        2: '部分付款',
        3: '已付款'
      }
      return map[status]
    },
    statusFilter(status) {
      const map = {
        0: '待付款',
        1: '已付款',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      time: '',
      list: null,
      pickerOptions,
      listLoading: true,
      total: 0,
      listQuery: {
        listType: 1, // 1申请付款 2子订单分账 3子订单结算
        organizeId: this.$store.getters.organizeId,
        pageNum: 1,
        pageSize: 10,
        shopName: '', // 供应商名称
        clubName: '', // 机构名称
        orderNo: '', // 订单编号
        orderId: '', // 订单ID
        payShopId: '', // 付款单
        orderStartTime: '', // 下单开始时间
        orderEndTime: '', // 下单结束时间
        shopOrderId: '', // 子订单ID
        shopOrderNo: '', // 子订单编号
        status: '' // 付款状态
      },
      orderRadio: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    initTime() {
      // 初始化获取时间筛选值
      if (this.time && this.time.length > 0) {
        this.listQuery.orderStartTime = this.time[0]
        this.listQuery.orderEndTime = this.time[1]
      } else {
        this.listQuery.orderStartTime = ''
        this.listQuery.orderEndTime = ''
      }
    },
    async getList() {
      this.listLoading = true
      try {
        const res = await getPayOrderList(this.listQuery)
        this.list = res.data.list
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    // 多选子订单
    handleSelectionChange(row) {
      this.orderRadio = row
      console.log('orderRadio', this.orderRadio)
    },
    // 付款申请
    handleApplySub() {
      console.log('flag', this.checkForDuplicates(this.orderRadio))
      if (this.checkForDuplicates(this.orderRadio)) {
        this.$alert('应付多个订单时，它们必须属于同一个供应商!', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        const newArr = this.orderRadio.map(item => item.shopOrderId)
        this.$router.push({ path: '/finance/payapply-edit', query: { shopOrderIds: JSON.stringify(newArr) }})
      }
    },
    // 数组是否有重复
    checkForDuplicates(arr, id = 'shopId') {
      const newShopArr = []
      let flag = false
      for (const item of arr) {
        newShopArr.push(item[id])
        for (const el of newShopArr) {
          if (item[id] !== el) {
            flag = true
          }
        }
      }
      return flag
    },
    // 跳转订单详情
    handleOrderDetails(row) {
      this.$router.push({ path: '/order/detail', query: { id: row.orderId }})
    },
    handleToDetails(receiptId) {
      this.$router.push({ path: '/finance/details', query: { receiptId: receiptId }})
    },
    handleToRecord(shopOrderId) {
      this.$router.push({ path: '/finance/payment-record', query: { shopOrderId: shopOrderId }})
    },
    checkedInput(event) {
      const pattern = /[^0-9.]/g
      return event.replace(pattern, '')
    }
  }
}

</script>
<style scoped>
/deep/ .el-table__expanded-cell[class*=cell]{
  padding:10px 10px !important;
}
/deep/ .el-table__row td {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
}
</style>