更新依赖

src/api/modules/exctab/exceltab.js

@@ -152,4 +152,12 @@ export default {
             params: form,
         })
     },
+    //获取字段信息
+    async getColByTabId(form) {
+        return HcApi({
+            url: '/api/blade-manager/exctabcell/getColByTabId',
+            method: 'get',
+            params: form,
+        })
+    },
 }

src/components/table-form/components.vue

@@ -5,7 +5,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useClick } from 'hc-vue3-ui'
-import { getRandom, isNullES } from 'js-fast-way'
+import { isNullES } from 'js-fast-way'
 import { ClickOutside as vClickOutside } from 'element-plus'
 
 const props = defineProps({
@@ -25,9 +25,7 @@ const props = defineProps({
 })
 
 //事件
-const emit = defineEmits(['blur', 'focus', 'tap'])
-
-const uuid = getRandom(8)
+const emit = defineEmits(['blur', 'focus'])
 
 //渲染完成
 onMounted(()=> {

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

@@ -23,7 +23,7 @@ const props = defineProps({
 })
 
 //事件
-const emit = defineEmits(['render', 'excelBodyTap'])
+const emit = defineEmits(['blur', 'focus', 'render', 'excelBodyTap'])
 
 const uuid = getRandom(8)
 
@@ -58,7 +58,11 @@ watch(() => props.form, (val) => {
 const setEmitterData = () => {
     window.addEventListener('message', ({ data }) => {
         if (data.type !== 'table-form') return
-        console.log(data)
+        if (data.key === 'focus') {
+            emit('focus', data.data)
+        } else if (data.key === 'blur') {
+            emit('blur', data.data)
+        }
     })
 }
 

src/views/exctab/element/index.vue

@@ -22,8 +22,8 @@
                     </template>
                 </hc-card>
             </template>
-            <hc-card title="【元素识别】表名称">
-                <hc-table-form ref="excelRef" :html="excelHtml" />
+            <hc-card :title="`【元素识别】${isNullES(nodeInfo.name) ? '表名称' : nodeInfo.name}`">
+                <hc-table-form ref="excelRef" :html="excelHtml" @focus="excelClick" @blur="excelBlur" />
             </hc-card>
             <template #right>
                 <hc-card>
@@ -35,7 +35,23 @@
                         <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-table ref="tabRef" :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }">
+                        <template #textInfo="{ row }">
+                            <hc-table-input v-model="row.textInfo" />
+                        </template>
+                        <template #textElementType="{ row }">
+                            <el-select v-model="row.textElementType" filterable block>
+                                <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </template>
+                        <template #textDeviation="{ row }">
+                            <hc-table-input v-model="row.textDeviation" />
+                        </template>
+                        <template #action="{ row }">
+                            <el-link type="warning" @click="saveRowClick(row)">保存</el-link>
+                            <el-link type="danger" @click="delRowClick(row)">删除</el-link>
+                        </template>
+                    </hc-table>
                 </hc-card>
             </template>
         </hc-page-split>
@@ -45,6 +61,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { getArrValue, isNullES, isString } from 'js-fast-way'
+import { getDictionaryData } from '~uti/tools'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -129,6 +146,8 @@ const treeNodeTap = async ({ data }) => {
         return
     }
     await getExcelHtmlCol(data.id)
+    getDataType().then()
+    await getTableData()
 }
 
 //获取excel模板
@@ -146,6 +165,49 @@ const getExcelHtmlCol = async (id) => {
 const excelRef = ref(null)
 const excelHtml = ref('')
 
+//获取元素类型
+const dataType = ref([])
+const getDataType = async () => {
+    dataType.value = await getDictionaryData('data_type')
+}
+
+//元素表格
+const tabRef = ref(null)
+const tableColumn = [
+    { key: 'textInfo', name: '元素名称' },
+    { key: 'textElementType', name: '数据类型' },
+    { key: 'textDeviation', name: '允许偏差值' },
+    { key: 'action', name: '操作', width: 90, align: 'center' },
+]
+const tableData = ref([])
+const getTableData = async () => {
+    const { data } = await mainApi.getColByTabId({
+        tabId: nodeInfo.value.id,
+    })
+    tableData.value = getArrValue(data)
+}
+
+//框框被点击
+const excelClick = (item) => {
+
+}
+
+//框框失去焦点
+const excelBlur = (item) => {
+
+}
+
+//保存元素表格
+const saveRowClick = (row) => {
+
+}
+
+//删除元素表格
+const delRowClick = (row) => {
+
+}
+
+
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false