tb5样式优化

zrch-risk-client-39/src/views/baosong/report/components/Tb5.vue

@@ -200,7 +200,7 @@
     </vxe-table>
 
     <!-- 历史填报检查组件 -->
-    <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @closeDrawer="closeHistoryDrawer" />
+    <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @close-drawer="closeHistoryDrawer" />
 
     <!-- 验证公式帮助提示 -->
     <div
@@ -214,17 +214,17 @@
 </template>
 
 <script lang="ts" setup>
-  import MultiColumnTable from '../tableComponents/MultiColumnTable.vue'
-  import AttachTable from '../tableComponents/AttachTable.vue'
-  import HistoryFillCheck from './check/historyFillCheck.vue'
+  import MultiColumnTable from '../tableComponents/MultiColumnTable.vue';
+  import AttachTable from '../tableComponents/AttachTable.vue';
+  import HistoryFillCheck from './check/historyFillCheck.vue';
 
   import { tableFormData } from '../../data/tb5.data';
-  import { ref, reactive,nextTick,onMounted,toRaw } from 'vue'
-  import { VxeUI,VxeToolbarInstance,VxeToolbarPropTypes } from 'vxe-table'
-  import { batchSaveOrUpdate, queryRecord,batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api'
-  import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api'
-  import { allTplItems } from '../../tpl/BaosongTplItem.api'
-  import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api'
+  import { ref, reactive, nextTick, onMounted, toRaw } from 'vue';
+  import { VxeUI, VxeToolbarInstance, VxeToolbarPropTypes } from 'vxe-table';
+  import { batchSaveOrUpdate, queryRecord, batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api';
+  import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api';
+  import { allTplItems } from '../../tpl/BaosongTplItem.api';
+  import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
@@ -232,22 +232,22 @@
   const tplItemMap = ref({});
   const historyFillCheckRef = ref<any>(null);
   const queryParam = ref({
-    taskId:-1,
-    taskName:'',
-    tplId:-1,
-    tplName:'',
-    tplCode:''
-  })
+    taskId: -1,
+    taskName: '',
+    tplId: -1,
+    tplName: '',
+    tplCode: '',
+  });
 
   // 权限相关状态
-  const userAllocItems = ref<string[]>([])
-  const validFormula = ref<any[]>([])
-  const validationResultsList = ref<any[]>([])
-  const drawerVisible = ref(false)
-  const historyDrawerVisible = ref(false)
-  const validationTooltipVisible = ref(false)
-  const validationTooltipPosition = ref({ left: 0, top: 0 })
-  const validationTooltipContent = ref('')
+  const userAllocItems = ref<string[]>([]);
+  const validFormula = ref<any[]>([]);
+  const validationResultsList = ref<any[]>([]);
+  const drawerVisible = ref(false);
+  const historyDrawerVisible = ref(false);
+  const validationTooltipVisible = ref(false);
+  const validationTooltipPosition = ref({ left: 0, top: 0 });
+  const validationTooltipContent = ref('');
 
   interface FormData {
     id: number | null;
@@ -260,7 +260,7 @@
     rind: number;
   }
 
-  onMounted(async ()=>{
+  onMounted(async () => {
     if (route.query.taskId) {
       queryParam.value.taskId = Number(route.query.taskId);
     }
@@ -281,14 +281,14 @@
     try {
       userAllocItems.value = await findUserRightForTplItem({
         tplid: queryParam.value.tplId,
-        taskid: queryParam.value.taskId
-      })
+        taskid: queryParam.value.taskId,
+      });
 
       validFormula.value = await getTblvalidFormula({
         tplid: queryParam.value.tplId,
-      })
+      });
     } catch (error) {
-      console.error('获取权限或验证公式失败:', error)
+      console.error('获取权限或验证公式失败:', error);
     }
 
     await setTplItemMap();
@@ -519,77 +519,73 @@
     }
   }
 
-  }
-
   // 校验数据
   const checkData = () => {
-    drawerVisible.value = true
-  }
+    drawerVisible.value = true;
+  };
 
   // 校验结果抽屉显示时触发
   const handleValidationDrawerShow = () => {
-    performValidation()
-  }
+    performValidation();
+  };
 
   // 执行校验
   const performValidation = () => {
-    validationResultsList.value = []
-    const process: string[] = []
-    process.push('开始校验')
-    process.push(`找到 ${validFormula.value.length} 个验证公式`)
+    validationResultsList.value = [];
+    const process: string[] = [];
+    process.push('开始校验');
+    process.push(`找到 ${validFormula.value.length} 个验证公式`);
 
     validFormula.value.forEach((formulaItem: any) => {
-      process.push(`开始校验公式: ${formulaItem.des}`)
-      const result = evaluateFormula(formulaItem.formula, formulaItem.des, process)
+      process.push(`开始校验公式: ${formulaItem.des}`);
+      const result = evaluateFormula(formulaItem.formula, formulaItem.des, process);
       if (result) {
-        validationResultsList.value.push(result)
-      }
-    })
-    process.push('校验完成')
+        validationResultsList.value.push(result);
       }
+    });
+    process.push('校验完成');
+  };
 
   // 解析和执行验证公式
   const evaluateFormula = (formula: string, description: string, process: string[]): any => {
     try {
-      const fieldMatch = formula.match(/\[(\w+)\]/)
+      const fieldMatch = formula.match(/\[(\w+)\]/);
       if (!fieldMatch) {
-        process.push(`跳过: 无法解析公式字段 ${formula}`)
-        return null
+        process.push(`跳过: 无法解析公式字段 ${formula}`);
+        return null;
       }
 
-      const fieldName = fieldMatch[1]
-      const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName))
+      const fieldName = fieldMatch[1];
+      const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName));
       if (!row) {
-        process.push(`跳过: 未找到字段 ${fieldName}`)
-        return null
+        process.push(`跳过: 未找到字段 ${fieldName}`);
+        return null;
       }
 
-      const fieldItem = row.content.find((c: any) => c.field === fieldName)
+      const fieldItem = row.content.find((c: any) => c.field === fieldName);
       if (!fieldItem) {
-        process.push(`跳过: 未找到字段 ${fieldName}`)
-        return null
+        process.push(`跳过: 未找到字段 ${fieldName}`);
+        return null;
       }
 
-      const strKey = `${row.code}_${fieldName}`
-      const fieldValue = formData[strKey]
+      const strKey = `${row.code}_${fieldName}`;
+      const fieldValue = formData[strKey];
 
       // 检查是否有空字段规则
-      const emptyFieldRule = validFormula.value.find((f: any) =>
-        f.formula.includes(fieldName) && f.des.includes('空字段')
-      )
+      const emptyFieldRule = validFormula.value.find((f: any) => f.formula.includes(fieldName) && f.des.includes('空字段'));
 
       if (emptyFieldRule && (!fieldValue || fieldValue === '')) {
-        process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`)
-        return null
+        process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`);
+        return null;
       }
 
       const expression = formula.replace(/\[(\w+)\]/g, (_, field) => {
-        const value = formData[`${row.code}_${field}`]
-        return value !== undefined ? `Number(${value})` : '0'
-      })
+        const value = formData[`${row.code}_${field}`];
+        return value !== undefined ? `Number(${value})` : '0';
+      });
 
-      process.push(`执行公式: ${expression}`)
-      const isValid = eval(expression)
+      process.push(`执行公式: ${expression}`);
+      const isValid = eval(expression);
 
       return {
         field: fieldName,
@@ -597,59 +593,59 @@
         formula: formula,
         isValid: isValid,
         fieldValue: fieldValue,
-        rowCode: row.code
-      }
+        rowCode: row.code,
+      };
     } catch (error) {
-      process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`)
-      return null
-    }
+      process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`);
+      return null;
     }
+  };
 
   // 处理校验结果点击，定位到表格
   const handleValidationResultClick = (result: any) => {
-    const row = tableFormData.find((r: any) => r.code === result.rowCode)
+    const row = tableFormData.find((r: any) => r.code === result.rowCode);
     if (row) {
-      const fieldItem = row.content.find((c: any) => c.field === result.field)
+      const fieldItem = row.content.find((c: any) => c.field === result.field);
       if (fieldItem) {
-        const strKey = `${row.code}_${result.field}`
-        const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement
+        const strKey = `${row.code}_${result.field}`;
+        const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement;
         if (inputElement) {
-          inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
-          inputElement.focus()
-          inputElement.style.border = '2px solid #ff4d4f'
+          inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          inputElement.focus();
+          inputElement.style.border = '2px solid #ff4d4f';
           setTimeout(() => {
-            inputElement.style.border = ''
-          }, 2000)
-        }
+            inputElement.style.border = '';
+          }, 2000);
         }
       }
     }
+  };
 
   // 显示验证公式帮助
   const showValidationHelp = (formulaItem: any, event: MouseEvent) => {
-    const rect = (event.target as HTMLElement).getBoundingClientRect()
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
     validationTooltipPosition.value = {
       left: rect.left + rect.width / 2,
-      top: rect.top - 10
-    }
-    validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`
-    validationTooltipVisible.value = true
-  }
+      top: rect.top - 10,
+    };
+    validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`;
+    validationTooltipVisible.value = true;
+  };
 
   // 关闭验证公式帮助
   const closeTooltip = () => {
-    validationTooltipVisible.value = false
-  }
+    validationTooltipVisible.value = false;
+  };
 
   // 打开历史填报抽屉
   const handleOpenHistoryDrawer = () => {
-    historyDrawerVisible.value = true
-  }
+    historyDrawerVisible.value = true;
+  };
 
   // 关闭历史填报抽屉
   const closeHistoryDrawer = () => {
-    historyDrawerVisible.value = false
-  }
+    historyDrawerVisible.value = false;
+  };
 </script>
 
 <style lang="less" scoped>