1111

src/views/tentative/detect/collapse-form/src/index.vue

@@ -0,0 +1,871 @@
+<template>
+    <div class="data-fill-list-box">
+        <el-collapse v-model="ActiveKey" accordion @change="CollapseChange">
+            <el-collapse-item v-for="(item, index) in listDatas" :id="`item-${index}-${item?.pKeyId}`" :key="item?.pKeyId" :disabled="item.isBussShow === 2" :name="`item-${index}-${item?.pKeyId}`">
+                <template #title>
+                    <div class="hc-collapse-item-header">
+                        <div class="text-lg truncate item-title">{{ item.nodeName }}</div>
+                        <div class="hc-extra-text-box">
+                            <HcTooltip v-if="item.isCopyTab === 1" keys="wbs_del_table">
+                                <el-button :disabled="item.isBussShow === 2" :loading="tableFormDelLoading" plain type="danger" @click.stop="delClick(item, index)">删除本表</el-button>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_copy_table">
+                                <el-button :disabled="item.isBussShow === 2" :loading="copyClickLoading" plain type="primary" @click.stop="copyClick(item, index)">复制本表</el-button>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_hide_table">
+                                <el-button plain type="primary" @click.stop="hideClick(item, index)">
+                                    <template v-if="item.isBussShow === 1">隐藏本表</template>
+                                    <template v-else>显示本表</template>
+                                </el-button>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_preview_table">
+                                <el-button v-if="item.isBussShow === 2 || item.isTabPdf === 1" disabled plain type="info">预览</el-button>
+                                <el-button v-else plain type="primary" @click.stop="previewClick(item, index)">预览</el-button>
+                            </HcTooltip>
+                            <HcTooltip keys="wbs_upload_table">
+                                <el-button :disabled="item.isBussShow === 2" :type="item.tabFileType === 2 ? 'success' : 'primary'" plain @click.stop="uploadClick(item, index)">
+                                    <template v-if="item.tabFileType === 2">已上传</template>
+                                    <template v-else>上传</template>
+                                </el-button>
+                            </HcTooltip>
+                        </div>
+                    </div>
+                </template>
+                <div style="height: calc(100vh - 360px);" class="data-fill-list-item-content">
+                    <div v-if="item?.isWindow" class="data-fill-table-form-box is-window">
+                        <div class="hc-window-tip">
+                            <div class="table-form-no">
+                                <img :src="NoDataSvg" alt="">
+                                <div class="desc">当前表单处于窗口模式，关闭相关窗口后恢复</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="data-fill-table-form-box">
+                        <TableFormItem
+                            v-if="item.isTableRender"
+                            :ref="(el) => setItemRefs(el, item)"
+                            :classify="classifys"
+                            :datas="changeFormDatas(item?.pKeyId, 'collapse')"
+                            :kid="item?.pKeyId"
+                            :node-name="item.nodeName"
+                            :pid="`table-form-${item?.pKeyId}`"
+                            :tid="treeId"
+                            @excelBodyTap="excelTableFormClick($event)"
+                            @render="tableFormRender($event, item, index)"
+                            @rightTap="tableFormRightTap($event, index)"
+                        />
+                    </div>
+                    <div class="hc-window-switch-box">
+                        <el-tooltip :content="item.isWindow ? '关闭窗口并恢复' : '当前表单窗口化'" :hide-after="0" placement="top">
+                            <div class="icon-btn-view" @click.stop="windowClick(item, index)">
+                                <template v-if="item.isWindow">
+                                    <HcIcon class="icon" name="picture-in-picture-2" />
+                                    <span class="ml-1">关闭窗口化</span>
+                                </template>
+                                <template v-else>
+                                    <HcIcon class="icon" name="picture-in-picture-exit" />
+                                    <span class="ml-1">表单窗口化</span>
+                                </template>
+                            </div>
+                        </el-tooltip>
+                    </div>
+                    <div class="data-fill-table-tip-box">
+                        <el-scrollbar>
+                            <div class="text-orange tip-title">
+                                <HcIcon fill name="information" ui="text-2xl" />
+                                <span class="ml-1">提示</span>
+                            </div>
+                            <div class="text-gray-400 tip-item">1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据</div>
+                            <div class="text-gray-400 tip-item">
+                                2、先点击一下表单任一区域，再键盘按住 ⌘/ctrl +
+                                点击，选择输入框，变为绿色边框，选中成功。选择完毕后，键盘按 ⌘/ctrl + c 复制所选中的数据，
+                                再其它表内，或同一张表内，再次按住 ⌘/ctrl + 点击，选择输入框。键盘按 ⌘/ctrl + v
+                                依次粘贴所选的数据。（目前仅支持输入框和文本框的操作）
+                            </div>
+                            <div class="text-orange-500 tip-item">3、完善资料填写后记得一定要保存哦</div>
+                        </el-scrollbar>
+                        <div class="table-tip-foot">
+                            <div class="tip-left-btn">
+                                <HcTooltip keys="wbs_import_table">
+                                    <div class="text-main dow-text">
+                                        <HcIcon name="publish" ui="text-lg" />
+                                        <span class="ml-1">导入表格数据</span>
+                                    </div>
+                                </HcTooltip>
+                                <HcTooltip keys="wbs_download_table">
+                                    <div class="text-main dow-text">
+                                        <HcIcon name="file_download" ui="text-lg" />
+                                        <span class="ml-1">下载导入模板</span>
+                                    </div>
+                                </HcTooltip>
+                            </div>
+                            <div class="tip-right-btn">
+                                <HcTooltip keys="wbs_save_table">
+                                    <el-button
+                                        :disabled="!item?.isTableForm"
+                                        :loading="tableFormSaveLoading" hc-btn
+                                        type="primary"
+                                        @click="tableFormSaveClick(item, index)"
+                                    >
+                                        <HcIcon name="save" />
+                                        <span>保存</span>
+                                    </el-button>
+                                </HcTooltip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+
+    <!-- 右键菜单 -->
+    <HcContextMenu ref="contextMenuRef" :datas="tableFormMenu" @item-click="handleMenuSelect" />
+
+    <!-- 查看表单 -->
+    <template v-for="(item, index) in DragModalTableForm" :key="index">
+        <HcDragModal
+            :close-icon-arr="closeIconArr" :eid="item.pKeyId" :height="DragModalHeight" :is-show="item.isShow"
+            :loading="item.loading" :loading-text="item.loadingText" :title="item.title"
+            is-sort-top
+            @close="TableFormClose(item, index)" @closeIconTap="closeIconTap($event, item, index)"
+        >
+            <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap($event, item)">
+                <TableFormItem
+                    :ref="(el) => setItemRefs(el, item)"
+                    :classify="item.classify"
+                    :datas="changeFormDatas(item?.pKeyId, 'window')"
+                    :height="item.height"
+                    :kid="item.pKeyId"
+                    :node-name="item.title"
+                    :pid="`table-form-${item?.pKeyId}`"
+                    :scroll="false"
+                    :tid="item.treeId"
+                    :width="item.width"
+                    @excelBodyTap="excelTableFormClick($event)"
+                    @render="tableFormRender($event, item.item, item.index)"
+                    @rightTap="tableFormRightTap($event, item.index)"
+                />
+            </HcDragNode>
+        </HcDragModal>
+    </template>
+</template>
+
+<script setup>
+import { nextTick, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from '~src/store'
+import HTableForm from '~src/plugins/HTableForm'
+import wbsApi from '~api/data-fill/wbs'
+import TableFormItem from './table-form.vue'
+import NoDataSvg from '~src/assets/view/no-data.svg'
+import { arrIndex, deepClone, getArrValue, getObjVal, getObjValue, isNullES } from 'js-fast-way'
+import dataApi from '~api/tentative/detect/test'
+
+//参数
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
+    baseData: {
+        type: Object,
+        default: () => ({}),
+    },
+    status: {
+        type: [String, Number],
+        default: '',
+    },
+    deviceUseIds: {
+        type: String,
+        default: () => (''),
+    },
+    authBtnTabKey: {
+        type: String,
+        default: () => (''),
+    },
+    checkTableId: {
+        type: String,
+        default: () => (''),
+    },
+    tabTypeKey: {
+        type: String,
+        default: () => (''),
+    },
+    nodeIdvalue: {
+        type: String,
+        default: () => (''),
+    },
+    alllistData: {
+        type: Array,
+        default: () => ([]),
+    },
+    nodeStatus: {
+        type: String,
+        default: () => (''),
+    },
+})
+
+//事件
+const emit = defineEmits(['renew', 'offsetTop', 'updeviceUseIds', 'upcheckTableId', 'changesdate', 'chageorinData', 'changeIscanclick', 'changesingSaveId'])
+
+//初始变量
+const useAppState = useAppStore()
+const useRoutes = useRoute()
+
+//路由参数
+const routerQuery = useRoutes?.query
+const isaddType = routerQuery?.isaddType || false
+
+//全局变量
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+
+const listDatas = ref(props.datas)
+const isStatus = ref(props.status)
+const baseData = ref(props.baseData)
+const authBtnTabKeyType = ref(props.authBtnTabKey)//所属方
+const tabTypeKeyInfo = ref(props.tabTypeKey)
+const nodeIdvaluedata = ref(props.nodeIdvalue)
+const alllistDataval = ref(props.alllistData)
+const NodeStatusval = ref(props.nodeStatus)
+
+//表单变量
+const formDataList = ref([])
+const formKeyIds = ref('')
+const formparentId = ref('')
+
+//处理ref
+const itemRefs = ref([])
+const setItemRefs = (el, { pKeyId }) => {
+    if (el) {
+        let index = arrIndex(itemRefs.value, 'pKeyId', pKeyId)
+        if (index !== -1) {
+            itemRefs.value[index].ref = el
+        } else {
+            itemRefs.value.push({
+                pKeyId: pKeyId,
+                ref: el,
+            })
+        }
+    }
+}
+
+//处理表单的ref
+const setSpliceItemRefs = async ({ pKeyId }) => {
+    const refs = itemRefs.value
+    let index = arrIndex(refs, 'pKeyId', pKeyId)
+    if (index !== -1) {
+        refs.splice(index, 1)
+        itemRefs.value = refs
+    }
+}
+
+const closeIconArr = [{ key: 'reduction', icon: 'picture-in-picture-2', name: '还原到面板内，并自动展开面板' }]
+
+//深度监听数据
+watch(() => [
+    props.datas,
+], ([datas]) => {
+    setFormDataNum(datas)
+}, { deep: true })
+
+//监听变量值
+watch(() => [
+    props.status,
+    props.baseData,
+    props.nodeIdvalue,
+    props.tabTypeKey,
+    props.alllistData,
+    props.nodeStatus,
+], ([val, base, NodeIdvalue, TabTypeKey, AlllistData, NodeStatus]) => {
+    //1 未填报，2待上报，3已上报
+    isStatus.value = val
+    baseData.value = base
+    nodeIdvaluedata.value = NodeIdvalue
+    tabTypeKeyInfo.value = TabTypeKey
+    alllistDataval.value = AlllistData
+    NodeStatusval.value = NodeStatus
+})
+
+//渲染完成
+onMounted(() => {
+    setFormDataNum(props.datas)
+    const { offsetHeight } = document.body
+    DragModalHeight.value = offsetHeight - 200
+    setMountOnEventKey()
+})
+
+//处理变动的数据
+const changeFormData = ref({
+    window: [],
+    collapse: [],
+})
+const changeFormDatas = (pKeyId, type) => {
+    const changeData = changeFormData.value[type]
+    const index = arrIndex(changeData, 'pKeyId', pKeyId)
+    if (index !== -1) {
+        return changeData[index]
+    } else {
+        return {}
+    }
+}
+
+//设置变动的数据
+const setChangeFormDatas = async (pKeyId, type) => {
+    const refs = await getFormRef(pKeyId)
+    const formData = refs?.getFormData()
+    const changeData = changeFormData.value[type]
+    const index = arrIndex(changeData, 'pKeyId', pKeyId)
+    if (index !== -1) {
+        changeData[index] = formData
+    } else {
+        changeData.push(formData)
+    }
+    changeFormData.value[type] = changeData
+}
+
+//展开事件
+const ActiveKey = ref('')
+const CollapseChange = (name) => {
+    ActiveKey.value = name
+    let index = getCollapseItemIndex(name)
+    if (index > -1) {
+        getOffsetTop(name)
+        const item = listDatas.value[index]
+        formKeyIds.value = setToString(item.pKeyId)
+        formparentId.value = setToString(item.parentId)
+        nextTick(() => {
+            if (!item.isTableRender) {
+                item.isTableRender = true
+            }
+        })
+    } else {
+        getOffsetTop()
+        formKeyIds.value = ''
+        formparentId.value = ''
+    }
+}
+
+//初始设置
+const setFormDataNum = (datas) => {
+    itemRefs.value = []
+    ActiveKey.value = ''
+    let newArr = []
+    for (let i = 0; i < datas.length; i++) {
+        newArr.push({ isCollapseLoad: false })
+    }
+    formDataList.value = newArr
+    listDatas.value = deepClone(datas)
+}
+
+//渲染完成
+const tableFormRender = (form, item, index) => {
+    console.log(form)
+    formDataList.value[index] = form
+    formDataList.value[index].isCollapseLoad = form.isRenderForm
+    item.isTableForm = form.isRenderForm
+}
+
+
+//菜单数据
+const contextMenuRef = ref(null)
+const tableFormMenu = ref([
+    { label: '容器参数', key: 'vessel' },
+    { label: '引用设备仪器', key: 'device' },
+    { label: '插入特殊字符', key: 'special' },
+])
+
+//鼠标右键事件
+const tableFormItemNode = ref({}) //临时信息
+const tableFormRightTap = ({ event, KeyName, startPos, endPos, pKeyId }, index) => {
+    //存储临时信息
+    tableFormItemNode.value = { KeyName, index, startPos, endPos, pKeyId }
+    contextMenuRef.value?.showMenu(event, false) //展开菜单
+}
+
+//鼠标右键菜单被点击
+const handleMenuSelect = async ({ key }) => {
+    console.log(key)
+}
+
+
+//窗口化
+const DragModalTableForm = ref([])
+const DragModalHeight = ref(600)
+const windowClick = async (item, indexs) => {
+    const list = deepClone(DragModalTableForm.value)
+    let index = arrIndex(list, 'pKeyId', item.pKeyId)
+    if (!item.isWindow) {
+        const formSize = getTableFormSize(item?.pKeyId)
+        const newTableForm = {
+            ...setInitDragModalTableForm(item, indexs),
+            ...formSize,
+        }
+        await setChangeFormDatas(item?.pKeyId, 'window')
+        item.isWindow = true
+        //处理表单的ref
+        await setSpliceItemRefs(item)
+        //弹窗表单的排序
+        if (index === -1) {
+            list.push(newTableForm)
+        } else if (index !== list.length - 1) {
+            //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
+            list.splice(index, 1)
+            list.push(newTableForm)
+        }
+        DragModalTableForm.value = list
+        ActiveKey.value = ''
+    } else {
+        await setChangeFormDatas(item?.pKeyId, 'collapse')
+        //处理表单的ref
+        await setSpliceItemRefs(item)
+        if (index !== -1) {
+            list.splice(index, 1)
+            DragModalTableForm.value = list
+        }
+        item.isWindow = false
+    }
+}
+
+//初始拖动表单的内容
+const setInitDragModalTableForm = (item, index) => {
+    return {
+        projectId: projectId.value,
+        contractId: contract_id.value,
+        wbsTempId: wbsTemp_id.value,
+        tenantId: tenant_id.value,
+        wbsType: wbs_type.value,
+        classify: classifys.value,
+        treeId: treeId.value,
+        pKeyId: item.pKeyId,
+        height: '100%',
+        width: '100%',
+        title: item.nodeName,
+        isShow: true,
+        index: index,
+        item: item,
+    }
+}
+
+//关闭窗口
+const TableFormClose = async ({ pKeyId, index }, indexs) => {
+    const list = deepClone(DragModalTableForm.value)
+    //取表单的数据
+    await setChangeFormDatas(pKeyId, 'collapse')
+    //关闭窗口
+    list.splice(indexs, 1)
+    DragModalTableForm.value = list
+    listDatas.value[index].isWindow = false
+}
+
+const dragNodeMoreMenu = [
+    { key: 'save', icon: 'save-2', name: '保存' },
+    { key: 'preview', icon: 'eye', name: '预览' },
+]
+
+//还原窗口
+const closeIconTap = async (event, item, indexs) => {
+    const { index, pKeyId } = item
+    let KeyId = `item-${index}-${pKeyId}`
+    await TableFormClose(item, indexs)
+    ActiveKey.value = KeyId
+}
+
+//菜单被点击
+const dragNodeMoreMenuTap = ({ key }, items) => {
+    const { item } = items
+    if (key === 'save') {
+        if (item?.isTableForm) {
+            tableFormSaveClick(item, items)
+        } else {
+            window.$message.warning('此表单暂无数据和文件')
+        }
+    } else if (key === 'preview') {
+        if (item['isBussShow'] === 2 || item['isTabPdf'] === 1 || item['pdfUrl'] === '' || item['pdfUrl'] === null) {
+            window.$message.warning('此表单暂无可预览文件')
+        } else {
+            previewClick(item, items)
+        }
+    }
+}
+
+//删除本表
+const tableFormDelLoading = ref(false)
+const delClick = async ({ pKeyId }, index) => {
+    if (pKeyId) {
+        if (isStatus.value !== 3) {
+            tableFormDelLoading.value = true
+            const { error, code } = await wbsApi.removeBussTabInfo({
+                pKeyId: pKeyId,
+                classify: classifys.value,
+            })
+            tableFormDelLoading.value = false
+            if (!error && code === 200) {
+                window?.$message?.success('操作成功')
+                //判断是否存在窗口，如果存在，就删除窗口
+                delWindowRefs(pKeyId)
+                // renewData()
+                listDatas.value.splice(index, 1)
+            }
+        } else {
+            window?.$message?.warning('已上报的资料，不允许删除')
+        }
+    } else {
+        window?.$message?.warning('pKeyId为空')
+    }
+}
+
+//复制表
+const copyClickLoading = ref(false)
+const copyClick = () => {
+
+}
+
+
+//隐藏本表
+const tableFormHideLoading = ref(false)
+const hideClick = async ({ pKeyId, isBussShow }, index) => {
+    if (pKeyId) {
+        if (isStatus.value !== 3) {
+            tableFormHideLoading.value = true
+            const bussShow = isBussShow === 2 ? 1 : 2 //状态(1显示 2隐藏)
+            const { error, code } = await wbsApi.showBussTab({
+                pKeyId: pKeyId,
+                status: bussShow,
+                classify: classifys.value,
+                nodeId: treeId.value,
+            })
+            tableFormHideLoading.value = false
+            if (!error && code === 200) {
+                window?.$message?.success('操作成功')
+                if (isBussShow === 2) {
+                    listDatas.value[index]. isBussShow = 1
+                } else {
+                    listDatas.value[index]. isBussShow = 2
+                }
+                if (bussShow === 2) {
+                    //判断是否存在窗口，如果存在，就删除窗口
+                    delWindowRefs(pKeyId)
+                }
+                // renewData()
+            }
+        } else {
+            window?.$message?.warning('已上报的资料，不允许隐藏')
+        }
+    } else {
+        window?.$message?.warning('pKeyId为空')
+    }
+}
+
+//预览本表
+const tableFormPreviewLoading = ref(false)
+const previewClick = async (item, dragItem = null) => {
+    tableFormPreviewLoading.value = true
+    await getBussPdfInfo(item, dragItem)
+    tableFormPreviewLoading.value = false
+}
+
+//上传变量
+const uploadModal = ref(false)
+const fileListData = ref([])
+const uploadData = ref({})
+
+//上传附件
+const uploadClick = (items, index) => {
+    console.log(111)
+}
+
+//获取文件列表
+const getBussFileList = async (pKeyId) => {
+    const { error, code, data } = await wbsApi.getBussFileList({
+        pKeyId: pKeyId,
+    })
+    if (!error && code === 200) {
+        fileListData.value = getArrValue(data)
+    } else {
+        fileListData.value = []
+    }
+}
+
+
+//单个保存
+const tableFormSaveLoading = ref(false)
+const tableFormSaveClick = async (item, dragItem = null) => {
+    if (isStatus.value !== 3) {
+        tableFormSaveLoading.value = true
+        const isSave = await saveExcelBussData(item, dragItem)
+        if (isSave) {
+            // await getBussPdfInfo(item, dragItem)
+            tableFormSaveLoading.value = false
+            renewData()
+        } else {
+            tableFormSaveLoading.value = false
+        }
+    } else {
+        window?.$message?.warning('已上报的资料，不允许保存。')
+    }
+}
+
+//保存表单数据
+const saveExcelBussData = async ({ pKeyId }, dragItem = null, showTip = true) => {
+    setDragModalLoading(dragItem, '保存中...', true)
+    const refs = await getFormRef(pKeyId)
+    const isRegExp = await refs?.isFormRegExp()
+    if (isRegExp) {
+        const formData = refs?.getFormData()
+        const { error, code } = await wbsApi.saveExcelBussData(formData)
+        setDragModalLoading(dragItem)
+        if (!error && code === 200) {
+            if (showTip) {
+                window?.$message?.success('保存成功')
+            }
+            return true
+        } else {
+            return false
+        }
+    } else {
+        setDragModalLoading(dragItem)
+        return false
+    }
+}
+
+//预览PDF
+const getBussPdfInfo = async ({ pKeyId }, dragItem = null, showTip = true) => {
+    setDragModalLoading(dragItem, '获取pdf中...', true)
+    const { error, code, data } = await wbsApi.getBussPdfInfo({
+        pKeyId: pKeyId,
+    }, false)
+    setDragModalLoading(dragItem)
+    if (!error && code === 200) {
+        if (data) {
+            window.open(data, '_blank')
+        } else if (showTip) {
+            window?.$message?.warning('PDF错误')
+        }
+    } else {
+        if (showTip) {
+            window?.$message?.warning(data.msg || '获取PDF失败')
+        }
+    }
+}
+
+
+//通知数据更新
+const renewData = () => {
+    emit('renew')
+    ActiveKey.value = ''
+}
+
+//设置表单的加载状态
+const setDragModalLoading = (dragItem, text = '保存中...', show = false) => {
+    if (dragItem && show) {
+        dragItem.loading = true
+        dragItem.loadingText = text
+    }
+    if (dragItem && !show) {
+        dragItem.loading = false
+    }
+}
+
+//获取表单的ref
+const getFormRef = async (pKeyId) => {
+    const itemRef = getArrValue(itemRefs.value)
+    if (itemRef.length <= 0) return ''
+    const index = arrIndex(itemRef, 'pKeyId', pKeyId)
+    if (index === -1) return ''
+    const obj = getObjValue(itemRef[index])
+    return obj?.ref
+}
+
+//删除打开的窗口
+const delWindowRefs = (pKeyId) => {
+    //判断是否存在窗口，如果存在，就删除窗口
+    const list = DragModalTableForm.value
+    const index = arrIndex(list, 'pKeyId', pKeyId)
+    if (index !== -1) {
+        list.splice(index, 1)
+        DragModalTableForm.value = list
+    }
+}
+
+//计算展开高度和滚动位置
+const getOffsetTop = (key = '') => {
+    if (key) {
+        const dom = document.getElementById(key)
+        if (dom?.offsetTop >= 583 && key) {
+            emit('offsetTop', dom?.offsetTop - 583)
+        } else {
+            emit('offsetTop', dom?.offsetTop)
+        }
+    } else {
+        emit('offsetTop', 0)
+    }
+    ActiveKey.value = key
+}
+
+//获取折叠面板的索引
+const getCollapseItemIndex = (name) => {
+    const keys = name.split('-')
+    if (keys.length > 0) {
+        return keys[1]
+    } else {
+        return -1
+    }
+}
+
+//获取表单的大小
+const getTableFormSize = (pKeyId) => {
+    let formId = `table-form-${pKeyId}`
+    try {
+        const { clientWidth, clientHeight } = document.getElementById(formId).children[0]
+        return {
+            width: (clientWidth + 40) + 'px',
+            height: (clientHeight + 80) + 'px',
+        }
+    } catch {
+        return {
+            width: '100%',
+            height: '100%',
+        }
+    }
+}
+
+//转字符串
+const setToString = (val) => {
+    return val ? val + '' : ''
+}
+
+//表单被点击
+const presentId = ref('')
+const excelTableFormClick = (key) => {
+    presentId.value = key
+}
+
+//缓存被激活时
+onActivated(() => {
+    setMountOnEventKey()
+})
+
+//缓存时被移除
+onDeactivated(() => {
+    HTableForm.unmountEventKey()
+})
+
+//页面被卸载
+onUnmounted(() => {
+    HTableForm.unmountEventKey()
+})
+
+const setMountOnEventKey = () => {
+    HTableForm.setOnEventKey({
+        //按下ctrl键 或 control 键
+        onCtrlDown: async () => {
+            //window.$HcLog('全局按键', '按下ctrl键 或 control 键')
+            const refs = await setOnFuncFormRef()
+            refs?.setIsCtrlKey(true)
+        },
+        //按下复制快捷键
+        onCtrlDownC: async (event) => {
+            //window.$HcLog('全局按键', '按下复制快捷键')
+            const refs = await setOnFuncFormRef()
+            refs?.setCopyKeyList(event)
+        },
+        //按下粘贴快捷键
+        onCtrlDownV: async (event) => {
+            //window.$HcLog('全局按键', '按下粘贴快捷键')
+            const refs = await setOnFuncFormRef()
+            await refs?.setPasteKeyList(event)
+        },
+        //放开ctrl键 或 control 键
+        onCtrlUp: async () => {
+            //window.$HcLog('全局按键', '放开ctrl键 或 control 键')
+            const refs = await setOnFuncFormRef()
+            refs?.setIsCtrlKey(false)
+        },
+    })
+}
+
+//获取表单的ref
+const setOnFuncFormRef = async () => {
+    const pKeyId = presentId.value
+    if (!isNullES(pKeyId)) {
+        return await getFormRef(pKeyId)
+    } else {
+        return
+    }
+}
+
+
+//获取已渲染的表单
+const getFilterFormData = async () => {
+    const formArr = formDataList.value
+    return formArr.filter((item) => {
+        return (item.pKeyId ?? '') !== '' && item.isCollapseLoad
+    })
+}
+
+//获取表单数据
+const getFormData = async () => {
+    const formArr = await getFilterFormData()
+    //获取表单数据
+    let newArr = []
+    for (let i = 0; i < formArr.length; i++) {
+        const pKeyId = formArr[i].pKeyId
+        const refs = await getFormRef(pKeyId)
+        const form = refs?.getFormData()
+        newArr.push({ ...form })
+    }
+    console.log('表单数据', newArr)
+    return newArr
+}
+
+//获取表单效验数据
+const getFormRegExpJson = async () => {
+    const formArr = await getFilterFormData()
+    const list = listDatas.value
+    //获取表单数据
+    let formRegExpJson = {}
+    for (let i = 0; i < formArr.length; i++) {
+        const pKeyId = formArr[i].pKeyId
+        const refs = await getFormRef(pKeyId)
+        const regExp = refs?.getRegExpJson()
+        const nodeName = refs?.getNodeName()
+        if (getObjVal(regExp)) {
+            const index = arrIndex(list, 'pKeyId', pKeyId)
+            formRegExpJson[pKeyId] = {
+                ...regExp,
+                itemId: `item-${index}-${pKeyId}`,
+                nodeName: nodeName,
+            }
+        }
+    }
+    return formRegExpJson
+}
+
+//获取当前展开项
+const getActiveKey = () => {
+    return ActiveKey.value
+}
+
+//设置当前展开项
+const setActiveKey = (key) => {
+    return ActiveKey.value = key
+}
+
+// 暴露出去
+defineExpose({
+    getFormData,
+    getFormRegExpJson,
+    getActiveKey,
+    setActiveKey,
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../style/index.scss";
+</style>
+
+<style lang="scss">
+@import "../style/style.scss";
+</style>

src/views/tentative/detect/collapse-form/src/table-form.vue

@@ -0,0 +1,261 @@
+<template>
+    <HcTableForm
+        ref="tableFormRef"
+        :form="tableFormInfo"
+        :height="heights"
+        :html="excelHtml"
+        :loading="loading"
+        :pid="activeKey"
+        :pkey="keyId"
+        :scroll="scroll"
+        :width="widths"
+        @excelBodyTap="excelTableFormClick"
+        @render="tableFormRender"
+        @rightTap="tableFormRightTap"
+    />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import dataApi from '~api/tentative/detect/test'
+import { deepClone, getObjVal, isString } from 'js-fast-way'
+
+//初始
+const props = defineProps({
+    tid: { // 树节点
+        type: [String, Number],
+        default: '',
+    },
+    kid: { // pkeyId
+        type: [String, Number],
+        default: '',
+    },
+    classify: { // 类型
+        type: [String, Number],
+        default: '',
+    },
+    scroll: {
+        type: Boolean,
+        default: true,
+    },
+    height: {
+        type: String,
+        default: '100%',
+    },
+    width: {
+        type: String,
+        default: 'auto',
+    },
+    datas: {
+        type: Object,
+        default: () => ({}),
+    },
+    nodeName: { // 表单名称
+        type: String,
+        default: '',
+    },
+    pid: { // 折叠ID
+        type: String,
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
+//初始变量
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const keyId = ref(props.kid ? props.kid + '' : '')
+const treeId = ref(props.tid)
+const classify = ref(props.classify)
+const loading = ref(false)
+const changeData = ref(props.datas)
+const nodeNames = ref(props.nodeName)
+
+const heights = ref(props.height)
+const widths = ref(props.width)
+const activeKey = ref(props.pid)
+
+const tableFormRef = ref(null)
+
+//监听
+watch(() => [
+    useAppState.getProjectId,
+    useAppState.getContractId,
+    props.tid,
+    props.kid,
+    props.classify,
+    props.nodeName,
+    props.height,
+    props.width,
+    props.pid,
+], (
+    [project_id, contract_id, tree_id, key_id, cid, nodeName, height, width, pid],
+) => {
+    projectId.value = project_id
+    contractId.value = contract_id
+    treeId.value = tree_id
+    keyId.value = key_id ? key_id + '' : ''
+    classify.value = cid
+    nodeNames.value = nodeName
+    heights.value = height
+    widths.value = width
+    activeKey.value = pid
+})
+
+//深度监听变动的对象数据
+watch(() => [
+    props.datas,
+], ([data]) => {
+    changeData.value = data
+    setFormChangeData(data)
+}, { deep: true })
+
+
+//渲染完成
+onMounted(async () => {
+    loading.value = true
+    //获取已填写的数据
+    await getTableFormInfo(keyId.value)
+    //渲染表单
+    await getExcelHtml(keyId.value)
+    loading.value = false
+})
+
+//表单被点击
+const excelTableFormClick = (item) => {
+    emit('excelBodyTap', item)
+}
+
+//获取表单初始数据
+const getFormDataInit = () => {
+    return {
+        projectId: projectId.value,
+        contractId: contractId.value,
+        classify: classify.value,
+        pkeyId: keyId.value,
+        nodeId: treeId.value,
+        isRenderForm: false,
+    }
+}
+
+//获取已填写的数据
+const tableFormInfo = ref({})
+const getTableFormInfo = async (pkeyId) => {
+    if (pkeyId) {
+        const { error, code, data } = await dataApi.getBussDataInfo({
+            pkeyId: pkeyId,
+        }, false)
+        const resData = getObjVal(data)
+        if (!error && code === 200 && resData) {
+            tableFormInfo.value = {
+                ...resData,
+                ...getFormDataInit(),
+                ...changeData.value,
+            }
+        } else {
+            tableFormInfo.value = {
+                ...getFormDataInit(),
+                ...changeData.value,
+            }
+        }
+    } else {
+        tableFormInfo.value = {}
+        window?.$message?.warning('pkeyId为空')
+    }
+}
+
+//获取模板标签数据
+const excelHtml = ref('')
+const getExcelHtml = async (pkeyId) => {
+    if (pkeyId) {
+        const { error, code, data } = await dataApi.getExcelHtml({
+            primaryKeyId: pkeyId,
+        }, false)
+        const resData = isString(data) ? data || '' : ''
+        if (!error && code === 200 && resData) {
+            excelHtml.value = resData
+        } else {
+            excelHtml.value = ''
+            tableFormInfo.value.isRenderForm = false
+            window?.$message?.warning('暂无表单')
+        }
+    } else {
+        excelHtml.value = ''
+        tableFormInfo.value.isRenderForm = false
+        window?.$message?.warning('pkeyId为空')
+    }
+}
+
+//渲染完成
+const tableFormRender = (form) => {
+    tableFormInfo.value = form
+    emit('render', form)
+}
+
+//右键点击
+const tableFormRightTap = (item) => {
+    emit('rightTap', item)
+}
+
+//设置数据
+const setFormChangeData = (data) => {
+    const form = deepClone(tableFormInfo.value)
+    tableFormInfo.value = { ...form, ...data }
+    //console.log('设置数据', {...form, ...data})
+}
+
+const getFormData = () => {
+    return tableFormInfo.value
+    //return tableFormRef.value?.getFormData()
+}
+
+const setFormData = (data) => {
+    setFormChangeData(data)
+    tableFormRef.value?.setFormData(tableFormInfo.value)
+}
+
+const getRegExpJson = () => {
+    return tableFormRef.value?.getRegExpJson()
+}
+
+const isFormRegExp = async () => {
+    return await tableFormRef.value?.isFormRegExp()
+}
+
+//获取表单名称
+const getNodeName = () => {
+    return nodeNames.value
+}
+
+//按下ctrl键
+const setIsCtrlKey = (data) => {
+    tableFormRef.value?.setIsCtrlKey(data)
+}
+
+//按下复制快捷键
+const setCopyKeyList = (event) => {
+    tableFormRef.value?.setCopyKeyList(event)
+}
+
+//按下粘贴快捷键
+const setPasteKeyList = async (event) => {
+    await tableFormRef.value?.setPasteKeyList(event)
+}
+
+// 暴露出去
+defineExpose({
+    getFormData,
+    setFormData,
+    getRegExpJson,
+    isFormRegExp,
+    getNodeName,
+    setIsCtrlKey,
+    setCopyKeyList,
+    setPasteKeyList,
+    getExcelHtml,
+    getTableFormInfo,
+})
+</script>

src/views/tentative/detect/collapse-form/style/index.scss

@@ -0,0 +1,122 @@
+table {
+    width: 100%;
+}
+.data-fill-list-box {
+    position: relative;
+    .hc-collapse-item-header {
+        flex: 1;
+        position: relative;
+        margin-left: 46px;
+        display: flex;
+        align-items: center;
+        .item-title {
+            flex: 1;
+            position: relative;
+            user-select: none;
+            color: #50545E;
+            font-size: 16px;
+            font-weight: 400;
+            cursor: pointer;
+        }
+        .hc-extra-text-box {
+            position: relative;
+            padding-right: 24px;
+        }
+    }
+    .data-fill-list-item-content {
+        position: relative;
+        display: flex;
+        height: calc(100vh - 386px);
+        .data-fill-table-form-box {
+            flex: 1;
+            position: relative;
+            height: 100%;
+            overflow: hidden;
+            border: 8px solid #c4c4c4;
+            &.is-window {
+                border: 0;
+                .hc-window-tip {
+                    position: relative;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .table-form-no {
+                        position: relative;
+                        img {
+                            width: 380px;
+                        }
+                        .desc {
+                            text-align: center;
+                            font-size: 20px;
+                            color: #aaa;
+                        }
+                    }
+                }
+            }
+        }
+        .hc-window-switch-box {
+            display: flex;
+            align-items: center;
+            position: absolute;
+            top: 14px;
+            right: 260px;
+            .icon-btn-view {
+                padding: 0 18px;
+                height: 34px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #ffffff;
+                cursor: pointer;
+                user-select: none;
+                border-radius: 80px;
+                box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 #ffffff;
+                background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+                background-size: 200%;
+                transition: background-position .5s;
+                .icon {
+                    font-size: 16px;
+                }
+                &:hover {
+                    background-position: 100% 0;
+                }
+            }
+        }
+        .data-fill-table-tip-box {
+            width: 240px;
+            position: relative;
+            border-left: 1px solid #E9E9E9;
+            padding: 20px 15px 80px;
+            .tip-title {
+                font-size: 16px;
+                margin-bottom: 10px;
+                display: flex;
+                align-items: center;
+            }
+            .tip-item {
+                margin-bottom: 20px;
+            }
+            .table-tip-foot {
+                position: absolute;
+                bottom: 15px;
+                right: 0;
+                left: 0;
+                display: flex;
+                align-items: center;
+                padding: 0 15px;
+                .tip-left-btn {
+                    flex: 1;
+                    .dow-text {
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+}
+.radio-group-box {
+    text-align: center;
+}

src/views/tentative/detect/collapse-form/style/style.scss

@@ -0,0 +1,105 @@
+//插入特殊字符弹窗的输入框
+.data-fill-list-box .data-fill-table-form-box td,
+.data-fill-list-box .data-fill-table-form-box td .el-input .el-input__wrapper .el-input__inner,
+.el-form-item.special-form-item .el-form-item__content .el-input .el-input__wrapper .el-input__inner {
+    font-family: "hc-eudc", hc-sans, 宋体, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.data-fill-list-box {
+    .el-collapse {
+        --el-collapse-header-height: 60px;
+        border: 0;
+        .el-collapse-item {
+            margin: 0 0 16px;
+            background-color: #f1f5f8;
+            border: 1px solid #E9E9E9;
+            border-radius: 4px;
+        }
+        .el-collapse-item__header {
+            background-color: transparent;
+            font-weight: 400;
+            border-bottom: 0;
+            cursor: default;
+            font-size: 14px;
+            .el-collapse-item__arrow {
+                position: absolute;
+                color: #50545E;
+                cursor: pointer;
+                left: 20px;
+                margin: 0;
+            }
+        }
+        .el-collapse-item.is-active .el-collapse-item__header.is-active {
+            background-color: #E7EEF4;
+        }
+        .el-collapse-item__wrap {
+            background-color: transparent;
+            border-bottom: 0;
+            .el-collapse-item__content {
+                position: relative;
+                padding-bottom: 0;
+                font-size: 14px;
+                color: #50545E;
+                line-height: initial;
+            }
+        }
+    }
+}
+.data-fill-list-box .data-fill-table-form-box .hc-table-form-data-item {
+    padding: 0;
+    background-color: initial;
+}
+
+//复制本表弹窗
+.copy-node-many-box {
+    position: relative;
+    height: 53vh;
+    display: flex;
+    // margin-top: 24px;
+    margin-bottom: -30px;
+    border-top: 1px solid #efeff5;
+    .copy-node-many-tree {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 20px 20px 0;
+        border-right: 1px solid #efeff5;
+    }
+    .copy-node-many-table {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 0 20px 20px;
+    }
+}
+
+.copy-node-many-table {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    padding: 20px 0 20px 20px;
+}
+.dialog-table-box {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    padding: 18px;
+    .dialog-search {
+        position: relative;
+        display: flex;
+    }
+    .dialog-table {
+        position: relative;
+        height: calc(100% - 68px);
+        padding: 18px 0;
+    }
+    .dialog-pages {
+        position: relative;
+    }
+}
+.text-blue {
+    color: blue;
+}
+.text-green {
+    color: green
+}

src/views/tentative/detect/test-form-bak.vue

@@ -0,0 +1,1465 @@
+<template>
+    <div class="hc-page-box">
+        <HcCard action-ui="text-center">
+            <template #header>
+                <el-button :type="authBtnTabKey === '1' ? 'primary' : ''" hc-btn :disabled="router.currentRoute.value.query?.id && router.currentRoute.value.query?.id.length > 0 || nodeIdvalue.length > 0 || newId.length > 0" @click="authBtnTabClick('1')">
+                    <HcIcon name="folder-user" />
+                    <span>施工自检</span>
+                </el-button>
+                <el-button :type="authBtnTabKey === '2' ? 'primary' : ''" hc-btn :disabled="router.currentRoute.value.query?.id && router.currentRoute.value.query?.id.length > 0 || nodeIdvalue.length > 0 || newId.length > 0" @click="authBtnTabClick('2')">
+                    <HcIcon name="folder-shield" />
+                    <span>监理质检</span>
+                </el-button>
+            </template>
+            <template #extra>
+                <el-button :disabled="listItemData.length <= 0" hc-btn type="primary" @click="linksRelateModalClick">
+                    关联工程用途及部位
+                </el-button>
+                <el-button
+                    :disabled="!isMixRatioTestIds" :type="isMixRatioTestIds ? 'primary' : ''" hc-btn
+                    @click="linksRawModalClick"
+                >
+                    关联原材检测报告
+                </el-button>
+                <el-button hc-btn type="primary" @click="linksSampleModalClick">关联取样</el-button>
+            </template>
+            <template #search>
+                <div class="flex-1">
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" :round="false" size="default" @change="tabTypeChange" />
+                </div>
+                <div class="hc-search-top-form">
+                    <div class="w-40">
+                        <el-input v-model="listItemBaseData.trialUserName" clearable placeholder="请输入试验人员" />
+                    </div>
+                    <div v-if="tabTypeKey === '2'" class="w-36 ml-2">
+                        <el-date-picker
+                            v-model="listItemBaseData.reportDate" :clearable="false" class="block"
+                            placeholder="请选择报告日期" type="date" value-format="YYYY-MM-DD"
+                        />
+                    </div>
+                    <div v-if="tabTypeKey === '2'" class="w-28 ml-2">
+                        <el-select v-model="listItemBaseData.detectionResult" block placeholder="是否合格">
+                            <el-option label="合格" value="1" />
+                            <el-option label="不合格" value="0" />
+                        </el-select>
+                    </div>
+                    <div class="w-36 ml-2">
+                        <el-select v-model="listItemBaseData.detectionCategory" block placeholder="选择检测类型">
+                            <el-option v-for="item in categoryData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
+                        </el-select>
+                    </div>
+                </div>
+            </template>
+            <!-- 清表列表 -->
+            <el-scrollbar v-if="listItemData.length > 0" ref="ListItemScrollRef" v-loading="isLoadList">
+                <ListItem
+                    ref="ListItemRef" :node-status="NodeStatus" :alllist-data="alllistData"
+                    :auth-btn-tab-key="authBtnTabKey"
+                    :base-data="listItemBaseData" :datas="listItemData"
+                    :device-use-ids="listDeviceUseIds"
+                    :node-idvalue="nodeIdvalue"
+                    :status="1"
+                    :tab-type-key="tabTypeKey"
+                    @chageorinData="chageorinData"
+                    @changeIscanclick="changeIscanclick"
+                    @changesdate="changeorinsdate"
+                    @changesingSaveId="changesingSaveId"
+                    @offsetTop="ListItemOffsetTop"
+                    @renew="getTableDataAll"
+                    @upcheckTableId="upcheckTableId"
+                    @updeviceUseIds="updeviceUseIds"
+                />
+            </el-scrollbar>
+            <HcStatus v-else v-loading="isLoadList" text="暂无表单" />
+            <template #action>
+                <div class="hc-table-form-action-tip">
+                    <el-alert
+                        :closable="false"
+                        class="hc-alert"
+                        show-icon
+                        style=""
+                        title="完善资料填写后记得一定要保存哦"
+                        type="warning"
+                    />
+                </div>
+                <el-button
+                    :disabled="NodeStatus === '3' || listItemData.length <= 0" :loading="tableFormSaveLoading"
+                    hc-btn
+                    type="primary" @click="tableFormSaveClick"
+                >
+                    <HcIcon name="save" />
+                    <span>保存</span>
+                </el-button>
+                <el-button
+                    :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading" hc-btn
+                    @click="reportModalClick"
+                >
+                    <HcIcon name="send-plane-2" />
+                    <span>上报</span>
+                </el-button>
+                <!-- <el-button hc-btn :loading="reportLoading" @click="reportModalClick"  >
+                   <HcIcon name="send-plane-2"/>
+                   <span>上报</span>
+               </el-button> -->
+                <el-button
+                    :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" hc-btn
+                    @click="bussPdfsClick(router.currentRoute.value.query.id || nodeIdvalue)"
+                >
+                    <HcIcon name="eye" />
+                    <span>预览</span>
+                </el-button>
+                <el-button v-if="NodeStatus === '3'" hc-btn @click="abolishOneClick">
+                    <HcIcon name="arrow-go-back" />
+                    <span>撤回上报流程</span>
+                </el-button>
+                <el-button hc-btn @click="toBackClick">
+                    <HcIcon name="delete-back" />
+                    <span>返回</span>
+                </el-button>
+            </template>
+        </HcCard>
+
+        <!-- 关联工程用途及部位 -->
+        <HcDialog
+            :show="linksRelateModal" is-table save-text="确认关联" title="关联工程用途及部位" widths="50rem"
+            @close="linksRelateModalClose" @save="linksRelateModalSave"
+        >
+            <div class="hc-links-relate-tree-box">
+                <div class="hc-search-tree-val">
+                    <el-input
+                        v-model="linksRelateSearchTreeVal" block clearable placeholder="请输入名称关键词检索"
+                        size="large" @keyup="searchTreeKeyUp"
+                    >
+                        <template #suffix>
+                            <HcIcon name="search-2" ui="text-xl" @click="searchTreeClick" />
+                        </template>
+                    </el-input>
+                </div>
+                <div v-loading="linksRelateTreeLoading" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
+                    <el-scrollbar>
+                        <!-- <DivisionTree :datas="unmatchedTreeData" @nodeTap="divisionTreeClick" @nodeCheck="divisionTreeCheck" :defaultCheckarr="defaultCheckarrIds"/> -->
+
+
+                        <!-- <DivisionTree1
+                            v-show="isSearchTree"
+                            :ElTreeProps="seaElTreeProps"
+                            :datas="searchTreeData"
+                            :defaultCheckarr="defaultCheckarrIds"
+                            :defaultExpandAll="true"
+                            :divisionLoading="searchlinksRelateTreeLoading"
+                            @nodeCheck="divisionTreeCheck"
+                            @nodeTap="divisionTreeClick"/>
+
+
+                        <DivisionTree
+
+                            v-show="!isSearchTree"
+                            ref="divisionTree"
+                            :datas="unmatchedTreeData"
+                            :defaultCheckarr="defaultCheckarrIds"
+                            :divisionLoading="isdivisionLoading"
+                            :linksRelateSearchTreeVal="linksRelateSearchTreeVal"
+                            @nodeCheck="divisionTreeCheck"
+                            @nodeTap="divisionTreeClick"
+                        /> -->
+
+                        <HcLazyTree
+                            ref="ElTreeRef"
+                            :h-props="treeProps"
+                            show-checkbox
+                            :check-strictly="true"
+                            :default-checked-keys="defaultCheckarrIds"
+                            @load="treeLoadNode"
+                            @nodeTap="divisionTreeClick"
+                            @check="divisionTreeCheck"
+                        />
+                    </el-scrollbar>
+                </div>
+            </div>
+        </HcDialog>
+
+        <!-- 关联原材检测报告 -->
+        <HcDialog
+            :show="linksRawModal" is-table save-text="确认关联" title="关联原材检测报告" widths="75rem"
+            @close="linksRawModalClose" @save="linksRawModalSave"
+        >
+            <div class="hc-links-sample-modal-box">
+                <div class="hc-links-sample-tree-box">
+                    <el-scrollbar>
+                        <TestTreeMaterial
+                            :mix-ratio-test-tree-data="MixRatioTestTreeData" :from-type="true"
+                            :node-id="nodeId" :project-id="projectId" :tenant-id="userInfo?.tenant_id"
+                            :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial" :wbs-type="2"
+                            @nodeTap="linksRawTreeClick"
+                        />
+                    </el-scrollbar>
+                </div>
+                <div class="hc-links-sample-table-box">
+                    <HcTable
+                        ref="tableRawRef" :column="linksRawTableColumn" :datas="linksRawTableData"
+                        :is-index="false" :loading="linksRawTableLoading" is-check
+                        @selection-change="linksRawTableSelection"
+                    />
+                </div>
+            </div>
+        </HcDialog>
+
+        <!-- 关联取样 -->
+        <HcDialog
+            :show="linksSampleModal" is-table save-text="确认" title="关联取样信息" widths="75rem"
+            @close="linksSampleModalClose" @save="linksSampleModalSave"
+        >
+            <div class="hc-links-sample-modal-box">
+                <div class="hc-links-sample-tree-box">
+                    <el-scrollbar>
+                        <TestTree
+                            :project-id="projectId" :tenant-id="userInfo?.tenant_id"
+                            :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial" :wbs-type="2"
+                            @nodeTap="linksSampleTreeClick"
+                        />
+                    </el-scrollbar>
+                </div>
+                <div class="hc-links-sample-table-box">
+                    <HcTable
+                        ref="tableSampleRef" :column="linksSampleTableColumn" :datas="linksSampleTableData"
+                        :is-index="false" :loading="linksSampleTableLoading" is-check
+                        @selection-change="linksSampleTableSelection"
+                    />
+                </div>
+            </div>
+        </HcDialog>
+
+        <!-- 批量上报审批 -->
+        <HcReportModal
+            :classify-type="authBtnTabKey"
+            :addition="reportAddition" :contract-id="contractId" :ids="reportIds"
+            :project-id="projectId" :show="showReportModal" :task-name="reportTaskName"
+            :trial-self-inspection-record-id="dataId.length > 0 ? dataId : nodeIdvalue"
+            :type-data="reportTypeData" title="批量上报审批" type="wbs"
+            url="informationWriteQuery/taskOne" @finish="showReportFinish"
+            @hide="showReportModal = false"
+        />
+    </div>
+</template>
+
+<script setup>
+import { nextTick, onDeactivated, onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import { useRoute, useRouter } from 'vue-router'
+import ListItem from './components/ListItem.vue'
+import DivisionTree from './components/DivisionTree.vue'
+import DivisionTree1 from './components/DivisionTree1.vue'
+import dataApi from '~api/tentative/detect/test'
+import samplingApi from '~api/tentative/material/sampling'
+import divisionApi from '~api/data-fill/division'
+import queryApi from '~api/data-fill/query'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import TestTree from '../material/components/TestTree.vue'
+import TestTreeMaterial from '../material/components/TestTreeMaterial.vue'
+import { arrToId, getArrValue, getObjValue, isString } from 'js-fast-way'
+import { getDictionary } from '~api/other'
+import dayjs from 'dayjs'
+import { Loading } from 'element-plus/es/components/loading/src/service'
+import { eVisaTaskCheckApi } from '~api/other'
+import wbsApi from '~api/data-fill/wbs'
+
+//变量
+const router = useRouter()
+const useRoutes = useRoute()
+const useAppState = useAppStore()
+const userInfo = ref(useAppState.getUserInfo)
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const projectInfo = ref(useAppState.getProjectInfo)
+const contractInfo = ref(useAppState.getContractInfo)
+const divisionTree = ref(null)
+//获取模板标签数据
+const isTableForm = ref(false)
+//路由参数
+const routerQuery = useRoutes?.query
+//存储目录格式 1按部位存储，2按日期存储
+const dataId = routerQuery?.id || ''
+const nodeId = routerQuery?.nodeId || ''
+const dataType = routerQuery?.dataType || '1'
+let isaddType = routerQuery?.isaddType || false
+const afterAdd = ref(false)
+const dayDate = dayjs().format('YYYY-MM-DD')
+const testTreeItem = ref(getStoreValue('testTreeItem'))
+const isMixRatioTestIds = ref(false)
+const tabTypeKey = ref('')
+const isopersampleIds = ref(false)
+//渲染完成
+onMounted(() => {
+    tabTypeKey.value = routerQuery?.tabTypeKey || '1'
+    const { title, mixRatioTestIds } = getObjValue(testTreeItem.value)
+    const info = getStoreValue('test-form') || {}
+    isMixRatioTestIds.value = !(!mixRatioTestIds || mixRatioTestIds <= 0)
+    listItemBaseData.value.contractId = contractId.value
+    listItemBaseData.value.trialProjectName = title
+    listItemBaseData.value.reportDate = dayDate
+    // listItemBaseData.value.detectionCategory = Number(dataType)
+    listItemBaseData.value.detectionCategory = info.detectionCategory || 1
+    listItemBaseData.value.trialUserName = info.trialUserName || (userInfo.value['nick_name'])
+
+    listItemBaseData.value.projectPosition = info.projectPosition || ''
+    listItemBaseData.value.rawMaterialIds = info.rawMaterialIds || ''
+    listItemBaseData.value.sampleIds = info.sampleIds || ''
+
+    if (info && info.detectionResult) {
+        listItemBaseData.value.detectionResult = info.detectionResult.toString()
+    }
+    if (info && info.projectPosition) {
+
+        defaultCheckarrIds.value = info.projectPosition.split(',')
+        defaultprojectPositionName.value = info?.projectPositionName
+
+    }
+    getSearchNodeTables()
+    getSearchNodeTablesall(1)
+    getSearchNodeTablesall(2)
+    getCategoryData()
+})
+onDeactivated(() => {
+  // 更新内容
+  setTimeout(() => {
+        window?.location?.reload() //刷新页面
+    }, 1000)
+})
+//身份按钮切换数据
+const authBtnTabKey = ref(dataType)
+const authBtnTabClick = (val) => {
+    if (val !== authBtnTabKey.value) {
+        authBtnTabKey.value = val
+        listItemBaseData.value.type = val
+        listItemBaseData.value.detectionCategory = Number(val)
+        getSearchNodeTables()
+    }
+}
+
+//类型tab数据和相关处理
+const leftFormData = ref([])
+const rightFormData = ref([])
+const allFormData = ref([])
+const tabTypeTab = ref([
+    { key: '1', name: '记录表' },
+    { key: '2', name: '报告单' },
+])
+const tabTypeChange = ({ key }) => {
+    // console.log(ListItemRef.value?.getFormData(),'ListItemRef.value?.getFormData()');
+    tabTypeKey.value = key
+    let curform = ListItemRef.value?.getFormData()
+    setAllListData(curform)
+    if (listItemBaseData.value.detectionResult === '' && tabTypeKey.value == 2) {
+        window.$message?.warning('请选择报告单是否合格')
+    }
+    // if(tabTypeKey.value==='2'){
+    //     leftFormData.value=ListItemRef.value?.getFormData()
+    // }else{
+    //       rightFormData.value=ListItemRef.value?.getFormData()
+    // }
+
+
+    getSearchNodeTables()
+}
+
+//获取检测类别类型
+const categoryData = ref([])
+const getCategoryData = async () => {
+    const { data } = await getDictionary({
+        code: 'trial_detection_category',
+    })
+    const arrData = getArrValue(data)
+    arrData.forEach(item => {
+        item.dictKey = Number(item.dictKey)
+    })
+    categoryData.value = arrData
+}
+
+//顶部表单
+const ListItemRef = ref(null)
+const listItemBaseData = ref({
+    sampleIds: '', contractId: null, nodeId: nodeId, trialProjectName: null, type: dataType, tableType: '1',
+    detectionCategory: '', detectionResult: '', reportDate: '', trialUserName: '', id: dataId,
+})
+
+
+const listItemData = ref([])
+const isLoadList = ref(false)
+const listDeviceUseIds = ref('')
+const reportData = ref([])
+const testData = ref([])
+const alllistData = ref([])
+const orgAlllistData = ref([])
+const getSearchNodeTables = async (newaddId) => {
+    isLoadList.value = true
+    const isid = dataId.length > 0 ? dataId : nodeIdvalue.value || newaddId || ''
+    if (isaddType) {
+        const { error, code, data } = await dataApi.searchNodeTables({
+            id: dataId.length > 0 ? dataId : nodeIdvalue.value || newaddId,
+            projectId: projectId.value,
+            contractId: contractId.value,
+            primaryKeyId: nodeId,
+            type: authBtnTabKey.value,
+            tableType: tabTypeKey.value,
+            // isAdd: 1
+            isAdd: isid.length > 0 ? '' : 1,
+        })
+        //处理数据
+
+        if (!error && code === 200) {
+            listItemData.value = getArrValue(data)
+            listItemData.value.forEach((item) => {
+                    if (item.pKeyId === singSaveId.value) {
+                        item.isCancopy = true
+                    }
+                },
+            )
+
+            // console.log( listItemData.value,' listItemData.value');
+            // defaultCheckarrIds.value= listItemData.value.projectPosition.join(',')
+        } else {
+            listItemData.value = []
+        }
+        isLoadList.value = false
+    } else {
+        queryNodeStatus()//查询按钮状态
+        const { error, code, data } = await dataApi.searchNodeTables({
+            id: dataId.length > 0 ? dataId : nodeIdvalue.value,
+            projectId: projectId.value,
+            contractId: contractId.value,
+            primaryKeyId: nodeId,
+            type: authBtnTabKey.value,
+            tableType: tabTypeKey.value,
+
+        })
+        //处理数据
+
+        if (!error && code === 200) {
+            listItemData.value = getArrValue(data)
+            listItemData.value.forEach((item) => {
+                    if (item.pKeyId === singSaveId.value) {
+                        item.isCancopy = true
+                    }
+                },
+            )
+        } else {
+            listItemData.value = []
+        }
+        isLoadList.value = false
+    }
+
+
+}
+const getSearchNodeTablesall = async (type, newaddId) => {
+    orgAlllistData.value = []
+    const isid = dataId.length > 0 ? dataId : nodeIdvalue.value || newaddId || ''
+    const { error, code, data } = await dataApi.searchNodeTables({
+        id: dataId.length > 0 ? dataId : nodeIdvalue.value || newaddId,
+        projectId: projectId.value,
+        contractId: contractId.value,
+        primaryKeyId: nodeId,
+        type: authBtnTabKey.value,
+        tableType: type,
+        // isAdd: 1
+        // isAdd: isaddType ? 1 : ''
+        isAdd: isid.length > 0 ? '' : 1,
+
+    })
+    //处理数据
+
+    if (!error && code === 200) {
+        // listItemData.value = getArrValue(data)
+        if (type === 1) {
+            testData.value = getArrValue(data)
+            testData.value.forEach((item) => {
+                let bussDataInfoTrialData = item.bussDataInfoTrial
+                if (bussDataInfoTrialData && Object.keys(bussDataInfoTrialData).length !== 0) {
+                    for (var key in bussDataInfoTrialData) {
+                        item[key] = bussDataInfoTrialData[key]
+                    }
+                }
+
+                orgAlllistData.value.push(item)
+
+
+            })
+        } else {
+            reportData.value = getArrValue(data)
+            reportData.value.forEach((item) => {
+                let bussDataInfoTrialData = item.bussDataInfoTrial
+                if (bussDataInfoTrialData && Object.keys(bussDataInfoTrialData).length !== 0) {
+                    for (let key in bussDataInfoTrialData) {
+                        item[key] = bussDataInfoTrialData[key]
+                    }
+                }
+
+                orgAlllistData.value.push(item)
+            })
+        }
+    } else {
+        // listItemData.value = []
+        // eslint-disable-next-line eqeqeq
+        if (type == 1) {
+            testData.value = []
+            alllistData.value = []
+        } else {
+            reportData.value = []
+            alllistData.value = []
+        }
+    }
+
+
+}
+//改变原始数据复制隐藏本表的状态
+const newId = ref('')
+//获取数据
+const getTableDataAll = (newaddId) => {
+    newId.value = newaddId
+    getSearchNodeTables(newaddId)
+    queryNodeStatus(newaddId)
+    getSearchNodeTablesall(1, newaddId)
+    getSearchNodeTablesall(2, newaddId)
+}
+//隐藏显示本表改变原始数据
+const changeorinsdate = (pKeyId, isBussShow) => {
+    orgAlllistData.value.forEach((item) => {
+        if (item.pKeyId === pKeyId) {
+            const isBussShows = isBussShow === 2 ? 1 : 2 //状态(1显示 2隐藏)
+            item.isBussShow = isBussShows
+        }
+    })
+    console.log(orgAlllistData.value, ' orgAlllistData.value')
+}
+//复制本表改变原始数据
+const chageorinData = () => {
+    getSearchNodeTablesall(1)
+    getSearchNodeTablesall(2)
+}
+//设置滚动条位置
+const ListItemScrollRef = ref(null)
+const ListItemOffsetTop = (offsetTop) => {
+    if (offsetTop > 0) {
+        setTimeout(() => {
+            ListItemScrollRef.value?.setScrollTop(offsetTop)
+        }, 350)
+    } else {
+        ListItemScrollRef.value?.setScrollTop(offsetTop)
+    }
+}
+const checkTabId = ref('')
+const upcheckTableId = (val) => {
+    checkTabId.value = val
+}
+const singSaveId = ref('')
+const iscanclick = ref(true)
+const changeIscanclick = () => {
+    iscanclick.value = false
+}
+const changesingSaveId = (id) => {
+    singSaveId.value = id
+}
+//关联工程用途及部位 树
+const linksRelateModal = ref(false)
+const linksRelateModalClick = () => {
+    linksRelateModal.value = true
+    linksRelateSearchTreeVal.value = ''
+    getContractInfoTreeApi()
+}
+
+//获取导入树
+const unmatchedTreeData = ref([])
+const defaultCheckarrIds = ref([])
+const defaultprojectPositionName = ref('')
+const isdivisionLoading = ref(false)
+const getContractInfoTreeApi = async () => {
+    isdivisionLoading.value = true
+    const { error, code, data } = await divisionApi.getengineerInfoTree1({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        wbsId: projectInfo?.value.referenceWbsTemplateId,
+        selfId: dataId,
+    })
+    //判断状态
+    if (!error && code === 200) {
+        unmatchedTreeData.value = getArrValue(data['treeContractAll'])
+        searchTreeData.value = getArrValue(data['treeContractAll'])
+        setStoreValue('unmatchedTreeData', unmatchedTreeData.value)
+
+        // defaultCheckarrIds.value=getArrValue(data['isSelectedStatus'])
+        checkrelationId.value = getArrValue(data['isSelectedStatus'])
+    } else {
+        unmatchedTreeData.value = []
+    }
+    isdivisionLoading.value = false
+}
+
+//关联树
+const divisionTreeItemInfo = ref({})
+const divisionTreeClick = ({ data }) => {
+    divisionTreeItemInfo.value = data
+}
+const checkrelationId = ref([])
+const checkrelationString = ref([])
+const ElTreeRef = ref(null)
+const divisionTreeCheck = (data1, data2) => {
+    checkrelationId.value = data2?.checkedNodes
+}
+const seaElTreeProps = ref({
+    label: 'fullName',
+    children: 'children',
+})
+const linksRelateSearchTreeVal = ref('')
+// watch(tabTypeKey, (val) => {
+//     if(val){
+//          console.log(val);
+//         if (val==='1') {
+
+//              leftFormData.value=ListItemRef.value?.getFormData()
+//         }else{
+//              rightFormData.value= ListItemRef.value?.getFormData()
+//         }
+//     }
+
+// },
+
+
+// )
+watch(linksRelateSearchTreeVal, (val) => {
+        if (!val.length) {
+            isSearchTree.value = !isSearchTree.value
+
+        }
+
+    },
+)
+const linksRelateTreeLoading = ref(false)
+const searchTreeData = ref([])
+const searchlinksRelateTreeLoading = ref(false)
+const searchTreeKeyUp = (e) => {
+    if (e.key === 'Enter') {
+        searchTreeClick()
+    }
+}
+
+
+//树搜索
+const isSearchTree = ref(false)
+const searchTreeClick = async () => {
+    if (linksRelateSearchTreeVal.value) {
+        nextTick(() => {
+            isSearchTree.value = false
+
+
+        })
+
+        //   const {error, code, data} = await queryApi.searchContractTree({
+        //         contractId: contractId.value,
+        //         queryValue: linksRelateSearchTreeVal.value
+        //     })
+        //     //判断状态
+        //     if (!error && code === 200) {
+
+        //         searchlinksRelateTreeLoading.value = false
+        //     } else {
+        //         searchlinksRelateTreeLoading.value = false
+        //         searchTreeData.value = []
+        //     }
+    }
+}
+const positiondata = ref([])
+//确认关联
+const linksRelateModalSave = async () => {
+    let idarr = []
+    checkrelationId.value.forEach((item) => {
+        idarr.push(item.primaryKeyId)
+    })
+    checkrelationString.value = idarr.toString()
+
+        console.log(checkrelationString.value, 'checkrelationString.value')
+        listItemBaseData.value.projectPosition = checkrelationString.value
+
+
+    let infodata = await getpositiondata()
+    positiondata.value = infodata
+    ListItemRef.value.changePositionInput(infodata)
+    if (infodata.length > 0) {
+         window.$message?.success('操作成功')
+        linksRelateModal.value = false
+    }
+    linksRelateModal.value = false
+
+
+
+}
+const linksRelateModalClose = () => {
+    linksRelateModal.value = false
+}
+
+
+//关联原材检测报告
+const linksRawModal = ref(false)
+const MixRatioTestTreeData = ref([])
+const linksRawModalClick = () => {
+    linksRawModal.value = true
+    getTreeData()
+}
+const getTreeData = async (node, reslove) => {
+    const { error, code, data } = await samplingApi.getMixRatioTestTree({
+        pKeyId: nodeId,
+    })
+    MixRatioTestTreeData.value = getArrValue(data)
+}
+
+const linkNodeid = ref('')
+//树被点击
+const linksRawTreeClick = ({ data }) => {
+    linkNodeid.value = data.pKeyId
+    getrawMaterialList()
+}
+
+
+//原材检测报告数据
+const tableRawRef = ref(null)
+const linksRawTableColumn = ref([
+    { key: 'reportNo', name: '报告编号' },
+    { key: 'trialProjectName', name: '试验项目名称' },
+    { key: 'projectPositionName', name: '工程部位及用途' },
+    { key: 'reportDate', name: '报告日期' },
+])
+const linksRawTableData = ref([])
+const linksRawTableLoading = ref(false)
+
+//多选
+const tableRawCheckedKeys = ref([])
+const tableRawCheckedKeysid = ref('')
+const linksRawTableSelection = (rows) => {
+    tableRawCheckedKeys.value = rows
+    let arr = []
+    tableRawCheckedKeys.value.forEach((item) => {
+        arr.push(item.id)
+    })
+    tableRawCheckedKeysid.value = arr.join()
+}
+
+const linksRawModalSave = async () => {
+    linksRawModal.value = false
+    listItemBaseData.value.rawMaterialIds = tableRawCheckedKeysid.value
+    window.$message?.success('操作成功')
+    //     const { error, code, data } = await dataApi.rawMaterialSubmit({
+    //     id: dataId,
+    //     ids:tableRawCheckedKeysid.value,
+    //     projectId: projectId.value,
+    //     contractId: contractId.value,
+    //     primaryKeyId: nodeId,
+    //     type: authBtnTabKey.value,
+    //  })
+    // if (!error && code === 200) {
+    //         window.$message?.success('操作成功')
+    //         tableRawCheckedKeys.value=[]
+    //         linksRawModal.value = false
+    //         tableRawRef.value?.clearSelection();
+    //  }
+    //  else {
+    //     window.$message?.warning(error)
+    //  }
+
+}
+
+//关闭原材检测报告
+const linksRawModalClose = () => {
+    linksRawModal.value = false
+    linksRawTableData.value = []
+    tableRawRef.value?.clearSelection()
+}
+
+const formpositon = ref('')
+//关联取样
+const linksSampleModal = ref(false)
+const linksSampleModalClick = () => {
+    linksSampleTableData.value = []
+    linksSampleModal.value = true
+    let FormData = ListItemRef.value?.getFormData()
+    formpositon.value = FormData
+    getKetarr()
+
+}
+const positonkey = ref([])
+const positionName = ref('')
+//取出工程部位名称的key值
+const getKetarr = ()=>{
+    let rekey = []
+    if (positiondata.value.length > 0) {
+        positiondata.value.forEach((ele)=>{
+            let arr = Object.keys(ele)
+            arr.forEach((item)=>{
+                if (item.indexOf('key') !== -1) {
+                    rekey.push(item)
+                    positionName.value = ele[item]
+                }
+            })
+        })
+    }
+    positonkey.value = rekey
+}
+const formname = ref('')
+//取样工程部位值清空与替换
+const clearinf = ()=>{
+    //1.点了工程部位进行清空
+    if (positonkey.value.length > 0) {
+        positonkey.value.forEach((item)=>{
+            sampledata.value.forEach((ele)=>{
+                let arr = Object.keys(ele)
+                arr.forEach((ele1)=>{
+                    if (ele1.indexOf(item) !== -1) {
+                        ele[ele1] = positionName.value
+                    }
+                })
+            })
+        })
+        ListItemRef.value.changeSimpleInput( sampledata.value, checkTabId.value)
+    } else if (defaultCheckarrIds.value.length > 0) {
+        //2.表单工程部位有值，替换为工程部位的值
+        sampledata.value.forEach((ele)=>{
+                let arr = Object.keys(ele)
+                arr.forEach((ele1)=>{
+                    if (ele1.indexOf('取样对应工程部位Key') !== -1) {
+                        ele[ele[ele1]] = defaultprojectPositionName.value
+                    }
+                })
+            })
+            ListItemRef.value.changeSimpleInput( sampledata.value, checkTabId.value)
+    } else {
+        let rekey = []
+        sampledata.value.forEach((ele)=>{
+            let arr = Object.keys(ele)
+            arr.forEach((item)=>{
+                if (item.indexOf('取样对应') !== -1) {
+                    rekey.push(ele['取样对应工程部位Key'])
+                }
+            })
+        })
+        formpositon.value.forEach((ele1)=>{
+            rekey.forEach((ele2)=>{
+              if (ele1[ele2]) {
+                formname.value = ele1[ele2]
+              }
+
+            })
+        })
+        rekey.forEach((item)=>{
+            sampledata.value.forEach((ele)=>{
+                let arr = Object.keys(ele)
+                arr.forEach((ele1)=>{
+                    if (ele1.indexOf(item) !== -1) {
+                    //    ele[item]= formname.value
+                        if (formname.value.length > 0) {
+                            ele[item] = formname.value
+                        } else {
+                            console.log(454545)
+                        }
+                    }
+                })
+            })
+        })
+        ListItemRef.value.changeSimpleInput( sampledata.value, checkTabId.value)
+    }
+ }
+
+
+//搜索表单
+const linksSampleSearchForm = ref({
+    nodeId: null, current: 1, size: 20, total: 0,
+})
+
+//树被点击
+const linksSampleTreeClick = ({ data }) => {
+    linksSampleSearchForm.value.nodeId = data.primaryKeyId
+    linksSampleSearchForm.value.current = 1
+    getLinksSampleData()
+}
+
+//关联取样数据
+const tableSampleRef = ref(null)
+const linksSampleTableColumn = ref([
+    { key: 'materialName', name: '样品名称' },
+    { key: 'samplingDate', name: '取样日期' },
+    { key: 'specificationModel', name: '规格型号' },
+    { key: 'proposedPosition', name: '拟用部位' },
+    { key: 'userName', name: '取样人' },
+])
+const linksSampleTableData = ref([])
+
+//获取关联数据
+const linksSampleTableLoading = ref(false)
+const getLinksSampleData = async () => {
+    linksSampleTableLoading.value = true
+    const { error, code, data } = await dataApi.sampleListInfo({
+        ...linksSampleSearchForm.value,
+        projectId: projectId.value,
+        contractId: contractId.value,
+        id: dataId,
+    })
+    //处理数据
+    linksSampleTableLoading.value = false
+    if (!error && code === 200) {
+        linksSampleTableData.value = getArrValue(data)
+        linksSampleTableData.value.forEach((iten) => {
+            if (iten.isRelation === 1) {
+                nextTick(() => {
+                    tableSampleRef.value?.toggleRowSelection(iten, true)
+                })
+
+            }
+        })
+        //searchForm.value.total = data.total || 0
+    } else {
+        linksSampleTableData.value = []
+        //searchForm.value.total = 0
+    }
+}
+//获取关联原材料检测报告
+const getrawMaterialList = async () => {
+    linksRawTableLoading.value = true
+    const { error, code, data } = await dataApi.rawMaterialList({
+        nodeId: linkNodeid.value,
+        contractId: contractId.value,
+        id: dataId,
+    })
+    //处理数据
+    linksRawTableLoading.value = false
+    if (!error && code === 200) {
+        linksRawTableData.value = getArrValue(data)
+        linksRawTableData.value.forEach((iten) => {
+            if (iten.isRawMaterialRelation === 1) {
+                nextTick(() => {
+                    tableRawRef.value?.toggleRowSelection(iten, true)
+                })
+            }
+        })
+        //searchForm.value.total = data.total || 0
+    } else {
+        linksRawTableData.value = []
+        //searchForm.value.total = 0
+    }
+}
+//多选
+const tableSampleCheckedKeys = ref([])
+const linksSampleTableSelection = (rows) => {
+    tableSampleCheckedKeys.value = rows
+}
+const sampledata = ref([])
+//保存关联
+const linksSampleModalSave = async () => {
+    const rows = tableSampleCheckedKeys.value
+    listItemBaseData.value.sampleIds = arrToId(rows) || ''
+    window.$message?.success('操作成功')
+    isopersampleIds.value = true
+    let infodata = await getrecordsamplegetData()
+    sampledata.value = infodata
+    clearinf()
+
+    tableSampleCheckedKeys.value = []
+
+    linksSampleModal.value = false
+
+}
+//获取关联取样信息key值
+const getrecordsamplegetData = async () => {
+    const { data } = await dataApi.recordsamplegetData({
+        sampleIds: listItemBaseData.value.sampleIds,
+        nodePKeyId: routerQuery?.nodeId,
+        contractId: contractId.value,
+
+    })
+    return data
+}
+//获取关联工程部位key值
+const getpositiondata = async () => {
+    const { error, code, data } = await dataApi.recordprojectPositiongetData({
+        projectPositionIds:checkrelationString.value,
+        nodePKeyId: routerQuery?.nodeId,
+        contractId: contractId.value,
+
+    })
+    if (!error && code === 200) {
+
+        return data
+
+    }
+
+}
+//关闭关联取样
+const linksSampleModalClose = () => {
+    linksSampleModal.value = false
+}
+
+//保存
+const tableFormSaveLoading = ref(false)
+const tableFormSaveClick = async () => {
+    //false是编辑
+    if (tabTypeKey.value === '2' && listItemBaseData.value.detectionResult === '') {
+        window.$message?.warning('请选择报告单是否合格')
+    } else {
+        let FormData
+        let curform = await ListItemRef.value?.setFormChart()
+        //let curform = ListItemRef.value?.getFormData()
+        setAllListData(curform)
+        let operTrue = alllistData.value.filter(e => e.oper) //操作的数据
+        let types = []
+        operTrue.forEach(e => {
+            types.push(e.type)
+        })
+        let setTypes = Array.from(new Set(types))
+        let type = setTypes.length > 0 ? setTypes[0] : ''
+        if (newId.value?.length > 0) {
+            isaddType = false
+            listItemBaseData.value.id = newId.value
+        }
+        if (isaddType) { //新增
+            if (setTypes.length > 1) {
+                FormData = alllistData.value
+                listItemBaseData.value.tableType = '1,2'
+            } else {
+                // FormData = alllistData.value.filter(e => e.type == type);
+                if (!afterAdd.value) {
+                    FormData = alllistData.value.filter(e => e.type == type)
+                } else {
+                    let filterType = type ? type : tabTypeKey.value
+                    //   FormData =alllistData.value.filter(e => e.type == type);
+                    FormData = alllistData.value.filter(e => e.type == filterType)
+                    orgAlllistData.value.forEach((item1) => {
+                        if (item1.tableType.toString() !== tabTypeKey.value) {
+                            let data1 = {
+                                projectId: item1.projectId,
+                                contractId: contractId.value,
+                                pkeyId: item1.pKeyId,
+                                nodeId: routerQuery?.nodeId,
+                                isCollapseLoad: false,
+                                isBussShow: item1.isBussShow,
+                            }
+                            // 过滤存在的key_的键值
+                            let ishasKey = Object.keys(item1).filter(e => e.indexOf('key_') >= 0)
+                            if (ishasKey.length > 0) {
+                                ishasKey.forEach(key => {
+                                    data1[key] = item1[key]
+                                })
+                            }
+                            FormData.push(data1)
+                        }
+                    })
+                }
+                listItemBaseData.value.tableType = type
+            }
+        } else { //编辑
+            console.log(alllistData.value, 'alllistData.value')
+
+            FormData = alllistData.value
+
+            const info = getStoreValue('test-form')
+
+
+            let recordNo = info?.recordNo || tabTypeKey.value == 1 ? listItemBaseData.value.id : ''
+
+            let reportNo = info?.reportNo || tabTypeKey.value == 2 ? listItemBaseData.value.id : ''
+
+            //组装type
+            if (recordNo === '' && reportNo !== '') {
+                listItemBaseData.value.tableType = '2'
+            } else if (recordNo !== '' && reportNo === '') {
+                listItemBaseData.value.tableType = '1'
+            } else {
+                listItemBaseData.value.tableType = '1,2'
+            }
+
+            let notChangeData = []
+            if (setTypes.length == 0) { //没操作过页面数据
+                FormData = []
+                notChangeData = orgAlllistData.value //默认就是原始左右全部数据
+                if (listItemBaseData.value.tableType.length === 1) { //从原始数据过滤当前页面数据
+                    notChangeData = orgAlllistData.value.filter(e => e.tableType === listItemBaseData.value.tableType)
+                }
+
+            } else if (setTypes.length == 1) {// 操作过一边的数据
+                orgAlllistData.value.forEach((item1) => {
+                    if (item1.tableType.toString() !== tabTypeKey.value) {
+                        let data1 = {
+                            projectId: item1.projectId,
+                            contractId: contractId.value,
+                            pkeyId: item1.pKeyId,
+                            nodeId: routerQuery?.nodeId,
+                            isCollapseLoad: false,
+                            isBussShow: item1.isBussShow,
+                        }
+                        // 过滤存在的key_的键值
+                        let ishasKey = Object.keys(item1).filter(e => e.indexOf('key_') >= 0)
+                        if (ishasKey.length > 0) {
+                            ishasKey.forEach(key => {
+                                data1[key] = item1[key]
+                            })
+                        }
+                        FormData.push(data1)
+                    }
+                })
+                console.log(FormData, 'FormData22222222')
+                let tableTypeArr = listItemBaseData.value.tableType.split(',')
+                if (tableTypeArr[0] != type) { //两边都有数据/当前操作的数据不是进来时的选项，筛选另一边的数据
+                    listItemBaseData.value.tableType = '1,2'
+                }
+            } else { //两边都操作
+                listItemBaseData.value.tableType = '1,2'
+            }
+            notChangeData.forEach(item => {
+                let data = {
+                    projectId: item.projectId,
+                    contractId: contractId.value,
+                    pkeyId: item.pKeyId,
+                    nodeId: routerQuery?.nodeId,
+                    isCollapseLoad: false,
+                    isBussShow: item.isBussShow,
+                }
+                // 过滤存在的key_的键值
+                let ishasKey = Object.keys(item).filter(e => e.indexOf('key_') >= 0)
+                if (ishasKey.length > 0) {
+                    ishasKey.forEach(key => {
+                        data[key] = item[key]
+                    })
+                }
+                FormData.push(data)
+            })
+        }
+
+        let FormRegExpJson = ListItemRef.value?.getFormRegExpJson()
+        if (newId.value?.length > 0) {
+            isaddType = false
+        }
+        if (isaddType && FormData.length == 0 || !isaddType && FormData.length == 0) {
+            console.log('什么都不操作新增或者编辑')
+            if (tabTypeKey.value == 1) {
+                FormData = alllistData.value.filter((itenel) => {
+                    return itenel.type == 1
+                })
+
+            } else if (tabTypeKey.value == 2) {
+                FormData = alllistData.value.filter((itenel) => {
+                    return itenel.type == 2
+                })
+            } else {
+                FormData = alllistData.value
+            }
+            listItemBaseData.value.tableType = tabTypeKey.value
+        }
+        //效验数据
+        if (FormData.length > 0) {
+            if (listItemBaseData.value.detectionResult === '' && listItemBaseData.value.tableType == '1,2') {
+                window.$message?.warning('请选择报告单是否合格')
+            } else {
+                tableFormSaveLoading.value = true
+                console.log(listItemData.value, 'listItemData.value')
+                if (listItemData.value.id && listItemData.value.id.length < 0) {
+                    listItemData.value.id = dataId
+                }
+                console.log(FormData, 'lastFormData')
+                //过滤掉已经隐藏表的数据
+                FormData = FormData.filter((item) => {
+                    if (item.isBussShow !== 2) {
+                        return item
+                    }
+                })
+                console.log( listItemBaseData.value.tableType, '   listItemBaseData.value.tableType')
+                console.log(FormData, 'lastFormData1')
+                if (listItemBaseData.value.tableType && listItemBaseData.value?.tableType.length === 1 && newId.value?.length === 0) {
+                    console.log('只要一边的数据')
+                    // eslint-disable-next-line array-callback-return
+                    FormData = FormData.filter((ele) => {
+                        // eslint-disable-next-line eqeqeq
+                        if (ele.type == listItemBaseData.value.tableType) {
+                            return ele
+                        }
+                    })
+                    console.log(FormData, 'FormDat4444444a')
+                }
+                const { error, code, data } = await dataApi.saveExcelBussData({
+                    ...listItemBaseData.value,
+                    isBatchSave: 1,
+                    dataInfo: { orderList: FormData },
+                    // deviceUseIds:listDeviceUseIds.value
+                })
+
+                nodeIdvalue.value = data
+                tableFormSaveLoading.value = false
+                if (!error && code === 200) {
+                    window?.$message?.success('保存成功')
+
+                    listItemBaseData.value.deviceUseIds = ''
+                    checkTabId.value = ''
+                    // alllistData.value.forEach(e => e.oper = false)
+                    alllistData.value = []
+                    if (!isaddType) {
+                        bussPdfsClick(router.currentRoute.value.query.id || listItemBaseData.value.id)
+                        //   toBackClick()
+                        getSearchNodeTables()
+                        getSearchNodeTablesall(1)
+                        getSearchNodeTablesall(2)
+                    } else {
+                        listItemBaseData.value.id = data
+                        bussPdfsClick(nodeIdvalue.value)
+                        getSearchNodeTables()
+                        getSearchNodeTablesall(1)
+                        getSearchNodeTablesall(2)
+                        afterAdd.value = true
+                        isaddType = false
+                    }
+                    getTableDataAll()
+                }
+            }
+        }
+    }
+}
+
+const setAllListData = (curform) => {
+    if (curform) {
+        curform.forEach((item) => {
+            let pkeyId = item.pkeyId
+            item.oper = false
+
+            let ishasKey = Object.keys(item).filter(e => e.indexOf('key_') >= 0)
+            if (ishasKey.length > 0) { //筛出当前编辑过的数据
+                item.oper = true
+            }
+
+            let orgData = orgAlllistData.value.filter(e => e.pKeyId === pkeyId)
+            item.type = orgData[0]?.tableType
+            alllistData.value = alllistData.value.filter(e => e.pkeyId != pkeyId) //去掉老数据
+            console.log(orgData, 'orgData')
+            if (orgData.length > 0) {
+                ishasKey = Object.keys(orgData[0]).filter(e => e.indexOf('key_') >= 0)
+            }
+
+            if (!item.isCollapseLoad && ishasKey.length > 0) { //没操作过，并且存在KEY
+                ishasKey.forEach(key => {
+                    item[key] = orgData[0][key]
+                })
+            }
+
+            alllistData.value.push(item) //加入新数据
+        })
+    }
+
+
+}
+
+//效验数据
+const setFormRegExpJson = (FormRegExpJson) => {
+    let nodeName = '', itemId = ''
+    Object.keys(FormRegExpJson).forEach(key => {
+        const name = FormRegExpJson[key]?.nodeName ?? ''
+        if (name) {
+            if (nodeName) {
+                nodeName += ',' + name
+            } else {
+                nodeName = name
+                itemId = FormRegExpJson[key]?.itemId
+            }
+        }
+    })
+    //const activeKey = ListItemRef.value?.getActiveKey()
+    //弹出提示
+    const val = '<div style="font-size: 16px;">请先完善  <span style="color:#1ECC95;">' + nodeName + '</span>  的数据内容</div>'
+    window?.$messageBox?.alert(val, '表单完善提醒', {
+        confirmButtonText: '确定',
+        dangerouslyUseHTMLString: true,
+        callback: (action) => {
+            if (action === 'confirm') {
+                ListItemRef.value?.setActiveKey(itemId)
+                ListItemOffsetTop(0)
+                setTimeout(() => {
+                    const offsetTop = document.getElementById(itemId)?.offsetTop
+                    ListItemOffsetTop(offsetTop)
+                }, 350)
+            }
+        },
+    })
+}
+//获取数据列表
+
+
+const nodeItemInfo = ref({})
+const nodeDataInfo = ref({})
+//查询状态
+const NodeStatus = ref('1')
+const queryNodeStatus = async (newaddId) => {
+    const info = getStoreValue('prenodeDataInfo') || {}
+    const { error, code, data } = await wbsApi.queryNodeStatusTrial({
+        // primaryKeyId: info['contractIdRelation'] ? info['id'] : info['primaryKeyId'],
+        id: dataId.length > 0 ? dataId : nodeIdvalue.value || newaddId,
+        classify: authBtnTabKey.value,
+    })
+    //1 未填报，2待上报，3已上报
+    if (!error && code === 200) {
+        NodeStatus.value = data ?? '1'
+    } else {
+        NodeStatus.value = '1'
+    }
+}
+//批量上报
+const reportIds = ref('')
+const reportTaskName = ref('')
+const reportAddition = ref({})
+const showReportModal = ref(false)
+const reportLoading = ref(false)
+const reportTypeData = ref([])
+
+// const reportModalClick = async () => {
+//      showReportModal.value = true
+// }
+
+//上报完成
+const showReportFinish = () => {
+    showReportModal.value = false
+    getTableDataAll()
+}
+
+
+const reportModalClick = async () => {
+    const info = getStoreValue('prenodeDataInfo') || {}
+    console.log(info, 'info')
+    const rows = listItemData.value
+    if (rows.length > 0) {
+        reportLoading.value = true
+        const taskCheck = await eVisaTaskCheckApi({
+            projectId: projectId.value,
+            contractId: contractId.value,
+        })
+        //处理数据
+        let newArr = []
+        // console.log(rows,'rows');
+        for (let i = 0; i < rows.length; i++) {
+            newArr.push(rows[i]['pKeyId'])
+        }
+        reportTypeData.value = newArr
+        reportLoading.value = false
+        if (taskCheck) {
+            //初始弹出弹窗，防呆
+            // reportIds.value = info['primaryKeyId'] dataId
+            reportIds.value = dataId.length > 0 ? dataId : nodeIdvalue.value
+            reportAddition.value = {
+                classify: authBtnTabKey.value,
+                contractIdRelation: info['contractIdRelation'],
+            }
+            showReportModal.value = true
+            //请求文件题名
+            const { data } = await wbsApi.queryDocumentTitle({
+                // primaryKeyId: info['primaryKeyId'],
+                primaryKeyId: dataId.length > 0 ? dataId : nodeIdvalue.value,
+                classify: authBtnTabKey.value,
+            })
+            reportTaskName.value = isString(data) ? data : ''
+        }
+    } else {
+        window.$message?.warning('暂无相关数据')
+    }
+}
+//多表预览
+const bussPdfsLoading = ref(false)
+const nodeIdvalue = ref('')
+const bussPdfsClick = async (nodeId, newaddId) => {
+    bussPdfsLoading.value = true
+    const { error, code, data } = await dataApi.getBussPdfs({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        classify: authBtnTabKey.value,
+        tableType: tabTypeKey.value,
+        // nodeId: router.currentRoute.value.query.id,
+        nodeId: nodeId || newId.value,
+    })
+    bussPdfsLoading.value = false
+    if (!error && code === 200) {
+        window.open(data, '_blank')
+    } else {
+        window.$message?.warning('获取PDF失败')
+    }
+}
+
+//撤回上报流程
+// const abolishOneClick = () => {
+//     window.$message?.warning('暂无接口')
+// }
+//撤回上报流程
+const abolishOneClick = () => {
+    window?.$messageBox?.alert('请谨慎考虑后，是否确定撤回？', '撤回上报', {
+        showCancelButton: true,
+        confirmButtonText: '确定撤回',
+        cancelButtonText: '取消',
+        callback: (action) => {
+            if (action === 'confirm') {
+                abolishOneSave()
+            }
+        },
+    })
+}
+//撤回请求
+const abolishOneSave = async () => {
+    const info = getStoreValue('prenodeDataInfo') || {}
+    const { error, code } = await wbsApi.abolishOne({
+        // primaryKeyId:  info?.primaryKeyId || '',
+        primaryKeyId: dataId.length > 0 ? dataId : nodeIdvalue.value,
+        classify: authBtnTabKey.value,
+    })
+    if (!error && code === 200) {
+        window.$message?.success('撤回成功')
+        getTableDataAll()
+    }
+}
+//返回
+const toBackClick = () => {
+    router.push({
+        path: '/tentative/detect/test',
+        query: {},
+    })
+    // setTimeout(() => {
+    //     window?.location?.reload()  //刷新页面
+    // }, 1000);
+}
+
+const updeviceUseIds = (val) => {
+    listItemBaseData.value.deviceUseIds = val
+}
+const treeProps = {
+    label: 'fullName',
+    children: 'hasChildren',
+    isLeaf: 'notExsitChild',
+}
+//获取工程部位方法
+const treeLoadNode = async ({ node, item, level }, resolve) => {
+    let id = ''
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        id = nodeData?.id || ''
+    }
+    //获取数据
+    const { error, code, data } = await divisionApi.getengineerInfoTree1({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        wbsId: projectInfo?.value.referenceWbsTemplateId,
+        selfId: dataId,
+        id:id,
+    })
+    checkrelationId.value = getArrValue(data['isSelectedStatus'])
+    resolve(getArrValue(data))
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/tentative/detect/test-form.scss";
+.hc-table-form-action-tip {
+    position: absolute;
+    bottom: 77px;
+    width: 100%;
+}
+.hc-table-form-action-tip .hc-alert {
+    background-color: #f1f5f8;
+    display: inline;
+    vertical-align: middle;
+    box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+}
+</style>

src/views/tentative/detect/test-form.vue

@@ -21,16 +21,11 @@
                 >
                     关联原材检测报告
                 </el-button>
-                <el-button hc-btn type="primary" @click="linksSampleModalClick">
-                    关联取样
-                </el-button>
+                <el-button hc-btn type="primary" @click="linksSampleModalClick">关联取样</el-button>
             </template>
             <template #search>
                 <div class="flex-1">
-                    <HcNewSwitch
-                        :datas="tabTypeTab" :keys="tabTypeKey" :round="false" size="default"
-                        @change="tabTypeChange"
-                    />
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" :round="false" size="default" @change="tabTypeChange" />
                 </div>
                 <div class="hc-search-top-form">
                     <div class="w-40">
@@ -50,20 +45,20 @@
                     </div>
                     <div class="w-36 ml-2">
                         <el-select v-model="listItemBaseData.detectionCategory" block placeholder="选择检测类型">
-                            <el-option
-                                v-for="item in categoryData" :label="item.dictValue"
-                                :value="item.dictKey"
-                            />
+                            <el-option v-for="item in categoryData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                         </el-select>
                     </div>
                 </div>
             </template>
             <!-- 清表列表 -->
             <el-scrollbar v-if="listItemData.length > 0" ref="ListItemScrollRef" v-loading="isLoadList">
-                <ListItem
-                    ref="ListItemRef" :node-status="NodeStatus" :alllist-data="alllistData"
+                <CollapseForm
+                    ref="ListItemRef"
+                    :node-status="NodeStatus"
+                    :alllist-data="alllistData"
                     :auth-btn-tab-key="authBtnTabKey"
-                    :base-data="listItemBaseData" :datas="listItemData"
+                    :base-data="listItemBaseData"
+                    :datas="listItemData"
                     :device-use-ids="listDeviceUseIds"
                     :node-idvalue="nodeIdvalue"
                     :status="1"
@@ -254,6 +249,8 @@
 import { nextTick, onDeactivated, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRoute, useRouter } from 'vue-router'
+import CollapseForm from './collapse-form/src/index.vue'
+
 import ListItem from './components/ListItem.vue'
 import DivisionTree from './components/DivisionTree.vue'
 import DivisionTree1 from './components/DivisionTree1.vue'
@@ -413,7 +410,7 @@ const getSearchNodeTables = async (newaddId) => {
             isAdd: isid.length > 0 ? '' : 1,
         })
         //处理数据
-       
+
         if (!error && code === 200) {
             listItemData.value = getArrValue(data)
             listItemData.value.forEach((item) => {
@@ -441,7 +438,7 @@ const getSearchNodeTables = async (newaddId) => {
 
         })
         //处理数据
-    
+
         if (!error && code === 200) {
             listItemData.value = getArrValue(data)
             listItemData.value.forEach((item) => {
@@ -474,7 +471,7 @@ const getSearchNodeTablesall = async (type, newaddId) => {
 
     })
     //处理数据
- 
+
     if (!error && code === 200) {
         // listItemData.value = getArrValue(data)
         if (type === 1) {