for_client/src/views/tentative/laboratory/print.vue

<template>
    <div class="hc-page-layout-box">
        <div :style="'width:' + leftWidth + 'px;'" class="hc-layout-left-box">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{ projectInfo['projectAlias'] }}</span>
                    <div class="text-xs text-cut project-name">{{ projectInfo['name'] }}</div>
                </div>
            </div>
            <div class="hc-tree-box">
                <el-scrollbar>
                    <!-- <WbsTree :autoExpandKeys="treeAutoExpandKeys" :projectId="projectId" :contractId="contractId" isColor @nodeTap="wbsElTreeClick"/> -->
                    <TestTree
                        :autoExpandKeys="treeAutoExpandKeys"
                        :projectId="projectId"
                        :tenantId="userInfo?.tenant_id"
                        :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial"
                        :wbsType="2"
                        @nodeTap="wbsElTreeClick"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard :scrollbar="false" actionSize="lg">
                <template #header>
                    <HcTooltip keys="tentative_laboratory_print_print">
                        <el-button :loading="printLoading" hc-btn @click="batchPrint()">
                            <HcIcon name="printer"/>
                            <span>打印</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_laboratory_print_print_all">
                        <el-button :loading="allprintLoading" hc-btn @click="batchPrintall()">
                            <HcIcon fill name="printer"/>
                            <span>全部打印</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck
                         @selection-change="tableSelection"/>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import WbsTree from "../../data-fill/components/WbsTree.vue"
import TestTree from "../material/components/TestTree.vue"
import {getStoreValue, setStoreValue} from '~src/utils/storage'
import dataApi from "~api/tentative/laboratory/print"
import {getArrValue, isString} from "js-fast-way"

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse)

//监听
watch(() => [
    useAppState.getCollapse
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('wbsTreeExpandKeys') || [])

//渲染完成
onMounted(() => {

})

//搜索表单
const searchForm = ref({
    contractId: null, type: null, approval: null, betweenTime: null,
    current: 1, size: 20, total: 0
})

//树相关的变量
const primaryKeyId = ref('')
const nodeItemInfo = ref({})
const nodeDataInfo = ref({})
const clicID = ref('')
//树被点击
const wbsElTreeClick = ({node, data, keys}) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    primaryKeyId.value = data['primaryKeyId'] || ''
    clicID.value = data['id'] || ''
    console.log(data, 'dtat');
    //缓存自动展开
    treeAutoExpandKeys.value = keys
    setStoreValue('wbsTreeExpandKeys', keys)
    //改变搜索表单数据
    searchForm.value.wbsId = projectInfo?.value.referenceWbsTemplateIdTrial
    //searchForm.value.contractIdRelation = data['contractIdRelation'] projectInfo?.referenceWbsTemplateIdTrial
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key: 'tableName', name: '表名'}
])

//获取数据
const tableLoading = ref(false)
const tableData = ref([])
const getTableData = async () => {
    tableLoading.value = true
    const {error, code, data} = await dataApi.queryPage({
        projectId: projectId.value,
        parentId: clicID.value,
        // contractId: contractId.value,
        ...searchForm.value,
    })
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
        searchForm.value.total = data.total || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows.filter((item) => {
        return (item ?? '') !== '';
    })
}


//拼接ID
const rowsToId = (rows) => {
    return rows.map((obj) => {
        return obj.pkeyId;
    }).join(",")
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
//打印
const printLoading = ref(false)
const allprintLoading = ref(false)
const batchPrint = async () => {
    const rows = tableCheckedKeys.value;
    const ids = rowsToId(rows)
    //批量下载
    printLoading.value = true
    const {error, code, data} = await dataApi.batchPrint({pKeyIds: ids})
    //处理数据
    printLoading.value = false
    const res = isString(data) ? data ?? '' : ''
    if (!error && code === 200 && res) {
        window.open(res, '_blank')
    }
}
const batchPrintall = async () => {
    const rows = tableData.value;
    const ids = rowsToId(rows)
    //批量下载
    allprintLoading.value = true
    const {error, code, data} = await dataApi.batchPrint({pKeyIds: ids})
    //处理数据
    allprintLoading.value = false
    const res = isString(data) ? data ?? '' : ''
    if (!error && code === 200 && res) {
        window.open(res, '_blank')
    }
}
</script>

<style lang="scss" scoped>

</style>