<!--寿命管理看板-->
<!--页面渲染区域-->
<template>
    <div class="vue-element-page-wrap" ref="tableContainer">
       <el-row class="page-search" justify="space-between" align="bottom">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px" label-position="left">
               <el-row :gutter="20">
                   <el-col :span="5">
                        <el-form-item label="物料编号" prop="params.SumCount">
                                   <el-Input v-model="queryParams.params.MATERIALSPECNAME"    clearable />
                         </el-form-item>
                   </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="5">
                       <el-form-item label="ERP工厂" prop="params.ERPFACTORY">
                            <el-select v-model="queryParams.params.ERPFACTORY" placeholder="Select" style="width: 240px">
                                  <el-option v-for="item in ERPFactoryList" :key="item.ENUMVALUE" :label="item.ENUMVALUE" :value="item.ENUMVALUE" />
                             </el-select>
                       </el-form-item>
                    </el-col>
                    <el-col :span="1"></el-col>
                    <el-col :span="5">
                       <el-form-item label="ERP库位" prop="params.ERPLOCATION">
                            <el-select v-model="queryParams.params.ERPLOCATION" placeholder="Select" style="width: 240px">
                                  <el-option v-for="item in ERPLocationList" :key="item.ENUMVALUE" :label="item.ENUMVALUE" :value="item.ENUMVALUE" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1"></el-col>
                   <el-col :span="5">
                         <el-form-item label="物料总数" prop="params.sum">
                             <el-Input v-model="queryParams.params.sum" disabled  clearable />
                        </el-form-item>
                   </el-col>
                    <el-col :span="5">
                       <el-form-item label="质检批名称" prop="params.OQARESULTMEMO">
                            <el-select v-model="queryParams.params.OQARESULTMEMO" placeholder="Select" style="width: 240px">
                                  <el-option v-for="item in ProcessStateList" :key="item.ENUMVALUE" :label="item.ENUMVALUE" :value="item.ENUMVALUE" />
                             </el-select>
                        </el-form-item>
                    </el-col>
               </el-row>
           </el-form>
           <div class="page-search-btns">
               <el-button type="primary" @click="handleQuery">搜索</el-button>
           </div>
       </el-row>    
       <!--table 区域-->
       <div class="vue-element-page-table">
           <div class="page-table-operate">
               <div class="page-table-title">
                   <span>物料信息列表</span>
               </div>
           </div>
           <el-table border v-loading="loading" :data="state.MaterialDetailList" highlight-current-row row-key="id" style="width: 100%" height="250px" @row-click="RowActivate">
               <template v-for="(col,index) in Column" :key="index">
                   <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                       <template #default="scope">
                           <span v-if="col.field === 'status'">
                               <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                               <span v-else class="table-status-inActive">禁用</span>
                           </span>
                           <span v-else>{{ scope.row[col.field] }}</span>
                       </template>
                   </el-table-column>
               </template>
               <template v-slot:empty>
                   <svg-icon icon-class="noData" width="160px" height="160px"/>
               </template>
           </el-table>
           <div>
               <pagination v-if="total>0"  :total="total"  v-model:pageNumTo="queryParams.pageNum" v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
           </div>
           <div class="page-table-operate">
               <div class="page-table-title">
                   <span>BOX信息</span>
               </div>
           </div>
           <el-table border v-loading="loading" :data="state.BoxDetailList" highlight-current-row row-key="id" style="width: 100%" height="175px">
               <template v-for="(col,index) in Column1" :key="index">
                   <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
                       <template #default="scope">
                           <span v-if="col.field === 'status'">
                               <span v-if="scope.row[col.field]" class="table-status-active">启用</span>
                               <span v-else class="table-status-inActive">禁用</span>
                           </span>
                           <span v-else>{{ scope.row[col.field] }}</span>
                       </template>
                   </el-table-column>
               </template>
               <template v-slot:empty>
                   <svg-icon icon-class="noData" width="160px" height="160px"/>
               </template>
           </el-table>
           <div>
               <pagination v-if="total1>0"  :total1="total1"  v-model:pageNumTo="queryParams.pageNum" v-model:pageSizeTo="queryParams.pageSize" @pagination="handleQuery" />
           </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
  name: 'newMaterialLife'
};
</script>
<!--script区域-->
<script lang="ts" setup>
                                   /*引入区域*/
import { reactive, ref, onMounted, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { getQueryList,getQueryPageList } from "@/api/common";   
import { msToDate } from '@/utils/CommonUtil';                                
                                   /*对象生成赋值区域*/

const queryFormRef = ref(ElForm);
const size = ref<'default' | 'large' | 'small'>('small');//formdata时间设置
const state = reactive({
    queryParams:{
      queryId: "GetMaterialLifeList",
     version: "",
     params: {
        SITENAME: localStorage.getItem("siteName"),
        MATERIALPROCESSGROUPNAME: "",
        MATERIALSPECNAME: "",
        ERPFACTORY: "",
        ERPLOCATION: "",
        ProcessGroupState:'',
        OQARESULTMEMO:'',
        sum:0
        },
     pageNum: 1,
     pageSize: 10
    },
    queryParamsERPFactory:{
     queryId: "GetErpFactoryList",
     version: "WEB00001",
     params: {
        SITENAME: localStorage.getItem("siteName"),
        },
     pageNum: 1,
     pageSize: 10
    },
    queryParamsERPLocation:{
     queryId: "GetErpLocationList",
     version: "WEB00001",
     params: {
        SITENAME: localStorage.getItem("siteName"),
        },
     pageNum: 1,
     pageSize: 10
    },
    queryParamsProcessState:{
      queryId: "GetEnumDefValueList",
     version: "WEB00001",
     params: {
        SITENAME: localStorage.getItem("siteName"),       
        ENUMNAME: "OQAState",       
        },
     pageNum: 1,
     pageSize: 10
    },
    queryParamsAdvance:{
        queryId: "GetMaterialLifeList",
        version: "",
        params: {
            SITENAME: localStorage.getItem("siteName"),       
            ERPLOCATION: "",
            ERPFACTORY:'',
            MATERIALSPECNAME:'',
           
            },
     pageNum: 1,
     pageSize: 10
    },
    queryParamsActivate:{
        queryId: "GetMaterialpackingList",
        version: "WEBPH004",
        params: {
            SITENAME: localStorage.getItem("siteName"),       
            MATERIALSPECNAME: "",
            ERPLOCATION:'',
            LOCATIONNAME:'',
            OQARESULTSTATE:'',
            MATERIALQUANTITY:'',
            PACKINGGRADE:'',
            CHARGE:'',
            MAKEDATE:''
            },
     pageNum: 1,
     pageSize: 10
    },
    operateParams:{
        date: new Date(),
    },
    Column:[] as any,
    Column1:[] as any,
    total: 0,
    total1: 1,
    loading:false,
    BoxDetailList:[] as any,
    ERPFactoryList:[] as any,
    ERPLocationList:[] as any,
    MaterialDetailList:[] as any,
    ProcessGroupNameList:[] as any,
    ProcessStateList:[] as any,
   

  });   
  const {
    queryParams,
    Column,
    Column1,
    total,
    total1,
    loading,
    BoxDetailList,
    operateParams,
    MaterialDetailList,
    ERPFactoryList,
    ERPLocationList,
    ProcessStateList,
    ProcessGroupNameList,
    
  } = toRefs(state);

                                 /*钩子函数区域*/
                                 onMounted(() => {
   state.Column = [
     { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
     { header: "物料描述", field: "DESCRIPTION", hide: false },
     { header: "ERP工厂", field: "ERPFACTORY", hide: false },
     { header: "ERP位置", field: "ERPLOCATION", hide: false },
     { header: "位置", field: "LOCATIONNAME", hide: false },
     { header: "批次", field: "CHARGE", hide: false },
     { header: "质检状态", field: "OQARESULTSTATE", hide: false },
     { header: "质检说明", field: "OQARESULTMEMO", hide: false },
     { header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
     { header: "单位", field: "MATERIALUNIT", hide: false },
     { header: "生产日期", field: "MAKEDATE", hide: false },
     { header: "品质状态", field: "PACKINGGRADE", hide: false },
     { header: "过期时间", field: "EXPIRATIONDAY", hide: false },
     { header: "保质期", field: "STORAGETIME", hide: false },
     { header: "剩余天数", field: "DAYS", hide: false },
     
   ];
   state.Column1 = [
     { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
     { header: "BOXID", field: "MATERIALPACKINGNAME", hide: false },
     { header: "物料凭证号", field: "UNDOID", hide: false },
     { header: "Hold状态", field: "HOLDSTATE", hide: false },
     { header: "供应商名称", field: "SUPPLIERNAME", hide: false },
     { header: "Stock状态", field: "STOCKSTATE", hide: false },
     { header: "品质状态", field: "PACKINGGRADE", hide: false },
     { header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
     { header: "生产日期", field: "MAKEDATE", hide: false },
     { header: "过期时间", field: "EXPIRATIONDAY", hide: false },
     { header: "质检批", field: "MATERIALPROCESSGROUPNAME", hide: false },
     { header: "ETC State", field: "ETCSTATE", hide: false },
     { header: "最后的操作名", field: "LASTEVENTNAME", hide: false },
     { header: "最后的操作员", field: "LASTEVENTUSER", hide: false },
     { header: "最后的操作时间", field: "LASTEVENTTIME", hide: false },
     
   ];
   ERPFactoryQuery();
   ERPLocationQuery();
   ProcessStateQuery();
   InAdvanceQuery();
 });
                                   /*其它函数区域*/
function handleQuery()
{
  if(state.queryParams.params.ProcessGroupState==''||state.queryParams.params.ProcessGroupState==null)
    {
       state.queryParams.version='PH004';
    }else{
    
       state.queryParams.version='PH003';
    }
    getQueryPageList(state.queryParams)
      .then((res:any)=>{
        state.MaterialDetailList = res.data.list;
        for(let i=0;i<state.MaterialDetailList.length;i++)
        { 
          var dates = new Date(state.MaterialDetailList[i].MAKEDATE).toJSON();
          state.MaterialDetailList[i].MAKEDATE=new Date(+new Date(dates) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
           //state.MaterialDetailList[i].MAKEDATE= new Date(state.MaterialDetailList[i].MAKEDATE).toLocaleString();
           
           console.log( state.MaterialDetailList[i].MAKEDATE);
        }
        state.total = res.data.total;
      })
      .catch(() => {});
}

//提前查询数量
function InAdvanceQuery()
{
    if(state.queryParams.params.ProcessGroupState==''||state.queryParams.params.ProcessGroupState==null)
    {
       state.queryParamsAdvance.version='PH004';
    }else{
    
       state.queryParamsAdvance.version='PH003';
    }
    state.queryParamsAdvance.params.ERPFACTORY=state.queryParams.params.ERPFACTORY;
    state.queryParamsAdvance.params.ERPLOCATION=state.queryParamsAdvance.params.ERPLOCATION;
    state.queryParamsAdvance.params.MATERIALSPECNAME=state.queryParamsAdvance.params.MATERIALSPECNAME;
    getQueryList(state.queryParamsAdvance)
      .then((res:any)=>{     
          if(res.data.length>0)
          {       state.queryParams.params.sum=0;
                for (let i=0;i< res.data.length;i++)
                {
                   state.queryParams.params.sum += (res.data[i].MATERIALQUANTITY == ''? 0 : res.data[i].MATERIALQUANTITY);                
                }
          }
        
      })
      .catch(() => {});
      getQueryPageList(state.queryParamsAdvance)
      .then((res:any)=>{     
             state.MaterialDetailList=res.data.list;  
             for(let i=0;i<state.MaterialDetailList.length;i++)
             { 
           state.MaterialDetailList[i].MAKEDATE= new Date(state.MaterialDetailList[i].MAKEDATE).toLocaleString();  
             }
             state.total=res.data.total;
      })
      .catch(() => {});
}
//质检状态
function ProcessStateQuery()
{
    getQueryList(state.queryParamsProcessState)
      .then((res:any)=>{
        state.ProcessStateList = res.data;
       
        state.ProcessStateList.unshift({
          MATERIALPROCESSGROUPNAME:''
          });
      })
      .catch(() => {});
}
//ERP库位查询
function ERPLocationQuery()
{
    getQueryList(state.queryParamsERPLocation)
      .then((res:any)=>{
        state.ERPLocationList = res.data;
        state.ERPLocationList.unshift({
            ENUMVALUE:''
          });
      })
      .catch(() => {});
}
//ERP工厂查询
function ERPFactoryQuery()
{
    getQueryList(state.queryParamsERPFactory)
      .then((res:any)=>{
        state.ERPFactoryList = res.data;
        state.ERPFactoryList.unshift({
            ENUMVALUE:''
          });
      })
      .catch(() => {});
}
//点击触发
function RowActivate(row:any, event:any, column:any)
{
  state.queryParamsActivate.params.CHARGE=row.CHARGE;
  state.queryParamsActivate.params.ERPLOCATION=row.ERPLOCATION;
  state.queryParamsActivate.params.LOCATIONNAME=row.LOCATIONNAME;
  let arr='';
  arr=row.MAKEDATE;
  state.queryParamsActivate.params.MAKEDATE=arr.substring(0,10);
  state.queryParamsActivate.params.MATERIALSPECNAME=row.MATERIALSPECNAME;
  state.queryParamsActivate.params.OQARESULTSTATE=row.OQARESULTSTATE;
  state.queryParamsActivate.params.PACKINGGRADE=row.PACKINGGRADE;
  console.log(state.queryParamsActivate)
  getQueryPageList(state.queryParamsActivate)
      .then((res:any)=>{     
             state.BoxDetailList=res.data.list;  
             state.total1=res.data.total;
      })
      .catch(() => {});
}
</script>
<!--style 区域-->
<style>

</style>