From 883e8a3c8e3e30f21760ab8c705dffdb105d4834 Mon Sep 17 00:00:00 2001 From: liwenxuan <1298531568@qq.com> Date: Wed, 31 Dec 2025 14:01:26 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=A1=AB=E5=85=85=E8=AE=BE?= =?UTF-8?q?=E7=BD=AEv0.25?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DesignForm/formControlPropertiNew.vue | 294 ++++++++++-------- 1 file changed, 166 insertions(+), 128 deletions(-) diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue index 2383905..00506b8 100644 --- a/src/components/DesignForm/formControlPropertiNew.vue +++ b/src/components/DesignForm/formControlPropertiNew.vue @@ -2910,60 +2910,72 @@ function mergeArrays(a, b) { //选项批量编辑 liwenxuan 20251212 end -//自动填充设置 liwenxuan 20251230 start +//自动填充设置 liwenxuan 20251230 start +let datapropsformList = JSON.parse(JSON.stringify(props.formList)) -/** - * 获取字符串最后一个英文冒号（:）后的字符 - * @param {string} str - 待处理的原始字符串 - * @returns {string} 最后一个冒号后的子串；无冒号/冒号在末尾时返回空字符串 - */ -function getLastColonAfterString(str) { - // 1. 输入校验：确保输入是字符串类型（处理非字符串入参） - if (typeof str !== 'string') { - console.warn('输入必须为字符串类型'); - return ''; +const zdtcszTree = computed(()=>{ + if(datapropsformList&&datapropsformList.length==0){ + datapropsformList = JSON.parse(JSON.stringify(props.formList)) } + + //console.log(datapropsformList) + if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){ - // 2. 找到最后一个英文冒号的索引位置 - const lastColonIndex = str.lastIndexOf(':'); - - // 3. 边界判断：无冒号 或 冒号在最后一位 → 返回空字符串 - if (lastColonIndex === -1 || lastColonIndex === str.length - 1) { - return ''; + + let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children)) + let currentCompId = controlData.value.name + const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId); + //console.log(treeC) + return treeC + }else{ + return [] } + +}) - // 4. 截取最后一个冒号后的所有字符并返回 - return str.slice(lastColonIndex + 1); -} +// 使用 ref 替代 computed，使其可写 +const zdtcszTableData = ref([]) + +// 获取当前选择的索引列节点（用于获取label） +const currentIndexColumnNode = computed(() => { + if (!controlData.value?.control?.zdtcsz?.tby) return null + return zdtcszTree.value.find(item => item.id == controlData.value.control.zdtcsz.tby) +}) + +// 获取当前选择的标题行节点（用于获取label） +const currentTitleColumnNode = computed(() => { + if (!controlData.value?.control?.zdtcsz?.tbx) return null + return zdtcszTree.value.find(item => item.id == controlData.value.control.zdtcsz.tbx) +}) + +//左上角 +const leftTopLabel = computed(()=>{ + return `${indexColumnLabel.value}\\${titleColumnLabel.value}` +}) + +// 索引列的标签（用于第一列的表头） +const indexColumnLabel = computed(() => { + if (!currentIndexColumnNode.value) return "索引列" + return currentIndexColumnNode.value.label +}) + +// 标题行的标签（如果需要，可以用于其他地方） +const titleColumnLabel = computed(() => { + if (!currentTitleColumnNode.value) return "标题行" + return currentTitleColumnNode.value.label +}) // 原始选项数组（标题行=列，索引列=行） -const titleOptions = computed(() => { - let result = [] - if(controlData.value.control.zdtcsz.tbx){ - zdtcszTree.value.forEach(element => { - if(element.id==controlData.value.control.zdtcsz.tbx){ - result = element.options - } - }); - } - return result +const titleOptions = computed(() => { + return currentTitleColumnNode.value?.options || [] }) -const indexOptions = computed(() => { // 原“索引列”数组 - let result = [] - if(controlData.value.control.zdtcsz.tby){ - zdtcszTree.value.forEach(element => { - if(element.id==controlData.value.control.zdtcsz.tby){ - result = element.options - } - }); - } - - - return result + +const indexOptions = computed(() => { + return currentIndexColumnNode.value?.options || [] }) -// 表格列配置：基于“标题行”数组（作为表头） +// 表格列配置 const zdtcszTableColumns = computed(() => { return titleOptions.value.map(item => ({ label: item.label, @@ -2971,39 +2983,71 @@ const zdtcszTableColumns = computed(() => { })) }) -// 表格行数据：基于“索引列”数组（作为行） -const zdtcszTableData = computed(() => { - return indexOptions.value.map(rowItem => { +// 监听标题行和索引列的变化，重新生成表格数据 +watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => { + // 如果没有标题行或索引列，清空表格数据 + if (!newTitleOptions.length || !newIndexOptions.length) { + zdtcszTableData.value = [] + return + } + + // 从 controlData 中获取之前保存的数据 + const savedData = controlData.value?.control?.zdtcsz?.tableData || {} + + // 生成新的表格数据 + const newTableData = newIndexOptions.map(rowItem => { + const rowKey = rowItem.value const rowObj = { - rowKey: rowItem.value, - rowLabel: rowItem.label // 第一列显示索引列的数字 + rowKey: rowKey, + rowLabel: rowItem.label // 使用选项的label作为第一列显示 } - // 为每个标题列生成空值 - titleOptions.value.forEach(colItem => { - rowObj[`col_${colItem.value}`] = '' + + // 为每个标题列生成值，如果有保存的数据则使用保存的数据 + newTitleOptions.forEach(colItem => { + const colKey = colItem.value + const savedValue = savedData[rowKey]?.[colKey] || '' + rowObj[`col_${colKey}`] = savedValue }) + return rowObj }) -}) -const zdtcszTree = computed(()=>{ - if(datapropsformList.length==0){ - datapropsformList = JSON.parse(JSON.stringify(props.formList)) - } - //console.log(datapropsformList) - if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){ - - - let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children)) - let currentCompId = controlData.value.name - const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId); - //console.log(treeC) - return treeC - }else{ - return [] + zdtcszTableData.value = newTableData +}, { immediate: true }) + +// 监听表格数据变化，保存到临时存储 +const handleTableDataChange = () => { + // 将表格数据转换为更容易存储的格式 + const tableData = {} + zdtcszTableData.value.forEach(row => { + const rowKey = row.rowKey + tableData[rowKey] = {} + titleOptions.value.forEach(col => { + const colKey = col.value + tableData[rowKey][colKey] = row[`col_${colKey}`] || '' + }) + }) + + // 保存到 controlData 中 + if (!controlData.value.control.zdtcsz) { + controlData.value.control.zdtcsz = {} } + controlData.value.control.zdtcsz.tableData = tableData +} + +// 确定按钮的处理函数 +const handleDetermineZdtcszDialogFlag = () => { + // 保存数据 + handleTableDataChange() -}) + // 关闭弹窗 + ZdtcszDialogFlag.value = false + + // 可以在这里添加其他处理逻辑 + /* console.log('保存的数据:', controlData.value.control.zdtcsz.tableData) + console.log('索引列:', indexColumnLabel.value) + console.log('标题行:', titleColumnLabel.value) */ +} /** * 合并两个组件树，仅保留type为radio和select的节点，并过滤掉指定compId的节点，同时保留options属性 @@ -3392,7 +3436,7 @@ function mergeAndFilterFormTrees(treeA, treeB, compId) { //关联选项设置优化为树 liwenxuan 20251209 start -let datapropsformList = JSON.parse(JSON.stringify(props.formList)) + const glxxszTree = computed(()=>{ if(datapropsformList.length==0){ datapropsformList = JSON.parse(JSON.stringify(props.formList)) @@ -4547,9 +4591,6 @@ function handleDetermineGlxxszDialogSwitch() { function handleDetermineGlxxszDialogCheckBox() { glxxszDialogFlagCheckBox.value = false; } -function handleDetermineZdtcszDialogFlag(){ - ZdtcszDialogFlag.value = false; -} //同步开关的设置值和开关关联选项设置的值 watch( () => controlData.value.control, @@ -8490,51 +8531,49 @@ const formatTooltip = (val: number) => { + v-model="ZdtcszDialogFlag" + class="glxxsztc" + top="150px" + :close-on-click-modal="false" + :title="`自动填充设置--` + controlData.name" + :show-close="false" + style="margin-top: 70px" + width="50%" +> + +
+ + 标题行 - -
- - 标题行 - - - - - - 索引列 - - - -
-{{zdtcszTableData}} + + + + + 索引列 + + + +
-
+
{ :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" > - + - + { v-model="scope.row[`col_${col.value}`]" size="small" placeholder="请输入" + @input="handleTableDataChange" />
- - - - + +