分类 前端 下的文章

常用工具方法

实现数组去重

参考地址:https://github.com/mqyqingfeng/Blog/issues/27

非通用方法,需要知道object中的主键,可避免object中key顺序变化而导致的异常情况,下面以id为例

unique (array) {
  // res用来存储结果
  let res = []
  for (let i = 0, arrayLen = array.length; i < arrayLen; i++) {
    let j = 0
    let resLen = res.length
    for (; j < resLen; j++) {
      if (array[i].id === res[j].id) {
        break
      }
    }
    if (j === resLen) {
      res.push(array[i])
    }
  }
  return res
}
unique (array) {
  let hash = {}
  array.forEach((v, i) => hash[[JSON.stringify(v)]] = i)
  let keys = Object.keys(hash)
  let list = keys.sort((a, b) => hash[a] > hash[b]).map(item => JSON.parse(item))
  return list
}

- 阅读剩余部分 -

页面样式

页面样式

需求1

从详情页返回列表页,需记录列表页的选择状态和页码

方案:使用localstorage或vuex实现

注:示例代码和业务可能存在依赖,这里只是提供思路

前提:列表页需要实现分页组件

首先在设置一个开关:openroute,实现灰度上线

props: {
  openroute: {
    type: Boolean,
    default: () => (false)
  }
}

在分页组件中存储选择条件和页码

let newPage;
//openroute处理
if (this.openroute) {
  //缓存page
  if (page) { //page存在则缓存page
    localStorage.setItem("lastPath", location.href + "@" + page);
  } else {
    let lastPath = localStorage.getItem("lastPath");
    if (lastPath && lastPath !== 'undefined' && lastPath.split('@')
      && lastPath.split('@')[0] === location.href) { //同一页面时的处理逻辑
      let condition = localStorage.getItem("condition");
      if (condition !== JSON.stringify(params.data)) { //选择条件变更则重置page
        localStorage.setItem("lastPath", location.href + "@1");
      } //选择条件未变更则保持page
    } else { //未存储过数据 或者 页面地址发生变更 时则重置page
      localStorage.setItem("lastPath", location.href + "@1");
    }
  }
  //缓存condition
  localStorage.setItem("condition", JSON.stringify(params.data));
  //获取page
  let lastPath = localStorage.getItem("lastPath");
  if (lastPath && lastPath !== 'undefined' && lastPath.split('@') && lastPath.split('@')[1]) {
    newPage = Number(lastPath.split('@')[1]);
  } else {
    newPage = 1;
  }
} else {
  newPage = page;
}

在列表页面打开开关,并且在created方法中读取存储的数据

u-pagination(@paginated="afterPagination", :params="pagination", :immediate.sync="pagination_immediate" :openroute="true")
//获取缓存的数据
let condition = localStorage.getItem("condition");
if (condition) {
  Object.assign(this.form, JSON.parse(condition))
}

存在的问题

如果请求参数和template中显示的字段不同,会增加回显的工作量。

- 阅读剩余部分 -

官网地址

本站下载地址

注意事项

  • 只支持Windows
  • 免费版本,使用直接打印(LODOP.PRINT();),底部会出现本页由【试用版打印控件Lodop6.2.2.4】输出字样。

使用总结

/*
* 打印功能
* */
import { getLodop } from '../utils/LodopFuncs'
import { MessageBox } from 'element-ui'

export default {
  /**
   * 获取初始化的Print
   */
  getInitedPrint (type) {
    const LODOP = getLodop()
    // 判断LODOP是否安装或异常
    if (!LODOP) {
      MessageBox({
        title: '提示',
        message: 'LODOP初始化异常,请前往打印机设置页面排查!',
        confirmButtonText: '去设置'
      }, (e) => {
        if (window.location.hash.indexOf('#/branch') !== -1) {
          window.location.href = window.location.href.split('#/branch')[0] + '#/branch/settings/printerConfig'
        } else if (window.location.hash.indexOf('#/master') !== -1) {
          window.location.href = window.location.href.split('#/master')[0] + '#/master/settings/printerConfig'
        } else if (window.location.hash.indexOf('#/wms') !== -1) {
          window.location.href = window.location.href.split('#/wms')[0] + '#/wms/settings/printerConfig'
        }
      })
      return false
    }
    // 尝试指定打印设备
    const dataStr = localStorage.getItem('PRINTSET')
    if (dataStr && dataStr !== 'undefined') {
      const data = JSON.parse(dataStr)// 解析数据
      // 如果SET_PRINTER_INDEX返回false,则忽略,使用默认打印设备
      if (type == 1) {
        LODOP.SET_PRINTER_INDEX(data.aSet)
      } else if (type == 2) {
        LODOP.SET_PRINTER_INDEX(data.labelSet)
      } else if (type == 3) {
        LODOP.SET_PRINTER_INDEX(data.ticketSet)
      }
    }
    return LODOP
  },
  /**
   * 打印A4纸
   */
  printA4 (id) {
    const LODOP = this.getInitedPrint(1)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.PREVIEW()
    }
  },
  /**
   * 打印A4纸 横向
   */
  printTransverseA4 (id) {
    const LODOP = this.getInitedPrint(1)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')
      LODOP.PREVIEW()
    }
  },
  /**
   * 预览打印A4纸
   */
  previewA4 (id) {
    const LODOP = this.getInitedPrint(1)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.PREVIEW()
    }
  },
  /**
   * 打印商品标签
   */
  printLabel (id, barcode) {
    const LODOP = this.getInitedPrint(2)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.SET_PRINT_PAGESIZE(1, 800, 400, 'A4')
      LODOP.ADD_PRINT_BARCODE(120, 200, 120, 20, '128Auto', barcode)
      LODOP.PRINT()
    }
  },
  /**
   * 预览打印商品标签
   */
  previewLabel (id, barcode) {
    const LODOP = this.getInitedPrint(2)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.SET_PRINT_PAGESIZE(1, 800, 10, 'A4')
      LODOP.ADD_PRINT_BARCODE(120, 200, 120, 20, '128Auto', barcode)
      LODOP.PREVIEW()
    }
  },
  /**
   * 打印小票
   */
  printTicket (id) {
    const LODOP = this.getInitedPrint(3)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml)
      LODOP.SET_PRINT_PAGESIZE(3, 750, 10, '')
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Height:85%')
      LODOP.PRINT()
    }
  },
  /**
   * 预览打印小票
   */
  previewTicket (id) {
    const LODOP = this.getInitedPrint(3)
    if (LODOP) {
      const strFormHtml = '<head>' + document.head.innerHTML + '</head><body>' + document.getElementById(id).innerHTML + '</body>'
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '110%', strFormHtml)
      LODOP.SET_PRINT_PAGESIZE(3, 750, 20, '')
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Height:85%')
      LODOP.PREVIEW()
    }
  }
}