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

<template>
  <div class="app-container">
    <div class="filter-container">
      <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.orderID" style="width:200px;" placeholder="子订单编号" 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.orderNumber" 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-input v-model="listQuery.customer" style="width:200px;" placeholder="机构名称" clearable @keyup.enter.native="getList" @clear="getList" />
      </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" icon="el-icon-document-add" @click="getList">申请分账</el-button>
      </div>
    </div>
    <p style="margin: 0;line-height: 24px;font-size: 14px;color: #F56C6C;">注：每次选择一个子订单申请分账，系统将自动分配佣金。付供应商的金额依然还在合利宝账户，需要再进行手动结算。</p>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :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.products" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="商品名" align="center" prop="productName" />
            <el-table-column label="规格" align="center" prop="unit" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="退货" align="center" prop="returnNum" />
            <el-table-column label="单价" align="center" prop="price" />
            <el-table-column label="总价" align="center" prop="totalPrice" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="订单编号(ID)" align="center" prop="orderNo" width="240">
        <template slot-scope="{row}">
          <span>{{ row.orderNo }}({{ row.orderId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo" width="240">
        <template slot-scope="{row}">
          <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="verifyTime" width="90" />
      <el-table-column label="订单金额" align="center" prop="payableAmount" />
      <el-table-column label="收款金额" align="center" prop="payableAmount" />
      <el-table-column label="商品费" align="center" prop="verifyMan" />
      <el-table-column label="机构" align="center" prop="clubName" />
      <el-table-column label="机构运费" align="center" prop="clubName" />
      <el-table-column label="供应商" align="center" prop="shopName" />
      <el-table-column label="供应商运费" align="center" prop="verifyMan" />
      <el-table-column label="付供应商" align="center" prop="payableAmount" />
      <el-table-column prop="status" label="收款状态" align="center">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.status == 0,
              'el-span-success': row.status == 1,
              'el-span-danger': row.status == 0
            }"
          >
            {{ row.status | statusFilter }}
            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="结算状态" align="center">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.status == 0,
              'el-span-success': row.status == 1,
              'el-span-danger': row.status == 2
            }"
          >
            {{ row.status | statusFilter }}
            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.statusText }}</span>
          </span>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
  </div>
</template>

<script>
import { getClubList } from '@/api/club'
import Pagination from '@/components/Pagination'
import pickerOptions from '@/utils/time-picker.js'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const map = {
        0: '待付款',
        1: '已付款',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      list: null,
      pickerOptions,
      listLoading: true,
      searchTimeVal: '',
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      search: {

      },
      form: {
        classifyName: '',
        telephone: '',
        contacts: '',
        businessNum: '',
        address: '',
        radio: 1,
        status: '请选择',
        imageUrl: '',
        doorwayImageUrl: ''
      },
      addPeople: {
        classifyName: '',
        telephone: ''
      },
      updateTatusId: '',
      updateTatusType: '',
      dialogVisible: false,
      dialogVisibleText: '',
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '添加运营人员',
        create: 'Create',
        titleText: '系统提示'
      },
      rules: {
        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        telephone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getClubList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      }).catch(() => {
        // 封装静态数据
        this.list = [
          {
            id: 7580,
            name: '微博',
            type: '子订单付款',
            shopName: '采美信息技术有限公司',
            payableAmount: '2000000.00',
            shopOrderNo: 'P1682650952091471001',
            shopOrderId: '19747',
            orderNo: 'P16265095220221471',
            orderId: '18179',
            clubName: '广州白云区松洲蒂亚美容院',
            applyMan: '路海珠',
            applyTime: '2020-01-01:20:30:56',
            verifyMan: '李昕',
            verifyTime: '2020-01-01:20:30:56',
            status: 0,
            totalProduct: '3000.00',
            payShopTotal: '3000.00',
            products: [
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              },
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              },
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              },
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              }
            ]
          },
          {
            id: 7580,
            name: '微博',
            type: '子订单付款',
            shopName: '采美信息技术有限公司',
            payableAmount: '2000000.00',
            shopOrderNo: 'P1682650952091471001',
            shopOrderId: '19747',
            orderNo: 'P16265095220221471',
            orderId: '18179',
            clubName: '广州白云区松洲蒂亚美容院',
            applyMan: '路海珠',
            applyTime: '2020-01-01:20:30:56',
            verifyMan: '李昕',
            verifyTime: '2020-01-01:20:30:56',
            status: 0,
            totalProduct: '3000.00',
            payShopTotal: '3000.00',
            products: [
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              },
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              }
            ]
          }
        ]
      })
      this.listLoading = false
    },
    onSubmit() {
      console.log('search')
    }
  }
}

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