<!-- 入库指令单列表 -->
<template>
    <div class="table-box">
        <div v-show="false">
            <div id="barcode-box">
                <svg id="barcode"></svg>
            </div>
        </div>
        <div v-show="false" id="qrcode-box">
            <div id="qrcode-box">
                <svg id="qrcode"></svg>
            </div>
        </div>

        <!-- 按钮 -->
        <ListBtns :selectionList="selectionList" @handleParentCallback="handleParentCallback" :ruleForm="datas.exportList" />
        <Search :formData="datas.formData" :ruleForm="datas.ruleForm" @handleSearch="handleSearch" @handleReset="handleReset" />
        <!-- 表格 -->

        <ProTable
            ref="proTable"
            :columns="datas.columns"
            :request-api="getBoxMarkListApi"
            :init-param="datas.initParam"
            :ruleForm="datas.ruleForm"
            @selectionChange="selectionChange"
        >
        </ProTable>
    </div>
</template>

<script setup lang="ts" name="boxMark">
import ListBtns from "@/components/ListBtns/index.vue";
import Search from "@/components/Search/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { cloneDeep } from "lodash-es";
import { RULEFORM, FORMDATA, COLUMNS } from "./constant/list/index";
import { getBoxMarkListApi } from "@/api/modules/boxMark";
import { initSearch } from "./init/index";
import { boxMarkListPrint } from "@/utils/print/boxMark/boxMarkListPrint.js";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<any>(null);
// 数据源
const datas = reactive({
    exportList: cloneDeep(RULEFORM),
    columns: COLUMNS, //列表配置项
    initParam: cloneDeep(RULEFORM), // 初始化搜索条件|重置搜索条件
    ruleForm: cloneDeep(RULEFORM), // 搜索条件
    formData: FORMDATA, //搜索配置项
    printData: [],
    printNumber: 2
});
//选中表格的行
let selectionList = ref([]);
//初始化搜索条件
initSearch(datas);

/**
 * @description 获取按钮操作结果
 * @param type {string} 按钮类型
 * @param result {Object} 操作结果
 */
const handleParentCallback = (result?: any) => {
    const { type, data } = result;
    if (type === "Switch") {
        datas.printNumber = data;
        return;
    }
    if (type === "Print") {
        datas.printData = [];
        datas.printData = selectionList.value;
        nextTick(() => {
            setTimeout(() => {
                boxMarkListPrint(datas.printData, datas.printNumber);
            }, 200);
        });
        return;
    }
    datas.ruleForm = cloneDeep(RULEFORM);
    proTable!.value.getTableList(datas.initParam);
};
const handleSearch = () => {
    proTable!.value.initPage(datas.ruleForm);
    datas.exportList = datas.ruleForm;
    datas.exportList.pageNo = proTable!.value.pageable.pageNo;
    datas.exportList.pageSize = proTable!.value.pageable.pageSize;
};
const handleReset = () => {
    datas.ruleForm = cloneDeep(RULEFORM);
    datas.exportList = cloneDeep(RULEFORM);
    proTable!.value.initPage(datas.initParam);
};
const selectionChange = (selection: any) => {
    selectionList.value = selection;
};
</script>

<style scoped>
.to-detail1 {
    color: red;
    cursor: pointer;
}
</style>
<style scope lang="scss">
.container {
    //   width: 200px; 指定容器的宽度
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
    white-space: nowrap; /* 不换行 */
}
</style>
