archives/src/views/transfer/initial.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'" v-if="sbTableKey === 'classify'">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                </div>
            </div>
            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box ledger-write-box">
            <HcTabsSimple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
                <template #tab-collect>
                    <TableCollect :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'collect'"/>
                </template>
                <template #tab-classify>
                    <TableClassify :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'classify'"/>
                </template>
            </HcTabsSimple>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
//import HcTree from "./components/hc-tree.vue"
import HcTree from "~src/components/tree/hc-tree.vue"
import TableCollect from "./components/table-collect.vue"
import TableClassify from "./components/table-classify.vue"

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

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

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

})

//树加载
const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}

//类型处理
const sbTableKey = ref('collect')
const sbTableData = ref([
    {icon: 'bar-chart-box', label: '汇总目录', key: 'collect'},
    {icon: 'menu-3', label: '分类目录', key: 'classify'},
])
const sbTableClick = (key) => {
    sbTableKey.value = key
}

//树操作
const nodeDataInfo = ref({})
const projectTreeClick = ({data}) => {
    console.log(data)
}


//左右拖动，改变树形结构宽度
const leftWidth = ref(382);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if(diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
</script>