手动输入框需自动处理首尾空格Excel 第 46 行

① 基本信息

② 问题截图

③ 旧代码涉及的项目文件及行数（backup730 分支排查结果）

<el-form-item required label="项目名称" class="form-item-full-width">
  <el-input ref="planName" v-model="form.planName" :disabled="readOnly" maxlength="200" @input="changePlanName">
  </el-input>
</el-form-item>
<el-form-item required label="项目批文(备案)号" class="blue-required">
  <el-input v-model="form.recordsNumber" clearable maxlength="100" :disabled="readOnly"></el-input>
</el-form-item>
<el-form-item required label="项目批文(备案)名称" class="blue-required">
  <el-input v-model="form.recordsName" clearable :disabled="readOnly" maxlength="100"></el-input>
</el-form-item>
<el-form-item required label="所属集团">
  <el-input v-model="form.bloc" clearable maxlength="100" :disabled="readOnly"></el-input>
</el-form-item>

④ 修复代码涉及的项目文件及行数

Vue.use(SoDirective)

// 新增：全局自动去除输入框首尾空格
// 用 document 的 blur 捕获阶段做事件委托，一次性覆盖全项目所有 el-input / el-textarea
// 生成的原生 <input>/<textarea>，无需逐个页面/组件接入 v-trim 指令，
// 满足"所有手动输入的输入框都需要进行检查"的要求。
// 注意：input/textarea 的 blur 事件不冒泡，必须监听 capture 阶段（第三个参数 true）
document.addEventListener('blur', function (e) {
  var target = e.target
  if (!target || (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA')) return
  if (target.type && ['checkbox', 'radio', 'button', 'file'].indexOf(target.type) !== -1) return
  var raw = target.value
  if (typeof raw !== 'string' || raw === '') return
  var trimmed = raw.replace(/^\s+|\s+$/g, '')
  if (trimmed !== raw) {
    target.value = trimmed
    // 派发原生 input 事件，让 Vue 的 v-model / Element UI 的双向绑定感知到值变化
    target.dispatchEvent(new Event('input', { bubbles: true }))
  }
}, true)

⑤ 修复方案

1. 在 src/main.js 中新增一段全局 blur 捕获阶段监听（见上），对全站所有原生 <input>/<textarea>（含 Element UI el-input/el-textarea 内部渲染出的原生标签）在失焦时自动去除首尾空格，并同步触发 input 事件让 v-model 感知变化。这样无需逐个页面改造即可覆盖题目要求的"所有手动输入的输入框"。
2. 对于像 baseInfo.vue 中"项目名称"这类还绑定了额外 @input="changePlanName" 联动逻辑的字段，全局方案触发的 input 事件同样会走到这些已有回调，不需要单独改造。
3. 后端兜底：建议在 addProject/updatePlant 等保存接口的入参 DTO 反序列化后，统一对 String 类型字段做一次 trim()（可用 Jackson 的 StringTrimModule 或在 Controller 层加一个请求体处理器），防止绕过前端直接调用接口时仍然把带空格的值存入数据库。
4. 回归验证：在"项目名称""项目批文(备案)号""所属集团"等字段前后各输入若干空格并保存，确认保存值及回显值均已去除首尾空格；同时验证原有的 @input="changePlanName"、maxlength 计数等联动功能未受影响。