feat: indexdb存储人员名单，使用dexie
This commit is contained in:
LOG1997
@@ -21,6 +21,7 @@
|
||||
"axios": "^1.7.8",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"dexie": "^4.2.1",
|
||||
"github-markdown-css": "^5.8.0",
|
||||
"localforage": "^1.10.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@@ -23,6 +23,9 @@ importers:
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
dexie:
|
||||
specifier: ^4.2.1
|
||||
version: 4.2.1
|
||||
github-markdown-css:
|
||||
specifier: ^5.8.0
|
||||
version: 5.8.0
|
||||
@@ -2701,6 +2704,9 @@ packages:
|
||||
devlop@1.1.0:
|
||||
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
|
||||
|
||||
dexie@4.2.1:
|
||||
resolution: {integrity: sha512-Ckej0NS6jxQ4Po3OrSQBFddayRhTCic2DoCAG5zacOfOVB9P2Q5Xc5uL/nVa7ZVs+HdMnvUPzLFCB/JwpB6Csg==}
|
||||
|
||||
dom-accessibility-api@0.5.16:
|
||||
resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
|
||||
|
||||
@@ -8238,6 +8244,8 @@ snapshots:
|
||||
dependencies:
|
||||
dequal: 2.0.3
|
||||
|
||||
dexie@4.2.1: {}
|
||||
|
||||
dom-accessibility-api@0.5.16: {}
|
||||
|
||||
dom-serializer@0.2.2:
|
||||
|
||||
@@ -1,159 +1,185 @@
|
||||
import type { IPersonConfig, IPrizeConfig } from '@/types/storeType'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, ref, toRaw, watch } from 'vue'
|
||||
import { IndexDb } from '@/utils/dexie'
|
||||
import { defaultPersonList } from './data'
|
||||
import { usePrizeConfig } from './prizeConfig'
|
||||
|
||||
export const usePersonConfig = defineStore('person', {
|
||||
state() {
|
||||
return {
|
||||
personConfig: {
|
||||
// 获取IPersonConfig的key组成数组
|
||||
export const personListKey = Object.keys(defaultPersonList[0])
|
||||
export const usePersonConfig = defineStore('person', () => {
|
||||
const personDb = new IndexDb('person', ['allPersonList', 'alreadyPersonList'], 1, personListKey)
|
||||
// NOTE: state
|
||||
const personConfig = ref({
|
||||
allPersonList: [] as IPersonConfig[],
|
||||
alreadyPersonList: [] as IPersonConfig[],
|
||||
},
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
})
|
||||
personDb.getAllData('allPersonList').then((data) => {
|
||||
personConfig.value.allPersonList = data
|
||||
})
|
||||
personDb.getAllData('alreadyPersonList').then((data) => {
|
||||
console.log(data)
|
||||
personConfig.value.alreadyPersonList = data
|
||||
})
|
||||
|
||||
// NOTE: getter
|
||||
// 获取全部配置
|
||||
getPersonConfig(state) {
|
||||
return state.personConfig
|
||||
},
|
||||
const getPersonConfig = computed(() => personConfig.value)
|
||||
// 获取全部人员名单
|
||||
getAllPersonList(state) {
|
||||
return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
|
||||
return item
|
||||
})
|
||||
},
|
||||
const getAllPersonList = computed(() => personConfig.value.allPersonList)
|
||||
// 获取未获此奖的人员名单
|
||||
getNotThisPrizePersonList(state: any) {
|
||||
const currentPrize = usePrizeConfig().prizeConfig.currentPrize
|
||||
const data = state.personConfig.allPersonList.filter((item: IPersonConfig) => {
|
||||
return !item.prizeId.includes(currentPrize.id as string)
|
||||
})
|
||||
|
||||
return data
|
||||
},
|
||||
// 获取已中奖人员名单
|
||||
getAlreadyPersonList(state) {
|
||||
return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
|
||||
return item.isWin === true
|
||||
})
|
||||
},
|
||||
// 获取中奖人员详情
|
||||
getAlreadyPersonDetail(state) {
|
||||
return state.personConfig.alreadyPersonList
|
||||
},
|
||||
// 获取未中奖人员名单
|
||||
getNotPersonList(state) {
|
||||
return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
|
||||
return item.isWin === false
|
||||
})
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 添加未中奖人员
|
||||
addNotPersonList(personList: IPersonConfig[]) {
|
||||
if (personList.length <= 0) {
|
||||
return
|
||||
}
|
||||
personList.forEach((item: IPersonConfig) => {
|
||||
this.personConfig.allPersonList.push(item)
|
||||
})
|
||||
},
|
||||
// 添加已中奖人员
|
||||
addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
|
||||
if (personList.length <= 0) {
|
||||
return
|
||||
}
|
||||
personList.forEach((person: IPersonConfig) => {
|
||||
this.personConfig.allPersonList.map((item: IPersonConfig) => {
|
||||
if (item.id === person.id && prize != null) {
|
||||
item.isWin = true
|
||||
// person.isWin = true
|
||||
item.prizeName.push(prize.name)
|
||||
// person.prizeName += prize.name
|
||||
item.prizeTime.push(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
|
||||
// person.prizeTime = new Date().toString()
|
||||
item.prizeId.push(prize.id as string)
|
||||
}
|
||||
|
||||
return item
|
||||
const getNotThisPrizePersonList = computed(() => {
|
||||
const currentPrize = usePrizeConfig().prizeConfig.currentPrize
|
||||
const data = personConfig.value.allPersonList.filter((item: IPersonConfig) => {
|
||||
return !item.prizeId.includes(currentPrize.id as string)
|
||||
})
|
||||
this.personConfig.alreadyPersonList.push(person)
|
||||
})
|
||||
},
|
||||
// 从已中奖移动到未中奖
|
||||
moveAlreadyToNot(person: IPersonConfig) {
|
||||
if (person.id === undefined || person.id == null) {
|
||||
return
|
||||
}
|
||||
const alreadyPersonListLength = this.personConfig.alreadyPersonList.length
|
||||
for (let i = 0; i < this.personConfig.allPersonList.length; i++) {
|
||||
if (person.id === this.personConfig.allPersonList[i].id) {
|
||||
this.personConfig.allPersonList[i].isWin = false
|
||||
this.personConfig.allPersonList[i].prizeName = []
|
||||
this.personConfig.allPersonList[i].prizeTime = []
|
||||
this.personConfig.allPersonList[i].prizeId = []
|
||||
|
||||
break
|
||||
return data
|
||||
})
|
||||
|
||||
// 获取已中奖人员名单
|
||||
const getAlreadyPersonList = computed(() => {
|
||||
return personConfig.value.allPersonList.filter((item: IPersonConfig) => {
|
||||
return item.isWin === true
|
||||
})
|
||||
})
|
||||
// 获取中奖人员详情
|
||||
const getAlreadyPersonDetail = computed(() => personConfig.value.alreadyPersonList)
|
||||
// 获取未中奖人员名单
|
||||
const getNotPersonList = computed(() => personConfig.value.allPersonList.filter((item: IPersonConfig) => {
|
||||
return item.isWin === false
|
||||
}))
|
||||
// NOTE: action
|
||||
// 添加未中奖人员
|
||||
function addNotPersonList(personList: IPersonConfig[]) {
|
||||
if (personList.length <= 0) {
|
||||
return
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < alreadyPersonListLength; i++) {
|
||||
this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) =>
|
||||
item.id !== person.id,
|
||||
)
|
||||
}
|
||||
},
|
||||
personList.forEach((item: IPersonConfig) => {
|
||||
personConfig.value.allPersonList.push(item)
|
||||
})
|
||||
personDb.setAllData('allPersonList', personList)
|
||||
}
|
||||
// 添加已中奖人员
|
||||
function addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
|
||||
if (personList.length <= 0) {
|
||||
return
|
||||
}
|
||||
personList.forEach((person: IPersonConfig) => {
|
||||
personConfig.value.allPersonList.map((item: IPersonConfig) => {
|
||||
if (item.id === person.id && prize != null) {
|
||||
item.isWin = true
|
||||
// person.isWin = true
|
||||
item.prizeName.push(prize.name)
|
||||
// person.prizeName += prize.name
|
||||
item.prizeTime.push(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
|
||||
// person.prizeTime = new Date().toString()
|
||||
item.prizeId.push(prize.id as string)
|
||||
}
|
||||
return item
|
||||
})
|
||||
personConfig.value.alreadyPersonList.push(person)
|
||||
personDb.updateData('allPersonList', toRaw(person))
|
||||
personDb.setData('alreadyPersonList', toRaw(person))
|
||||
})
|
||||
}
|
||||
// 从已中奖移动到未中奖
|
||||
function moveAlreadyToNot(person: IPersonConfig) {
|
||||
if (person.id === undefined || person.id == null) {
|
||||
return
|
||||
}
|
||||
const alreadyPersonListLength = personConfig.value.alreadyPersonList.length
|
||||
for (let i = 0; i < personConfig.value.allPersonList.length; i++) {
|
||||
if (person.id === personConfig.value.allPersonList[i].id) {
|
||||
personConfig.value.allPersonList[i].isWin = false
|
||||
personConfig.value.allPersonList[i].prizeName = []
|
||||
personConfig.value.allPersonList[i].prizeTime = []
|
||||
personConfig.value.allPersonList[i].prizeId = []
|
||||
personDb.updateData('allPersonList', toRaw(personConfig.value.allPersonList[i]))
|
||||
break
|
||||
}
|
||||
}
|
||||
const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
|
||||
for (let i = 0; i < alreadyPersonListLength; i++) {
|
||||
personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) =>
|
||||
item.id !== person.id,
|
||||
)
|
||||
}
|
||||
personDb.deleteData('alreadyPersonList', person)
|
||||
}
|
||||
// 删除指定人员
|
||||
deletePerson(person: IPersonConfig) {
|
||||
if (person.id !== undefined || person.id != null) {
|
||||
this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id)
|
||||
this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id)
|
||||
}
|
||||
},
|
||||
function deletePerson(person: IPersonConfig) {
|
||||
if (person.id !== undefined || person.id != null) {
|
||||
const allPersonListRaw = toRaw(personConfig.value.allPersonList)
|
||||
const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
|
||||
personConfig.value.allPersonList = allPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
|
||||
personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
|
||||
personDb.deleteData('allPersonList', person)
|
||||
personDb.deleteData('alreadyPersonList', person)
|
||||
}
|
||||
}
|
||||
// 删除所有人员
|
||||
deleteAllPerson() {
|
||||
this.personConfig.allPersonList = []
|
||||
this.personConfig.alreadyPersonList = []
|
||||
},
|
||||
function deleteAllPerson() {
|
||||
personConfig.value.allPersonList = []
|
||||
personConfig.value.alreadyPersonList = []
|
||||
personDb.deleteAll('allPersonList')
|
||||
personDb.deleteAll('alreadyPersonList')
|
||||
}
|
||||
|
||||
// 删除所有人员
|
||||
resetPerson() {
|
||||
this.personConfig.allPersonList = []
|
||||
this.personConfig.alreadyPersonList = []
|
||||
},
|
||||
function resetPerson() {
|
||||
personConfig.value.allPersonList = []
|
||||
personConfig.value.alreadyPersonList = []
|
||||
personDb.deleteAll('allPersonList')
|
||||
personDb.deleteAll('alreadyPersonList')
|
||||
}
|
||||
// 重置已中奖人员
|
||||
resetAlreadyPerson() {
|
||||
// 把已中奖人员合并到未中奖人员，要验证是否已存在
|
||||
this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
|
||||
item.isWin = false
|
||||
item.prizeName = []
|
||||
item.prizeTime = []
|
||||
item.prizeId = []
|
||||
})
|
||||
this.personConfig.alreadyPersonList = []
|
||||
},
|
||||
setDefaultPersonList() {
|
||||
this.personConfig.allPersonList = defaultPersonList
|
||||
this.personConfig.alreadyPersonList = []
|
||||
},
|
||||
function resetAlreadyPerson() {
|
||||
// 把已中奖人员合并到未中奖人员，要验证是否已存在
|
||||
personConfig.value.allPersonList.forEach((item: IPersonConfig) => {
|
||||
item.isWin = false
|
||||
item.prizeName = []
|
||||
item.prizeTime = []
|
||||
item.prizeId = []
|
||||
})
|
||||
personConfig.value.alreadyPersonList = []
|
||||
const allPersonListRaw = toRaw(personConfig.value.allPersonList)
|
||||
personDb.deleteAll('allPersonList')
|
||||
personDb.setAllData('allPersonList', allPersonListRaw)
|
||||
personDb.deleteAll('alreadyPersonList')
|
||||
}
|
||||
function setDefaultPersonList() {
|
||||
personConfig.value.allPersonList = defaultPersonList
|
||||
personConfig.value.alreadyPersonList = []
|
||||
personDb.setAllData('allPersonList', defaultPersonList)
|
||||
personDb.deleteAll('alreadyPersonList')
|
||||
}
|
||||
// 重置所有配置
|
||||
reset() {
|
||||
this.personConfig = {
|
||||
allPersonList: [] as IPersonConfig[],
|
||||
alreadyPersonList: [] as IPersonConfig[],
|
||||
}
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
// 如果要存储在localStorage中
|
||||
storage: localStorage,
|
||||
key: 'personConfig',
|
||||
},
|
||||
],
|
||||
},
|
||||
function reset() {
|
||||
personConfig.value = {
|
||||
allPersonList: [] as IPersonConfig[],
|
||||
alreadyPersonList: [] as IPersonConfig[],
|
||||
}
|
||||
personDb.deleteAll('allPersonList')
|
||||
personDb.deleteAll('alreadyPersonList')
|
||||
}
|
||||
return {
|
||||
personConfig,
|
||||
getPersonConfig,
|
||||
getAllPersonList,
|
||||
getNotThisPrizePersonList,
|
||||
getAlreadyPersonList,
|
||||
getAlreadyPersonDetail,
|
||||
getNotPersonList,
|
||||
addNotPersonList,
|
||||
addAlreadyPersonList,
|
||||
moveAlreadyToNot,
|
||||
deletePerson,
|
||||
deleteAllPerson,
|
||||
resetPerson,
|
||||
resetAlreadyPerson,
|
||||
setDefaultPersonList,
|
||||
reset,
|
||||
}
|
||||
})
|
||||
|
||||
108
src/utils/dexie/index.ts
Normal file
108
src/utils/dexie/index.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import type { EntityTable } from 'dexie'
|
||||
import type { DbData } from './type'
|
||||
import dayjs from 'dayjs'
|
||||
import Dexie from 'dexie'
|
||||
|
||||
class IndexDb {
|
||||
name: string
|
||||
dbStore: any
|
||||
version: number
|
||||
dbKeys: string[]
|
||||
tableNames: string[]
|
||||
constructor(name: string, tableNames: string[], version = 1, dbKeys: string[] = []) {
|
||||
this.name = name // 数据库名称
|
||||
this.version = version // 数据库版本号
|
||||
this.dbKeys = dbKeys // 数据库key
|
||||
this.tableNames = tableNames
|
||||
this.dbStore = new Dexie(name) as Dexie & { [key: string]: EntityTable<DbData, 'id'> }
|
||||
// 获取存在的key
|
||||
const stores: Record<string, string> = {}
|
||||
for (const tableName of tableNames) {
|
||||
stores[tableName] = 'id,dateTime,type,uid' // 根据需要调整字段
|
||||
}
|
||||
this.dbStore.version(this.version).stores(stores)
|
||||
}
|
||||
|
||||
setAllData(tableName: string, data: DbData[]) {
|
||||
this.dbStore[tableName].bulkAdd(data)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param data
|
||||
* @description 添加单条数据，并为数据添加dataTime和type属性
|
||||
*/
|
||||
setData(tableName: string, data: Partial<DbData>) {
|
||||
if (!data.dateTime) {
|
||||
data.dateTime = dayjs().format('YYYY-MM-DD HH:mm:ss:SSS')
|
||||
}
|
||||
if (!data.type) {
|
||||
data.type = 'info'
|
||||
}
|
||||
this.dbStore[tableName].add(data)
|
||||
}
|
||||
|
||||
// 更新单条数据
|
||||
updateData(tableName: string, data: Partial<DbData>) {
|
||||
this.dbStore[tableName].update(data.id, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns 所有数据Array
|
||||
* @description 删除所有数据并返回被删除的数据
|
||||
*/
|
||||
deleteAll(tableName: string) {
|
||||
return this.dbStore[tableName].clear()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param data
|
||||
* @description 删除单条数据
|
||||
*/
|
||||
deleteData(tableName: string, data: Partial<DbData>) {
|
||||
this.dbStore[tableName].delete(data.id)
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns 所有数据Array
|
||||
* @description 获取所有数据
|
||||
*/
|
||||
async getAllData(tableName: string, isAsc: boolean = true) {
|
||||
const allData = await this.dbStore[tableName].toArray()
|
||||
// return allData
|
||||
return isAsc ? allData : allData.reverse()
|
||||
}
|
||||
|
||||
// 分页获取数据
|
||||
async getPageData(tableName: string, pageNum: number, pageSize: number, isAsc: boolean = true) {
|
||||
const allData = await this.dbStore[tableName].toArray()
|
||||
const start = (pageNum - 1) * pageSize
|
||||
const end = pageNum * pageSize
|
||||
return isAsc ? allData.slice(start, end) : allData.slice(end, start).reverse()
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns 数据库总长度
|
||||
* @description 获取所有数据的列表长度
|
||||
*/
|
||||
getAllLength(tableName: string) {
|
||||
return this.dbStore[tableName].count()
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param filter 根据筛选条件返回数据
|
||||
* @returns
|
||||
*/
|
||||
getFilterData(tableName: string, filter: string) {
|
||||
return this.dbStore[tableName].filter((item: any) => {
|
||||
return item.content.includes(filter)
|
||||
}).toArray()
|
||||
}
|
||||
|
||||
getKeys(tableName: string, key: string) {
|
||||
// keys 方法获取所有主键
|
||||
return this.dbStore[tableName].orderBy(key).keys()
|
||||
}
|
||||
}
|
||||
|
||||
export { IndexDb }
|
||||
3
src/utils/dexie/type.ts
Normal file
3
src/utils/dexie/type.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export interface DbData {
|
||||
[key: string]: any
|
||||
}
|
||||
Reference in New Issue
Block a user