yiliangyiyun-pc-jj/src/views/outboundManagement/collectionManagement.vue

<!--收款管理-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="12">
      <template slot="left">
        <ws-button :type="searchType == 3 ? 'primary' : ''" @click="handlestatus(3)">待收款</ws-button>
        <ws-button :type="searchType == 4 ? 'primary' : ''" @click="handlestatus(4)">已收款</ws-button>
        <ws-button :type="searchType == '' ? 'primary' : ''" @click="handlestatus('')">全部</ws-button>
        <ws-button type="primary" @click="adopt" v-hasPermission=" `outbound.collectionOut.view`">备注</ws-button>
        <ws-button type="primary" @click="collect" v-hasPermission=" `outbound.collectionOut.new`">收款</ws-button>
      </template>
      <template slot="right">
        <el-col style="text-align: right; line-height: 60px; padding-right: 10px">
          <div class="el-input el-input--small el-input--suffix">
            <el-select v-model="contractNo" placeholder="请选择合同" clearable filterable @change="contractchange"
              maxlength="500" type="input" class="findValue">

              <el-option v-if="item.listStatus" v-for="item in options" :key="item.constKey"
                :label="item.contractNo + '(' + item.listStatus + ')'" :value="item.contractNo" />
              <el-option v-if="!item.listStatus" v-for="item in options" :key="item.constKey" :label="item.contractNo"
                :value="item.contractNo" />
            </el-select>
          </div>
        </el-col>
      </template>
    </BaseHeaderLayout>
    <el-table :data="collectList" style="width: 100%; margin-top: 20px" ref="collectList" border height="calc(100% - 110px)"
      @selection-change="handleSelectionChange">
      <el-table-column :selectable="selectInit" type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50">
        <template scope="scope">
          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column class="table_td" prop="carNo" label="车牌号"></el-table-column>
      <el-table-column class="table_td" prop="goodsName" label="货名"></el-table-column>
      <el-table-column class="table_td" prop="grossWeight" label="毛重（公斤）"></el-table-column>
      <el-table-column class="table_td" prop="tare" label="皮重（公斤）"></el-table-column>
      <el-table-column class="table_td" prop="netWeight" label="净重（公斤）"></el-table-column>
      <el-table-column class="table_td" prop="contractPrice" label="合同单价（元/公斤）" width="150"></el-table-column>
      <el-table-column width='150' class="table_td" prop="calculationCollectable" label="计算应收（元）"></el-table-column>
      <el-table-column class="table_td" width='200' prop="actualCollectionment" label="实际应收（元）">
        <template slot-scope="scope">
          <div class="inputChenge">
            <!-- readonly -->
            <el-input v-model="scope.row.actualCollectionment" v-if="scope.row.identification == 'true'"></el-input>
            <div v-if="scope.row.identification == 'false'" class="inputs">
              {{ scope.row.actualCollectionment }}
            </div>
          </div>
          <img width="17" height="18" style="vertical-align: text-top; position: relative; top: -1px"
            src="../../../public/img/edit.png" @click="whether(scope.row)" v-if="scope.row.identification == 'false'"
            alt="" />
          <i class="el-icon-check" style="line-height: 29px; margin-left: 10px"
            v-if="scope.row.identification == 'true'" @click="varietyClick(scope.row)"></i>
          <!-- <div>—</div> -->
        </template>
      </el-table-column>
      <el-table-column class="table_td" prop="amountEdCollectionable" label="已收款(元)">
        <template slot-scope="scope">
          <div @click="cellClick(scope.row)">{{scope.row.amountEdCollectionable}}</div>
        </template>
      </el-table-column>
      <el-table-column class="table_td" prop="collectionDate" width="90" label="收款时间"></el-table-column>
      <el-table-column class="table_td" prop="status" label="状态"></el-table-column>
      <el-table-column class="table_td" prop="collectionEdPayable" label="操作" width="200"><template scope="scope">
          <el-button @click="collectment(2,scope.row)" v-hasPermission="`outbound.collectionOut.weight`">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="isShowImgList" title="收款截图">
      <div v-for="(item,index) in imgList" :key="index" class="imgList-style">
        <img :src="item" alt="" class="img">
      </div>
    </el-dialog>
    <!-- 收款 -->
    <el-dialog width="25%" title="收款" :visible.sync="collectForm" :append-to-body="true">
      <el-form :model="form">
        <el-form-item label="未收金额（元）" :label-width="formLabelWidth">
          <el-input type='number' v-model="allmoney1" autocomplete="off" class="deal"></el-input>
        </el-form-item>
        <el-form-item label="本次收款金额（元）" :label-width="formLabelWidth">
          <el-input type='number' v-model="collectmoney" autocomplete="off" placeholder="请输入本次收款金额" class="deal"></el-input>
        </el-form-item>
        <el-form-item label="收款日期" prop="collectionDate" :label-width="formLabelWidth" class="deal">
          <ws-date-picker v-model="collectionDate" type="date" placeholder="请选择收款日期" value-format="yyyy-MM-dd"
            class="deal" />
        </el-form-item>
        <el-form-item label="上传收款截图" :label-width="formLabelWidth">
          <el-upload :action="global.uploadPath" list-type="picture-card"
            :on-success="handlePictureCardPreview1" :on-remove="handleRemove" class="photo2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="collectionScreenshot" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="collectForm = false">取 消</el-button>
        <el-button type="primary" @click="collectSubmit">提 交</el-button>
      </div>
    </el-dialog>
    <!--备注-->
    <el-dialog width="25%" title="备注" :visible.sync="collectForm1" :append-to-body="true">
      <el-form :model="form">
        <div class="beizhu">
          <el-input v-model="remarks" autocomplete="off" placeholder="备注信息,不超过1000字" class="deal"></el-input>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="collectForm1 = false">取 消</el-button>
        <el-button type="primary" @click="adoptRemarks()">保存</el-button>
      </div>
    </el-dialog>
    <!-- <houseSelfCollectPrint v-show="false"></houseSelfCollectPrint> -->
    <div style="text-align: center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="deptBudgetTotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    getcollection,
    editcollect,
    remarksAdd,
    moneyCollection,
    contractList
  } from '@/model/outboundManagement/index'
  export default {
    watch: {},
    data() {
      return {
        imgList: [],
        isShowImgList: false,
        //分页
        currentPage: 1,
        pageSize: 10,
        allmoney1: 0,
        deptCircularPage: {},
        deptBudgetTotal: 0,
        warehouseList: [{
          collectionEdPayable: '快收款',
        }, ],
        options: [],
        contractNoList: [],
        contractNo: '全部合同',
        dialogVisible: false,
        form: {},
        compId: localStorage.getItem('ws-pf_compId'),
        collectForm: false,
        collectForm1: false,
        managementType: 3,
        remarks: '',
        money: 0,
        //  id:'',
        collectmoney: 0,
        paymentManagementList: [],
        collectionManagement: {
          paymentManagementList: [],
          remarks: '',
        },
        collectList: [],
        collectionDate: '',
        collectionScreenshot: '',
        amountEdCollectionable: '',
        actualCollectionment: '',
        // collectDate: '',
        calculationCollectable: '',
        searchType: '',
        searchTypeText: '',
        formLabelWidth: '120px',
        searchKeyWord: '',
        value1: '', //收款日期
        modification: [],
      }
    },
    activated() {
      this.getList()
    },
    methods: {
      cellClick(row) {
        this.imgList = row.collectionScreenshot.split('$')
        this.isShowImgList = true
        // console.log(val)
        //  console.log(val2)
        //   console.log(val3)
        //    console.log(event)
        console.log(row)
      },
      contractchange(e) {
        this.contractNo = e
        this.getList()
      },
      //修改实际应收
      varietyClick(row) {
        if (
          row.actualCollectionment < 0 ||
          row.actualCollectionment > 1000000 ||
          (String(row.actualCollectionment).indexOf('.') != -1 &&
            String(row.actualCollectionment).length -
            (String(row.actualCollectionment).indexOf('.') + 1) >
            2)
        ) {
          this.$message({
            message: '实际应收输入错误',
            type: 'warning',
          })
          return
        }
        if (!row.actualCollectionment) {
          this.$message({
            message: '实际应收不能为空',
            type: 'warning',
          })
          return
        }
        if (row.actualCollectionment < row.amountEdCollectionable) {
          this.$message({
            message: '实际应收不能小于已收款',
            type: 'warning',
          })
          return
        }
        this.$confirm(`确定要修改实际应收？`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            editcollect({
                actualCollectionment: row.actualCollectionment,
                amountNotCollectable: row.actualCollectionment - row.amountEdCollectionable,
                id: row.id,
              })
              .toPromise()
              .then((response) => {
                this.$notify.success({
                  title: '成功',
                  message: '修改成功',
                })
                this.getList()
              })
              .catch((response) => {})
          })
          .catch(() => {
            return false
          })
      },
      whether(row) {
        row.identification = 'true'
      },
      handlestatus(status) {
        this.searchType = status
        this.getList()
      },
      // ,relationId :row.relationId
      collectment(index, row) {
        this.$router.push({
          path: 'collectionment',
          query: {
            type: index,
            id: row.id,
            relationId: row.relationId,
            compId: localStorage.getItem('ws-pf_compId')
          }
        })
        // this.$router.push({ path: 'settlement', query: { type: index,id: row.id,waterMin:data1.waterMin} })
      },
      collect() {
        this.allmoney1 = 0
        if (this.modification.length == 0) {
          this.$message.warning('请选择一条要收款的条目')
        } else {
          for (var i = 0; i < this.modification.length; i++) {
            this.allmoney1 += this.modification[i].actualCollectionment - this.modification[i].amountEdCollectionable
          }
          this.collectForm = true
        }
      },
      collectSubmit() {
        if (!this.collectionScreenshot) {
          this.$message({
            message: '请上传收款截图',
            type: 'warning',
          })
          return
        }
        this.$confirm(`确定提交收款信息？`, {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
        }).then(() => {
          moneyCollection({
              paymentManagementList: this.modification,
              money: this.collectmoney,
              collectionDate: this.collectionDate,
              collectionScreenshot: this.collectionScreenshot,
            })
            .toPromise()
            .then((response) => {
              this.$message.success('收款成功')
              this.collectmoney = ''
              this.collectionDate = ''
              this.collectionScreenshot = ''
              this.collectForm = false
              this.getList()
            })
        })
      },
      //添加备注信息
      adopt() {
        this.remarks = this.remarks
        this.paymentManagementList = this.collectList[0].paymentManagementList
        if (this.modification.length == 0) {
          this.$message.warning('请选择要备注的条目')
        } else {
          this.collectForm1 = true
        }
      },
      adoptRemarks() {
        this.collectionManagement.remarks = this.remarks
        this.$confirm(`确定要保存备注信息？`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            remarksAdd({
                paymentManagementList: this.modification,
                remarks: this.remarks
              })
              .toPromise()
              .then(() => {
                this.collectForm1 = false
                this.$message.success('添加备注信息成功')
                this.paymentManagementList = {}
                this.getList()

              })
              .catch(() => {
                return false
              })
          })
      },
      handlePictureCardPreview1(file) {
        this.collectionScreenshot = file.data.url
      },
      dataFilter(val) {
        // console.log(val,"名")
        this.contractNo = val
        if (val) {
          //val存在
          this.options = this.contractNoList.filter(item => {
            if (
              !!~item.contractNo.indexOf(val) ||
              !!~item.contractNo.toUpperCase().indexOf(val.toUpperCase())
            ) {
              return true
            }
          })
        } else {
          //val为空时，还原数组
          this.options = this.contractNoList
        }
      },
      selectInit(row) {
        //在这里一定要记得类型匹配的上。
        if (row.approveStatus == null) {
          return true
        } else if (row.approveStatus != null) {
          if (row.taskId == null) {
            return false
          } else {
            return true
          }
        }
      },
      getList() {
        getcollection({
          managementType: this.managementType,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          searchKeyWord: this.searchKeyWord,
          searchType: this.searchType,
          warehouseName: this.warehouseName,
          contractNo: this.contractNo,
        }).toPromise().then((response) => {
          for (var i = 0; i < response.records.length; i++) {
            response.records[i].identification = 'false'
            response.records[i].contractPrice = response.records[i].contractPrice * 1000
          }
          this.collectList = response.records
          this.deptBudgetTotal = response.total
        })
        contractList({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          })
          .toPromise()
          .then((response) => {
            this.contractNoList = response
            this.contractNoList.unshift({
              contractNo: '全部合同'
            })
            this.options = this.contractNoList
            console.log(this.options[0].listStatus)
          })
      },
      handleRemove(file) {
        console.log(file)
      },
      handleSelectionChange(val) {
        this.modification = val

      },
      selecttaskType() {},
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ws-info-table {
    border: none;
  }

  .ws-info-table .el-form-item {
    width: 50%;
    border: none;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    width: 30%;
    text-align: center;
    background: #ffffff;
    color: #8890b1;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    border: none;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
  }

  .formItem {
    width: 70% !important;
  }

  /deep/.el-table .el-table__header .cell,
  .el-table .el-table__body .cell {
    text-align: center;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    text-align: center;
  }

  /deep/.beizhu .el-input--small .el-input__inner {
    height: 220px;
    line-height: 28px;
  }

  .inputChenge {
    width: 40%;
    display: inline-flex;
  }

  .deal {
    width: 66%;
  }

  .inputs {
    margin: 0 auto;
  }

  .el-col-8 {
    width: 33.33333%;
  }

  /deep/.findValue .el-input__inner {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 385px;
  }

  /deep/.el-select .el-input .el-input--small .el-input--suffix {
    display: block;
    font-size: 13px;
    margin-left: -67px;
  }

  .imgList-style {
    width: 50%;
    display: inline-block;

    .img {
      width: 100%;
      height: 300px;
    }
  }
</style>