archives/src/views/custody/early.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-early-left-box" :style="'width:' + leftWidth + 'px;'" v-if="sbTableKey !== 'spite'">
            <div class="hc-layout-header-box" v-if="sbTableKey === 'expire'">
                <div class="header">到期档案预警</div>
                <div class="hc-early-num-box">
                    <div class="early-num-item">
                        <div class="num-box">
                            <HcIcon name="notification-2" ui="text-red" fill/>
                            <span class="num">291</span>
                        </div>
                        <div class="text">本周到期</div>
                    </div>
                    <div class="early-num-item">
                        <div class="num-box">
                            <HcIcon name="notification-3" ui="text-orange" fill/>
                            <span class="num">291</span>
                        </div>
                        <div class="text">1个月到期</div>
                    </div>
                    <div class="early-num-item">
                        <div class="num-box">
                            <HcIcon name="notification-4" ui="text-blue" fill/>
                            <span class="num">2291</span>
                        </div>
                        <div class="text">半年到期</div>
                    </div>
                </div>
            </div>
            <div class="hc-layout-left-box" :class="sbTableKey === 'expire' ? 'is-header' : ''">
                <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" @menuTap="ElTreeMenuClick" :autoExpandKeys="treeAutoExpandKeys"/>
                    </el-scrollbar>
                </div>
                <!--左右拖动-->
                <div class="horizontal-drag-line" @mousedown="onmousedown"/>
            </div>
        </div>
        <div class="hc-page-content-box ledger-write-box">
            <HcTabsSimple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
                <template #tab-reform>
                    <TabReform :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'reform'"/>
                </template>
                <template #tab-expire>
                    <TabExpire :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'expire'"/>
                </template>
                <template #tab-spite>
                    <TabSpite :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'spite'"/>
                </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 TabReform from "./components/tab-reform.vue"
import TabExpire from "./components/tab-expire.vue"
import TabSpite from "./components/tab-spite.vue"
import {getStoreValue, setStoreValue} from '~src/utils/storage'

//变量
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('reform')
const sbTableData = ref([
    {icon: 'edit-2', label: '档案整改', key: 'reform'},
    {icon: 'timer-2', label: '档案到期', key: 'expire'},
    {icon: 'spam', label: '恶意访问记录', key: 'spite'},
])
const sbTableClick = (key) => {
    sbTableKey.value = key
}

//树操作
const nodeDataInfo = ref({})
//自动展开缓存
const treeAutoExpandKeys = ref(getStoreValue('earlyExpandKeys') || [])
const projectTreeClick = ({key, node, data, keys}) => {
    console.log(data)
      //缓存展开的节点
      setStoreValue('earlyExpandKeys', keys)
        treeAutoExpandKeys.value = keys || []
}
//树菜单被点击
const ElTreeMenuClick = async ({key, node, data, keys}) => {
    setStoreValue('earlyExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}

//左右拖动，改变树形结构宽度
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>

<style lang="scss" scoped>
@import '~style/custody/scoped/early.scss';
</style>

<style lang="scss">
.hc-page-layout-box .hc-page-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>