被历史关联过的浏览按钮值做「冲突标红」！

👀 场景痛点：
审批单里，常出现这类坑：
出差人填报销时，随手把「关联出差单」拉满，结果那张出差单早被前辈们关联过 N 次；同一张票、同一趟差，在系统里被循环报销，肉眼根本辨不出真假。

🎯 解决这种场景痛点，常规需求实现思路有两种：① 前后端结合，开发后端接口进行实现判断返回检索历史数据，前端利用后端返回结果进行前端数据渲染。② 无需后端，单纯使用前端脚本实现数据比对判断进行渲染。

🛠️思路实现详解：

1️⃣ 前后端结合：

function  travelExpenseCount(xglcId,value){
  if(!value || value == ''){
    return
  }
  let  dataObj = null
  $.ajax({timeout:2000,type:'GET',url:'/api/demo/travelExpenseCount?requestids='+value+'&workflowId=20',success:  function(data,status){
      console.log(data)
      let  xglcMap = newMap()
      dataObj = JSON.parse(data);
      dataObj = dataObj.data
        setTimeout(function(){
          let  domArr = $('#'+ xglcId + 'span a')
          Object.keys(dataObj).forEach(function(k){
            let val= dataObj[k];
            if(val.count > 1){
              $(domArr[k]).css('cssText','color:red!important').attr('title',val.requests)
            }
          })
        },100)
  }});
}

2️⃣ 单纯前端脚本：需建立与渲染字段一样的类型的隐藏字段，用作比对池。

隐藏字段利用字段属性，编写SQL，从当前流程表进行检索，若考虑表单加载性能问题，可在SQL语句增加时间等范围限制。例如字段field16891

关键代码：

const FIELD_A = 'field16891';   // 比对池字段id     
const FIELD_B = 'field16889';   // 需渲染的字段 
    
function getIds(fieldMark) {
  const arr = mobx.toJS(wfform.getFieldValueObj(fieldMark)?.specialobj || []);
  return arr.map(item => String(item.id || '')).filter(Boolean);
}
function markRed() {
  const idsA   = getIds(FIELD_A);
  const idsB   = getIds(FIELD_B);
  const $links = $(`#${FIELD_B}span a`);
  if ($links.length !== idsB.length) {
    return;
  }
  $links.each(function (idx) {
    const idB = idsB[idx];
    if (idsA.includes(idB)) {
      $(this).addClass('mark-red');
    }
  });
}
<style>
  .mark-red {
  color: red !important;
  font-weight: bold;}
</style>

✅  脚本常驻前端，字段 ID 换一下即可复用到任意表单。

💡 小结

1️⃣ 用平台自带的 mobx.toJS 把字段值转成干净数组

2️⃣ jQuery 抓取已经渲染出来的 <a>