for_client/src/views/data-fill/wbs.vue

<template>
    <div class="h-full">
        <hc-page-split v-if="wbsTypeTabKey === 'tree'" ref="pageSplitRef">
            <template #left>
                <div class="left-box-container bg-white">
                    <div class="hc-project-box">
                        <div>
                            <el-tooltip
                                v-model:visible="collectListVisible"
                                placement="bottom"
                                effect="light"
                                trigger="manual"
                                :virtual-ref="triggerRef"
                                popper-class="custom-tooltip-pro"
                            >
                                <template #content>
                                    <div class="tooltip-content">
                                        <!-- 新建文件夹按钮 -->
                                        <div class="new-folder" @click.stop="showAddInput = true">
                                            新建文件夹
                                            <HcIcon name="add-circle" class="add-icon cursor-pointer" style="color:white;" />
                                        </div>
        
                                        <!-- 新建文件夹输入框 -->
                                        <div v-if="showAddInput" class="add-input-container">
                                            <el-input 
                                                v-model="newFolderName" 
                                                placeholder="请输入名称" 
                                                class="folder-input"
                                                @keyup.enter="confirmAddFolder"
                                            />
                                            <div class="input-buttons">
                                                <HcIcon name="check" class="confirm-icon cursor-pointer" :loading="confirmAddFolderLoad" @click="confirmAddFolder" />
                                                <HcIcon name="close" class="cancel-icon cursor-pointer" @click="cancelAddFolder" />
                                            </div>
                                        </div>
        
                                        <!-- 文件夹列表容器（带滚动） -->
                                        <div ref="folderListContainer" v-loading="collectLoad" class="folder-list-container">
                                            <div 
                                                v-for="(folder, index) in collectList" 
                                                :key="folder.id" 
                                                class="folder-item"
                                                style="display: flex; align-items: center; gap: 8px;"
                                            >
                                                <!-- 拖拽图标 - 作为拖拽手柄 -->
                                                <HcIcon 
                                                    name="drag-move-2" 
                                                    class="drag-handle cursor-move" 
                                                    style="margin-right: 4px; flex-shrink: 0;"
                                                />
                                                <!-- 编辑状态显示输入框 -->
                                                <el-input
                                                    v-if="folder.isEditing"
                                                    ref="editInput"
                                                    v-model="folder.editableName"
                                                    size="small"
                                                    @blur="handleEditBlur(folder)"
                                                    @keyup.enter="confirmEdit(index, folder)"
                                                />

                                                <!-- 非编辑状态显示文本 -->
                                                <span 
                                                    v-else 
                                                    class="folder-name"
                                                    style="cursor: pointer;"
                                                    @click="selectFolder(folder)"
                                                >
                                                    {{ folder.name }}
                                                </span>
                                                <HcIcon v-if="!folder.isEditing" name="edit" class="cursor-pointer" style="color:white;" @click="startEdit(folder)" />
                                                <HcIcon v-if="folder.isEditing" name="check" class="cursor-pointer" style="color:white;" @click="confirmEdit(index, folder)" />
                                                <HcIcon 
                                                    name="delete-bin" 
                                                    class="delete-icon cursor-pointer" 
                                                    style="color:white;"
                                                    @click.stop="deleteFolder(index, folder)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <HcIcon name="star-half" class="mr-3 cursor-pointer" style="color:rgb(255, 125, 67);" title="文件收藏夹" @click="collectListClick" />
                            </el-tooltip>
                            <template v-if="classType === '1'">
                                <HcIcon v-if="isLookHide" name="eye-off" style="color:#3F9EFF" class="cursor-pointer" @click="lookHideList" />
                                <HcIcon v-else name="eye" style="color:#3F9EFF" class="cursor-pointer" @click="handleClickBack" />
                            </template>
                        </div>
                        <div>
                            <HcIcon v-loading="lookLoading" name="time" class="mr-3 cursor-pointer" style="color:#3F9EFF" @click="lookHistory" />
                            <HcIcon name="article" style="color:gray" class="cursor-pointer" />
                        </div>
                    </div>
                    <div class="hc-tree-box hc-tree-box1">
                        <div class="hc-tree-back-to">
                            <div>
                                <el-link type="primary" @click="gobackHistory">
                                    回到上一次填报部位
                                </el-link>
                                <el-link
                                    type="warning"
                                    class="ml-4"
                                    @click="wbsMapTypeTab"
                                >
                                    导图结构填报
                                </el-link>
                            </div>
                            <div
                                class="back-button"
                                :class="{ scaling: isScaling }"
                                @click="handleClick"
                            >
                                <HcIcon name="arrow-go-back" style="color:#FF7D43" class="cursor-pointer text-18px font-700" />
                            </div>
                        </div>
                        <div class="hc-search-tree-val">
                            <el-input
                                v-model="searchTreeVal"
                                clearable
                                block
                                placeholder="请输入名称关键词检索"
                                @keyup="searchTreeKeyUp"
                            >
                                <template #suffix>
                                    <HcIcon
                                        name="search-2"
                                        ui="text-xl iscusor"
                                        @click="searchTreeClick"
                                    />
                                </template>
                            </el-input>
                        </div>
                        <div
                            v-if="isShowLeft"
                            id="hc-tree-scrollbar"
                            v-loading="treeLoading"
                            class="hc-tree-scrollbar"
                            element-loading-text="获取数据中..."
                        >
                            <el-scrollbar
                                v-show="isSearchTree"
                                class="scroll-bar-right-16"
                            >
                                <HcDataTree
                                    :is-show-collect="true"
                                    :is-show-eye="classType === '1'"
                                    :datas="searchTreeData"
                                    :is-mark="TreeMark"
                                    :menus="ElTreeMenu"
                                   

                                    is-type
                                    :auto-expand-keys="TreeAutoExpandKeys"
                                    
                                    is-counts default-expand-all is-form-date 
                                    :is-show-sync="userInfo?.role_id?.split(',').includes('1123598816738675201')"
                                    @node-tap="wbsElTreeClick"
                                    @menu-tap="ElTreeMenuClick"
                                    @collect="collectClick"
                                    @eye="eyeClick"
                                />
                            </el-scrollbar>
                            <el-scrollbar
                                v-show="!isSearchTree"
                                class="scroll-bar-right-16"
                            >
                                <HcLazyTree
                                    ref="wbstree"
                                    :is-show-collect="true"
                                    :is-show-eye="classType === '1'"
                                    :is-show-sync="userInfo?.role_id?.split(',').includes('1123598816738675201')"
                                    is-form-date
                               
                                    :auto-expand-keys="TreeAutoExpandKeys"
                                    :is-mark="TreeMark"
                                    :menus="ElTreeMenu"
                                    is-counts
                                    is-type
                                    show-checkbox
                                    check-strictly
                                    @load="treeLoadNode"
                                    @menu-tap="ElTreeMenuClick"
                                    @node-loading="ElTreeNodeLoading"
                                    @node-tap="wbsElTreeClick"
                                    @check="ElTreeNodeCheck"
                                    @collect="collectClick"
                                    @eye="eyeClick"
                                />
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="hc-tree-foot-tip-box">
                        <div class="dot-view green">已审批</div>
                        <div class="dot-view black">未填报</div>
                        <div class="dot-view orange">已填报-待审批</div>
                        <div class="dot-view blue">已填报-未上报</div>
                    </div>
                </div>
            </template>
   
            <hc-tab-card
                :tabs="authBtnTabdata"
                :tab-key="authBtnTabKey"
                @change="authBtnTabClick"
            >
                <template #extra>
                    <div v-if="ListItemDatas.length > 0 && isTemplateType" class="mr-2 flex items-center justify-center whitespace-nowrap">
                        <div class="font-500">  文件题名</div>
                        <div class="title-input h-[30px] flex items-center leading-[30px]" :style="{ width: titleInput ? '' : '100px' }">{{ titleInput }}</div>
                    </div>
                        
                    <HcTooltip keys="node_base_data">
                        <el-button
                            v-if="isTemplateType"
                            hc-btn
                            type="primary"
                            :disabled="
                                !primaryKeyId
                            "
                              
                            @click="nodeBaseDataClick"
                        >
                            节点基础数据
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="wbs_views_sort_btn">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            :disabled="ListItemDatas.length <= 0 || (nodeDataInfo?.colorStatus !== 1 && nodeDataInfo?.colorStatus !== 2)"


                            hc-btn
                            type="primary"
                            @click="sortFormClick"
                        >
                            排序
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="wbs_views_node_save_btn">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            :loading="nodeSaveLoading"
                            hc-btn
                            type="primary"
                            @click="NodeSaveClick"
                        >
                            辅助保存
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="wbs_views_drawings">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            :disabled="
                                nodeDataInfo?.drawingsId === -1
                                    || nodeDataInfo?.drawingsId === null
                            "
                            hc-btn
                            color="#e03997"
                            @click="viewsDrawings"
                        >
                            图纸
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="wbs_preview">
                        <el-button
                            :disabled="NodeStatus === '1'"
                            :loading="bussPdfsLoading"
                            hc-btn
                            color="#A16222"
                            @click="bussPdfsClick"
                        >
                            预览
                        </el-button>
                    </HcTooltip>
                    <el-button
                        hc-btn
                        color="#A16222"
                        :disabled="isCanadd"
                        @click="attachmentModalShow"
                    >
                        查看附件
                    </el-button>
                    <el-button
                        hc-btn
                        :disabled="isCanadd"
                        color="#567722"
                        @click="addFilelist"
                    >
                        上传附件
                    </el-button>
                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_report">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            :disabled="
                                NodeStatus === '3' || NodeStatus === '1'
                            "
                            :loading="reportLoading"
                            hc-btn
                            color="#FF976A"
                            style="color: white"
                            @click="reportModalClick"
                        >
                            上报
                        </el-button>
                    </HcTooltip>
                    <HcTooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            hc-btn
                            :laoding="abolishLoaing"
                            color="#FF976A"
                            style="color: white"
                            @click="abolishOneClick"
                        >
                            撤回上报流程
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="wbs_views_sync_data_btn">
                        <el-button
                            v-if="
                                authBtnTabKey === '2'
                                    && nodeDataInfo?.nodeClass !== 2
                            "
                            hc-btn
                            color="#37c0fe"
                            style="color: white"
                            :loading="syncdataloading"
                            @click="syncdata"
                        >
                            同步质检资料
                        </el-button>
                        <el-button
                            v-if="nodeDataInfo?.majorDataType == 2"
                            hc-btn
                            color="#12C060"
                            style="color: white"
                            :loading="syncWorkloading"
                            @click="syncWork"
                        >
                            同步工序资料
                        </el-button>
                    </HcTooltip>

                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_save">
                        <el-button
                            v-if="nodeDataInfo?.nodeClass !== 2"
                            :disabled="
                                NodeStatus === '3'
                                    || ListItemDatas.length <= 0
                            "
                            :loading="tableFormSaveLoading"
                            hc-btn
                            color="#12C060"
                            style="color: white; font-weight: bold"
                            @click="tableFormSaveClick"
                        >
                            保存数据
                        </el-button>
                    </HcTooltip>
                </template>
                <el-scrollbar
                    v-if="ListItemDatas.length > 0"
                    ref="ListItemScrollRef"
                >
                    <CollapseForm
                        ref="ListItemRef"
                        :contract-info="
                            contractInfo?.contractType === 2
                                ? nodeDataInfo?.contractIdRelation
                                : contractId
                        "
                        :tree-auto-expand-keys="TreeAutoExpandKeys"
                        :classify="authBtnTabKey"
                        :contract-id="contractId"
                        :datas="ListItemDatas"
                        :draw-type="!isDrawType"
                        :primary-key-id="primaryKeyId"
                        :status="NodeStatus"
                        :tenant-id="userInfo?.tenant_id"
                        :wbs-temp-id="
                            projectInfo?.referenceWbsTemplateIdTrial
                        "
                        :wbs-type="2"
                        :treenode-data-info="nodeDataInfo"
                        :newlistdata="newlistdata"
                        @offset-top="ListItemOffsetTop"
                        @renew="getTableDataAll"
                        @get-list="searchNodeAllTable1"
                    />
                </el-scrollbar>
                <hc-empty v-else title="暂无表单" />
            </hc-tab-card>
        </hc-page-split>
        <hc-new-card
            v-if="wbsTypeTabKey === 'map'"
            id-ref="wbs-node-tree-card-target"
        >
            <template #header>
                <HcTooltip keys="wbs_views_division_btn">
                    <el-button
                        class="mr-10"
                        hc-btn
                        type="primary"
                        @click="divisionClick"
                    >
                        <HcIcon :line="false" name="node-tree" />
                        <span>划分变更</span>
                    </el-button>
                </HcTooltip>
                <HcNewSwitch
                    v-if="isDrawer"
                    :datas="authBtnTabdata"
                    :keys="authBtnTabKey"
                    :round="false"
                    size="default"
                    @change="authBtnTabClick"
                />
            </template>
            <template #extra>
                <HcNewSwitch
                    :datas="wbsTypeTab"
                    :keys="wbsTypeTabKey"
                    size="default"
                    @change="wbsTypeTabChange"
                />
            </template>
            <NodeTree
                ref="NodeTreeRef"
                :accordion="NodeTreeAccordion"
                :auto-expand-keys="TreeAutoExpandKeys"
                :contract-id="contractId"
                :is-mark="TreeMark"
                :menus="ElTreeMenu"
                :project-id="projectId"
                @menu-click="NodeTreeMenuClick"
                @node-click="NodeTreeClick"
                @node-dbl-click="NodeTreeDblClick"
            />
            <template #action>
                <div class="hc-tree-mp-tip-box">
                    <div class="dot-view green">已审批</div>
                    <div class="dot-view black">未填报</div>
                    <div class="dot-view orange">已填报-待审批</div>
                    <div class="dot-view blue">已填报-未上报</div>
                </div>
            </template>
            <HcDrawer
                v-model="isDrawer"
                to-id="wbs-node-tree-card-target"
                is-close
                @close="drawerClose"
            >
                <!-- 清表列表 -->
                <el-scrollbar
                    v-if="ListItemDatas.length > 0"
                    ref="ListItemScrollRef"
                >
                    <CollapseForm
                        ref="ListItemsRef"
                        :contract-info="
                            contractInfo?.contractType === 2
                                ? nodeDataInfo?.contractIdRelation
                                : contractId
                        "
                        :classify="authBtnTabKey"
                        :contract-id="contractId"
                        :datas="ListItemDatas"
                        :draw-type="!isDrawType"
                        :primary-key-id="primaryKeyId"
                        :status="NodeStatus"
                        :tenant-id="userInfo?.tenant_id"
                        :wbs-temp-id="projectInfo?.referenceWbsTemplateIdTrial"
                        :wbs-type="2"
                        @offset-top="ListItemOffsetTop"
                        @renew="getTableDataAll"
                    />
                </el-scrollbar>
                <hc-empty v-else text="暂无表单" />
                <!-- 底部按钮区域 -->
                <template #action>
                    <hc-tooltip v-if="NodeStatus !== '3'" keys="wbs_save">
                        <el-button
                            :disabled="
                                NodeStatus === '3' || ListItemDatas.length <= 0
                            "
                            :loading="tableFormSaveLoading"
                            hc-btn
                            type="primary"
                            @click="tableFormSaveClick"
                        >
                            <HcIcon name="save" />
                            <span>保存</span>
                        </el-button>
                    </hc-tooltip>
                    <hc-tooltip v-if="NodeStatus !== '3'" keys="wbs_report">
                        <el-button
                            :disabled="NodeStatus === '3' || NodeStatus === '1'"
                            :loading="reportLoading"
                            hc-btn
                            @click="reportModalClick"
                        >
                            <HcIcon name="send-plane-2" />
                            <span>上报</span>
                        </el-button>
                    </hc-tooltip>
                    <hc-tooltip keys="wbs_preview">
                        <el-button
                            :disabled="NodeStatus === '1'"
                            :loading="bussPdfsLoading"
                            hc-btn
                            @click="bussPdfsClick"
                        >
                            <HcIcon name="eye" />
                            <span>预览</span>
                        </el-button>
                    </hc-tooltip>
                    <hc-tooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
                        <el-button hc-btn>
                            <HcIcon name="arrow-go-back" />
                            <span>撤回上报流程</span>
                        </el-button>
                    </hc-tooltip>
                    <hc-tooltip keys="wbs_views_drawings">
                        <el-button
                            :disabled="!nodeDataInfo?.fileUrl"
                            hc-btn
                            @click="viewsDrawings"
                        >
                            <HcIcon name="image" />
                            <span>图纸</span>
                        </el-button>
                    </hc-tooltip>
                    <el-button hc-btn @click="attachmentModalShow">
                        <HcIcon name="file" />
                        <span>附件</span>
                    </el-button>
                    <el-button hc-btn @click="drawerClose">
                        <HcIcon name="close" />
                        <span>关闭填报页面</span>
                    </el-button>
                </template>
            </HcDrawer>
        </hc-new-card>

        <!-- 查看图纸 -->
        <hc-drag-modal
            :is-show="drawingsShow"
            close-icon
            lefts="145"
            title="查看图纸"
            tops="100"
            ui="hc-image-preview-box"
            widths="380px"
            @close="drawingsClose"
        >
            <div class="hc-image-preview-view">
                <!-- <el-image-viewer :url-list="[nodeDataInfo.fileUrl]" /> -->
                <el-image :src="drawList" />
            </div>
        </hc-drag-modal>

        <!-- 编辑节点 -->
        <hc-new-dialog
            v-model="editNodeModal"
            :loading="editNodeLoading"
            title="编辑节点"
            widths="600px"
            @save="editNodeClick"
        >
            <el-form
                ref="formEditNodeRef"
                :model="formEditNodeModel"
                :rules="formEditNodeRules"
                label-width="auto"
                size="large"
            >
                <el-form-item label="节点名称" prop="title">
                    <el-input
                        v-model="formEditNodeModel.title"
                        placeholder="请输入节点名称"
                    />
                </el-form-item>
                <el-form-item label="上级节点">
                    <el-input
                        v-model="formEditNodeModel.parent.title"
                        disabled
                    />
                </el-form-item>
                <el-form-item label="节点类型">
                    <el-select
                        v-model="formEditNodeModel.nodeType"
                        :disabled="formEditNodeModel.isCustom !== 1"
                        block
                    >
                        <el-option
                            v-for="item in nodeTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="digitizeTime">
                    <el-date-picker
                        v-model="formEditNodeModel.digitizeTime"
                        class="block"
                        format="YYYY-MM-DD"
                        placeholder="请选择"
                        type="date"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item
                    v-if="formEditNodeModel.nodeClass == 2"
                    label="内业资料类型"
                    prop="majorDataType"
                >
                    <el-select
                        v-model="formEditNodeModel.majorDataType"
                        block
                    >
                        <el-option
                            v-for="item in majorDataTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="formEditNodeModel.notExsitChild"
                    label="标准分类"
                    prop="className"
                >
                    <el-select
                        v-model="formEditNodeModel.className"
                        block
                        @change="changeStandType"
                    >
                        <el-option
                            v-for="item in standardTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="formEditNodeModel.notExsitChild"
                    label="单位名称"
                    prop="unitName"
                >
                    <el-select v-model="formEditNodeModel.unitName" block>
                        <el-option
                            v-for="item in unitNameOptions"
                            :key="item.value"
                            :label="item.dictValue"
                            :value="item.dictKey"
                        />
                    </el-select>
                </el-form-item>
                <el-row v-if="formEditNodeModel.nodeClass === 2" :gutter="24">
                    <el-col :span="12">
                        <el-form-item prop="unitNum" label="单元个数">
                            <el-input-number
                                v-model="formEditNodeModel.unitNum"
                                placeholder="请输入单元个数"
                                :controls="false"
                                :min="0"
                                :precision="0"
                                class="w-100"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="excellentNum" label="优良个数">
                            <el-input-number
                                v-model="formEditNodeModel.excellentNum"
                                placeholder="请输入优良个数"
                                :controls="false"
                                :min="0"
                                :precision="0"
                                class="w-100"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-tooltip
                    v-if="formEditNodeModel?.isReferenceNumber === 0"
                    class="item"
                    effect="light"
                    content="当前合同段未开启引用标号功能，表格无法获取，请联系维护人员处理"
                    placement="top"
                >
                    <el-form-item label="划分编号">
                        <el-input
                            v-model="formEditNodeModel.partitionCode"
                            placeholder="请输入划分编号"
                        />
                    </el-form-item>
                </el-tooltip>
                <el-form-item v-else label="划分编号">
                    <el-input
                        v-model="formEditNodeModel.partitionCode"
                        placeholder="请输入划分编号"
                    />
                </el-form-item>

                <el-form-item class="hc-position-input-icon" label="模板位置">
                    <el-input
                        v-model="formEditNodeModel.position"
                        :autosize="{ minRows: 3, maxRows: 6 }"
                        type="textarea"
                    />
                    <el-tooltip content="一键复制模板位置">
                        <HcIcon
                            name="file-copy-2"
                            @click="
                                copyPositionText(formEditNodeModel.position)
                            "
                        />
                    </el-tooltip>
                </el-form-item>
                <el-form-item class="hc-position-input-icon mt-2" label="系统模板">
                    <el-input
                        v-model="formEditNodeModel.privateTemplate"
                        :autosize="{ minRows: 3, maxRows: 6 }"
                        type="textarea"
                    />
                    <el-tooltip content="一键复制系统模板">
                        <HcIcon
                            name="file-copy-2"
                            @click="
                                copyPositionText(formEditNodeModel.privateTemplate)
                            "
                        />
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </hc-new-dialog>

        <!-- 复制节点 -->
        <hc-new-dialog
            v-model="copyNodeModal"
            :loading="copyNodeLoading"
            :widths="copyNodeTabKey === '1' ? '600px' : '1200px'"
            loading-text="复制节点中，请耐心等待..."
            title="复制节点"
        >
            <div class="header-new-switch">
                <el-form
                    ref="formCopyNodeModelRef"
                    :model="formCopyNodeModel"
                    label-position="left"
                    :rules="formCopyNodeModelRules"
                    label-width="auto"
                    size="large"
                >
                    <el-form-item
                        label="是否复制数据"
                        prop="isCopyData"
                        style="margin-bottom: 0"
                    >
                        <!-- <el-input v-model="formCopyNodeModel.classify" placeholder="请输入节点名称"/> -->
                        <el-radio-group v-model="isCopyData">
                            <el-radio :value="1">是</el-radio>
                            <el-radio :value="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="isCopyData === 1"
                        label="所属方"
                        prop="classify"
                        style="margin-bottom: 0"
                    >
                        <!-- <el-input v-model="formCopyNodeModel.classify" placeholder="请输入节点名称"/> -->
                        <el-checkbox-group v-model="classifyList">
                            <el-checkbox value="施工">施工</el-checkbox>
                            <el-checkbox value="监理">监理</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="copyNodeTabKey === '1'" class="copy-node-form-box">
                <el-form
                    ref="formCopyNodeModelRef"
                    :model="formCopyNodeModel"
                    :rules="formCopyNodeModelRules"
                    label-width="auto"
                    size="large"
                >
                    <el-form-item
                        v-if="copyNodeTabKey === '1'"
                        label="节点名称"
                        prop="title"
                        style="margin-bottom: 0"
                    >
                        <el-input
                            v-model="formCopyNodeModel.title"
                            placeholder="请输入节点名称"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="copyNodeTabKey === '1'"
                        label="划分编号"
                        prop="partitionCode"
                        style="margin-top: 10px"
                    >
                        <el-input
                            v-model="formCopyNodeModel.partitionCode"
                            placeholder="请输入划分编号"
                        />
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="copyNodeTabKey === '3'" class="copy-node-form-box">
                <el-form
                    ref="formCopyNodeModelRef"
                    :model="formCopyNodeModel"
                    :rules="formCopyNodeModelRules"
                    label-width="auto"
                    size="large"
                >
                    <el-form-item
                        label="所属方"
                        prop="classify"
                        style="margin-bottom: 0"
                    >
                        <!-- <el-input v-model="formCopyNodeModel.classify" placeholder="请输入节点名称"/> -->
                        <el-checkbox-group v-model="classifyList">
                            <el-checkbox value="施工">施工</el-checkbox>
                            <el-checkbox value="监理">监理</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="copyNodeTabKey !== '1'" class="copy-node-many-box">
                <div class="copy-node-many-tree">
                    <el-scrollbar>
                        <hc-lazy-tree
                            :auto-expand-keys="TreeAutoExpandKeys"
                            is-type
                            @load="treeLoadNode"
                            @node-tap="copyNodeElTreeClick"
                        />
                    </el-scrollbar>
                </div>
                <div class="copy-node-many-table">
                    <el-scrollbar>
                        <el-table :data="copyNodeTable" border>
                            <el-table-column
                                label="复制到的位置"
                                prop="title"
                            />
                            <el-table-column
                                v-if="copyNodeTabKey === '2'"
                                label="节点名称"
                                prop="nodeName"
                            >
                                <template #default="{ row }">
                                    <el-form
                                        ref="copyNodeTableRef"
                                        :model="row"
                                        :rules="copyNodeTableRules"
                                        label-width="0"
                                        size="large"
                                    >
                                        <el-form-item
                                            prop="nodeName"
                                            style="margin-bottom: 0"
                                        >
                                            <el-input
                                                v-model="row.nodeName"
                                                placeholder="请输入节点名称"
                                            />
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column
                                v-if="copyNodeTabKey === '2'"
                                label="划分编号"
                                prop="partitionCode"
                            >
                                <template #default="{ row }">
                                    <el-form
                                        ref="copyNodeTableRef"
                                        :model="row"
                                        :rules="copyNodeTableRules"
                                        label-width="0"
                                        size="large"
                                    >
                                        <el-form-item
                                            prop="partitionCode"
                                            style="margin-bottom: 0"
                                        >
                                            <el-input
                                                v-model="row.partitionCode"
                                                placeholder="请输入划分编号"
                                            />
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="操作"
                                prop="action"
                                width="120"
                            >
                                <template #default="{ _, $index }">
                                    <el-button
                                        plain
                                        type="danger"
                                        @click="copyNodeTableDel($index)"
                                    >
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-scrollbar>
                </div>
            </div>
            <template #footer>
                <div class="lr-dialog-footer">
                    <div class="left">
                        <template
                            v-for="(item, index) in copyNodeTab"
                            :key="index"
                        >
                            <el-button
                                v-if="item?.key === copyNodeTabKey"
                                plain
                                size="large"
                                type="primary"
                                @click="copyNodeTabChange(item?.key)"
                            >
                                {{ item.name }}
                            </el-button>
                            <el-button
                                v-else
                                bg
                                size="large"
                                text
                                @click="copyNodeTabChange(item?.key)"
                            >
                                {{ item.name }}
                            </el-button>
                        </template>
                    </div>
                    <div class="right">
                        <el-button
                            :disabled="copyNodeLoading"
                            size="large"
                            @click="copyNodeModal = false"
                        >
                            取消
                        </el-button>
                        <el-button
                            :loading="copyNodeLoading"
                            hc-btn
                            type="primary"
                            @click="copyNodeClick"
                        >
                            提交
                        </el-button>
                    </div>
                </div>
            </template>
        </hc-new-dialog>

        <!-- 新增子节点 -->
        <hc-new-dialog
            v-model="addNodeModal"
            :loading="addNodeLoading"
            loading-text="新增节点中，请耐心等待..."
            title="新增子节点"
            widths="720px"
            is-table
        >
            <el-alert
                :closable="false"
                title="双击节点，可编辑节点名称，编辑完成后，请按回车或输入框消失后，再点提交"
                type="warning"
            />
            <HcTreeNode
                v-if="addTreeNodeType === '1'"
                :node-id="addTreeNodeId"
                :old-id="addTreeNodeOldId"
                :contract-id="contractId"
                :wbs-id="projectInfo.referenceWbsTemplateId"
                :project-id="projectId"
                :is-custom="isCustom"
                
                @check-change="addTreeNodeCheckChange"
            />
            <HcTreeNode
                v-if="addTreeNodeType === '3'"
                :node-id="addTreeNodeId"
                :old-id="addTreeNodeOldId"
                :contract-id="contractId"
                :wbs-id="projectInfo.referenceWbsTemplateId"
                :project-id="projectId"
                :is-custom="isCustom"
                :strictly="true"
              
                :only-children-check="true"
                @check-change="addTreeNodeCheckChange"
            />
            <HcTreeNode
                v-if="addTreeNodeType === '2'"
                :node-id="addTreeNodeId"
                :old-id="addTreeNodeOldId"
                :contract-id="contractId"
                :wbs-id="projectInfo.referenceWbsTemplateId"
                :project-id="projectId"
                strictly
               
                :is-custom="isCustom"
              
              
                @check-change="addTreeNodeCheckChange"
            />
            <template #footer>
                <div class="lr-dialog-footer">
                    <div class="left flex items-center">
                        <div class="mr-4">选中方式:</div>
                        <el-radio-group v-model="addTreeNodeType">
                            <el-radio value="3">当前及子节点</el-radio>
                            <el-radio class="ml-4" value="2">
                                仅当前节点
                            </el-radio>
                            <el-radio value="1">当前及父节点</el-radio>
                            <!-- <el-radio value="1">当前子及节点</el-radio> -->
                        </el-radio-group>
                    </div>
                    <div class="right">
                        <el-button size="large" @click="addNodeModal = false">
                            取消
                        </el-button>
                        <el-button
                            :loading="addNodeLoading"
                            hc-btn
                            type="primary"
                            @click="addNodeClick"
                        >
                            提交
                        </el-button>
                    </div>
                </div>
            </template>
        </hc-new-dialog>

        <!-- 新增自定义节点 -->
        <hc-new-dialog
            v-model="addNodeModalCus"
            :loading="addNodeLoadingCus"
            loading-text="新增节点中，请耐心等待..."
            title="新增自定义节点（水利工程）"
            widths="720px"
            @save="addNodeClickCur"
        >
            <el-form
                ref="formWaterNodeRef"
                :model="formWaterNodeModel"
                :rules="formWaterNodeRules"
                label-width="auto"
                size="large"
                label-position="left"
            >
                <el-form-item label="节点名称" prop="nodeName">
                    <el-input
                        v-model="formWaterNodeModel.nodeName"
                        placeholder="请输入节点名称"
                    />
                </el-form-item>

                <el-form-item label="节点类型" prop="nodeType">
                    <el-select v-model="formWaterNodeModel.nodeType" block>
                        <el-option
                            v-for="item in nodeTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="编号" prop="number">
                    <el-input
                        v-model="formWaterNodeModel.number"
                        placeholder="请输入编号"
                    />
                </el-form-item>
            </el-form>
        </hc-new-dialog>
        <!-- 新增自定义节点-数字化文件 -->
        <hc-new-dialog
            v-model="addNodeModalData"
            :loading="addNodeLoadingData"
            loading-text="新增节点中，请耐心等待..."
            title="新增自定义节点（数字化文件）"
            widths="720px"
            @save="addNodeClickData"
        >
            <el-form
                ref="formDataNodeRef"
                :model="formDataNodeModel"
                :rules="formDataNodeRules"
                label-width="auto"
                size="large"
            >
                <el-form-item label="节点名称" prop="nodeName">
                    <el-input
                        v-model="formDataNodeModel.nodeName"
                        placeholder="请输入节点名称"
                    />
                </el-form-item>

                <el-form-item label="节点类型" prop="nodeType">
                    <el-select v-model="formDataNodeModel.nodeType" block>
                        <el-option
                            v-for="item in nodeTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否含单元评定" prop="isClassifition">
                    <el-radio-group v-model="formDataNodeModel.isClassifition">
                        <el-radio :value="1">是</el-radio>
                        <el-radio :value="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="时间" prop="digitizeTime">
                    <el-date-picker
                        v-model="formDataNodeModel.digitizeTime"
                        class="block"
                        format="YYYY-MM-DD"
                        placeholder="请选择"
                        type="date"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item
                    label="内业资料类型"
                    prop="majorDataType"
                >
                    <el-select
                        v-model="formDataNodeModel.majorDataType"
                        block
                    >
                        <el-option
                            v-for="item in majorDataTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="formDataNodeModel.isClassifition === 1"
                    label="标准分类"
                    prop="className"
                >
                    <el-select
                        v-model="formDataNodeModel.className"
                        block
                        @change="changeStandType"
                    >
                        <el-option
                            v-for="item in standardTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="formDataNodeModel.isClassifition === 1"
                    label="单元名称"
                    prop="unitName"
                >
                    <el-select v-model="formDataNodeModel.unitName" block>
                        <el-option
                            v-for="item in unitNameOptions"
                            :key="item.value"
                            :label="item.dictValue"
                            :value="item.dictKey"
                        />
                    </el-select>
                </el-form-item>
                <el-row
                    v-if="formDataNodeModel.isClassifition === 1"
                    :gutter="24"
                >
                    <el-col :span="12">
                        <el-form-item prop="unitNum" label="单元个数">
                            <el-input-number
                                v-model="formDataNodeModel.unitNum"
                                placeholder="请输入单元个数"
                                :controls="false"
                                :min="0"
                                :precision="0"
                                class="w-100"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="excellentNum" label="优良个数">
                            <el-input-number
                                v-model="formDataNodeModel.excellentNum"
                                placeholder="请输入优良个数"
                                :controls="false"
                                :min="0"
                                :precision="0"
                                class="w-100"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </hc-new-dialog>

        <!-- 调整排序 -->
        <hc-new-dialog
            v-model="sortNodeModal"
            :loading="sortNodeLoading"
            title="调整排序"
            widths="700px"
            @save="sortNodeClick"
        >
            <el-alert
                :closable="false"
                title="可拖动排序，也可在后面点击图标，切换排序"
                type="warning"
            />
            <div class="sort-node-body-box list-group header">
                <div class="list-group-item">
                    <div class="index-box">序号</div>
                    <div class="title-box">节点名称</div>
                    <div class="icon-box">排序</div>
                </div>
            </div>
            <Draggable
                :list="sortNodeData"
                class="sort-node-body-box list-group"
                ghost-class="ghost"
                item-key="id"
                @end="sortNodeDrag = false"
                @start="sortNodeDrag = true"
            >
                <template #item="{ element, index }">
                    <div class="list-group-item">
                        <div class="index-box">{{ index + 1 }}</div>
                        <div class="title-box">{{ element.title }}</div>
                        <div class="icon-box">
                            <span class="icon" @click="downSortClick(index)">
                                <HcIcon name="arrow-down" ui="text-lg" />
                            </span>
                            <span class="icon" @click="upSortClick(index)">
                                <HcIcon name="arrow-up" ui="text-lg" />
                            </span>
                        </div>
                    </div>
                </template>
            </Draggable>
        </hc-new-dialog>

        <!-- 批量上报审批 -->
        <hc-report-modal
            :addition="reportAddition"
            :contract-id="
                contractInfo?.contractType == 2
                    ? nodeDataInfo?.contractIdRelation
                    : contractId
            "
            :flow-contract-id="nodeDataInfo?.contractId"
            :ids="reportIds"
            :table-owner="authBtnTabKey"
            :classify-type="classType"
            :project-id="projectId"
            :show="showReportModal"
            :task-name="reportTaskName"
            :type-data="reportTypeData"
            title="批量上报审批"
            type="wbs"
            url="informationWriteQuery/taskOne"
            @finish="showReportFinish"
            @hide="showReportModal = false"
        />

        <!-- 查看附件 -->
        <hc-new-dialog
            v-model="attachmentModal"
         
            is-table
            title="附件列表"
            widths="780px"
        >
            <div
                v-if="attachmentList.length > 0"
                v-loading="attachmentListLoaing"
            >
                <div class="mb-1 p-2">
                    <span class="text-orange">按住鼠标拖动文件可进行附件列表排序</span>
                </div>
                <div
                    v-for="item in attachmentList"
                    :key="item.id"
                    class="hc-attachment-card"
                    :data-node-id="item.id" 
                >
                    <div class="hc-attachment-header">
                        {{ item?.nodeName }}
                        <!-- <el-button type="success" :loading="saveFileOrderLoad" style="float:right" @click="saveFileOrder">确定排序</el-button> -->
                    </div>
                    <div 
                        :ref="setAttachmentListRef"
                        class="hc-attachment-content"
                    >
                        <div
                            v-for="item1 in item.fileList"
                            :key="item1.id"
                            class="hc-attachment-item"
                        >
                            <div class="hc-attachment-file-name">
                                <HcIcon name="drag-move-2" class="text-blue" />
                                <HcIcon name="attachment" class="ml-2" />
                                <div class="name">{{ item1?.name }}</div>
                            </div>
                            <div class="hc-attachment-btn-box">
                                <el-button
                                    plain
                                    size="small"
                                    type="primary"
                                    @click="previewFile(item1)"
                                >
                                    <HcIcon name="eye" />
                                    <span>预览</span>
                                </el-button>
                                <el-button
                                    v-if="NodeStatus !== 3 || nodeDataInfo?.nodeClass === 2"
                                    plain
                                    size="small"
                                    style="margin-left: 16px"
                                    type="danger"
                                    :loading="item1?.loading"
                                    @click="delFile(item1)"
                                >
                                    <HcIcon name="close" />
                                    <span>删除</span>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button @click="attachmentModal = false">关闭</el-button>
                <el-button type="primary" :loading="saveFileOrderLoad" :disabled="attachmentList.length === 0" @click="saveFileOrder">确定排序</el-button>
            </template>
        </hc-new-dialog>
        <!-- 上传文件 -->
        <hc-new-dialog
            v-model="uploadModal"
            :footer="false"
            title="上传文件"
            widths="38rem"
          
            @close="uploadModalClose"
        >
            <div class="mb-4">
                <span style="color: red">*</span> 选择附件类型：
                <el-select
                    v-model="typevalue"
                    filterable
                    placeholder="请选择"
                    style="width: 240px"
                    clearable
                    @change="changeType"
                >
                    <el-option
                        v-for="item in typeoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <HcUpload
                :datas="uploadData"
                :file-list="fileListData"
                :is-canupload="false"
                action="#"
               
              
                :auto-upload="false"
                :typevalue="typevalue"
                @change="uploadChange"
                @close="uploadModalClose"
                @update="uploadUpdate"
            />
        </hc-new-dialog>

        <!-- 表单排序 -->
        <hc-new-dialog
            v-model="sortFormShow"
            is-table
            title="排序"
            widths="800px"
            is-footer-center
            @close="sortFormClose"
        >
            <hc-table
                ref="tableSortFormRef"
                :column="tableSortFormColumn"
                :datas="tableSortFormData"
                is-row-drop
                is-sort
                quick-sort
                @row-drop="sortFormDropTap"
                @row-sort="rowSortFormTap"
            />
            <template #footer>
                <el-button hc-btn @click="sortFormClose">取消</el-button>
                <el-button
                    hc-btn
                    type="primary"
                    :loading="sortFormLoading"
                    @click="sortFormSubmit"
                >
                    提交
                </el-button>
            </template>
        </hc-new-dialog>
        <!-- 节点基础数据 -->
        <hc-new-dialog
            v-model="nodeBaseDataModalDialog"
            title="节点基础数据"
            widths="800px"
            is-footer-center
            :loading="nodeBaseDataLoad"
            @close="nodeBaseDataModalClose"
            @save="nodeBaseDataModalSave"
        >
            <template #header>
                <div class="flex justify-between text-orange">
                    <span>提示: 若填写框没有内容，则没有该节点类型。编保存后，需再次保存后才能生效。</span>
                    <el-button type="success" size="small" @click="resetForm">刷新</el-button>
                </div>
            </template>
            <el-form :model="autoFormData" label-width="120px" inline>
                <el-form-item label="单位工程类型：" prop="unit">
                    <el-input v-model="autoFormData.unit" />
                </el-form-item>
                <el-form-item label="单位工程：" prop="subUnit">
                    <el-input v-model="autoFormData.subUnit" />
                </el-form-item>
                <el-form-item label="分部工程：" prop="division">
                    <el-input v-model="autoFormData.division" />
                </el-form-item>
                <el-form-item label="子分部工程：" prop="subDivision">
                    <el-input v-model="autoFormData.subDivision" />
                </el-form-item>
                <el-form-item label="分项工程：" prop="item">
                    <el-input v-model="autoFormData.item" />
                </el-form-item>
                <el-form-item label="子分项工程：" prop="subItem">
                    <el-input v-model="autoFormData.subItem" />
                </el-form-item>
                <el-form-item label="工序：" prop="processes">
                    <el-input v-model="autoFormData.processes" />
                </el-form-item>
            </el-form>
        </hc-new-dialog>
        <!-- 添加到收藏夹 -->
        <hc-new-dialog
            v-model="collectDialog"
            title="添加到文件夹"
          
            is-footer-center
            :loading="saveCollectLoad"
            :footer="collectList.length > 0"
            @close="collectModalClose"
            @save="collectModalSave"
        >
            <el-form
                v-if="collectList.length > 0"
                ref="collectFormRef"
                :model="collectForm"
                :rules="collectRules"
            >
                <el-form-item label="文件夹" prop="id">
                    <el-select v-model="collectForm.id" v-loading="collectLoad" placeholder="请选择" clearable @change="checkCollect">
                        <el-option v-for="item in collectList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-alert v-else title="请先创建文件夹" type="warning" :closable="false" />
        </hc-new-dialog>
        <JumpTreeDialog
            v-model="moveDialogShow"
            :contract-id="contractId"
            :class-type="classType"
            :auth-btn-tab-key="authBtnTabKey"
            :primary-key-id=" primaryKeyId"
            :tree-auto-expand-keys="TreeAutoExpandKeys"
            @save="moveSaveClick"
        />
    </div>
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import { HcIsButton } from '~src/plugins/IsButtons'
import CollapseForm from './collapse-form/index.vue'
import NodeTree from './components/nodeTree/index.vue'
import HcTreeNode from './components/HcTreeNode.vue'
import { HcUploadFileApi } from 'hc-vue3-ui'
import { getStoreValue, setStoreValue } from '~src/utils/storage'
import { getDictionaryData } from '~uti/tools'
import { getChildList } from '~api/other'
import Sortable from 'sortablejs'
import {
    arrToKey,
    deepClone,
    formValidate,
    getArrValue,
    getObjVal,
    getObjValue,
    isNullES,
    isString,
    setCopyText,
} from 'js-fast-way'
import {
    eVisaTaskCheckApi,
    getDictionary,
    getDictionaryBiz,
    userConfigSave,
} from '~api/other'
import wbsApi from '~api/data-fill/wbs'
import queryApi from '~api/data-fill/query'
import nodeBaseApi from '~api/data-fill/nodebaseinfo'
import { useClick } from 'hc-vue3-ui'
import Draggable from 'vuedraggable'
import { HcDelMsg, NewDelMsg } from 'hc-vue3-ui'
import HcUpload from './components/HcUpload.vue'
import { toPdfPage } from '~uti/btn-auth'
import website from '~src/config'
import JumpTreeDialog from './components/JumpTreeDialog.vue'
import collectApi from '~api/data-fill/collect'
//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()

//全局变量
const projectId = ref(useAppState.projectId)
const contractId = ref(useAppState.contractId)
const projectInfo = ref(useAppState.projectInfo)
const contractInfo = ref(useAppState.contractInfo)
const isCollapse = ref(useAppState.getCollapse)
const userInfo = ref(useAppState.getUserInfo)
const isLayout = ref(useAppState.isLayout)
const leftWidth = ref(440)
const isTemplateType = ref(useAppState.contractInfo?.templateType === 2)
//路由参数
const routerQuery = useRoutes?.query
// const typeName = routerQuery?.type || 'map'
const typeName = routerQuery?.type || 'tree'
//是否是抽屉
const isDrawType = ref(true)
//自动展开缓存
const TreeAutoExpandKeys = ref(getStoreValue('wbsTreeExpandKeys') || [])

//树搜索
const isSearchTree = ref(false)
const searchTreeHeight = ref()
const getSearchTreeData = async (type) => {
    treeLoading.value = true
        let response
        if (type === 'history') {
            response = await collectApi.saveHistory({
               contractId: contractId.value || '',
               
                tableOwner: authBtnTabKey.value,
               queryValue: searchTreeVal.value,
            })
        } else if (type === 'hide') {
            response = await collectApi.getHiddenTreeNode({
            
                  contractId: contractId.value,
                tableOwner: authBtnTabKey.value,
               queryValue: searchTreeVal.value,
            })
        } else if (type === 'folder') {
            response = await collectApi.getCollectTreeNode({
                folderId:folderId.value,
                  contractId: contractId.value,
                tableOwner: authBtnTabKey.value,
               queryValue: searchTreeVal.value,
            })
        } else {
            response = await queryApi.getTreeNodeByQueryValueAndContractId({
                contractId: contractId.value,
                tableOwner: authBtnTabKey.value,
               queryValue: searchTreeVal.value,
            })
        }

        const { error, code, data } = response
             if (!error && code === 200) {
                let treedata = getArrValue(data)
                searchTreeData.value = treedata
                treeLoading.value = false
            } else {
                treeLoading.value = false

                searchTreeData.value = []
            }
}

//监听
const searchTreeVal = ref('')
watch(
    () => [useAppState.getCollapse, searchTreeVal.value],
    ([Collapse, search]) => {
        isCollapse.value = Collapse
        if (search.length == 0) {
            isSearchTree.value = false
        }
    },
)

//加载树需要的classType
const classType = ref('')
watch(
    () => [classType.value, useAppState.isLayout],
    ([classify, isLay]) => {
        isLayout.value = isLay || ''
        if (classify) {
            //重新加载左边树
            isShowLeft.value = false
            setTimeout(() => {
                isShowLeft.value = true
            }, 500)
        }
    },
)
const pageSplitRef = ref(null)

watch(() => pageSplitRef.value?.leftPanelWidth, (newWidth) => {

    
    leftWidth.value = newWidth
    setUserConfig(newWidth)
   
})
//渲染完成
onMounted(() => {
    console.log(projectInfo.value)
    treeLoading.value = typeName === 'tree'
    const treeWidth = useAppState.getTreeWidth
  
    
    leftWidth.value = isNullES(treeWidth) || treeWidth <= 0 ? 440 : treeWidth
    setContractType(contractInfo.value?.contractType)
    getDictionaryApi()
    getStandardTypeOptions()
    getMajorDataTypeOptions()



     
      nextTick(() => {
       pageSplitRef.value?.setLeftWidth(leftWidth.value)
    })
     
    
})

//身份按钮切换数据
const authBtnTabKey = ref('1')

//变量
const wbstree = ref(null)
const isShowLeft = ref(true)
const authBtnTabClick = (val) => {
        setElTreeMenu(val['key'])
    if (!primaryKeyId.value) {
        window?.$message?.warning('请先在左侧项目树选择一个节点')
    } else if (val['key'] !== authBtnTabKey.value) {
        authBtnTabKey.value = val['key']
    
        //重新加载左边树
        isShowLeft.value = false
        setTimeout(() => {
            isShowLeft.value = true
        }, 500)
        getTableDataAll()
    }
}
//contractType,  1施工，2监理
const setContractType = (contractType) => {
    if (contractType <= 0) {
        authBtnTabKey.value = '1'
        classType.value = '1'
    } else if (contractType === 3) {
        authBtnTabKey.value = '1'
        classType.value = '1'
    } else {
        authBtnTabKey.value = contractType + ''
        classType.value = contractType + ''
    }
    setElTreeMenu(contractType)
}

const getTableDataAll = async (key) => {
    await searchNodeAllTable()
    await queryNodeStatus()
    if (isTemplateType.value) {
        await getFileName()
        await getnodeBaseData()
    }
    //保存后自动展开到当前表单
    if (!isNullES(key)) {
        console.log(key)
        await nextTick(() => {
            ListItemRef.value?.setCollapseKey(key)
        })
    }
}

//结构类型tab数据和相关处理
const wbsTypeTabKey = ref(typeName)
const wbsTypeTab = ref([
    { key: 'map', name: '导图结构填报' },
    { key: 'tree', name: '树形结构填报' },
])
const authBtnTabdata = ref([
    { key: '1', name: '施工质检' },
    { key: '2', name: '监理质检' },
])
const wbsTypeTabChange = (item) => {
    wbsTypeTabKey.value = item?.key
    ListItemDatas.value = []
    isDrawer.value = false
    treeLoading.value = typeName === 'tree'
    setStoreValue('classifyType', classType.value)
    setStoreValue('tableOwner', authBtnTabKey.value)
    //路由跳转
    router.push({
        path: useRoutes.path,
        query: {
            type: item?.key,
            classifyType: classType.value,
            tableOwner: authBtnTabKey.value,
        },
    })
    getSearchTreeData()
}
//切换导图结构
const wbsMapTypeTab = () => {
    wbsTypeTabChange({ key: 'map', name: '导图结构填报' })
}

//设置图纸数据
const setUploadDrawingsData = async (echoParams, link) => {
    const info = nodeDataInfo.value
    const { error, code, data } = await wbsApi.saveContractTreeDrawings(
        {
            fileUrl: link,
            id: echoParams['drawingsId'],
            primaryKeyId: echoParams['primaryKeyId'],
        },
        false,
    )
    //处理数据
    if (!error && code === 200) {
        if (info['primaryKeyId'] === echoParams['primaryKeyId']) {
            nodeDataInfo.value['drawingsId'] = data
            nodeDataInfo.value['fileUrl'] = link
            window?.$message?.success('图纸上传成功')
        } else {
            window?.$message?.success(
                '图纸上传成功，由于您切换了其他节点，需要手动刷新才能查看到图纸',
            )
        }
    } else {
        window?.$message?.error('图纸保存失败')
    }
}

const NodeTreeAccordion = ref(true)

//设置树菜单数据
const ElTreeMenu = ref([])
const TreeMark = ref(false)
const setElTreeMenu = (contractType) => {
 
    
    let newArr = []
    if (contractType == 1 && contractInfo.value?.contractType !== 2) {
 
        
        if (HcIsButton('wbs_tree_add')) {
            newArr.push({ icon: 'add-circle', label: '新增节点', key: 'add' })
            newArr.push({
                icon: 'add-circle',
                label: '自定义节点（水利工程）',
                key: 'add1',
            })
            newArr.push({
                icon: 'add-circle',
                label: '自定义节点（数字化文件）',
                key: 'add2',
            })
        }
        if (HcIsButton('wbs_tree_edit')) {
            newArr.push({ icon: 'draft', label: '编辑节点', key: 'edit' })
        }
        if (HcIsButton('wbs_tree_copy')) {
            newArr.push({
                icon: 'file-copy-2',
                label: '复制节点',
                key: 'copy',
            })
        }
        if (HcIsButton('wbs_tree_mark')) {
            newArr.push({ icon: 'star', label: '标记为首件', key: 'mark' })
            TreeMark.value = true
        }
        if (HcIsButton('wbs_tree_upload')) {
            newArr.push({
                icon: 'file-upload',
                label: '上传图纸',
                key: 'upload',
            })
        }
        if (HcIsButton('wbs_tree_sort')) {
            newArr.push({ icon: 'sort-asc', label: '调整排序', key: 'sort' })
        }
        if (HcIsButton('wbs_tree_del')) {
            newArr.push({ icon: 'delete-bin', label: '删除节点', key: 'del' })
        }
        if (HcIsButton('wbs_views_division_btn')) {
            newArr.push({
                icon: 'folder-shared',
                label: '工程划分',
                key: 'nodetree',
            })
        }
        if (HcIsButton('wbs_tree_jump')) {
            newArr.push({
                icon: 'drag-move-2',
                label: '跨节点移动',
                key: 'jumpTree',
            })
        } 
    } else if (contractType == 2) {
        newArr = []

    }
    ElTreeMenu.value = newArr
   
    
}

//树相关变量
const primaryKeyId = ref('')
const nodeItemInfo = ref({})
const nodeDataInfo = ref({})

const searchTreeData = ref([])

//回车
const searchTreeKeyUp = (e) => {
    if (e.key === 'Enter') {
        searchTreeClick()
    }
}

const treeLoading = ref(true)

const searchTreeClick = async () => {
    if (searchTreeVal.value) {
        searchTreeHeight.value
            = document.getElementById('hc-tree-scrollbar').offsetHeight
        isSearchTree.value = true
        //treeLoading.value = true
        if ( isLookHistory.value) {
              getSearchTreeData('history')
        } else if (folderId.value) {
             getSearchTreeData('folder')
        } else if (!isLookHide.value) {
             getSearchTreeData('hide')

        } else {
            getSearchTreeData()
        }

      
    } else {
        isSearchTree.value = false
    }
}

//懒加载的数据
const treeLoadNode = async ({ node, item, level }, resolve) => {
    let contractIdRelation = '',
        parentId = '',
        primaryKeyId = ''
    if (level !== 0) {
        const nodeData = getObjValue(item)
        contractIdRelation = nodeData?.contractIdRelation || ''
        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
        primaryKeyId = nodeData?.id || ''
    }
    //获取数据
    const { data } = await queryApi.queryWbsTreeData({
        contractId: contractId.value || '',
        contractIdRelation,
        primaryKeyId,
        parentId,
        // classifyType: authBtnTabKey.value,
        classifyType: classType.value,
        tableOwner: authBtnTabKey.value,
        dataTime:new Date(),
    })
    treeLoading.value = false

    resolve(getArrValue(data))
}

//树被点击
const wbsElTreeClick = ({ node, data, keys }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    primaryKeyId.value = data?.primaryKeyId || ''
    const { notExsitChild } = data
    const { hasChildren } = data
    if (notExsitChild || !hasChildren) {
        isCanadd.value = false
        getTableDataAll()
    } else {
        isCanadd.value = true
        ListItemDatas.value = []
        NodeStatus.value = '1'
    }
    setStoreValue('wbsTreeExpandKeys', keys)
    TreeAutoExpandKeys.value = keys || []
    saveHistory(keys.join(','))
  
    // getTableDataAll()
}
//树加载完成
const ElTreeNodeLoading = () => {
    treeLoading.value = false
}
//保存用户填报历史
const saveHistory = async (endNode) => {
    await wbsApi.saveUserHistory({
        contractId: contractId.value,
        projectId: projectId.value,
        endNode,
    })
}
//回到上次填报历史
const gobackHistory = async () => {
    isSearchTree.value = false
    const { error, code, data, msg } = await wbsApi.getUserHistory({
        contractId: contractId.value,
        projectId: projectId.value,
    })
    if (!error && code === 200) {
        TreeAutoExpandKeys.value = data['endNode'].split(',') || []
        //重新加载左边树
        isShowLeft.value = false
        setTimeout(() => {
            isShowLeft.value = true
        }, 500)
    } else {
        window.$message.warning(msg)
    }
}
//树菜单被点击
const ElTreeMenuClick = async ({ key, node, data, keys }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    setStoreValue('wbsTreeExpandKeys', keys)
    TreeAutoExpandKeys.value = keys || []
    setTreeMenuDataClick({ key, node, data })
}

//导图结构数据
const NodeTreeRef = ref(null)

//鼠标左键单击事件
const NodeTreeClick = ({ keys }) => {
    setStoreValue('wbsTreeExpandKeys', keys)
    TreeAutoExpandKeys.value = keys || []
}

//双击事件
const isDrawer = ref(false)
const NodeTreeDblClick = ({ node, data }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    primaryKeyId.value = data?.primaryKeyId || ''
    isDrawer.value = true
    getTableDataAll()
}
const drawerClose = () => {
    isDrawer.value = false
    ListItemDatas.value = []
}

//导图树菜单被点击
const NodeTreeMenuClick = async ({ key, node, data }) => {
    nodeItemInfo.value = node
    nodeDataInfo.value = data
    setTreeMenuDataClick({ key, node, data })
}
const orString = ref('')
//处理菜单被点击数据
const setTreeMenuDataClick = ({ key, node, data }) => {
    const tabKey = wbsTypeTabKey.value
    if (key === 'mark' || key === 'cancel_mark') {
        firstItemBox()
    } else if (key === 'edit') {
        console.log(data, 'data')
        let form = {}
        if (tabKey === 'tree') {
            const parent = deepClone(node?.parent?.data || {})
            form = { ...deepClone(data), parent: parent }
        } else if (tabKey === 'map') {
            const parent = deepClone(node?.parentNodes?.data || {})
            form = { ...deepClone(data), parent: parent }
        }
        formEditNodeModel.value = form
        orString.value = formEditNodeModel.value?.className
        changeStandType(formEditNodeModel.value?.className)

        console.log(
            formEditNodeModel.value?.className,
            'formEditNodeModel.value?.className',
        )
        editNodeModal.value = true
        //处理路径
        let pathArr = []
        getPathName(node, pathArr)
        form.position = pathArr.join('\\')
        formEditNodeModel.value = form
    } else if (key === 'copy') {
        if (tabKey === 'tree') {
            const parent = deepClone(node?.parent?.data || {})
            formCopyNodeModel.value = { ...deepClone(data), parent: parent }
        } else if (tabKey === 'map') {
            const parent = deepClone(node?.parentNodes?.data || {})
            formCopyNodeModel.value = { ...deepClone(data), parent: parent }
        }
        classifyType.value = authBtnTabKey.value
        copyNodeTabKey.value = '1'
        copyNodeTable.value = []
        copyNodeLoading.value = false
        copyNodeModal.value = true
        classifyList.value = []
    } else if (key === 'add') {
        const { childNodes } = node
        console.log(childNodes, 'childNodes')

        isCustom.value = data?.isCustom
        addTreeNodeId.value = data?.primaryKeyId
        addTreeNodeOldId.value = data?.oldId
        addNodeLoading.value = false

        if (data?.isClassifition === 1) {
            window.$message.warning('该节点下不能创建子节点')
            addNodeModal.value = false
            return
        }
        {
            addNodeModal.value = true
        }
    } else if (key === 'add1') {
        addTreeNodeId.value = data?.primaryKeyId
        addTreeNodeOldId.value = data?.oldId
        addNodeLoading.value = false
        formWaterNodeModel.value = {
            nodeName: '',
            nodeType: null,
        }

        if (data?.isClassifition === 1) {
            window.$message.warning('该节点下不能创建子节点')
            addNodeModalCus.value = false
            return
        }
        {
            addNodeModalCus.value = true
        }
    } else if (key === 'add2') {
        addTreeNodeId.value = data?.primaryKeyId
        addTreeNodeOldId.value = data?.oldId
        addNodeLoading.value = false

        formDataNodeModel.value = {
            nodeName: '',
            nodeType: null,
            isClassifition: 0,
            className: '',
            unitName: '',
            unitNum: 1,
            excellentNum: 1,

            digitizeTime: '',
        }
        if (data?.isClassifition === 1) {
            window.$message.warning('该节点下不能创建子节点')
            addNodeModalData.value = false
            return
        } else {
            addNodeModalData.value = true
          
        }
    } else if (key === 'upload') {
        const info = nodeDataInfo.value
        HcUploadFileApi({
            url: '/api/blade-resource/oss/endpoint/put-file',
            accept: '.png,.jpg,jpeg',
            accept_tip: '图片(png、jpg、jpeg)',
            size: 80,
            multiple: false,
            echoParams: {
                drawingsId: info['drawingsId'],
                primaryKeyId: info['primaryKeyId'],
            },
            success: ({ echoParams }, { data }) => {
                setUploadDrawingsData(echoParams.sourceKey, data?.link)
            },
            error: () => {
                window.$message.error('上传失败')
            },
        })
    } else if (key === 'del') {
        console.log(data, 'data')
        if (
            data['colorStatus'] === 1
            || data['colorStatus'] === 2
            || data['colorStatus'] === null
            || data['colorStatus'] === -1
        ) {
            delModalClick()
        } else {
            window?.$message?.warning('该节点已存在上报数据，不允许删除')
        }
    } else if (key === 'sort') {
 
        let nodes = [],
            childNodes = []
        if (tabKey === 'tree') {
            childNodes
                = node?.parent?.childNodes || node?.parent?.children || []
        } else if (tabKey === 'map') {
            childNodes = node?.parentNodes?.childrenNodes || []
        }
        for (let i = 0; i < childNodes.length; i++) {
            const res = childNodes[i]?.data
            nodes.push({
                id: res?.primaryKeyId,
                title: res?.title,
            })
        }
        sortNodeData.value = nodes
        sortNodeModal.value = true
    } else if (key === 'nodetree') {
        divisionClick()
    } else if (key === 'jumpTree') {
        console.log('跨节点移动')
             primaryKeyId.value = data.primaryKeyId
         showMoveClick(node, data)
    }
        
}

//获取节点的路径名字
const getPathName = (node, pathArr) => {
    if (node.parent?.parent) {
        pathArr.unshift(node.data?.title.replace(/(^\s*)|(\s*$)/g, '')) //去掉头尾空格
        getPathName(node.parent, pathArr)
    } else {
        //根节点结束
        pathArr.unshift(node.data?.title.replace(/(^\s*)|(\s*$)/g, '')) //去掉头尾空格
        return pathArr
    }
}

//确认标记为首件
const firstItemBox = () => {
    const info = nodeDataInfo.value
    window?.$messageBox?.alert(
        `<div class="text-base font-bold">
            <span>请确认将</span>
            <span class="text-main">【${info['title']}】</span>
            <span>${info['isFirst'] ? '取消' : ''}标记为首件</span>
        </div>`,
        '标记首件制',
        {
            showCancelButton: true,
            dangerouslyUseHTMLString: true,
            callback: (action) => {
                if (action === 'confirm') {
                    firstItemHttp(info)
                }
            },
        },
    )
}
//首件请求
const firstItemHttp = async (info) => {
    const { error, code, msg } = await wbsApi.wbsTreeFirstSave({
        primaryKeyId: info['primaryKeyId'],
        saveOrDeleted: info['isFirst'] ? 1 : 0,
    })
    //处理数据
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        window?.location?.reload() //刷新页面
    } 
}

//编辑节点
const editNodeModal = ref(false)

//获取节点类型
const nodeTypeData = ref([])
const getDictionaryApi = async () => {
    const { data } = await getDictionary({
        code: 'wbs_node_type',
    })
    //处理数据
    let newArr = []
    const newData = getArrValue(data)
    for (let i = 0; i < newData.length; i++) {
        newArr.push({
            label: newData[i]['dictValue'],
            value: Number(newData[i]['dictKey']),
        })
    }
    nodeTypeData.value = newArr
}

const formEditNodeRef = ref(null)
const formEditNodeModel = ref({
    title: '',
    parent: {
        title: '',
    },
    nodeType: null,
    partitionCode: '',
    position: '',

    notExsitChild: '',
})
const formEditNodeRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: '请输入节点名称',
    },
}
const editNodeLoading = ref(false)
//保存编辑节点数据
const editNodeClick = async () => {
    const validate = await formValidate(formEditNodeRef.value)
    if (validate) {
        //发起请求
        editNodeLoading.value = true
        const {
            primaryKeyId,
            title,
            partitionCode,
            className,
            unitName,
            excellentNum,
            unitNum,
            digitizeTime,
            majorDataType,
            nodeType,
            privateTemplate,
        } = formEditNodeModel.value
        const { error, code, msg } = await wbsApi.wbsTreeUpdateNode({
            nodeName: title || '',
            pKeyId: primaryKeyId || '',
            partitionCode: partitionCode || '',
            className,
            unitName,
            unitNum,
            excellentNum,
            digitizeTime,
            majorDataType,
            nodeType,
            privateTemplate,
        })
        //处理数据
        editNodeLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('修改成功')
            nodeDataInfo.value['title'] = title || ''
            nodeDataInfo.value['partitionCode'] = partitionCode || ''
            editNodeModal.value = false
            window?.location?.reload() //刷新页面
        } 
    }
}

//复制节点
const copyNodeModal = ref(false)

//复制节点类型tab数据和相关处理
const copyNodeTabKey = ref('')
const copyNodeTab = ref([
    { key: '1', name: '单份复制' },
    { key: '2', name: '多份复制' },
    //{key: '3', name: '复制数据'}
])
const copyNodeTabChange = (key) => {
    if (key !== copyNodeTabKey.value) {
        copyNodeTabKey.value = key
        copyNodeTable.value = []
        copyNodeLoading.value = false
    }
}

//复制节点变量
const copyNodeLoading = ref(false)
const formCopyNodeModel = ref({})
const classifyList = ref([])
const copyNodeTable = ref([])
const isCopyData = ref(0)

//复制树被点击
const copyNodeElTreeClick = ({ data, node }) => {
    const TabKey = copyNodeTabKey.value
    const { title, type, partitionCode } = formCopyNodeModel.value
    console.log(formCopyNodeModel.value, 'formCopyNodeModel.value')
    console.log(data, '点击data')

    if (TabKey === '2') {
        // setCopyNodeTable(data, title, partitionCode)
        //1 单位工程，2 分部工程，3 子分部工程，4 分项工程， 5 子分项工程，6 工序
        //         //不能复制到本身节点下
        //         //只能往上一级点击，不能跨层级点击
        //         //已上报的工序节点不能点击选择
        //         //如果选择的是父级节点，那不能复制到子级节点
        const { hasChildren } = data
        if (hasChildren === 0) {
            if (
                data['colorStatus'] === 2
                || data['colorStatus'] == 1
                || data['colorStatus'] === null
                || data['colorStatus'] === -1
            ) {
                //已上报的工序不能点击
                if (data['id'] !== formCopyNodeModel.value.id) {
                    //不能复制到本身节点下
                    //只能往上一级点击，不能跨层级点击
                    //如果选择的是父级节点，那不能复制到子级节点
                    if (
                        type === 6
                        && (data['type'] === 4
                            || data['type'] === 5
                            || data['type'] == 6)
                    ) {
                        setCopyNodeTable(data, title)
                    }
                    if (type === 5 && data['type'] === 4) {
                        setCopyNodeTable(data, title, partitionCode)
                    }
                    if (
                        type === 4
                        && (data['type'] === 2 || data['type'] === 3)
                    ) {
                        setCopyNodeTable(data, title, partitionCode)
                    }
                    if (type === 3 && data['type'] === 2) {
                        setCopyNodeTable(data, title, partitionCode)
                    }
                    if (type === 2 && data['type'] === 1) {
                        setCopyNodeTable(data, title, partitionCode)
                    }
                    if (type === 1 && data['type'] === 1) {
                        setCopyNodeTable(data, title, partitionCode)
                    }
                }
            } else {
                window?.$message?.warning('该节点已存在上报数据，不允许复制')
            }
        } else {
            if (data['id'] !== formCopyNodeModel.value.id) {
                //不能复制到本身节点下
                //只能往上一级点击，不能跨层级点击
                //如果选择的是父级节点，那不能复制到子级节点
                if (
                    type === 6
                    && (data['type'] === 4
                        || data['type'] === 5
                        || data['type'] == 6)
                ) {
                    setCopyNodeTable(data, title)
                }
                if (type === 5 && data['type'] === 4) {
                    setCopyNodeTable(data, title, partitionCode)
                }
                if (type === 4 && (data['type'] === 2 || data['type'] === 3)) {
                    setCopyNodeTable(data, title, partitionCode)
                }
                if (type === 3 && data['type'] === 2) {
                    setCopyNodeTable(data, title, partitionCode)
                }
                if (type === 2 && data['type'] === 1) {
                    setCopyNodeTable(data, title, partitionCode)
                }
                if (type === 1 && data['type'] === 1) {
                    setCopyNodeTable(data, title, partitionCode)
                }
            }
        }
    } else if (TabKey === '3') {
        console.log(1111111)
        setCopyNodeTable(data, data?.title)
    }
}

const setCopyNodeTable = (data, title) => {
    copyNodeTable.value.push({
        title: data?.title || '',
        nodeName: title || '',
        primaryKeyId: data?.primaryKeyId || '',
        parentId: data?.parentId || '',
        id: data?.id || '',
    })
}

//节点表单
const formCopyNodeModelRef = ref(null)
const formCopyNodeModelRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: '请输入节点名称',
    },
}
//表格节点表单
const copyNodeTableRef = ref(null)
const copyNodeTableRules = {
    nodeName: {
        required: true,
        trigger: 'blur',
        message: '请输入节点名称',
    },
}
//删除选中的节点
const copyNodeTableDel = (index) => {
    copyNodeTable.value.splice(index, 1)
}

const classifyType = ref(authBtnTabKey.value)


//复制节点
const copyNodeClick = async () => {
    const type = copyNodeTabKey.value
    const form = formCopyNodeModel.value
    const table = copyNodeTable.value
    let classify = ''
    let arr = []
    if (classifyList.value.length > 0) {
        classifyList.value.forEach((item) => {
            if (item === '施工') {
                arr.push(1)
            } else if (item === '监理') {
                arr.push(2)
            }
        })
        classify = arr.join(',')
    }
    //isSameNode 是否同节点 1=同节点，0=跨节点
    if (table.length > 0) {
        table.forEach((ele) => {
            if (
                ele.parentId === formCopyNodeModel.value.parentId
                || ele.id === formCopyNodeModel.value.parentId
            ) {
                ele.isSameNode = 1
            } else {
                ele.isSameNode = 0
            }
        })
    }
    if (isCopyData.value === 1) {
        if (classify) {
            //效验数据
            if (type === '1') {
                const validate = await formValidate(formCopyNodeModelRef.value)
                if (validate)
                    await copyContractTreeNode(type, form, [], classify)
            } else if (type === '2') {
                if (table.length > 0) {
                    const validate = await formValidate(copyNodeTableRef.value)
                    if (validate)
                        await copyContractTreeNode(type, form, table, classify)
                } else {
                    window?.$message?.warning('请先在左侧选择要复制到的节点')
                }
            }
        } else {
            window?.$message?.warning('请选择所属方')
        }
    } else {
        if (type === '1') {
            const validate = await formValidate(formCopyNodeModelRef.value)
            if (validate) await copyContractTreeNode(type, form, [], classify)
        } else if (type === '2') {
            if (table.length > 0) {
                const validate = await formValidate(copyNodeTableRef.value)
                if (validate)
                    await copyContractTreeNode(type, form, table, classify)
            } else {
                window?.$message?.warning('请先在左侧选择要复制到的节点')
            }
        }
    }
}
//单个复制、多份复制请求
const copyContractTreeNode = async (type, form, table, classify) => {
    copyNodeLoading.value = true
    if (type === '1') {
        const { error, code, msg } = await wbsApi.copyContractTreeNode({
            copyType: type,
            needCopyNodeName: form?.title || '',
            partitionCode: form?.partitionCode || '',
            needCopyPrimaryKeyId: form?.primaryKeyId || '',
            parentPrimaryKeyId: form?.parent?.primaryKeyId || '',
            copyBatchToPaths: table,
            classifyType: classify,
            isCopyData: isCopyData.value,
        })
        //判断状态
        copyNodeLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('复制成功')
            copyNodeModal.value = false
            window?.location?.reload() //刷新页面
        } 
    } else {
        const { error, code, msg } = await wbsApi.copyContractTreeNode({
            copyType: type,
            needCopyNodeName: form?.title || '',
            needCopyPrimaryKeyId: form?.primaryKeyId || '',
            parentPrimaryKeyId: form?.parent?.primaryKeyId || '',
            copyBatchToPaths: table,
            classifyType: classify,
            isCopyData: isCopyData.value,
        })
        //判断状态
        copyNodeLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('复制成功')
            copyNodeModal.value = false
            window?.location?.reload() //刷新页面
        } 
    }
}


//新增节点
const addNodeModal = ref(false)
const addTreeNodeId = ref('')
const addTreeNodeOldId = ref('')
//const addTreeNodeType = ref('1')
const addTreeNodeType = ref('1')
const isCustom = ref(null)

//新增自定义节点
const addNodeModalCus = ref(false)
const addNodeLoadingCus = ref(false)

//水利工程
const formWaterNodeRef = ref(null)
const formWaterNodeModel = ref({
    nodeName: '',
    nodeType: null,
})
const formWaterNodeRules = {
    nodeName: {
        required: true,
        trigger: 'blur',
        message: '请输入节点名称',
    },

    nodeType: {
        required: true,
        trigger: 'blur',
        message: '请选择节点类型',
    },
}
//新增自定义节点-数字化文件

const addNodeModalData = ref(false)
const addNodeLoadingData = ref(false)
const formDataNodeRef = ref(null)
const formDataNodeModel = ref({
    nodeName: '',
    nodeType: null,
    isClassifition: 0,
    className: '',
    unitName: '',
    unitNum: 1,
    excellentNum: 1,
    majorDataType: '',
    digitizeTime: '',
})

const majorDataTypeOptions = ref([])
const getMajorDataTypeOptions = async () => {
    majorDataTypeOptions.value = await getDictionaryData('major_data_type', false)
}
const standardTypeOptions = ref([])
const getStandardTypeOptions = async () => {
    const { data } = await getDictionary({
        code: 'classification',
    })
    standardTypeOptions.value = await getDictionaryData(
        'classification',
        false,
    )

    standardTypeOptions.value.forEach((element) => {
        // element.parentId=
        data.forEach((ele) => {
            if (ele.dictKey == element.value) {
                element.id = ele.id
            }
        })
    })
    // 定义要过滤的 dictKey 值
    const targetKeys = [1, 2, 3, 4, 5]
    // 过滤数组
    standardTypeOptions.value = standardTypeOptions.value.filter((item) =>
        targetKeys.includes(item.value),
    )
}
const unitNameOptions = ref([])
const changeStandType = async (val) => {
    if (val !== orString.value) {
        formEditNodeModel.value.unitName = ''
    }
    formDataNodeModel.value.unitName = ''
    let parentId = ''
    standardTypeOptions.value.forEach((item) => {
        if (item.value == val) {
            parentId = item.id
        }
    })
    const { data } = await getChildList({ current: 1, size: 10000, parentId })
    unitNameOptions.value = data

    unitNameOptions.value = unitNameOptions.value.filter(
        (item) => item.dictKey != -1,
    )
    unitNameOptions.value.forEach((ele) => {
        ele.dictKey = Number(ele.dictKey)
    })
}

const formDataNodeRules = {
    nodeName: {
        required: true,
        trigger: 'blur',
        message: '请输入节点名称',
    },

    nodeType: {
        required: true,
        trigger: 'blur',
        message: '请选择节点类型',
    },

    isClassifition: {
        required: true,
        trigger: 'blur',
        message: '请选择是否含单元评定',
    },
    className: {
        required: true,
        trigger: 'blur',
        message: '请选择标准分类',
    },
    unitName: {
        required: true,
        trigger: 'blur',
        message: '请选择单位名称',
    },

    excellentNum: {
        required: true,
        trigger: 'blur',
        message: '请输入优良个数',
    },

    unitNum: {
        required: true,
        trigger: 'blur',
        message: '请输入单元个数',
    },

    digitizeTime: {
        required: true,
        trigger: 'blur',
        message: '请选择时间',
    },
    majorDataType:{
        required: true,
        trigger: 'blur',
        message: '请选择内业资料类型',
    },
}

const addNodeClickData = async () => {
    const validate = await formValidate(formDataNodeRef.value)
    if (!validate) return
    //发起请求
    addNodeClickData.value = true
    const { error, code, msg } = await wbsApi.saveCustomAddContractNode({
        nodeName: formDataNodeModel.value.nodeName,
        nodeType: formDataNodeModel.value?.nodeType || '',
        partitionCode: nodeDataInfo.value?.partitionCode || '',
        primaryKeyId: nodeDataInfo.value?.primaryKeyId || '',
        nodeClass: 2, //数字化文件
        isClassifition: formDataNodeModel.value?.isClassifition || 0,
        className: formDataNodeModel.value?.className || '',
        unitName: Number(formDataNodeModel.value?.unitName) || '',
        excellentNum: formDataNodeModel.value?.excellentNum || 0,
        digitizeTime: formDataNodeModel.value?.digitizeTime || '',
        unitNum: formDataNodeModel.value?.unitNum || 0,
        majorDataType: formDataNodeModel.value?.majorDataType || '',
        templateType:useAppState.contractInfo?.templateType,
    
    })
    //判断状态
    addNodeClickData.value = false
    if (!error && code === 200) {
        window?.$message?.success('新增成功')
        addNodeModalData.value = false
        window?.location?.reload() //刷新页面
    } 
}

//选中的节点
const allSelectedList = ref([])
const halfSelectedList = ref([])
const addTreeNodeCheckChange = (nodes) => {
    let NodesArr = [],
        halfArr = []
    //全选数据
    const keys = nodes.checkedNodes || []

    for (let i = 0; i < keys.length; i++) {
        NodesArr.push({
            nodeName: keys[i].nodeName,
            primaryKeyId: keys[i].pKeyId,
            isPeer: keys[i].isPeer || 2,
        })
    }
    allSelectedList.value = NodesArr

    //半选数据
    const halfNodes = nodes.halfCheckedNodes || []
    for (let i = 0; i < halfNodes.length; i++) {
        halfArr.push({
            nodeName: halfNodes[i].nodeName,
            primaryKeyId: halfNodes[i].pKeyId,
            isPeer: halfNodes[i].isPeer || 2,
        })
    }
    halfSelectedList.value = halfArr
   
}

//新增节点
const addNodeLoading = ref(false)
const addNodeClick = async () => {
    const keys = allSelectedList.value || []
    if (keys.length <= 0) {
        window?.$message?.warning('请先选择节点')
    } else {
        //发起请求
        addNodeLoading.value = true
        const primaryKeyId = nodeDataInfo.value?.primaryKeyId || ''
        const { error, code } = await wbsApi.saveContractTreeNode({
            projectId: projectId.value,
            contractId: contractId.value,
            saveType: addTreeNodeType.value,
            allSelectedList: allSelectedList.value,
            halfSelectedList: halfSelectedList.value,
            currentNodePrimaryKeyId: primaryKeyId,
            templateType:useAppState.contractInfo?.templateType,
            
        })
        //判断状态
        addNodeLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('新增成功')
            addNodeModal.value = false
            window?.location?.reload() //刷新页面
        }
    }
}

const addNodeClickCur = async () => {
    const validate = await formValidate(formWaterNodeRef.value)
    if (!validate) return
    //发起请求
    addNodeLoadingCus.value = true
    const { error, code, msg } = await wbsApi.saveCustomAddContractNode({
        nodeName: formWaterNodeModel.value.nodeName,
        nodeType: formWaterNodeModel.value?.nodeType || '',
        newPartitionCode:formWaterNodeModel.value?.number || '',
        partitionCode: nodeDataInfo.value?.partitionCode || '',
        primaryKeyId: nodeDataInfo.value?.primaryKeyId || '',
        nodeClass: 1, //1水利化工程，2数字化文件
        templateType:useAppState.contractInfo?.templateType,
    })
    //判断状态
    addNodeLoadingCus.value = false
    if (!error && code === 200) {
        window?.$message?.success('新增成功')
        addNodeModalCus.value = false
        window?.location?.reload() //刷新页面
    } else {
        window?.$message?.error(msg || '操作失败')
    }
}

//删除节点
const delModalClick = async () => {
    const { code, msg } = await wbsApi.removeContractTreeNodeJudge({
        ids: nodeDataInfo.value?.primaryKeyId || '',
    })
    if (code === 200) {
        HcDelMsg(async (resolve) => {
            await removeContractTreeNode()
            resolve() //关闭弹窗的回调
        })
    } else {
        NewDelMsg({ text: msg }, async (resolve) => {
            await removeContractTreeNode()
            resolve() //关闭弹窗的回调
        })
    }
}

const removeContractTreeNode = async () => {
    const loadingInstance = window.$loading.service({
        fullscreen: true,
        text: '删除节点中，请耐心等待...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const { error, code, msg } = await wbsApi.removeContractTreeNode({
        ids: nodeDataInfo.value?.primaryKeyId || '',
    })
    //处理结果
    loadingInstance.close()
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
        window?.location?.reload() //刷新页面
    } else {
        window.$message.error(msg)
    }
}

//调整排序
const sortNodeModal = ref(false)
const sortNodeLoading = ref(false)
const sortNodeData = ref([])
const sortNodeDrag = ref(false)
//向下
const downSortClick = (index) => {
    const indexs = index + 1
    const data = sortNodeData.value || []
    if (indexs !== data.length) {
        const tmp = data.splice(indexs, 1)
        sortNodeData.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置底，无法下移')
    }
}
//向上
const upSortClick = (index) => {
    const data = sortNodeData.value || []
    if (index !== 0) {
        const tmp = data.splice(index - 1, 1)
        sortNodeData.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置顶，无法上移')
    }
}
//确认排序
const sortNodeClick = async () => {
    const sortList = []
    const nodes = sortNodeData.value || []
    nodes.forEach((item) => {
        sortList.push(item?.id)
    })
    //发起请求
    sortNodeLoading.value = true
    const { error, code, msg } = await wbsApi.diySortTreeNode({ sortList })
    sortNodeLoading.value = false
    //判断状态
    if (!error && code === 200) {
        window?.$message?.success('保存成功')
        sortNodeModal.value = false
        window?.location?.reload() //刷新页面
    } else {
        window.$message.error(msg)
    }
}

//查看图纸
const drawList = ref('')
const drawingsShow = ref(false)
const viewsDrawings = () => {
    const { primaryKeyId, drawingsId } = nodeDataInfo.value
    if (!primaryKeyId) {
        window?.$message?.warning('请先选择树节点')
    } else if (drawingsId === -1 || drawingsId === null) {
        window?.$message?.warning('该节点暂未上传图纸')
    } else {
        drawingsShow.value = true
        getDrawList(drawingsId)
    }
}
const drawingsClose = (res) => {
    drawingsShow.value = res
}
const getDrawList = async (primaryKeyId) => {
    const { error, code, data } = await wbsApi.getTreeDrawings({
        primaryKeyId,
    })
    //判断状态
    if (!error && code === 200) {
        drawList.value = data
    } else {
        drawList.value = data
    }
}

//设置滚动条位置
const ListItemScrollRef = ref(null)
const ListItemOffsetTop = (offsetTop) => {
    if (offsetTop > 0) {
        setTimeout(() => {
            ListItemScrollRef.value?.setScrollTop(offsetTop)
        }, 350)
    } else {
        ListItemScrollRef.value?.setScrollTop(offsetTop)
    }
}

//获取数据列表
const ListItemDatas = ref([])
const ListItemLoading = ref(false)
const searchNodeAllTable = async () => {
    ListItemLoading.value = true
    ListItemDatas.value = []
    const info = nodeDataInfo.value
    const { data } = await wbsApi.searchNodeAllTable({
        projectId: projectId.value,
        contractId: contractId.value,
        primaryKeyId: info['primaryKeyId'],
        type: authBtnTabKey.value,
    })
    ListItemDatas.value = getArrValue(data)
 
    ListItemLoading.value = false
}
//获取文件题名

const getFileName = async () => {
    if (!nodeDataInfo.value?.primaryKeyId) {
        titleInput.value = ''
        return
    }
    const info = nodeDataInfo.value
    const { error, code, data } = await wbsApi.getDICengNodeName({
        pKeyId: info['primaryKeyId'],
        classify: authBtnTabKey.value,
        contractId: contractId.value,
    })
    //判断状态
    if (!error && code === 200) {
        titleInput.value = data
    } else {
        titleInput.value = data
    }
}
const newlistdata = ref([])
const searchNodeAllTable1 = async () => {
    console.log('重新获取表单列表')
    const info = nodeDataInfo.value
    const { data } = await wbsApi.searchNodeAllTable({
        projectId: projectId.value,
        contractId: contractId.value,
        primaryKeyId: info['primaryKeyId'],
        type: authBtnTabKey.value,
    })
    newlistdata.value = getArrValue(data)
}
//查询状态
const NodeStatus = ref('1')
const queryNodeStatus = async () => {
    const info = nodeDataInfo.value

    
    if (!info['primaryKeyId']) {
        return
    }
    if (contractInfo.value?.contractType == 1) {
        const { error, code, data } = await wbsApi.queryNodeStatus({
            primaryKeyId: info['primaryKeyId'],
            //classify:1
            classify: authBtnTabKey.value,
        })
        //1 未填报，2待上报，3已上报
        if (!error && code === 200) {
            NodeStatus.value = data ?? '1'
        } else {
            NodeStatus.value = '1'
        }
    } else {
        const { error, code, data } = await wbsApi.queryNodeStatusJl({
            // primaryKeyId: info['contractIdRelation'] ? info['id'] : info['primaryKeyId'],
            primaryKeyId: info['primaryKeyId'],
            //classify: 1
            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 () => {
    const info = nodeDataInfo.value
    const rows = ListItemDatas.value
    if (rows.length > 0) {
        reportLoading.value = true
        const taskCheck = await eVisaTaskCheckApi({
            projectId: projectId.value,
            contractId:
                contractInfo.value?.contractType == 2
                    ? info?.contractIdRelation
                    : contractId.value,
            // contractId: contractId.value
        })
        //处理数据
        let newArr = []
        for (let i = 0; i < rows.length; i++) {
            newArr.push(rows[i]['isTypePrivatePid'])
        }
        reportTypeData.value = newArr
        reportLoading.value = false
        if (taskCheck) {
            //初始弹出弹窗，防呆
            reportIds.value = info['primaryKeyId']
            reportAddition.value = {
                classify: authBtnTabKey.value,
                contractIdRelation: info['contractIdRelation'],
            }
            showReportModal.value = true
            //请求文件题名
            const { data } = await wbsApi.queryDocumentTitle({
                primaryKeyId: info['primaryKeyId'],
                classify: authBtnTabKey.value,
            })
            reportTaskName.value = isString(data) ? data : ''
        }
    } else {
        window.$message?.warning('暂无相关数据')
    }
}

//上报完成
const showReportFinish = () => {
    showReportModal.value = false
    getTableDataAll()
    window?.location?.reload() //刷新页面
}

//表单变量
const ListItemRef = ref(null)
const ListItemsRef = ref(null)

//保存
const tableFormSaveLoading = ref(false)
const tableFormSaveClick = async () => {
    //获取数据
    let FormData = [],
        FormRegExpJson = {}
    if (isDrawer.value) {
        FormData = await ListItemsRef.value?.getFormData()
        FormRegExpJson = await ListItemsRef.value?.getFormRegExpJson()
    } else {
        FormData = await ListItemRef.value?.getFormData()
        FormRegExpJson = await ListItemRef.value?.getFormRegExpJson()
    }
    //效验数据
    if (getObjVal(FormRegExpJson)) {
        setFormRegExpJson(FormRegExpJson)
    } else if (FormData.length > 0) {
        console.log('保存')
        tableFormSaveLoading.value = true
        console.log('FormData', FormData)
        const { error, code, msg, data } = await wbsApi.saveExcelBussData({
            dataInfo: { orderList: FormData },
        })
        tableFormSaveLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success('保存成功')
            // await bussPdfsClick()
            const activeKey = ListItemRef.value?.getActiveKey()
            getTableDataAll(activeKey)
        } else {
            window?.$message?.error(msg || '操作失败')
        }
    } else {
        console.log('预览')
        // await bussPdfsClick()
    }
}

//效验数据
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 bussPdfsLoading = ref(false)
const bussPdfsClick = async () => {
    const info = nodeDataInfo.value
    bussPdfsLoading.value = true
    const { error, code, data } = await wbsApi.getBussPdfs({
        nodeId: info?.primaryKeyId || '',
        classify: authBtnTabKey.value,
        projectId: projectId.value,
        // contractId: contractId.value
        contractId:
            contractInfo.value?.contractType == 2
                ? info?.contractIdRelation
                : contractId.value,
    })
    tableFormSaveLoading.value = false
    bussPdfsLoading.value = false
    if (!error && code === 200) {
        toPdfPage(data)
        //window.open(data, '_blank')
    } else {
        window.$message?.warning('获取PDF失败')
    }
}

//撤回上报流程
const abolishLoaing = ref(false)
const abolishOneClick = () => {
    window?.$messageBox?.alert('请谨慎考虑后，是否确定撤回？', '撤回上报', {
        showCancelButton: true,
        confirmButtonText: '确定撤回',
        cancelButtonText: '取消',
        callback: (action) => {
            if (action === 'confirm') {
                abolishOneSave()
            }
        },
    })
}

//撤回请求
const abolishOneSave = async () => {
    const info = nodeDataInfo.value
    abolishLoaing.value = true
    const { error, code } = await wbsApi.abolishOne({
        primaryKeyId: info?.primaryKeyId || '',
        classify: authBtnTabKey.value,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    abolishLoaing.value = false
    if (!error && code === 200) {
        window.$message?.success('撤回成功')
        getTableDataAll()
        window?.location?.reload() //刷新页面
    }
}

//附件列表
const attachmentModal = ref(false)
const attachmentModalShow = () => {
    attachmentModal.value = true

    getAttachmentList()
    // nextTick(()=>{
    //       initSortable()
    // })
}
const attachmentListLoaing = ref(false)
const attachmentList = ref([])
const getAttachmentList = async () => {
    attachmentListLoaing.value = true
    const info = nodeDataInfo.value
    const { error, code, data } = await wbsApi.tablesAndFile({
        primaryKeyId: info?.primaryKeyId || '',
        type: authBtnTabKey.value,
        contractId: contractId.value,
        projectId: projectId.value,
        classify: authBtnTabKey.value,
    })
    attachmentListLoaing.value = false
    if (!error && code === 200) {
        attachmentList.value = getArrValue(data)
    } else {
        attachmentList.value = []
    }
}

// 新增拖拽相关代码
const attachmentListRefs = ref([])
const sortableInstances = ref([]) 

const setAttachmentListRef = (el) => {
  if (el) {
    attachmentListRefs.value.push(el)
  }
}

// 初始化拖拽排序
const initSortable = () => {
  nextTick(() => {
    attachmentList.value.forEach((item) => {
      // 更可靠的DOM查找方式
      const container = document.querySelector(`.hc-attachment-card[data-node-id="${item.id}"] .hc-attachment-content`)
      
      if (container && !sortableInstances.value[item.id]) {
        sortableInstances.value[item.id] = Sortable.create(container, {
          animation: 150,
          handle: '.hc-attachment-file-name',
          onEnd: (evt) => {
            // 确保能正确找到对应的item
            const currentItem = attachmentList.value.find(i => i.id === item.id)
            if (!currentItem) return
            
            const newFileList = [...currentItem.fileList]
            const [movedItem] = newFileList.splice(evt.oldIndex, 1)
            newFileList.splice(evt.newIndex, 0, movedItem)
            
            // 使用Vue的响应式更新
            currentItem.fileList = newFileList
          },
        })
      }
    })
  })
}
// 销毁 Sortable 实例
const destroySortableInstances = () => {
  sortableInstances.value.forEach(instance => {
    instance.destroy()
  })
  sortableInstances.value = [] // 清空引用数组
}

// 监听 attachmentModal 的变化
watch(attachmentModal, (newVal) => {
  if (!newVal) {
    destroySortableInstances() // 关闭弹窗时销毁 Sortable 实例
  } else {
    initSortable() // 打开弹窗时初始化 Sortable
  }
})
onUnmounted(() => {
  destroySortableInstances()
    if (sortableInstance) {
    sortableInstance.destroy()
    sortableInstance = null
  }
})
// 保存文件顺序到后端
const saveFileOrderLoad = ref(false)
const saveFileOrder = async () => {

    saveFileOrderLoad.value = true
 
    const { error, code, msg } = await wbsApi.sortPdf( attachmentList.value)
    saveFileOrderLoad.value = false
    if (!error && code === 200) {
       window?.$message?.success(msg)
       getAttachmentList()
         initSortable()
    } 
}

// 监听attachmentList变化时初始化拖拽
watch(() => attachmentList.value, () => {
     nextTick(()=>{
          initSortable()
    })
}, { deep: true })
//预览
const previewFile = (item) => {
    toPdfPage(item['domainPdfUrl'])
    //window.open(item['domainPdfUrl'], '_blank')
}
//删除
const delFile = async (item) => {
    const { isTrial, id, tabId } = item
    item.loading = true
        let response
        if (isTrial) {
            response = await wbsApi.clearTrialAssociation({
                nodeId:tabId,
                recordId:id,
            })
        } else {
            response = await wbsApi.removeBussFile({
                ids: item.id,
            })
        }

        const { error, code, msg } = response
    item.loading = false
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
        getAttachmentList()
        getTableDataAll()
        return true
    } else {
        window.$message.error(msg)
        return false
    }
}
//划分变更
const divisionClick = () => {
    router.push({
        path: '/data-fill/division',
    })
}

//树展开和收起
const isWbsTreeShow = ref(true)
const setWbsTreeShow = () => {
    isWbsTreeShow.value = !isWbsTreeShow.value
}

//拷贝内容
const copyPositionText = (val) => {
    if (val) {
        //navigator.clipboard.writeText(val);
        setCopyText(val)
            .then(() => {
                window.$message?.success('复制成功')
            })
            .catch(() => {
                window.$message?.error('复制失败，请手动复制')
            })
    } else {
        window.$message?.warning('没有可复制的数据')
    }
}

//左右拖动，改变树形结构宽度
const isMouseTree = ref(false)
const onmousedown = () => {
    let leftNum = 0
    if (isLayout.value === 'no') {
        leftNum = 0
    } else {
        leftNum = isCollapse.value ? 142 : 272
    }
    isMouseTree.value = true
    document.onmousemove = async (ve) => {
        let diffVal = ve.clientX - leftNum
        if (diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
        isMouseTree.value = false
    }
}

//更新配置
watch(
    () => leftWidth.value,
    (diffVal) => {
        setUserConfig(diffVal)
    },
)
const setUserConfig = async (data) => {

    if (data > 0) {
         await useClick()
        useAppState.setTreeWidth(data)
        await userConfigSave({ treeWidth: data })
    }
   

}

//同步质检资料
const syncdataloading = ref(false)
const syncdata = async () => {
    ListItemRef.value?.setActiveKey('')
    const info = nodeDataInfo.value
    syncdataloading.value = true
    const { error, code, msg } = await wbsApi.syncTbadata({
        pKeyId: info?.primaryKeyId || '',
    })
    syncdataloading.value = false
    if (!error && code === 200) {
        window.$message?.success(msg)
        getTableDataAll()

        // window?.location?.reload()  //刷新页面
    }
}

//同步工序资料
const syncWorkloading = ref(false)
const syncWork = async () => {
    ListItemRef.value?.setActiveKey('')
    const info = nodeDataInfo.value
    syncdataloading.value = true
    const { error, code, msg } = await wbsApi.syncWorkDate({
        nodeId: info?.primaryKeyId || '',
    })
    syncdataloading.value = false
    if (!error && code === 200) {
        window.$message?.success(msg)
        getTableDataAll()

        // window?.location?.reload()  //刷新页面
    }
}
//附件添加

const typeoptions = ref([
    {
        value: '1',
        label: '模板1',
    },
    {
        value: '2',
        label: '模板2',
    },
])
const getFileTypeApi = async () => {
    const { data } = await getDictionaryBiz({
        code: 'table_file_type',
    })
    //处理数据
    let newArr = []
    const newData = getArrValue(data)
    for (let i = 0; i < newData.length; i++) {
        newArr.push({
            label: newData[i]['dictValue'],
            value: Number(newData[i]['dictKey']),
        })
    }
    typeoptions.value = newArr
}
const typevalue = ref('')

const isCanadd = ref(true)
const uploadModal = ref(false)
const fileListData = ref([])
const uploadData = ref({})
const uploadModalClose = () => {
    uploadModal.value = false
    typevalue.value = ''
}

//获取附件添加列表
const getBussFileList = async (pkeyId) => {
    const { error, code, data } = await wbsApi.selectTableFileListByTen({
        pkeyid: pkeyId,
        classify: authBtnTabKey.value,
    })
    if (!error && code === 200) {
        fileListData.value = getArrValue(data)
    } else {
        fileListData.value = []
    }
}
const addFilelist = async () => {
    getBussFileList(primaryKeyId.value)
    uploadModal.value = true
    await getFileTypeApi()

    //上传的配置
    uploadData.value = {
        classify: authBtnTabKey.value,
        nodeId: primaryKeyId.value,
        type: typevalue.value,
        contractId: contractId.value,
    }
}
const changeType = (val) => {
    uploadData.value.type = val
}
//上传文件
const uploadChange = async ({ type }) => {
    if (type === 'success') {
        
        getBussFileList(primaryKeyId.value)
    } else if (type === 'del') {
        getBussFileList(primaryKeyId.value)
    }
}
const uploadUpdate = (list)=>{

    
    fileListData.value = list

}

//树节点被选中
const treeSelectNode = ref([])
const treeSelectdata = ref([])
const ElTreeNodeCheck = (_, { checkedKeys, checkedNodes }) => {
    console.log(checkedNodes, 'checkedNodes')
    treeSelectNode.value = getArrValue(checkedKeys)
    treeSelectdata.value = getArrValue(checkedNodes)
}


const loadMenu = ({ node, item, level }, resolve) => {
    setElTreeMenu(contractInfo.value?.contractType)
    let menusArr = ElTreeMenu.value
    console.log(menusArr, 'menusArr')
    
    if (level === 1) {
        // menusArr = [
        //     {
        //         icon: 'add-circle',
        //         label: '自定义节点（水利工程）',
        //         key: 'add1',
        //     },
        //     {
        //         icon: 'add-circle',
        //         label: '自定义节点（数字化文件）',
        //         key: 'add2',
        //     },
        // ]
        resolve(menusArr)
    } else {
        resolve(menusArr)
    }
}

//批量保存
const nodeSaveLoading = ref(false)
const NodeSaveClick = async () => {
    const keys = treeSelectNode.value
    const rows = treeSelectdata.value
    if (rows.length <= 0 || keys.length <= 0) {
        window?.$message?.warning('请先在左侧项目树选择节点')
        return
    }
    //判断是否满足条件
    let result = false
    if (!website.localModel) {
        result = rows.every(({ colorStatus }) => {
            return colorStatus === 1 || colorStatus === 2
        })
    } else {
        //183 甬台温
        result = rows.every(({ colorStatus }) => {
            return colorStatus === 1 || colorStatus === 2 || colorStatus === 4
        })
    }
    if (!result) {
        window?.$message?.warning('只能选择未上报的节点进行辅助保存')
        return
    }
    //发起请求
    nodeSaveLoading.value = true
    const { error, code, msg } = await wbsApi.save_nodeId(
        {
            projectId: projectId.value,
            contractId: contractId.value,
            classify: authBtnTabKey.value,
            nodeIds: keys.join(),
        },
        false,
    )
    nodeSaveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('批量保存成功')
        window?.location?.reload() //刷新页面
    }
}

//排序
const tableSortFormRef = ref(null)
const sortFormShow = ref(false)
const tableSortFormColumn = [{ key: 'nodeName', name: '名称' }]
const tableSortFormData = ref([])
const sortFormClick = () => {
    sortFormShow.value = true
    tableSortFormData.value = deepClone(ListItemDatas.value)
}

// 行拖拽
const sortFormDropTap = (rows) => {
    tableSortFormData.value = [] // 先清空，否则排序会异常
    nextTick(() => {
        tableSortFormRef.value?.setData(rows)
    })
}

// 点击排序
const rowSortFormTap = (rows) => {
    tableSortFormData.value = [] // 先清空，否则排序会异常
    nextTick(() => {
        tableSortFormData.value = rows
    })
}

//关闭排序
const sortFormClose = () => {
    sortFormShow.value = false
    sortFormLoading.value = false
    tableSortFormData.value = []
}

//提交排序
const sortFormLoading = ref(false)
const sortFormSubmit = async () => {
    const treeId = primaryKeyId.value
    if (isNullES(treeId)) {
        window?.$message?.warning('请先在左侧项目树选择一个节点')
        return
    }
    const rows = tableSortFormData.value
    const ids = arrToKey(rows, 'pkeyId')
    //发起请求
    sortFormLoading.value = true
    const { error, code, msg } = await wbsApi.formTableSort(
        {
            projectId: projectId.value,
            contractId: contractId.value,
            classify: authBtnTabKey.value,
            nodeIds: treeId,
            ids: ids,
        },
        false,
    )
    sortFormLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        window?.location?.reload() //刷新页面
    } 
}

//文件题名
const titleInput = ref('')

//节点基础数据
const nodeBaseDataModalDialog = ref(false)

const nodeBaseDataClick = async ()=>{
    await nextTick()
    await getnodeBaseData()

    nodeBaseDataModalDialog.value = true
}
const nodeBaseDataLoad = ref(false)
const getnodeBaseData = async ()=>{
  
    const { error, code, msg, data } = await nodeBaseApi.getNodeData(
        {
            pKeyId: primaryKeyId.value,
        },
    )


    if (!error && code === 200) {
    
         autoFormData.value = getObjValue(data)
    } 
}
const getOrSaveNodeBaseInfo = async ()=>{
  
  const { error, code, msg, data } = await nodeBaseApi.getOrSaveNodeBaseInfo(
      {
          pKeyId: primaryKeyId.value,
      },
  )


  if (!error && code === 200) {
      console.log(data, 'data')
       autoFormData.value = getObjValue(data)
       autoFormData.value.unit = data.unit === null ? '' : data.unit || ''
       autoFormData.value.subUnit = data.subUnit === null ? '' : data.subUnit || ''
       autoFormData.value.division = data.division === null ? '' : data.division || ''
       autoFormData.value.subDivision = data.subDivision === null ? '' : data.subDivision || ''
       autoFormData.value.subItem = data.subItem === null ? '' : data.subItem || ''
       autoFormData.value.item = data.item === null ? '' : data.item || ''
       autoFormData.value.processes = data.processes === null ? '' : data.processes || ''
       window?.$message?.success(msg)
  } 
}
const nodeBaseDataModalClose = ()=>{
    nodeBaseDataModalDialog.value = false
}
const autoFormData = ref(
    {
        unit: '',
        subUnit: '',
        division: '',
        subDivision: '',
        subItem: '',
        item: '',
        processes: '',
      },
)
const resetForm = ()=>{
    getOrSaveNodeBaseInfo()
}
const nodeBaseDataModalSave = async ()=>{
    nodeBaseDataLoad.value = true
    const { error, code, msg } = await nodeBaseApi.save(
        {
            nodeId: primaryKeyId.value,
            ...autoFormData.value,
        },
    )
    nodeBaseDataLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg || '操作成功')
        nodeBaseDataModalDialog.value = false
        //刷新页面
    // setTimeout(() => {
    //     window?.location?.reload()
    // }, 1000)
    const activeKey = ListItemRef.value?.getActiveKey()
    getTableDataAll(activeKey)
  
    }
}
const showMoveClick = async (node, data)=>{
    await nextTick()

    
      moveDialogShow.value = true
}
const moveDialogShow = ref(false)
/**
* 关闭移动对话框
*
* 当点击保存按钮时，调用此方法关闭移动对话框。
*/
const moveSaveClick = ()=>{
    moveDialogShow.value = false
   // 刷新页面
   window?.location?.reload()
}
// 收藏夹
// 控制tooltip显示状态
const collectListVisible = ref(false)
const collectListClick = async ()=>{
   
      await nextTick()
    getCollectList()
       // 点击时显示收藏夹列表
    collectListVisible.value = true
     setTimeout(initSortableCollect, 0)
}
// 触发元素引用
const triggerRef = ref(null)
// 显示添加输入框
const showAddInput = ref(false)
// 新文件夹名称
const newFolderName = ref('')
// 文件夹列表


// 最多显示5个文件夹
const confirmAddFolderLoad = ref(false)

// 确认添加文件夹
const confirmAddFolder = async () => {

if (!newFolderName.value.trim()) return window?.$message?.error('请输入文件夹名称')
    confirmAddFolderLoad.value = true
    const { error, code, msg } = await collectApi.saveOrUpdateFolder(
        {
 
            nodeId: primaryKeyId.value,
            contractId: contractId.value,
            name: newFolderName.value.trim(),
            type:1,
        },
        false,
    )
    confirmAddFolderLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        newFolderName.value = ''
        showAddInput.value = false
        getCollectList()
    } 
}

// 取消添加文件夹
const cancelAddFolder = async (id) => {
  newFolderName.value = ''
  showAddInput.value = false
    
}
const removeCollect = async (id)=>{
    const { error, code, msg } = await collectApi.deleteFolder({
        id,
    })
    if (!error && code === 200) {
        window?.$message?.success(msg)
        getCollectList()
    }
}

// 删除文件夹
const deleteFolder = async (index, item) => {
//   collectList.value.splice(index, 1)
  HcDelMsg(async (resolve) => {
            await removeCollect(item.id)
            resolve() //关闭弹窗的回调
            collectListVisible.value = true

        })
}

// 控制缩放状态的变量
const isScaling = ref(false)

// 点击事件处理函数
const handleClick = () => {
  // 触发缩放效果
  isScaling.value = true
  
  // 缩放动画结束后重置状态
  setTimeout(() => {
    isScaling.value = false
  }, 300) // 与CSS过渡时间保持一致

   //重新加载左边树
   isLookHistory.value = false
    isLookHide.value = true
   isSearchTree.value = false
   searchTreeVal.value = ''
        isShowLeft.value = false
        setTimeout(() => {
            isShowLeft.value = true
        }, 500)
        getTableDataAll()
}


//收藏
const collectTreeData = ref({})
const collectClick = async (data)=>{
    collectTreeData.value = data

    if (data.isCollect === 0) {
        
     collectDialog.value = true
     await nextTick()

     getCollectList()
    } else {
        console.log('取消收藏')
        collectModalCancel()
        
    }

}
const collectModalCancel = async ()=>{
     const { error, code, msg } = await collectApi.collect(
        {
            id:'',
            nodeId: collectTreeData.value.primaryKeyId,
            contractId: contractId.value,
            name: '',
            type:0,
        },
        false,
    )
    if (!error && code === 200) {
        window?.$message?.success(msg)
         collectTreeData.value.isCollect = 0

        
    }
}
const collectDialog = ref(false)
const collectLoad = ref(false)
const collectModalClose = ()=>{
    collectDialog.value = false
   
}
const checkCollect = (val)=>{

    collectList.value.forEach(item => {
        if (item.id === val) {
            collectForm.value.name = item.name
          
        }
    })


}
const saveCollectLoad = ref(false)
const collectModalSave = async ()=>{
     const validate = await formValidate(collectFormRef.value)
     if (!validate) return
     saveCollectLoad.value = true
     const { error, code, msg } = await collectApi.collect(
        {
            id:collectForm.value.id,
            nodeId: collectTreeData.value.primaryKeyId,
            contractId: contractId.value,
            name: collectForm.value.name,
            type:1,
        },
        false,
    )
     saveCollectLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
         collectTreeData.value.isCollect = 1

         collectDialog.value = false
    }
}
const collectFormRef = ref(null)
const collectForm = ref({
    name:'',
    id:'',
})
const collectRules = ref({
     id: [
    {
      required: true,
      message: '请选择收藏夹',
      trigger: 'change',
    },
  ],
})
const collectList = ref([])

const editInput = ref(null)
// 文件夹列表容器的引用
const folderListContainer = ref(null)
// Sortable实例
let sortableInstance = null

// 初始化拖拽排序功能
const initSortableCollect = () => {
  // 确保容器已挂载且还没有初始化过
  if (folderListContainer.value && !sortableInstance) {
    sortableInstance = new Sortable(folderListContainer.value, {
      animation: 150, // 拖拽动画时长
      handle: '.folder-item', // 指定可以拖拽的元素
      ghostClass: 'sortable-ghost', // 拖拽时的占位元素类名
      onEnd: handleSortEnd, // 拖拽结束时的回调
    })
  }
}

// 处理拖拽结束事件
const handleSortEnd = async (evt) => {
  // 保存原始顺序，用于出错时恢复
  const originalList = [...collectList.value]
  
  // 从原位置移除并插入到新位置
  const [movedItem] = collectList.value.splice(evt.oldIndex, 1)
  collectList.value.splice(evt.newIndex, 0, movedItem)
  
  // 调用API保存新的排序
  
    const folderIds = arrToKey(collectList.value, 'id')
    const { error, code, msg } = await collectApi.sortFolder({
     
      ids: folderIds, 
    })
    
    if (!error && code === 200) {
      window?.$message?.success(msg)
      getCollectList()
    } else {
    // 出错时恢复原始顺序
        collectList.value = originalList
    }

    
    
  
}

// 监听collectList变化，数据加载完成后初始化拖拽
watch(collectList, (newVal) => {
  if (newVal.length > 0) {
    // 延迟初始化，确保DOM已更新
    setTimeout(initSortableCollect, 0)
  }
})

const getCollectList = async ()=>{
  collectLoad.value = true
    const { error, code, msg, data } = await collectApi.folderList(
        {
            contractId: contractId.value,
        },
    )
  collectLoad.value = false
    if (!error && code === 200) {
         collectList.value = getArrValue(data)
              collectList.value = getArrValue(data).map(folder => ({
                ...folder,
                isEditing: false, // 是否处于编辑状态
                editableName: folder.name, // 编辑框绑定的值
                originalName: folder.name, // 原始名称，用于取消编辑时恢复
            }))
    } else {
        collectList.value = []
    }

}
// 开始编辑文件夹名称
const startEdit = (folder) => {
        collectList.value.forEach((ele)=>{
        ele.isEditing = false

    })
  // 记录原始名称用于取消编辑时恢复
  folder.originalName = folder.name
  // 设置编辑状态并初始化编辑框的值
  folder.isEditing = true
  folder.editableName = folder.name
  
  // 确保输入框渲染后自动聚焦
  nextTick(() => {
    const input = document.querySelector(`.folder-item:nth-child(${collectList.value.indexOf(folder) + 1}) .el-input__inner`)
    if (input) input.focus()
  })
}

// 确认编辑
const confirmEdit = async (index, folder) => {

  
  // 简单验证
  if (!folder.editableName.trim()) {
    window.$message.warning('文件夹名称不能为空')
    return
  }
  
 
    // 调用修改文件夹名称的API
    const { error, code, msg } = await collectApi.saveOrUpdateFolder({
         nodeId: primaryKeyId.value,
            contractId: contractId.value,
            name: folder.editableName.trim(),
            type:1,
            id: folder.id,
    })
    
    if (!error && code === 200) {
      // 更新成功，保存新名称
      
        window.$message.success(msg)
          folder.isEditing = false
          getCollectList()

    } 
  } 
  const folderId = ref(null)
const selectFolder = async (folder) => {
    collectListVisible.value = false
  folderId.value = folder.id
    isSearchTree.value = true
    getSearchTreeData('folder')
 
}


// 输入框失焦处理
const handleEditBlur = (folder) => {
  // 如果仍然处于编辑状态（未通过确认按钮提交），恢复原始名称
  if (folder.isEditing) {
    folder.editableName = folder.originalName
    // folder.isEditing = false

  }
}

// 获取文件夹列表的方法需要修改，为每个文件夹添加编辑相关属性


//查看最近操作的节点
const lookLoading = ref(false)
const isLookHistory = ref(false)
const lookHistory = ()=>{
    isLookHistory.value = true

     isSearchTree.value = true
    getSearchTreeData('history')
}

//隐藏节点
//隐藏节点
const eyeClick = (data)=>{
nodeDataInfo.value = data
    hideTreeNode(data)

}
const hideSaveLoading = ref(false)
const hideTreeNode = async (data) => {
  hideSaveLoading.value = true
    if ([3, 4].includes(data.colorStatus)) {
        window.$message.warning('已审批”、“已填报-待审批”的节点不允许隐藏；')
        return
    }

    //发起请求
    hideSaveLoading.value = true
    const { error, code, msg } = await wbsApi.updateNodeStates(
        {
            ids: data['primaryKeyId'],
            status: 2,
        },
        false,
    )
    hideSaveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg || '操作成功')
        setTimeout(() => {
            window?.location?.reload() //刷新页面
        }, 1000)
    } 
}
const isLookHide = ref(true)
const handleClickBack = ()=>{
     //重新加载左边树
     folderId.value = null
      isLookHide.value = true
   isLookHistory.value = false


   isSearchTree.value = false
   searchTreeVal.value = ''
        isShowLeft.value = false
        setTimeout(() => {
            isShowLeft.value = true
        }, 500)
        getTableDataAll()
}
const lookHideList = ()=>{
    isLookHide.value = false
    isSearchTree.value = true
    getSearchTreeData('hide')
}
</script>

<style lang="scss" scoped>
@import "../../styles/data-fill/wbs.scss";

.back-button {
  /* 确保按钮有足够的空间来展示放大效果 */
  padding: 4px;
  /* 过渡效果：所有属性变化在300ms内完成，使用ease-out缓动函数 */
  transition: all 300ms ease-out;
  /* 防止放大时内容溢出 */
  overflow: hidden;
}

/* 缩放状态的样式 */
.back-button.scaling {
  /* 放大到1.2倍 */
  transform: scale(1.2);
}
.hc-project-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:20px;
 
}
.title-input{
    height: 30px;
    padding: 10px;
    border: 1px solid #dcdfe6;
    background-color: #dcdfe6;
    line-height: 13px;
    border-radius: 5px;
    font-weight: 500;
    margin-left: 4px;
    max-width: 300px;
    overflow-x: auto;
    overflow-y: hidden;

}
.hc-add-node-modal-foot-box {
    position: relative;
    display: flex;
    align-items: center;
    .left-box {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
    }
    .right-box {
        position: relative;
    }
}
.hc-expansion-contraction-tree {
    position: absolute;
    left: -13px;
    top: 0;
    width: 10px;
    height: 100%;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8c9099;
    font-size: 22px;
    border-radius: 5px;
    transition: background 0.2s;
    background: rgba(255, 255, 255, 0);
    &:hover {
        background: #f1f5f8;
        color: var(--el-color-primary);
    }
}
.hc-table-form-action-tip {
    position: absolute;
    bottom: 77px;
    width: 100%;
}
.data-fill-wbs-hide-btn {
    background: #fff;
    color: #ffffff;
}

html.dark .data-fill-wbs-hide-btn {
    background: #141414;
    color: #141414;
}

html.theme-dark {
    .bg-svg-xml {
        background-color: initial;
        background-image: initial;
    }
    .hc-layout-box
        .hc-layout-content-box
        .hc-card-max-h-box.node-tree
        .hc-tree-foot-tip-box {
        border-top: 1px solid #303030;
    }
}
</style>

<style lang="scss">
.hc-tree-box1 .el-tree-node {
    .el-checkbox {
        margin-right: 0;
        .el-checkbox__inner {
            display: none;
        }
    }
    .is-leaf + .el-checkbox {
        margin-right: 8px;
        .el-checkbox__inner {
            display: inline-block;
        }
    }
}

.data-fill-wbs-content {
    position: relative;
    height: 100%;
    .n-drawer-container {
        margin: -20px -24px;
    }
    .n-drawer.n-drawer--top-placement {
        height: auto !important;
        background-color: initial;
        pointer-events: none;
        bottom: 0;
    }
    .drawer-data-fill-content-box {
        position: relative;
        height: 100%;
        padding: 24px;
        .n-card {
            pointer-events: auto;
            height: 100%;
            overflow: auto;
        }
        .data-fill-content {
            position: relative;
            height: 100%;
            overflow-y: auto;
            scroll-behavior: smooth;
            .data-fill-list-box .data-fill-list-item-content {
                height: calc(100vh - 470px);
                .data-fill-table-form-box {
                    height: 100%;
                }
            }
        }
        .data-fill-foot {
            position: relative;
            text-align: center;
        }
    }
}
.n-card.hc-card-overflow-box .n-card__content {
    padding: 24px;
}
.n-card.hc-custom-card > .n-card-header {
    padding: 15px 24px;
}
.n-card.hc-custom-card.copy {
    width: 1200px;
    max-height: 90vh;
    overflow: auto;
    .n-card-header .n-card-header__close {
        display: none;
    }
    &.one {
        width: 600px;
    }
    &.many {
        width: 1200px;
    }
}
.img-preview-box {
    position: relative;
    height: 100%;
    width: 100%;
}
.hc-layout-content-box {
    position: relative;
}

.iscusor {
    cursor: pointer;
}
.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);
}
.copy-node-form-box {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #efeff5;
}
.hc-position-input-icon {
    position: relative;
    margin-bottom: 0;
    .el-form-item__content {
        position: relative;
        .el-textarea .el-textarea__inner {
            padding-right: 30px;
        }
        .hc-icon-i {
            position: absolute;
            right: 10px;
            bottom: 0;
            font-size: 20px;
            cursor: pointer;
            color: #0081ff;
            opacity: 1;
            transition: opacity 0.2s;
            &:hover {
                opacity: 0.5;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.hc-tree-back-to{
    display: flex;
    justify-content: space-between;
}
/* 新增拖拽排序相关样式 */
.sortable-ghost {
  opacity: 0.5;
  background: #f5f5f5;
  justify-content: center;
}

.hc-attachment-item {
  transition: all 0.3s;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.hc-attachment-content {
  min-height: 20px;
}

/* 原有样式保持不变 */
.hc-attachment-card {
  margin-bottom: 16px;
  
  .hc-attachment-header {
    font-weight: bold;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid #409eff;

  }
  
  .hc-attachment-file-name {
    display: flex;
    align-items: center;
    
    .name {
      margin-left: 8px;
    }
  }
  
  .hc-attachment-btn-box {
    display: flex;
  }
}
</style>

<style>
.custom-tooltip-pro {
  background-color: #7691E0 !important;
  color: white !important;
  border: none !important;
  max-width: 300px !important; /* 最大宽度 */
  padding: 10px !important;
   font-size: 14px;




}

.tooltip-content {
  width: 100%;
}

.new-folder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.add-icon {
  font-size: 18px;
}

.add-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 5px;
  margin-bottom: 8px;
  background: white;
}

.folder-input {
  flex: 1;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 4px;
 
}

.input-buttons {
  display: flex;
  gap: 8px;
}

.confirm-icon {
  color: #4CAF50;
  font-size: 18px;
}

.cancel-icon {
  color: #f44336;
  font-size: 18px;
}

.folder-list-container {
  max-height: 200px; /* 最大高度 */
  overflow-y: auto; /* 超出滚动 */
  overflow-x: hidden;
}

.folder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.folder-name {
  margin-right: 15px; /* 名称与删除图标间距 */
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-icon {
  font-size: 18px;
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* 滚动条样式优化 */
.folder-list-container::-webkit-scrollbar {
  width: 6px;
}

.folder-list-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
</style>