// indexedDB.js,浏览器本地数据库操作

export default {
// indexedDB兼容
indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
// 打开数据库
// 新对象储存空间newStore参数:newStore.name、newStore.key
// 新增对象存储空间要更改数据库版本
openDB: function (dbname, version, db, newStore, callback) {
var version = version || ;
var request = this.indexedDB.open(dbname, version);
request.onerror = function (event) {
console.log('IndexedDB数据库打开错误');
};
request.onsuccess = function (event) {
db = event.target.result;
if (callback && (typeof callback === 'function')) {
callback(db);
}
};
// onupgradeneeded,调用创建新的储存空间
request.onupgradeneeded = function (event) {
var db = event.target.result;
if (newStore) {
if (!db.objectStoreNames.contains(newStore.name)) {
var objectStore = db.createObjectStore(newStore.name, {
keyPath: newStore.key,
});
objectStore.createIndex('counter_index', 'counter', { unique: false });
objectStore.createIndex('barcode_index', 'barcode', { unique: false });
objectStore.createIndex('qty_index', 'qty', { unique: false });
objectStore.createIndex('counter_code', ['counter', 'barcode'], { unique: false });
}
}
};
},
// 删除数据库
deleteDB: function (dbname, callback) {
var deleteQuest = this.indexedDB.deleteDatabase(dbname);
deleteQuest.onerror = function () {
console.log('删除数据库出错');
};
deleteQuest.onsuccess = function () {
if (callback && (typeof callback === 'function')) {
callback();
}
}
},
// 关闭数据库
closeDB: function (dbname) {
dbname.close();
console.log('数据库已关闭');
},
// 更新旧值,针对输入数量
putData: function (db, storename, dataArr, callback) {
let mybarcode = "";
let QTY = "";
let key = "";
let counter = "";
let barcode = "";
let addtime = "";
dataArr.forEach(item => {
mybarcode = item.barcode;
QTY = item.qty;
barcode = item.barcode;
counter = item.counter;
key = item.counterCode;
addtime = item.addtime; });
this.getdatabycursor(db, storename).then(arr => {
if (arr.length == ) {
//console.log("添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.put(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
else {
this.read(db, storename, counter, barcode).then(x => {
if (x) {
//console.log("最新的值是" + QTY)
this.updateDataByKey(db, storename, key, QTY, addtime).then(x => {
if (callback && (typeof callback === 'function')) {
callback();
} }); }
else {
//console.log("再次添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.put(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
})
}
})
},
// 更新旧值
putDatas: function (db, storename, dataArr, callback) {
let mybarcode = "";
let QTY = "";
let key = "";
let counter = "";
let barcode = "";
let addtime = "";
dataArr.forEach(item => {
mybarcode = item.barcode;
QTY = item.qty;
key = item.counterCode;
counter = item.counter;
barcode = item.barcode;
addtime = item.addtime; });
this.getdatabycursor(db, storename).then(arr => {
if (arr.length == ) {
//console.log("添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.add(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
}
}
else {
this.read(db, storename, counter, barcode).then(x => {
if (x) {
this.updateDataByKeys(db, storename, key, addtime).then(x => {
this.getdata(db, storename).then(result => {
if (callback && (typeof callback === 'function')) {
callback();
}
});
}); }
else {
//console.log("再次添加")
//console.log("当前的值是"+barcode)
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = , len = dataArr.length; i < len; i++) {
request = store.add(dataArr[i]);
request.onerror = function () {
console.error('PUT添加数据报错');
};
request.onsuccess = function (result) {
if (callback && (typeof callback === 'function')) {
callback();
}
};
} }
})
}
})
},
//根据key修改数量
updateDataByKey: function (db, storeName, value, QTY, addtime) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty = QTY;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
}
else {
reject(false);
} }; }) }, updateDataBycode: function (db, storeName, value, QTY) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty = QTY; resolve(store.put(stocktable));
}
else {
reject(false);
} }; }) },
//根据key修改数量
updateDataByKeys: function (db, storeName, value, addtime, callback) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value); return new Promise((resolve, reject) => {
//console.log(addtime)
request.onsuccess = function (e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty += ;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
}
else {
reject(false);
} };
}) },
// 删除数据
deleteData: function (db, storename, key, callback) {
var store = db.transaction(storename, 'readwrite').objectStore(storename);
store.delete(key);
if (callback && (typeof callback === 'function')) {
callback();
} },
// 清空数据
clearData: function (db, storename, callback) {
var store = db.transaction(storename, 'readwrite').objectStore(storename);
store.clear();
if (callback && (typeof callback === 'function')) {
callback();
}
},
// 通过key获取数据
read: function (db, storeName, counter, barcode) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var currentdata = [counter, barcode];
var indexs = objectStore.index('counter_code');
var request = indexs.openCursor(IDBKeyRange.only(currentdata));
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
resolve(true);
}
else {
resolve(false);
}
}
}) },
// 通过barcode获取数据
reads: function (db, storeName, values) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var indexs = objectStore.index('barcode_index');
var data = [];
var request = indexs.openCursor(IDBKeyRange.only(values));
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
data.push(cursor.value);
// resolve(data);
cursor.continue();
}
else {
resolve(data)
}
};
}) },
//根据counter索引查询数据
getdatabyCounter: function (db, storeName, values) {
var transaction = db.transaction(storeName);
var store = transaction.objectStore(storeName);
var indexs = store.index('counter_index');
var datas = [];
var request = indexs.openCursor(IDBKeyRange.only(values))
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
datas.push(cursor.value);
cursor.continue();
}
else {
resolve(datas)
}
}
}) },
//根据主键和索引查询
getAll: function (db, storeName, counter, barcode) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var counterCode = [counter, barcode];
var indexs = objectStore.index('counter_code');
var request = indexs.openCursor(IDBKeyRange.only(counterCode));
var data = [];
return new Promise((resolve, reject) => {
request.onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
data.push(cursor.value);
//resolve(data);
cursor.continue();
}
else {
resolve(data)
} }
})
},
//根据key查询数量是否存在
getqtyBykey: function (db, storeName, key) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.get(key);
request.onerror = function (event) {
console.log('事务失败');
};
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
if (request.result) {
//console.log(request.result.qty)
resolve(request.result);
} else {
resolve(false);
}
};
}) },
// //通过游标遍历数据
getdatabycursor: function (db, storename) {
var objectStore = db.transaction(storename).objectStore(storename);
var dataList = [];
var i = ;
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
dataList.push(cursor.value)
cursor.continue();
} else {
resolve(dataList);
} };
}) },
//查询所有的柜台
getAllCounter: function (db, storename) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var indexs = store.index('counter_index');
var data = [];
return new Promise((resolve, reject) => {
indexs.openCursor().onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
// console.log(cursor.value.counter);
data.push(cursor.value.counter);
resolve(data);
cursor.continue();
}
}
})
},
getdata: function (db, storename) {
var objectStore = db.transaction(storename).objectStore(storename);
var data = [];
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
data.push(cursor.value) resolve(data)
}
else {
reject(false)
} };
})
},
getqtybyqtyindex: function (db, storename) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var indexs = store.index('qty_index');
var sum = ;
return new Promise((resolve, reject) => {
indexs.openCursor().onsuccess = function (e) {
var cursor = e.target.result;
if (cursor) {
sum += cursor.value.qty
cursor.continue();
}
else {
resolve(sum)
}
}
})
} }
 handSumit() {
if (this.barcode == "") {
this.$createDialog({
type: "alert",
content: "條碼為空",
confirmBtn: "確定",
icon: "cubeic-alert"
}).show();
} else {
let that = this;
let Counter = localStorage.getItem("counter");
let barcodes = this.barcode;
let shopDB = null;
let QTY = parseInt(this.qty);
let CounterCode = Counter + "-" + barcodes;
var now = new Date();
this.addtime = now;
IndexedDB.openDB(
"shopDB",
,
shopDB,
{
name: "stockTable",
key: "counterCode"
},
function(db) {
let newQty = "";
IndexedDB.getqtyBykey(db, "stockTable", CounterCode).then(x => {
if (x == false) {
let shopDB = db;
IndexedDB.putDatas(
shopDB,
"stockTable",
[
{
counterCode: CounterCode,
counter: Counter,
barcode: barcodes,
qty: QTY,
addtime: that.addtime
}
],
function() {
that.flag = true;
that.getdata();
that.serchbyArecode();
}
);
} else {
let newCounter = x.counter;
if (newCounter == Counter) {
let oldqty = parseInt(x.qty);
let newQty = QTY + oldqty; IndexedDB.putDatas(
db,
"stockTable",
[
{
counterCode: CounterCode,
counter: Counter,
barcode: barcodes,
qty: newQty,
addtime: that.addtime
}
],
function() {
that.flag = true;
that.getdata();
that.serchbyArecode();
}
);
}
}
});
}
);
this.barcode = "";
}
},

vue中indexDB的应用的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. Fiddler 安装与配置

    可以直接访问官网下载安装包 https://www.telerik.com/download/fiddler ,安装后需要配置浏览器的代理服务器为 Fiddler: 以谷歌浏览器为例:[设置]---[ ...

  2. php MP3文件下载功能的实现

    方式一:生成文件,返回一个链接,window.href = 链接: 方式二:hearder输出文件流. 先设置流的Content-Type和web服务器的mime类型. mime类型参考 一个head ...

  3. vss2005源码管理工具使用问题

    vss2005有账号,但是连接不上,可能是TCP/IP NetBIOS Helper服务停止了,启用即可

  4. DOM内容操作

    <table border="2"> <thead id="1" class="c1 c2"> <tr> ...

  5. [Asp.net]缓存简介

    写在前面 针对一些经常访问而很少改变的数据,使用缓存,可以提高性能.缓存是一种用空间换取时间的技术,说的直白点就是,第一次访问从数据库中读取数据,然后将这些数据存在一个地方,比如内存,硬盘中,再次访问 ...

  6. Linux下部署多个Tomcat(完整)

    Linux下部署多个Tomcat 1.环境:1.1.Centos 5.01.2.apache-tomcat-6.0.18 2.需要解决一下几个问题2.1.不同的tomcat启动和关闭监听不同的端口2. ...

  7. 坑!vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  8. WebLogic初学笔记

    这两天在公司自己摸索着用WebLogic(因为可以问的同事不多),之前一直用的是tomcat.面对一个从不了解的技术,自己摸索似乎非常背劲.后来有同事指点果然事半功倍. 项目使用WebLogic版本: ...

  9. 腾讯云服务器部署FTP

    腾讯云服务器,在申请成功后就可以使用远程桌面了. FTP服务器端软件 下载地址:https://filezilla-project.org/download.php?type=server FTP客户 ...

  10. oracle的存储过程

    plsql中执行无参数存储过程格式: begin tttttttttttttt;end; 在执行记录表中 select *from v$sqlarea t where t.sql_text like ...