自动填充设置v0.25

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) => {
   <!-- 自动填充设置弹窗 start -->
 
   <el-dialog
-    v-model="ZdtcszDialogFlag"
-    class="glxxsztc"
-    top="150px"
-    :close-on-click-modal="false"
-    :title="`自动填充设置--` + controlData.name"
-    :show-close="false"
-    style="margin-top: 70px"
-    width="50%"
-  >
+  v-model="ZdtcszDialogFlag"
+  class="glxxsztc"
+  top="150px"
+  :close-on-click-modal="false"
+  :title="`自动填充设置--` + controlData.name"
+  :show-close="false"
+  style="margin-top: 70px"
+  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;">
-      <!-- 标题行文本：加min-width+white-space禁止换行 -->
-      <span style="font-size: larger; margin-left: 35px; min-width: 60px; white-space: nowrap;">标题行</span>
-      
-      <!-- 第一个树形选择器：限制宽度范围，避免挤压文本 -->
-      <el-tree-select
-        v-model="controlData.control.zdtcsz.tbx"
-        :data="zdtcszTree"
-        collapse-tags 
-        collapse-tags-tooltip 
-        :max-collapse-tags="2" 
-        clearable
-        filterable
-        style="flex: 1; min-width: 200px; max-width: 400px;"
-      />
-
-      <!-- 索引列文本：同上，加min-width+white-space禁止换行 -->
-      <span style="font-size: larger; min-width: 60px; white-space: nowrap;">索引列</span>
-      
-      <!-- 第二个树形选择器：同上，限制宽度范围 -->
-      <el-tree-select
-        v-model="controlData.control.zdtcsz.tby"
-        :data="zdtcszTree"
-        collapse-tags 
-        collapse-tags-tooltip 
-        :max-collapse-tags="2" 
-        clearable
-        filterable
-        style="flex: 1; min-width: 200px; max-width: 400px; margin-right: 35px;"
-      />
-    </div>
-{{zdtcszTableData}}
+    <!-- 第一个树形选择器 -->
+    <el-tree-select
+      v-model="controlData.control.zdtcsz.tbx"
+      :data="zdtcszTree"
+      collapse-tags 
+      collapse-tags-tooltip 
+      :max-collapse-tags="2" 
+      clearable
+      filterable
+      style="flex: 1; min-width: 200px; max-width: 400px;"
+    />
+
+    <!-- 索引列文本 -->
+    <span style="font-size: larger; min-width: 60px; white-space: nowrap;">索引列</span>
+    
+    <!-- 第二个树形选择器 -->
+    <el-tree-select
+      v-model="controlData.control.zdtcsz.tby"
+      :data="zdtcszTree"
+      collapse-tags 
+      collapse-tags-tooltip 
+      :max-collapse-tags="2" 
+      clearable
+      filterable
+      style="flex: 1; min-width: 200px; max-width: 400px; margin-right: 35px;"
+    />
+  </div>
 
-    <div style="width: 100%; padding: 20px; overflow-x: auto;">
+  <div style="width: 100%; padding: 20px; overflow-x: auto;">
     <el-table
       :data="zdtcszTableData"
       border
@@ -8542,14 +8581,14 @@ const formatTooltip = (val: number) => {
       :header-cell-style="{ textAlign: 'center' }"
       :cell-style="{ textAlign: 'center' }"
     >
-      <!-- 第一列：固定列（索引列的数字） -->
+      <!-- 第一列：动态列标题，显示索引列的label -->
       <el-table-column
-        label="严重性\频率"
+        :label="leftTopLabel"
         prop="rowLabel"
         width="200"
         align="center"
       />
-      <!-- 动态生成标题行对应的表格列（带完整描述） -->
+      <!-- 动态生成标题行对应的表格列 -->
       <el-table-column
         v-for="col in zdtcszTableColumns"
         :key="col.value"
@@ -8563,22 +8602,21 @@ const formatTooltip = (val: number) => {
             v-model="scope.row[`col_${col.value}`]"
             size="small"
             placeholder="请输入"
+            @input="handleTableDataChange"
           />
         </template>
       </el-table-column>
     </el-table>
   </div>
     
-    
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="handleDetermineZdtcszDialogFlag">
-          确定
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
+  <template #footer>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="handleDetermineZdtcszDialogFlag">
+        确定
+      </el-button>
+    </div>
+  </template>
+</el-dialog>
 
 <!-- 自动填充设置弹窗 end -->