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>
    </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 /> -->
    <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>
    <h1></h1>
    <!-- 筛选条件 -->
    <div>
      <el-form ref="searchForm" :model="searchForm" label-width="100px" 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="钱包" 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="18">
            <el-form-item label="" class="fr">
              <el-button size="mini" @click="resetFn">清空</el-button>
              <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </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>
      </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="序号" align="left" width="100" type="index" show-overflow-tooltip></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="billType" min-width="280" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="单据号" prop="billNo" min-width="220" 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="160" 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="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="right" label="预付货款" prop="flag" min-width="160" 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="160" 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="160" 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="160" 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="160" 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="160" 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="160" 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="100" 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="160" 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="160" show-overflow-tooltip></el-table-column>
            <el-table-column align="right" label="收入" prop="amountType" min-width="160" 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="160" 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="160" 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="160" 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="160" 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 {
  getStandbookList,
  getDictList,
  getCustomerList,
  getAmountCount,
} from "@/api/finance/standbook_list";

export default {
  data() {
    return {
      isShow: false,
      amountList: {},
      customerList: [],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      // dataListRebate: [], // 列表数据
      // dataListLoan: [], // 列表数据
      dataList: [],
      walletList: [],
      // dictList: [],
      customerName: "",
      customerNumber: "",
      searchForm: {
        customerId: "",
        customerWalletId: "",
        billNo: "",
        startTime: "",
        endTime: "",
      }, //搜索表单
      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,
      },
    };
  },
  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((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.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.getDataList({
          pageSize: vm.pageSize,
          pageNum: vm.currentPage,
          type: vm.bill,
          ...vm.isCustomerList,
        });
        vm.getAmountList({
          type: vm.bill,
          ...vm.isCustomerList,
        });
      } else {
        vm.isShow = false;
        vm.searchForm.customerId = "";
        vm.isDisabled = false;
        vm.getDataList({
          pageSize: vm.pageSize,
          pageNum: vm.currentPage,
          type: vm.bill,
        });
        vm.getCustomerDataList();
        vm.getAmountList({
          type: vm.bill,
        });
      }
    });
  },

  created() {
    // 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 sum = map1
        .reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toFixed(2);
      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;
            }
          });
          sums[index] = map1
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
        if (index === 11) {
          let map1 = data.map((v) => {
            if (v.amountType == "OUT") {
              return v.amount;
            }
          });
          sums[index] = map1
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
        if (index === 12) {
          let map1 = data.map((v) => {
            return v.allowanceAmount;
          });
          sums[index] = map1
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
        if (index === 13) {
          let map1 = data.map((v) => {
            return v.withholdAmount;
          });
          sums[index] = map1
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
        if (index === 14) {
          let map1 = data.map((v) => {
            return v.balanceAmount;
          });
          sums[index] = map1
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
      });
      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;
          });
          sums[index] = map2
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
      });

      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,
        };
      }
    },
    //改变经销商
    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,
        });
      } else if (this.isCustomer) {
        this.getDataList({
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          ...this.isCustomerList,
        });
      } else {
        this.getDataList({
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          customerName: this.customerName,
          customerNumber: this.customerNumber,
        });
      }
    },
    // 更改当前页
    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,
        });
      } else if (this.isCustomer) {
        this.getDataList({
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          ...this.isCustomerList,
        });
      } else {
        this.getDataList({
          ...this.searchForm,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
          customerName: this.customerName,
          customerNumber: this.customerNumber,
        });
      }
    },
    // //获取品类
    // 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;
      });
      console.log(res);
      // return;
      if (res.length > 0) {
        this.customerName = res[0].name;
        this.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.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.getAmountList({
          ...this.searchForm,
          type: this.bill,
          ...this.isCustomerList,
        });
      } else {
        this.getDataList({
          ...this.searchForm,
          customerName: this.customerName,
          customerNumber: this.customerNumber,

          pageSize: this.pageSize,
          pageNum: this.currentPage,
          type: this.bill,
        });
        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;
      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.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.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.getAmountList({
          type: v,
        });
      }
      // this.getWalletList();
    },
    //
    async getDataList(data) {
      let res;
      if (this.bill == "COMMONLY") {
        res = await getStandbookList(data);
      } else {
        res = await getStandbookList(data);
      }

      this.dataList = res.data.records;
      this.listTotal = res.data.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.ulStyle {
  list-style: none;
  padding: 0;
  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>