supply-front/src/views/finance/standbook_list.vue

<template>
  <div class="app-container">
    <div class="sty" v-if="isShow">
      <el-page-header @back="goBack"> </el-page-header>
      <br /><br />
    </div>
    <!-- <span v-else>台账</span>
    <el-divider></el-divider> -->

    <!-- <el-radio-group v-model="mainId" size="">
      <el-radio-button
        v-for="(v, i) in dictList"
        :key="i"
        :label="v.dictCode"
        >{{ v.dictValue }}</el-radio-button
      >
    </el-radio-group>
    <br /><br /> -->

    <h1></h1>
    <!-- 筛选条件 -->
    <div class="screen-container">
      <Collapse :screen-form="searchForm">
        <template #right_btn>
          <el-button size="mini" @click="resetFn">清空</el-button>
          <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
        </template>
        <template #left_btn>
          <el-radio-group v-model="bill" @change="checkFn" size="mini">
            <el-radio-button label="COMMONLY">货款台账</el-radio-button>
            <el-radio-button label="REBATE">返利台账</el-radio-button>
          </el-radio-group>
        </template>
        <template #search>
          <el-form ref="searchForm" :model="searchForm" label-width="90px" size="mini" label-position="left">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="经销商名称" prop="customerId">
                  <el-select
                    :disabled="isDisabled"
                    class="selectStyle"
                    v-model="searchForm.customerId"
                    placeholder="请选择"
                    filterable
                    @change="changeFn"
                  >
                    <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.id"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item :label="bill==='COMMONLY'?'钱包类型':'返利类型'" prop="customerWalletId">
                  <el-select class="selectStyle" v-model="searchForm.customerWalletId" placeholder="请选择" filterable>
                    <el-option
                      v-for="(v, i) in walletList"
                      :key="i"
                      :label="v.customerWalletName"
                      :value="v.customerWalletId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="单据号" prop="billNo">
                  <el-input v-model="searchForm.billNo" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="开始时间" prop="startTime">
                  <el-date-picker
                    class="selectStyle"
                    v-model="searchForm.startTime"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    class="selectStyle"
                    v-model="searchForm.endTime"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="经销商编码" prop="customerNumber">
                  <el-input v-model="searchForm.customerNumber" placeholder="请输入经销商编码"></el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="单据类型" prop="billType">
                  <el-select class="selectStyle" v-model="searchForm.billType" placeholder="请选择" filterable>
                    <el-option v-for="(v, i) in typeList" :key="i" :label="v" :value="v"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="摘要" prop="remark">
                  <el-input v-model="searchForm.remark" placeholder="请输入摘要"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </Collapse>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fr">
        <ExportButton :exUrl="'finance/standing/book/export'" :exParams="exParams" />
      </div>
    </div>
    <div v-show="bill == 'COMMONLY'">
      <ul class="ulStyle">
        <li>
          预付货款:<span>{{ amountList.preCount }}</span>
        </li>
        <li>
          订单占款:<span>{{ amountList.orderCOunt }}</span>
        </li>
        <li>
          支付货款:<span>{{ amountList.payCount }}</span>
        </li>
        <li>
          押金:<span>{{ amountList.orderDate }}</span>
        </li>
        <li>
          工程保证金:<span>{{ amountList.projectCount }}</span>
        </li>
        <li>
          其他暂扣款:<span>{{ amountList.otherCount }}</span>
        </li>
        <li>
          余额:<span>{{ amountList.totalBalanceAmount }}</span>
        </li>
      </ul>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            show-summary
            :summary-method="getSummaries"
          >
            <el-table-column
              label="序号"
              fixed="left"
              align="left"
              width="50"
              type="index"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="单据日期"
              prop="theTime"
              min-width="160"
              fixed="left"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="单据类型"
              prop="billType"
              fixed="left"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              fixed="left"
              label="单据号"
              prop="billNo"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.billNo" />
                <span>{{ scope.row.billNo }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="钱包"
              prop="walletName"
              fixed="left"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="操作时间"
              prop="createTime"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="摘要"
              prop="remark"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="right" label="预付货款" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 1
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="订单占款" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 2
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="支付货款" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 3
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="押金" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 4
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="工程保证金" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 5
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="其他暂扣款" prop="flag" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{
                  scope.row.flag == 6
                    ? scope.row.amountType == 'IN'
                      ? scope.row.amount
                      : scope.row.amountType == 'OUT'
                      ? -scope.row.amount
                      : ''
                    : '-' | numToFixed
                }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="账户余额" prop="balanceAmount" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.balanceAmount | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 500]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <div v-show="bill == 'REBATE'">
      <ul class="ulStyle">
        <li>
          返利支出:<span>{{ amountList.outCount }}</span>
        </li>
        <li>
          返利收入:<span>{{ amountList.inCount }}</span>
        </li>
      </ul>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            show-summary
            :summary-method="getSummaries2"
          >
            <el-table-column label="序号" align="left" width="50" type="index" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="客户编码" prop="customerCode" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerCode" />
                <span>{{ scope.row.customerCode }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="客户名称" prop="customerName" min-width="260" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.customerName" />
                <span>{{ scope.row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="单据日期"
              prop="theTime"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="审核日期"
              prop="examineTime"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="left" label="单据类型" prop="billType" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.billType == 3 ? '付款单' : scope.row.billType }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="单据号" prop="billNo" min-width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <CopyButton :copyText="scope.row.billNo" />
                <span>{{ scope.row.billNo }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="返利类型"
              prop="walletName"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="操作时间"
              prop="createTime"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="摘要"
              prop="remark"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="right" label="收入" prop="amountType" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.amountType == 'IN' ? scope.row.amount : '-' | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="支出" prop="amountType" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.amountType == 'OUT' ? scope.row.amount : '-' | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="right"
              label="折让金额"
              prop="allowanceAmount"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.allowanceAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="暂扣返利" prop="withholdAmount" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.withholdAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="right" label="结存" prop="balanceAmount" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.balanceAmount | numToFixed }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <!-- <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 500]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <!-- 分页 -->
    <div class="fr">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import { getWalletCustomerList } from '@/api/finance/change_apply'
import { getAmountCount, getCustomerList, getStandbookList } from '@/api/finance/standbook_list'
import { numToFixed } from '@/filters'
import sticky from '@/utils/table-sticky'
export default {
  mixins: [sticky],
  data() {
    return {
      isShow: false,
      amountList: {},
      customerList: [],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      // dataListRebate: [], // 列表数据
      // dataListLoan: [], // 列表数据
      dataList: [],
      isCollapse: true,
      walletList: [],
      parent: 'mymain-container',
      // dictList: [],
      customerName: '',
      customerNumber: '',
      searchForm: {
        customerId: '',
        customerWalletId: '',
        billNo: '',
        startTime: '',
        endTime: '',
        customerNumber: '',
        billType: '',
        remark: ''
      }, //搜索表单
      listLoading: false, // 列表加载loading

      bill: 'COMMONLY',
      isCustomer: JSON.parse(localStorage.getItem('supply_user')).isCustomer,
      isDisabled: false,
      isCustomerList: {
        customerId: JSON.parse(localStorage.getItem('supply_user')).customerId,
        customerName: JSON.parse(localStorage.getItem('supply_user')).customerName,
        customerNumber: JSON.parse(localStorage.getItem('supply_user')).customerNumber
      },
      typeList: [
        '收款单',
        '退款单',
        '返利单',
        '零售单扣款',
        '申请发货单',
        '零售订单退款',
        '退货单退单',
        '家用工程订单扣款-审批',
        '家用工程订单押金',
        '家用工程订单退押金',
        '家用工程订单返利退款-退订',
        '零售单返利扣款',
        '零售单返利退款',
        '直接调拨单销售退库单订单返利退款-退货单',
        '直接调拨单销售退库单订单退款-退货单',
        '商用工程订单扣款-审批',
        '商用工程订单返利扣款-审批',
        '商用工程申请发货订单返利退款-退货单',
        '商用工程发货申请发货订单退款-退货单',
        '商用工程销售退库单单返利退款-退货单',
        '商用工程发货销售退库单订单退款-退货单',
        '家用工程订单退款-弃审',
        '家用工程订单返利扣款-审批',
        '家用工程订单返利退款-弃审'
      ]
    }
  },
  computed: {
    exParams() {
      // return {
      //   type: this.bill,
      // };
      if (this.$route.query.customerName && this.$route.query.customerNumber) {
        return {
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          customerName: this.$route.query.customerName,
          customerNumber: this.$route.query.customerNumber
        }
      } else if (this.isCustomer) {
        return {
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          customerName: this.$store.state.user.customerName,
          customerNumber: this.$store.state.user.customerNumber
        }
      } else {
        return {
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          customerName: this.customerName,
          customerNumber: this.customerNumber
        }
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to, from, next, 898);
    next(async vm => {
      // 这个时候组件还没有创建，所以要通过vm来访问
      // console.log(vm);
      vm.getCustomerDataList()
      if (
        from.path == '/finance/details/balance_sum' &&
        to.path == '/finance/details/standbook_list' &&
        vm.$route.query.customerId
      ) {
        //只有是从A进到B页面才执行
        // 将要执行的逻辑
        vm.isShow = true
        vm.isDisabled = true
        vm.searchForm.customerId = vm.$route.query.customerId
        vm.searchForm.customerNumber = vm.$route.query.customerNumber
        vm.changeFn(vm.$route.query.customerId)
        vm.getDataList({
          pageSize: vm.pageSize,
          pageNum: vm.currentPage,
          type: vm.bill,
          // customerName: vm.$route.query.customerName,
          customerNumber: vm.$route.query.customerNumber
        })

        vm.getAmountList({
          type: vm.bill,
          customerName: vm.$route.query.customerName,
          customerNumber: vm.$route.query.customerNumber
        })
      } else if (vm.isCustomer) {
        vm.isShow = false
        vm.isDisabled = true
        vm.searchForm.customerId = vm.$store.state.user.customerId
        vm.changeFn(vm.$store.state.user.customerId)
        vm.searchForm.customerId = vm.isCustomerList.customerId
        vm.searchForm.customerNumber = vm.isCustomerList.customerNumber
        vm.getDataList({
          pageSize: vm.pageSize,
          pageNum: vm.currentPage,
          type: vm.bill,
          customerId: vm.searchForm.customerId,
          customerNumber: vm.searchForm.customerNumber
        })

        vm.getAmountList({
          type: vm.bill,
          ...vm.isCustomerList
        })
      } else if (vm.$route.query && vm.$route.query.status) {
        vm.bill = vm.$route.query.status
        vm.isShow = true
        vm.isDisabled = true
        vm.searchForm.customerId = vm.$route.query.customerId
        vm.searchForm.customerNumber = vm.$route.query.customerNumber
        vm.changeFn(vm.$route.query.customerId)
        vm.getDataList({
          pageSize: vm.pageSize,
          pageNum: vm.currentPage,
          type: vm.bill,
          // customerName: this.$route.query.customerName,
          customerNumber: vm.$route.query.customerNumber
        })
        vm.getAmountList({
          type: vm.bill,
          customerName: vm.$route.query.customerName,
          customerNumber: vm.$route.query.customerNumber
        })
      } else {
        vm.isShow = false
        vm.searchForm.customerId = ''
        vm.isDisabled = false
        vm.getDataList()
        vm.getCustomerDataList()
        vm.getAmountList({
          type: vm.bill
        })
      }
    })
  },
  // activated() {

  //   // 钱包余额页跳转过来
  //   if (this.$route.query && this.$route.query.status){

  //     this.bill = this.$route.query.status
  //     this.changeFn(this.bill)
  //     //只有是从A进到B页面才执行
  //       // 将要执行的逻辑
  //       this.isShow = true;
  //       this.isDisabled = true;
  //       this.searchForm.customerId = this.$route.query.customerId;
  //       this.changeFn(this.$route.query.customerId);
  //       this.getDataList({
  //         pageSize: this.pageSize,
  //         pageNum: this.currentPage,
  //         type: this.bill,
  //         customerName: this.$route.query.customerName,
  //         customerNumber: this.$route.query.customerNumber,
  //       });
  //       this.getAmountList({
  //         type: this.bill,
  //         customerName: this.$route.query.customerName,
  //         customerNumber: this.$route.query.customerNumber,
  //       });
  //   }

  // },
  created() {
    // if (this.$route.query && this.$route.query.status) {
    //   this.bill = this.$route.query.status;
    //   this.changeFn(this.bill);
    //   //只有是从A进到B页面才执行
    //   // 将要执行的逻辑
    //   this.isShow = true;
    //   this.isDisabled = true;
    //   this.searchForm.customerId = this.$route.query.customerId;
    //   this.searchForm.customerNumber = this.$route.query.customerNumber;
    //   this.changeFn(this.$route.query.customerId);
    //   this.getDataList({
    //     pageSize: this.pageSize,
    //     pageNum: this.currentPage,
    //     type: this.bill,
    //     // customerName: this.$route.query.customerName,
    //     customerNumber: this.$route.query.customerNumber,
    //   });
    //   this.getAmountList({
    //     type: this.bill,
    //     customerName: this.$route.query.customerName,
    //     customerNumber: this.$route.query.customerNumber,
    //   });
    // }
    // console.log(
    //   this.customerId,
    //   this.$store.state.user.customerName,
    //   this.$store.state.user.customerNumber,
    //   777777
    // );
    // if (this.$route.query.customerName && this.$route.query.customerNumber) {
    //   this.isDisabled = true;
    //   this.searchForm.customerId = this.$route.query.customerName;
    //   this.changeFn(this.$route.query.customerId);
    //   this.getDataList({
    //     pageSize: this.pageSize,
    //     pageNum: this.currentPage,
    //     type: this.bill,
    //     customerName: this.$route.query.customerName,
    //     customerNumber: this.$route.query.customerNumber,
    //   });
    // } else
    // if (this.isCustomer) {
    //   this.isDisabled = true;
    //   this.searchForm.customerId = this.$store.state.user.customerName;
    //   this.changeFn(this.$store.state.user.customerId);
    //   this.getDataList({
    //     pageSize: this.pageSize,
    //     pageNum: this.currentPage,
    //     type: this.bill,
    //     customerName: this.$store.state.user.customerName,
    //     customerNumber: this.$store.state.user.customerNumber,
    //   });
    // } else {
    //   this.getDataList({
    //     pageSize: this.pageSize,
    //     pageNum: this.currentPage,
    //     type: this.bill,
    //   });
    //   this.getCustomerDataList();
    // }
    // this.getCustomerDataList();
    // this.getWalletList();
    // this.getDataDict();
  },
  methods: {
    goBack() {
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    //
    computedFn(data, i, sums, index) {
      let map1 = data.map(v => {
        if (v.flag == i && v.amountType == 'IN') {
          return v.amount
        }
        if (v.flag == i && v.amountType == 'OUT') {
          return -v.amount
        }
      })

      let sum1 = map1.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      let sum = numToFixed(sum1)
      return sum
    },
    //合计
    //返利台账列表合计
    getSummaries2(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        }
        if (index === 10) {
          let map1 = data.map(v => {
            if (v.amountType == 'IN') {
              return v.amount
            }
          })
          let a = map1.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = numToFixed(a)
        }
        if (index === 11) {
          let map1 = data.map(v => {
            if (v.amountType == 'OUT') {
              return v.amount
            }
          })
          let a = map1.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = numToFixed(a)
        }
        if (index === 12) {
          let map1 = data.map(v => {
            return v.allowanceAmount
          })
          let a = map1.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = numToFixed(a)
        }
        if (index === 13) {
          let map1 = data.map(v => {
            return v.withholdAmount
          })
          let a = map1.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = numToFixed(a)
        }
        if (index === 14) {
          let map1 = data.map(v => {
            return v.balanceAmount
          })
          let a = map1.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = numToFixed(a)
        }
      })
      return sums
    },
    //货款台账列表合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        }
        if (index === 7) {
          sums[index] = this.computedFn(data, 1)
        }
        if (index === 8) {
          sums[index] = this.computedFn(data, 2)
        }
        if (index === 9) {
          sums[index] = this.computedFn(data, 3)
        }
        if (index === 10) {
          sums[index] = this.computedFn(data, 4)
        }
        if (index === 11) {
          sums[index] = this.computedFn(data, 5)
        }
        if (index === 12) {
          sums[index] = this.computedFn(data, 6)
        }
        // if (index === 13) {
        //   let map2 = data.map((v) => {
        //     return v.balanceAmount;
        //   });
        //   let aa = map2.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] = numToFixed(aa);
        // }
      })

      return sums
    },

    //获取汇总总数
    async getAmountList(data) {
      let res = await getAmountCount(data)
      if (res.data) {
        this.amountList = res.data
      } else {
        this.amountList = {
          inCount: 0,
          orderCOunt: 0,
          orderDate: 0,
          otherCount: 0,
          outCount: 0,
          payCount: 0,
          preCount: 0,
          projectCount: 0,
          totalBalanceAmount: 0
        }
      }
    },
    //改变经销商
    async changeFn(v) {
      this.searchForm.customerWalletId = ''
      let res = await getWalletCustomerList({
        customerId: v,
        type: this.bill,
        hasRecord: true
      })
      this.walletList = res.data
    },
    //获取经销商列表
    async getCustomerDataList() {
      let res = await getCustomerList({
        pageNum: 1,
        pageSize: -1
      })
      this.customerList = res.data.records
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // this.getDataList({
      //   type: this.bill,
      //   pageNum: this.currentPage,
      //   pageSize: this.pageSize,
      // });
      if (this.$route.query.customerName && this.$route.query.customerNumber) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   customerName: this.$route.query.customerName,
        //   customerNumber: this.$route.query.customerNumber,
        // });
        this.getDataList()
      } else if (this.isCustomer) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   ...this.isCustomerList,
        // });
        this.getDataList()
      } else {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   customerName: this.customerName,
        //   customerNumber: this.customerNumber,
        // });
        this.getDataList()
      }
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      // this.getDataList({
      //   type: this.bill,
      //   pageNum: this.currentPage,
      //   pageSize: this.pageSize,
      // });
      if (this.$route.query.customerName && this.$route.query.customerNumber) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   customerName: this.$route.query.customerName,
        //   customerNumber: this.$route.query.customerNumber,
        // });
        this.getDataList()
      } else if (this.isCustomer) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   ...this.isCustomerList,
        // });
        this.getDataList()
      } else {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   customerName: this.customerName,
        //   customerNumber: this.customerNumber,
        // });
        this.getDataList()
      }
    },
    // //获取品类
    // async getDataDict() {
    //   const res = await getDictList({ sysDictEnum: "PRODUCT_TYPE" });
    //   console.log(res);
    //   this.dictList = res.data;
    // },
    //重置
    async resetFn() {
      // this.searchForm.customerId = "";
      // this.walletList = [];
      // this.customerName = "";
      // this.customerNumber = "";
      if (this.isCustomer) {
        await this.$refs.searchForm.resetFields()
        this.searchForm.customerId = this.$store.state.user.customerId
      } else if (this.$route.query.customerId) {
        this.searchForm.customerId = this.$route.query.customerId
      } else {
        this.walletList = []
        this.customerName = ''
        this.customerNumber = ''
        await this.$refs.searchForm.resetFields()
      }
    },
    //查询
    searchFn() {
      this.currentPage = 1
      this.pageSize = 10
      // this.customerName = null;
      // this.customerNumber = null;
      let res = this.customerList.filter(v => {
        return v.id == this.searchForm.customerId
      })

      // return;
      if (res.length > 0) {
        this.customerName = res[0].name
        this.customerNumber = res[0].number
        this.searchForm.customerNumber = res[0].number
      }

      if (this.$route.query.customerName && this.$route.query.customerNumber) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   // customerName: this.$route.query.customerName,
        //   customerNumber:
        //     this.$route.query.customerNumber || this.searchForm.customerNumber,
        // });
        this.getDataList()
        this.getAmountList({
          ...this.searchForm,
          type: this.bill,
          // customerName: this.$route.query.customerName,
          customerNumber: this.$route.query.customerNumber
        })
      } else if (this.isCustomer) {
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        //   ...this.isCustomerList,
        // });
        this.getDataList()
        this.getAmountList({
          ...this.searchForm,
          type: this.bill,
          ...this.isCustomerList
        })
      } else {
        // this.getDataList({
        //   ...this.searchForm,
        //   // customerName: this.customerName,
        //   customerNumber: this.customerNumber || this.searchForm.customerNumber,

        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: this.bill,
        // });
        this.getDataList()
        this.getAmountList({
          ...this.searchForm,
          type: this.bill,
          // customerName: this.customerName,
          customerNumber: this.customerNumber
        })
      }
    },

    // //钱包数据
    // async getWalletList() {
    //   let res = await getWalletCustomerList({
    //     customerId: this.customerId,
    //     type: this.bill,
    //   });
    //   this.selectList = res.data;
    // },
    //切换列表
    checkFn(v) {
      // this.getDataList({
      //   pageSize: 10,
      //   pageNum: 1,
      //   type: v,
      // });

      this.resetFn()
      this.pageSize = 10
      this.currentPage = 1
      this.bill = v
      if (this.$route.query.customerName && this.$route.query.customerNumber) {
        this.changeFn(this.$route.query.customerId)
        // this.getDataList({
        //   ...this.searchForm,

        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: v,
        //   customerId: this.$route.query.customerId,
        //   customerName: this.$route.query.customerName,
        //   customerNumber: this.$route.query.customerNumber,
        // });
        this.getDataList()
        this.getAmountList({
          ...this.searchForm,
          type: v,
          customerId: this.$route.query.customerId,
          customerName: this.$route.query.customerName,
          customerNumber: this.$route.query.customerNumber
        })
      } else if (this.isCustomer) {
        this.changeFn(this.$store.state.user.customerId)
        // this.getDataList({
        //   ...this.searchForm,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: v,
        //   ...this.isCustomerList,
        // });
        this.searchForm.customerId = this.isCustomerList.customerId
        this.searchForm.customerNumber = this.isCustomerList.customerNumber

        this.getDataList()
        this.getAmountList({
          ...this.searchForm,
          type: v,
          ...this.isCustomerList
        })
      } else {
        // this.getDataList({
        //   // ...this.searchForm,

        //   // customerName: this.customerName,
        //   // customerNumber: this.customerNumber,
        //   pageSize: this.pageSize,
        //   pageNum: this.currentPage,
        //   type: v,
        // });
        this.getDataList()
        this.getAmountList({
          type: v
        })
      }
      // this.getWalletList();
    },
    //
    async getDataList(value) {
      // let res;
      // if (this.bill == "COMMONLY") {
      //   res = await getStandbookList(data);
      // } else {
      //   res = await getStandbookList(data);
      // }

      if (value) {
        let res = await getStandbookList(value)
        this.dataList = res.data.records
        this.listTotal = res.data.total
      } else {
        let params = {
          billNo: this.searchForm.billNo,
          billType: this.searchForm.billType,
          customerId: this.searchForm.customerId,
          customerName: '',
          customerNumber: this.searchForm.customerNumber,
          customerWalletId: this.searchForm.customerWalletId,
          endTime: this.searchForm.endTime,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          startTime: this.searchForm.startTime,
          remark: this.searchForm.remark,
          type: this.bill,
          walletRebateId: ''
        }
        let res = await getStandbookList(params)
        this.dataList = res.data.records
        this.listTotal = res.data.total
      }
    }
  }
}
</script>
<style>
.main-container {
  height: 100vh !important;
  overflow: auto;
}
</style>
<style lang="scss" scoped>
::v-deep .ulStyle {
  //position: sticky;
  //top: 80px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background-color: #ffffff;
  z-index: 1;

  li {
    display: inline-block;
    font-weight: 700;
    span {
      padding-left: 6px;
      font-weight: 400;
    }
    // float: right;
    margin-right: 20px;
  }
}
.moneyStyle {
  height: 130px;
  border-radius: 20px;
  padding: 20px 0 0 20px;
  color: #fff;
  span {
    display: block;
    font-size: 20px;
  }
  strong {
    margin-top: 16px;
    display: block;
    font-size: 36px;
  }
}
.selectStyle {
  width: 100%;
}
.color1 {
  background-color: #6c83d0;
}
.color2 {
  background-color: #dfc062;
}
.color3 {
  background-color: #dfc062;
}
.color4 {
  background-color: #6bcfd7;
}
</style>