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"
          :span="8"
        >
        <div class="el-input el-input--small el-input--suffix">
          <el-select
            v-model="contractNo"
            placeholder="请选择合同"
            clearable
            filterable
            :filter-method="dataFilter"
            @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="780"
      @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
            v-model="allmoney1"
            autocomplete="off"
            class="deal"
          ></el-input>
        </el-form-item>
        <el-form-item label="本次收款金额（元）" :label-width="formLabelWidth">
          <el-input
            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="https://www.zthymaoyi.com/upload/admin"
            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: sessionStorage.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: sessionStorage.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.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: sessionStorage.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>