up

src/views/data-fill/components/ListItem_bak.vue

@@ -0,0 +1,839 @@
+<template>
+    <div class="data-fill-list-box">
+        <n-collapse accordion :expanded-names="expandedNames" @update:expanded-names="updateExpandedNames">
+            <template v-for="(item,index) in listDatas" :key="item?.pkeyId">
+                <n-collapse-item display-directive="show" :id="`item-${index}-${item?.pkeyId}`" :name="`item-${index}-${item?.pkeyId}`">
+                    <template #header>
+                        <div class="text-lg truncate item-title">{{item.name}}</div>
+                    </template>
+                    <template #header-extra>
+                        <div class="flex items-center hc-extra-text-box">
+                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_del_table?.textInfo" v-if="btn_del_table && item?.isCopeTab === 2">
+                                <template #trigger>
+                                    <div class="mr-8 text-main extra-text-item" @click.stop="delClick(item,index)">
+                                        <i class="hcicon-a-Frame3"/>
+                                        <span class="ml-1">删除本表</span>
+                                    </div>
+                                </template>
+                                <span>{{btn_del_table?.textInfo}}</span>
+                            </n-popover>
+                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_copy_table?.textInfo" v-if="btn_copy_table">
+                                <template #trigger>
+                                    <div class="text-gray-400 extra-text-item" v-if="item?.isBussShow == 2" @click.stop>
+                                        <i class="hcicon-a-Frame3"/>
+                                        <span class="ml-1">复制本表</span>
+                                    </div>
+                                    <div class="text-main extra-text-item" v-else @click.stop="copyClick(item,index)">
+                                        <i class="hcicon-a-Frame3"/>
+                                        <span class="ml-1">复制本表</span>
+                                    </div>
+                                </template>
+                                <span>{{btn_copy_table?.textInfo}}</span>
+                            </n-popover>
+                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_hide_table?.textInfo" v-if="btn_hide_table">
+                                <template #trigger>
+                                    <div class="ml-8 text-main extra-text-item" @click.stop="hideClick(item,index)">
+                                        <template v-if="item?.isBussShow == 1">
+                                            <i class="hcicon-a-Frame4"/>
+                                            <span class="ml-1">隐藏本表</span>
+                                        </template>
+                                        <template v-else>
+                                            <i class="hcicon-zhengkaiyanjing4"/>
+                                            <span class="ml-1">显示本表</span>
+                                        </template>
+                                    </div>
+                                </template>
+                                <span>{{btn_hide_table?.textInfo}}</span>
+                            </n-popover>
+                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_pre_table?.textInfo" v-if="btn_pre_table">
+                                <template #trigger>
+                                    <div class="ml-8 text-gray-400 extra-text-item" v-if="item?.isBussShow == 2 || item?.isTabPdf === 1" @click.stop>
+                                        <i class="hcicon-Frame"/>
+                                        <span class="ml-1">预览</span>
+                                    </div>
+                                    <div class="ml-8 text-main extra-text-item" v-else @click.stop="previewClick(item,index)">
+                                        <i class="hcicon-Frame"/>
+                                        <span class="ml-1">预览</span>
+                                    </div>
+                                </template>
+                                <span>{{btn_pre_table?.textInfo}}</span>
+                            </n-popover>
+                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_up_table?.textInfo" v-if="btn_up_table">
+                                <template #trigger>
+                                    <div class="ml-8 text-gray-400 extra-text-item" v-if="item?.isBussShow == 2" @click.stop>
+                                        <i class="hcicon-shangchuan"/>
+                                        <span class="ml-1">上传</span>
+                                    </div>
+                                    <div class="ml-8 extra-text-item" :class="item?.tabFileType === 2?'text-green':'text-main'" v-else @click.stop="uploadClick(item,index)">
+                                        <i class="hcicon-shangchuan"/>
+                                        <span class="ml-1">{{item?.tabFileType === 2?'已上传':'上传' }}</span>
+                                    </div>
+                                </template>
+                                <span>{{btn_up_table?.textInfo}}</span>
+                            </n-popover>
+                        </div>
+                    </template>
+                    <div class="data-fill-list-item-content">
+                        <div class="data-fill-table-form-box">
+                            <div :id="`table-form-${item?.pkeyId}`"></div>
+                            <div class="hc-no-table-form" v-if="item?.isTableForm === false">
+                                <div class="table-form-no">
+                                    <img :src="notableform" alt=""/>
+                                    <div class="desc">暂无表单数据</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="data-fill-table-tip-box">
+                            <div class="text-orange tip-title">
+                                <i class="_icon-info-o"/>
+                                <span class="ml-1">提示</span>
+                            </div>
+                            <div class="text-gray-400 tip-item">1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据</div>
+                            <div class="text-gray-400 tip-item">2、系统支持键盘中，shift + tab键向上一个填报框切换，tab向下一个填报框切换。暂不支持上下按键切换输入框</div>
+                            <div class="table-tip-foot">
+                                <div class="tip-left-btn">
+                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_impo_table?.textInfo" v-if="btn_impo_table">
+                                        <template #trigger>
+                                            <div class="text-gray-400 dow-text">
+                                                <i class="hcicon-Frame1"/>
+                                                <span class="ml-1">导入列表数据</span>
+                                            </div>
+                                        </template>
+                                        <span>{{btn_impo_table?.textInfo}}</span>
+                                    </n-popover>
+                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_down_table?.textInfo" v-if="btn_down_table">
+                                        <template #trigger>
+                                            <div class="text-main dow-text">
+                                                <i class="hcicon-a-Frame11"/>
+                                                <span class="ml-1">下载导入模板</span>
+                                            </div>
+                                        </template>
+                                        <span>{{btn_down_table?.textInfo}}</span>
+                                    </n-popover>
+                                </div>
+                                <div class="tip-right-btn">
+                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_save_table?.textInfo" v-if="btn_save_table">
+                                        <template #trigger>
+                                            <n-button type="primary" strong secondary size="large" @click="tableFormSaveClick(item,index)">保存</n-button>
+                                        </template>
+                                        <span>{{btn_save_table?.textInfo}}</span>
+                                    </n-popover>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </n-collapse-item>
+            </template>
+        </n-collapse>
+    </div>
+    <!--鼠标右键菜单-->
+    <n-dropdown placement="bottom" inverted trigger="manual" :x="tableFormMenuX" :y="tableFormMenuY" size="huge" :options="tableFormMenu" :show="tableFormMenuShow" @clickoutside="onClickoutside" @select="handleMenuSelect"/>
+    <!--插入设计值/频率-->
+    <n-modal v-model:show="IDVFModal" class="hc-custom-card" title="插入设计值/频率" preset="card" style="width: 600px;" :segmented="{content: 'soft', footer: 'soft'}">
+        <div class="text-base mb-6 ml-16 pl-1">填写完设计值和频率，系统自动计算实测值</div>
+        <n-form ref="formIDVFRef" :model="formIDVFModel" :rules="formIDVFRules" label-placement="left" label-width="auto" size="large">
+            <n-form-item label="设计值" path="designValue">
+                <n-input v-model:value="formIDVFModel.designValue" placeholder="请输入设计值"/>
+            </n-form-item>
+            <n-form-item label="频率" path="frequency">
+                <n-input v-model:value="formIDVFModel.frequency" placeholder="请输入频率"/>
+            </n-form-item>
+        </n-form>
+        <template #footer>
+            <div class="text-center">
+                <n-button @click="IDVFModal = false">取消</n-button>
+                <n-button type="primary" class="ml-6">确认插入</n-button>
+            </div>
+        </template>
+    </n-modal>
+    <!--插入特殊字符-->
+    <n-modal v-model:show="specialModal" class="hc-custom-card" title="插入特殊字符" preset="card" style="width: 600px;" :segmented="{content: 'soft', footer: 'soft'}">
+        <n-input ref="specialRef" id="specialId" class="font-EUDC mb-6" v-model:value="specialValue" size="large" placeholder="请选择特殊字符代码" clearable autofocus/>
+        <n-grid :x-gap="10" :y-gap="10" :cols="8">
+            <n-grid-item v-for="item in specialCharacters" :key="item">
+                <div class="special-box" @click="specialClick">
+                    <span class="font-EUDC" :title="`字符代码(C):${item !== 'K̅'?item.slice(2,7):'K̅'}`" v-html="item"/>
+                </div>
+            </n-grid-item>
+        </n-grid>
+        <template #footer>
+            <div class="text-center">
+                <n-button @click="specialModal = false">取消</n-button>
+                <n-button type="primary" class="ml-6" @click="specialNodeClick">确认插入</n-button>
+            </div>
+        </template>
+    </n-modal>
+    <!--关联试验数据-->
+    <n-modal v-model:show="CTDModal" class="hc-custom-card" title="关联试验数据" preset="card" style="width: 850px;" :segmented="{content: 'soft', footer: 'soft'}">
+        123456
+        <template #footer>
+            <div class="text-center">
+                <n-button @click="CTDModal = false">取消</n-button>
+                <n-button type="primary" class="ml-6">确认插入</n-button>
+            </div>
+        </template>
+    </n-modal>
+    <!--上传文件-->
+    <n-modal v-model:show="uploadModal" class="hc-custom-card w-606" title="上传文件" preset="card" :segmented="{content: 'soft', footer: 'soft'}">
+        <n-upload v-model:file-list="fileListData" :action="action" :headers="getTokenHeader()" :data="addData" :accept="accept" multiple @before-upload="beforeUpload" @finish="uploadFinish" @change="UploadChange" @remove="delUploadData"  @update:file-list="fileListUpdate">
+            <n-button type="primary">选择文件并上传</n-button>
+        </n-upload>
+    </n-modal>
+</template>
+
+<script setup>
+import {ref,watch,nextTick} from "vue";
+import {useAppStore} from "~src/store/index";
+import wbsApi from "~api/data-fill/wbs"
+import {ElInput,ElDatePicker} from 'element-plus'
+import {createApp} from "vue/dist/vue.esm-bundler.js";
+import {isString,isObject} from "~src/utils/lib/isApp";
+import notableform from '~src/assets/view/notableform.svg';
+import {isObjNull} from "../../utils/lib/isApp";
+import {getTokenHeader} from '~src/api/request/header';
+
+//初始
+const useAppState = useAppStore()
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    },
+    projectId: {
+        type: [String,Number],
+        default: ''
+    },
+    contractId: {
+        type: [String,Number],
+        default: ''
+    },
+    classify: {
+        type: [String,Number],
+        default: ''
+    },
+})
+
+//按钮气泡开关
+const bubbleVal = ref(useAppState.getBubble);
+const projectId = ref(props.projectId)
+const contractId = ref(props.contractId)
+const listDatas = ref(props.datas)
+const classify = ref(props.classify)
+const expandedNames = ref(null)
+
+//监听
+watch(() => [
+    props.datas,
+    props.projectId,
+    props.contractId,
+    useAppState.getBubble,
+    props.classify,
+], ([datas, pid, cid, Bubble,classifyVal]) => {
+    listDatas.value = datas
+    bubbleVal.value = Bubble
+    projectId.value = pid
+    contractId.value = cid
+    classify.value = classifyVal
+    expandedNames.value = null
+    setFormDataNum(datas)
+})
+
+//获取气泡数据
+const getButtonsVal = (value) => {
+    return useAppState.getButtonsVal(value)
+}
+
+const btn_copy_table = ref(getButtonsVal('wbs_copy_table')) //复制本表
+const btn_hide_table = ref(getButtonsVal('wbs_hide_table')) //隐藏本表
+const btn_pre_table = ref(getButtonsVal('wbs_preview_table')) //预览本表
+const btn_up_table = ref(getButtonsVal('wbs_upload_table')) //上传
+const btn_del_table = ref(getButtonsVal('wbs_del_table')) //删除
+
+const btn_down_table = ref(getButtonsVal('wbs_download_table')) //下载导入模板
+const btn_impo_table = ref(getButtonsVal('wbs_import_table')) //导入列表数据
+const btn_save_table = ref(getButtonsVal('wbs_save_table'))//保存本表
+
+//事件
+const emit = defineEmits(['uploadData','uploadTap','saveTap','itemTap','copyTap','hideTap','previewTap','offsetTop', 'delTap'])
+
+nextTick(() => {
+    setFormDataNum(props.datas)
+})
+
+//渲染模板标签
+const formData = ref([])
+
+//展开事件
+const updateExpandedNames = async (name) => {
+    expandedNames.value = name
+    const keys = name.length > 0 ? name[0]:'';
+    const names = name.length > 0 ? name[0].split('-'): []
+    if (names.length > 0) {
+        getOffsetTop(keys)
+        const index = names[1]
+        const item = listDatas.value[index]
+        if (!item.isTableFormRender) {
+            getExcelHtml(item,index)
+        }
+        //获取已填写的数据
+        const {data: valData} = await wbsApi.getBussDataInfo({pkeyId: item.pkeyId + ''})
+        const valRes = isObject(valData.data) ? valData.data : {}
+        if (!isObjNull(valRes)) {
+            //有数据，关联数据
+            formData.value[index] = {
+                projectId: projectId.value,
+                contractId: contractId.value,
+                pkeyId: item.pkeyId + '',
+                classify: classify.value,
+                ...valRes
+            }
+        } else {
+            formData.value[index] = {
+                projectId: projectId.value,
+                contractId: contractId.value,
+                pkeyId: item.pkeyId + '',
+                classify: classify.value
+            }
+        }
+    } else {
+        emit('offsetTop', {offsetTop: 0, dom: null})
+    }
+}
+
+//获取模板标签数据
+const getExcelHtml = (item,index) => {
+    if (item.pkeyId !== 0) {
+        wbsApi.getExcelHtml({
+            pkeyId: item.pkeyId + ''
+        }).then(({data}) => {
+            const res = isString(data.data)?data.data:''
+            if (res) {
+                item.isTableForm = true
+                HTableForm(res, item, index)
+            } else {
+                item.isTableForm = false
+                window?.$message?.warning(res.msg || '暂无表单')
+            }
+        }).catch(() => {
+            item.isTableForm = false
+        })
+    } else {
+        item.isTableForm = false
+        window?.$message?.warning('pkeyId为空')
+    }
+}
+
+//设置表单对象的数量
+const setFormDataNum = (datas) => {
+    let newArr = [];
+    for (let i = 0; i < datas.length; i++) {
+        newArr.push({
+            projectId: projectId.value,
+            contractId: contractId.value,
+            pkeyId: datas[i].pkeyId + '',
+            classify: classify.value
+        })
+    }
+    formData.value = newArr
+}
+
+//渲染表格表单
+const HTableForm = (templateData,item,index) => {
+    const app = createApp({
+        data() {
+            return {
+                formData: formData.value[index],
+            }
+        },
+        template: templateData,
+        components: {ElInput,ElDatePicker},
+        methods: {
+            RightClick(a,b,c,d,e,f,event) {
+                event.preventDefault();
+                const key = event?.target?.getAttribute('keyname') || ''
+                onRightClick(event,key,index)
+            },
+            getInformation(a,b,c) {
+
+            },
+        }
+    })
+    app.mount(`#table-form-${item.pkeyId}`)
+    item.isTableFormRender = true
+}
+
+//树的菜单相关变量
+const tableFormMenuShow = ref(false)
+const tableFormItemNode = ref({})
+const tableFormMenuX = ref(0);
+const tableFormMenuY = ref(0);
+
+//树的菜单数据
+const tableFormMenu = ref([
+    {label: '插入设计值/频率', key: "IDVF"},
+    {label: '插入特殊字符', key: "special"},
+    {label: '关联试验数据', key: "CTD"},
+])
+
+//鼠标右键事件
+const onRightClick = (event,key,index) => {
+    //取光标位置
+    let specialDom = document.getElementById(key + "");
+    let startPos = specialDom?.selectionStart, endPos = specialDom?.selectionEnd;
+    //存储临时信息
+    tableFormItemNode.value = {key, index, startPos, endPos}
+    //取坐标
+    nextTick().then(() => {
+        tableFormMenuShow.value = true;
+        tableFormMenuX.value = event.clientX;
+        tableFormMenuY.value = event.clientY;
+    });
+}
+
+//鼠标右键菜单被点击
+const handleMenuSelect = (key) => {
+    //const item = tableFormItemNode.value;
+    tableFormMenuShow.value = false;
+    if (key === 'IDVF') {
+        IDVFModal.value = true
+    } else if (key === 'special') {
+        specialModalShow()
+    } else if (key === 'CTD') {
+        CTDModal.value = true
+    }
+}
+
+const onClickoutside = () => {
+    tableFormItemNode.value = {};
+    tableFormMenuShow.value = false;
+}
+
+const saveExcelBussData = async (item,index) => {
+    const {data} = await wbsApi.saveExcelBussData({
+        pkeyId: item.pkeyId,
+        classify: classify.value,
+        ...formData.value[index]
+    })
+    if(data && data.code === 200) {
+        window?.$message?.success('保存成功')
+        return true
+    } else {
+        window?.$message?.warning(data.msg || '保存失败')
+        return false
+    }
+}
+
+//单个保存
+const tableFormSaveClick = async (item,index) => {
+    const res = await saveExcelBussData(item,index)
+    if (res) {
+        getBussPdfInfo(item,index)
+        emit('uploadData')
+        emit('saveTap', {item,index})
+    }
+}
+
+//删除本表
+const delClick = (item,index) => {
+    wbsApi.removeBussTabInfo({
+        pkeyid: item.pkeyId,
+        classify: classify.value,
+    }).then(({data}) => {
+        if(data.code === 200) {
+            window?.$message?.success('操作成功')
+            emit('uploadData')
+            emit('delTap', {item,index})
+        } else {
+            window?.$message?.warning(data.msg || '操作失败')
+        }
+    })
+}
+
+//复制本表
+const copyClick = async (item,index) => {
+    const res = await saveExcelBussData(item,index)
+    if (res) {
+        const {data} = await wbsApi.copeBussTab({pkeyId: item.pkeyId})
+        if(data && data.code === 200) {
+            window?.$message?.success('操作成功')
+            emit('uploadData')
+            emit('copyTap', {item,index})
+        } else {
+            window?.$message?.warning(data.msg || '操作失败')
+        }
+    } else {
+        window?.$message?.warning('复制本表操作失败')
+    }
+}
+
+//隐藏本表
+const hideClick = (item,index) => {
+    //状态(1显示 2隐藏)
+    const isBussShow = item?.isBussShow == 2 ? 1 : 2
+    //发起请求
+    wbsApi.showBussTab({
+        pkeyId: item.pkeyId,
+        status: isBussShow
+    }).then(({data}) => {
+        if(data.code === 200) {
+            window?.$message?.success('操作成功')
+            emit('uploadData')
+            emit('hideTap', {item,index})
+        } else {
+            window?.$message?.warning(data.msg || '操作失败')
+        }
+    })
+}
+
+const getBussPdfInfo = (item,index) => {
+    wbsApi.getBussPdfInfo({
+        pkeyId: item.pkeyId
+    }).then(({data}) => {
+        if(data.code === 200 && data?.data) {
+            window.open(data?.data,'_blank')
+            emit('previewTap', {item,index})
+        } else {
+            window.$message?.warning('暂无PDF')
+        }
+    })
+}
+
+//预览
+const previewClick = async (item,index) => {
+    const res = await saveExcelBussData(item,index)
+    if (res) {
+        getBussPdfInfo(item,index)
+    } else {
+        window?.$message?.warning('操作失败')
+    }
+}
+
+//上传被点击
+const uploadModal = ref(false)
+const addData = ref({})
+const uploadClick = (item) => {
+    addData.value = {
+        projectId: projectId.value,
+        contractId: contractId.value,
+        classify: classify.value,
+        pkeyId: item.pkeyId
+    }
+    uploadModal.value = true
+    //获取文件列表
+    wbsApi.getBussFileList({
+        pkeyid: item.pkeyId
+    }).then(({data}) => {
+        if(data.code === 200) {
+            fileListData.value = isObjNull(data?.data) ? [] : data?.data
+        } else {
+            fileListData.value = []
+        }
+    }).catch(() => {
+        fileListData.value = []
+    })
+}
+//上传组件参数
+const action = '/api/blade-manager/exceltab/add-buss-file';
+const accept = 'image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword';
+const fileListData = ref([]);
+//上传前
+const uploadLoading = ref(false)
+const beforeUpload = async ({file}) => {
+    let maxTrillion = 60;
+    let fileSizeData = file?.file?.size
+    let maxSize = maxTrillion * 1024 * 1024
+    if (fileSizeData > maxSize) {
+        window.$message?.warning(`文件大小,不能过${maxTrillion}M!`);
+        return false;
+    } else {
+        uploadLoading.value = true
+        return true;
+    }
+}
+//上传完成
+const uploadFinish = ({file,event}) => {
+    uploadLoading.value = false
+    let res = JSON.parse(event?.target?.response);
+    if (res.code === 200) {
+        window.$message?.success('上传成功');
+        uploadModal.value = false
+        emit('uploadData')
+        emit('uploadTap')
+    } else {
+        window.$message?.error('上传失败');
+    }
+}
+
+//列表改变
+const UploadChange = (data) => {
+    fileListData.value = data.fileList;
+}
+const fileListUpdate = (data) => {
+    fileListData.value = data
+}
+//删除
+const delUploadData = async ({file}) => {
+    const {data} = await wbsApi.removeBussFile({ids: file?.id})
+    if(data && data.code === 200) {
+        window.$message?.success('删除成功');
+        emit('uploadData')
+        return true
+    } else {
+        return false
+    }
+}
+
+//被点击
+const getOffsetTop = (key) => {
+    const dom = document.getElementById(key)
+    emit('offsetTop', dom.offsetTop)
+}
+
+//插入设计值/频率
+const IDVFModal = ref(false)
+const formIDVFRef = ref(null)
+const formIDVFModel = ref({
+    designValue: '', frequency: ''
+})
+const formIDVFRules = {
+    designValue: {
+        required: true,
+        trigger: ["blur", "input"],
+        message: "请输入设计值"
+    },
+    frequency: {
+        required: true,
+        trigger: ["blur", "input"],
+        message: "请输入频率"
+    }
+}
+
+//插入特殊字符
+const specialModal = ref(false)
+const specialCharacters = ref([
+    '&#57344;', "&#57345;", "&#57346;", "&#57347;", '&#8804;', '&#8805;', '&#8451;',
+    '&#9312;', '&#9313;', '&#9314;', '&#9315;', '&#9316;', '&#9317;', '&#9318;', '&#9319;', '&#9320;', '&#9321;', '&#9322;', '&#9323;',
+    '&#9324;', '&#9325;', '&#9326;', '&#9327;', '&#9328;', '&#9329;', '&#9330;', '&#9331;',
+    "&#8544;", "&#8545;", "&#8546;", "&#8547;", "&#8548;", "&#8549;", "&#8550;", "&#8551;", "&#8552;", "&#8553;", "&#8554;", "&#8555;","K̅"
+])
+const specialRef = ref(null)
+const specialValue = ref('')
+const specialModalShow = () => {
+    specialValue.value = ''
+    specialModal.value = true
+    nextTick(() => {
+        specialRef.value?.focus();
+    })
+}
+const specialClick = (event) => {
+    inputInsertValue("specialId", event.target.innerText)
+}
+//输入框插入内容
+const inputInsertValue = (Id,val) => {
+    let specialDom = document.getElementById(Id + "").getElementsByTagName('input')[0];
+    let startPos = specialDom?.selectionStart, endPos = specialDom?.selectionEnd;
+    if (startPos || startPos === 0) {
+        let specialVal = specialValue.value;
+        specialValue.value = specialVal.substring(0, startPos) + val + specialVal.substring(endPos, specialVal.length)
+        specialDom?.focus();
+        //设置光标位置
+        let posVal = startPos + val.length;
+        nextTick(() => {
+            specialDom?.setSelectionRange(posVal,posVal)
+        })
+    } else {
+        specialValue.value += val;
+        specialDom?.focus();
+    }
+}
+
+//插入内容
+const inputPosInsert = (dom, startPos = 0, endPos = 0, special, value) => {
+    let val = value || '', specialVal = special || ''
+    console.log(startPos,endPos)
+    if(startPos === 0 && endPos === 0) {
+        val = specialVal;
+        dom?.focus();
+    } else if (startPos !== 0 && endPos !== 0) {
+        val = val.substring(0, startPos) + specialVal + val.substring(endPos, val.length)
+        dom?.focus();
+        //设置光标位置
+        let posVal = startPos + specialVal.length;
+        nextTick(() => {
+            dom?.setSelectionRange(posVal,posVal)
+        })
+    } else {
+        val += specialVal;
+        dom?.focus();
+    }
+    return val
+}
+
+//确认插入
+const specialNodeClick = () => {
+    const item = tableFormItemNode.value;
+    const form = formData.value[item.index]
+    let keyDom = document.getElementById(item.key);
+    const res = inputPosInsert(keyDom,item.startPos,item.endPos,specialValue.value,form[item.key])
+    console.log(res)
+    formData.value[item.index][item.key] = res
+    specialModal.value = false
+}
+
+//关联试验数据
+const CTDModal = ref(false)
+
+//获取表单数据
+const getFormData = () => {
+    console.log(formData.value)
+    return formData.value
+}
+
+// 暴露出去
+defineExpose({
+    getFormData
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/EUDC/index";
+
+.data-fill-list-box {
+    position: relative;
+    .item-title {
+        position: relative;
+        padding-left: 10px;
+        user-select: none;
+    }
+    .hc-extra-text-box .extra-text-item {
+        font-size: 16px;
+        user-select: none;
+    }
+    .data-fill-list-item-content {
+        position: relative;
+        display: flex;
+        .data-fill-table-form-box {
+            position: relative;
+            padding: 24px 20px;
+            height: calc(100vh - 380px);
+            overflow: auto;
+            flex: 1;
+            .hc-no-table-form {
+                position: relative;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .table-form-no {
+                    position: relative;
+                    img {
+                        width: 350px;
+                    }
+                    .desc {
+                        text-align: center;
+                        font-size: 20px;
+                        color: #aaa;
+                    }
+                }
+            }
+        }
+        .data-fill-table-tip-box {
+            width: 240px;
+            position: relative;
+            border-left: 1px solid #e4e4e4;
+            padding: 20px 15px 80px;
+            .tip-title {
+                font-size: 16px;
+                margin-bottom: 10px;
+            }
+            .tip-item {
+                margin-bottom: 20px;
+            }
+            .table-tip-foot {
+                position: absolute;
+                bottom: 15px;
+                right: 0;
+                left: 0;
+                display: flex;
+                align-items: center;
+                padding: 0 15px;
+                .tip-left-btn {
+                    flex: 1;
+                    .dow-text {
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+}
+.special-box {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #eee;
+    border-radius: 3px;
+    height: 60px;
+    cursor: default;
+    user-select: none;
+    transition: color .3s, background-color .3s;
+    &:hover {
+        color: var(--hc-primary);
+        background-color: var(--hc-primary-light-1);
+    }
+    .font-EUDC {
+        font-size: 30px;
+        cursor: default;
+    }
+}
+</style>
+
+<style lang="scss">
+.data-fill-list-box {
+    .n-collapse .n-collapse-item {
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        margin: 0 0 15px;
+        background-color: white;
+        .n-collapse-item__header {
+            padding: 0;
+            transition: color .3s var(--n-bezier), background-color .3s;
+            border-radius: 3px 3px 0 0;
+            .n-collapse-item__header-main {
+                padding: 15px 20px;
+            }
+            .n-collapse-item__header-extra {
+                padding-right: 20px;
+            }
+            &.n-collapse-item__header--active {
+                background-color: #F9F9F9;
+                border-bottom: 1px solid #ddd;
+            }
+        }
+        .n-collapse-item__content-wrapper .n-collapse-item__content-inner {
+            padding-top: 0;
+        }
+    }
+}
+//设置表单样式
+.data-fill-table-form-box {
+    td {
+        padding: 6px;
+        font-family: "EUDC", 宋体, v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+        .el-input {
+            background-color: #ffffff !important;
+            border-radius: 3px;
+            .el-input__wrapper {
+                background-color: inherit;
+            }
+            .el-input__wrapper.is-focus, .el-input__wrapper:hover {
+                box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
+                background-color: #eddac4;
+            }
+            //公式 #dcdcdc
+            //焦点 #eddac4
+        }
+    }
+}
+</style>