ha-mes-vue/src/views/modules/production/productionBlankingSearch.vue

<template>
  <div class="mod-config">
    <el-form :inline="true"  label-position="top" label-width="100px" >
      <el-form-item :label="'硫化订单号：'">
        <el-input v-model="searchData.orderNo" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'硫化产品名称：'">
        <el-input v-model="searchData.partDescSpec" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="' '">
      <el-button @click="search()" style="margin-left: 0px;margin-top: 0px" type="primary">查询</el-button>
      <el-button @click="getSum()" style="margin-left: 0px;margin-top: 0px" type="primary">合并任务单</el-button>
      </el-form-item>
    </el-form>
    <div class="search1">
    <el-table
      cell-style="cc"
      :height="height"
      :data="tableData"
      ref="wt_table"
      @selection-change="selectionChangeHandle"
      border
      :row-class-name="tableRowClassName"
      style="width: 100%;">
      <el-table-column
        type="selection"
        align="center"
        :selectable="selectFlag"
        width="30">
      </el-table-column>
      <el-table-column
        prop="site"
        header-align="center"
        align="left"
        min-width="40"
        style="font-size: 20px"
        label="工厂编码">
      </el-table-column>
      <el-table-column
        prop="erpStatus"
        header-align="center"
        align="left"
        min-width="40"
        style="font-size: 20px"
        label="erp状态">
      </el-table-column>
      <el-table-column
        prop="orderNo"
        header-align="center"
        align="left"
        min-width="65"
        label="硫化订单号">
      </el-table-column>
      <el-table-column
        prop="orderNoHunlian"
        header-align="center"
        align="left"
        min-width="65"
        label="周计划号">
      </el-table-column>
      <el-table-column
        prop="partDescSpec"
        header-align="center"
        align="left"
        min-width="120"
        label="硫化产品名称">
      </el-table-column>
      <el-table-column
        prop="compPartDescSpec"
        header-align="center"
        align="left"
        min-width="120"
        label="混炼胶名称">
      </el-table-column>
      <el-table-column
        prop="qtyRequired"
        header-align="center"
        align="right"
        min-width="45"
        label="混炼胶用量">
      </el-table-column>
      <el-table-column
        prop="sjph1"
        header-align="center"
        align="center"
        min-width="50"
        label="生胶牌号1">
      </el-table-column>
      <el-table-column
        prop="sjphQtyReq1"
        header-align="center"
        align="right"
        min-width="45"
        label="生胶1用量">
      </el-table-column>
      <el-table-column
        prop="sjph2"
        header-align="center"
        align="center"
        min-width="50"
        label="生胶牌号2">
      </el-table-column>
      <el-table-column
        prop="sjphQtyReq2"
        header-align="center"
        align="right"
        min-width="45"
        label="生胶2用量">
      </el-table-column>
      <el-table-column
        prop="planStartDate"
        header-align="center"
        align="center"
        min-width="45"
        label="需求日期">
      </el-table-column>
    </el-table>
    </div>
    <el-dialog title="混炼任务合并" :close-on-click-modal="false" v-drag :visible.sync="sumFlag" width="700px">
      <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;">
        <el-form-item :label="'硫化产品名称：'">
          <el-input v-model="hunlianPartDesc" style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item :label="'混炼胶用量：'">
          <el-input v-model="qty1" readonly style="width: 130px"></el-input>
        </el-form-item>

        <el-form-item :label="'生胶1用量：'">
          <el-input v-model="qty2"  readonly style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'生胶2用量：'">
          <el-input v-model="qty3" readonly  style="width: 130px" ></el-input>
        </el-form-item>
      </el-form>
      <el-table
        height="200"
        :data="modalTableData"
        ref="tables"
        border
        style="width: 100%">
<!--        <el-table-column-->
<!--          prop="orderNo"-->
<!--          header-align="center"-->
<!--          align="left"-->
<!--          min-width="60"-->
<!--          label="生产订单号">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="orderNoHunlian"
          header-align="center"
          align="left"
          min-width="60"
          label="周计划号">
        </el-table-column>
        <el-table-column
          prop="qtyRequired"
          header-align="center"
          align="right"
          min-width="45"
          label="混炼胶用量">
        </el-table-column>
        <el-table-column
          prop="sjph1"
          header-align="center"
          align="center"
          min-width="50"
          label="生胶牌号1">
        </el-table-column>
        <el-table-column
          prop="sjphQtyReq1"
          header-align="center"
          align="right"
          min-width="45"
          label="生胶1用量">
        </el-table-column>
        <el-table-column
          prop="sjph2"
          header-align="center"
          align="center"
          min-width="50"
          label="生胶牌号2">
        </el-table-column>
        <el-table-column
          prop="sjphQtyReq2"
          header-align="center"
          align="right"
          min-width="45"
          label="生胶2用量">
        </el-table-column>
        <el-table-column
          prop="planStartDate"
          header-align="center"
          align="center"
          min-width="45"
          label="需求日期">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          width="50"
          fixed="right"
          label="操作">
          <template slot-scope="scope" class="foo_container">
            <a type="text" size="small" @click="splitSchedulesTable(scope.$index)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="saveNewPlan">合并</el-button>
        <el-button type="primary" @click="sumFlag = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
  import {
    productionBlankingSearch,
    saveHunlianTask,
  } from '@/api/production.js'
  export default {
    name: 'productionBlankingSearch',
    data () {
      return {
        sumFlag:false,
        pageIndex: 1,
        totalPage: 1,
        height: 200,
        tableData: [],
        searchData:{
          orderNo:'',
          partDescSpec:''
        },
        dataListSelections: [],
        qty1:0,
        qty2:0,
        qty3:0,
        hunlianPartDesc:'',
        modalTableData:[],
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 180
      })
      // this.autoRoll()
    },
    methods: {
      splitSchedulesTable (index) {

        this.modalTableData.splice(index, 1)
        let modalTableData=this.modalTableData;
        this.qty1=0;
        this.qty2=0;
        this.qty3=0;
        for (let i = 0; i <modalTableData.length ; i++) {
          if(modalTableData[i].qtyRequired!=null){
            let num1=this.qty1+modalTableData[i].qtyRequired;
            this.qty1=num1;
          }
          if(modalTableData[i].sjphQtyReq1!=null){
            let num2=this.qty2+modalTableData[i].sjphQtyReq1;
            this.qty2=num2;
          }
          if(modalTableData[i].sjphQtyReq2!=null){
            let num3=this.qty3+modalTableData[i].sjphQtyReq2;
            this.qty3=num3;
          }
        }
        this.qty1=Number(this.qty1).toFixed(2);
        this.qty2=Number(this.qty2).toFixed(2);
        this.qty3=Number(this.qty3).toFixed(2);
      },
      selectFlag(row,index){
          if(row.orderNo==null||row.erp=='已取消'||row.finishedFlag=='2'||row.finishedFlag=='3'){
            return false;
          }else {
            return true;
          }
      },
      // 多选数据
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      tableRowClassName ({row, rowIndex}) {
        if (row.finishedFlag == '2') {
          return 'success-row'
        }
        if (row.finishedFlag == '3') {
          return 'false-row'
        }
        if (row.finishedFlag == '4') {
          return 'yellow-row'
        }
        return ''
      },
      search () {
        productionBlankingSearch(this.searchData).then(({data}) => {
          this.tableData = data.rows;
        })
      },
      getSum(){
        this.qty1=0;
        this.qty2=0;
        this.qty3=0;
        if(this.dataListSelections.length==0){
          this.$alert('未勾选订单！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        let dataList=this.dataListSelections;
        let flag=false;
        for (let i = 0; i <dataList.length ; i++) {
          if(dataList[i].site!=dataList[0].site||dataList[i].componentPartNo!=dataList[0].componentPartNo){
            flag=true;
          }
        }
        if(flag){
          this.$alert('勾选订单不是同一个工厂或者混炼物料！', '错误', {
            confirmButtonText: '确定'
          })
          return false
        }
        for (let i = 0; i <dataList.length ; i++) {
          if(dataList[i].qtyRequired!=null){
            let num1=this.qty1+dataList[i].qtyRequired;
            this.qty1=num1;
          }
          if(dataList[i].sjphQtyReq1!=null){
            let num2=this.qty2+dataList[i].sjphQtyReq1;
            this.qty2=num2;
          }
          if(dataList[i].sjphQtyReq2!=null){
            let num3=this.qty3+dataList[i].sjphQtyReq2;
            this.qty3=num3;
          }
        }
        this.hunlianPartDesc=dataList[0].compPartDescSpec;
        this.qty1=Number(this.qty1).toFixed(2);
        this.qty2=Number(this.qty2).toFixed(2);
        this.qty3=Number(this.qty3).toFixed(2);
        this.modalTableData=JSON.parse(JSON.stringify(dataList))
        this.sumFlag=true;
      },
      saveNewPlan(){
        if(this.modalTableData.length==0){
          this.$alert("列表中不存在周计划！", '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        let detailList=[];
        for (let i = 0; i <this.modalTableData.length; i++) {
            let data={
              site:this.modalTableData[i].site,
              orderNo:this.modalTableData[i].orderNoHunlian,
              orderRef1:this.modalTableData[i].orderNo,
              hunlianQty:this.modalTableData[i].qtyRequired,
              orderDate:this.modalTableData[i].planStartDate,
              hunlianPartNo:this.modalTableData[i].componentPartNo,
            }
          detailList.push(data);
        }
        let inData={
          site:this.modalTableData[0].site,
          taskQty:this.qty1,
          partNo:this.modalTableData[0].componentPartNo,
          createBy:this.$store.state.user.name,
          detailList:detailList
        }
        this.$confirm(`是否合并这些周计划?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'

        }).then(() => {
          saveHunlianTask(inData).then(({data}) => {
            if (data && data.code === 0) {
              this.search ();
              this.sumFlag = false;
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },
    }
  }
</script>

<style >
  .search1 .el-table .success-row {
    background: #1bb61b;
  }
  .search1 .el-table .false-row {
    /*background: #cbcb14;*/
    background: #db1212;
  }
  .search1 .el-table .yellow-row{
    background: #ffff00;
  }
  .search1 .el-table .cell {
    padding: 0px;
  }
</style>