// 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. websql的使用/phonegap操作数据库 sqlite

    对websql的常用操作进行了一个封装,项目是基于phonegap的,不过phonegap默认已经集成了数据库操作的插件,所以无需再配置什么,直接用就可以了: /** *数据库操作辅助类,定义对象.数 ...

  2. SQL创建索引

    http://www.w3school.com.cn/sql/sql_create.asp 注释:更新一个包含索引的表需要比更新一个没有索引的表更多的时间,这是由于索引本身也需要更新.因此,理想的做法 ...

  3. PHP跳出循环的方法及continue、break、exit的区别

    PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: <?php $i = 1; wh ...

  4. [JavaScript] 配置JavaScript BUILD

    <project name="eForm" default="concatenate"> <tstamp> <format pro ...

  5. AI,大数据,复杂系统 最精 40本大书单

    AI,大数据,复杂系统 最精 40本大书单 原创 2017-10-30 Peter 混沌巡洋舰 如果这篇文的题目变成最全书单,那么这篇文会变得又臭又长,这个年代,关于人工智能和大数据的书,没有一万本也 ...

  6. Spring mvc 接口枚举类型数据格式化处理

    一.背景简述 首先,我们都知道枚举实例有两个默认属性,name 和 ordinal,可通过 name()和ordinal()方法分别获得.其中 name 为枚举字面量(如 MALE,FEMALE),o ...

  7. Jenkins插件管理

    1.配置jenkins需要的maven.jdk路径 [root@db01 secrets]# echo $JAVA_HOME /application/jdk [root@db01 secrets]# ...

  8. python金融与量化分析----Jupyter Notebook使用

    Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特性,以 ...

  9. ASP.NET MVC + EF 更新的几种方式

    1.常用 db.Entry(实体).State = EntityState.Modified;db.SaveChanges(); 2.指定更新 db.Configuration.ValidateOnS ...

  10. linux 下安装 redis

    https://redis.io/ 1.下载 $ cd /usr/local/ $ wget http://download.redis.io/releases/redis-4.0.7.tar.gz ...