quguang_front_wzysg_HZ/static/js/hmcrf.js

$(document).ready(function () {
  
  $('.hminput,.hmtextarea').on('change focusout keydown', function (e) {
    this.setAttribute('value', this.value)
    $(this).next().html(this.value)
  })
  $('.hminput,.hmtextarea').on('input', function (e) {
    console.log(e.target.id);
    console.log(e.target.value);
  })
  // 日期
  Array.from($('.layui-laydate')).forEach(item=>{
    item.style="display:none"
  })
  // $('select').on('change', function() {
  //   console.log('获取选中的value',$(this).val())
  //   $(this).val('2')
  //   console.log('获取选中的value',$("select option:selected").text())
  // })
  // 术后检查记录表单选
  function inputChange(inputValue) {
    console.log(inputValue);
    if (inputValue == '1' || !inputValue) {
      $('.1').css('display', 'block')
      $('.2').css('display', 'none')
      $('.3').css('display', 'none')
      $('.4').css('display', 'none')
      $('.5').css('display', 'none')
    }
    if (inputValue == '2') {
      $('.1').css('display', 'none')
      $('.2').css('display', 'block')
      $('.3').css('display', 'none')
      $('.4').css('display', 'none')
      $('.5').css('display', 'none')
    }
    if (inputValue == '3') {
      $('.1').css('display', 'none')
      $('.2').css('display', 'none')
      $('.3').css('display', 'block')
      $('.4').css('display', 'none')
      $('.5').css('display', 'none')
    }
    if (inputValue == '4') {
      $('.1').css('display', 'none')
      $('.2').css('display', 'none')
      $('.3').css('display', 'none')
      $('.4').css('display', 'block')
      $('.5').css('display', 'none')
    }
    if (inputValue == '5') {
      $('.1').css('display', 'none')
      $('.2').css('display', 'none')
      $('.3').css('display', 'none')
      $('.4').css('display', 'none')
      $('.5').css('display', 'block')
    }
    if (inputValue !== '1' && inputValue !== '2' && inputValue !== '3' && inputValue !== '4' && inputValue !== '5' && inputValue !== '') {
      $('.1').css('display', 'none')
      $('.2').css('display', 'none')
      $('.3').css('display', 'none')
      $('.4').css('display', 'none')
      $('.5').css('display', 'none')
    }
  }
  $('.hmselect ').on('input', function (e) {
    console.log(e.target);
    if (e.target.id === 'chuli-input') {
      inputChange($(this).val().trim())
    }
     e.target.placeholder = e.target.value
    this.setAttribute('value', e.target.value)
  })
  $('.hmselect').on('change click blur', function (e) {
    console.log(e);
    if(e.type==='click') {
      // 解决下拉框展示后值没有的问题
      e.target.value ? e.target.placeholder = e.target.value : ''
      // 解决有值的情况下不显示下拉框的问题
      e.target.value = ''
    }
    if(e.type==='blur') {
      e.target.value = e.target.placeholder
    }
    if(e.type==='change') {
      e.target.placeholder = e.target.value
      if (e.target.id === 'chuli-input') {
        this.setAttribute('value', $(this).val())
        inputChange($(this).val().trim())
      }
    }
    
  })
  // $('#ff').on('focus', function() {
  //   console.log('focus');
  //   $(this).next().css("top",'30px')
  // })
  // $('#ff').on('blur', function() {
  //   console.log('blur');
  //   $(this).next().css("top",'-99999px')
  // })
  $('textarea').each(function (index, elm) {
    $(elm).text(elm.getAttribute('value') || '')
  })
  const initCRF = function () {
    // const doc = window.document
    // const win = window
    const laydate = window.laydate
    $('.hminput').each(function () {
      const elm = this
      const hmDataType = elm.getAttribute('data-hm_type')

      // 时间控件
      if (hmDataType === 'date' || hmDataType === 'datetime' || hmDataType === 'time') {
        laydate.render({
          elem: '#' + elm.id,
          type: hmDataType,
          done: function (value, date, endDate) {
            elm.setAttribute('value', value)
          }
        })
      }
    })

    $('.hmcheckbox').on('change', function () {
      $(this).attr('checked', this.checked)
    })

    $('.hmradio').on('change', function () {
      // console.log(12333);
      const elm = this
      // console.log($('.hmradio'));
      $(elm).attr('checked', this.checked)
      $(`input:radio[name='${this.name}']`).each((index, item) => {
        if (item.id !== elm.id) { item.removeAttribute('checked') }
      })
      // 问卷调查计算总分
      var score = 0
      $('.hmradio').each((index, ele) => {
        // console.log(parseInt(ele.value));
        if (ele.checked) {
          score = score + parseInt(ele.value)
        }
      })
      // console.log( score);
      $('#score').attr('value', score + '分')
    })

    // 表单中图片的编辑绘制
    $('img').on('click', function () {
      // console.log(window.parent['goBack']);
      // console.log(this.getAttribute('src'));
      // console.log(this.getAttribute('alt'));
      // iframe调取vue中的方法
      window.parent['goBack'] ? window.parent['goBack'](this.getAttribute('src'), this.getAttribute('alt')) : ''
    })
  }
  initCRF()
  // 处理选择-默认展示
  function chuliDefault() {
    $('#chuli-input').val() ? inputChange($('#chuli-input').val().trim()) : ''
    //  console.log( $('#chuli-input').val());
  }
  chuliDefault()
})
// 裂隙灯检查
//  function lxdjcInput(value) {
//   console.log(value);
//   console.log($('#lxdjcJieMoOD'));
//   value.forEach(item=>{
//     console.log(item);
//     let option = document.createElement('option')
//     option.text = item.name
//      $('#lxdjcJieMoOD').append(option)
//   })

// }
/** 对象数组，对象格式
  const demo = {
    both: null,
    id: '4',
    name: '眼压',
    od: '20.3',
    os: '16',
    recId: '9379374',
    time: '2013-04-15 13:27:14'
  }
*/
// 下拉选择回显
function multipleSelectFull(val,count) {
  console.log('val', val);
  let values = val; //存储选择的内容
  $('.hmselectmultiple').each(function (index, elm) {
    // 动态赋值回显
    if (elm.id.includes('operationProject')) {
      if (val.OD.length > 0 && elm.id.includes('OD')) {
        funmultipleSelectFull(elm, val, 'OD', $(this),count)
      } else if (val.OS.length > 0 && elm.id.includes('OS')) {
        funmultipleSelectFull(elm, val, 'OS', $(this),count)
      } else if (val.OU.length > 0 && elm.id.includes('OU')) {
        funmultipleSelectFull(elm, val, 'OU', $(this),count)
      }
    }

  })
}
// 封装多选下拉框--回显--赋值
function funmultipleSelectFull(elm, val, TEXT, that,count) {
  console.log(elm);
  let opts = [] //存储option标签
  // count为1 不能修改，因为已预约了
  // count为0可修改，还未预约
  console.log(val);
  val[TEXT] && val[TEXT].length > 0 && count > 0 ? that.attr('disabled', true) : that.attr('disabled', false)
  for (let i = 0; i < elm.length; i++) {
    opts.push(elm.item(i));
  }
  console.log(opts);
  //创建一个隐藏起来的option
  let optionHide = document.createElement('option')
  optionHide.hidden = true
  optionHide.className = "multipleSelect_optionHide"
  that.append(optionHide)

  val[TEXT].forEach(item => {
    console.log(Array.from(elm.options))
    let selectindex = Array.from(elm.options).findIndex(iten => iten.innerText === item)
    console.log('selectindex', selectindex)
    selectindex !== -1 ? elm.options[selectindex].style = "background: #c2e0f4" : '' //选中的option背景为粉色
  })
  elm.options[elm.length - 1].text = val[TEXT].toString() //将values数组中的数据转化成字符串的格式赋给隐藏的option
  if (val[TEXT].length > 0) { //将隐藏的option的selected属性设置为true，这样select.value获取的值就是多选选中的值
    elm.options[elm.length - 1].selected = true
  } else {
    elm.options[0].selected = true
  }
}
// 下拉多选
function multipleSelect(operaList, text) {
  $('.hmselectmultiple').each(function (index, elm) {

    if (elm.id.includes('operationProject') && text === 'operationProject') {
      console.log(Array.from(elm.options));
      if(Array.from(elm.options).length>0) {
        let elmArrayValue = Array.from(elm.options)[Array.from(elm.options).length-1]
        if(elmArrayValue.className==='multipleSelect_optionHide' || elmArrayValue.className==='displayOption') {
          let selectValueArr = elmArrayValue.innerHTML ? elmArrayValue.innerHTML.split(',') : []
          multipleSelectFun(selectValueArr, operaList, index, elm, $(this))
        }
      }else {
        multipleSelectFun([], operaList, index, elm, $(this))
      }
    } 
    else if (elm.id.includes('surgicalSite') && text === 'surgicalSite') {
      if(Array.from(elm.options).length>0) {
        let elmArrayValue = Array.from(elm.options)[Array.from(elm.options).length-1]
        if(elmArrayValue.className==='multipleSelect_optionHide' || elmArrayValue.className==='displayOption') {
          let selectValueArr = elmArrayValue.innerHTML ? elmArrayValue.innerHTML.split(',') : []
          multipleSelectFun(selectValueArr, operaList, index, elm, $(this))
        }
      }else {
        multipleSelectFun([], operaList, index, elm, $(this))
      }
    }
  })
}
// 下拉多选封装
function multipleSelectFun(valueArr, operaList, index, elm, that) {
  
  let values =  valueArr ? valueArr : []; //存储选择的内容
  console.log(values);
  let opts = [] //存储option标签
  // console.log(that);
  // 首先需要删除所有子元素避免重复添加
  that.empty()
  // 新建两个option标签
  // one-option
  let optionEnpty = document.createElement('option')
  that.append(optionEnpty);
  // two-option
  let optionDisplay = document.createElement('option')
  optionDisplay.className = 'displayOption'
  optionDisplay.style = 'display: none'
  that.append(optionDisplay);
  // 根据获取的接口参数动态添加所有option
  operaList ? setTimeout(() => {
    operaList.forEach((item, index) => {
      var option = document.createElement('option')
      option.innerHTML = item.name
      option.value = item.id
      // 插入的数据一定要展示在默认数据的上方 'displayOption'是插件hm_select_multiple---plugin.js中定的固定class
      that.find('.displayOption').before(option)
    })
  }, 100) : ''
  // 点击进行多选
  that.on('input', function (i, inputElm) {
    let innerText = this.options[this.selectedIndex].innerText; //获取当前选择的值
    console.log(innerText);
    this.options[this.selectedIndex].style = "background: #c2e0f4"; //选中的option背景为蓝色

    let index = values.indexOf(innerText); //判断是否被选择，返回-1说明没选择，否则已被选择
    if (index > -1) { //若已选择，就删除该选择，并且将option的背景恢复为未被选择的状态
      values.splice(index, 1);
      this.options[this.selectedIndex].style = ""
      opts.filter(function (opt) {
        if (opt.innerText === innerText) {
          opt.style = "";
        }
      });
    } else {
      //没选择就将该值push到values中
      values.push(innerText);
      console.log(values);
    };
    console.log(this.options[this.length - 1]);
    // 如果选择了值
    if (innerText) {
      this.options[this.length - 1].text = values.toString(); //将values数组中的数据转化成字符串的格式赋给隐藏的option
      if (values.length > 0) { //将隐藏的option的selected属性设置为true，这样select.value获取的值就是多选选中的值
        this.options[this.length - 1].selected = true;
      } else {
        this.options[0].selected = true;
      }
    }
    // 如果选择首选项空 --全部置空
    else {
      this.options[this.length - 1].text = ''
      values = []
      opts = []
      Array.from(this.options).forEach(item => {
        item.style = "";
      })
    }
  })
}
// 下拉单选封装
function selectOadioFun(operaList, index, elm, that) {
  let values = []; //存储选择的内容
  let opts = [] //存储option标签
  // console.log(that);
  // 首先需要删除所有子元素避免重复添加
  that.empty()
  // 新建两个option标签
  // one-option
  let optionEnpty = document.createElement('option')
  that.append(optionEnpty);
  // two-option
  let optionDisplay = document.createElement('option')
  optionDisplay.className = 'displayOption'
  optionDisplay.style = 'display: none'
  that.append(optionDisplay);
  // 根据获取的接口参数动态添加所有option
  operaList ? setTimeout(() => {
    operaList.forEach((item, index) => {
      var option = document.createElement('option')
      option.innerHTML = item.name
      option.value = item.id
      // 插入的数据一定要展示在默认数据的上方 'displayOption'是插件hm_select_multiple---plugin.js中定的固定class
      that.find('.displayOption').before(option)
    })
  }, 100) : ''
  // 点击进行单选
  that.on('input', function (i, inputElm) {
    let innerText = this.options[this.selectedIndex].innerText; //获取当前选择的值
    // console.log(innerText);
    this.options[this.selectedIndex].style = "background: #c2e0f4"; //选中的option背景为蓝色
    let index = values.indexOf(innerText); //判断是否被选择，返回-1说明没选择，否则已被选择
    console.log(index);
    if (index > -1) { //若已选择，就删除该选择，并且将option的背景恢复为未被选择的状态
      values = []
      this.options[this.selectedIndex].style = ""
      console.log(opts);
      opts.filter(function (opt) {
        if (opt.innerText === innerText) {
          opt.style = "";
        }
      });
    }
    else {
      // 将没有点选的其它背景色删除
      Array.from(this.options).forEach((item, index) => {
        if (item.innerHTML !== this.options[this.selectedIndex].innerHTML && item.className !== 'displayOption') {
          item.style = "";
        }
      })
      //没选择就将该值push到values中
      values = [innerText];
      console.log(values);
    };
    // 如果选择了值
    if (innerText) {
      this.options[this.length - 1].text = values.toString(); //将values数组中的数据转化成字符串的格式赋给隐藏的option
      if (values.length > 0) { //将隐藏的option的selected属性设置为true，这样select.value获取的值就是多选选中的值
        this.options[this.length - 1].selected = true;
      } else {
        this.options[0].selected = true;
      }
    }
    // 如果选择首选项空 -- 全部置空
    else {
      this.options[this.length - 1].text = ''
      values = []
      opts = []
      Array.from(this.options).forEach(item => {
        item.style = "";
      })
    }
  })
}
function imgEditFull(base64, imgAlt) {
  //  console.log(base64);
  //  console.log(imgAlt);
  document.querySelectorAll('img').forEach(item => {
    if (item.alt === imgAlt) {
      item.setAttribute('src', base64)
    }
  })
  //  console.log(document.querySelectorAll('img'));
}
// 自动填充当天日期
function autoFullDate(value) {
  console.log('++++++++++++++++++++++++');
  // 如果是data-hm_id='qm-date 签字日期自动填充
  Array.from($('.layui-laydate')).forEach(item=>{
    item.style="display:none"
  })
  if (value) {
    $(`[data-hm_id='qm-date']`).each((index, elm) => {
      $(elm).attr('value', value)
      console.log($('.layui-laydate'));
    })
    
  }
}
// 填充回显
function dataFill(itemList, fullDate) {
  // console.log(itemList)
  if (itemList) {
    itemList ? itemList.forEach(item => {
      // console.log(item)
      const eyeType = item.both ? '' : ''
      // data-hm_bd_id--字典表/sys/table/dict/getList--id
      // 根据字典表id填充数据
      // console.log(item.id);
      // console.log( $(`[data-hm_bd_id='${item.id}']`));
      $(`[data-hm_bd_id='${item.id}']`).each(function (index, elm) {
        // 如果不是单选多选执行
        if (!$(elm).attr('class').includes('hmradio') && !$(elm).attr('class').includes('hmcheckbox')) {
          if (elm.getAttribute("data-hm_bd_eye_type") === 'od') {
            $(elm).attr('value', item.od || '')
            $(elm).next().html(item.od)

          } else if (elm.getAttribute("data-hm_bd_eye_type") === 'os') {
            $(elm).attr('value', item.os || '')
            $(elm).next().html(item.os)
          } else {
            $('textarea').each(function (index, elm) {
              $(elm).text(elm.getAttribute('value') || '')
              $(elm).width(elm.getAttribute('value') ? (elm.getAttribute('value').length * 16) + 'px' : '450px')
            })
            $(elm).attr('value', item.value || '')
            // console.log( $(elm).next());
            $(elm).next().html(item.value)
          }
        }
        // 如果单选框
        else if ($(elm).attr('class').includes('hmradio')) {
          // console.log($(elm).val());
          // console.log(item.value);
          if ($(elm).val() === item.value) {
            $(elm).prop('checked', true)
          }
        }
        // 如果多选框
        else if ($(elm).attr('class').includes('hmcheckbox')) {
          // console.log(item);
          // console.log($(elm).attr('data-hm_bd_id'))
          if ($(elm).attr('data-hm_bd_id') === item.id) {
            item.value.forEach(iten => {
              if (iten === $(elm).val()) {
                $(elm).prop('checked', true)
              }
            })
          }
        }

      })
    }) : $('textarea').each(function (index, elm) {
      $(elm).width(elm.getAttribute('value') ? (elm.getAttribute('value').length * 16) + 'px' : '450px')
    })
  }
}
// 获取表单value
function getFormValue() {
  console.log('获取表单value')
  // 复选框的值获取
  let checkboxArr = []
  let checkboxValue = {}
  hmcheckboxDom = Array.from($('.hmcheckbox'))
  hmcheckboxDom.forEach((item, index) => {
    checkboxArr.push($(item).attr('name'))
    if (hmcheckboxDom.length - 1 === index) {
      let setCheckboxArr = [...new Set(checkboxArr)]
      let checkboxObj = {}
      setCheckboxArr.forEach((iten, i) => {
        checkboxObj[iten] = []
        hmcheckboxDom.forEach((itex, m) => {
          if (iten == $(itex).attr('name')) {
            checkboxObj[iten].push(itex)
          }
          if (i === setCheckboxArr.length - 1 && m == hmcheckboxDom.length - 1) {
            // console.log(checkboxObj);
            setCheckboxArr.forEach(itee => {
              checkboxValue[itee] = []
              checkboxObj[itee].forEach(itep => {
                if ($(itep).prop('checked') === true) {
                  console.log(itep);
                  checkboxValue[itee].push($(itep).val())
                }
              })
            })
            // console.log(checkboxValue);
          }
        })
      })
    }
  })

  // 单选框的值获取
  let hmradioDOM = Array.from($('.hmradio'))
  let hmradioValue = {}
  hmradioDOM.forEach(item => {
    if ($(item).prop('checked') === true) {
      console.log($(item).attr('name'));
      hmradioValue[$(item).attr('name')] = $(item).val()
    }
  })
  // console.log(hmradioValue);

  // 下拉多选的值获取
  let hmselectmultiple = Array.from($('.hmselectmultiple '))
  let hmselectmultipleValue = {}
  console.log(hmselectmultiple);
  hmselectmultiple.forEach(item => {
    // console.log(item.id);
    // let key = item.dataset.hm_id.includes('operationProjectOD') ? 'operationOD' : (item.dataset.hm_id.includes('operationProjectOS') ? 'operationOS' :item.dataset.hm_id)
    // hmselectmultipleValue[key] = item.value ? item.value.split(',') : []
    hmselectmultipleValue[item.dataset.hm_id] = item.value ? item.value.split(',') : []
  })
  console.log(hmselectmultipleValue);
  // console.log(hmselectmultipleValue);
  return { checkboxValue, hmradioValue, hmselectmultipleValue }
}

// 判断是否签字
function isSignSuccess() {
  // console.log($('.shouqian').next().length);
  // console.log($('.shouqian').next().prevObject.length);
  // console.log($('.auto-import').next().length);
  // console.log($('.auto-import').next().prevObject.length);
  if (($('.shouqian').next().length === $('.shouqian').next().prevObject.length) && ($('.auto-import').next().length === $('.auto-import').next().prevObject.length)) {
    return true
  } else {
    return false
  }

}