archives/src/views/custody/early-admin.vue

<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-early-left-box" :style="'width:' + leftWidth + 'px;'">
            <div class="hc-layout-header-box">
                <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 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"/>
                    </el-scrollbar>
                </div>
                <!--左右拖动-->
                <div class="horizontal-drag-line" @mousedown="onmousedown"/>
            </div>
        </div>
        <div class="hc-page-content-box ledger-write-box">
            <TabExpire :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo"/>
        </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 TabExpire from "./components/tab-expire.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 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>

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

<style lang="scss">

</style>