- 添加 `vue-draggable-plus` 和 `lodash-es` 依赖以支持列表拖拽排序 - 使用 `cloneDeep` 深拷贝奖品列表,避免直接修改原始数据 - 移除原有的手动排序逻辑(上下移动按钮),改用可视化拖拽方式 - 调整 UI 布局和样式,增强用户体验与可操作性 - 在 Demo 页面中添加 draggable 示例用于验证功能实现
101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import type { IPrizeConfig } from '@/types/storeType'
|
|
import localforage from 'localforage'
|
|
import { cloneDeep } from 'lodash-es'
|
|
import { Grip } from 'lucide-vue-next'
|
|
import { storeToRefs } from 'pinia'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
import { useI18n } from 'vue-i18n'
|
|
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
|
|
import PageHeader from '@/components/PageHeader/index.vue'
|
|
import i18n from '@/locales/i18n'
|
|
import useStore from '@/store'
|
|
|
|
export function usePrizeConfig() {
|
|
const { t } = useI18n()
|
|
const imageDbStore = localforage.createInstance({
|
|
name: 'imgStore',
|
|
})
|
|
const prizeConfig = useStore().prizeConfig
|
|
const globalConfig = useStore().globalConfig
|
|
const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
|
|
|
|
const { getImageList: localImageList } = storeToRefs(globalConfig)
|
|
const imgList = ref<any[]>([])
|
|
|
|
const prizeList = ref(cloneDeep(localPrizeList.value))
|
|
const selectedPrize = ref<IPrizeConfig | null>()
|
|
|
|
function selectPrize(item: IPrizeConfig) {
|
|
selectedPrize.value = item
|
|
selectedPrize.value.isUsedCount = 0
|
|
selectedPrize.value.isUsed = false
|
|
|
|
if (selectedPrize.value.separateCount.countList.length > 1) {
|
|
return
|
|
}
|
|
selectedPrize.value.separateCount = {
|
|
enable: true,
|
|
countList: [
|
|
{
|
|
id: '0',
|
|
count: item.count,
|
|
isUsedCount: 0,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
function changePrizeStatus(item: IPrizeConfig) {
|
|
item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
|
|
item.separateCount.countList = []
|
|
item.isUsed = !item.isUsed
|
|
}
|
|
|
|
function changePrizePerson(item: IPrizeConfig) {
|
|
let indexPrize = -1
|
|
for (let i = 0; i < prizeList.value.length; i++) {
|
|
if (prizeList.value[i].id === item.id) {
|
|
indexPrize = i
|
|
break
|
|
}
|
|
}
|
|
if (indexPrize > -1) {
|
|
prizeList.value[indexPrize].separateCount.countList = []
|
|
prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
|
|
}
|
|
}
|
|
function submitData(value: any) {
|
|
selectedPrize.value!.separateCount.countList = value
|
|
selectedPrize.value = null
|
|
}
|
|
|
|
async function getImageDbStore() {
|
|
const keys = await imageDbStore.keys()
|
|
if (keys.length > 0) {
|
|
imageDbStore.iterate((value, key) => {
|
|
imgList.value.push({
|
|
key,
|
|
value,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
function delItem(item: IPrizeConfig) {
|
|
prizeConfig.deletePrizeConfig(item.id)
|
|
}
|
|
onMounted(() => {
|
|
getImageDbStore()
|
|
})
|
|
watch(() => prizeList.value, (val: IPrizeConfig[]) => {
|
|
console.log('prizeList', val)
|
|
prizeConfig.setPrizeConfig(val)
|
|
}, { deep: true })
|
|
|
|
return {
|
|
currentPrize,
|
|
|
|
}
|
|
}
|