ccl_plm-vue/src/utils/highlight.js

export default {
  bind(el) {

    // 获取所有子元素中的 input 和 el-select
    const inputs = el.querySelectorAll('input');
    const selects = el.querySelectorAll('.el-select');
    const textareas = el.querySelectorAll('textarea');

    // function applyHighlight(inputEl) {
    //   const isModified = inputEl.value !== null && inputEl.value.trim() !== '';
    //   if (isModified) {
    //     inputEl.classList.add('highlight');
    //   } else {
    //     inputEl.classList.remove('highlight');
    //   }
    // }
    //
    // inputs.forEach(inputEl => {
    //   // 初始检查
    //   applyHighlight(inputEl);
    //
    //   // 监听输入变化
    //   inputEl.addEventListener('input', function() {
    //     applyHighlight(inputEl);
    //   });
    // });

    // 处理所有的 input 元素
    inputs.forEach(inputEl => {
      inputEl.dataset.originalValue = inputEl.value;

      inputEl.addEventListener('input', function() {
        const isModified = inputEl.value !== inputEl.dataset.originalValue;
        if (isModified) {
          inputEl.classList.add('highlight');
        } else {
          inputEl.classList.remove('highlight');
        }
      });
    });

    // 处理所有的 textarea 元素
    textareas.forEach(textareaEl => {
      textareaEl.dataset.originalValue = textareaEl.value;

      // 监听 input 事件
      textareaEl.addEventListener('input', function() {
        const isModified = textareaEl.value !== textareaEl.dataset.originalValue;
        if (isModified) {
          textareaEl.classList.add('highlight');
        } else {
          textareaEl.classList.remove('highlight');
        }
      });

    });

    // 处理所有的 el-select 元素
    selects.forEach(selectEl => {
      const selectComponent = selectEl.__vue__;
      if (!selectComponent) {
        console.warn('Element does not have a Vue instance attached.');
        return;
      }

      selectEl.dataset.originalValue = selectComponent.value;

      selectComponent.$on('change', function(value) {
        const selectInputEl = selectEl.querySelector('.el-input__inner');
        if (selectInputEl) {
          const isModified = value !== selectEl.dataset.originalValue;
          if (isModified) {
            selectInputEl.classList.add('highlight');
          } else {
            selectInputEl.classList.remove('highlight');
          }
        }
      });
    });
  }
};