<!--BOX历史信息查询-->
<!--页面渲染区域-->
<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="6">
                        <el-form-item label="标签编号" prop="params.MATERIALPACKINGNAME">
                            <el-Input v-model="queryParams.params.MATERIALPACKINGNAME" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="批次" prop="params.CHARGE">
                            <el-Input v-model="queryParams.params.CHARGE" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleQueryInfo">搜索</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.BoxHistoryList" highlight-current-row row-key="id"
                style="width: 100%" :height="tableHeight">
                <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: 'materialBoxHistoryQuery'
};
</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 { bTableHeight } from "../../../../composables/calcTableHeight";

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(130);
const queryFormRef = ref(ElForm);
const state = reactive({
    queryParams: {
        queryId: "GetMaterialBoxHistoryList",
        version: "WEB00002",
        params: {
            SITENAME: localStorage.getItem("siteName") || 'SDK',
            MATERIALPACKINGNAME: "",
            CHARGE : ''
        },
        pageNum: 1,
        pageSize: 10
    },
    Column: [] as any,
    total: 0,
    loading: false,
    BoxHistoryList: [] as any
});
const {
    queryParams,
    Column,
    total,
    loading,
    BoxHistoryList
} = toRefs(state);
/*钩子函数区域*/
onMounted(() => {
    state.Column = [
        // { header: "工厂", field: "SITENAME", hide: true },
        { header: "标签编号", field: "MATERIALPACKINGNAME", hide: false },
        { header: "批号", field: "CHARGE", hide: false },
        { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
        { header: "物料名", field: "DESC_CN", hide: false },
        // { header: "抬头文本", field: "RECEIVEACTNO", hide: false },
        { header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
        { header: "组织", field: "ERPFACTORY", hide: false },
        { header: "仓库", field: "ERPLOCATION", hide: false },
        { header: "位置", field: "LOCATIONNAME", hide: false },
        // { header: "质检批", field: "MATERIALPROCESSGROUPNAME", hide: false },
        { header: "品质结果", field: "OQARESULT", hide: false },
        { header: "操作事件", field: "EVENTNAME", hide: false },
        { header: "事件名称", field: "CHINESE", hide: false },
        { header: "作业用户", field: "EVENTUSER", hide: false },
        { header: "作业时间", field: "EVENTTIME", hide: false },
        // { header: "供应商名称", field: "SUPPLIERNAME", hide: false },
        { header: "到货单", field: "RECEIVEREQUESTNAME", hide: false },
        { header: "发货单号", field: "SHIPREQUESTNAME", hide: false },
        { header: "操作备注", field: "OPTREMARK", hide: false },
    ];
    updateTableHeight();
    window.addEventListener('resize', handleResize);
});
function handleQueryInfo() {
  state.queryParams.pageNum = 1
  handleQuery()
}
/*其它函数区域*/
function handleQuery() {
    state.BoxHistoryList = []
    getQueryPageList(state.queryParams)
        .then((res: any) => {
          if(res.data.list.length == 0 ){

            ElMessageBox.alert('查无数据', '提醒框', {
              confirmButtonText: 'OK',
            })
          } else {

            state.BoxHistoryList = res.data.list;
            state.total = res.data.total;
          }
        })
        .catch(() => { });
}

</script>
<!--style 区域-->
<style></style>