变更划分

src/styles/app/main.scss

@@ -139,3 +139,60 @@ html, body, #app {
     opacity: 0;
     transform: translateX(30px);
 }
+
+
+.hc-page-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+    }
+    .hc-page-content-box {
+        flex: 1;
+        position: relative;
+        margin-left: 24px;
+    }
+}

src/views/data-fill/division.vue

@@ -1,28 +1,136 @@
 <template>
-    <div class="hc-layout-box">
-        系统分部分项划分
+    <div class="hc-page-layout-box">
+        <div 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 class="hc-tree-box">
+                <el-scrollbar>
+                    <WbsTree :menus="ElTreeMenu" :autoExpandKeys="treeAutoExpandKeys" :projectId="projectId" :contractId="contractId" isColor @nodeTap="wbsElTreeClick" @menuTap="ElTreeMenuClick"/>
+                </el-scrollbar>
+            </div>
+            <!--左右拖动-->
+            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
+        </div>
+        <div class="hc-page-content-box hc-division-page">
+            <div class="basic-info">
+                <HcCard title="当前节点基础信息">
+                    123456
+                </HcCard>
+            </div>
+            <div class="project-info">
+                <HcCard title="当前节点工程用表信息">
+                    123456
+                </HcCard>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-//import {ref,watch,onMounted} from "vue";
-//import {useRouter, useRoute} from 'vue-router'
-//import {useAppStore} from "~src/store";
+import {ref,watch,onMounted} from "vue";
+import {useAppStore} from "~src/store";
+import {useRouter, useRoute} from 'vue-router'
+import WbsTree from "./components/WbsTree.vue"
+import {isType, downloadBlob} from "vue-utils-plus"
+import {getStoreData, setStoreData} from '~src/utils/storage'
+import {HcIsButton} from "~src/plugins/IsButtons";
+
 
 //初始变量
-//const router = useRouter()
-//const useRoutes = useRoute()
-//const useAppState = useAppStore()
-//const {getObjValue, getArrValue} = isType()
+const router = useRouter()
+const useRoutes = useRoute()
+const useAppState = useAppStore()
+const {getObjValue, getArrValue} = isType()
 
 //全局变量
-//const projectId = ref(useAppState.getProjectId);
-//const contractId = ref(useAppState.getContractId);
+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
+})
+
+//自动展开缓存
+const treeAutoExpandKeys = ref(getStoreData('wbsTreeExpandKeys') || [])
+
+//渲染完成
+onMounted(() => {
+    setElTreeMenu()
+})
+
+//树被点击
+const wbsElTreeClick = ({node, data, keys}) => {
 
+}
+
+//树菜单配置
+const ElTreeMenu = ref([])
+const setElTreeMenu = () => {
+    let newArr = [];
+    if (HcIsButton('wbs_tree_add')) {
+        newArr.push({icon: 'add-circle', label: '新增节点', key: "add"})
+    }
+    if (HcIsButton('wbs_tree_copy')) {
+        newArr.push({icon: 'file-copy-2', label: '复制节点', key: "copy"})
+    }
+    if (HcIsButton('wbs_tree_edit')) {
+        newArr.push({icon: 'draft', label: '修改节点', key: "edit"})
+    }
+    if (HcIsButton('wbs_tree_sort')) {
+        newArr.push({icon: 'sort-asc', label: '调整排序', key: "sort"})
+    }
+    if (HcIsButton('wbs_tree_del')) {
+        newArr.push({icon: 'delete-bin', label: '删除节点', key: "del"})
+    }
+    ElTreeMenu.value = newArr
+}
+
+//树菜单被点击
+const ElTreeMenuClick = async ({key,node,data}) => {
+    //nodeItemInfo.value = node
+    //nodeDataInfo.value = data
+    //setTreeMenuDataClick({key,node,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>
+.hc-page-content-box.hc-division-page {
+    .basic-info {
+
+    }
+    .project-info {
 
+    }
+}
 </style>
 
 <style lang="scss">