refactor: ♻️ 重构奖项配置模块 #96

src/views/Config/Prize/PrizeConfig.vue

@@ -1,143 +1,13 @@
 <script setup lang='ts'>
-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'
+import { usePrizeConfig } from './usePrizeConfig'
 
+const { addPrize, resetDefault, delAll, delItem, prizeList, currentPrize, selectedPrize, submitData, changePrizePerson, changePrizeStatus, selectPrize, localImageList } = 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 prizeList = ref(cloneDeep(localPrizeList.value))
-const imgList = ref<any[]>([])
-
-const selectedPrize = ref<IPrizeConfig | null>()
-
-function addPrize() {
-  const defaultPrizeCOnfig: IPrizeConfig = {
-    id: new Date().getTime().toString(),
-    name: i18n.global.t('data.prizeName'),
-    sort: 0,
-    isAll: false,
-    count: 1,
-    isUsedCount: 0,
-    picture: {
-      id: '',
-      name: '',
-      url: '',
-    },
-    separateCount: {
-      enable: false,
-      countList: [],
-    },
-    desc: '',
-    isUsed: false,
-    isShow: true,
-    frequency: 1,
-  }
-  prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
-}
-
-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) {
-  // if (item.isUsed == true) {
-  //     item.isUsedCount = 0;
-  //     if (item.separateCount && item.separateCount.countList.length) {
-  //         item.separateCount.countList.forEach((countItem: any) => {
-  //             countItem.isUsedCount = 0;
-  //         })
-  //     }
-  // }
-  // else {
-  //     item.isUsedCount = item.count;
-  //     if (item.separateCount && item.separateCount.countList.length) {
-  //         item.separateCount.countList.forEach((countItem: any) => {
-  //             countItem.isUsedCount = countItem.count;
-  //         })
-  //     }
-  // }
-  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
-}
-function resetDefault() {
-  prizeConfig.resetDefault()
-}
-
-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)
-}
-async function delAll() {
-  await prizeConfig.deleteAllPrizeConfig()
-}
-onMounted(() => {
-  getImageDbStore()
-})
-watch(() => prizeList.value, (val: IPrizeConfig[]) => {
-  prizeConfig.setPrizeConfig(val)
-}, { deep: true })
 </script>
 
 <template>
@@ -176,7 +46,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
     >
       <div
         v-for="item in prizeList" :key="item.id" class="flex items-center justify-center gap-10 py-5"
-        :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
+        :class="currentPrize.id === item.id ? 'border border-dotted rounded-xl' : null"
       >
         <label class="flex items-center justify-center max-w-xs px-2 handle form-control">
           <Grip class="w-10 h-10 cursor-move handle" />
@@ -195,7 +65,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <span class="label-text">{{ t('table.fullParticipation') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isAll" class="border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isAll" class="border-solid checkbox checkbox-secondary border"
             @change="item.isAll = !item.isAll"
           >
         </label>
@@ -216,7 +86,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             <span class="label-text">{{ t('table.isDone') }}</span>
           </div>
           <input
-            type="checkbox" :checked="item.isUsed" class="border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isUsed" class="border-solid checkbox checkbox-secondary border"
             @change="changePrizeStatus(item)"
           >
         </label>

src/views/Config/Prize/usePrizeConfig.ts

@@ -1,18 +1,13 @@
 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 { toast } from 'vue-sonner'
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
 
 export function usePrizeConfig() {
-    const { t } = useI18n()
     const imageDbStore = localforage.createInstance({
         name: 'imgStore',
     })
@@ -84,6 +79,41 @@ export function usePrizeConfig() {
 
     function delItem(item: IPrizeConfig) {
         prizeConfig.deletePrizeConfig(item.id)
+        toast.success('删除成功')
+    }
+    function addPrize() {
+        const defaultPrizeCOnfig: IPrizeConfig = {
+            id: new Date().getTime().toString(),
+            name: i18n.global.t('data.prizeName'),
+            sort: 0,
+            isAll: false,
+            count: 1,
+            isUsedCount: 0,
+            picture: {
+                id: '',
+                name: '',
+                url: '',
+            },
+            separateCount: {
+                enable: false,
+                countList: [],
+            },
+            desc: '',
+            isUsed: false,
+            isShow: true,
+            frequency: 1,
+        }
+        prizeList.value.push(defaultPrizeCOnfig)
+        toast.success('添加成功')
+    }
+    function resetDefault() {
+        prizeConfig.resetDefault()
+        prizeList.value = cloneDeep(localPrizeList.value)
+        toast.success('重置成功')
+    }
+    async function delAll() {
+        prizeList.value = []
+        toast.success('删除成功')
     }
     onMounted(() => {
         getImageDbStore()
@@ -93,7 +123,17 @@ export function usePrizeConfig() {
     }, { deep: true })
 
     return {
+        addPrize,
+        resetDefault,
+        delAll,
+        delItem,
+        prizeList,
         currentPrize,
-
+        selectedPrize,
+        submitData,
+        changePrizePerson,
+        changePrizeStatus,
+        selectPrize,
+        localImageList,
     }
 }