for_client/src/views/data-fill/collapse-form/index.vue

<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['isCopeTab'] === 2 || item['isCopeTab'] === 3" keys="wbs_del_table">
                                <el-button :disabled="item['isBussShow'] === 2" :loading="tableFormDelLoading" plain
                                           type="danger"
                                           @click.stop="delClick(item)">删除本表
                                </el-button>
                            </HcTooltip>
                            <HcTooltip keys="wbs_copy_table">
                                <el-button
                                    v-if="item['isLinkTable'] === 1"
                                    disabled plain
                                    type="info">
                                    复制本表
                                </el-button>
                                <el-button v-else :loading="copyClickLoading" plain type="primary"
                                           @click.stop="copyClick(item,index)">复制本表
                                </el-button>
                            </HcTooltip>
                            <HcTooltip keys="wbs_hide_table">
                                <el-button :loading="tableFormHideLoading" plain type="primary"
                                           @click.stop="hideClick(item,index)">
                                    <template v-if="item['isBussShow'] === 1">隐藏本表</template>
                                    <template v-else>显示本表</template>
                                </el-button>
                            </HcTooltip>
                            <HcTooltip v-if="isStatus !== 3" keys="wbs_preview_table">
                                <el-button
                                    v-if="item['isBussShow'] === 2 || item['isTabPdf'] === 1|| item['pdfUrl'] === ''"
                                    disabled plain
                                    type="info">
                                    预览
                                </el-button>
                                <el-button v-else :loading="tableFormPreviewLoading" plain type="primary"
                                           @click.stop="previewClick(item)">预览
                                </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 - ${draw_type ? '555px' : '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"
                                       :nodeName="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、系统支持键盘中，shift +
                                tab键向上一个填报框切换，tab向下一个填报框切换。Shift + 上 ( ↑ )、下 ( ↓ )、左 ( ← )、右 ( →
                                )键，切换填报输入框焦点。
                            </div>
                            <div class="text-gray-400 tip-item">3、先点击一下表单任一区域，再键盘按住 ctrl +
                                点击，选择输入框，变为绿色边框，选中成功。选择完毕后，键盘按 ctrl + c 复制所选中的数据，
                                再其它表内，或同一张表内，再次按住 ctrl + 点击，选择输入框。键盘按 ctrl + v
                                依次粘贴所选的数据。（目前仅支持输入框和文本框的操作）
                            </div>
                            <div class="text-orange-500 tip-item">4、完善资料填写后记得一定要保存哦</div>
                        </el-scrollbar>
                        <div class="table-tip-foot">
                            <div class="tip-left-btn">
                                <HcTooltip keys="wbs_import_table">
                                    <div class="text-gray-400 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)">
                                        <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"/>

    <!--上传文件-->
    <HcDialog :footer="false" :show="uploadModal" title="上传文件" widths="38rem" @close="uploadModalClose">
        <HcUpload :datas="uploadData" :fileList="fileListData" @change='uploadChange'/>
    </HcDialog>

    <!--插入设计值/频率-->
    <HcDialog :loading="designModalLoading" :show="designModal" isToBody saveText="确认插入"
              title="插入设计值/频率" widths="600px"
              @close="closeDesignModal" @save="designModalSave">
        <el-alert :closable="false" title="填写完设计值和频率，系统自动计算实测值" type="warning"/>
        <el-form ref="formDesignRef" :model="formDesignModel" label-width="auto" size="large">
            <div class="form-item-div text-center mb-3">
                <el-radio-group v-model="formDesignModel.type" size="large">
                    <el-radio :label="1">公路工程</el-radio>
                    <el-radio :label="2" class="ml-4">水利水电</el-radio>
                </el-radio-group>
            </div>
            <el-form-item label="设计值">
                <!-- onkeyup="value = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" -->
                <el-input v-model="formDesignModel.design" placeholder="如果设计值存在两个，则使用 '/' 连接，例如12/23"/>
            </el-form-item>
            <el-form-item v-if="formDesignModel.type === 1" label="频率">
                <!--  onkeyup="value = value.replace(/^(0+)|[^\d]+/g,'')" -->
                <el-input v-model="formDesignModel.size"
                          placeholder="如果设计值使用 '/' 连接，则频率也是用 '/' 连接，例如5/10"/>
            </el-form-item>
            <el-form-item v-if="formDesignModel.type === 2" label="容量">
                <!--   onkeyup="value = value.replace(/^(0+)|[^\d]+/g,'')" -->
                <el-input v-model="formDesignModel.capacity"
                          placeholder="如果容量存在两个，则使用 '*'，或者 '/' 连接例如2*4，5/7"/>
            </el-form-item>
            <el-form-item label="合格点数">
                <el-input v-model="formDesignModel.pass"
                          placeholder="如果设计值使用 '/' 连接，则合格点数也是用 '/' 连接，例如2/5"/>
            </el-form-item>
            <el-form-item label="偏差范围">
                <el-input v-model="formDesignModel.dev"
                          placeholder="如果设计值使用 '/' 连接，则偏差范围也是用 '/' 连接，例如±2/±3"/>
            </el-form-item>
        </el-form>
    </HcDialog>

    <!--插入特殊字符-->
    <HcDialog :loading="specialModalLoading" :show="specialModal" isToBody saveText="确认插入" title="插入特殊字符"
              widths="600px" @close="specialModalClose" @save="specialNodeClick">
        <HcSpecialDiaolg v-if="specialModal" ref="specialRef" @change="specialDiaolgChange"/>
    </HcDialog>

    <!--关联试验数据-->
    <HcDialog :footer="false" :loading="testModalLoading" :show="testModal" isTable isToBody title="关联试验数据"
              widths="84%" @close="testModalClose">
        <HcTestDiaolg v-if="testModal" :contractId="contract_id" :projectId="projectId" :tenantId="tenant_id"
                      :wbsId="wbsTemp_id"
                      :wbsType="wbs_type" @change="testTableRowName"/>
    </HcDialog>

    <!-- 选择要插入的数据 -->
    <HcDialog :loading="insertDataLoading" :show="insertDataShow" isTable isToBody saveText="保存"
              title="选择需要插入的数据" widths="84%" @close="cancelinsertData"
              @save="submitinsertData">
        <HcTestData v-if="insertDataShow" ref="insertDataRef" :contractId="contract_id" :projectId="projectId"
                    :tableId="itinsertTableId"
                    :treeId="itinsertTreeId"/>
    </HcDialog>

    <!--关联试验文件-->
    <HcDialog :loading="fileModalLoading" :show="fileModal" isTable isToBody saveText="保存" title="关联试验文件"
              widths="84%" @close="fileModalClose"
              @save="savefileModal">
        <HcTestFile v-if="fileModal" ref="testFileRefs" :contractId="contract_id" :projectId="projectId"
                    :tenantId="tenant_id"
                    :treeId="treeId" :wbsId="wbsTemp_id"
                    :wbsType="wbs_type"/>
    </HcDialog>

    <!-- 公式参数配置 -->
    <HcDialog :loading="formulaModalLoading" :show="formulaModal" isToBody saveText="保存" title="公式参数配置"
              widths="84%" @close="formulaModalClose"
              @save="formulaSaveClick">
        <HcFormula v-if="formulaModal" ref="formulaRefs" :KeyName="tableFormItemNode.KeyName" :contractId="contract_id"
                   :formparentId="formparentId"
                   :pkeyId="tableFormItemNode.pkeyId" :projectId="projectId"/>
    </HcDialog>

    <!--查看表单-->
    <template v-for="(item,index) in DragModalTableForm">
        <HcDragModal :closeIconArr="closeIconArr" :eid="item.pkeyId" :height="DragModalHeight" :isShow="item.isShow"
                     :loading="item.loading" :loadingText="item.loadingText" :title="item.title"
                     isSortTop
                     @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"
                               :nodeName="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>
    <!-- 复制本表 -->
    <HcDialog :loading="copyClickModalLoading" :show="showcopyModal" isToBody saveText="确认复制" title="复制本表"
              widths="84%" @close="copyModalClose"
              @save="copySaveClick">
        <HcCopy v-if="showcopyModal" ref="copyRefs"  :contractId="contract_id" :projectId="projectId"  :classify="classifys" 
        :tree_AutoExpandKeys="tree_AutoExpandKeys"
        :treenodeDataInfo="treenodeDataInfo"
        :copyItems="copyItems"
        @changeModalType="changeType"

        />
    </HcDialog>
</template>

<script setup>
import {ref, watch, nextTick, onActivated, onDeactivated, onMounted, onUnmounted} from "vue";
import HTableForm from "~src/plugins/HTableForm"
import {useAppStore} from "~src/store";
import wbsApi from "~api/data-fill/wbs"
import HcUpload from "../components/HcUpload.vue"
import TableFormItem from "./table-form-item.vue"
import HcSpecialDiaolg from "./special-diaolg.vue"
import HcTestDiaolg from "./test-diaolg.vue"
import HcTestData from "./test-data.vue"
import HcTestFile from "./test-file.vue"
import HcFormula from "./formula.vue"
import HcCopy from './test-copy.vue'
import HcDragNode from "~com/drag-node/index.vue"
import NoDataSvg from '~src/assets/view/no-data.svg'
import {
    getArrValue, getObjValue, getObjVal,
    isNullES, deepClone, arrIndex, setPosRange
} from "js-fast-way"

//初始变量
const useAppState = useAppStore()

//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    classify: {
        type: [String, Number],
        default: ''
    },
    status: {
        type: [String, Number],
        default: ''
    },
    primaryKeyId: {
        type: [String, Number],
        default: ''
    },
    contractId: {
        type: [String, Number],
        default: ''
    },
    drawType: {
        type: Boolean,
        default: false
    },
    wbsTempId: {
        type: [String, Number],
        default: ''
    },
    tenantId: {
        type: [String, Number],
        default: ''
    },
    wbsType: {
        type: [String, Number],
        default: ''
    },
    TreeAutoExpandKeys:{
        type: [Array],
        default: ''
    },
    treenodeDataInfo:{
        type: [Object],
        default: {}
    }
 
})

//全局变量
const projectId = ref(useAppState.projectId);
const contract_id = ref(props.contractId)
const treeId = ref(props.primaryKeyId)
const classifys = ref(props.classify)
const wbsTemp_id = ref(props.wbsTempId);
const tenant_id = ref(props.tenantId);
const wbs_type = ref(props.wbsType);
const isStatus = ref(parseInt(props.status))
const listDatas = ref([])
const draw_type = ref(props.drawType)
const tree_AutoExpandKeys = ref(props.TreeAutoExpandKeys)
const treenodeDataInfo=ref(props.treenodeDataInfo)


//表单变量
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: '还原到面板内，并自动展开面板'}
]

//事件
const emit = defineEmits(['renew', 'offsetTop'])

//组件参数变量
const apis = ref({
    dataInfo: wbsApi.getBussDataInfo,
    bussCols: wbsApi.getHtmlBussCols,
    excelHtml: wbsApi.getExcelHtml
})

//深度监听数据
watch(() => [
    props.datas,
], ([datas]) => {
    setFormDataNum(datas)
}, {deep: true})

//监听变量值
watch(() => [
    useAppState.projectId,
    props.contractId,
    props.wbsTempId,
    props.tenantId,
    props.wbsType,
    props.status,
    props.classify,
    props.primaryKeyId,
], ([pid, cid, temp_id, tid, type, status, class_id, tree_id]) => {
    projectId.value = pid
    contract_id.value = cid
    wbsTemp_id.value = temp_id
    tenant_id.value = tid
    wbs_type.value = type
    isStatus.value = parseInt(status)
    classifys.value = class_id
    treeId.value = tree_id
})

//渲染完成
onMounted(() => {
    setFormDataNum(props.datas)
    setTableFormMenu(useAppState.projectInfo)
    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([])
const tableFormItemNode = ref({}) //临时信息

//设置菜单权限数据
const setTableFormMenu = (info) => {
    let newArr = [], infos = getObjValue(info)
    const isOpen = infos['isOpenRandomNumber'] ?? 0
    if (isOpen === 1 && isStatus.value !== 3) {
        newArr.push({label: '插入设计值/频率', key: "design"})
    }
    newArr.push({label: '插入特殊字符', key: "special"})
    newArr.push({label: '关联试验数据', key: "test"})
    newArr.push({label: '关联试验文件', key: "file"})
    newArr.push({label: '公式参数', key: "formula"})
    tableFormMenu.value = newArr
}

//鼠标右键事件
const tableFormRightTap = ({event, KeyName, startPos, endPos, pkeyId}, index) => {
    //存储临时信息
    tableFormItemNode.value = {KeyName, index, startPos, endPos, pkeyId}
    contextMenuRef.value?.showMenu(event, false) //展开菜单
}

//鼠标右键菜单被点击
const handleMenuSelect = ({key}) => {
    if (key === 'design') {
        setInitDesignForm()
        designModalLoading.value = false
        designModal.value = true
    } else if (key === 'special') {
        specialModalShow()
    } else if (key === 'test') {
        testModalLoading.value = false
        testModal.value = true
    } else if (key === 'file') {
        fileModalLoading.value = false
        fileModal.value = true;
    } else if (key === 'formula') {
        formulaModalLoading.value = false
        formulaModal.value = true
    }
}

//插入设计值
const designModal = ref(false)
const formDesignRef = ref(null)
const formDesignModel = ref()

//初始设计值/频率表单
const setInitDesignForm = () => {
    formDesignModel.value = {
        type: 1, design: '', size: '',
        dev: '', key: '', capacity: '',
        pass: '', pkId: ''
    }
}

//设计值频率计算
const designModalLoading = ref(false)
const designModalSave = async () => {
    const {pkeyId, KeyName} = tableFormItemNode.value
    if (pkeyId) {
        designModalLoading.value = true
        //const {design, size} = formDesignModel.value
        const {error, code, data} = await wbsApi.queryFormulaRange({
            ...formDesignModel.value,
            // dev: (!design && !size) ? '±5': '',
            key: KeyName,
            pkId: pkeyId,
        })
        //处理数据
        const res = getObjVal(data)
        if (!error && code === 200 && res) {
            try {
                const refs = await getFormRef(pkeyId)
                const itemFormData = refs?.getFormData()
                Object.keys(data).forEach(key => {
                    itemFormData[key] = data[key]
                })
                refs?.setFormData(itemFormData)
            } catch {
            }
            designModalLoading.value = false
            designModal.value = false
        } else {
            designModalLoading.value = false
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}
//关闭设计值/频率弹窗
const closeDesignModal = () => {
    designModal.value = false
    setInitDesignForm()
}


//插入特殊字符
const specialModal = ref(false)
const specialModalLoading = ref(false)
const specialModalShow = () => {
    specialFormValue.value = ''
    specialModalLoading.value = false
    specialModal.value = true
}

//监听特殊符号输入框的内容
const specialFormValue = ref('')
const specialDiaolgChange = (val) => {
    specialFormValue.value = val
}

//确认插入
const specialRef = ref(null)
const specialNodeClick = async () => {
    specialModalLoading.value = true
    const itemNode = tableFormItemNode.value
    const {KeyName, pkeyId} = itemNode
    try {
        const refs = await getFormRef(pkeyId)
        const itemFormData = refs?.getFormData()
        const {code, val, posVal} = await specialRef.value?.getSpecialNode(itemNode, itemFormData[KeyName])
        if (code === 200 && val) {
            itemFormData[KeyName] = val
            refs?.setFormData(itemFormData)
            specialModalLoading.value = false
            specialModal.value = false
            await nextTick(() => {
                setPosRange(KeyName, posVal)
            })
        } else {
            specialModalLoading.value = false
        }
    } catch (e) {
        specialModalLoading.value = false
    }
}

//关闭插入特殊字符
const specialModalClose = () => {
    specialModalLoading.value = false
    specialModal.value = false
}

//关联试验数据
const testModal = ref(false)
const testModalLoading = ref(false)

//关联试验数据被点击
const itinsertTableId = ref('')
const itinsertTreeId = ref('')
const testTableRowName = ({row, treeId}) => {
    itinsertTableId.value = row.id
    itinsertTreeId.value = treeId
    insertDataLoading.value = false
    insertDataShow.value = true
}

//关闭弹窗
const testModalClose = () => {
    testModal.value = false
    testModalLoading.value = false
}

//选择要插入的实验数据
const insertDataShow = ref(false);
const insertDataLoading = ref(false);

//确定关联试验数据数据
const insertDataRef = ref(null)
const submitinsertData = async () => {
    insertDataLoading.value = true
    const itemNode = tableFormItemNode.value
    const {KeyName, pkeyId} = itemNode
    try {
        const refs = await getFormRef(pkeyId)
        const itemFormData = refs?.getFormData()
        const {code, val, posVal} = await insertDataRef.value?.submitinsertData(itemNode, itemFormData[KeyName])
        if (code === 200 && val) {
            itemFormData[KeyName] = val
            refs?.setFormData(itemFormData)
            insertDataLoading.value = false
            insertDataShow.value = false
            testModal.value = false
            await nextTick(() => {
                setPosRange(KeyName, posVal)
            })
        }
    } catch {
        insertDataLoading.value = false
    }
}

//取消关联数据
const cancelinsertData = async () => {
    insertDataShow.value = false
    insertDataLoading.value = false
}


//关联试验文件
const fileModal = ref(false)
const testFileRefs = ref(null)
//确认关联文件
const fileModalLoading = ref(false)
const savefileModal = async () => {
    fileModalLoading.value = true
    await testFileRefs.value?.savefileSubmit()
    fileModalLoading.value = false
    fileModal.value = false
}

//关闭弹窗
const fileModalClose = () => {
    fileModal.value = false
    fileModalLoading.value = false
}

//公式参数配置
const formulaModal = ref(false)
const formulaRefs = ref(null)

//保存
const formulaModalLoading = ref(false)
const formulaSaveClick = async () => {
    formulaModalLoading.value = true
    await formulaRefs.value?.panelSave()
    formulaModalLoading.value = false
    formulaModal.value = false
}


//关闭
const formulaModalClose = () => {
    formulaModal.value = false
    formulaModalLoading.value = false
}


//窗口化
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'] === '') {
            window.$message.warning('此表单暂无可预览文件')
        } else {
            previewClick(item, items)
        }
    }
}

//删除本表
const tableFormDelLoading = ref(false)
const delClick = async ({pkeyId}) => {
    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()
            }
        } else {
            window?.$message?.warning('已上报的资料，不允许删除')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}
//复制本表相关
const showcopyModal=ref(false)
const copyRefs=ref(null)
const copyModalClose=()=>{
    // copyModal.value=false
}
const isOwntype=ref('1')
const changeType=(type)=>{
    isOwntype.value=type
    console.log( isOwntype.value,' isOwntype.value');
}
const copySaveClick=async()=>{
    //本节点复制
   if(isOwntype.value==='2'){
        const {pkeyId, isTableRender, isTableForm} =  copyItems.value
        if (pkeyId) {
            if (isStatus.value !== 3) {
                if (!isTableRender) {
                    await copeBussTab(pkeyId)
                } else if (!isTableForm) {
                    window?.$message?.warning('暂无表单数据')
                } else if (isTableRender) {
                    copyClickLoading.value = true
                    const isSave = await saveExcelBussData(items, null, false)
                    if (isSave) {
                        await copeBussTab(pkeyId)
                    } else {
                        copyClickLoading.value = false
                        window?.$message?.warning('复制本表操作失败')
                    }
                } else {
                    window?.$message?.warning(`数据异常了, isRenderTableForm: ${isTableRender}, isTableForm: ${isTableForm}, pkeyIds：${pkeyId}`)
                }
            } else {
                window?.$message?.warning('已上报的资料，不允许复制')
            }
        } else {
            window?.$message?.warning('pkeyId为空')
    }
   }else{
    window?.$message?.warning('暂无相关接口')
   }
}
//复制本表
const copyClickModalLoading = ref(false)
const copyClickLoading = ref(false)
const copyClick = async (items) => {
    const {pkeyId, isTableRender, isTableForm} = items
    if (pkeyId) {
        if (isStatus.value !== 3) {
            if (!isTableRender) {
                await copeBussTab(pkeyId)
            } else if (!isTableForm) {
                window?.$message?.warning('暂无表单数据')
            } else if (isTableRender) {
                copyClickLoading.value = true
                const isSave = await saveExcelBussData(items, null, false)
                if (isSave) {
                    await copeBussTab(pkeyId)
                } else {
                    copyClickLoading.value = false
                    window?.$message?.warning('复制本表操作失败')
                }
            } else {
                window?.$message?.warning(`数据异常了, isRenderTableForm: ${isTableRender}, isTableForm: ${isTableForm}, pkeyIds：${pkeyId}`)
            }
        } else {
            window?.$message?.warning('已上报的资料，不允许复制')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
 }
const copyItems=ref([])
//跨节点复制弹窗
// const copyClick =  (items) => {
//     showcopyModal.value=true
//     copyItems.value=items
    
// }

//复制表的请求
const copeBussTab = async (pkeyId) => {
    copyClickLoading.value = true
    const {error, code} = await wbsApi.copeBussTab({
        pkeyId: pkeyId
    })
    copyClickLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        renewData()
    }
}

//隐藏本表
const tableFormHideLoading = ref(false)
const hideClick = async ({pkeyId, isBussShow}) => {
    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
            })
            tableFormHideLoading.value = false
            if (!error && code === 200) {
                window?.$message?.success('操作成功')
                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) => {
    const {pkeyId, isTableForm, isTableRender} = items
    const keyName = `item-${index}-${pkeyId}`
    if (pkeyId) {
        if (isStatus.value !== 3 && isTableForm) {
            uploadModal.value = true
            uploadData.value = {
                projectId: projectId.value,
                contractId: contract_id.value,
                classify: classifys.value,
                pkeyId: pkeyId,
                nodeId: treeId.value
            }
            //获取文件列表
            getBussFileList(pkeyId)
        } else if (!isTableRender) {
            CollapseChange([keyName])
            window?.$message?.warning('请再次点击上传')
        } else if (!isTableForm) {
            window?.$message?.warning('暂无表单数据')
        } else {
            window?.$message?.warning('已上报的资料，不允许上传')
        }
    } else {
        window?.$message?.warning('pkeyId为空')
    }
}

//获取文件列表
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 uploadChange = async ({type}) => {
    if (type === 'success') {
        uploadModal.value = false
        renewData()
    } else if (type === 'del') {
        renewData()
    }
}

//关闭上传附件窗口
const uploadModalClose = () => {
    uploadModal.value = false
}

//单个保存
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 = itemRefs.value
    const index = arrIndex(itemRef, 'pkeyId', pkeyId)
    return itemRef[index].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 (!draw_type.value) {
            if (dom?.offsetTop >= 583 && key) {
                emit('offsetTop', dom?.offsetTop - 583)
            } else {
                emit('offsetTop', dom?.offsetTop)
            }
        } else {
            if (dom.offsetTop >= 424 && key) {
                emit('offsetTop', dom?.offsetTop - 424)
            } 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 "./index.scss";
</style>

<style lang="scss">
@import "./style.scss";
</style>