FileManage/web/src/views/testdata/fileSynchronization/index.vue

<script lang="ts">
export default {
    name: "datamanagement",//实验数据管理
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick, defineAsyncComponent } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from "element-plus";
import { tstaskList, getTsNodesTree, tsFilesPage } from "@/api/datamanagement";


//左侧树的选择框
const projectId = ref()
const projectArr = ref([])
//左侧树配置
const pathid = ref()
const treeRef = ref();
const treedata = ref([])
const treeloading = ref(false)
const defaultProps = {
    children: "children",
    label: "nodeName"
};
const treeForm = ref({
    taskId: '',
    nodeName: '',
})
//工作空间
const props = {
    label: 'fileName',
    children: 'zones',
}
let count = 1
const workloading = ref(false)
//表格数据配置
const queryParams: any = ref({
    current: 1,
    size: 20,
    nodeId: '',//节点ID
    taskId: '',//项目Id
    childNode: '1'
});
const worktree = ref(false)
const workdata = ref([])
const workTreeArr = ref([])
const workId = ref()
//获取所有项目
function getProject() {
    tstaskList().then((res: any) => {
        projectArr.value = res.data
        projectId.value = projectArr.value[0].id
        gettreedata()
    })
}
//获取树数据
function gettreedata() {
    treeloading.value = true
    treeForm.value.taskId = projectId.value
    getTsNodesTree(treeForm.value).then((res: any) => {
        treedata.value = res.data
        treeloading.value = false
        pathid.value = treedata.value[0].nodeId
        nextTick(() => {
            treeRef.value?.setCurrentKey(pathid.value);
        });
        getdata()
    })
}
function handleNodeClick(data: any, node: any) {
    pathid.value = data.nodeId
    getdata()
}
//工作空间数据处理
const loadNode = (node: any, resolve: (data: any) => void) => {
    if (node.level === 0) {
        return resolve(workdata.value)
    }
    let hasChild = false
    console.log(node)
    if (node.data.isFile === 'FOLDER') {
        hasChild = true
        queryParams.value.id = node.data.id
        getdata()
    } else {
        hasChild = false
    }
    let data: any = []
    if (hasChild) {
        data = workTreeArr.value
    } else {
        data = []
    }

    resolve(data)

}
//工作空间树点击
const handleCheckChange = (
    data: any,
    checked: boolean,
    indeterminate: boolean
) => {
    console.log(data, checked, indeterminate)
}
//工作空间树获取
//获取表格数据
function getdata() {
    // workloading.value = true
    queryParams.value.nodeId = pathid.value
    queryParams.value.taskId = projectId.value
    tsFilesPage(queryParams.value).then((res: any) => {
        // workloading.value = false
        workdata.value = res.data.records
        worktree.value = true
        workTreeArr.value = workdata.value
    })

}
onMounted(() => {
    getProject()
});
//拖动条
const vMove = {
    mounted(el: any) {
        el.onmousedown = function (e: any) {
            var init = e.clientX;
            var parent: any = document.getElementById("silderLeft");
            const initWidth: any = parent.offsetWidth;
            document.onmousemove = function (e) {
                var end = e.clientX;
                var newWidth = end - init + initWidth;
                parent.style.width = newWidth + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
        };
    }
}
</script>

<template>
    <div class="faulttemplate-box">
        <aside id="silderLeft">
            <div>
                <el-select v-model="projectId" placeholder="请选择项目" @change="gettreedata()">
                    <el-option v-for="item in projectArr" :key="item.id" :label="item.taskName" :value="item.id" />
                </el-select>
                <div class="tree_sou">
                    <el-input v-model="treeForm.nodeName" style="width:100%;margin:10px 9px 10px 0px;"
                        placeholder="节点名称" clearable :suffix-icon="Search" @change="gettreedata()" />
                </div>

                <el-tree ref="treeRef" node-key="nodeId" :data="treedata" :highlight-current="true"
                    :props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick"
                    class="silderLeft-default" style="height: calc(100vh - 280px); overflow: auto;margin-top: 10px;">
                    <template #default="{ data }">
                        <span class="custom-tree-node">
                            <span class="text">{{ data.nodeName }}</span>
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="moveBtn" v-move>
                <div class="moveBtn-line"></div>
            </div>
        </aside>
        <section class="silderRight">
            <div class="tree_button"><el-button type="primary">文件差异性对比</el-button></div>
            <div class="tree_box">
                <div class="tree_left">
                    <div class="tree_title">工作空间:</div>
                    <div>
                        <el-tree v-if="worktree" style="max-width: 600px" :props="props" :load="loadNode" lazy
                            show-checkbox v-loading="workloading" @check-change="handleCheckChange" />
                    </div>
                </div>
                <div class="tree_left"></div>
            </div>

        </section>



    </div>
</template>

<style scoped lang="scss">
.faulttemplate-box {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    background-color: #f2f4f9;

}

#silderLeft {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    position: relative;

    .tree_sou {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &:hover {
        .moveBtn {
            opacity: 1;
        }
    }
}

/* 拖动条 */
.moveBtn {
    height: 100%;
    width: 15px;
    padding: 0 6px;
    opacity: 0;
    position: absolute;
    right: -15px;
    top: 0;
}

.moveBtn-line {
    width: 100%;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background-color: #60bfff;
}

.silderRight {
    flex: 1;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    padding: 15px;
    // padding-bottom: 0px;
    box-sizing: border-box;
    margin-left: 15px;

    .tree_button {
        margin-bottom: 15px;
    }

    .tree_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tree_left {
            width: 49%;
            height: calc(78vh);
            border: 1px solid red;

            .tree_title {
                font-size: 20px;
                font-weight: 400;

            }
        }
    }


}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 5px;
}

:deep() {
    .el-radio-group {
        display: block !important;

    }
}

//文字换行处理
.text {
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    // line-height: 1.5;
    max-width: 72%;
    // border: 1px solid #000;
    // padding: 10px;
}

:deep() {
    .el-tree-node__content {
        height: auto !important;
        line-height: 20px !important;
        // padding-left: 10px !important;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        padding: 0px !important;
    }
}
</style>