เพิ่ม form สร้าง schedule
This commit is contained in:
Net
parent
f86a0d70ca
commit
04dc730adc
2 changed files with 315 additions and 0 deletions
46
src/modules/04_system/components/formDialog.vue
Normal file
46
src/modules/04_system/components/formDialog.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
const openDialog = defineModel<boolean>("openDialog", {
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
title: string;
|
||||||
|
submit?: (...args: unknown[]) => void;
|
||||||
|
close?: (...args: unknown[]) => void;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="openDialog" class="dialog-content-top">
|
||||||
|
<q-card style="width: 80%">
|
||||||
|
<q-form
|
||||||
|
greedy
|
||||||
|
@submit.prevent
|
||||||
|
@validation-success="submit"
|
||||||
|
class="full-height"
|
||||||
|
>
|
||||||
|
<!-- header -->
|
||||||
|
<DialogHeader :tittle="title" :close="close" />
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section> <slot /> </q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||||
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||||
|
>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.form-header {
|
||||||
|
border-bottom: 1px solid $grey-2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
269
src/modules/04_system/components/formSchedule .vue
Normal file
269
src/modules/04_system/components/formSchedule .vue
Normal file
|
|
@ -0,0 +1,269 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
const name = defineModel<string>("name");
|
||||||
|
const typeTime = defineModel<string>("typeTime", { default: "set" });
|
||||||
|
const time = defineModel<string>("time");
|
||||||
|
const timeStartEvery = defineModel<string>("timeStartEvery");
|
||||||
|
const startAt = defineModel<string>("startAt");
|
||||||
|
const selectDate = defineModel<string[]>("date", { default: [] });
|
||||||
|
const tab = defineModel<string>("tab");
|
||||||
|
|
||||||
|
const timeStartEveryOptions: { value: string }[] = Array.from(
|
||||||
|
{ length: 24 },
|
||||||
|
(_, i) => ({ value: (i + 1).toString() })
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(typeTime, () => {
|
||||||
|
time.value = "";
|
||||||
|
timeStartEvery.value = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(tab, () => {
|
||||||
|
typeTime.value = "set";
|
||||||
|
time.value = "";
|
||||||
|
timeStartEvery.value = "";
|
||||||
|
selectDate.value = [];
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="row q-col-gutter-md items-center text-grey-8">
|
||||||
|
<div class="col-12">
|
||||||
|
ชื่อของข้อมูลสำรองใหม่
|
||||||
|
<q-input
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
v-model="name"
|
||||||
|
label="ชื่อ Backup"
|
||||||
|
:rules="[(val:string) => val.length <= 30 || 'ชื่อต้องไม่เกิน 16 ตัวอักษร' , (val:string) => /^[A-Za-z0-9\-]+$/.test(val) || 'ชื่อต้องเป็นภาษาอังกฤษ พิมพ์ใหญ่หรือเล็ก และตัวเลขเท่านั้น']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 column" v-if="tab === 'daily'">
|
||||||
|
เริ่มเวลา
|
||||||
|
<div class="col-6 row items-center">
|
||||||
|
<div class="col-3">
|
||||||
|
<q-radio v-model="typeTime" val="set" label="กำหนดเวลา" />
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
v-model="time"
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
type="time"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 row items-center q-pt-sm">
|
||||||
|
<div class="col-3">
|
||||||
|
<q-radio v-model="typeTime" val="start" label="เริ่มทุก" />
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-select
|
||||||
|
label="เลือก"
|
||||||
|
v-model="timeStartEvery"
|
||||||
|
:options="timeStartEveryOptions"
|
||||||
|
outlined
|
||||||
|
emit-value
|
||||||
|
dense
|
||||||
|
emit-option
|
||||||
|
option-label="value"
|
||||||
|
option-value="value"
|
||||||
|
map-options
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 column" v-if="tab === 'weekly'">
|
||||||
|
<div class="col-12 row">
|
||||||
|
<div>
|
||||||
|
เริ่มเวลา
|
||||||
|
<q-input
|
||||||
|
v-model="time"
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
type="time"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 q-gutter-sm row q-pt-sm">
|
||||||
|
<q-card
|
||||||
|
:class="{
|
||||||
|
'bg-primary text-white': selectDate.includes(v.value),
|
||||||
|
}"
|
||||||
|
style="
|
||||||
|
user-select: none;
|
||||||
|
transition: 100ms background-color ease-in-out;
|
||||||
|
"
|
||||||
|
v-for="(v, i) in [
|
||||||
|
{
|
||||||
|
value: 'mon',
|
||||||
|
name: 'จันทร์',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'tue',
|
||||||
|
name: 'อังคาร',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'wed',
|
||||||
|
name: 'พุธ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'thu',
|
||||||
|
name: 'พฤหัสบดี',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'fri',
|
||||||
|
name: 'ศุกร์',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'sun',
|
||||||
|
name: 'อาทิตย์',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'sat',
|
||||||
|
name: 'เสาร์',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
flast
|
||||||
|
bordered
|
||||||
|
class="q-pa-sm col text-center cursor-pointer"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
if (!selectDate.includes(v.value)) selectDate.push(v.value);
|
||||||
|
else selectDate.splice(selectDate.indexOf(v.value), 1);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>{{ v.name }}</q-card
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 column" v-if="tab === 'monthly'">
|
||||||
|
<div class="col-12 row">
|
||||||
|
<div>
|
||||||
|
เริ่มเวลา
|
||||||
|
<q-input
|
||||||
|
v-model="time"
|
||||||
|
outlined
|
||||||
|
clearable
|
||||||
|
hide-bottom-space
|
||||||
|
dense
|
||||||
|
type="time"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 q-pt-sm">
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div
|
||||||
|
class="col-2"
|
||||||
|
v-for="(v, i) in Array.from({ length: 31 }, (_, i) => ({
|
||||||
|
value: i + 1,
|
||||||
|
}))"
|
||||||
|
>
|
||||||
|
<q-card
|
||||||
|
:class="{
|
||||||
|
'bg-primary text-white': selectDate.includes(
|
||||||
|
v.value.toString()
|
||||||
|
),
|
||||||
|
}"
|
||||||
|
style="
|
||||||
|
user-select: none;
|
||||||
|
transition: 100ms background-color ease-in-out;
|
||||||
|
"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
class="text-center q-px-md q-py-sm cursor-pointer"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
if (!selectDate.includes(v.value.toString()))
|
||||||
|
selectDate.push(v.value.toString());
|
||||||
|
else
|
||||||
|
selectDate.splice(
|
||||||
|
selectDate.indexOf(v.value.toString()),
|
||||||
|
1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>{{ v.value }}</q-card
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-6 column">
|
||||||
|
วันที่เริ่มการสำรองข้อมูล
|
||||||
|
|
||||||
|
<q-input outlined clearable hide-bottom-space dense v-model="startAt">
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="event" class="cursor-pointer">
|
||||||
|
<q-popup-proxy
|
||||||
|
cover
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
>
|
||||||
|
<q-date v-model="startAt" mask="YYYY-MM-DD HH:mm">
|
||||||
|
<div class="row items-center justify-end">
|
||||||
|
<q-btn v-close-popup label="Close" color="primary" flat />
|
||||||
|
</div>
|
||||||
|
</q-date>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon name="access_time" class="cursor-pointer">
|
||||||
|
<q-popup-proxy
|
||||||
|
cover
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
>
|
||||||
|
<q-time v-model="startAt" mask="YYYY-MM-DD HH:mm" format24h>
|
||||||
|
<div class="row items-center justify-end">
|
||||||
|
<q-btn v-close-popup label="Close" color="primary" flat />
|
||||||
|
</div>
|
||||||
|
</q-time>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
<!--
|
||||||
|
<q-input v-model="startAt" outlined clearable hide-bottom-space dense>
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-btn size="8px" icon="event" round>
|
||||||
|
<q-popup-proxy
|
||||||
|
cover
|
||||||
|
transition-show="scale"
|
||||||
|
transition-hide="scale"
|
||||||
|
>
|
||||||
|
<q-date
|
||||||
|
v-model="startAt"
|
||||||
|
minimal
|
||||||
|
navigation-min-year-month="2024/09"
|
||||||
|
navigation-max-year-month="2024/09"
|
||||||
|
>
|
||||||
|
<div class="row items-center justify-end q-gutter-sm">
|
||||||
|
<q-btn label="Cancel" color="primary" flat v-close-popup />
|
||||||
|
<q-btn label="OK" color="primary" flat v-close-popup />
|
||||||
|
</div>
|
||||||
|
</q-date>
|
||||||
|
</q-popup-proxy>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
</q-input> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue