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

<template>
  <div class="app-container">
    <span>返利单</span>
    <el-divider></el-divider>
    <!-- 表头 -->
    <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="">
              <el-input disabled placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="返利日期" prop="">
              <el-date-picker disabled class="selectStyle" v-model="searchForm.theTime" type="datetime" placeholder="系统自动生成" default-time="23:59:59" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </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-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="制单人" prop="">
              <el-input disabled v-model="searchForm.createBy" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="制单日期" prop="">
              <el-date-picker
                class="selectStyle"
                v-model="searchForm.createTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="23:59:59"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-popconfirm v-if="$checkBtnRole('del', $route.meta.roles)" @onConfirm="delSeletFn" title="这是一段内容确定删除吗？">
          <el-button :disabled="selectList.length < 1" type="danger" size="mini" class="textColor delStyle" icon="el-icon-minus" slot="reference">批量删除</el-button>
        </el-popconfirm>
      </div>
      <div class="fr">
        <el-button type="primary" size="mini" @click="downLoadFn">模板</el-button>
        <!-- <a href="/rebate/order/download">下载文件</a> -->
        <!-- <el-button type="primary" size="mini" @click="importFn"
          >批量导入</el-button
        > -->

        <el-upload class="import-btn" action="" :http-request="handleImport" :file-list="importFileList" :show-file-list="false">
          <el-button type="primary" size="mini">批量导入</el-button>
        </el-upload>
      </div>
    </div>
    <!-- 列表 -->
    <div class="mymain-container">
      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe :row-class-name="rouClassNameFn" @row-click="onRowClick" @selection-change="selectionChange" show-summary :summary-method="getSummaries">
          <el-table-column align="center" type="selection" width="51" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="经销商编码" prop="customerNumber" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" disabled v-model="scope.row.customerNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="经销商名称" prop="customerName" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select size="mini" @change="changeCustomerFn($event, scope.$index, scope.row)" v-model="scope.row.customerId" placeholder="请选择" filterable>
                <el-option v-for="item in customerData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="left" label="返利类型" prop="customerWalletId" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select size="mini" v-model="scope.row.customerWalletId" placeholder="请选择" filterable>
                <el-option v-for="item in scope.row.walletList" :key="item.customerWalletId" :label="item.name" :value="item.customerWalletId">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="right" label="返利总金额" prop="amount" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" class="mountclass" v-model.number="scope.row.amount"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="right" label="暂扣返利" prop="withholdAmount" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" class="mountclass" v-model.number="scope.row.withholdAmount"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="政策文件流水号" prop="policyFileNo" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.policyFileNo"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="政策文号" prop="policyDocNo" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.policyDocNo"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="政策年份" prop="policyYear" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.policyYear"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="政策月份" prop="policyMonth" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.policyMonth"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="政策归属部门" prop="policyOrg" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.policyOrg"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="客户区域" prop="customerArea" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.customerArea"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="客户属性" prop="customerAttr" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.customerAttr"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="建立实际归属客户" prop="rewardActualCustomers" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.rewardActualCustomers"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="备注1" prop="remark1" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.remark1"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="备注2" prop="remark2" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.remark2"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <br />

    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" size="mini" @click="addFn">保存</el-button>
        <!-- <el-button type="primary" size="mini" @click="submitFn"
          >提交审批</el-button
        > -->
        <el-button type="primary" size="mini" @click="cancelFn">重置</el-button>
      </div>
      <div class="fr">
        <el-button type="primary" size="mini" @click="addRowFn">添加行</el-button>
        <el-button type="primary" size="mini" @click="delRowFn">删除行</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { downloadFiles, handleImport } from "@/utils/util";

import {
  getCustomerList,
  getWalletCustomerList,
  getRebateOrderAdd,
  getRebateOrderApply,
  getRebateOrderList,
  getRebateOrderDownLoad,
} from "@/api/finance/rebate_form";
export default {
  data() {
    return {
      selectList: [],
      importFileList: [],

      dataList: [],
      listLoading: false, // 列表加载loading
      customerData: [],
      searchForm: {
        // theTime: "",

        remark: "",
        createBy: "",
      },
      delIndex: null,
      // rules: {
      //   theTime: [
      //     {
      //       required: true,
      //       message: "请选择返利日期",
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },

  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.getCustomerData();
    this.searchForm.createBy = this.name;
  },
  methods: {
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        }
        if (index === 4) {
          let map2 = data.map((v) => {
            return v.amount;
          });
          sums[index] = map2
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
        if (index === 5) {
          let map2 = data.map((v) => {
            return v.withholdAmount;
          });
          sums[index] = map2
            .reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            .toFixed(2);
        }
      });

      return sums;
    },
    //删除
    delSeletFn() {
      this.selectList.sort(function (a, b) {
        return b - a;
      });

      for (let index = 0; index < this.selectList.length; index++) {
        // console.log(index);
        this.dataList.splice(this.selectList[index], 1);
      }
    },
    //选择项改变
    selectionChange(v) {
      this.selectList = v.map((v) => v.index);
    },

    // 导入
    async handleImport(param) {
      this.listLoading = true;
      const file = param.file;

      const formData = new FormData();
      formData.append("file", file);

      let result = await handleImport("/rebate/order/import/data", formData);

      this.importFileList = [];
      if (result.code == 200) {
        let Arr = result.data.items;
        let list = [];

        for (let v = 0; v < Arr.length; v++) {
          let arr = await getWalletCustomerList({
            customerId: Arr[v].customerId,
            type: "REBATE",
          });

          list.push({
            customerId: Arr[v].customerId,
            customerNumber: Arr[v].customerNumber,
            customerName: Arr[v].customerName,
            customerWalletId: Arr[v].customerWalletId,
            amount: Arr[v].amount,
            withholdAmount: Arr[v].withholdAmount,
            policyFileNo: Arr[v].policyFileNo,
            policyDocNo: Arr[v].policyDocNo,
            policyYear: Arr[v].policyYear,
            policyMonth: Arr[v].policyMonth,
            policyOrg: Arr[v].policyOrg,
            customerArea: Arr[v].customerArea,
            customerAttr: Arr[v].customerAttr,
            rewardActualCustomers: Arr[v].rewardActualCustomers,
            remark1: Arr[v].remark1,
            remark2: Arr[v].remark2,
            walletName: Arr[v].walletName,
            walletList: arr.data,
          });
        }
        let aa = [...this.dataList, ...list];

        this.dataList = aa;
        this.$message.success("导入成功");
        this.listLoading = false;
      } else {
        this.$message.error(result.message);
        // this.$message.error(1231);
      }
    },
    //下载模板
    async downLoadFn() {
      downloadFiles("/rebate/order/download");
    },
    //重置
    cancelFn() {
      this.searchForm = {
        theTime: "",
        createTime: "",
        remark: "",
        createBy: "",
      };
    },
    rouClassNameFn({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    onRowClick(row, event, column) {
      this.delIndex = row.index;
    },
    //删除行
    delRowFn() {
      this.dataList.splice(this.delIndex, 1);
    },
    // //提交审批
    // async submitFn() {
    //   let res = await getRebateOrderList({ pageSize: -1, pageNum: 1 });
    //   console.log(res);
    //   let index = res.data.records.length - 1;
    //   let arr = res.data.records;
    //   await getRebateOrderApply({ id: arr[index].rebateOrderId });
    //   this.$message.success("提交审批成功");
    // },
    //新增
    async addFn() {
      let arr;
      await this.$refs.searchForm.validate();
      this.dataList.forEach((v) => {
        arr = v.walletList.filter(
          (i) => i.customerWalletId == v.customerWalletId
        );
        v.walletName = arr[0].name;
      });
      await getRebateOrderAdd({ ...this.searchForm, items: this.dataList });
      this.$message.success("保存成功");
      this.$router.push("/finance/rebate/rebate_list");
    },
    //选择经销商名称事件
    async changeCustomerFn(v, index, value) {
      value.customerWalletId = "";

      const res = await getWalletCustomerList({
        customerId: v,
        type: "REBATE",
      });
      const res2 = this.customerData.filter((i) => i.id == v);

      this.$set(this.dataList[index], "customerNumber", res2[0].number);
      this.$set(this.dataList[index], "customerName", res2[0].name);

      this.$set(this.dataList[index], "walletList", res.data);
    },
    //获取经销商数据
    async getCustomerData() {
      const res = await getCustomerList({ pageSize: -1, pageNum: 1 });
      this.customerData = res.data.records;
    },

    //添加行
    addRowFn() {
      this.dataList.push({
        customerNumber: "",
        customerName: "",
        customerWalletId: "",
        amount: null,
        withholdAmount: null,
        policyFileNo: "",
        policyDocNo: "",
        policyYear: "",
        policyMonth: "",
        policyOrg: "",
        customerArea: "",
        customerAttr: "",
        rewardActualCustomers: "",
        remark1: "",
        remark2: "",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .mountclass {
  input {
    text-align: right;
  }
}
.selectStyle {
  width: 100%;
}
.import-btn {
  display: inline-block;
  margin-left: 10px;
}
.delStyle {
  margin-top: 20px;
}
</style>