更新依赖

src/api/modules/exctab/exceltab.js

@@ -144,4 +144,12 @@ export default {
             responseType: 'arraybuffer',
         })
     },
+    //元素识别获取列表信息
+    async getExcelHtmlCol(form) {
+        return HcApi({
+            url: '/api/blade-manager/exceltab/get-excel-html-col',
+            method: 'get',
+            params: form,
+        })
+    },
 }

src/components/table-form/table-form.vue

@@ -1,13 +1,9 @@
 <template>
-    <div
-        :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm ? 'no-scroll-bar' : ''"
-        :style="tableFormStyle" class="hc-table-form-data-item"
-    >
-        <el-scrollbar v-if="isScroll" class="table-form-item-scrollbar">
-            <div :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
+    <div :id="`table-form-item-${uuid}`" :class="!isTableForm ? 'no-scroll-bar' : ''" class="hc-table-form-data-item h-full w-full">
+        <el-scrollbar class="table-form-item-scrollbar">
+            <div :id="`table-form-${uuid}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
         </el-scrollbar>
-        <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
-        <hc-empty v-if="!isTableForm" :src="notableform" :title="noTips" />
+        <hc-empty v-if="!isTableForm" :src="notableform" title="暂无表单数据" />
     </div>
 </template>
 
@@ -15,42 +11,21 @@
 import { nextTick, onMounted, ref, watch } from 'vue'
 import HTableForm from '~src/plugins/HTableForm'
 import notableform from '~src/assets/view/notableform.svg'
-import { isString } from 'js-fast-way'
+import { getRandom, isNullES, isString } from 'js-fast-way'
 
 //初始
 const props = defineProps({
-    pkey: [String, Number],
-    noTip: {
-        type: [String, Number],
-        default: '暂无表单数据',
-    },
     html: String,
     form: {
         type: Object,
         default: () => ({}),
     },
-    loading: Boolean,
-    scroll: {
-        type: Boolean,
-        default: true,
-    },
-    height: {
-        type: String,
-        default: '100%',
-    },
-    width: {
-        type: String,
-        default: 'auto',
-    },
 })
 
 //事件
-const emit = defineEmits(['rightTap', 'render', 'excelBodyTap'])
-//初始变量
-const keyId = ref(props.pkey)
-const noTips = ref(props.noTip)
-const isScroll = ref(props.scroll)
-const isLoading = ref(props.loading)
+const emit = defineEmits(['render', 'excelBodyTap'])
+
+const uuid = getRandom(8)
 
 //表单数据
 const excelHtml = ref(props.html)
@@ -59,59 +34,32 @@ const excelForm = ref(props.form)
 //样式
 const tableFormApp = ref(null)
 const tableFormVM = ref(null)
-const tableFormStyle = ref('')
 const isTableForm = ref(false)
 
-//监听
-watch(() => [
-    props.pkey, props.noTip, props.scroll, props.loading, props.width, props.height,
-], ([pkey, tip, scroll, loading, width, height]) => {
-    keyId.value = pkey
-    noTips.value = tip
-    isScroll.value = scroll
-    isLoading.value = loading
-    setItemStyle(width, height)
+//渲染完成
+onMounted(() => {
+    getExcelHtml()
 })
 
 //html变动
 watch(() => props.html, (html) => {
     excelHtml.value = html
     setExcelHtml()
-})
+}, { deep: true })
 
 //深度监听变动的对象数据
 watch(() => props.form, (val) => {
     excelForm.value = val
-    //console.log('表单数据变动', val)
-    setPickerKey()
     setFormData(val)
 }, { deep: true })
 
-//渲染完成
-onMounted(() => {
-    setItemStyle(props.width, props.height)
-    setPickerKey()
-    getExcelHtml()
-})
-
-
-//设置样式
-const setItemStyle = (width, height) => {
-    tableFormStyle.value = `width: ${width}; height: ${height};`
-}
 
 //表单被点击
 const excelTableFormClick = () => {
-    emit('excelBodyTap', keyId.value)
-}
-
-//获取已填写的数据
-const setPickerKey = () => {
-    HTableForm.setPickerKey(excelForm.value)
+    emit('excelBodyTap', uuid)
 }
 
 const setExcelHtml = () => {
-    setPickerKey()
     //先卸载
     if (tableFormApp.value) {
         tableFormApp.value?.unmount()
@@ -126,38 +74,37 @@ const setExcelHtml = () => {
 
 //获取模板标签数据
 const getExcelHtml = () => {
-    const pkeyId = keyId.value
     const temp = isString(excelHtml.value) ? excelHtml.value : ''
-    if (temp && pkeyId) {
-        //渲染表单
-        isTableForm.value = true
-        const { app, vm } = HTableForm.createForm({
-            template: temp,
-            tableForm: excelForm.value,
-            appId: `#table-form-${pkeyId}`,
-            onFormDataChange: (form) => {
-                excelForm.value = form
-                emit('render', form)
-            },
-            onRight: () => {
-                console.log('onRight')
-            },
-            onBlur: () => {
-                console.log('onBlur')
-            },
-            onLeftClick: () => {
-                console.log('onLeftClick')
-            },
-        })
-        tableFormApp.value = app
-        tableFormVM.value = vm
-        excelForm.value.isRenderForm = true
-        emit('render', excelForm.value)
-    } else {
+    if (isNullES(temp)) {
         isTableForm.value = false
         excelForm.value.isRenderForm = false
         emit('render', excelForm.value)
+        return
     }
+    //渲染表单
+    isTableForm.value = true
+    const { app, vm } = HTableForm.createForm({
+        template: temp,
+        tableForm: excelForm.value,
+        appId: `#table-form-${uuid}`,
+        onFormDataChange: (form) => {
+            excelForm.value = form
+            emit('render', form)
+        },
+        onRight: () => {
+            console.log('onRight')
+        },
+        onBlur: () => {
+            console.log('onBlur')
+        },
+        onLeftClick: () => {
+            console.log('onLeftClick')
+        },
+    })
+    tableFormApp.value = app
+    tableFormVM.value = vm
+    excelForm.value.isRenderForm = true
+    emit('render', excelForm.value)
 }
 
 //获取表单数据
@@ -198,9 +145,10 @@ defineExpose({
 .hc-table-form-data-item {
     position: relative;
     padding: 12px;
-    height: 100%;
-    overflow: hidden;
     background-color: white;
+    border: 1px solid #101010;
+    border-radius: 4px;
+    overflow: hidden;
     &.no-scroll-bar .el-scrollbar {
         display: none;
     }
@@ -217,7 +165,7 @@ defineExpose({
                 clear: both;
                 color: #606266;
                 border-radius: 3px;
-                height: $initials;
+                height: initial;
                 background-color: #ffffff !important;
                 .el-input__wrapper {
                     background-color: inherit;
@@ -252,7 +200,7 @@ defineExpose({
         }
         //列合并的单元格
         td[rowspan] {
-            height: $initials;
+            height: initial;
         }
         //非输入框颜色
         td:not([titlexx]), td[titlexx*=''],

src/config/index.json

@@ -1,7 +1,7 @@
 {
     "version": "20230607160059",
-    "target1": "http://39.108.216.210:8090",
-    "target": "http://192.168.0.109:8090",
+    "target": "http://39.108.216.210:8090",
+    "target1": "http://192.168.0.109:8090",
     "vite": {
         "port": 5188,
         "host": "0.0.0.0"

src/views/exctab/element/index.vue

@@ -23,7 +23,7 @@
                 </hc-card>
             </template>
             <hc-card title="【元素识别】表名称">
-                其它内容
+                <hc-table-form ref="excelRef" :html="excelHtml" />
             </hc-card>
             <template #right>
                 <hc-card>
@@ -44,7 +44,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { getArrValue, isNullES } from 'js-fast-way'
+import { getArrValue, isNullES, isString } from 'js-fast-way'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -123,10 +123,28 @@ const treeLoadNode = async ({ item, level }, resolve) => {
 
 //树节点被点击
 const nodeInfo = ref({})
-const treeNodeTap = ({ data }) => {
+const treeNodeTap = async ({ data }) => {
     nodeInfo.value = data
+    if (data.fileType !== 3) {
+        return
+    }
+    await getExcelHtmlCol(data.id)
+}
+
+//获取excel模板
+const getExcelHtmlCol = async (id) => {
+    const { error, code, data } = await mainApi.getExcelHtmlCol({ id })
+    const resData = isString(data) ? data || '' : ''
+    if (!error && code === 200 && resData) {
+        excelHtml.value = resData
+    } else {
+        excelHtml.value = ''
+    }
 }
 
+//excel模板
+const excelRef = ref(null)
+const excelHtml = ref('')
 
 //关闭抽屉
 const drawerClose = () => {