feat: new

2024-01-08 00:48:54 +08:00
parent 18c5429b58
commit bea54865ea
30 changed files with 1149 additions and 373 deletions
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/src/views/Config/Global/FaceConfig.vue
@@ -1,34 +1,37 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
-
-import {storeToRefs } from 'pinia'
+import { filterData } from '@/utils'
+import { storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
 import daisyuiThemes from 'daisyui/src/theming/themes'
 import { ColorPicker } from 'vue3-colorpicker';
 import 'vue3-colorpicker/style.css';
-import {isRgbOrRgba,isHex} from '@/utils/color'
+import { isRgbOrRgba, isHex } from '@/utils/color'

-const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = storeToRefs(globalConfig)
-const { getTableRowCount: tableRowCount, getShowField } = storeToRefs(personConfig)
+const personConfig = useStore().personConfig
+const { getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig)
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()

 interface ThemeDaType {
    [key: string]: any
 }
+const isRowCountChange = ref(0) //0未改变，1改变,2加载中
 const themeValue = ref(localTheme.value.name)
 const cardColorValue = ref(structuredClone(cardColor.value))
+const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
 const textColorValue = ref(structuredClone(textColor.value))
 const cardSizeValue = ref(structuredClone(cardSize.value))
 const textSizeValue = ref(structuredClone(textSize.value))
+const rowCountValue = ref(structuredClone(rowCount.value))
+const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
-    rowCount: tableRowCount,
-    showField: getShowField
+    rowCount: rowCountValue,
 })
 const formErr = ref({
    rowCount: '',
@@ -53,7 +56,26 @@ const parseSchema = (props: ValidatePayload) => {
    return schema.parseAsync(props)
 }

+const resetPersonLayout = () => {
+    isRowCountChange.value = 2
+    setTimeout(() => {
+        const alreadyLen = alreadyPersonList.value.length
+        const notLen = notPersonList.value.length
+        if (alreadyLen <= 0 && notLen <= 0) {
+            return
+        }
+        const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
+        const newList = filterData(allPersonList, rowCountValue.value)

+        const newAlreadyPersonList = newList.slice(0, alreadyLen)
+        const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen)
+        personConfig.deleteAllPerson()
+        personConfig.addNotPersonList(newNotPersonList)
+        personConfig.addAlreadyPersonList(newAlreadyPersonList)
+        
+    isRowCountChange.value = 0
+    }, 1000)
+}
 // const handleChangeShowFields = (fieldItem: any) => {
 //     formData.value.showField.map((item) => {
 //         if (item.label === fieldItem.label) {
@@ -66,22 +88,21 @@ watch(() => formData.value.rowCount, () => {
    payload.rowCount = formData.value.rowCount
    parseSchema(payload).then(res => {
        if (res.rowCount) {
-            personConfig.setTableRowCount(res.rowCount)
+            isRowCountChange.value = 1
+            globalConfig.setRowCount(res.rowCount)
        }
    })
        .catch(err => {
            formErr.value.rowCount = err.issues[0].message
        })
 })
-watch(() => formData.value.showField, () => {
-    personConfig.setShowFields(formData.value.showField)
-}, { deep: true })
+

 watch(themeValue, (val: any) => {
    const selectedThemeDetail = daisyuiThemeList.value[val]
    globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
    themeChange(val)
-    if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
+    if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
        globalConfig.setCardColor(selectedThemeDetail.primary)
    }
 }, { deep: true })
@@ -89,6 +110,9 @@ watch(themeValue, (val: any) => {
 watch(cardColorValue, (val: string) => {
    globalConfig.setCardColor(val)
 }, { deep: true })
+watch(luckyCardColorValue, (val: string) => {
+    globalConfig.setLuckyCardColor(val)
+}, { deep: true })

 watch(textColorValue, (val: string) => {
    globalConfig.setTextColor(val)
@@ -96,23 +120,36 @@ watch(textColorValue, (val: string) => {

 watch(cardSizeValue, (val: { width: number; height: number; }) => {
    globalConfig.setCardSize(val)
-}, { deep: true })
+}, { deep: true }),
+watch(isShowPrizeListValue,()=>{
+    globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+})
 onMounted(() => {
 })
 </script>

 <template>
    <div>
-        <label class="w-full max-w-xs mb-10 form-control">
-            <div class="label">
-                <span class="label-text">列数</span>
+        <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+            <div class="">
+                <div class="label">
+                    <span class="label-text">列数</span>
+                </div>
+                <input type="number" v-model="formData.rowCount" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
            </div>
-            <input type="number" v-model="formData.rowCount" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
+            <div>
+                <div class="tooltip" data-tip="该项比较耗费时间和性能">
+                    <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
+                        <span>重设布局</span>
+                        <span class="loading loading-ring loading-md" v-show="isRowCountChange == 2"></span>
+                    </button>
+                </div>
            </div>
        </label>
        <label class="w-full max-w-xs form-control">
@@ -130,7 +167,13 @@ onMounted(() => {
            </div>
            <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue"></ColorPicker>
        </label>
-        
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">中奖卡片颜色</span>
+            </div>
+            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue"></ColorPicker>
+        </label>
+
        <label class="w-full max-w-xs form-control">
            <div class="label">
                <span class="label-text">文字颜色</span>
@@ -139,29 +182,29 @@ onMounted(() => {
        </label>
        <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
            <div>
-            <div class="label">
-                <span class="label-text">卡片宽度</span>
+                <div class="label">
+                    <span class="label-text">卡片宽度</span>
+                </div>
+                <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
            </div>
-            <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
+            <div>
+                <div class="label">
+                    <span class="label-text">卡片高度</span>
+                </div>
+                <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
            </div>
-        </div>
-        <div>
-            <div class="label">
-                <span class="label-text">卡片高度</span>
-            </div>
-            <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
-            </div>
-        </div>
        </label>
        <label class="w-full max-w-xs mb-10 form-control">
            <div class="label">
@@ -170,6 +213,14 @@ onMounted(() => {
            <input type="number" v-model="textSizeValue" placeholder="Type here"
                class="w-full max-w-xs input input-bordered" />
        </label>
+        <label class="w-full max-w-xs mb-10 form-control">
+            <div class="label">
+                <span class="label-text">是否常显奖品列表</span>
+            </div>
+            <input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue=!isShowPrizeListValue"
+                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+        </label>
+
    </div>
 </template>

--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -5,11 +5,13 @@ import useStore from '@/store'
 import {storeToRefs } from 'pinia'
 import * as XLSX from 'xlsx'
 import { readFile } from '@/utils/file'
+import {filterData} from '@/utils'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'

 const personConfig = useStore().personConfig
-
-const { getAllPersonList:allPersonList,getTableRowCount:rowCount} = storeToRefs(personConfig)
+const globalConfig = useStore().globalConfig
+const { getAllPersonList:allPersonList} = storeToRefs(personConfig)
+const {getRowCount:rowCount}=storeToRefs(globalConfig)
 const limitType = '.xlsx,.xls'
 const excelData = ref<any[]>([])
 // const personList = ref<any[]>([])
@@ -26,22 +28,6 @@ const handleFileChange = async (e: any) => {
    personConfig.addNotPersonList(uploadData)
 }

-const filterData = (tableData: any[],localRowCount: number) => {
-    const dataLength = tableData.length
-    let j = 0;
-    for (let i = 0; i < dataLength; i++) {
-        if (i % localRowCount === 0) {
-            j++;
-        }
-        tableData[i].x = i % localRowCount + 1;
-        tableData[i].y = j;
-        tableData[i].id = i;
-        // 是否中奖
-        tableData[i].isWin = false
-    }
-    
-return tableData
-}
 const deleteAll = () => {
    personConfig.deleteAllPerson()
 }
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -28,6 +28,7 @@ const addPrize = () => {
            url:''
        },
        desc: '',
+        isUsed: false,
        isShow: true,
        frequency: 1,
    }