|
@@ -1,30 +1,30 @@
|
|
<template>
|
|
<template>
|
|
<div class="hc-page-layout-box">
|
|
<div class="hc-page-layout-box">
|
|
- <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'" v-if="sbTableKey === 'classify'">
|
|
|
|
|
|
+ <div v-if="sbTableKey === 'classify'" class="hc-layout-left-box" :style="`width:${leftWidth}px;`">
|
|
<div class="hc-project-box">
|
|
<div class="hc-project-box">
|
|
<div class="hc-project-icon-box">
|
|
<div class="hc-project-icon-box">
|
|
- <HcIcon name="stack"/>
|
|
|
|
|
|
+ <HcIcon name="stack" />
|
|
</div>
|
|
</div>
|
|
<div class="ml-2 project-name-box">
|
|
<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>
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
- <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
|
|
|
|
|
|
+ <div v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
|
|
<el-scrollbar>
|
|
<el-scrollbar>
|
|
- <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
|
|
|
|
|
|
+ <HcTree :project-id="projectId" :contract-id="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" />
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
- <!--左右拖动-->
|
|
|
|
- <div class="horizontal-drag-line" @mousedown="onmousedown"/>
|
|
|
|
|
|
+ <!-- 左右拖动 -->
|
|
|
|
+ <div class="horizontal-drag-line" @mousedown="onmousedown" />
|
|
</div>
|
|
</div>
|
|
<div class="hc-page-content-box ledger-write-box">
|
|
<div class="hc-page-content-box ledger-write-box">
|
|
<HcTabsSimple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
|
|
<HcTabsSimple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
|
|
<template #tab-collect>
|
|
<template #tab-collect>
|
|
- <TableCollect :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'collect'"/>
|
|
|
|
|
|
+ <TableCollect v-if="sbTableKey === 'collect'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
|
|
</template>
|
|
</template>
|
|
<template #tab-classify>
|
|
<template #tab-classify>
|
|
- <TableClassify :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'classify'"/>
|
|
|
|
|
|
+ <TableClassify v-if="sbTableKey === 'classify'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
|
|
</template>
|
|
</template>
|
|
</HcTabsSimple>
|
|
</HcTabsSimple>
|
|
</div>
|
|
</div>
|
|
@@ -32,23 +32,24 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import {ref, watch, onMounted} from "vue";
|
|
|
|
-import {useAppStore} from "~src/store";
|
|
|
|
|
|
+import { onMounted, ref, watch } from 'vue'
|
|
|
|
+import { useAppStore } from '~src/store'
|
|
//import HcTree from "./components/hc-tree.vue"
|
|
//import HcTree from "./components/hc-tree.vue"
|
|
-import HcTree from "~src/components/tree/hc-tree.vue"
|
|
|
|
-import TableCollect from "./components/table-collect.vue"
|
|
|
|
-import TableClassify from "./components/table-classify.vue"
|
|
|
|
|
|
+import HcTree from '~src/components/tree/hc-tree.vue'
|
|
|
|
+import TableCollect from './components/table-collect.vue'
|
|
|
|
+import TableClassify from './components/table-classify.vue'
|
|
|
|
+
|
|
|
|
|
|
//变量
|
|
//变量
|
|
const useAppState = useAppStore()
|
|
const useAppState = useAppStore()
|
|
-const projectId = ref(useAppState.getProjectId);
|
|
|
|
-const contractId = ref(useAppState.getContractId);
|
|
|
|
-const projectInfo = ref(useAppState.getProjectInfo);
|
|
|
|
|
|
+const projectId = ref(useAppState.getProjectId)
|
|
|
|
+const contractId = ref(useAppState.getContractId)
|
|
|
|
+const projectInfo = ref(useAppState.getProjectInfo)
|
|
const isCollapse = ref(useAppState.getCollapse)
|
|
const isCollapse = ref(useAppState.getCollapse)
|
|
|
|
|
|
//监听
|
|
//监听
|
|
watch(() => [
|
|
watch(() => [
|
|
- useAppState.getCollapse
|
|
|
|
|
|
+ useAppState.getCollapse,
|
|
], ([Collapse]) => {
|
|
], ([Collapse]) => {
|
|
isCollapse.value = Collapse
|
|
isCollapse.value = Collapse
|
|
})
|
|
})
|
|
@@ -67,8 +68,8 @@ const treeNodeLoading = () => {
|
|
//类型处理
|
|
//类型处理
|
|
const sbTableKey = ref('collect')
|
|
const sbTableKey = ref('collect')
|
|
const sbTableData = ref([
|
|
const sbTableData = ref([
|
|
- {icon: 'bar-chart-box', label: '汇总目录', key: 'collect'},
|
|
|
|
- {icon: 'menu-3', label: '分类目录', key: 'classify'},
|
|
|
|
|
|
+ { icon: 'bar-chart-box', label: '汇总目录', key: 'collect' },
|
|
|
|
+ { icon: 'menu-3', label: '分类目录', key: 'classify' },
|
|
])
|
|
])
|
|
const sbTableClick = (key) => {
|
|
const sbTableClick = (key) => {
|
|
sbTableKey.value = key
|
|
sbTableKey.value = key
|
|
@@ -76,24 +77,24 @@ const sbTableClick = (key) => {
|
|
|
|
|
|
//树操作
|
|
//树操作
|
|
const nodeDataInfo = ref({})
|
|
const nodeDataInfo = ref({})
|
|
-const projectTreeClick = ({data}) => {
|
|
|
|
|
|
+const projectTreeClick = ({ data }) => {
|
|
console.log(data)
|
|
console.log(data)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//左右拖动,改变树形结构宽度
|
|
//左右拖动,改变树形结构宽度
|
|
-const leftWidth = ref(382);
|
|
|
|
|
|
+const leftWidth = ref(382)
|
|
const onmousedown = () => {
|
|
const onmousedown = () => {
|
|
const leftNum = isCollapse.value ? 142 : 272
|
|
const leftNum = isCollapse.value ? 142 : 272
|
|
document.onmousemove = (ve) => {
|
|
document.onmousemove = (ve) => {
|
|
- let diffVal = ve.clientX - leftNum;
|
|
|
|
- if(diffVal >= 310 && diffVal <= 900) {
|
|
|
|
- leftWidth.value = diffVal;
|
|
|
|
|
|
+ let diffVal = ve.clientX - leftNum
|
|
|
|
+ if (diffVal >= 310 && diffVal <= 900) {
|
|
|
|
+ leftWidth.value = diffVal
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.onmouseup = () => {
|
|
document.onmouseup = () => {
|
|
- document.onmousemove = null;
|
|
|
|
- document.onmouseup = null;
|
|
|
|
|
|
+ document.onmousemove = null
|
|
|
|
+ document.onmouseup = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|