<!--Box信息查询-->
<!--页面渲染部分-->
<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.MATERIALPACKINGNAME">
                            <el-Input v-model="queryParams.params.MATERIALPACKINGNAME" placeholder="BOX编号" clearable
                                @keyUpEvent="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="" prop="params.SUPERMATERIALPACKINGNAME">
                            <el-Input v-model="queryParams.params.SUPERMATERIALPACKINGNAME" placeholder="PalletID"
                                clearable @keyUpEvent="handleQuery" />
                        </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: 'materialBoxQuery'
};
</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';
import { stringifyQuery } from 'vue-router';
/*对象区域  */
const queryFormRef = ref(ElForm);
//对象初始化-->在reactive中初始化
const state = reactive({
    queryParams: {
        queryId: '',
        version: '',
        params: {
            MATERIALPACKINGNAME: '',
            SUPERMATERIALPACKINGNAME: '',
            SITENAME: localStorage.getItem('siteName') || 'SDK'
        },
        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: 'ERP工厂', field: 'ERPFACTORY', hide: false },
        { header: 'ERP库位', field: 'ERPLOCATION', hide: false },
        { header: '物料编号', field: 'MATERIALSPECNAME', hide: false },
        { header: '上层BOXID', field: 'SUPERMATERIALPACKINGNAME ', hide: false },
        { header: 'BOXID', field: 'MATERIALPACKINGNAME', hide: false },
        { header: '物料总数量', field: 'MATERIALQUANTITY', hide: false },
        { header: '物料数量', field: 'SUBPACKINGQUANTITY ', hide: false },
        { header: 'Stock状态', field: 'STOCKSTATE', hide: false },
        { header: '物料凭证号', field: 'UNDOID', hide: false },
        { header: '抬头文本', field: 'RECEIVEACTNO', hide: false },
        { header: '批次', field: 'CHARGE', hide: false },
        { header: '质检批', field: 'MATERIALPROCESSGROUPNAME', hide: false },
        { header: 'OQA结果', field: 'OQARESULT', hide: false },
        { header: '供应商名称', field: 'SUPPLIERNAME ', hide: false },
        { header: 'PO号', field: 'RECEIVEREQUESTNAME', hide: false },
        { header: '发货单号', field: 'SHIPREQUESTNAME', hide: false },
        { header: '入库日期', field: 'RECEIVETIME ', hide: false },
        { header: '品质状态', field: 'PACKINGGRADE', hide: false },
        { header: 'BOX类型', field: 'MATERIALPACKINGTYPE', hide: false },
        { header: '物料类型', field: 'MATERIALTYPE', hide: false },
    ]
    //handleQuery();
    //getRSA(); 
});
/*其它函数区域*/
function handleQuery() {
    if (isEmptyStr(state.queryParams.params.MATERIALPACKINGNAME) == true && isEmptyStr(state.queryParams.params.SUPERMATERIALPACKINGNAME) == false) {
        state.queryParams.queryId = 'GetMaterialPalletInfromationRow';
        state.queryParams.version = 'WEB00001';
    } else if (isEmptyStr(state.queryParams.params.MATERIALPACKINGNAME) == false && isEmptyStr(state.queryParams.params.SUPERMATERIALPACKINGNAME) == true) {
        state.queryParams.queryId = 'GetMaterialBoxInformationRow';
        state.queryParams.version = 'WEB00001';
    } else if (isEmptyStr(state.queryParams.params.MATERIALPACKINGNAME) == true && isEmptyStr(state.queryParams.params.SUPERMATERIALPACKINGNAME) == true) {
        state.queryParams.queryId = 'GetMaterialInfromationRow';
        state.queryParams.version = 'WEB00001';
    } else {
        state.queryParams.queryId = 'GetMaterialPalletAndBoxidInfromationRow';
        state.queryParams.version = 'WEB00001';
    }
    getQueryPageList(state.queryParams)
        .then((res: any) => {
          if(res.data.list.length == 0){

            ElMessageBox.alert('查无数据', '提醒框', {
              confirmButtonText: 'OK',
            })
          } else {
            state.MaterialList = res.data.list;
            state.total = res.data.total;

          }
        })
        .catch(() => { });
}
// 更新列
function updateList(col: any) {
    state.column = col;
}
//判断是否想等
const isEmptyStr = (s: any) => {
    if (s == undefined || s == null || s === '') {
        return true
    }
    return false
}
</script>
<!--style 部分-->
<style></style>