for_client/src/views/ledger/write.vue

<template>
    <div class="hc-layout-box">
        <div v-if="sbTableKey !== 'weather'" :style="`width:${leftWidth}px;`" class="hc-layout-left-box bg-white">
            <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">
                <el-scrollbar>
                    <WbsTree
                        :auto-expand-keys="treeAutoExpandKeys" :contract-id="contractId" :project-id="projectId"
                        @nodeTap="nodeWbsElTreeClick"
                    />
                </el-scrollbar>
            </div>
            <!-- 左右拖动 -->
            <div class="horizontal-drag-line" @mousedown="onmousedown" />
        </div>
        <div class="hc-layout-content-box ledger-write-box">
            <HcTabsSimple :cur="sbTableKey" :datas="sbTableData" @tabClick="sbTableClick">
                <template #tab-internal>
                    <HcInternal
                        v-if="sbTableKey === 'internal'" :contract-id="contractId" :project-id="projectId"
                        :tree-data="nodeDataInfo"
                    />
                </template>
                <template #tab-construction>
                    <HcConstruction
                        v-if="sbTableKey === 'construction'" :contract-id="contractId" :project-id="projectId"
                        :tree-data="nodeDataInfo"
                    />
                </template>
                <template #tab-weather>
                    <HcWeather v-if="sbTableKey === 'weather'" :contract-id="contractId" :project-id="projectId" />
                </template>
            </HcTabsSimple>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { useRoute, useRouter } from 'vue-router'
import WbsTree from './components/WbsTree.vue'
import HcInternal from './components/internal.vue'
import HcWeather from './components/weather.vue'
import HcConstruction from './components/construction.vue'
import { getStoreValue, setStoreValue } from '~src/utils/storage'

//变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const projectInfo = ref(useAppState.getProjectInfo)
const isCollapse = ref(useAppState.getCollapse)

//路由参数
const routerQuery = useRoutes?.query
const dataType = routerQuery?.type || 'weather'

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

//自动展开缓存
const treeAutoExpandKeys = ref([])

//类型处理
const sbTableKey = ref(dataType)
const sbTableData = ref([
    { icon: 'bar-chart-box', label: '内业台账', key: 'internal' },
    { icon: 'tools', label: '施工台账', key: 'construction' },
    { icon: 'sun-cloudy', label: '天气台账', key: 'weather' },
])

const sbTableClick = (key) => {
    sbTableKey.value = key
    router.push({
        path: useRoutes.path,
        query: { type: key },
    })
    getTypeData(key)
}

//加载完成
onMounted(() => {
    getTypeData(dataType)
})

//根据类型获取相关数据
const getTypeData = (key) => {
    if (key === 'internal' || key === 'construction') {
        treeAutoExpandKeys.value = getStoreValue('ledgerWriteTreeKeys') || []
    }
}

//树被点击
const nodeDataInfo = ref({})
const nodeWbsElTreeClick = ({ data, keys }) => {
    nodeDataInfo.value = data
    setStoreValue('ledgerWriteTreeKeys', keys)
    treeAutoExpandKeys.value = keys || []
}

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

<style lang="scss" scoped>
@import "../../styles/ledger/write.scss";

.hc-layout-box .hc-layout-left-box .hc-tree-box {
    height: calc(100% - 81px);
}
</style>

<style lang="scss">
.hc-layout-box .hc-layout-content-box.ledger-write-box .hc-card-box.el-card {
    border-radius: 0 var(--el-card-border-radius) var(--el-card-border-radius) var(--el-card-border-radius);
    height: calc(100% - 44px);
}
</style>