This commit is contained in:
Xuan Loi
2025-12-05 17:53:49 +07:00
commit 56f3509d4d
187 changed files with 30840 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
<template>
<div>
<p v-html="content"></p>
<p class="border-bottom mt-3 mb-5"></p>
<div class="field is-grouped">
<div class="control is-expanded">
<button class="button is-primary" @click="confirm()">Confirm</button>
<button class="button is-dark ml-5" @click="cancel()">Cancel</button>
</div>
<div class="control" v-if="duration">
<CountDown v-bind="{duration: duration}"></CountDown>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'duration'],
methods: {
cancel() {
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
this.$emit('close')
},
confirm() {
let data = {action: 'confirm', time: new Date()}
this.$store.commit('updateStore', {name: 'action', data: data})
this.$emit('modalevent', {name: 'confirm'})
this.cancel()
}
}
}
</script>

View File

@@ -0,0 +1,76 @@
<template>
<div id="countdown">
<div id="countdown-number"></div>
<svg><circle r="18" cx="20" cy="20" color="red"></circle></svg>
</div>
</template>
<script>
export default {
props: ['duration'],
data() {
return {
timer: undefined,
countdown: this.duration || 10
}
},
mounted() {
var countdownNumberEl = document.getElementById('countdown-number')
countdownNumberEl.textContent = this.countdown;
this.timer = setInterval(()=>this.startCount(), 1000)
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
startCount() {
this.countdown -= 1
var countdownNumberEl = document.getElementById('countdown-number')
countdownNumberEl.textContent = this.countdown;
if(this.countdown===0) {
clearInterval(this.timer)
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
}
}
}
}
</script>
<style>
#countdown {
position: relative;
margin: auto;
height: 40px;
width: 40px;
text-align: center;
}
#countdown-number {
color: black;
display: inline-block;
line-height: 40px;
}
svg {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
transform: rotateY(-180deg) rotateZ(-90deg);
}
svg circle {
stroke-dasharray: 113px;
stroke-dashoffset: 0px;
stroke-linecap: round;
stroke-width: 2px;
stroke: black;
fill: none;
animation: countdown 10s linear infinite forwards;
}
@keyframes countdown {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 113px;
}
}
</style>

View File

@@ -0,0 +1,42 @@
<template>
<div>
<p v-html="content"></p>
<p class="border-bottom mt-4 mb-5"></p>
<div class="field is-grouped">
<div class="control is-expanded">
<button class="button is-danger" @click="remove()">Confirm</button>
<button class="button is-dark ml-5" @click="cancel()">Cancel</button>
</div>
<div class="control" v-if="duration">
<CountDown v-bind="{duration: duration}"></CountDown>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'duration', 'vbind'],
methods: {
cancel() {
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
},
async remove() {
let pagename = this.vbind.pagename
let pagedata = this.$store.state[pagename]
let name = pagedata.origin_api.name
let id = this.vbind.row.id
let result = await this.$deleteapi(name, id)
if(result==='error') return
this.$snackbar('The data has been deleted from the system.', undefined, 'Success')
let arr = Array.isArray(id)? id : [{id: id}]
let copy = this.$copy(this.$store.state[pagename].data)
arr.map(x=>{
let index = copy.findIndex(v=>v.id===x.id)
index>=0? this.$delete(copy,index) : false
})
this.$store.commit('updateState', {name: pagename, key: 'update', data: {data: copy}})
this.cancel()
}
}
}
</script>

View File

@@ -0,0 +1,29 @@
<template>
<div>
<div class="field is-grouped">
<div class="control is-expanded pr-3" v-html="content"></div>
<div class="control">
<span class="material-symbols-outlined has-text-danger fs-36">error</span>
</div>
</div>
<p class="border-bottom mt-3 mb-5"></p>
<div class="field is-grouped">
<div class="control is-expanded">
<button class="button is-danger" @click="cancel()">Close</button>
</div>
<div class="control" v-if="duration">
<CountDown v-bind="{duration: duration}"></CountDown>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'duration'],
methods: {
cancel() {
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
}
}
}
</script>

View File

@@ -0,0 +1,24 @@
<template>
<div>
<p v-html="content"></p>
<p class="border-bottom mt-3 mb-5"></p>
<div class="field is-grouped">
<div class="control is-expanded">
<button class="button is-dark" @click="cancel()">Close</button>
</div>
<div class="control" v-if="duration">
<CountDown v-bind="{duration: duration}"></CountDown>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'duration'],
methods: {
cancel() {
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
}
}
}
</script>

View File

@@ -0,0 +1,30 @@
<template>
<div>
<div class="field is-grouped">
<div class="control is-expanded pr-3" v-html="content"></div>
<div class="control">
<span class="material-symbols-outlined has-text-primary fs-36">check_circle</span>
</div>
</div>
<p class="border-bottom mt-3 mb-5"></p>
<div class="field is-grouped">
<div class="control is-expanded">
<button class="button is-primary" @click="cancel()">Close</button>
</div>
<div class="control" v-if="duration">
<CountDown v-bind="{duration: duration}"></CountDown>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'duration'],
methods: {
cancel() {
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
}
}
}
</script>