分类 前端 下的文章
FED常用工具方法
常用工具方法
实现数组去重
参考地址：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
}Vue缓存策略
页面样式
需求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中显示的字段不同，会增加回显的工作量。
LODOP打印
官网地址
本站下载地址
注意事项
- 只支持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()
}
}
}