Browse Source

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

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

121
src/components/DesignForm/formControlPropertiNew.vue

@ -2910,7 +2910,10 @@ function mergeArrays(a, b) {
// liwenxuan 20251212 end // liwenxuan 20251212 end
// liwenxuan 20251230 start
// liwenxuan 20251230 start
let datapropsformList = JSON.parse(JSON.stringify(props.formList)) let datapropsformList = JSON.parse(JSON.stringify(props.formList))
@ -2919,28 +2922,23 @@ const zdtcszTree = computed(()=>{
datapropsformList = JSON.parse(JSON.stringify(props.formList)) datapropsformList = JSON.parse(JSON.stringify(props.formList))
} }
//console.log(datapropsformList)
if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){ if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){
let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children)) let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children))
let currentCompId = controlData.value.name let currentCompId = controlData.value.name
const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId); const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId);
//console.log(treeC)
return treeC return treeC
}else{ }else{
return [] return []
} }
}) })
// 使 ref computed使 // 使 ref computed使
const zdtcszTableData = ref([]) const zdtcszTableData = ref([])
// "" // ""
const currentComponentOptions = computed(() => { const currentComponentOptions = computed(() => {
return controlData.value.options return controlData.value.options
}) })
// label // label
@ -2957,7 +2955,7 @@ const currentTitleColumnNode = computed(() => {
// //
const indexColumnLabel = computed(() => { const indexColumnLabel = computed(() => {
if (!currentIndexColumnNode.value) return "索引列" if (!currentIndexColumnNode.value) return "默认行"
return currentIndexColumnNode.value.label return currentIndexColumnNode.value.label
}) })
@ -2991,8 +2989,8 @@ const zdtcszTableColumns = computed(() => {
// //
watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => { watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
// //
if (!newTitleOptions.length || !newIndexOptions.length) { if (!newTitleOptions.length && !newIndexOptions.length) {
zdtcszTableData.value = [] zdtcszTableData.value = []
return return
} }
@ -3000,12 +2998,52 @@ watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
// controlData // controlData
const savedData = controlData.value?.control?.zdtcsz?.tableData || {} const savedData = controlData.value?.control?.zdtcsz?.tableData || {}
// 1
if (newTitleOptions.length && !newIndexOptions.length) {
//
const defaultRowKey = 'default'
const rowObj = {
rowKey: defaultRowKey,
rowLabel: '默认' // ""
}
// 使
newTitleOptions.forEach(colItem => {
const colKey = colItem.value
const savedValue = savedData[defaultRowKey]?.[colKey] || ''
rowObj[`col_${colKey}`] = savedValue
})
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 newTableData = newIndexOptions.map(rowItem => {
const rowKey = rowItem.value const rowKey = rowItem.value
const rowObj = { const rowObj = {
rowKey: rowKey, rowKey: rowKey,
rowLabel: rowItem.label // 使label rowLabel: rowItem.label
} }
// 使 // 使
@ -3019,16 +3057,36 @@ watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
}) })
zdtcszTableData.value = newTableData zdtcszTableData.value = newTableData
}
}, { immediate: true }) }, { immediate: true })
// //
const handleTableDataChange = () => { const handleTableDataChange = () => {
// //
const tableData = {} const tableData = {}
zdtcszTableData.value.forEach(row => { zdtcszTableData.value.forEach(row => {
const rowKey = row.rowKey const rowKey = row.rowKey
tableData[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 const colKey = col.value
tableData[rowKey][colKey] = row[`col_${colKey}`] || '' tableData[rowKey][colKey] = row[`col_${colKey}`] || ''
}) })
@ -3055,6 +3113,10 @@ const handleDetermineZdtcszDialogFlag = () => {
console.log('左上角标签:', leftTopLabel.value) */ console.log('左上角标签:', leftTopLabel.value) */
} }
/** /**
* 合并两个组件树仅保留type为radio和select的节点并过滤掉指定compId的节点同时保留options属性 * 合并两个组件树仅保留type为radio和select的节点并过滤掉指定compId的节点同时保留options属性
* @param {Array} treeA - 组件树a包含表单结构信息 * @param {Array} treeA - 组件树a包含表单结构信息
@ -8534,9 +8596,8 @@ const formatTooltip = (val: number) => {
<!-- 自动填充设置弹窗 start --> <!-- 自动填充设置弹窗 start -->
<el-dialog
<el-dialog
v-model="ZdtcszDialogFlag" v-model="ZdtcszDialogFlag"
class="glxxsztc" class="glxxsztc"
top="150px" top="150px"
@ -8595,6 +8656,7 @@ const formatTooltip = (val: number) => {
align="center" align="center"
/> />
<!-- 动态生成标题行对应的表格列 --> <!-- 动态生成标题行对应的表格列 -->
<template v-if="titleOptions.length > 0">
<el-table-column <el-table-column
v-for="col in zdtcszTableColumns" v-for="col in zdtcszTableColumns"
:key="col.value" :key="col.value"
@ -8621,6 +8683,34 @@ const formatTooltip = (val: number) => {
</el-select> </el-select>
</template> </template>
</el-table-column> </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> </el-table>
</div> </div>
@ -8632,7 +8722,6 @@ const formatTooltip = (val: number) => {
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<!-- 自动填充设置弹窗 end --> <!-- 自动填充设置弹窗 end -->
<!-- <!--

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

@ -1286,12 +1286,25 @@ nextTick(()=>{
let tby=getLastColonAfterString(element.tby) let tby=getLastColonAfterString(element.tby)
/* console.log(tbx) /* console.log(tbx)
console.log(tby) */ console.log(tby) */
//console.log(element.name)
let rowValue = model.value[tbx] let rowValue = model.value[tbx]
//console.log(rowValue)
let columnValue = model.value[tby] let columnValue = model.value[tby]
let cellValue = getTableCellValueV2(element.tableData, rowValue, columnValue) //console.log(columnValue)
//console.log(cellValue);
//console.log(element.name)
if(tbx!=""&&tby!=""){ 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 model.value[element.name] = cellValue*1
} }
@ -1313,7 +1326,7 @@ nextTick(()=>{
function getLastColonAfterString(str) { function getLastColonAfterString(str) {
// 1. // 1.
if (typeof str !== 'string') { if (typeof str !== 'string') {
console.warn('输入必须为字符串类型'); //console.warn('');
return ''; 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 { try {
// //
if (!tableData || typeof tableData !== 'object' || Array.isArray(tableData)) { if (!tableData || typeof tableData !== 'object' || Array.isArray(tableData)) {
@ -1347,8 +1372,59 @@ function getTableCellValueV2(tableData, rowValue, columnValue) {
const rowStr = String(rowValue); const rowStr = String(rowValue);
const columnStr = String(columnValue); const columnStr = String(columnValue);
// 使访 // 1. default
return tableData?.[columnStr]?.[rowStr]; 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) { } catch (error) {
// undefined // undefined
console.error('获取表格单元格值时发生错误:', error); 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) { function addStringIfNotExists(arr: string[], str: string) {
if (!arr.includes(str)) { if (!arr.includes(str)) {
arr.push(str); arr.push(str);

Loading…
Cancel
Save