<!--托盘需求计划审核-->
<template>
  <el-container>
    <el-header style="width: 100%">
      <el-row>
        <el-col :span="20" >
          <el-col :span="3" >
            <el-select v-model="pageUtil.queryParam.project" filterable  placeholder="工程号" clearable>
              <el-option v-for="item in pageUtil.select.shipList" :key="item.project" :label="item.project" :value="item.project" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.pmlNo" placeholder="托盘表号" />
          </el-col>
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.dwgNo" placeholder="制作图号" />
          </el-col>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button type="primary" @click=pageUtil.commonRequestNonTip(methodName.list,pageUtil.queryParam,null,afterList)>查询</el-button>
          <el-button @click=pageUtil.exportExcel(exportParam)>导出</el-button>
        </el-col>
        <el-col :span="20" style="margin-top: 5px">
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.itemNo" placeholder="部件代号" />
          </el-col>
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.itemName" placeholder="部件名称" />
          </el-col>
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.itemSpec" placeholder="部件规格" />
          </el-col>
        </el-col>
        <el-col :span="4" style="text-align: right;margin-top: 5px">
          <el-button @click=pageUtil.commonRequest(methodName.sp,$refs.table.getCheckboxRecords(),beforeSp,afterSp)>审批</el-button>
        </el-col>
        <el-col :span="20" style="margin-top: 5px">
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.ph" placeholder="批号" />
          </el-col>
          <el-col :span="3">
            <el-select v-model="pageUtil.queryParam.status" placeholder="状态" disabled clearable>
              <el-option v-for="item in pageUtil.select.status" :key="item.itemCode" :label="item.itemValue"
                         :value="item.itemCode">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-input v-model="pageUtil.queryParam.blockNo" placeholder="分段号" />
          </el-col>
        </el-col>
      </el-row>
    </el-header>
    <el-container style="margin-top: 45px" :style="pageUtil.tableHeight.defaultHeight">
      <el-main>
        <div class="mytable">
          <vxe-grid
            id="id"
            ref="table"
            class="table"
            border
            resizable
            keep-source
            highlight-hover-row
            show-header-overflow
            show-footer-overflow
            header-align="center"
            align="center"
            :height="pageUtil.tableHeight.height"
            :auto-resize="true"
            :columns="tableColumn"
            :data="pageUtil.tableData"
            :custom-config="{storage: true}"
            show-footer
            :footer-cell-style="{'text-align':'center','color':'red'}"
            :footer-method="footerMethod"
            @cell-click="cellClickEvent"
          />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import { mapGetters } from 'vuex'
import {mpprodplanQuery} from '@/api/tx/xqjhzb'
import XEUtils from 'xe-utils'
import {PageUtil} from "@/utils/commonUtil";
import {getDepartByCon} from "@/api/sy/depart";

export default {
  name:'Tpxqjhsp',
  data() {
    return {
      methodName:{
        list:'list',
        sp:'sp',
      },
      pageUtil:null,
      exportParam:{
        tableName:'table',
        fileName:'托盘需求计划信息表'
      },
      departCode:[],
      tableColumn: [
        { type: 'checkbox', width: 60 },
        { type:'seq',title: '序号', width: 60 },
        {field: 'status', title: '计划状态', width: 80, formatter: ['dictFormat','SCJHZT']},
        {
          field: 'project', title: '工程编号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'ph', title: '批号', width: 100,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'blockNo', title: '分段号', width: 100,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'zone', title: '区域', width: 100},
        {
          field: 'dwgType', title: '图纸类型', width: 120,formatter: ['dictFormat','TZLX'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'dwgNo', title: '制作图号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'pmlNo', title: '托盘表号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'blockNo', title: '分段号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemXh', title: '部件序号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'item_no', title: '部件代号', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemName', title: '部件名称', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemSpec', title: '部件规格', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemGrd', title: '材质', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'xqrq', title: '前方需求期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemQty', title: '部件数量', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemWgt', title: '部件重量', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jhrq', title: '结构计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'scDept', title: '制作单位', width: 120,formatter: ['deptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'tzrq', title: '涂装计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jhrqBlrq', title: '备料计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jhrqJjrq', title: '机加计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'tzDept', title: '涂装单位', width: 120,formatter: ['deptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'dxrq', title: '镀锌计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'clDept', title: '镀锌单位', width: 120,formatter: ['deptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'rkrq', title: '入库计划期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'psDept', title: '配送单位', width: 120,formatter: ['deptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'ddepartCode', title: '需求单位', width: 120,formatter: ['ddeptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'prodType', title: '产品类型', width: 120,formatter: ['dictFormat','CPLX'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'treatmentType', title: '处理方式', width: 120,formatter: ['dictFormat','tzfs'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'inPaintCode', title: '内涂装代码', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemInArea', title: '内涂装面积', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'outPaintCode', title: '外涂装代码', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemOutArea', title: '外涂装面积', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'itemLhArea', title: '留焊区域', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'remark', title: '备注', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'departCode', title: '责任单位', width: 120,formatter: ['deptFormat'],
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jlrq', title: '编制日期', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jlry', title: '编制人员', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'jlrid', title: '编制人ID', width: 120,
          sortable: true,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination' },
        },
        {field: 'id', title: '流水号', width: 90,visible:false},
        {field: 'csry', title: '提交人员', width: 90},
        {field: 'cssj', title: '提交日期', width: 90},
        {field: 'csrid', title: '提交人ID', width: 90},
        {field: 'xdry', title: '审核人员', width: 90},
        {field: 'xdrq', title: '审核日期', width: 90},
        {field: 'xdrid', title: '审核人ID', width: 90},
        {field: 'spry', title: '审批人员', width: 90},
        {field: 'sprq', title: '审批日期', width: 90},
        {field: 'sprid', title: '审批人ID', width: 90},
        {field: 'weekTimes', title: '周次', width: 110}
      ]
    };
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm'
    ])
  },
  created() {
    this.pageUtil=new PageUtil();
    const _pageUtil = this.pageUtil;
    //传入当前组件,便于操作
    this.pageUtil._that = this;
    _pageUtil.option.height = 191;
    _pageUtil.tableName = 'table';

    _pageUtil.queryParam.status='01';
    //查询配置
    _pageUtil.option.requestOption.list={
      url:'/api/tx/tpPlan/list',
      method:'post'
    }
    //查询审核
    _pageUtil.option.requestOption.sp={
      url:'/api/tx/tpPlan/sp',
      method:'post',
      tips:'是否审批选中的数据'
    }
    //加载查询参数校验
    _pageUtil.option.validate.push({
      methodName: 'list',
      validateParamName: 'queryParam',
      validateName: 'project',
      'message': '请先选择工程编号'
    })

    _pageUtil.option.dict = [
      {code: 'TXJHZT', name: 'status',default:'03'},
      {code: 'JHFL', name: 'planType',render:'planType'},
      {code: 'TZLX', name: 'dwgType',render:'dwgType'},
      {code: 'CPLX', name: 'prodType',render:'prodType'},
      {code: 'tzfs', name: 'treatmentType',render:'treatmentType'},
    ]
    _pageUtil.option.dept = [
      {code: '00', name: 'departCode', render: 'departCode'},
      {code: '01', name: 'scDept', render: 'scDept'},
      {code: '01', name: 'tzDept', render: 'tzDept'},
      {code: '01', name: 'clDept', render: 'clDept'},
      {code: '01', name: 'psDept', render: 'psDept'},
      {code: '01', name: 'ddepartCode', render: 'ddepartCode'},
    ]
    _pageUtil.option.initMethod = ['getProjects', 'initDict', 'initDept'];
    this.pageUtil.init();
    this.initDepartList()
  },
  methods: {
    //查询结果处理
    afterList(data){
      this.pageUtil.tableData=data;
    },
    beforeSp(data){
      //校验数据
      if(data.length<=0){
        this.$message.warning('请先选择要要保存的数据');
        return false;
      }
      return true
    },
    //审批提交成功后处理
    afterSp(){
      this.pageUtil.commonRequestNonTip('list',this.pageUtil.queryParam,null,this.afterList)
    },
    //初始化提出部门
    initDepartList() {
      const data={
        parentCode:'00'
      }
      getDepartByCon(data).then((res) => {
        this.departCode = res.data;
      })
    },
    //提出部门码名转换
    formatDept({cellValue}){
      for (const dept of this.departCode) {
        if (dept.departCode===cellValue){
          return dept.departName
        }
      }
      return cellValue;
    },
    footerCellClassName ({ $rowIndex, column }) {
      if (column.type === 'seq') {
        if ($rowIndex === 0) {
          return 'col-blue'
        } else {
          return 'col-red'
        }
      } else if (column.property === 'qty') {
        if ($rowIndex === 1) {
          return 'col-red'
        }
      }else if (column.property === 'wkh') {
        if ($rowIndex === 1) {
          return 'col-red'
        }
      }else if (column.property === 'wgt') {
        if ($rowIndex === 1) {
          return 'col-red'
        }
      }
    },
    cellClickEvent ({ column }) {
      let xTable = this.$refs.table
      xTable.updateFooter()
    },
    sumNum(list, field) {
      let count = 0
      list.forEach(item => {
        let num = Number(item[field])
        if (!XEUtils.isNumber(num) || isNaN(num)) {
          num = 0
        }
        count = this.cal.accAdd(count, num)
      })
      return count
    },
    footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 1) {
            return '合计'
          }
          if (['qty',"wkh","wgt"].includes(column.property)) {
            return this.sumNum(data, column.property)
          }
          return null
        })
      ]
    }
  }
}
</script>

<style lang="scss" scoped >
.el-header{margin:0;padding: 5px;height:auto;height: calc(100vh - 30px);}
.el-bottom{margin:0;padding: 5px;height:auto;height: calc(100vh - 70px);}
.el-container{padding: 0;margin:0;}
.el-main{padding: 0;}
.el-col{padding: 0;}
.el-aside{background: #fff;padding: 0}
.el-container{padding: 0}
.el-row {margin-bottom: 5px;}
.el-row:last-child {margin-bottom: 0; }

.tableStyles{
  background: #0a76a4;
}

.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;

}

</style>
