herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

自动填充设置v0.25

lwx_v27
liwenxuan 3 weeks ago
parent
287acfe3fb
commit
883e8a3c8e
1 changed files with 166 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 294
      src/components/DesignForm/formControlPropertiNew.vue

294
src/components/DesignForm/formControlPropertiNew.vue
View File

@ -2910,60 +2910,72 @@ function mergeArrays(a, b) {
//选项批量编辑 liwenxuan 20251212 end //选项批量编辑 liwenxuan 20251212 end
//自动填充设置 liwenxuan 20251230 start //自动填充设置 liwenxuan 20251230 start
let datapropsformList = JSON.parse(JSON.stringify(props.formList))
/** const zdtcszTree = computed(()=>{
* 获取字符串最后一个英文冒号（:）后的字符 if(datapropsformList&&datapropsformList.length==0){
* @param {string} str - 待处理的原始字符串 datapropsformList = JSON.parse(JSON.stringify(props.formList))
* @returns {string} 最后一个冒号后的子串；无冒号/冒号在末尾时返回空字符串
*/
function getLastColonAfterString(str) {
// 1. 输入校验：确保输入是字符串类型（处理非字符串入参）
if (typeof str !== 'string') {
console.warn('输入必须为字符串类型');
return '';
} }
//console.log(datapropsformList)
if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){
// 2. 找到最后一个英文冒号的索引位置
const lastColonIndex = str.lastIndexOf(':'); let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children))
let currentCompId = controlData.value.name
// 3. 边界判断：无冒号 或 冒号在最后一位 → 返回空字符串 const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId);
if (lastColonIndex === -1 || lastColonIndex === str.length - 1) { //console.log(treeC)
return ''; return treeC
}else{
return []
} }
})
// 4. 截取最后一个冒号后的所有字符并返回 // 使用 ref 替代 computed，使其可写
return str.slice(lastColonIndex + 1); 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(() => { const titleOptions = computed(() => {
let result = [] return currentTitleColumnNode.value?.options || []
if(controlData.value.control.zdtcsz.tbx){
zdtcszTree.value.forEach(element => {
if(element.id==controlData.value.control.zdtcsz.tbx){
result = element.options
}
});
}
return result
}) })
const indexOptions = computed(() => { // 原“索引列”数组
let result = [] const indexOptions = computed(() => {
if(controlData.value.control.zdtcsz.tby){ return currentIndexColumnNode.value?.options || []
zdtcszTree.value.forEach(element => {
if(element.id==controlData.value.control.zdtcsz.tby){
result = element.options
}
});
}
return result
}) })
// 表格列配置：基于“标题行”数组（作为表头） // 表格列配置
const zdtcszTableColumns = computed(() => { const zdtcszTableColumns = computed(() => {
return titleOptions.value.map(item => ({ return titleOptions.value.map(item => ({
label: item.label, label: item.label,
@ -2971,39 +2983,71 @@ const zdtcszTableColumns = computed(() => {
})) }))
}) })
// 表格行数据：基于“索引列”数组（作为行） // 监听标题行和索引列的变化，重新生成表格数据
const zdtcszTableData = computed(() => { watch([titleOptions, indexOptions], ([newTitleOptions, newIndexOptions]) => {
return indexOptions.value.map(rowItem => { // 如果没有标题行或索引列，清空表格数据
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 = { const rowObj = {
rowKey: rowItem.value, rowKey: rowKey,
rowLabel: rowItem.label // 第一列显示索引列的数字 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 return rowObj
}) })
})
const zdtcszTree = computed(()=>{
if(datapropsformList.length==0){
datapropsformList = JSON.parse(JSON.stringify(props.formList))
}
//console.log(datapropsformList) zdtcszTableData.value = newTableData
if(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children && associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children.length>0){ }, { immediate: true })
// 监听表格数据变化，保存到临时存储
let datab = JSON.parse(JSON.stringify(associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf.value[0].children)) const handleTableDataChange = () => {
let currentCompId = controlData.value.name // 将表格数据转换为更容易存储的格式
const treeC = mergeAndFilterFormTrees(datapropsformList, datab,currentCompId); const tableData = {}
//console.log(treeC) zdtcszTableData.value.forEach(row => {
return treeC const rowKey = row.rowKey
}else{ tableData[rowKey] = {}
return [] 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属性 * 合并两个组件树，仅保留type为radio和select的节点，并过滤掉指定compId的节点，同时保留options属性
@ -3392,7 +3436,7 @@ function mergeAndFilterFormTrees(treeA, treeB, compId) {
//关联选项设置优化为树 liwenxuan 20251209 start //关联选项设置优化为树 liwenxuan 20251209 start
let datapropsformList = JSON.parse(JSON.stringify(props.formList))
const glxxszTree = computed(()=>{ const glxxszTree = computed(()=>{
if(datapropsformList.length==0){ if(datapropsformList.length==0){
datapropsformList = JSON.parse(JSON.stringify(props.formList)) datapropsformList = JSON.parse(JSON.stringify(props.formList))
@ -4547,9 +4591,6 @@ function handleDetermineGlxxszDialogSwitch() {
function handleDetermineGlxxszDialogCheckBox() { function handleDetermineGlxxszDialogCheckBox() {
glxxszDialogFlagCheckBox.value = false; glxxszDialogFlagCheckBox.value = false;
} }
function handleDetermineZdtcszDialogFlag(){
ZdtcszDialogFlag.value = false;
}
//同步开关的设置值和开关关联选项设置的值 //同步开关的设置值和开关关联选项设置的值
watch( watch(
() => controlData.value.control, () => controlData.value.control,
@ -8490,51 +8531,49 @@ const formatTooltip = (val: number) => {
<!-- 自动填充设置弹窗 start --> <!-- 自动填充设置弹窗 start -->
<el-dialog <el-dialog
v-model="ZdtcszDialogFlag" v-model="ZdtcszDialogFlag"
class="glxxsztc" class="glxxsztc"
top="150px" top="150px"
:close-on-click-modal="false" :close-on-click-modal="false"
:title="`自动填充设置--` + controlData.name" :title="`自动填充设置--` + controlData.name"
:show-close="false" :show-close="false"
style="margin-top: 70px" style="margin-top: 70px"
width="50%" width="50%"
> >
<!-- 外层容器保持flex布局，核心是给文本span加固定最小宽度+禁止换行 -->
<div v-if="ZdtcszDialogFlag" style="width: 100%; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 8px 0;">
<!-- 标题行文本 -->
<span style="font-size: larger; margin-left: 35px; min-width: 60px; white-space: nowrap;">标题行</span>
<!-- 外层容器保持flex布局，核心是给文本span加固定最小宽度+禁止换行 --> <!-- 第一个树形选择器 -->
<div v-if="ZdtcszDialogFlag" style="width: 100%; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 8px 0;"> <el-tree-select
<!-- 标题行文本：加min-width+white-space禁止换行 --> v-model="controlData.control.zdtcsz.tbx"
<span style="font-size: larger; margin-left: 35px; min-width: 60px; white-space: nowrap;">标题行</span> :data="zdtcszTree"
collapse-tags
<!-- 第一个树形选择器：限制宽度范围，避免挤压文本 --> collapse-tags-tooltip
<el-tree-select :max-collapse-tags="2"
v-model="controlData.control.zdtcsz.tbx" clearable
:data="zdtcszTree" filterable
collapse-tags style="flex: 1; min-width: 200px; max-width: 400px;"
collapse-tags-tooltip />
:max-collapse-tags="2"
clearable <!-- 索引列文本 -->
filterable <span style="font-size: larger; min-width: 60px; white-space: nowrap;">索引列</span>
style="flex: 1; min-width: 200px; max-width: 400px;"
/> <!-- 第二个树形选择器 -->
<el-tree-select
<!-- 索引列文本：同上，加min-width+white-space禁止换行 --> v-model="controlData.control.zdtcsz.tby"
<span style="font-size: larger; min-width: 60px; white-space: nowrap;">索引列</span> :data="zdtcszTree"
collapse-tags
<!-- 第二个树形选择器：同上，限制宽度范围 --> collapse-tags-tooltip
<el-tree-select :max-collapse-tags="2"
v-model="controlData.control.zdtcsz.tby" clearable
:data="zdtcszTree" filterable
collapse-tags style="flex: 1; min-width: 200px; max-width: 400px; margin-right: 35px;"
collapse-tags-tooltip />
:max-collapse-tags="2" </div>
clearable
filterable
style="flex: 1; min-width: 200px; max-width: 400px; margin-right: 35px;"
/>
</div>
{{zdtcszTableData}}
<div style="width: 100%; padding: 20px; overflow-x: auto;"> <div style="width: 100%; padding: 20px; overflow-x: auto;">
<el-table <el-table
:data="zdtcszTableData" :data="zdtcszTableData"
border border
@ -8542,14 +8581,14 @@ const formatTooltip = (val: number) => {
:header-cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
> >
<!-- 第一列：固定列（索引列的数字） --> <!-- 第一列：动态列标题，显示索引列的label -->
<el-table-column <el-table-column
label="严重性\频率" :label="leftTopLabel"
prop="rowLabel" prop="rowLabel"
width="200" width="200"
align="center" align="center"
/> />
<!-- 动态生成标题行对应的表格列（带完整描述） --> <!-- 动态生成标题行对应的表格列 -->
<el-table-column <el-table-column
v-for="col in zdtcszTableColumns" v-for="col in zdtcszTableColumns"
:key="col.value" :key="col.value"
@ -8563,22 +8602,21 @@ const formatTooltip = (val: number) => {
v-model="scope.row[`col_${col.value}`]" v-model="scope.row[`col_${col.value}`]"
size="small" size="small"
placeholder="请输入" placeholder="请输入"
@input="handleTableDataChange"
/> />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<template #footer>
<div class="dialog-footer">
<template #footer> <el-button type="primary" @click="handleDetermineZdtcszDialogFlag">
<div class="dialog-footer"> 确定
<el-button type="primary" @click="handleDetermineZdtcszDialogFlag"> </el-button>
确定 </div>
</el-button> </template>
</div> </el-dialog>
</template>
</el-dialog>
<!-- 自动填充设置弹窗 end --> <!-- 自动填充设置弹窗 end -->

Write Preview
Loading…
Cancel
Save