1

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-container class="hc-layout-box">
+    <el-container id="hc-layout-box" class="hc-layout-box">
         <el-header class="hc-layout-header">
             <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '90px' : '200px'};`" @click="logoClick">
                 <span v-if="!isCollapse" class="logo-name">{{ appLogoName }}</span>

src/plugins/HTableForm.js

@@ -0,0 +1,130 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js'
+
+//自定义组件或二次封装的组件
+import HcTableFormUpload from '~com/plugins/table-form/hc-form-upload.vue'
+import HcFormSelectSearch from '~com/plugins/table-form/hc-form-select-search.vue'
+import HcFormSelectSearch2 from '~com/plugins/table-form/hc-form-select-search2.vue'
+import HcFormCheckboxGroup from '~com/plugins/table-form/hc-form-checkbox-group.vue'
+import ElTimePicker from '~com/plugins/table-form/hc-time-picker.vue'
+import ElDatePicker from '~com/plugins/table-form/hc-date-picker-1.vue'
+import ElRadioGroup from '~com/plugins/table-form/hc-form-radio-group.vue'
+import HcEchart from '~com/plugins/table-form/echart.vue'
+
+const components = {
+    ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
+    HcFormSelectSearch, HcFormSelectSearch2, HcFormCheckboxGroup, HcEchart,
+}
+
+//表单渲染
+export default class HTableForm {
+
+    static tableFormApp = null
+    static tableFormVM = null
+
+    static createForm({ template, tableForm, appId, onRight, onBlur, onLeftClick, onFormDataChange }) {
+        const app = createApp({
+            //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效
+            components,
+            data() {
+                return {
+                    formData: tableForm,
+                }
+            },
+            //监听数据，伪双向绑定（v-model）
+            watch: {
+                formData: {
+                    handler(obj) {
+                        tableForm = obj
+                        this.formDataChange(obj)
+                    },
+                    deep: true,
+                },
+            },
+            methods: {
+                //表单数据改变
+                formDataChange(obj) {
+                    if (onFormDataChange) {
+                        onFormDataChange(obj)
+                    }
+                },
+                //改变表单数据
+                setFormData(obj) {
+                    this.formData = obj
+                },
+                //鼠标右键菜单
+                contextmenuClick(a, b, c, d, e, f, event) {
+                    event.preventDefault()
+                },
+                //鼠标右键事件
+                RightClick(a, b, c, d, e, f, event) {
+                    setTimeout(() => {
+                        const KeyName = event?.target?.getAttribute('keyname') || ''
+                        if (onRight) {
+                            event.preventDefault()
+                            onRight(event, KeyName)
+                        }
+                    }, 100)
+                },
+                //焦点事件
+                getInformation() {
+                },
+                //日期选择事件
+                datePickerChange() {},
+                //上传完成
+                formUploadSuccess() {},
+                //删除上传的文件
+                delTableFormFile() {},
+                //失去焦点事件
+                getRegularExpression(event, reg, msg, a, b, leng, type, c, d) {
+                    const KeyName = event?.target?.getAttribute('keyname') || ''
+                    if (onBlur) {
+                        onBlur(event, KeyName, reg, this.formData[KeyName], msg, leng, type, c, d)
+                    }
+                },
+                //远程搜索处理
+                formRemoteChange() {},
+                //多选框处理
+                checkboxGroupChange() {},
+                //键盘事件 上键
+                keyupShiftUp() {},
+                //键盘事件 下键
+                keyupShiftDown() {},
+                //键盘事件 左键
+                keyupShiftLeft() {},
+                //键盘事件 右键
+                keyupShiftRight() {},
+                //日期时间框键盘事件
+                dateKeydown() {},
+                //输入左键点击事件
+                inputLeftClick(event, key) {
+                    setTimeout(() => {
+                        if (onLeftClick) {
+                            onLeftClick(key)
+                        }
+                    }, 100)
+                },
+                setChartRefs() {},
+            },
+            //html标签数据
+            template,
+        })
+        const vm = app.mount(appId)
+        this.tableFormApp = app
+        this.tableFormVM = vm
+        return { app, vm }
+    }
+
+    //卸载全局按键监听
+    static unmountEventKey() {
+        document.onkeydown = null
+        document.onkeyup = null
+    }
+
+    //卸载实例
+    static unmountFormApp() {
+        if (this.tableFormApp) {
+            this.tableFormApp?.unmount()
+            this.tableFormApp = null
+        }
+    }
+}

src/views/exctab/element/index.vue

@@ -1,13 +1,50 @@
 <template>
-    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
-        <hc-card>
-            1111
-        </hc-card>
+    <hc-drawer v-model="isShow" ui="hc-element-recognition-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
+        <hc-page-split :options="{ sizes: [14, 60, 26], minSize: [50, 300, 100] }" class="hc-element-recognition">
+            <template #left>
+                <hc-card scrollbar>
+                    <template #header>
+                        <hc-search-input v-model="searchTreeName" placeholder="请输入关键字" @search="searchTreeNameClick" />
+                    </template>
+                    <template v-if="isTreeMode === 1">
+                        <hc-lazy-tree v-if="isShow" :h-props="treeProps" tree-key="id" @load="treeLoadNode" @node-tap="treeNodeTap">
+                            <template #name="{ data }">
+                                <span class="text-16px font-400">{{ data.name }}</span>
+                            </template>
+                        </hc-lazy-tree>
+                    </template>
+                    <template v-if="isTreeMode === 2">
+                        <hc-data-tree ref="treeRef" :h-props="treeProps" tree-key="id" :datas="treeData" @node-tap="treeNodeTap">
+                            <template #name="{ data }">
+                                <span class="text-16px font-400">{{ data.name }}</span>
+                            </template>
+                        </hc-data-tree>
+                    </template>
+                </hc-card>
+            </template>
+            <hc-card title="【元素识别】表名称">
+                其它内容
+            </hc-card>
+            <template #right>
+                <hc-card>
+                    <template #header>
+                        <el-button color="#567722" size="small" class="text-white">元素匹配</el-button>
+                        <el-button color="#67C23B" size="small" class="text-white">调整表单</el-button>
+                    </template>
+                    <template #extra>
+                        <el-button color="#FF986A" size="small" class="text-white">添加到元素库</el-button>
+                        <el-button color="#2550A2" size="small" class="text-white">关联WBS并创建元素</el-button>
+                    </template>
+                    自定义右边的区域
+                </hc-card>
+            </template>
+        </hc-page-split>
     </hc-drawer>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
+import { getArrValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -41,6 +78,56 @@ const getDataApi = () => {
     console.log(dataInfo.value)
 }
 
+//树搜索
+const isTreeMode = ref(1) //1懒加载，2全加载
+const searchTreeName = ref('')
+const searchTreeNameClick = async () => {
+    if (isNullES(searchTreeName.value)) {
+        isTreeMode.value = 1
+    } else {
+        isTreeMode.value = 2
+        await getTreeAllData()
+        treeRef.value?.treeRef?.filter(searchTreeName.value)
+    }
+}
+
+//树配置
+const treeRef = ref(null)
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: (item) => {
+        return !item.hasChildren
+    },
+}
+
+//全加载树
+const treeData = ref([])
+const getTreeAllData = async () => {
+    const { data } = await mainApi.tabLazyTreeAll({
+        modeId: dataInfo.value.id,
+        name: '',
+    })
+    treeData.value = getArrValue(data)
+}
+
+//懒加载树
+const treeLoadNode = async ({ item, level }, resolve) => {
+    const parentId = level === 0 ? 0 : item.id
+    const { data } = await mainApi.tabLazyTree({
+        parentId: parentId,
+        modeId: dataInfo.value.id,
+    })
+    resolve(getArrValue(data))
+}
+
+//树节点被点击
+const nodeInfo = ref({})
+const treeNodeTap = ({ data }) => {
+    nodeInfo.value = data
+}
+
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false
@@ -50,5 +137,16 @@ const drawerClose = () => {
 </script>
 
 <style scoped lang="scss">
+.hc-element-recognition {
 
+}
+</style>
+
+<style lang="scss">
+.el-overlay .el-drawer.hc-element-recognition-drawer {
+    background-color: #F1F5F8;
+    .tree-line .el-tree__empty-block {
+        min-width: unset;
+    }
+}
 </style>

src/views/exctab/excel/template.vue

@@ -2,7 +2,7 @@
     <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
         <hc-body split>
             <template #left>
-                <hc-card>
+                <hc-card scrollbar>
                     <template #header>
                         <hc-search-input v-model="searchTreeName" placeholder="请输入关键字" @search="searchTreeNameClick" />
                     </template>