Browse Source

矩阵填充可仅选标题行或索引列

lwx_v27
liwenxuan 2 weeks ago
parent
commit
50ad03c02b
  1. 191
      src/components/DesignForm/formControlPropertiNew.vue
  2. 306
      src/components/DesignForm/public/form/form.vue

191
src/components/DesignForm/formControlPropertiNew.vue

@ -2910,7 +2910,10 @@ function mergeArrays(a, b) {
// liwenxuan 20251212 end
// liwenxuan 20251230 start
// liwenxuan 20251230 start
let datapropsformList = JSON.parse(JSON.stringify(props.formList))
@ -2919,28 +2922,23 @@ const zdtcszTree = computed(()=>{
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 []
}
})
// 使 ref computed使
const zdtcszTableData = ref([])
// ""
const currentComponentOptions = computed(() => {
return controlData.value.options
})
// label
@ -2957,7 +2955,7 @@ const currentTitleColumnNode = computed(() => {
//
const indexColumnLabel = computed(() => {
if (!currentIndexColumnNode.value) return "索引列"
if (!currentIndexColumnNode.value) return "默认行"
return currentIndexColumnNode.value.label
})
@ -2991,8 +2989,8 @@ const zdtcszTableColumns = computed(() => {
//
watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
//
if (!newTitleOptions.length || !newIndexOptions.length) {
//
if (!newTitleOptions.length && !newIndexOptions.length) {
zdtcszTableData.value = []
return
}
@ -3000,35 +2998,95 @@ watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
// controlData
const savedData = controlData.value?.control?.zdtcsz?.tableData || {}
//
const newTableData = newIndexOptions.map(rowItem => {
const rowKey = rowItem.value
// 1
if (newTitleOptions.length && !newIndexOptions.length) {
//
const defaultRowKey = 'default'
const rowObj = {
rowKey: rowKey,
rowLabel: rowItem.label // 使label
rowKey: defaultRowKey,
rowLabel: '默认' // ""
}
// 使
newTitleOptions.forEach(colItem => {
const colKey = colItem.value
const savedValue = savedData[rowKey]?.[colKey] || ''
const savedValue = savedData[defaultRowKey]?.[colKey] || ''
rowObj[`col_${colKey}`] = savedValue
})
return rowObj
})
zdtcszTableData.value = newTableData
zdtcszTableData.value = [rowObj]
}
// 2
else if (!newTitleOptions.length && newIndexOptions.length) {
//
const newTableData = newIndexOptions.map(rowItem => {
const rowKey = rowItem.value
const rowObj = {
rowKey: rowKey,
rowLabel: rowItem.label
}
//
const defaultColKey = 'default'
const savedValue = savedData[rowKey]?.[defaultColKey] || ''
rowObj[`col_${defaultColKey}`] = savedValue
return rowObj
})
zdtcszTableData.value = newTableData
}
// 3
else if (newTitleOptions.length && newIndexOptions.length) {
//
const newTableData = newIndexOptions.map(rowItem => {
const rowKey = rowItem.value
const rowObj = {
rowKey: rowKey,
rowLabel: rowItem.label
}
// 使
newTitleOptions.forEach(colItem => {
const colKey = colItem.value
const savedValue = savedData[rowKey]?.[colKey] || ''
rowObj[`col_${colKey}`] = savedValue
})
return rowObj
})
zdtcszTableData.value = newTableData
}
}, { immediate: true })
//
const handleTableDataChange = () => {
//
const tableData = {}
zdtcszTableData.value.forEach(row => {
const rowKey = row.rowKey
tableData[rowKey] = {}
titleOptions.value.forEach(col => {
//
let currentColumns = []
if (titleOptions.value.length > 0) {
// 使
currentColumns = titleOptions.value
} else if (zdtcszTableData.value[0]) {
// col_
const firstRow = zdtcszTableData.value[0]
Object.keys(firstRow).forEach(key => {
if (key.startsWith('col_')) {
const colKey = key.replace('col_', '')
currentColumns.push({ value: colKey })
}
})
}
//
currentColumns.forEach(col => {
const colKey = col.value
tableData[rowKey][colKey] = row[`col_${colKey}`] || ''
})
@ -3055,6 +3113,10 @@ const handleDetermineZdtcszDialogFlag = () => {
console.log('左上角标签:', leftTopLabel.value) */
}
/**
* 合并两个组件树仅保留type为radio和select的节点并过滤掉指定compId的节点同时保留options属性
* @param {Array} treeA - 组件树a包含表单结构信息
@ -8534,9 +8596,8 @@ const formatTooltip = (val: number) => {
<!-- 自动填充设置弹窗 start -->
<el-dialog
<!-- 自动填充设置弹窗 start -->
<el-dialog
v-model="ZdtcszDialogFlag"
class="glxxsztc"
top="150px"
@ -8595,32 +8656,61 @@ const formatTooltip = (val: number) => {
align="center"
/>
<!-- 动态生成标题行对应的表格列 -->
<el-table-column
v-for="col in zdtcszTableColumns"
:key="col.value"
:label="col.label"
:prop="`col_${col.value}`"
min-width="200"
align="center"
>
<template #default="scope">
<!-- 改为下拉选择器 -->
<el-select
v-model="scope.row[`col_${col.value}`]"
size="small"
placeholder="请选择"
style="width: 100%;"
@change="handleTableDataChange"
>
<el-option
v-for="option in currentComponentOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
<template v-if="titleOptions.length > 0">
<el-table-column
v-for="col in zdtcszTableColumns"
:key="col.value"
:label="col.label"
:prop="`col_${col.value}`"
min-width="200"
align="center"
>
<template #default="scope">
<!-- 改为下拉选择器 -->
<el-select
v-model="scope.row[`col_${col.value}`]"
size="small"
placeholder="请选择"
style="width: 100%;"
@change="handleTableDataChange"
>
<el-option
v-for="option in currentComponentOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</template>
<!-- 当没有标题行时显示一个默认列 -->
<template v-else-if="zdtcszTableData.length > 0">
<el-table-column
key="default"
label="默认列"
prop="col_default"
min-width="200"
align="center"
>
<template #default="scope">
<el-select
v-model="scope.row.col_default"
size="small"
placeholder="请选择"
style="width: 100%;"
@change="handleTableDataChange"
>
<el-option
v-for="option in currentComponentOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</template>
</el-table>
</div>
@ -8632,7 +8722,6 @@ const formatTooltip = (val: number) => {
</div>
</template>
</el-dialog>
<!-- 自动填充设置弹窗 end -->
<!--

306
src/components/DesignForm/public/form/form.vue

@ -1286,12 +1286,25 @@ nextTick(()=>{
let tby=getLastColonAfterString(element.tby)
/* console.log(tbx)
console.log(tby) */
//console.log(element.name)
let rowValue = model.value[tbx]
//console.log(rowValue)
let columnValue = model.value[tby]
let cellValue = getTableCellValueV2(element.tableData, rowValue, columnValue)
//console.log(cellValue);
//console.log(element.name)
//console.log(columnValue)
if(tbx!=""&&tby!=""){
let cellValue = getTableCellValue(element.tableData, rowValue, columnValue)
model.value[element.name] = cellValue*1
}else if(tbx!=""&&tby==""){
//console.log("")
let cellValue = getTableCellValue(element.tableData, rowValue, 'default')
//console.log(cellValue)
model.value[element.name] = cellValue*1
}else if(tbx==""&&tby!=""){
//console.log("")
let cellValue = getTableCellValue(element.tableData, 'any', columnValue)
//console.log(cellValue)
model.value[element.name] = cellValue*1
}
@ -1313,7 +1326,7 @@ nextTick(()=>{
function getLastColonAfterString(str) {
// 1.
if (typeof str !== 'string') {
console.warn('输入必须为字符串类型');
//console.warn('');
return '';
}
@ -1330,8 +1343,20 @@ function getLastColonAfterString(str) {
}
//
function getTableCellValueV2(tableData, rowValue, columnValue) {
/**
* 获取表格单元格值兼容多种tableData结构
* 支持三种结构
* 1. 标准行列结构{列号: {行号: , ...}, ...}
* 2. 仅一行结构{default: {列号: , ...}}
* 3. 仅一列结构{列号: {default: }, ...}
*
* @param {Object} tableData - 表格数据
* @param {String|Number} rowValue - 行标识
* @param {String|Number} columnValue - 列标识
* @returns {String|undefined} - 返回对应的单元格值如果未找到则返回undefined
*/
function getTableCellValueV3(tableData, rowValue, columnValue) {
try {
//
if (!tableData || typeof tableData !== 'object' || Array.isArray(tableData)) {
@ -1347,8 +1372,59 @@ function getTableCellValueV2(tableData, rowValue, columnValue) {
const rowStr = String(rowValue);
const columnStr = String(columnValue);
// 使访
return tableData?.[columnStr]?.[rowStr];
// 1. default
if (tableData.default && typeof tableData.default === 'object') {
// {default: {: , ...}}
// 使
return tableData.default?.[columnStr];
}
// 2.
const columnObj = tableData[columnStr];
if (columnObj && typeof columnObj === 'object') {
// 2.1
const cellValue = columnObj[rowStr];
if (cellValue !== undefined) {
return cellValue; //
}
// 2.2 default
if (columnObj.default !== undefined) {
// {: {default: }, ...}
// default
return columnObj.default;
}
}
// 3.
// 3.1 default
if (!columnObj) {
//
for (const colKey in tableData) {
if (String(colKey) === columnStr) {
const colData = tableData[colKey];
if (colData && typeof colData === 'object' && colData.default !== undefined) {
return colData.default;
}
}
}
}
// 3.2 default"default"
for (const key in tableData) {
const data = tableData[key];
if (data && typeof data === 'object') {
//
if (data[columnStr] !== undefined) {
//
return data[columnStr];
}
}
}
// 4. undefined
return undefined;
} catch (error) {
// undefined
console.error('获取表格单元格值时发生错误:', error);
@ -1356,6 +1432,220 @@ function getTableCellValueV2(tableData, rowValue, columnValue) {
}
}
/**
* 增强版自动检测tableData结构并获取值
* 支持动态结构检测
*/
function getTableCellValueEnhanced(tableData, rowValue, columnValue) {
try {
if (!tableData || typeof tableData !== 'object') {
return undefined;
}
if (rowValue == null || columnValue == null) {
return undefined;
}
const rowStr = String(rowValue);
const columnStr = String(columnValue);
//
const directValue = tableData?.[columnStr]?.[rowStr];
if (directValue !== undefined) {
return directValue;
}
//
const tableStructure = detectTableStructure(tableData);
switch (tableStructure) {
case 'standard':
//
break;
case 'singleRow':
//
return getFromSingleRowStructure(tableData, columnStr);
case 'singleColumn':
//
return getFromSingleColumnStructure(tableData, columnStr);
case 'mixed':
//
return getFromMixedStructure(tableData, rowStr, columnStr);
default:
// undefined
return undefined;
}
return undefined;
} catch (error) {
console.error('获取表格单元格值时发生错误:', error);
return undefined;
}
}
/**
* 检测tableData的结构
* @returns {string} - 结构类型'standard', 'singleRow', 'singleColumn', 'mixed', 'unknown'
*/
function detectTableStructure(tableData) {
if (!tableData || typeof tableData !== 'object') {
return 'unknown';
}
const keys = Object.keys(tableData);
if (keys.length === 0) {
return 'empty';
}
// default
if (keys.length === 1 && keys[0] === 'default') {
const defaultData = tableData.default;
if (defaultData && typeof defaultData === 'object') {
// default
const hasNestedObjects = Object.values(defaultData).some(
value => value && typeof value === 'object'
);
if (!hasNestedObjects) {
return 'singleRow';
}
}
}
//
let isSingleColumn = true;
for (const key of keys) {
const colData = tableData[key];
if (!colData || typeof colData !== 'object') {
isSingleColumn = false;
break;
}
// default
const colKeys = Object.keys(colData);
if (colKeys.length !== 1 || (colKeys.length === 1 && colKeys[0] !== 'default')) {
// default
if (colKeys.length > 1 || (colKeys.length === 1 && !colKeys[0].match(/^\d+$/))) {
isSingleColumn = false;
break;
}
}
}
if (isSingleColumn) {
return 'singleColumn';
}
//
let isStandard = true;
for (const key of keys) {
const colData = tableData[key];
if (!colData || typeof colData !== 'object') {
isStandard = false;
break;
}
//
const colKeys = Object.keys(colData);
if (colKeys.length === 0) {
isStandard = false;
break;
}
// default
const hasNonNumericKeys = colKeys.some(k => k !== 'default' && !k.match(/^\d+$/));
if (hasNonNumericKeys) {
isStandard = false;
break;
}
}
if (isStandard) {
return 'standard';
}
//
return 'mixed';
}
/**
* 从仅一行结构中获取值
*/
function getFromSingleRowStructure(tableData, columnStr) {
return tableData.default?.[columnStr];
}
/**
* 从仅一列结构中获取值
*/
function getFromSingleColumnStructure(tableData, columnStr) {
const colData = tableData[columnStr];
if (colData && typeof colData === 'object') {
// default
return colData.default !== undefined ? colData.default : Object.values(colData)[0];
}
return undefined;
}
/**
* 从混合结构中获取值
*/
function getFromMixedStructure(tableData, rowStr, columnStr) {
//
// 1.
const standardValue = tableData?.[columnStr]?.[rowStr];
if (standardValue !== undefined) {
return standardValue;
}
// 2. default
const columnData = tableData[columnStr];
if (columnData && typeof columnData === 'object') {
if (columnData.default !== undefined) {
return columnData.default;
}
}
// 3. default
if (tableData.default && typeof tableData.default === 'object') {
return tableData.default[columnStr];
}
// 4.
for (const key in tableData) {
const data = tableData[key];
if (data && typeof data === 'object') {
//
if (data[columnStr] !== undefined) {
return data[columnStr];
}
//
if (key === columnStr && data[rowStr] !== undefined) {
return data[rowStr];
}
}
}
return undefined;
}
/**
* 统一方法推荐使用这个
*/
function getTableCellValue(tableData, rowValue, columnValue) {
return getTableCellValueEnhanced(tableData, rowValue, columnValue);
}
function addStringIfNotExists(arr: string[], str: string) {
if (!arr.includes(str)) {
arr.push(str);

Loading…
Cancel
Save