工单表单添加许可证时出现空白幽灵记录问题求助

看起来你遇到的这个“幽灵”许可证记录问题，大概率是Repeat表单组件的模板行未正确隐藏，再加上可能的HTML标签闭合、XSLT条件判断逻辑问题共同导致的。我帮你梳理几个关键排查和修复点：

1. 处理Repeat组件的默认模板行 #

从代码里的repeat="repeatPermit"属性来看，你应该用了一个支持重复表单的前端组件，这类组件通常会自动生成一个空白模板行用于新增记录，但如果这个模板行没有被正确隐藏，就会变成你看到的“幽灵”记录。

• 首先确认组件的配置：有些Repeat组件需要你给模板行添加特定类名（比如repeat-template或template）来标识这是模板而非真实数据行，然后组件会自动隐藏它。如果你的组件有这个要求，给对应的div加上：

  <div repeat="repeatPermit" class="permitRecord template">
  

• 如果组件没有自动隐藏逻辑，直接用CSS强制隐藏模板行：

  /* 隐藏Repeat组件的模板行 */
  .permitRecord[repeat="repeatPermit"].template {
    display: none;
  }
  

2. 修复XSLT的条件判断逻辑 #

你当前的代码只在PermitId为空时给记录行加hidden类，但如果是Repeat组件生成的模板行，它可能没有PermitId节点，导致这个条件不生效，模板行直接显示出来。

修改XSLT中的类名赋值逻辑，确保空记录（包括模板行）都被隐藏：

<div repeat="repeatPermit" class="permitRecord {if (PermitId = '' or not(PermitId)) then 'hidden' else ''}">
  <!-- 剩余记录内容 -->
</div>

或者更严谨的写法，用<xsl:attribute>处理：

<div repeat="repeatPermit" class="permitRecord">
  <xsl:attribute name="class">
    permitRecord
    <xsl:if test="PermitId = '' or not(PermitId)">
      <xsl:text> hidden</xsl:text>
    </xsl:if>
  </xsl:attribute>
  <!-- 剩余记录内容 -->
</div>

3. 修复HTML标签闭合问题 #

你提到怀疑标签问题，看你给出的代码片段，确实存在标签写法错误，这会导致浏览器自动补全DOM，生成多余的空白元素：

比如这段输入框的写法：

<input type="text" name="PermitEntity" id="PermitEntity" class="woPermit woPreCon woConst woRestoration permitEntry" size="11" maxlength="11">
<xsl:attribute name="value">
  <xsl:value-of select="Permit/Temporary/TempPermitEntity" />
</xsl:attribute>
</input>

<input>是自闭合标签，不需要</input>闭合，而且XSLT属性应该放在标签内部。正确写法是：

<input type="text" name="PermitEntity" id="PermitEntity" 
       class="woPermit woPreCon woConst woRestoration permitEntry" 
       size="11" maxlength="11">
  <xsl:attribute name="value">
    <xsl:value-of select="Permit/Temporary/TempPermitEntity" />
  </xsl:attribute>
</input>

或者更简洁的属性值模板写法：

<input type="text" name="PermitEntity" id="PermitEntity" 
       class="woPermit woPreCon woConst woRestoration permitEntry" 
       size="11" maxlength="11"
       value="{Permit/Temporary/TempPermitEntity}" />

检查所有类似的标签，确保没有未闭合或嵌套错误的情况，这能避免浏览器生成多余的DOM元素。

4. 修复按钮的样式/事件冲突 #

鼠标悬停真实按钮时幽灵按钮也高亮，说明两者的CSS选择器或事件绑定范围太广。

• CSS层面：修改按钮的高亮样式，只针对非隐藏的真实记录生效：

  /* 只给可见的许可证记录的按钮添加悬停样式 */
  .permitRecord:not(.hidden) .edit-btn:hover,
  .permitRecord:not(.hidden) .delete-btn:hover {
    /* 你的高亮样式 */
    background-color: #ccc;
  }
  

• JS层面：如果是通过类名批量绑定事件，确保只给非隐藏的记录按钮绑定：

  // 绑定编辑按钮事件，排除隐藏的模板行
  document.querySelectorAll('.permitRecord:not(.hidden) .edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // 你的编辑逻辑
    });
  });
  

按照以上步骤排查修复，应该能解决这个“幽灵”记录的问题。

内容的提问来源于stack exchange，提问作者user3487671