feat: new

src/views/Config/Global/FaceConfig.vue

@@ -0,0 +1,90 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import useStore from '@/store'
+import zod from 'zod';
+
+const personConfig = useStore().personConfig
+const { getTableRowCount: tableRowCount, getShowField} = personConfig
+
+const formData = ref({
+    rowCount: tableRowCount,
+    showField: getShowField
+})
+const formErr = ref({
+    rowCount: '',
+})
+
+const schema = zod.object({
+    rowCount: zod.number({
+        required_error: '必填项',
+        invalid_type_error: '必须填入数字',
+    })
+        .min(1, '最小为1')
+        .max(100, '最大为100')
+    // 格式化
+
+
+})
+type ValidatePayload = zod.infer<typeof schema>
+const payload: ValidatePayload = {
+    rowCount: formData.value.rowCount,
+}
+const parseSchema = (props: ValidatePayload) => {
+    return schema.parseAsync(props)
+}
+
+
+const handleChangeShowFields = (fieldItem: any) => {
+    formData.value.showField.map((item)=>{
+        if(item.label===fieldItem.label){
+            item.value=!item.value
+        }
+    })
+}
+
+watch(() => formData.value.rowCount, () => {
+    payload.rowCount = formData.value.rowCount
+    parseSchema(payload).then(res => {
+        console.log('code line-40 \n\r😀 res:\n\r', res);
+        if(res.rowCount){
+            personConfig.setTableRowCount(res.rowCount)
+        }
+    })
+        .catch(err => {
+            formErr.value.rowCount = err.issues[0].message
+        })
+})
+watch(() => formData.value.showField, () => {
+    personConfig.setShowFields(formData.value.showField)
+},{deep:true})
+</script>
+
+<template>
+    <div>
+        <label class="w-full max-w-xs mb-10 form-control">
+            <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>
+        </label>
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">展示字段</span>
+            </div>
+            <ul class="flex gap-6 pl-0">
+                <li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
+                    <input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1"   @change="handleChangeShowFields(item)"/>
+                    <span class="label-text">{{ item.label }}</span>
+                </li>
+            </ul>
+        </label>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Global/ImageConfig.vue

@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue'
+import { readImage } from '@/utils/file'
+import localforage from 'localforage'
+
+const limitType = ref('image/*')
+const imgList = ref<any>([])
+const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const handleFileChange = async (e: any) => {
+    const isImage= /image*/.test(e.target.files[0].type)
+    if (!isImage) {
+        imgUploadToast.value = 3
+
+        return
+    }
+    let { dataUrl, fileName } = await readImage(e.target.files[0])
+    imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+        .then(() => {
+            imgUploadToast.value = 1
+        })
+        .catch(() => {
+            imgUploadToast.value = 2
+        })
+}
+
+const getImageDbStore =async () => {
+    const keys =await imageDbStore.keys()
+    if(keys.length>0){
+        imageDbStore.iterate((value, key) => {
+            imgList.value.push({
+                key,
+                value
+            })
+        })
+    }
+}
+
+onMounted(() => {
+    getImageDbStore()
+})
+watch(() => imgUploadToast.value, (val) => {
+    if (val !== 0) {
+        setTimeout(() => {
+            imgUploadToast.value = 0
+        }, 2000)
+    }
+})
+</script>
+
+<template>
+    <div class="toast toast-top toast-end">
+        <div class="alert alert-error" v-if="imgUploadToast == 2">
+            <span>上传失败</span>
+        </div>
+        <div class="alert alert-success" v-if="imgUploadToast == 1">
+            <span>上传成功</span>
+        </div>
+        <div class="alert alert-error" v-if="imgUploadToast == 3">
+            <span>不是图片</span>
+        </div>
+    </div>
+
+    <div>
+        <div class="">
+            <label for="explore">
+                <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+                    :accept="limitType" />
+                <span class="btn btn-primary btn-sm">上传图片</span>
+            </label>
+        </div>
+        <ul>
+            <li v-for="item in imgList" :key="item">
+                <div class="flex items-center gap-3">
+                    <div class="avatar">
+                        <div class="mask mask-squircle w-12 h-12">
+                            <img :src="item.value" alt="Avatar Tailwind CSS Component" />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="font-bold">{{ item.key.split('+')[1] }}</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll.vue

@@ -0,0 +1,121 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue';
+import useStore from '@/store'
+import * as XLSX from 'xlsx'
+import { readFile } from '@/utils/file'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+
+import {extractFields} from '@/utils/store'
+
+const personConfig = useStore().personConfig
+
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
+const limitType = '.xlsx,.xls'
+const excelData = ref<any[]>([])
+const personList = ref<any[]>(
+    notPersonList.concat(alreadyPersonList)
+)
+const handleFileChange = async (e: any) => {
+    let dataBinary = await readFile(e.target.files[0])
+    let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
+    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
+    excelData.value = XLSX.utils.sheet_to_json(workSheet)
+    personList.value = filterData(excelData.value)
+
+    const keys=extractFields(personList.value)
+    personConfig.resetPerson()
+    personConfig.setShowFields(keys)
+    personConfig.addNotPersonList(personList.value)
+}
+
+const filterData = (tableData: any[]) => {
+    const dataLength = tableData.length
+    let j = 0;
+    for (let i = 0; i < dataLength; i++) {
+        if (i % rowCount === 0) {
+            j++;
+        }
+        tableData[i].x = i % rowCount + 1;
+        tableData[i].y = j;
+        tableData[i].id = i;
+        // 是否中奖
+        tableData[i].isWin = false
+    }
+    
+return personList.value = tableData
+}
+const deleteAll = () => {
+    personConfig.deleteAllPerson()
+    personList.value = notPersonList.concat(alreadyPersonList)
+}
+
+const tableColumns = [
+    {
+        label: '编号',
+        props: 'uid',
+    },
+    {
+        label: '姓名',
+        props: 'name',
+    },
+    {
+        label: '部门',
+        props: 'department',
+    },
+    {
+        label: '职位',
+        props: 'other',
+    },
+    {
+        label:'是否已中奖',
+        props: 'isWin',
+        formatValue(row: any) {
+            return row.isWin? '是' : '否'
+        }
+    },
+    {
+        label: '操作',
+        actions: [
+            {
+                label: '编辑',
+                type: 'btn-info',
+                onClick: (row: any) => {
+                    console.log('编辑:', row)
+                }
+            },
+            {
+                label: '删除',
+                type: 'btn-error',
+                onClick: (row: any) => {
+                    console.log('删除:', row)
+                }
+            },
+
+        ]
+    },
+]
+</script>
+
+<template>
+    <div class="overflow-y-auto">
+        <div class="flex justify-center gap-3">
+            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
+            <div class="">
+                <label for="explore">
+                <input type="file"
+                    class=""
+                    id="explore"
+                    style="display: none"
+                    @change="handleFileChange" :accept="limitType" />
+                    <span class="btn btn-primary btn-sm">上传文件</span>
+                </label>
+                <!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
+
+            </div>
+        </div>
+        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAlready.vue

@@ -0,0 +1,70 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue';
+import useStore from '@/store'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+
+const personConfig = useStore().personConfig
+
+const { getAlreadyPersonList: alreadyPersonList } = personConfig
+const personList = ref<any[]>(
+    alreadyPersonList
+)
+
+
+const deleteAll = () => {
+    personConfig.deleteAllPerson()
+    personList.value = alreadyPersonList
+}
+
+const tableColumns = [
+    {
+        label: '编号',
+        props: 'uid',
+    },
+    {
+        label: '姓名',
+        props: 'name',
+    },
+    {
+        label: '部门',
+        props: 'department',
+    },
+    {
+        label: '职位',
+        props: 'other',
+    },
+    {
+        label: '操作',
+        actions: [
+            {
+                label: '编辑',
+                type: 'btn-info',
+                onClick: (row: any) => {
+                    console.log('编辑:', row)
+                }
+            },
+            {
+                label: '删除',
+                type: 'btn-error',
+                onClick: (row: any) => {
+                    console.log('删除:', row)
+                }
+            },
+
+        ]
+    },
+]
+</script>
+
+<template>
+    <div class="overflow-y-auto">
+        <div class="flex justify-center gap-3">
+            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
+           
+        </div>
+        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonConfig.vue

@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+
+</script>
+
+<template>
+    <router-view></router-view>
+
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Config/Prize/PrizeConfig.vue

@@ -0,0 +1,114 @@
+<script setup lang='ts'>
+import { ref, onMounted,watch } from 'vue'
+import useStore from '@/store'
+
+import localforage from 'localforage'
+import { IPrizeConfig } from '@/types/prizeConfig';
+
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const prizeConfig = useStore().prizeConfig
+const { getPrizeConfig } = prizeConfig
+const prizeList = ref(getPrizeConfig)
+const imgList = ref<any[]>([])
+const addPrize = () => {
+    const defaultPrizeCOnfig: IPrizeConfig = {
+        id: new Date().getTime().toString(),
+        name: '奖项',
+        sort: 0,
+        isAll: false,
+        count: 1,
+        picture: [''],
+        desc: '',
+        isShow: true
+    }
+    prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
+}
+
+const getImageDbStore = async () => {
+    const keys = await imageDbStore.keys()
+    if (keys.length > 0) {
+        imageDbStore.iterate((value, key) => {
+            imgList.value.push({
+                key,
+                value
+            })
+        })
+    }
+}
+
+const sort = (item:any,isUp:number) => {
+    const itemIndex=prizeList.value.indexOf(item)
+    if(isUp==1){
+        prizeList.value.splice(itemIndex,1)
+        prizeList.value.splice(itemIndex-1,0,item)
+    }else{
+        prizeList.value.splice(itemIndex,1)
+        prizeList.value.splice(itemIndex+1,0,item)
+    }
+}
+onMounted(() => {
+    getImageDbStore()
+})
+watch(()=>prizeList,()=>{
+    console.log('prizeList',prizeList.value)
+    prizeConfig.setPrizeConfig(prizeList.value)
+},{deep:true})
+</script>
+
+<template>
+    <div>
+        <h2>奖项配置</h2>
+        <ul>
+            <li v-for="item in prizeList" :key="item.id" class="flex gap-10">
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <!-- 向上向下 -->
+                    <div class="flex flex-col items-center gap-2 pt-5">
+                        <svg-icon class="hover:text-blue-400 cursor-pointer" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
+                        <svg-icon class="hover:text-blue-400 cursor-pointer" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
+                    </div>
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">名称</span>
+                    </div>
+                    <input type="text" v-model="item.name" placeholder="名称" class="w-full input-sm 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="item.isAll" @change="item.isAll =!item.isAll"
+                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">获奖人数</span>
+                    </div>
+                    <input type="number" v-model="item.count" placeholder="获奖人数"
+                        class="w-full max-w-xs input-sm input input-bordered" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">图片</span>
+                    </div>
+                    <select class="select select-warning w-full select-sm max-w-xs" v-model="item.picture">
+                        <option disabled selected>选择一张图片</option>
+                        <option v-for="picItem in imgList" :key="picItem.key">{{ picItem.key.split('+')[1] }}</option>
+                    </select>
+                </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="item.isShow" @change="item.isShow =!item.isShow"
+                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                </label>
+            </li>
+        </ul>
+        <button class="btn btn-info" @click="addPrize">添加</button>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref,onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { configRoutes } from '../../router';
+
+const router = useRouter();
+const menuList = ref(configRoutes.children);
+
+const cleanMenuList=(menu:any)=>{
+    const newList=menu;
+    for(let i=0;i<newList.length;i++){
+        if(newList[i].children){
+            cleanMenuList(newList[i].children);
+        }
+        if(!newList[i].meta){
+            newList.splice(i,1);
+            i--;
+        }
+    }
+
+return newList;
+}
+    menuList.value=cleanMenuList(menuList.value);
+
+    const skip=(path:string)=>{
+        router.push(path);
+    }
+</script>
+
+<template>
+    <div class="flex">
+        <ul class="w-56 h-screen m-0 menu bg-base-200 pt-14 rounded-box">
+            <li v-for="item in menuList" :key="item.name">
+                <details open v-if="item.children">
+                    <summary>{{ item.meta.title }}</summary>
+                    <ul>
+                        <li v-for="subItem in item.children" :key="subItem.name">
+                            <details open v-if="subItem.children">
+                                <summary>{{ subItem.meta.title }}</summary>
+                                <ul>
+                                    <li v-for="subSubItem in subItem.children" :key="subSubItem.name">
+                                        <a @click="skip(subItem.path)">{{ subSubItem.meta!.title }}</a>
+                                    </li>
+                                </ul>
+                            </details>
+                            <a v-else @click="skip(subItem.path)">{{ subItem.meta!.title }}</a>
+                        </li>
+                    </ul>
+                </details>
+                <a v-else @click="skip(item.path)">{{ item.meta!.title }}</a>
+            </li>
+        </ul>
+        <router-view></router-view>
+    </div>
+</template>
+
+<style scoped></style>