<!--到货PO查询-->
<!--页面设计   书写区域-->
<template>
     <div class="vue-element-page-wrap" ref="tableContainer">
         <el-row class="page-search" justify="space-between" align="middle">
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-row :gutter="20">
                     <el-col :span="6">
                        <el-form-item label="" prop="params.MATERIALSPECNAME">
                            <el-Input v-model="queryParams.params.MATERIALSPECNAME" placeholder="物料编号" clearable @keyUpEvent="handleQuery" />
                        </el-form-item>
                     </el-col>
                     <el-col :span="2"></el-col> 
                     <span class="CommonStyle">供应商名称</span>
                     <el-col :span="10">
                        <el-form-item label="" prop="params.SUPPLIERNAME">
                            <el-select v-model="queryParams.params.SUPPLIERNAME" class="m-2" filterable  placeholder="" size="small" >
                                <el-option
                                    v-for="item in POName"
                                    :key="item.SUPPLIERNO"                
                                    :label="item.SUPPLIERNAME"                
                                    :value="item.SUPPLIERNAME" 
                                >
                                    <span style="float: left">{{ item.SUPPLIERNAME }}</span>
                                    <span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">
                                        {{ item.SUPPLIERNO }}
                                    </span>
                                </el-option>
                            </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>
         <div class="vue-element-page-table">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <span>物料交货单信息</span>
                </div>
                <div class="page-table-operateBtns">
                    <el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
                        <template #reference>
                            <el-button class="operateBtns-setting">
                            <svg-icon icon-class="table_title" width="16px" height="16px" />
                            </el-button>
                        </template>
                        <ConfigTable :list="column" @updateList="updateList" />
                    </el-popover>
                </div>
            </div>
            <el-table border v-loading="loading" :data="state.MaterialList" highlight-current-row row-key="id" style="width: 100%" height="500px">
                <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>
     </div>
</template>
<script lang="ts">
export default {
  name: 'POQuery'
};
</script>
<!--script    书写区域-->
<script lang="ts" setup>
    /*
      引入区域
    */
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from 'vue';
import {ElForm, ElMessageBox, ElTree} from 'element-plus';
import { getQueryList,getQueryPageList } from '@/api/common';
    /*
      对象定义区域
    */ 

/**
 * 下面这行代码可以分段看
 * 1.const queryFormRef = ref()：ref创建了名为queryFormRef的引用
 * 2.ref(ElForm)：把ElForm作为参数传递，这样queryFormRef就能访问和修改ElForm的实例。
 */
 const queryFormRef = ref(ElForm);
                                 /*对象初始化-->在reactive中初始化*/

/*
    下面这段代码分两部分
    1.const state = reactive(）：这是通过composition api的reactive函数创建了一个响应对象。
    这个对象包含了我定义的响应数据。
    一旦我对这个对象进行改变，所有依赖这个数据的组件都会被重新渲染。
    reactive内部的数据不会暴露出去，要通过state来调用。
    2.= toRefs(state)：toRefs将state解构成一组属性，其它组件调用这些属性，Vue才会知道这是响应式的，
    并且在属性状态发生改变的同时自动跟新。
 */ 
 const state=reactive({
    queryParams:{
        queryId: 'GetMaterialDetailList',
        version: 'WEB00002',
        params:{
            MATERIALSPECNAME:'',
            SUPPLIERNAME:'',
            SITENAME:localStorage.getItem('siteName')||''
       },
       pageNum: 1,
       pageSize: 10
    },
    queryParams2: {
      queryId: 'GetSupplierList',
      version: 'WEB00010',
      params: {
        SITENAME:localStorage.getItem('siteName')||''
      },
       pageNum: 1,
       pageSize: 10
    },
    POName:[] as any,
    column: [] as any,
    MaterialList:[] as any,
    loading:false,
    total: 0,
 })


                                  /*对象定义->加入state*/
 const{
    queryParams,
    POName,
    column,
    loading,
    MaterialList,
    total,
 } =toRefs(state);   
                 
    /*
      钩子函数书写区域
    */ 
    onMounted(() => {
    state.column = [
      { header: 'PO号',field:'RECEIVEREQUESTNAME',hide: false },
      { header: '订单行项',field:'RECEIVEREQUESTDETAILNAME',hide: false },
      { header: '项目类型',field:'RECEIVEREQUESTDETAILTYPE',hide: false },
      { header: '请求数量',field:'REQUESTQUANTITY ',hide: false },
      { header: '累计接受数量',field:'RECEIVEDQUANTITY',hide: false },
      { header: '剩余接受数量',field:'RECEIVEDQUANTITY2',hide: false },
      { header: 'ERP工厂',field:'ERPFACTORY ',hide: false },
      { header: 'ERP库位',field:'ERPLOCATION',hide: false },
      { header: '生成操作员',field:'CREATEUSER',hide: false },
      { header: '供应商名称',field:'SUPPLIERNAME',hide: false },
    ]
    //handleQuery();
    //getRSA();
    SelectionQuery();
  });
    /*
      其它函数区域
    */
                                   /*这个页面最重要的函数之一，查询函数*/
function handleQuery()
{
    getQueryPageList(state.queryParams)
      .then((res:any)=>{state.MaterialList = res.data.list;
        state.total = res.data.total;
      })
      .catch(() => {});
}
 // 更新列
 function updateList(col: any) {
    state.column = col;
  }
  //供应商名称查询
  function SelectionQuery()
  {
    getQueryList(state.queryParams2)
    .then((res:any)=>{
       state.POName=res.data;
       state.POName.unshift({
             SUPPLIERNAME:''
          });
    })
  }
</script>
<!--style     书写区域-->
<style>

</style>