เพิ่ม 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