init

apps/web-ele/src/views/database/interface/unit.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed, readonly } from 'vue'
+import { Page } from '@vben/common-ui';
+import { ElSplitter,ElSplitterPanel,ElCard,ElTabs,ElTabPane } from 'element-plus';
+import { useElementSize } from '@vueuse/core'
+import { DbTree } from '#/components/db-tree';
+import { DbHst } from '#/components/db-hst';
+
+import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
+// import { sourceDataObject } from '#/components/db-hst/mockData'
+
+// 导入子组件
+import FieldName from './unit/FieldName.vue'
+import SubItem from './unit/SubItem.vue'
+import MeasureItem from './unit/MeasureItem.vue'
+import OtherItem from './unit/OtherItem.vue'
+import UnitSummary from './unit/UnitSummary.vue'
+import VariableSettings from './unit/VariableSettings.vue'
+import MaterialField from './unit/MaterialField.vue'
+const containerRef = ref<HTMLElement | null>(null)
+const { height: containerHeight } = useElementSize(containerRef)
+// const topContainerRef = ref<HTMLElement | null>(null)
+// const { height: topContainerHeight } = useElementSize(topContainerRef)
+// const bottomContainerRef = ref<HTMLElement | null>(null)
+// const { height: bottomContainerHeight } = useElementSize(bottomContainerRef)
+// const bottomPanelHeight = ref<number>(0)
+type Tree = { id: string; label: string; children?: Tree[] }
+const categoryTreeData = ref<Tree[]>([
+  {
+    id: '1',
+    label: '行业总类',
+    children: [
+      {
+        id: '2',
+        label: '广东',
+        children: [
+          { id: '3', label: '行业1' },
+          { id: '4', label: '行业2' },
+          { id: '5', label: '行业3' }
+        ]
+      }
+    ]
+  },
+  {
+    id: '11',
+    label: '行业2',
+    children: [
+      {
+        id: '12',
+        label: '广西',
+        children: [
+          { id: '13', label: '行业5' },
+          { id: '14', label: '行业6' },
+          { id: '15', label: '行业7' }
+        ]
+      }
+    ]
+  }
+])
+// const colHeaders = ref<string[]>(topColHeaders)
+const activeTab = ref('fieldName')
+const categoryHandleSelect = (node: Tree) => {
+  console.log('categoryhandleSelect',node)
+}
+
+const detailHandleSelect = (node: Tree) => {
+  // if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
+  //   // console.log('hstData.value',hstData.value)
+  //   // topHstRef.value.loadData(topHstData.value)
+  // }
+}
+
+
+onMounted(() => {
+})
+onUnmounted(() => {
+})
+
+</script>
+
+<template>
+<Page auto-content-height>
+   <!-- <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst> -->
+   <ElSplitter >
+      <ElSplitterPanel collapsible size="15%" :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
+            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+        </ElCard>
+      </ElSplitterPanel>
+      <ElSplitterPanel collapsible :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
+           <ElTabs v-model="activeTab" type="border-card" class="h-full">
+              <ElTabPane label="字段名称" name="fieldName" lazy>
+                <FieldName :height="containerHeight"/>
+              </ElTabPane>
+              <ElTabPane label="分部分项" name="subItem" lazy>
+                <!-- <SubItem /> -->
+                 <FieldName :height="containerHeight"/>
+              </ElTabPane>
+              <ElTabPane label="措施项目" name="measureItem" lazy>
+                <!-- <MeasureItem /> -->
+                 <FieldName :height="containerHeight"/>
+              </ElTabPane>
+              <ElTabPane label="其他项目" name="otherItem" lazy>
+                <!-- <OtherItem /> -->
+                 <FieldName :height="containerHeight"/>
+              </ElTabPane>
+              <ElTabPane label="单位汇总" name="unitSummary" lazy>
+                <!-- <UnitSummary /> -->
+                 <FieldName :height="containerHeight"/>
+              </ElTabPane>
+              <ElTabPane label="变量设置" name="variableSettings" lazy>
+                <VariableSettings />
+              </ElTabPane>
+              <ElTabPane label="工料机字段" name="materialField" lazy>
+                <MaterialField />
+              </ElTabPane>
+            </ElTabs>
+        </ElCard>
+      </ElSplitterPanel>
+    </ElSplitter>
+</Page>
+</template>
+
+<style lang="css">
+.el-tabs--border-card>.el-tabs__content  {
+  padding: 5px 0;
+}
+</style>