112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
<script setup lang='ts'>
|
|
import type { Separate } from '@/types/storeType'
|
|
import { onMounted, ref, toRefs, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const props = defineProps({
|
|
totalNumber: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
separatedNumber: {
|
|
type: Array<Separate>,
|
|
default: [],
|
|
},
|
|
})
|
|
const emits = defineEmits(['submitData'])
|
|
const { t } = useI18n()
|
|
const separatedNumberRef = ref()
|
|
const { separatedNumber, totalNumber } = toRefs(props)
|
|
const scaleList = ref<number[]>([])
|
|
function editScale(item: number) {
|
|
if (item === totalNumber.value) {
|
|
return
|
|
}
|
|
if (scaleList.value.includes(item)) {
|
|
const index = scaleList.value.indexOf(item)
|
|
scaleList.value.splice(index, 1)
|
|
separatedNumber.value.splice(index, 1)
|
|
}
|
|
else {
|
|
scaleList.value.push(item)
|
|
scaleList.value.sort((a, b) => a - b)
|
|
}
|
|
}
|
|
function clearData() {
|
|
emits('submitData', separatedNumber.value)
|
|
separatedNumberRef.value.close()
|
|
}
|
|
watch(scaleList, (val: number[]) => {
|
|
separatedNumber.value.length = 0
|
|
for (let i = 1; i < scaleList.value.length; i++) {
|
|
separatedNumber.value[i - 1] = {
|
|
id: i.toString(),
|
|
count: val[i] - val[i - 1],
|
|
isUsedCount: 0,
|
|
}
|
|
}
|
|
}, { deep: true })
|
|
|
|
watch(totalNumber, (val) => {
|
|
if (val <= 0) {
|
|
return
|
|
}
|
|
separatedNumberRef.value.showModal()
|
|
// scaleList.value = [0, val]
|
|
scaleList.value = Array.from({ length: separatedNumber.value.length + 1 }).fill(totalNumber.value) as number[]
|
|
for (let i = separatedNumber.value.length - 1; i >= 0; i--) {
|
|
scaleList.value[i] = scaleList.value[i + 1] - separatedNumber.value[i].count
|
|
}
|
|
if (scaleList.value[0] !== 0) {
|
|
scaleList.value.unshift(0)
|
|
}
|
|
})
|
|
onMounted(() => {
|
|
// 阻止esc事件
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault()
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<dialog id="my_modal_1" ref="separatedNumberRef" class="z-50 overflow-hidden border-none modal">
|
|
<div class="overflow-hidden modal-box">
|
|
<h3 class="pb-6 text-lg font-bold">
|
|
{{ t('dialog.titleTip') }}
|
|
</h3>
|
|
<p class="pb-8">
|
|
{{ t('dialog.dialogSingleDrawLimit') }}
|
|
</p>
|
|
<div class="flex justify-between px-3 text-center separated-number">
|
|
<div
|
|
v-for="item in props.totalNumber" :key="item"
|
|
class="relative flex flex-col items-center cursor-pointer"
|
|
>
|
|
<div
|
|
class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="t('tooltip.leftClick')"
|
|
@click.left="editScale(item)"
|
|
>
|
|
<span> {{ item }}</span>
|
|
</div>
|
|
<div class="text-center" :class="scaleList.includes(item) ? 'text-red-500 font-extrabold' : ''">
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-action">
|
|
<form method="dialog">
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<button class="btn" @click="clearData">
|
|
{{ t('button.close') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<style lang='scss' scoped></style>
|