|
@@ -1,20 +1,67 @@
|
|
|
<template>
|
|
|
- <HcCard title="您好" :scrollbar="false" v-if="wbsTypeTabKey === 'map'">
|
|
|
- <template #extra>
|
|
|
- <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
|
|
|
- </template>
|
|
|
- <NodeTree ref="NodeTreeRef" :data="NodeTreeData" :format="NodeTreeFormat" :autoExpandKeys="TreeAutoExpandKeys" :menus="ElTreeMenu" :isMark="TreeMark" isColor
|
|
|
- :accordion='NodeTreeAccordion' @nodeClick="NodeTreeClick" @expand="expandClick" @nodeDblClick="NodeTreeDblClick" @menuClick="NodeTreeMenuClick"/>
|
|
|
- <template #action>
|
|
|
- <div class="hc-tree-mp-tip-box">
|
|
|
- <div class="dot-view green">已审批</div>
|
|
|
- <div class="dot-view black">未填报</div>
|
|
|
- <div class="dot-view orange">已填报-待审批</div>
|
|
|
- <div class="dot-view blue">已填报-未上报</div>
|
|
|
+ <div class="h-full">
|
|
|
+ <HcCard :scrollbar="false" v-if="wbsTypeTabKey === 'map'">
|
|
|
+ <template #extra>
|
|
|
+ <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
|
|
|
+ </template>
|
|
|
+ <NodeTree ref="NodeTreeRef" :data="NodeTreeData" :format="NodeTreeFormat" :autoExpandKeys="TreeAutoExpandKeys" :menus="ElTreeMenu" :isMark="TreeMark" isColor
|
|
|
+ :accordion='NodeTreeAccordion' @nodeClick="NodeTreeClick" @expand="expandClick" @nodeDblClick="NodeTreeDblClick" @menuClick="NodeTreeMenuClick"/>
|
|
|
+ <template #action>
|
|
|
+ <div class="hc-tree-mp-tip-box">
|
|
|
+ <div class="dot-view green">已审批</div>
|
|
|
+ <div class="dot-view black">未填报</div>
|
|
|
+ <div class="dot-view orange">已填报-待审批</div>
|
|
|
+ <div class="dot-view blue">已填报-未上报</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </HcCard>
|
|
|
+ <div class="hc-layout-box" v-if="wbsTypeTabKey === 'tree'">
|
|
|
+ <div class="hc-layout-left-box" id="wbs-left-tree" :style="'width:' + leftWidth + 'px;'">
|
|
|
+ <div class="hc-project-box">
|
|
|
+ <div class="hc-project-icon-box">
|
|
|
+ <HcIcon name="layers"/>
|
|
|
+ </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">
|
|
|
+ <div class="hc-search-tree-val">
|
|
|
+ <el-input v-model="searchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable>
|
|
|
+ <template #suffix>
|
|
|
+ <HcIcon name="search" ui="text-2xl"/>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="hc-tree-scrollbar">
|
|
|
+ <el-scrollbar>
|
|
|
+ <WbsTree ref="HcTreeRef" :params="treeParams" :props="wbsElTreeProps" :menus="ElTreeMenu" :isMark="TreeMark" :autoExpandKeys="TreeAutoExpandKeys" @node-click="wbsElTreeClick" @menuTap="ElTreeMenuClick"/>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hc-tree-foot-tip-box">
|
|
|
+ <div class="dot-view green">已审批</div>
|
|
|
+ <div class="dot-view black">未填报</div>
|
|
|
+ <div class="dot-view orange">已填报-待审批</div>
|
|
|
+ <div class="dot-view blue">已填报-未上报</div>
|
|
|
+ </div>
|
|
|
+ <!--左右拖动-->
|
|
|
+ <div class="horizontal-drag-line" @mousedown="onmousedown"/>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </HcCard>
|
|
|
-
|
|
|
+ <div class="hc-layout-content-box">
|
|
|
+ <HcCard :scrollbar="false">
|
|
|
+ <template #extra>
|
|
|
+ <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
|
|
|
+ </template>
|
|
|
+ 456789
|
|
|
+ <template #action>
|
|
|
+ 123456
|
|
|
+ </template>
|
|
|
+ </HcCard>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -22,7 +69,7 @@ import {ref,watch,nextTick,onMounted} from "vue";
|
|
|
import {useRoute} from 'vue-router'
|
|
|
import router from '~src/router/index';
|
|
|
import {useAppStore} from "~src/store/index";
|
|
|
-import {HcIcon} from "~src/plugins/renderele";
|
|
|
+import {hIconJs} from "~src/plugins/renderele";
|
|
|
import HcTabs from "~com/plugins/naive/HcTabs.vue"
|
|
|
import HcTree from "~com/plugins/element/HcTree.vue"
|
|
|
import BtnTab from "~com/btnTab/index.vue"
|
|
@@ -32,6 +79,7 @@ import DragModal from "~com/dragModal/index.vue"
|
|
|
import ImgPreview from "~com/imgPreview/index.vue"
|
|
|
import HcReportModal from "~com/reportModal/index.vue"
|
|
|
import HcTreeNode from "./components/HcTreeNode.vue"
|
|
|
+import WbsTree from "./components/WbsTree.vue"
|
|
|
import wbsApi from "~api/data-fill/wbs"
|
|
|
import {deepClone} from "~src/utils/lib/util";
|
|
|
import {getTokenHeader} from '~src/api/request/header';
|
|
@@ -46,17 +94,17 @@ const projectId = ref(useAppState.getProjectId);
|
|
|
const contractId = ref(useAppState.getContractId);
|
|
|
const projectInfo = ref(useAppState.getProjectInfo);
|
|
|
const contractInfo = ref(useAppState.getContractInfo);
|
|
|
+const isCollapse = ref(useAppState.getCollapse)
|
|
|
+const bubbleVal = ref(useAppState.getBubble);
|
|
|
|
|
|
//路由参数
|
|
|
const routerQuery = useRoutes?.query;
|
|
|
const MenuBarKey = routerQuery?.MenuBarKey || '';
|
|
|
const typeName = routerQuery?.type || 'map'
|
|
|
|
|
|
+//自动展开缓存
|
|
|
const TreeAutoExpandKeys = ref(getStore({name: 'wbsTreeExpandKeys'}) || [])
|
|
|
|
|
|
-//按钮气泡开关
|
|
|
-const bubbleVal = ref(useAppState.getBubble);
|
|
|
-
|
|
|
//监听
|
|
|
watch(() => [
|
|
|
useAppState.getProjectId,
|
|
@@ -64,14 +112,14 @@ watch(() => [
|
|
|
useAppState.getProjectInfo,
|
|
|
useAppState.getContractInfo,
|
|
|
useAppState.getBubble,
|
|
|
-], ([UserProjectId, UserContractId, UserProjectInfo,UserContractInfo,Bubble]) => {
|
|
|
- //项目合同数据
|
|
|
+ useAppState.getCollapse
|
|
|
+], ([UserProjectId, UserContractId, UserProjectInfo, UserContractInfo, Bubble, Collapse]) => {
|
|
|
projectId.value = UserProjectId
|
|
|
contractId.value = UserContractId
|
|
|
projectInfo.value = UserProjectInfo
|
|
|
contractInfo.value = UserContractInfo
|
|
|
- //按钮气泡开关
|
|
|
bubbleVal.value = Bubble
|
|
|
+ isCollapse.value = Collapse
|
|
|
setContractType(UserContractInfo?.contractType)
|
|
|
})
|
|
|
//获取气泡数据
|
|
@@ -135,20 +183,19 @@ const setContractType = (contractType) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const wbsTypeTabChange = async (value) => {
|
|
|
- wbsTypeTabKey.value = value;
|
|
|
+const wbsTypeTabChange = async (item) => {
|
|
|
+ wbsTypeTabKey.value = item?.key;
|
|
|
isDrawer.value = false;
|
|
|
const keys = await NodeExpandKeys(true)
|
|
|
router.push({
|
|
|
path: useRoutes.path,
|
|
|
query: {
|
|
|
- MenuBarKey: MenuBarKey,
|
|
|
- type: value
|
|
|
+ type: item?.key
|
|
|
}
|
|
|
})
|
|
|
nextTick(() => {
|
|
|
TreeAutoExpandKeys.value = keys
|
|
|
- if (value === 'map') {
|
|
|
+ if (item?.key === 'map') {
|
|
|
queryMappingStructureTree()
|
|
|
}
|
|
|
})
|
|
@@ -162,31 +209,32 @@ const TreeMark = ref(false)
|
|
|
const setElTreeMenu = () => {
|
|
|
let newArr = [];
|
|
|
if (tree_menu_edit.value) {
|
|
|
- newArr.push({icon: HcIcon('hcicon-bianji'), label: '编辑节点', key: "edit"})
|
|
|
+ newArr.push({icon: hIconJs({name:'border_color'}), label: '编辑节点', key: "edit"})
|
|
|
}
|
|
|
if (tree_menu_mark.value) {
|
|
|
- newArr.push({icon: HcIcon('cicon-star-o'), label: '标记为首件', key: "mark"})
|
|
|
+ newArr.push({icon: hIconJs({name:'grade'}), label: '标记为首件', key: "mark"})
|
|
|
TreeMark.value = true
|
|
|
}
|
|
|
if (tree_menu_copy.value) {
|
|
|
- newArr.push({icon: HcIcon('cicon-file-copy-o'), label: '复制节点', key: "copy"})
|
|
|
+ newArr.push({icon: hIconJs({name:'difference'}), label: '复制节点', key: "copy"})
|
|
|
}
|
|
|
if (tree_menu_add.value) {
|
|
|
- newArr.push({icon: HcIcon('cicon-add-round-o'), label: '新增节点', key: "add"})
|
|
|
+ newArr.push({icon: hIconJs({name:'add_box'}), label: '新增节点', key: "add"})
|
|
|
}
|
|
|
if (tree_menu_up.value) {
|
|
|
- newArr.push({icon: HcIcon('hcicon-shangchuan'), label: '上传图纸', key: "upload"})
|
|
|
+ newArr.push({icon: hIconJs({name:'backup'}), label: '上传图纸', key: "upload"})
|
|
|
}
|
|
|
if (tree_menu_del.value) {
|
|
|
- newArr.push({icon: HcIcon('cicon-delete-line-o'), label: '删除节点', key: "del"})
|
|
|
+ newArr.push({icon: hIconJs({name:'delete'}), label: '删除节点', key: "del"})
|
|
|
}
|
|
|
if (tree_menu_sort.value) {
|
|
|
- newArr.push({icon: HcIcon('cicon-sort-order'), label: '调整排序', key: "sort"})
|
|
|
+ newArr.push({icon: hIconJs({name:'sort'}), label: '调整排序', key: "sort"})
|
|
|
}
|
|
|
ElTreeMenu.value = newArr
|
|
|
}
|
|
|
|
|
|
//树的配置
|
|
|
+const searchTreeVal = ref('')
|
|
|
const HcTreeRef = ref(null)
|
|
|
const wbsElTreeProps = {label: 'title', children: 'children', isLeaf: 'exsitChild'}
|
|
|
const treeParams = ref({contractId: contractId.value})
|
|
@@ -836,8 +884,9 @@ const ListItemOffsetTop = (offsetTop) => {
|
|
|
//左右拖动,改变树形结构宽度
|
|
|
const leftWidth = ref(382);
|
|
|
const onmousedown = () => {
|
|
|
+ const leftNum = isCollapse.value ? 142 : 272
|
|
|
document.onmousemove = (ve) => {
|
|
|
- let diffVal = ve.clientX + 2;
|
|
|
+ let diffVal = ve.clientX - leftNum;
|
|
|
if(diffVal >= 310 && diffVal <= 900) {
|
|
|
leftWidth.value = diffVal;
|
|
|
}
|