fix: eslint and lint fixed
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
@@ -1,27 +1,30 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import i18n, { languageList } from '@/locales/i18n'
|
||||
|
||||
import useStore from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { themeChange } from 'theme-change';
|
||||
import zod from 'zod';
|
||||
import { isHex, isRgbOrRgba } from '@/utils/color'
|
||||
import daisyuiThemes from 'daisyui/src/theming/themes'
|
||||
import { ColorPicker } from 'vue3-colorpicker';
|
||||
import 'vue3-colorpicker/style.css';
|
||||
import { isRgbOrRgba, isHex } from '@/utils/color'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { themeChange } from 'theme-change'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import zod from 'zod'
|
||||
import PatternSetting from './components/PatternSetting.vue'
|
||||
import {languageList} from '@/locales/i18n'
|
||||
import i18n from '@/locales/i18n'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
|
||||
const { t } = useI18n()
|
||||
const globalConfig = useStore().globalConfig
|
||||
const personConfig = useStore().personConfig
|
||||
const prizeConfig= useStore().prizeConfig
|
||||
const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList,getLanguage:userLanguage } = storeToRefs(globalConfig)
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage } = storeToRefs(globalConfig)
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
|
||||
const colorPickerRef = ref()
|
||||
const resetDataDialogRef=ref()
|
||||
const resetDataDialogRef = ref()
|
||||
interface ThemeDaType {
|
||||
[key: string]: any
|
||||
[key: string]: any
|
||||
}
|
||||
const isRowCountChange = ref(0) //0未改变，1改变,2加载中
|
||||
const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
|
||||
const themeValue = ref(localTheme.value.name)
|
||||
const topTitleValue = ref(structuredClone(topTitle.value))
|
||||
const cardColorValue = ref(structuredClone(cardColor.value))
|
||||
@@ -30,69 +33,68 @@ 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 languageValue=ref(structuredClone(userLanguage.value))
|
||||
const languageValue = ref(structuredClone(userLanguage.value))
|
||||
const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
|
||||
const patternColorValue = ref(structuredClone(patternColor.value))
|
||||
const themeList = ref(Object.keys(daisyuiThemes))
|
||||
const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
|
||||
const formData = ref({
|
||||
rowCount: rowCountValue,
|
||||
rowCount: rowCountValue,
|
||||
})
|
||||
const formErr = ref({
|
||||
rowCount: '',
|
||||
rowCount: '',
|
||||
})
|
||||
|
||||
const schema = zod.object({
|
||||
rowCount: zod.number({
|
||||
required_error: i18n.global.t('error.require'),
|
||||
invalid_type_error: i18n.global.t('error.requireNumber'),
|
||||
})
|
||||
.min(1, i18n.global.t('error.minNumber1'))
|
||||
.max(100, i18n.global.t('error.maxNumber100'))
|
||||
// 格式化
|
||||
|
||||
rowCount: zod.number({
|
||||
required_error: i18n.global.t('error.require'),
|
||||
invalid_type_error: i18n.global.t('error.requireNumber'),
|
||||
})
|
||||
.min(1, i18n.global.t('error.minNumber1'))
|
||||
.max(100, i18n.global.t('error.maxNumber100')),
|
||||
// 格式化
|
||||
|
||||
})
|
||||
type ValidatePayload = zod.infer<typeof schema>
|
||||
const payload: ValidatePayload = {
|
||||
rowCount: formData.value.rowCount,
|
||||
rowCount: formData.value.rowCount,
|
||||
}
|
||||
const parseSchema = (props: ValidatePayload) => {
|
||||
return schema.parseAsync(props)
|
||||
function 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 newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
|
||||
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
|
||||
personConfig.deleteAllPerson()
|
||||
personConfig.addNotPersonList(newNotPersonList)
|
||||
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
|
||||
function 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 newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
|
||||
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
|
||||
personConfig.deleteAllPerson()
|
||||
personConfig.addNotPersonList(newNotPersonList)
|
||||
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
|
||||
|
||||
isRowCountChange.value = 0
|
||||
}, 1000)
|
||||
isRowCountChange.value = 0
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const clearPattern = () => {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
function clearPattern() {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
}
|
||||
const resetPattern = () => {
|
||||
globalConfig.resetPatternList()
|
||||
function resetPattern() {
|
||||
globalConfig.resetPatternList()
|
||||
}
|
||||
|
||||
const resetData=()=>{
|
||||
globalConfig.reset();
|
||||
personConfig.reset();
|
||||
prizeConfig.resetDefault();
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
function resetData() {
|
||||
globalConfig.reset()
|
||||
personConfig.reset()
|
||||
prizeConfig.resetDefault()
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
// const handleChangeShowFields = (fieldItem: any) => {
|
||||
@@ -104,205 +106,225 @@ const resetData=()=>{
|
||||
// }
|
||||
|
||||
watch(() => formData.value.rowCount, () => {
|
||||
payload.rowCount = formData.value.rowCount
|
||||
parseSchema(payload).then(res => {
|
||||
if (res.rowCount) {
|
||||
isRowCountChange.value = 1
|
||||
globalConfig.setRowCount(res.rowCount)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
formErr.value.rowCount = err.issues[0].message
|
||||
})
|
||||
payload.rowCount = formData.value.rowCount
|
||||
parseSchema(payload).then((res) => {
|
||||
if (res.rowCount) {
|
||||
isRowCountChange.value = 1
|
||||
globalConfig.setRowCount(res.rowCount)
|
||||
}
|
||||
}).catch((err) => {
|
||||
formErr.value.rowCount = err.issues[0].message
|
||||
})
|
||||
})
|
||||
watch(topTitleValue, (val) => {
|
||||
globalConfig.setTopTitle(val)
|
||||
}),
|
||||
|
||||
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))) {
|
||||
globalConfig.setCardColor(selectedThemeDetail.primary)
|
||||
}
|
||||
}, { deep: true })
|
||||
watch(topTitleValue, (val) => {
|
||||
globalConfig.setTopTitle(val)
|
||||
})
|
||||
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))) {
|
||||
globalConfig.setCardColor(selectedThemeDetail.primary)
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardColorValue, (val: string) => {
|
||||
globalConfig.setCardColor(val)
|
||||
globalConfig.setCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(luckyCardColorValue, (val: string) => {
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(patternColorValue, (val: string) => {
|
||||
globalConfig.setPatterColor(val)
|
||||
globalConfig.setPatterColor(val)
|
||||
})
|
||||
watch(textColorValue, (val: string) => {
|
||||
globalConfig.setTextColor(val)
|
||||
globalConfig.setTextColor(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardSizeValue, (val: { width: number; height: number; }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true }),
|
||||
watch(isShowPrizeListValue, () => {
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
})
|
||||
watch(languageValue,(val:string)=>{
|
||||
globalConfig.setLanguage(val)
|
||||
watch(cardSizeValue, (val: { width: number, height: number }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true })
|
||||
watch(isShowPrizeListValue, () => {
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
})
|
||||
watch(languageValue, (val: string) => {
|
||||
globalConfig.setLanguage(val)
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">{{$t('dialog.titleTip')}}</h3>
|
||||
<p class="py-4">{{ $t('dialog.dialogResetAllData') }}</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialogRef.close()">{{$t(`button.cancel`)}}</button>
|
||||
<button class="btn" @click="resetData">{{$t('button.confirm')}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div>
|
||||
<h2>{{$t('viewTitle.globalSetting')}}</h2>
|
||||
<div class="mb-8">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">{{$t('button.resetAllData')}}</button>
|
||||
</div>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.title')}}</span>
|
||||
</div>
|
||||
<input type="text" v-model="topTitleValue" :placeholder="$t('placeHolder.enterTitle')"
|
||||
class="w-full max-w-xs input input-bordered" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.columnNumber')}}</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>
|
||||
<div>
|
||||
<div class="tooltip" :data-tip="$t('tooltip.resetLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
|
||||
<span>{{$t('button.setLayout')}}</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">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.language')}}</span>
|
||||
</div>
|
||||
<select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="languageValue">
|
||||
<option disabled selected>{{$t('table.language')}}</option>
|
||||
<option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.theme')}}</span>
|
||||
</div>
|
||||
<select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="themeValue">
|
||||
<option disabled selected>{{$t('table.theme')}}</option>
|
||||
<option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.cardColor')}}</span>
|
||||
</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">{{$t('table.winnerColor')}}</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">{{$t('table.textColor')}}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue"></ColorPicker>
|
||||
</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">{{$t('table.cardWidth')}}</span>
|
||||
</div>
|
||||
<input type="number" v-model="cardSizeValue.width" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.cardHeight')}}</span>
|
||||
</div>
|
||||
<input type="number" v-model="cardSizeValue.height" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.textSize')}}</span>
|
||||
</div>
|
||||
<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 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.highlightColor')}}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue">
|
||||
</ColorPicker>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.patternSetting')}}</span>
|
||||
</div>
|
||||
<div class="h-auto">
|
||||
<PatternSetting :rowCount="rowCount" :cardColor="cardColor" :patternColor="patternColor"
|
||||
:patternList="patternList"></PatternSetting>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex w-full h-24 gap-3 m-0">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
|
||||
<span>{{ $t('button.clearPattern') }}</span>
|
||||
</button>
|
||||
<div class="tooltip" :data-tip="$t('tooltip.defaultLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
|
||||
<span>{{ $t('button.DefaultPattern') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.alwaysDisplay')}}</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
|
||||
<dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTip') }}
|
||||
</h3>
|
||||
<p class="py-4">
|
||||
{{ t('dialog.dialogResetAllData') }}
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialogRef.close()">
|
||||
{{ t(`button.cancel`) }}
|
||||
</button>
|
||||
<button class="btn" @click="resetData">
|
||||
{{ t('button.confirm') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div>
|
||||
<h2>{{ t('viewTitle.globalSetting') }}</h2>
|
||||
<div class="mb-8">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
|
||||
{{ t('button.resetAllData') }}
|
||||
</button>
|
||||
</div>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.title') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.columnNumber') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="formData.rowCount" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
<div class="help">
|
||||
<span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
|
||||
{{ formErr.rowCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tooltip" :data-tip="t('tooltip.resetLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
|
||||
<span>{{ t('button.setLayout') }}</span>
|
||||
<span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.language') }}</span>
|
||||
</div>
|
||||
<select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
|
||||
<option disabled selected>{{ t('table.language') }}</option>
|
||||
<option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.theme') }}</span>
|
||||
</div>
|
||||
<select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
|
||||
<option disabled selected>{{ t('table.theme') }}</option>
|
||||
<option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.winnerColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
|
||||
</label>
|
||||
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.textColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
|
||||
</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">{{ t('table.cardWidth') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.width" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardHeight') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.height" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.textSize') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="textSizeValue" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.highlightColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.patternSetting') }}</span>
|
||||
</div>
|
||||
<div class="h-auto">
|
||||
<PatternSetting
|
||||
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
|
||||
:pattern-list="patternList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex w-full h-24 gap-3 m-0">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
|
||||
<span>{{ t('button.clearPattern') }}</span>
|
||||
</button>
|
||||
<div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
|
||||
<span>{{ t('button.DefaultPattern') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.alwaysDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
|
||||
@change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,111 +1,118 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { IImage } from '@/types/storeType'
|
||||
import type { IImage } from '@/types/storeType'
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import useStore from '@/store'
|
||||
import { readFileData } from '@/utils/file'
|
||||
import localforage from 'localforage'
|
||||
import useStore from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
const globalConfig= useStore().globalConfig
|
||||
const { getImageList:localImageList} = storeToRefs(globalConfig)
|
||||
const { t } = useI18n()
|
||||
const globalConfig = useStore().globalConfig
|
||||
const { getImageList: localImageList } = storeToRefs(globalConfig)
|
||||
const limitType = ref('image/*')
|
||||
const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
|
||||
const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
|
||||
const imageDbStore = localforage.createInstance({
|
||||
name: 'imgStore'
|
||||
name: 'imgStore',
|
||||
})
|
||||
const handleFileChange = async (e: Event) => {
|
||||
const isImage= /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isImage) {
|
||||
imgUploadToast.value = 3
|
||||
async function handleFileChange(e: Event) {
|
||||
const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isImage) {
|
||||
imgUploadToast.value = 3
|
||||
|
||||
return
|
||||
}
|
||||
let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
|
||||
.then(() => {
|
||||
imgUploadToast.value = 1
|
||||
getImageDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
imgUploadToast.value = 2
|
||||
})
|
||||
return
|
||||
}
|
||||
const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
|
||||
.then(() => {
|
||||
imgUploadToast.value = 1
|
||||
getImageDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
imgUploadToast.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
const getImageDbStore =async () => {
|
||||
const keys =await imageDbStore.keys()
|
||||
if(keys.length>0){
|
||||
imageDbStore.iterate((value, key) => {
|
||||
globalConfig.addImage({
|
||||
id:key,
|
||||
name:key,
|
||||
url:'Storage'
|
||||
})
|
||||
})
|
||||
}
|
||||
async function getImageDbStore() {
|
||||
const keys = await imageDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
imageDbStore.iterate((value, key) => {
|
||||
globalConfig.addImage({
|
||||
id: key,
|
||||
name: key,
|
||||
url: 'Storage',
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const removeImage=(item:IImage)=>{
|
||||
if(item.url=='Storage'){
|
||||
imageDbStore.removeItem(item.id).then(() => {
|
||||
globalConfig.removeImage(item.id)
|
||||
})
|
||||
}
|
||||
globalConfig.removeImage(item.id)
|
||||
function removeImage(item: IImage) {
|
||||
if (item.url === 'Storage') {
|
||||
imageDbStore.removeItem(item.id).then(() => {
|
||||
globalConfig.removeImage(item.id)
|
||||
})
|
||||
}
|
||||
globalConfig.removeImage(item.id)
|
||||
}
|
||||
onMounted(() => {
|
||||
// getImageDbStore()
|
||||
// getImageDbStore()
|
||||
})
|
||||
watch(() => imgUploadToast.value, (val) => {
|
||||
if (val !== 0) {
|
||||
setTimeout(() => {
|
||||
imgUploadToast.value = 0
|
||||
}, 2000)
|
||||
}
|
||||
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>{{ $t('error.uploadFail') }}</span>
|
||||
</div>
|
||||
<div class="alert alert-success" v-if="imgUploadToast == 1">
|
||||
<span>{{ $t('error.uploadSuccess') }}</span>
|
||||
</div>
|
||||
<div class="alert alert-error" v-if="imgUploadToast == 3">
|
||||
<span>{{ $t('error.notImage') }}</span>
|
||||
</div>
|
||||
<div class="toast toast-top toast-end">
|
||||
<div v-if="imgUploadToast === 2" class="alert alert-error">
|
||||
<span>{{ t('error.uploadFail') }}</span>
|
||||
</div>
|
||||
<div v-if="imgUploadToast === 1" class="alert alert-success">
|
||||
<span>{{ t('error.uploadSuccess') }}</span>
|
||||
</div>
|
||||
<div v-if="imgUploadToast === 3" class="alert alert-error">
|
||||
<span>{{ t('error.notImage') }}</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">{{ $t('button.upload') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<ul class="p-0">
|
||||
<li v-for="item in localImageList" :key="item.id" class="mb-3">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="avatar h-14">
|
||||
<div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
|
||||
<!-- <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" /> -->
|
||||
<ImageSync :imgItem="item"></ImageSync>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64">
|
||||
<div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">{{ item.name}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-error btn-xs" @click="removeImage(item)">{{ $t('button.upload') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
<input
|
||||
id="explore" type="file" class="" style="display: none" :accept="limitType"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<ul class="p-0">
|
||||
<li v-for="item in localImageList" :key="item.id" class="mb-3">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="avatar h-14">
|
||||
<div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
|
||||
<!-- <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" /> -->
|
||||
<ImageSync :img-item="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64">
|
||||
<div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-error btn-xs" @click="removeImage(item)">
|
||||
{{ t('button.upload') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,102 +1,113 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {storeToRefs } from 'pinia'
|
||||
import { IMusic } from '@/types/storeType';
|
||||
import type { IMusic } from '@/types/storeType'
|
||||
import useStore from '@/store'
|
||||
import { readFileData } from '@/utils/file'
|
||||
import useStore from '@/store';
|
||||
|
||||
import localforage from 'localforage'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const audioUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
|
||||
const audioDbStore = localforage.createInstance({
|
||||
name: 'audioStore'
|
||||
name: 'audioStore',
|
||||
})
|
||||
const globalConfig = useStore().globalConfig
|
||||
|
||||
const { getMusicList: localMusicList } = storeToRefs(globalConfig);
|
||||
const { getMusicList: localMusicList } = storeToRefs(globalConfig)
|
||||
const limitType = ref('audio/*')
|
||||
const localMusicListValue = ref(localMusicList)
|
||||
const play = async (item: IMusic) => {
|
||||
globalConfig.setCurrentMusic(item,false)
|
||||
async function play(item: IMusic) {
|
||||
globalConfig.setCurrentMusic(item, false)
|
||||
}
|
||||
|
||||
const deleteMusic = (item: IMusic) => {
|
||||
globalConfig.removeMusic(item.id)
|
||||
audioDbStore.removeItem(item.name)
|
||||
// setTimeout(()=>{
|
||||
// localMusicListValue.value=localMusicList
|
||||
// },100)
|
||||
function deleteMusic(item: IMusic) {
|
||||
globalConfig.removeMusic(item.id)
|
||||
audioDbStore.removeItem(item.name)
|
||||
// setTimeout(()=>{
|
||||
// localMusicListValue.value=localMusicList
|
||||
// },100)
|
||||
}
|
||||
const resetMusic = () => {
|
||||
globalConfig.resetMusicList()
|
||||
audioDbStore.clear()
|
||||
function resetMusic() {
|
||||
globalConfig.resetMusicList()
|
||||
audioDbStore.clear()
|
||||
}
|
||||
const deleteAll = () => {
|
||||
globalConfig.clearMusicList()
|
||||
audioDbStore.clear()
|
||||
function deleteAll() {
|
||||
globalConfig.clearMusicList()
|
||||
audioDbStore.clear()
|
||||
}
|
||||
const getMusicDbStore = async () => {
|
||||
const keys = await audioDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
audioDbStore.iterate((value: string, key: string) => {
|
||||
globalConfig.addMusic({
|
||||
id: key + new Date().getTime().toString(),
|
||||
name: key,
|
||||
url: 'Storage',
|
||||
})
|
||||
})
|
||||
}
|
||||
async function getMusicDbStore() {
|
||||
const keys = await audioDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
audioDbStore.iterate((value: string, key: string) => {
|
||||
globalConfig.addMusic({
|
||||
id: key + new Date().getTime().toString(),
|
||||
name: key,
|
||||
url: 'Storage',
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleFileChange = async (e: Event) => {
|
||||
const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isAudio) {
|
||||
audioUploadToast.value = 3
|
||||
async function handleFileChange(e: Event) {
|
||||
const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isAudio) {
|
||||
audioUploadToast.value = 3
|
||||
|
||||
return
|
||||
}
|
||||
let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
audioDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
|
||||
.then(() => {
|
||||
audioUploadToast.value = 1
|
||||
getMusicDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
audioUploadToast.value = 2
|
||||
})
|
||||
return
|
||||
}
|
||||
const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
|
||||
.then(() => {
|
||||
audioUploadToast.value = 1
|
||||
getMusicDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
audioUploadToast.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getMusicDbStore()
|
||||
getMusicDbStore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-sm" @click="resetMusic">{{ $t('button.reset') }}</button>
|
||||
<label for="explore">
|
||||
<input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
|
||||
:accept="limitType" />
|
||||
<span class="btn btn-primary btn-sm">{{ $t('button.upload') }}</span>
|
||||
</label>
|
||||
<button class="btn btn-error btn-sm" @click="deleteAll">{{ $t('button.allDelete') }}</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="p-0">
|
||||
<li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
|
||||
<div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
|
||||
<span>
|
||||
{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-xs" @click="play(item)">{{ $t('button.play') }}</button>
|
||||
<button class="btn btn-error btn-xs" @click="deleteMusic(item)">{{ $t('button.delete') }}</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-sm" @click="resetMusic">
|
||||
{{ t('button.reset') }}
|
||||
</button>
|
||||
<label for="explore">
|
||||
<input
|
||||
id="explore" type="file" class="" style="display: none" :accept="limitType"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
|
||||
</label>
|
||||
<button class="btn btn-error btn-sm" @click="deleteAll">
|
||||
{{ t('button.allDelete') }}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="p-0">
|
||||
<li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
|
||||
<div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
|
||||
<span>
|
||||
{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-xs" @click="play(item)">
|
||||
{{ t('button.play') }}
|
||||
</button>
|
||||
<button class="btn btn-error btn-xs" @click="deleteMusic(item)">
|
||||
{{ t('button.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,45 +1,46 @@
|
||||
<script setup lang='ts'>
|
||||
import {computed} from 'vue';
|
||||
const props=defineProps({
|
||||
rowCount:{
|
||||
type:Number,
|
||||
default:17
|
||||
},
|
||||
cardColor:{
|
||||
type:String,
|
||||
default:'#fff'
|
||||
},
|
||||
patternColor:{
|
||||
type:String,
|
||||
default:'#000'
|
||||
},
|
||||
patternList:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
rowCount: {
|
||||
type: Number,
|
||||
default: 17,
|
||||
},
|
||||
cardColor: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
patternColor: {
|
||||
type: String,
|
||||
default: '#000',
|
||||
},
|
||||
patternList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
const data=computed(()=>{
|
||||
return props
|
||||
const data = computed(() => {
|
||||
return props
|
||||
})
|
||||
|
||||
const updatePatternList=(event:Event,item:number)=>{
|
||||
if(data.value.patternList.includes(item)){
|
||||
const index=data.value.patternList.indexOf(item)
|
||||
data.value.patternList.splice(index,1)
|
||||
}else{
|
||||
data.value.patternList.push(item)
|
||||
}
|
||||
// emits
|
||||
function updatePatternList(event: Event, item: number) {
|
||||
if (data.value.patternList.includes(item)) {
|
||||
const index = data.value.patternList.indexOf(item)
|
||||
data.value.patternList.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
data.value.patternList.push(item)
|
||||
}
|
||||
// emits
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-auto" >
|
||||
<ul class="pattern-list" :style="{gridTemplateColumns:'repeat('+data.rowCount+',1fr)'}">
|
||||
<li @click.stop="(event)=>updatePatternList(event,item)" class="w-5 h-5" v-for="item in data.rowCount*7" :key="item" :style="{backgroundColor:data.patternList.includes(item)?data.patternColor:data.cardColor}">
|
||||
</li>
|
||||
<div class="w-full h-auto">
|
||||
<ul class="pattern-list" :style="{ gridTemplateColumns: `repeat(${data.rowCount},1fr)` }">
|
||||
<li v-for="item in data.rowCount * 7" :key="item" class="w-5 h-5" :style="{ backgroundColor: data.patternList.includes(item) ? data.patternColor : data.cardColor }" @click.stop="(event) => updatePatternList(event, item)" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
<!-- eslint-disable vue/no-parsing-error -->
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import useStore from '@/store'
|
||||
import { IPersonConfig } from '@/types/storeType';
|
||||
import { storeToRefs } from 'pinia'
|
||||
import * as XLSX from 'xlsx'
|
||||
import { readFileBinary } from '@/utils/file'
|
||||
import { addOtherInfo } from '@/utils'
|
||||
import type { IPersonConfig } from '@/types/storeType'
|
||||
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
|
||||
import i18n from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
import { addOtherInfo } from '@/utils'
|
||||
import { readFileBinary } from '@/utils/file'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
const { t } = useI18n()
|
||||
const personConfig = useStore().personConfig
|
||||
const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
|
||||
const limitType = '.xlsx,.xls'
|
||||
@@ -17,174 +20,200 @@ const limitType = '.xlsx,.xls'
|
||||
const resetDataDialog = ref()
|
||||
const delAllDataDialog = ref()
|
||||
|
||||
const handleFileChange = async (e: Event) => {
|
||||
let dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
|
||||
let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
|
||||
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
|
||||
const excelData = XLSX.utils.sheet_to_json(workSheet)
|
||||
const allData = addOtherInfo(excelData);
|
||||
personConfig.resetPerson()
|
||||
personConfig.addNotPersonList(allData)
|
||||
async function handleFileChange(e: Event) {
|
||||
const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
|
||||
const workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
|
||||
const workSheet = workBook.Sheets[workBook.SheetNames[0]]
|
||||
const excelData = XLSX.utils.sheet_to_json(workSheet)
|
||||
const allData = addOtherInfo(excelData)
|
||||
personConfig.resetPerson()
|
||||
personConfig.addNotPersonList(allData)
|
||||
}
|
||||
const exportData = () => {
|
||||
let data = JSON.parse(JSON.stringify(allPersonList.value))
|
||||
// 排除一些字段
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
delete data[i].x
|
||||
delete data[i].y
|
||||
delete data[i].id
|
||||
delete data[i].createTime
|
||||
delete data[i].updateTime
|
||||
delete data[i].prizeId
|
||||
// 修改字段名称
|
||||
if (data[i].isWin) {
|
||||
data[i].isWin = i18n.global.t('data.yes')
|
||||
} else {
|
||||
data[i].isWin = i18n.global.t('data.no')
|
||||
}
|
||||
// 格式化数组为
|
||||
data[i].prizeTime = data[i].prizeTime.join(',')
|
||||
data[i].prizeName = data[i].prizeName.join(',')
|
||||
function exportData() {
|
||||
let data = JSON.parse(JSON.stringify(allPersonList.value))
|
||||
// 排除一些字段
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
delete data[i].x
|
||||
delete data[i].y
|
||||
delete data[i].id
|
||||
delete data[i].createTime
|
||||
delete data[i].updateTime
|
||||
delete data[i].prizeId
|
||||
// 修改字段名称
|
||||
if (data[i].isWin) {
|
||||
data[i].isWin = i18n.global.t('data.yes')
|
||||
}
|
||||
let dataString = JSON.stringify(data)
|
||||
dataString = dataString
|
||||
.replaceAll(/uid/g, i18n.global.t('data.number'))
|
||||
.replaceAll(/isWin/g, i18n.global.t('data.isWin'))
|
||||
.replaceAll(/department/g, i18n.global.t('data.department'))
|
||||
.replaceAll(/name/g, i18n.global.t('data.name'))
|
||||
.replaceAll(/identity/g, i18n.global.t('data.identity'))
|
||||
.replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
|
||||
.replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
|
||||
|
||||
data = JSON.parse(dataString)
|
||||
|
||||
if (data.length > 0) {
|
||||
const dataBinary = XLSX.utils.json_to_sheet(data)
|
||||
const dataBinaryBinary = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
|
||||
XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
|
||||
else {
|
||||
data[i].isWin = i18n.global.t('data.no')
|
||||
}
|
||||
// 格式化数组为
|
||||
data[i].prizeTime = data[i].prizeTime.join(',')
|
||||
data[i].prizeName = data[i].prizeName.join(',')
|
||||
}
|
||||
let dataString = JSON.stringify(data)
|
||||
dataString = dataString
|
||||
.replaceAll(/uid/g, i18n.global.t('data.number'))
|
||||
.replaceAll(/isWin/g, i18n.global.t('data.isWin'))
|
||||
.replaceAll(/department/g, i18n.global.t('data.department'))
|
||||
.replaceAll(/name/g, i18n.global.t('data.name'))
|
||||
.replaceAll(/identity/g, i18n.global.t('data.identity'))
|
||||
.replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
|
||||
.replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
|
||||
|
||||
data = JSON.parse(dataString)
|
||||
|
||||
if (data.length > 0) {
|
||||
const dataBinary = XLSX.utils.json_to_sheet(data)
|
||||
const dataBinaryBinary = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
|
||||
XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
|
||||
}
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
personConfig.resetAlreadyPerson()
|
||||
function resetData() {
|
||||
personConfig.resetAlreadyPerson()
|
||||
}
|
||||
|
||||
const deleteAll = () => {
|
||||
personConfig.deleteAllPerson()
|
||||
function deleteAll() {
|
||||
personConfig.deleteAllPerson()
|
||||
}
|
||||
|
||||
const delPersonItem = (row: IPersonConfig) => {
|
||||
personConfig.deletePerson(row)
|
||||
function delPersonItem(row: IPersonConfig) {
|
||||
personConfig.deletePerson(row)
|
||||
}
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.name'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.isWin'),
|
||||
props: 'isWin',
|
||||
formatValue(row: IPersonConfig) {
|
||||
return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.name'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.isWin'),
|
||||
props: 'isWin',
|
||||
formatValue(row: IPersonConfig) {
|
||||
return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
// {
|
||||
// label: '编辑',
|
||||
// type: 'btn-info',
|
||||
// onClick: (row: any) => {
|
||||
// delPersonItem(row)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
label: i18n.global.t('data.delete'),
|
||||
type: 'btn-error',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
delPersonItem(row)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
// {
|
||||
// label: '编辑',
|
||||
// type: 'btn-info',
|
||||
// onClick: (row: any) => {
|
||||
// delPersonItem(row)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
label: i18n.global.t('data.delete'),
|
||||
type: 'btn-error',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
delPersonItem(row)
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
|
||||
<p class="py-4">{{ $t('dialog.dialogResetWinner') }}</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialog.close()">{{ $t('button.cancel') }}</button>
|
||||
<button class="btn" @click="resetData">{{ $t('dialog.confirm') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
|
||||
<p class="py-4">{{ $t('dialog.dialogDelAllPerson') }}</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="delAllDataDialog.close()">{{ $t('button.cancel') }}</button>
|
||||
<button class="btn" @click="deleteAll">{{ $t('button.confirm') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div class="min-w-1000px">
|
||||
|
||||
<h2>{{ $t('viewTitle.personManagement') }}</h2>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">{{ $t('button.allDelete') }}</button>
|
||||
<div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.downloadTemplateTip')">
|
||||
<a class="no-underline btn btn-secondary btn-sm" :download="$t('data.xlsxName')" target="_blank"
|
||||
:href="'/log-lottery/'+$t('data.xlsxName')">{{ $t('button.downloadTemplate') }}</a>
|
||||
</div>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
|
||||
<div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.uploadExcelTip')">
|
||||
<input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
|
||||
:accept="limitType" />
|
||||
|
||||
<span class="btn btn-primary btn-sm">{{ $t('button.importData') }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">{{ $t('button.resetData') }}</button>
|
||||
<button class="btn btn-accent btn-sm" @click="exportData">{{ $t('button.exportResult') }}</button>
|
||||
<div>
|
||||
<span>{{$t('table.luckyPeopleNumber')}}:</span>
|
||||
<span>{{ alreadyPersonList.length }}</span>
|
||||
<span> / </span>
|
||||
<span>{{ allPersonList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
|
||||
<dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTip') }}
|
||||
</h3>
|
||||
<p class="py-4">
|
||||
{{ t('dialog.dialogResetWinner') }}
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialog.close()">
|
||||
{{ t('button.cancel') }}
|
||||
</button>
|
||||
<button class="btn" @click="resetData">
|
||||
{{ t('dialog.confirm') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTip') }}
|
||||
</h3>
|
||||
<p class="py-4">
|
||||
{{ t('dialog.dialogDelAllPerson') }}
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="delAllDataDialog.close()">
|
||||
{{ t('button.cancel') }}
|
||||
</button>
|
||||
<button class="btn" @click="deleteAll">
|
||||
{{ t('button.confirm') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div class="min-w-1000px">
|
||||
<h2>{{ t('viewTitle.personManagement') }}</h2>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">
|
||||
{{ t('button.allDelete') }}
|
||||
</button>
|
||||
<div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
|
||||
<a
|
||||
class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
|
||||
:href="`/log-lottery/${t('data.xlsxName')}`"
|
||||
>{{ t('button.downloadTemplate') }}</a>
|
||||
</div>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
|
||||
<div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
|
||||
<input
|
||||
id="explore" type="file" class="" style="display: none" :accept="limitType"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
|
||||
<span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">
|
||||
{{ t('button.resetData') }}
|
||||
</button>
|
||||
<button class="btn btn-accent btn-sm" @click="exportData">
|
||||
{{ t('button.exportResult') }}
|
||||
</button>
|
||||
<div>
|
||||
<span>{{ t('table.luckyPeopleNumber') }}:</span>
|
||||
<span>{{ alreadyPersonList.length }}</span>
|
||||
<span> / </span>
|
||||
<span>{{ allPersonList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<!-- eslint-disable vue/no-parsing-error -->
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue';
|
||||
import useStore from '@/store'
|
||||
import { IPersonConfig } from '@/types/storeType';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import type { IPersonConfig } from '@/types/storeType'
|
||||
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
|
||||
import i18n from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const personConfig = useStore().personConfig
|
||||
|
||||
const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
|
||||
@@ -13,118 +16,116 @@ const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: already
|
||||
// alreadyPersonList
|
||||
// )
|
||||
|
||||
|
||||
// const deleteAll = () => {
|
||||
// personConfig.deleteAllPerson()
|
||||
// }
|
||||
|
||||
const isDetail = ref(false)
|
||||
const handleMoveNotPerson = (row: IPersonConfig) => {
|
||||
personConfig.moveAlreadyToNot(row)
|
||||
function handleMoveNotPerson(row: IPersonConfig) {
|
||||
personConfig.moveAlreadyToNot(row)
|
||||
}
|
||||
|
||||
const tableColumnsList = [
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeName'),
|
||||
props: 'prizeName',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
{
|
||||
label: i18n.global.t('data.removePerson'),
|
||||
type: 'btn-info',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
handleMoveNotPerson(row)
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
sort: true,
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeName'),
|
||||
props: 'prizeName',
|
||||
sort: true,
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
{
|
||||
label: i18n.global.t('data.removePerson'),
|
||||
type: 'btn-info',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
handleMoveNotPerson(row)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const tableColumnsDetail = [
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeName'),
|
||||
props: 'prizeName',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeTime'),
|
||||
props: 'prizeTime',
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'uid',
|
||||
sort: true,
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.number'),
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.department'),
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.identity'),
|
||||
props: 'identity',
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeName'),
|
||||
props: 'prizeName',
|
||||
sort: true,
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.prizeTime'),
|
||||
props: 'prizeTime',
|
||||
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
{
|
||||
label: i18n.global.t('data.removePerson'),
|
||||
type: 'btn-info',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
handleMoveNotPerson(row)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: i18n.global.t('data.operation'),
|
||||
actions: [
|
||||
{
|
||||
label: i18n.global.t('data.removePerson'),
|
||||
type: 'btn-info',
|
||||
onClick: (row: IPersonConfig) => {
|
||||
handleMoveNotPerson(row)
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-y-auto">
|
||||
|
||||
<h2>{{ $t('viewTitle.winnerManagement') }}</h2>
|
||||
<div class="flex items-center justify-start gap-10">
|
||||
<div>
|
||||
<span>{{$t('table.luckyPeopleNumber')}}：</span>
|
||||
<span>{{ alreadyPersonList.length }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">{{$t('table.detail')}}:</span>
|
||||
<input type="checkbox" class="border-solid toggle toggle-primary border-1" v-model="isDetail" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<h2>{{ t('viewTitle.winnerManagement') }}</h2>
|
||||
<div class="flex items-center justify-start gap-10">
|
||||
<div>
|
||||
<span>{{ t('table.luckyPeopleNumber') }}：</span>
|
||||
<span>{{ alreadyPersonList.length }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">{{ t('table.detail') }}:</span>
|
||||
<input v-model="isDetail" type="checkbox" class="border-solid toggle toggle-primary border-1">
|
||||
</label>
|
||||
</div>
|
||||
<DaiysuiTable v-if="!isDetail" :tableColumns="tableColumnsList" :data="alreadyPersonList"></DaiysuiTable>
|
||||
|
||||
<DaiysuiTable v-if="isDetail" :tableColumns="tableColumnsDetail" :data="alreadyPersonDetail"></DaiysuiTable>
|
||||
</div>
|
||||
</div>
|
||||
<DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
|
||||
|
||||
<DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<script setup lang='ts'>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import useStore from '@/store'
|
||||
import { IPrizeConfig } from '@/types/storeType'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import localforage from 'localforage'
|
||||
import type { IPrizeConfig } from '@/types/storeType'
|
||||
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
|
||||
import i18n from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
import localforage from 'localforage'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const imageDbStore = localforage.createInstance({
|
||||
name: 'imgStore'
|
||||
name: 'imgStore',
|
||||
})
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const globalConfig = useStore().globalConfig
|
||||
@@ -19,236 +22,266 @@ const imgList = ref<any[]>([])
|
||||
|
||||
const selectedPrize = ref<IPrizeConfig | null>()
|
||||
|
||||
const addPrize = () => {
|
||||
const defaultPrizeCOnfig: IPrizeConfig = {
|
||||
id: new Date().getTime().toString(),
|
||||
name: i18n.global.t('data.prizeName'),
|
||||
sort: 0,
|
||||
isAll: false,
|
||||
count: 1,
|
||||
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,
|
||||
picture: {
|
||||
id: '',
|
||||
name: '',
|
||||
url: ''
|
||||
},
|
||||
separateCount: {
|
||||
enable: false,
|
||||
countList: []
|
||||
},
|
||||
desc: '',
|
||||
isUsed: false,
|
||||
isShow: true,
|
||||
frequency: 1,
|
||||
}
|
||||
prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
const 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
|
||||
}
|
||||
|
||||
const 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()
|
||||
}
|
||||
|
||||
const 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
|
||||
}
|
||||
}
|
||||
const submitData = (value: any) => {
|
||||
selectedPrize.value!.separateCount.countList = value;
|
||||
selectedPrize.value = null
|
||||
}
|
||||
const resetDefault = () => {
|
||||
prizeConfig.resetDefault()
|
||||
async function getImageDbStore() {
|
||||
const keys = await imageDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
imageDbStore.iterate((value, key) => {
|
||||
imgList.value.push({
|
||||
key,
|
||||
value,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getImageDbStore = async () => {
|
||||
const keys = await imageDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
imageDbStore.iterate((value, key) => {
|
||||
imgList.value.push({
|
||||
key,
|
||||
value
|
||||
})
|
||||
})
|
||||
}
|
||||
function sort(item: IPrizeConfig, 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)
|
||||
}
|
||||
}
|
||||
|
||||
const sort = (item: IPrizeConfig, 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)
|
||||
}
|
||||
function delItem(item: IPrizeConfig) {
|
||||
prizeConfig.deletePrizeConfig(item.id)
|
||||
}
|
||||
const delItem = (item: IPrizeConfig) => {
|
||||
prizeConfig.deletePrizeConfig(item.id)
|
||||
}
|
||||
const delAll = async () => {
|
||||
await prizeConfig.deleteAllPrizeConfig()
|
||||
async function delAll() {
|
||||
await prizeConfig.deleteAllPrizeConfig()
|
||||
}
|
||||
onMounted(() => {
|
||||
getImageDbStore()
|
||||
getImageDbStore()
|
||||
})
|
||||
watch(() => prizeList.value, (val: IPrizeConfig[]) => {
|
||||
prizeConfig.setPrizeConfig(val)
|
||||
prizeConfig.setPrizeConfig(val)
|
||||
}, { deep: true })
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2>{{ $t('viewTitle.prizeManagement') }}</h2>
|
||||
<div class="flex w-full gap-3">
|
||||
<button class="btn btn-info btn-sm" @click="addPrize">{{$t('button.add')}}</button>
|
||||
<button class="btn btn-info btn-sm" @click="resetDefault">{{$t('button.resetDefault')}}</button>
|
||||
<button class="btn btn-error btn-sm" @click="delAll">{{$t('button.allDelete')}}</button>
|
||||
|
||||
</div>
|
||||
<div role="alert" class="w-full my-4 alert alert-info">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>{{$t('dialog.tipResetPrize')}}</span>
|
||||
</div>
|
||||
<ul class="p-0 m-0">
|
||||
<li v-for="item in prizeList" :key="item.id" class="flex gap-10"
|
||||
:class="currentPrize.id == item.id ? 'border-1 border-dotted rounded-xl' : null">
|
||||
<label class="max-w-xs mb-10 form-control">
|
||||
<!-- 向上向下 -->
|
||||
<div class="flex flex-col items-center gap-2 pt-5">
|
||||
<svg-icon class="cursor-pointer hover:text-blue-400"
|
||||
:class="prizeList.indexOf(item) == 0 ? 'opacity-0 cursor-default' : ''" name="up"
|
||||
@click="sort(item, 1)"></svg-icon>
|
||||
<svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item, 0)"
|
||||
:class="prizeList.indexOf(item) == prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"></svg-icon>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.prizeName') }}</span>
|
||||
</div>
|
||||
<input type="text" v-model="item.name" :placeholder="$t('placeHolder.name')"
|
||||
class="w-full max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.fullParticipation') }}</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="item.isAll" @change="item.isAll = !item.isAll"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.numberParticipants') }}</span>
|
||||
</div>
|
||||
<input type="number" v-model="item.count" :placeholder="$t('placeHolder.winnerCount')" @change="changePrizePerson(item)"
|
||||
class="w-full max-w-xs p-0 m-0 input-sm input input-bordered" />
|
||||
<div class="tooltip tooltip-bottom" :data-tip="$t('table.isDone') + item.isUsedCount + '/' + item.count">
|
||||
<progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.isDone') }}</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="item.isUsed" @change="changePrizeStatus(item)"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.image') }}</span>
|
||||
</div>
|
||||
<select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
|
||||
<option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
|
||||
<option disabled selected>{{ $t('table.selectPicture') }}</option>
|
||||
<option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control" v-if="item.separateCount">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.onceNumber') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-start w-full h-full" @click="selectPrize(item)">
|
||||
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
|
||||
v-if="item.separateCount.countList.length">
|
||||
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
|
||||
v-for="se in item.separateCount.countList" :key="se.id">
|
||||
<div class="flex items-center justify-center w-full h-full tooltip"
|
||||
:data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
|
||||
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
|
||||
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
|
||||
<span>{{ se.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-else class="btn btn-secondary btn-xs">{{ $t('button.setting') }}</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('table.operation') }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-error btn-sm" @click="delItem(item)">{{ $t('button.delete') }}</button>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
|
||||
@submitData="submitData" />
|
||||
<div>
|
||||
<h2>{{ t('viewTitle.prizeManagement') }}</h2>
|
||||
<div class="flex w-full gap-3">
|
||||
<button class="btn btn-info btn-sm" @click="addPrize">
|
||||
{{ t('button.add') }}
|
||||
</button>
|
||||
<button class="btn btn-info btn-sm" @click="resetDefault">
|
||||
{{ t('button.resetDefault') }}
|
||||
</button>
|
||||
<button class="btn btn-error btn-sm" @click="delAll">
|
||||
{{ t('button.allDelete') }}
|
||||
</button>
|
||||
</div>
|
||||
<div role="alert" class="w-full my-4 alert alert-info">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
|
||||
<path
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ t('dialog.tipResetPrize') }}</span>
|
||||
</div>
|
||||
<ul class="p-0 m-0">
|
||||
<li
|
||||
v-for="item in prizeList" :key="item.id" class="flex gap-10"
|
||||
:class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
|
||||
>
|
||||
<label class="max-w-xs mb-10 form-control">
|
||||
<!-- 向上向下 -->
|
||||
<div class="flex flex-col items-center gap-2 pt-5">
|
||||
<svg-icon
|
||||
class="cursor-pointer hover:text-blue-400"
|
||||
:class="prizeList.indexOf(item) === 0 ? 'opacity-0 cursor-default' : ''" name="up"
|
||||
@click="sort(item, 1)"
|
||||
/>
|
||||
<svg-icon
|
||||
class="cursor-pointer hover:text-blue-400" name="down" :class="prizeList.indexOf(item) === prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"
|
||||
@click="sort(item, 0)"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.prizeName') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="item.name" type="text" :placeholder="t('placeHolder.name')"
|
||||
class="w-full max-w-xs input-sm input input-bordered"
|
||||
>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.fullParticipation') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="item.isAll" class="mt-2 border-solid checkbox checkbox-secondary border-1"
|
||||
@change="item.isAll = !item.isAll"
|
||||
>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.numberParticipants') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="item.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="w-full max-w-xs p-0 m-0 input-sm input input-bordered"
|
||||
@change="changePrizePerson(item)"
|
||||
>
|
||||
<div class="tooltip tooltip-bottom" :data-tip="`${t('table.isDone') + item.isUsedCount}/${item.count}`">
|
||||
<progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-1/2 max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.isDone') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="item.isUsed" class="mt-2 border-solid checkbox checkbox-secondary border-1"
|
||||
@change="changePrizeStatus(item)"
|
||||
>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.image') }}</span>
|
||||
</div>
|
||||
<select v-model="item.picture" class="w-full max-w-xs select select-warning select-sm">
|
||||
<option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
|
||||
<option disabled selected>{{ t('table.selectPicture') }}</option>
|
||||
<option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label v-if="item.separateCount" class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.onceNumber') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-start w-full h-full" @click="selectPrize(item)">
|
||||
<ul
|
||||
v-if="item.separateCount.countList.length"
|
||||
class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
|
||||
>
|
||||
<li
|
||||
v-for="se in item.separateCount.countList"
|
||||
:key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full tooltip"
|
||||
:data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 z-50 h-full bg-blue-300/80"
|
||||
:style="`width:${se.isUsedCount * 100 / se.count}%`"
|
||||
/>
|
||||
<span>{{ se.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.operation') }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-error btn-sm" @click="delItem(item)">{{ t('button.delete') }}</button>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<EditSeparateDialog
|
||||
:total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
|
||||
@submit-data="submitData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,26 +1,27 @@
|
||||
<script setup lang='ts'>
|
||||
import {ref,onMounted} from 'vue'
|
||||
import markdownit from 'markdown-it'
|
||||
import i18n from '@/locales/i18n'
|
||||
import markdownit from 'markdown-it'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const md = markdownit()
|
||||
const readmeHtml=ref('')
|
||||
const readMd=()=>{
|
||||
fetch('/log-lottery/'+i18n.global.t('data.readmeName'))
|
||||
.then(res=>res.text())
|
||||
.then(res=>{
|
||||
readmeHtml.value = md.render(res)
|
||||
const readmeHtml = ref('')
|
||||
function readMd() {
|
||||
fetch(`/log-lottery/${i18n.global.t('data.readmeName')}`)
|
||||
.then(res => res.text())
|
||||
.then((res) => {
|
||||
readmeHtml.value = md.render(res)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
readMd()
|
||||
readMd()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-3/4 mb-10 ml-3">
|
||||
<div class="markdown-body" v-dompurify-html="readmeHtml"></div>
|
||||
</div>
|
||||
<div class="w-3/4 mb-10 ml-3">
|
||||
<div v-dompurify-html="readmeHtml" class="markdown-body" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,91 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { configRoutes } from '../../router';
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { configRoutes } from '../../router'
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const menuList = ref<any[]>(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--;
|
||||
}
|
||||
function 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;
|
||||
return newList
|
||||
}
|
||||
|
||||
menuList.value = cleanMenuList(menuList.value);
|
||||
menuList.value = cleanMenuList(menuList.value)
|
||||
|
||||
const skip = (path: string) => {
|
||||
router.push(path);
|
||||
function skip(path: string) {
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-[calc(100%-280px)]">
|
||||
<ul class="w-56 m-0 mr-3 menu bg-base-200 pt-14">
|
||||
<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)"
|
||||
:style="subSubItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
|
||||
subSubItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<a v-else @click="skip(subItem.path)"
|
||||
:style="subItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
|
||||
subItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<a v-else @click="skip(item.path)"
|
||||
:style="item.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{ item.meta!.title }}</a>
|
||||
<div class="flex min-h-[calc(100%-280px)]">
|
||||
<ul class="w-56 m-0 mr-3 menu bg-base-200 pt-14">
|
||||
<li v-for="item in menuList" :key="item.name">
|
||||
<details v-if="item.children" open>
|
||||
<summary>{{ item.meta.title }}</summary>
|
||||
<ul>
|
||||
<li v-for="subItem in item.children" :key="subItem.name">
|
||||
<details v-if="subItem.children" open>
|
||||
<summary>{{ subItem.meta!.title }}</summary>
|
||||
<ul>
|
||||
<li v-for="subSubItem in subItem.children" :key="subSubItem.name">
|
||||
<a
|
||||
:style="subSubItem.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
|
||||
@click="skip(subItem.path)"
|
||||
>{{
|
||||
subSubItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<a
|
||||
v-else :style="subItem.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
|
||||
@click="skip(subItem.path)"
|
||||
>{{
|
||||
subItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-view class="mt-5"></router-view>
|
||||
</div>
|
||||
<footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
|
||||
<nav class="grid grid-flow-col gap-4">
|
||||
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.self-reflection') }}</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.thiefEasy') }}</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://github.com/LOG1997/log-lottery" target="_blank" class="cursor-pointer text-inherit">
|
||||
<svg-icon name="github"></svg-icon>
|
||||
</a>
|
||||
<a href="https://twitter.com/TaborSwift" target="_blank" class="cursor-pointer "><svg-icon name="twitter"></svg-icon></a>
|
||||
<a href="https://www.instagram.com/log.z1997/" target="_blank" class="cursor-pointer ">
|
||||
<svg-icon name="instagram"></svg-icon>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<aside>
|
||||
|
||||
<p class="p-0 m-0">蜀ICP备2021028666号</p>
|
||||
<p>Copyright © 2024 - All right reserved by Log1997</p>
|
||||
</aside>
|
||||
</footer>
|
||||
</ul>
|
||||
</details>
|
||||
<a
|
||||
v-else :style="item.name === route.name ? 'background-color:rgba(12,12,12,0.2)' : ''"
|
||||
@click="skip(item.path)"
|
||||
>{{ item.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-view class="mt-5" />
|
||||
</div>
|
||||
<footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
|
||||
<nav class="grid grid-flow-col gap-4">
|
||||
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.self-reflection') }}</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.thiefEasy') }}</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://github.com/LOG1997/log-lottery" target="_blank" class="cursor-pointer text-inherit">
|
||||
<svg-icon name="github" />
|
||||
</a>
|
||||
<a href="https://twitter.com/TaborSwift" target="_blank" class="cursor-pointer "><svg-icon name="twitter" /></a>
|
||||
<a href="https://www.instagram.com/log.z1997/" target="_blank" class="cursor-pointer ">
|
||||
<svg-icon name="instagram" />
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<aside>
|
||||
<p class="p-0 m-0">
|
||||
蜀ICP备2021028666号
|
||||
</p>
|
||||
<p>Copyright © 2024 - All right reserved by Log1997</p>
|
||||
</aside>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button class="btn btn-error">打印</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-error">
|
||||
打印
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import useStore from '@/store'
|
||||
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import type { IPrizeConfig } from '../../types/storeType'
|
||||
import defaultPrizeImage from '@/assets/images/龙.png'
|
||||
import { IPrizeConfig } from '../../types/storeType';
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
|
||||
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
|
||||
|
||||
import i18n from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const globalConfig = useStore().globalConfig
|
||||
const system = useStore().system
|
||||
@@ -22,245 +25,296 @@ const prizeListContainerRef = ref()
|
||||
const temporaryPrizeRef = ref()
|
||||
const selectedPrize = ref<IPrizeConfig | null>()
|
||||
// 获取prizeListRef高度
|
||||
const getPrizeListHeight = () => {
|
||||
let height = 200;
|
||||
if (prizeListRef.value) {
|
||||
height = (prizeListRef.value as HTMLElement).offsetHeight
|
||||
}
|
||||
function getPrizeListHeight() {
|
||||
let height = 200
|
||||
if (prizeListRef.value) {
|
||||
height = (prizeListRef.value as HTMLElement).offsetHeight
|
||||
}
|
||||
|
||||
return height
|
||||
return height
|
||||
}
|
||||
const prizeShow = ref(structuredClone(isShowPrizeList.value))
|
||||
|
||||
const addTemporaryPrize = () => {
|
||||
temporaryPrizeRef.value.showModal()
|
||||
function addTemporaryPrize() {
|
||||
temporaryPrizeRef.value.showModal()
|
||||
}
|
||||
|
||||
const deleteTemporaryPrize = () => {
|
||||
temporaryPrize.value.isShow = false
|
||||
prizeConfig.setTemporaryPrize(temporaryPrize.value)
|
||||
function deleteTemporaryPrize() {
|
||||
temporaryPrize.value.isShow = false
|
||||
prizeConfig.setTemporaryPrize(temporaryPrize.value)
|
||||
}
|
||||
const submitTemporaryPrize = () => {
|
||||
if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
|
||||
alert(i18n.global.t('error.completeInformation'))
|
||||
function submitTemporaryPrize() {
|
||||
if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert(i18n.global.t('error.completeInformation'))
|
||||
return
|
||||
}
|
||||
temporaryPrize.value.isShow = true
|
||||
temporaryPrize.value.id = new Date().getTime().toString()
|
||||
prizeConfig.setCurrentPrize(temporaryPrize.value)
|
||||
}
|
||||
function selectPrize(item: IPrizeConfig) {
|
||||
selectedPrize.value = item
|
||||
selectedPrize.value.isUsedCount = 0
|
||||
selectedPrize.value.isUsed = false
|
||||
|
||||
return
|
||||
}
|
||||
temporaryPrize.value.isShow = true
|
||||
temporaryPrize.value.id=new Date().getTime().toString()
|
||||
prizeConfig.setCurrentPrize(temporaryPrize.value)
|
||||
if (selectedPrize.value.separateCount.countList.length > 1) {
|
||||
return
|
||||
}
|
||||
selectedPrize.value.separateCount = {
|
||||
enable: true,
|
||||
countList: [
|
||||
{
|
||||
id: '0',
|
||||
count: item.count,
|
||||
isUsedCount: 0,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
const selectPrize = (item: IPrizeConfig) => {
|
||||
selectedPrize.value = item
|
||||
selectedPrize.value.isUsedCount = 0
|
||||
selectedPrize.value.isUsed = false
|
||||
function submitData(value: any) {
|
||||
selectedPrize.value!.separateCount.countList = value
|
||||
selectedPrize.value = null
|
||||
}
|
||||
function changePersonCount() {
|
||||
temporaryPrize.value.separateCount.countList = []
|
||||
}
|
||||
function setCurrentPrize() {
|
||||
for (let i = 0; i < localPrizeList.value.length; i++) {
|
||||
if (localPrizeList.value[i].isUsedCount < localPrizeList.value[i].count) {
|
||||
prizeConfig.setCurrentPrize(localPrizeList.value[i])
|
||||
|
||||
if (selectedPrize.value.separateCount.countList.length > 1) {
|
||||
return
|
||||
return
|
||||
}
|
||||
selectedPrize.value.separateCount = {
|
||||
enable: true,
|
||||
countList: [
|
||||
{
|
||||
id: '0',
|
||||
count: item.count,
|
||||
isUsedCount: 0,
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const submitData = (value: any) => {
|
||||
selectedPrize.value!.separateCount.countList = value;
|
||||
selectedPrize.value = null
|
||||
}
|
||||
const changePersonCount=()=>{
|
||||
temporaryPrize.value.separateCount.countList=[]
|
||||
}
|
||||
const setCurrentPrize=()=>{
|
||||
for(let i=0;i<localPrizeList.value.length;i++){
|
||||
if(localPrizeList.value[i].isUsedCount<localPrizeList.value[i].count){
|
||||
prizeConfig.setCurrentPrize(localPrizeList.value[i])
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'
|
||||
setCurrentPrize()
|
||||
prizeListContainerRef.value.style.height = `${getPrizeListHeight()}px`
|
||||
setCurrentPrize()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">{{$t('dialog.titleTemporary')}}</h3>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.name')}}:</span>
|
||||
</div>
|
||||
<input type="text" v-model="temporaryPrize.name" :placeholder="$t('placeHolder.name')"
|
||||
class="max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.fullParticipation')}}</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="temporaryPrize.isAll"
|
||||
@change="temporaryPrize.isAll = !temporaryPrize.isAll"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.setLuckyNumber')}}</span>
|
||||
</div>
|
||||
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" :placeholder="$t('placeHolder.winnerCount')"
|
||||
class="max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.luckyPeopleNumber')}}</span>
|
||||
</div>
|
||||
<input disabled type="number" v-model="temporaryPrize.isUsedCount" :placeholder="$t('placeHolder.winnerCount')"
|
||||
class="max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.onceNumber ')}}</span>
|
||||
</div>
|
||||
<div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
|
||||
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
|
||||
v-if="temporaryPrize.separateCount.countList.length">
|
||||
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
|
||||
v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
|
||||
<div class="flex items-center justify-center w-full h-full tooltip"
|
||||
:data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
|
||||
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
|
||||
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
|
||||
<span>{{ se.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-else class="btn btn-secondary btn-xs">{{$t('button.setting')}}</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{$t('table.image')}}</span>
|
||||
</div>
|
||||
<select class="flex-1 w-12 select select-warning select-sm" v-model="temporaryPrize.picture">
|
||||
<option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
|
||||
</option>
|
||||
<option disabled selected>{{$t('table.selectPicture')}}</option>
|
||||
<option class="w-auto" v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{
|
||||
picItem.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<button class="btn btn-sm" @click="submitTemporaryPrize">{{ $t('button.confirm') }}</button>
|
||||
<button class="btn btn-sm">{{ $t('button.cancel') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTemporary') }}
|
||||
</h3>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.name') }}:</span>
|
||||
</div>
|
||||
</dialog>
|
||||
<EditSeparateDialog :totalNumber="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
|
||||
@submitData="submitData" />
|
||||
<div ref="prizeListContainerRef">
|
||||
<div class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''" v-if="temporaryPrize.isShow">
|
||||
<div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
|
||||
<div v-if="temporaryPrize.isUsed"
|
||||
class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
|
||||
<figure class="w-10 h-10 rounded-xl">
|
||||
<ImageSync v-if="temporaryPrize.picture.url" :imgItem="temporaryPrize.picture"></ImageSync>
|
||||
<img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl" />
|
||||
</figure>
|
||||
<div class="items-center p-0 text-center card-body">
|
||||
<div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
|
||||
<h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">{{
|
||||
temporaryPrize.name }}</h2>
|
||||
</div>
|
||||
<p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">{{ temporaryPrize.isUsedCount }}/{{
|
||||
temporaryPrize.count }}</p>
|
||||
<progress class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
|
||||
:max="temporaryPrize.count"></progress>
|
||||
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 mr-2">
|
||||
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.edit')">
|
||||
<div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
|
||||
<svg-icon name="edit"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.delete')">
|
||||
<div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
|
||||
<svg-icon name="delete"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input
|
||||
v-model="temporaryPrize.name" type="text" :placeholder="t('placeHolder.name')"
|
||||
class="max-w-xs input-sm input input-bordered"
|
||||
>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.fullParticipation') }}</span>
|
||||
</div>
|
||||
<transition name="prize-list" :appear="true">
|
||||
<div v-if="prizeShow && !isMobile && !temporaryPrize.isShow" class="flex items-center">
|
||||
<ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
|
||||
<li v-for="item in localPrizeList" :key="item.id"
|
||||
:class="currentPrize.id == item.id ? 'current-prize' : ''">
|
||||
<div class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
|
||||
v-if="item.isShow">
|
||||
<div v-if="item.isUsed"
|
||||
class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
|
||||
<figure class="w-10 h-10 rounded-xl">
|
||||
<ImageSync v-if="item.picture.url" :imgItem="item.picture"></ImageSync>
|
||||
<img v-else :src="defaultPrizeImage" alt="Prize"
|
||||
class="object-cover h-full rounded-xl" />
|
||||
</figure>
|
||||
<div class="items-center p-0 text-center card-body">
|
||||
<div class="tooltip tooltip-left" :data-tip="item.name">
|
||||
<h2
|
||||
class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis">
|
||||
{{ item.name }}</h2>
|
||||
</div>
|
||||
<p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">{{ item.isUsedCount }}/{{
|
||||
item.count }}</p>
|
||||
<progress class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
|
||||
:max="item.count"></progress>
|
||||
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')">
|
||||
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow">
|
||||
<svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.addActivity')">
|
||||
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="addTemporaryPrize">
|
||||
<svg-icon name="add" class="w-full h-full"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<input
|
||||
type="checkbox" :checked="temporaryPrize.isAll"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1"
|
||||
@change="temporaryPrize.isAll = !temporaryPrize.isAll"
|
||||
>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.setLuckyNumber') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="temporaryPrize.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="max-w-xs input-sm input input-bordered"
|
||||
@change="changePersonCount"
|
||||
>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.luckyPeopleNumber') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="temporaryPrize.isUsedCount" disabled type="number" :placeholder="t('placeHolder.winnerCount')"
|
||||
class="max-w-xs input-sm input input-bordered"
|
||||
>
|
||||
</label>
|
||||
<label v-if="temporaryPrize.separateCount" class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.onceNumber') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
|
||||
<ul
|
||||
v-if="temporaryPrize.separateCount.countList.length"
|
||||
class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
|
||||
>
|
||||
<li
|
||||
v-for="se in temporaryPrize.separateCount.countList"
|
||||
:key="se.id" class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center w-full h-full tooltip"
|
||||
:data-tip="`${t('tooltip.doneCount') + se.isUsedCount}/${se.count}`"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 z-50 h-full bg-blue-300/80"
|
||||
:style="`width:${se.isUsedCount * 100 / se.count}%`"
|
||||
/>
|
||||
<span>{{ se.count }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex w-full max-w-xs">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.image') }}</span>
|
||||
</div>
|
||||
<select v-model="temporaryPrize.picture" class="flex-1 w-12 select select-warning select-sm">
|
||||
<option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
|
||||
</option>
|
||||
<option disabled selected>{{ t('table.selectPicture') }}</option>
|
||||
<option v-for="picItem in localImageList" :key="picItem.id" class="w-auto" :value="picItem">{{
|
||||
picItem.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<transition name="prize-operate" :appear="true">
|
||||
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')" v-show="!prizeShow">
|
||||
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow">
|
||||
<svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<button class="btn btn-sm" @click="submitTemporaryPrize">
|
||||
{{ t('button.confirm') }}
|
||||
</button>
|
||||
<button class="btn btn-sm">
|
||||
{{ t('button.cancel') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<EditSeparateDialog
|
||||
:total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
|
||||
@submit-data="submitData"
|
||||
/>
|
||||
<div ref="prizeListContainerRef">
|
||||
<div v-if="temporaryPrize.isShow" class="h-20 w-72" :class="temporaryPrize.isShow ? 'current-prize' : ''">
|
||||
<div class="relative flex flex-row items-center justify-between w-full h-full shadow-xl card bg-base-100">
|
||||
<div
|
||||
v-if="temporaryPrize.isUsed"
|
||||
class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
|
||||
/>
|
||||
<figure class="w-10 h-10 rounded-xl">
|
||||
<ImageSync v-if="temporaryPrize.picture.url" :img-item="temporaryPrize.picture" />
|
||||
<img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
|
||||
</figure>
|
||||
<div class="items-center p-0 text-center card-body">
|
||||
<div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
|
||||
<h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
|
||||
{{
|
||||
temporaryPrize.name }}
|
||||
</h2>
|
||||
</div>
|
||||
</transition>
|
||||
<p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
|
||||
{{ temporaryPrize.isUsedCount }}/{{
|
||||
temporaryPrize.count }}
|
||||
</p>
|
||||
<progress
|
||||
class="w-3/4 h-6 progress progress-primary" :value="temporaryPrize.isUsedCount"
|
||||
:max="temporaryPrize.count"
|
||||
/>
|
||||
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 mr-2">
|
||||
<div class="tooltip tooltip-left" :data-tip="t('tooltip.edit')">
|
||||
<div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
|
||||
<svg-icon name="edit" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip tooltip-left" :data-tip="t('tooltip.delete')">
|
||||
<div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
|
||||
<svg-icon name="delete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="prize-list" :appear="true">
|
||||
<div v-if="prizeShow && !isMobile && !temporaryPrize.isShow" class="flex items-center">
|
||||
<ul ref="prizeListRef" class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50">
|
||||
<li
|
||||
v-for="item in localPrizeList" :key="item.id"
|
||||
:class="currentPrize.id === item.id ? 'current-prize' : ''"
|
||||
>
|
||||
<div
|
||||
v-if="item.isShow"
|
||||
class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
|
||||
>
|
||||
<div
|
||||
v-if="item.isUsed"
|
||||
class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"
|
||||
/>
|
||||
<figure class="w-10 h-10 rounded-xl">
|
||||
<ImageSync v-if="item.picture.url" :img-item="item.picture" />
|
||||
<img
|
||||
v-else :src="defaultPrizeImage" alt="Prize"
|
||||
class="object-cover h-full rounded-xl"
|
||||
>
|
||||
</figure>
|
||||
<div class="items-center p-0 text-center card-body">
|
||||
<div class="tooltip tooltip-left" :data-tip="item.name">
|
||||
<h2
|
||||
class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ item.name }}
|
||||
</h2>
|
||||
</div>
|
||||
<p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
|
||||
{{ item.isUsedCount }}/{{
|
||||
item.count }}
|
||||
</p>
|
||||
<progress
|
||||
class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
|
||||
:max="item.count"
|
||||
/>
|
||||
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
|
||||
<div
|
||||
class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow"
|
||||
>
|
||||
<svg-icon name="arrow_left" class="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip tooltip-right" :data-tip="t('tooltip.addActivity')">
|
||||
<div
|
||||
class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="addTemporaryPrize"
|
||||
>
|
||||
<svg-icon name="add" class="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<transition name="prize-operate" :appear="true">
|
||||
<div v-show="!prizeShow" class="tooltip tooltip-right" :data-tip="t('tooltip.prizeList')">
|
||||
<div
|
||||
class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
|
||||
@click="prizeShow = !prizeShow"
|
||||
>
|
||||
<svg-icon name="arrow_right" class="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@@ -312,7 +366,6 @@ onMounted(() => {
|
||||
translate: 0% 0%;
|
||||
}
|
||||
|
||||
|
||||
.current-prize::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -402,4 +455,5 @@ onMounted(() => {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user