qmx_page_admin/src/views/order/components/batchOrder.vue

<template>
  <div class="two-child">
    <!-- 新增回款信息 -->
    <Modal title="新增回款信息" v-model="asdShow" class-name="order-model other-model batch-model" :mask-closable="false"
      @on-visible-change="visibleChange">
      <Form ref="returnCash" :model="returnCash" :rules="ruleValidate" :show-message="true" :label-width="120">
        <h3>关联回款流水</h3>
        <FormItem label="支付方式" prop="payType">
          <Select v-model="returnCash.payType" @on-change="payTypeChange" placeholder="请选择支付方式">
            <Option v-for="item in payCashStatus" :value="item.v" :key="item.v">{{ item.n }}</Option>
          </Select>
        </FormItem>
        <FormItem v-if="returnCash.payType == '3'" label="银行流水号" prop="serialNumber">
          <Input style="width:400px" v-model="returnCash.serialNumber"
            :placeholder="returnCash.flowType ? '请输入银行流水号' : '请选择银行流水号'" @click.native="serialChange"
            :readonly="!returnCash.flowType"></Input>
          <Checkbox style="margin-left:20px" v-model="returnCash.flowType" @on-change="flowTypeChange">
            <span>手动录入</span>
          </Checkbox>
        </FormItem>
        <div v-if="(returnCash.serialNumber && !hShow || returnCash.flowType) || returnCash.payType != '3'">
          <div v-if="returnCash.payType == '3'">
            <FormItem label="支付户名" prop="payAccountName">
              <Input v-model="returnCash.payAccountName" :readonly="!returnCash.flowType"></Input>
            </FormItem>
            <FormItem label="回款银行" prop="returnBank">
              <Input v-model="returnCash.returnBank" :readonly="true"></Input>
            </FormItem>
          </div>
          <div v-else>
            <FormItem label="支付单号" prop="returnCode">
              <Input v-model="returnCash.returnCode"></Input>
            </FormItem>
          </div>
          <FormItem label="回款时间" prop="returnTime">
            <DatePicker type="datetime" v-model="returnCash.returnTime" format="yyyy-MM-dd HH:mm:ss"
              :readonly="!returnCash.flowType && returnCash.payType == '3'"></DatePicker>
          </FormItem>
          <FormItem label="流水金额（元）" prop="serialCash">
            <Input v-model="returnCash.serialCash" @on-keyup="returnCash.serialCash = conHandler(returnCash.serialCash)"
              :readonly="!returnCash.flowType && returnCash.payType == '3'"></Input>
          </FormItem>
          <FormItem label="支付凭证">
            <b-upload ref="uploadRef1" @fileData="fileData" :placeholdered="'请上传凭证'" :accepted="'.jpg,.png,.jpeg'"
              :formated="['jpg', 'png', 'jpeg']" :multipled="false"></b-upload>
          </FormItem>
          <h3>关联订单回款明细</h3>
          <Table ellipsis size="small" class="batch-tab-b" :loading="loading2" :columns="columns2" :data="selectData"
            show-summary :summary-method="handleSummary" v-if="!hShow" border></Table>
          <FormItem label="回款说明" style="margin-top:20px">
            <Input type="textarea" v-model="returnCash.remark" placeholder="无回款说明" :autosize="{ minRows: 2, maxRows: 5 }"
              :readonly="!returnCash.flowType && returnCash.payType == '3'"></Input>
          </FormItem>
        </div>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" @click="batchConfirm" :disabled="isDisable">确定</Button>
        <Button size="large" @click="visibleChange(false)">取消</Button>
      </div>
    </Modal>
    <!-- 回款流水弹框 -->
    <Modal title="回款流水" v-model="hShow" class-name="order-model other-model" :mask-closable="false">
      <Input v-model="searVal" search enter-button="搜索" class="inpt-sear" @on-search="onSearch"
        placeholder="请输入户名查询回款流水" />
      <Table ellipsis :loading="loading1" :columns="columns" :data="selectList" :border="false"></Table>
      <Page :current="page" :page-size="pageSize" :total="total" @on-change="changePage" v-show="total > 10" />
      <div slot="footer">
        <Button type="primary" size="large" @click="onConfirm" :disabled="isDisable">确定</Button>
        <Button size="large" @click="hShow = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import bUpload from '@/components/uploadFile.vue'
import { dateFormatter } from '@/assets/js/date.js'
export default {
  props: {
    selectData: {},
    status: Boolean,
    bookLevel: String
  },
  components: {
    bUpload
  },
  methods: {
    conHandler(val) {
      return val.match(/\d+(\.\d{0,2})?/) ? val.match(/\d+(\.\d{0,2})?/)[0] : ''
    },
    payTypeChange(val) {
      if (val !== '3') {
        this.returnCash.flowType = true
        this.returnCash.serialNumber = ''
        this.returnCash.returnTime = ''
        this.returnCash.serialCash = ''
        this.returnCash.returnVoucherUrl = ''
        this.returnCash.remark = ''
      } else {
        this.returnCash.flowType = false
      }
    },
    flowTypeChange(val) {
      if (val) {
        // this.$refs.returnCash.resetFields()
        this.returnCash = {
          flowType: true,
          payType: '3',
          serialNumber: '',
          returnTime: '',
          returnBank: '广发银行北京顺义支行',
          serialCash: '',
          returnVoucherUrl: '',
          remark: ''
        }
        this.surplusData()
      }
    },
    fixedNum(val) {
      return val ? Number(parseFloat(val * 100).toFixed(0)) : 0
    },
    inited() {
      Object.keys(this.returnCash).forEach(key => {
        if (key == 'payType') {
          return
        } if (key == 'flowType') {
          this.returnCash[key] = false
        } else {
          this.returnCash[key] = ''
        }
      })
    },
    init() {
      const arr1 = [], arr2 = [], arr3 = []
      this.selectData.forEach(v => {
        if (v.company_name || v.id) {
          arr1.push(v.company_name)
          arr2.push(v.id)
          arr3.push({
            orderId: v.id
          })
        }
      })
      this.selectName = arr1[0]
      this.selectId = arr2
      this.selectOrderId = arr3
    },
    localed(val) {
      return val.toLocaleString('zh', { style: 'currency', currency: 'CNY' })
    },
    surplusData() {
      console.log('============')
      this.init()
      this.$request('/order/surplusPrice').data(
        {
          orderArr: this.selectOrderId
        }
      ).success((res) => {
        if (res.data) {
          this.allPrice = res.data.price
          this.orderAtr = res.data.orderArr
          console.log(parseInt(this.huiIds.TRSBAL * 100), res.data.price)
          if (parseInt(this.huiIds.TRSBAL * 100) > res.data.price) {
            this.$Notice.warning({
              title: '警告提示',
              desc: "订单回款失败，回款金额不符合！",
              duration: 5
            })
            return
          } else {
            console.log(this.huiIds)
            if (!this.returnCash.flowType) {
              this.returnCash.serialNumber = this.huiIds.BNKFLW
              this.returnCash.returnTime = String(this.huiIds.BNKTIM)
              this.returnCash.returnBank = this.huiIds.BNKNAM
              this.returnCash.serialCash = this.huiIds.TRSBAL || 0
              this.returnCash.payAccountName = this.huiIds.OTHNAM
              this.returnCash.remark = this.huiIds.NUSAGE
              setTimeout(() => {
                this.hShow = false
              }, 500)
            }
          }
          console.log(parseInt(this.returnCash.serialCash * 100), res.data.price)
          let arrs = this.selectData.length
          this.selectData.forEach((v, i) => {
            res.data.orderArr.forEach(s => {
              if (String(s.orderId) === String(v.id)) {
                v.no_return_monery = s.money / 100
                if (parseInt(this.returnCash.serialCash * 100) == res.data.price) {
                  v._readonly = true
                  if (this.selectData.length > 1 || this.selectData.length === 1) {
                    v.monery = ''
                    v.monery += (s.money / 100).toString()
                    console.log(v.monery)
                  } else {
                    v.monery += ''
                  }
                } else if (parseInt(this.returnCash.serialCash * 100) < res.data.price) {
                  v.monery = ''
                  console.log(this.returnCash.flowType)
                  if (this.selectData.length > 1 && arrs == i + 1) {
                    v._readonly = true
                  } else {
                    console.log(parseInt(this.returnCash.serialCash * 100), res.data.price)
                    v._readonly = false
                    this.$set(v, i, false)
                  }
                }
              }

            })

          })
        }
      }).post()
    },
    handleSummary({ columns }) {
      const sums = {}
      columns.forEach((column, index) => {
        const key = column.key
        if (index === 0) {
          sums[key] = {
            key,
            value: '总价'
          }
          return
        }
        console.log(this.selectData)
        const values = this.selectData.map(item => Number(item[key]))
        if (!values.every(value => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[key] = {
            key,
            value: v
          }
        } else {
          sums[key] = {
            key,
            value: ''
          }
        }
      })
      this.selectData.forEach((v, i) => {
        this.orderAtr.forEach(s => {
          if (String(s.orderId) === String(v.id)) {
            if (this.returnCash.flowType && (parseInt(this.returnCash.serialCash * 100) == this.allPrice)) {
              v.monery = ''
              v.monery += (s.money / 100).toString()
              v._readonly = true
              this.$set(v, i, true)
              console.log(v.monery)
            } else if (this.returnCash.flowType && (parseInt(this.returnCash.serialCash * 100) < this.allPrice)) {
              if (v._readonly) {
                v.monery = ''
                v._readonly = false
                this.$set(v, i, false)
              }
            }
          }
        })
      })
      if (parseInt(this.returnCash.serialCash * 100) < this.allPrice) {
        setTimeout(() => {
          let lastVal = document.getElementById('re-moey' + (this.selectData.length - 1))
          lastVal.value = this.returnCash.serialCash - sums.monery.value.toFixed(2)
          lastVal.setAttribute('readonly', true)
        }, 0)
        this.lastVal = sums.monery.value
      }
      return sums
    },
    getData(val) {
      this.init()
      this.loading1 = true
      let obj = {
        offset: (this.page - 1) * this.pageSize,
        pageSize: this.pageSize,
        corporateName: val ? val : this.selectName
      }
      this.$request('/order/collectionFlow').data(obj).success((res) => {
        if (res.data.list) {
          this.selectList = res.data.list
          this.total = res.data.total
          this.loading1 = false
          this.hShow = true
          this.flage = false
        }
      }).post()
    },
    changePage(page) {
      this.page = page
      this.pageSize = 10
      this.getData(this.searVal)
    },
    onSearch(val) {
      this.page = 1
      this.getData(val)
    },
    serialChange() {
      if (this.returnCash.flowType) {
        return
      }
      if (this.flage) {
        this.searVal = this.selectData[0].company_name
        this.getData(this.searVal)
      } else {
        this.hShow = true
      }
    },
    fileData(val) {
      this.returnCash.returnVoucherUrl = val
    },
    onConfirm() {
      if (this.huiIds.length == 0) {
        this.$Notice.warning({
          title: '警告提示',
          desc: "至少选择一项！",
          duration: 5
        })
        return
      }
      this.surplusData()
    },
    batchConfirm() {
      console.log(this.returnCash)
      const arr1 = [], arr2 = []
      let arr3 = []
      this.selectData.forEach(v => {
        arr1.push(this.fixedNum(v.monery))
        arr2.push({
          orderId: v.id,
          money: this.fixedNum(v.monery),
        })
      })
      arr3 = arr1.splice(0, arr1.length - 1)

      if (this.returnCash.serialCash * 100 < this.allPrice) {
        arr2[arr2.length - 1].money = this.fixedNum(this.returnCash.serialCash - this.lastVal)
      }
      let obj = {}
      if (this.returnCash.payType == '3') {// 对公转账
        obj = {
          transactionId: this.huiIds.id ? String(this.huiIds.id) : 0,
          orderArr: arr2,
          returnVoucherUrl: this.returnCash.returnVoucherUrl,
          returnType: this.returnCash.payType,
          flowType: this.returnCash.flowType ? 1 : 0,
          returnRemarks: this.returnCash.remark,
          returnMoney: this.fixedNum(this.returnCash.serialCash),
          payAccountName: this.returnCash.payAccountName,
          BNKTIM: dateFormatter(this.returnCash.returnTime),
          BNKFLW: this.returnCash.serialNumber,
          BNKNAM: this.returnCash.returnBank,
          returnCode: this.returnCash.returnCode
        }
      } else {// 微信、支付宝
        obj = {
          transactionId: this.huiIds.id ? String(this.huiIds.id) : 0,
          orderArr: arr2,
          returnVoucherUrl: this.returnCash.returnVoucherUrl,
          returnType: this.returnCash.payType,
          flowType: 1,
          BNKTIM: dateFormatter(this.returnCash.returnTime),
          returnRemarks: this.returnCash.remark,
          returnMoney: this.fixedNum(this.returnCash.serialCash),
          returnCode: this.returnCash.returnCode
        }
      }
      console.log(obj)
      this.$refs.returnCash.validate((valid) => {
        console.log(valid)
        if (valid) {
          if (arr3.indexOf(0) > -1) {
            this.$Notice.warning({
              title: '警告提示',
              desc: "请输入关联订单回款金额！"
            })
            return
          }
          if (this.returnCash.serialCash < this.lastVal) {
            this.$Notice.warning({
              title: '警告提示',
              desc: "回款金额不能为负数！"
            })
            return
          }
          this.isDisable = true
          this.$request('/order/editBatchReturnMoneyInfo').data(obj).success((res) => {
            this.hShow = false
            this.asdShow = false
            this.isDisable = false
            this.huiIds = []
            this.$Notice.success({
              title: '回款结果',
              desc: res.data.msg || "订单回款成功！",
              duration: 5
            })
            this.$emit('onChange')
          }).post()
        }
      })
    },
    visibleChange(val) {
      this.$refs.returnCash.resetFields()
      this.returnCash = {
        flowType: false,
        payType: '3',
        serialNumber: '',
        returnTime: '',
        returnBank: '广发银行北京顺义支行',
        serialCash: '',
        returnVoucherUrl: '',
        remark: ''
      }
      if (val) {
        this.flage = true
        this.surplusData()
        return
      } else {
        this.hShow = false
        this.asdShow = false
        this.huiIds = []
        this.page = 1
        this.pageSize = 10
        setTimeout(() => {
          this.selectList = []
          this.inited()
        }, 300)
      }
    }
  },
  data() {
    const validateSequence = (rule, value, callback) => {
      if (this.returnCash.flowType && value == '') {
        callback(new Error('请输入银行流水号'))
      } else {
        callback()
      }
    }
    const valTime = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请选择回款时间'))
      } else {
        callback()
      }
    }
    const validCash = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入流水金额'))
      } if (parseInt(this.returnCash.serialCash * 100) > this.allPrice) {
        // callback(new Error('流水金额不能大于未回款金额'))
        callback(new Error('流水金额需 <= ' + this.allPrice / 100))
      } else {
        callback()
      }
    }
    return {
      hShow: false,
      asdShow: false,
      loading1: false,
      loading2: false,
      isDisable: false,
      page: 1,
      flage: true,
      searVal: '',
      pageSize: 10,
      total: 0,
      selectId: [],
      selectOrderId: [],
      selectName: [],
      selectList: [],
      huiIds: [],
      orderAtr: [],
      allPrice: 0,
      returnCash: {
        flowType: false,
        payType: '3',
        serialNumber: '',
        returnTime: '',
        returnBank: '广发银行北京顺义支行',
        serialCash: '',
        returnVoucherUrl: '',
        remark: ''
      },
      lastVal: 0,
      sums: 0,
      ruleValidate: {
        payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
        serialNumber: [{ required: true, validator: validateSequence, trigger: 'blur' }],
        payAccountName: [{ required: true, message: '请输入支付户名', trigger: 'blur' }],
        returnBank: [{ required: true, message: '请输入回款银行', trigger: 'blur' }],
        returnCode: [{ required: true, message: '请输入支付单号', trigger: 'blur' }],
        returnTime: [{ required: true, type: 'datetime', validator: valTime, trigger: 'blur' }],
        serialCash: [{ required: true, validator: validCash, trigger: 'blur' }]
      },
      payCashStatus: [
        { v: '1', n: '微信' },
        { v: '2', n: '支付宝' },
        { v: '3', n: '对公转账' }
      ],
      columns: [
        {
          title: '#',
          type: 'checkBox',
          width: 40,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Checkbox', {
                props: {
                  value: params.row.checkBox
                },
                on: {
                  'on-change': (e) => {
                    this.selectList.forEach((items) => {
                      this.$set(items, 'checkBox', false)
                    })
                    this.selectList[params.index].checkBox = e
                    this.huiIds = params.row
                  }
                }
              })
            ])
          }
        },
        {
          title: '金额（元）',
          key: 'TRSBAL',
          align: 'center'
        },
        {
          title: '户名',
          key: 'OTHNAM',
          align: 'center'
        },
        {
          title: '到账时间',
          key: 'BNKTIM',
          align: 'center'
        },
        {
          title: '银行流水号',
          key: 'BNKFLW',
          align: 'center',
          render: (h, { row }) => {
            return h('span', row.BNKFLW ? row.BNKFLW : '-')
          }
        }
      ],
      columns2: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center',
        },
        {
          title: '关联订单编号',
          key: 'order_code',
          align: 'center'
        },
        {
          title: '产品类型',
          key: 'product_type',
          width: '170',
          align: 'center',
          render: (h, { row }) => {
            let words = row.product_type
            // 超级订阅
            let vipType = ''
            let vipT = row.vip_type
            if (vipT == 0) {
              vipType = '（购买）'
            } else if (vipT == 1) {
              vipType = '（续费）'
            } else if (vipT == 2) {
              vipType = '（升级）'
            } else if (vipT == null) {
              if (row.pay_way == "trial") {
                vipType = '（试用）'
              } else {
                vipType = '（购买）'
              }
            } else if (vipT == 3) {
              vipType = '（试用）'
            }
            // 大会员
            let bigVip = ''
            if (row.filter) {
              let levels = JSON.parse(row.filter).level
              if (levels == 1) {
                bigVip = '（专家版）'
              } else if (levels == 2) {
                bigVip = '（智慧版）'
              } else if (levels == 3) {
                bigVip = '（商机版）'
              } else if (levels == 4) {
                bigVip = '（试用版）'
              } else if (levels == 6) {
                bigVip = '（商机版2.0）'
              } else if (levels == 7) {
                bigVip = '（专家版2.0）'
              }
            } else {
              bigVip = this.bookLevel
            }

            // 省份订阅包
            let bookType = ''
            let book = row.vip_type
            if (book == 1) {
              bookType = '（续费）'
            } else if (book == 2) {
              bookType = '（升级）'
            } else if (book == 0) {
              bookType = '（购买）'
            } else if (book == 3) {
              bookType = '（试用）'
            }
            if (words == 'VIP订阅' || words == 'vip订阅') {
              return h('span', '超级订阅' + vipType)
            } else if (words == '大会员') {
              return h('span', '大会员' + bigVip)
            } else if (words == '省份订阅包') {
              return h('span', '省份订阅包' + bookType)
            } else {
              return h('span', row.product_type)
            }
          }
        },
        {
          title: '未回款金额（元）',
          key: 'no_return_monery',
          align: 'center'
        },
        {
          title: '回款金额（元）',
          key: 'monery',
          align: 'center',
          width: '210',
          render: (h, { row, index }) => {
            return h('Input', {
              props: {
                elementId: 're-moey' + index,
                placeholder: '请输入关联订单回款金额',
                value: row.monery,
                readonly: row._readonly
              },
              on: {
                'on-change': (e) => {
                  this.selectData.forEach((v, i) => {
                    if (row.id == v.id) {
                      v.monery = e.target.value
                      this.$set(v, i, e.target.value)
                    }
                  })
                  console.log(this.selectData)
                }
              }
            })
          }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.ivu-page {
  text-align: right;
  margin-top: 20px;
}

h3 {
  margin-bottom: 20px;
  color: rgb(54, 163, 247);
  font-weight: 700;
}

::v-deep #re-moey {
  text-align: center;
}

.inpt-sear {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 14px;
}

::v-deep .ivu-table-summary {
  display: none;
}

::v-deep .ivu-table-overflowX {
  overflow: hidden;
}
</style>