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

<!--质检信息-->
<template>
  <div class="center">
    <div class="substance">
      <div class="substance-left">
          <div class="titleTop">
            <div class="title"></div>
            <div class="textword">基本信息</div>
          </div>
        <ws-form>
          <ws-info-table>
            <ws-form-item label="任务编号" span="1" prop="contractNo">
              <ws-input v-model="inspect.contractNo" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="仓位号" span="1" prop="binNumber">
              <ws-input v-model="inspect.binNumber" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="业务编号" span="1" prop="number">
              <ws-input v-model="inspect.weighingManagement.number" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="囤位号" span="1" prop="storageTagNo">
              <ws-input v-model="inspect.storageTagNo" placeholder="暂无" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="合同/移库编号" span="1" prop="contractNo"><!--moveTaskNo-->
              <ws-input v-model="inspect.contractNo" placeholder="自动获取，不可编辑" disabled size="small" v-if="inspect.contractNo" />
              <ws-input v-model="inspect.moveTaskNo" placeholder="自动获取，不可编辑" disabled size="small" v-else/>
            </ws-form-item>
            <ws-form-item label="提示" span="1" prop="tips">
              <ws-input v-model="inspect.weighingManagement.tips" placeholder="暂无" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="货名" span="1" prop="goodsName">
              <ws-input v-model="inspect.goodsName" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="经办人" span="1" prop="secretaryWeigher">
              <ws-input v-model="inspect.weighingManagement.secretaryWeigher" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="出库类型" span="1" prop="inOutType">
              <ws-input v-model="inspect.weighingManagement.inOutType" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="出库日期" span="1" prop="updateDate">
              <ws-input v-model="inspect.updateDate" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="运输方式" span="1" prop="outType">
              <ws-input v-model="inspect.weighingManagement.outType" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="车队" span="1" prop="fleet">
              <ws-input v-model="inspect.fleet" placeholder="非车队车辆" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="车牌号" span="1" prop="carNumber">
              <ws-input v-model="inspect.carNumber" placeholder="自动获取，不可编辑" disabled size="small" />
            </ws-form-item>

            <ws-form-item label="箱号-1" span="1" prop="boxNo">
              <ws-input v-model="inspect.boxNo" placeholder="暂无" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="箱号-2" span="1" prop="boxNoOther">
              <ws-input v-model="inspect.boxNoOther" placeholder="暂无" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="封号-1" span="1" prop="titleNo">
              <ws-input v-model="inspect.titleNo" placeholder="暂无" disabled size="small" />
            </ws-form-item>
            <ws-form-item label="封号-2" span="1" prop="titleNoOther">
              <ws-input v-model="inspect.titleNoOther" placeholder="暂无" disabled size="small" />
            </ws-form-item>
          </ws-info-table>
        </ws-form>
      </div>
      <div class="substance-right">
        <el-select v-model="warehouseName" placeholder="请选择仓库名" @change="warehouseNameChange">
          <el-option v-for="item in warehouseList" :key="item.id" :label="item.warehouseName"
            :value="item.warehouseName">
          </el-option>
        </el-select>
        <div class="screen">
          <div class="screen_left">
            <el-badge :value="noinspectList.length" class="badge_item">
              <div :class="inspectbtn == 1 ? 'inspect_css':'noinspect_css'" @click="inspectChange(1)">未质检</div>
            </el-badge>
            <el-badge :value="inspectList.length" class="badge_item">
              <div :class="inspectbtn == 2 ? 'inspect_css':'noinspect_css'" @click="inspectChange(2)">已质检</div>
            </el-badge>
          </div>
          <div class="screen_right">
            <div class="record" @click="record">记录</div>
          </div>
        </div>

        <!-- <el-table @cell-click='listclick' :data="inspectList" style="width: 100%; margin-top: 20px" ref="inspect" border>
          <el-table-column prop="qualityNo" label="业务编号"></el-table-column>
          <el-table-column prop="carNumber" label="车牌号"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if='scope.row.confirm=="1"'>
                已确认
              </span>
              <span v-else>
                {{scope.row.status}}
              </span>
            </template>
          </el-table-column>
        </el-table> -->
        <el-table ref="singleTable" :data="switchList" highlight-current-row @current-change="rowChange"
              style="width: 100%; overflow-y: scroll !important; height: calc(100vh - 54vh);margin-top:14px">
              <el-table-column property="number" label="业务编号">
                <span slot-scope="scope">{{scope.row.weighingManagement?scope.row.weighingManagement.number:""}}</span>
              </el-table-column>
              <el-table-column property="carNumber" label="车牌号">
              </el-table-column>
              <el-table-column property="status" label="状态">
              </el-table-column>
            </el-table>
            <div style="text-align: center">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="deptBudgetTotal">
              </el-pagination>
            </div>
      </div>
    </div>
    <div class="footer">
      <div class="titleTop">
        <div class="title"></div>
        <div class="textword">质检数据</div>
      </div>
      <div class="formList">
        <ws-form>
            <ws-info-table>
          <ws-form-item label="等级" prop="grade">
            <ws-select v-model="inspect.grade" placeholder="请输入等级" class="typeselect" :disabled="disabled">
              <ws-option v-for="item in gradeList" :key="item.constKey" :label="item.constValue"
                :value="item.constValue" />
            </ws-select>
          </ws-form-item>
          <ws-form-item label="杂质（%）" prop="impurity">
            <el-input v-model="inspect.impurity" placeholder="请输入杂质占比" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="水分（%）" prop="waterContent">
            <el-input v-model="inspect.waterContent" placeholder="请输入水分占比" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="霉变粒（%）"  prop="mildewGrain">
            <el-input v-model="inspect.mildewGrain" placeholder="请输入霉变粒占比" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="容重（克/升）"  prop="bulkDensity">
            <el-input v-model="inspect.bulkDensity" placeholder="请输入容重" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="热损伤（%）"  prop="jiaorenli">
            <el-input v-model="inspect.jiaorenli" placeholder="请输入热损伤占比" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          <ws-form-item label="不完善粒（%）"  prop="imperfectGrain">
            <el-input v-model="inspect.imperfectGrain" placeholder="请输入不完善粒占比" maxlength="10" size="small" type="number" :disabled="disabled" />
          </ws-form-item>
          </ws-info-table>
        </ws-form>
        <div class="but">
            <!-- <el-button @click="print" type="primary">提交</el-button> -->
            <el-button @click="print" type="primary">提交并打印</el-button>
          </div>
      </div>
    </div>
     <el-dialog width="70%" class="table-content" center :visible.sync="isShowPrint" title="粮食质检单"  @close="closeDialog">
      <!-- <inspectInfoPrint :printData="printData"></inspectInfoPrint> -->
      <outInspectPrint :printData="printData" ref="saveImg"></outInspectPrint>
      <div style="text-align:center">
        <el-button type="primary" @click="isShowPrint = false">关闭</el-button>
        <el-button type="primary" @click="printSmall">打印小票</el-button>
        <el-button type="primary" @click="printBig">打印单据</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    addOut,
    selectWarehouseSelf,
    getinspectList
  } from '@/model/outboundManagement/index'
  import {
    packList
  } from '@/model/contarct/index'
  import html2canvas from 'html2canvas'
    import axios from 'axios'
   import outInspectPrint from './component/outInspectPrint.vue'
  export default {
    components: {
      outInspectPrint,
    },
    watch: {},
    data() {
      return {
        inspect: {
          weighingManagement:{}
        },
        disabled: false,
        gradeList: [],
        cangid: '', //仓库id
        warehouseName: '',
        warehouseList: [],
        inspectbtn: 1,
        inspectList: [],
        noinspectList:[],
        switchList:[],
        //分页
        currentPage: 1,
        pageSize: 10,
        deptCircularPage: {},
        deptBudgetTotal: 0,
        managementType: 3,
        isShowPrint:false,
        printData:{}
      }
    },
    activated() {
    //   this.cangid = this.$route.query.cangid
    //   this.warehouseName = this.$route.query.warehouseName
    //   this.inspect.contractNo = this.$route.query.contractNo
    //   this.inspect.binNumber = this.$route.query.binNumber
    //   this.inspect.carNumber = this.$route.query.carNumber
    //   this.inspect.goodsName = this.$route.query.goodsName
    //   this.inspect.storageTagNo = this.$route.query.storageTagNo
    //   let id = this.$route.query.id
    //   this.cangNo = this.$route.query.warehouseNo
    //   this.count = Number(this.$route.query.count) + 1
    // 品级
        packList({
            constId: 'CON3'
          })
          .toPromise()
          .then((response) => {
            this.gradeList = response
          })
      //仓库
      selectWarehouseSelf({
          compId: localStorage.getItem('ws-pf_compId'),
        })
        .toPromise()
        .then((response) => {
          this.warehouseList = response
          if (localStorage.getItem('ck')) {
            this.warehouseName = localStorage.getItem('ck')
            for (var i = 0; i < response.length; i++) {
              if (this.warehouseName == this.warehouseList[i].warehouseName) {
                this.cangid = this.warehouseList[i].id
                break
              }
            }
          } else {
            this.warehouseName = this.warehouseList[0].warehouseName
            localStorage.setItem('ck', this.warehouseName)
            this.cangid = this.warehouseList[0].id
          }
          this.getList()
        })
    },
    methods: {
      printSmall(){
        this.inspect.type = 1
        localStorage.setItem('out-Warehouse_print',JSON.stringify( this.inspect))
        window.open('../../../static/outInspectionPrint.html')
      },
       printBig(){
         this.inspect.type = 2
        localStorage.setItem('out-Warehouse_print',JSON.stringify(this.inspect))
        window.open('../../../static/outInspectionPrint.html')
       },
      warehouseNameChange() {
        this.getList()
      },
      record(){
        this.$router.push({
          path:'outInspectRecord',
          query:{warehouseName: this.warehouseName}
        })

      },
      inspectChange(num) {
        this.inspectbtn = num
        if(num == 1){
          this.switchList = this.noinspectList
        }else if(num == 2){
          this.switchList = this.inspectList
        }
        if(this.switchList.length > 0){
         this.inspect = this.switchList[0]
         if(!this.inspect.weighingManagement){
           this.inspect.weighingManagement = {}
         }
        }else{
          this.inspect = {}
        }
        
        this.deptBudgetTotal =  this.switchList.length

      },
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
        handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
       rowChange(val) {
        // if(this.tpyeNo == 2 && this.status == 1 && val.qualityInspectionManagement.confirm == 0){
        //    this.$message({
        //       message: '该条质检信息未确认',
        //       type: 'warning'
        //     });
        // }
        if(val){
        this.inspect = val
        }
      },
      getdate() {
        var date = new Date()
        var year = date.getFullYear() //获取完整的年份(4位)
        var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
        var datetime = date.getDate() //获取当前日(1-31)
        if (mouth < 10) {
          mouth = '0' + mouth
        }
        if (datetime < 10) {
          datetime = '0' + datetime
        }
        return year + '' + mouth + datetime
      },
      closeDialog() {
        html2canvas(this.$refs.saveImg.$el).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.imgUrl = dataURL
          if (this.imgUrl !== '') {
            let b = this.dataURLtoFile(this.imgUrl, 'printImage')
            let formdata = new FormData()
            formdata.append('file', b)
            axios({
              method: 'post',
              url: 'https://www.zthymaoyi.com/upload/admin',
              data: formdata,
            }).then((response) => {
              //编辑接口
              this.inspect.pictureAddress = response.data.url
              addOut(this.inspect)
              .toPromise()
              .then((response) => {
              })
            })
          }
        })
        this.isShowPrint = false
      },
      print() {
        this.inspect.warehouseName = this.warehouseName
        // this.inspect.id = this.$route.query.id
        this.inspect.qualityInspector = localStorage.getItem('ws-pf_staffName')
        this.inspect.compId = localStorage.getItem('ws-pf_compId')
        // if (!this.inspect.grade) {
        //   this.$message({
        //     message: '等级不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        // if (!this.inspect.impurity) {
        //   this.$message({
        //     message: '杂质不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.impurity && (this.inspect.impurity < 0 || this.inspect.impurity > 40)) {
          this.$message({
            message: '杂质输入错误',
            type: 'warning',
          })
          return
        }
        if (this.inspect.impurity && String(this.inspect.impurity).indexOf('.') != -1 && String(this.inspect.impurity).length - (String(this
            .inspect.impurity).indexOf('.') + 1) > 1) {
          this.$message({
            message: '杂质应保留一位小数',
            type: 'warning',
          })
          return
        }

        
        // if (!this.inspect.waterContent) {
        //   this.$message({
        //     message: '水分不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.waterContent && (this.inspect.waterContent < 0 || this.inspect.waterContent > 40)) {
          this.$message({
            message: '水分输入错误',
            type: 'warning',
          })
          return
        }
        if (this.inspect.waterContent && String(this.inspect.waterContent).indexOf('.') != -1 && String(this.inspect.waterContent).length - (String(
            this.inspect.waterContent).indexOf('.') + 1) > 1) {
          this.$message({
            message: '水分应保留一位小数',
            type: 'warning',
          })
          return
        }
        // if (!this.inspect.mildewGrain) {
        //   this.$message({
        //     message: '霉变粒不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.mildewGrain && this.inspect.mildewGrain < 0 || this.inspect.mildewGrain > 40) {
          this.$message({
            message: '霉变粒输入错误',
            type: 'warning',
          })
          return
        }
        if (String(this.inspect.mildewGrain).indexOf('.') != -1 && String(this.inspect.mildewGrain).length - (String(
            this.inspect.mildewGrain).indexOf('.') + 1) > 1) {
          this.$message({
            message: '霉变粒应保留一位小数',
            type: 'warning',
          })
          return
        }
        // if (!this.inspect.bulkDensity) {
        //   this.$message({
        //     message: '容重不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.bulkDensity && this.inspect.bulkDensity < 500 || this.inspect.bulkDensity > 1000) {
          this.$message({
            message: '容重输入错误',
            type: 'warning',
          })
          return
        }
        if (this.inspect.bulkDensity && String(this.inspect.bulkDensity).indexOf('.') != -1 && String(this.inspect.bulkDensity).length - (String(
            this.inspect.bulkDensity).indexOf('.') + 1) > 0) {
          this.$message({
            message: '容重需输入整数',
            type: 'warning',
          })
          return
        }
        // if (!this.inspect.jiaorenli) {
        //   this.$message({
        //     message: '热损伤不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.jiaorenli && this.inspect.jiaorenli < 0 || this.inspect.jiaorenli > 40) {
          this.$message({
            message: '热损伤输入错误',
            type: 'warning',
          })
          return
        }
        if (String(this.inspect.jiaorenli).indexOf('.') != -1 && String(this.inspect.jiaorenli).length - (String(this
            .inspect.jiaorenli).indexOf('.') + 1) > 1) {
          this.$message({
            message: '热损伤应保留一位小数',
            type: 'warning',
          })
          return
        }
        // if (!this.inspect.imperfectGrain) {
        //   this.$message({
        //     message: '不完善粒不能为空',
        //     type: 'warning',
        //   })
        //   return
        // }
        if (this.inspect.imperfectGrain && this.inspect.imperfectGrain < 0 || this.inspect.imperfectGrain > 40) {
          this.$message({
            message: '不完善粒输入错误',
            type: 'warning',
          })
          return
        }
        if ( this.inspect.imperfectGrain && String(this.inspect.imperfectGrain).indexOf('.') != -1 && String(this.inspect.imperfectGrain).length - (
            String(this.inspect.imperfectGrain).indexOf('.') + 1) > 1) {
          this.$message({
            message: '不完善粒应保留一位小数',
            type: 'warning',
          })
          return
        }
        this.$confirm('确定保存质检信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            addOut(this.inspect)
              .toPromise()
              .then((response) => {
                this.$message.success('保存成功')
                this.printData = this.inspect
                this.isShowPrint = true
              })
          })
          .catch(() => {
            return false
          })
      },
      cancel() {
        this.$router.push({
          path: 'qualityInspectionManagement'
        })
      },
      getList() {
        
       getinspectList({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            warehouseName: this.warehouseName,
            managementType: this.managementType,
             qualityType:1
          })
          .toPromise()
          .then((response) => {
            this.noinspectList = response.records
             if(this.inspectbtn == 1 && this.noinspectList.length > 0){
               this.switchList = this.noinspectList
                this.inspect = this.noinspectList[0]
                if(!this.inspect.weighingManagement){
                   this.inspect.weighingManagement = {}
                }
            }else{
               this.switchList = []
                this.inspect = {}
                this.inspect.weighingManagement = {}
            }
            this.deptBudgetTotal = this.switchList.length
          })
          getinspectList({
            compId: localStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            warehouseName: this.warehouseName,
            managementType: this.managementType,
            qualityType:2
          })
          .toPromise()
          .then((response) => {
            this.inspectList = response.records
            if(this.inspectbtn == 2 && this.inspectList.length > 0){
                this.switchList = this.inspectList
                this.inspect = this.inspectList[0]
                  if(!this.inspect.weighingManagement){
                   this.inspect.weighingManagement = {}
                }
            }else{
              this.switchList = []
              this.inspect = {}
                this.inspect.weighingManagement = {}
            }
            this.deptBudgetTotal = this.switchList.length
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .center {
    background: #E8ECF6;
    overflow-y: scroll;
  }

  .ws-info-table {
    border: none;
    padding: 0 20px;
  }

  .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;
    font-size: 14px;
    color: #8890B1;
    min-width: 115px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    border: none;
  }
  .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473E8;
    margin-right: 10px;
    margin-top: 15px;
  }

  .titleTop {
    display: flex;
    width: 100%;
    height: 60px;
    background: #F6F7FC;
    line-height: 60px;
    margin-bottom: 20px;
    border-radius: 4px;
    .textword {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .substance {
    display: flex;
    width: 100%;
    height: 730px;

    .substance-left {
      width: 59%;
      background: #ffffff;
      border-radius: 4px;
      /deep/.el-input.is-disabled .el-input__inner{
         background: #F5F7FA;
         border-radius: 4px;
            color: #8890B1 !important;
            border: none;
      }
      /deep/.ws-info-table .el-form-item{
          margin: 10px 0;

      }
    }

    .substance-right {
      width: 40%;
      background: #ffffff;
      margin-left: 20px;
      border-radius: 4px;
      padding: 10px 20px 0;

      /deep/.el-select {
        width: 50%;
      }

      .screen {
        display: flex;
        width: 100%;
        margin: 15px 10px 0 0;
        border-bottom: 1px solid #D8DCE6;
        height: 45px;

        .screen_left,
        .screen_right {
          width: 50%;
        }
        .screen_left{
            min-width: 182px;
        }

        .badge_item {
          margin-right: 15px;
        }

        .inspect_css,
        .noinspect_css,
        .record {
          width: 74px;
          height: 32px;
          border-radius: 4px;
          text-align: center;
          line-height: 32px;
          
        }
        .record:hover,.inspect_css:hover,.noinspect_css:hover{
          cursor:pointer;
        }

        .inspect_css {
          background: #F0F6FF;
          color: #5878E8;
        }

        .screen_right {
          justify-content: flex-end;
          display: flex;
        }

        .record {
          color: #5878E8;
        }
      }
    }
  }

  .footer {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 4px;
    height: 300px;

    .formList {
      width: 90%;
      margin: auto;
    }

    /deep/.el-form-item__content {
      width: 50%;
    }
  }

  /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;
  }

  .bg-right {
    padding-right: 10px;
    text-align: right;
  }

  .but {
    text-align: center;
    margin: 20px auto;
  }
</style>