archives/src/views/transfer/initial.vue

<template>
    <div class="hc-page-layout-box">
        <div v-if="sbTableKey === 'classify'" class="hc-layout-left-box" :style="`width:${leftWidth}px;`">
            <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 v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :project-id="projectId" :contract-id="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 v-if="sbTableKey === 'collect'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
                </template>
                <template #tab-classify>
                    <TableClassify v-if="sbTableKey === 'classify'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
                </template>
            </HcTabsSimple>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } 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)
    nodeDataInfo.value = 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>