เพิ่มหน้าแสดง schedule
This commit is contained in:
Net
parent
491103637f
commit
388df9722b
1 changed files with 401 additions and 0 deletions
401
src/modules/04_system/components/cardAutoBackup.vue
Normal file
401
src/modules/04_system/components/cardAutoBackup.vue
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataBackup } from "@/modules/04_system/interface/response/Main";
|
||||
import type { ScheduleCreate } from "@/modules/04_system/interface/request/Main";
|
||||
import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
|
||||
|
||||
/**
|
||||
* import components
|
||||
*/
|
||||
import FormDialog from "@/modules/04_system/components/formDialog.vue";
|
||||
import FormAutoBackup from "@/modules/04_system/components/formAutoBackup.vue";
|
||||
import formSchedule from "./formSchedule .vue";
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/modules/04_system/stores/main";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
|
||||
useCounterMixin();
|
||||
const {
|
||||
fetchListBackup,
|
||||
createBackUp,
|
||||
restore,
|
||||
deleteBackUp,
|
||||
backupRunningList,
|
||||
restoreRunningList,
|
||||
|
||||
getSize,
|
||||
|
||||
getSchedule,
|
||||
createSchedule,
|
||||
editSchedule,
|
||||
deleteSchedule,
|
||||
} = useDataStore();
|
||||
const storeData = useDataStore();
|
||||
const { dataBackUp, restoreRunTotal, dataSchedule } = storeToRefs(storeData);
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
|
||||
/**
|
||||
* ref
|
||||
*/
|
||||
const openDialog = ref<boolean>(false);
|
||||
const formDataschedule = ref<ScheduleCreate>({
|
||||
timeStartEvery: "",
|
||||
|
||||
type: "",
|
||||
date: [],
|
||||
name: "",
|
||||
time: "",
|
||||
schedule: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
const filter = ref<string>("");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"createAt",
|
||||
"databaseSize",
|
||||
"storageSize",
|
||||
"status",
|
||||
]);
|
||||
const baseColumns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อของข้อมูลสำรองใหม่",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "createAt",
|
||||
align: "center",
|
||||
label: "ตารางการข้อมูลสำรองใหม่",
|
||||
sortable: true,
|
||||
// field: (v) => date2Thai(v, false, true),
|
||||
field: "timestamp",
|
||||
format: (v) => date2Thai(v, false, true),
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "databaseSize",
|
||||
align: "center",
|
||||
label: "เวลาการทำข้อมูลสำรองใหม่",
|
||||
sortable: true,
|
||||
// field: (v) => date2Thai(v, false, true),
|
||||
field: "databaseSize",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "center",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columns = computed(() => {
|
||||
return baseColumns.value;
|
||||
});
|
||||
|
||||
/**
|
||||
* function submit() เเปลงค่าให้เป็น แบบ cron ก่อนส่งไปยัง backend
|
||||
*
|
||||
*/
|
||||
function convertFormToCron() {
|
||||
let allValues = formDataschedule.value.date.join(" ").split(" ");
|
||||
|
||||
let uniqueValues = [...new Set(allValues)];
|
||||
|
||||
let result = uniqueValues.join(",");
|
||||
|
||||
let [hour, minute] = formDataschedule.value.time.split(":");
|
||||
|
||||
let time = `${minute} ${hour}`;
|
||||
|
||||
if (formDataschedule.value.type === "daily") {
|
||||
if (typeTime.value.includes("set")) {
|
||||
formDataschedule.value.schedule = `0 ${time} * * *`;
|
||||
} else {
|
||||
formDataschedule.value.schedule = `0 * 23/${formDataschedule.value.timeStartEvery} * * *`;
|
||||
}
|
||||
}
|
||||
|
||||
if (formDataschedule.value.type === "weekly") {
|
||||
formDataschedule.value.schedule = `0 ${time} * * ${result}`;
|
||||
}
|
||||
|
||||
if (formDataschedule.value.type === "monthly") {
|
||||
formDataschedule.value.schedule = `0 ${time} ${result} * *`;
|
||||
}
|
||||
|
||||
console.log(formDataschedule.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* function submit() ตั้งเวลา backup
|
||||
*
|
||||
*/
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
await createSchedule(formDataschedule.value);
|
||||
getSchedule();
|
||||
hideLoader();
|
||||
}
|
||||
|
||||
/**
|
||||
* function ลบรายการข้อมูลสำรอง
|
||||
* @param id รายการสำรอง
|
||||
*/
|
||||
function onDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
deleteBackUp(id);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function คืนค่าข้อมูลสำรอง
|
||||
* @param id ข้อมูลสำรอง
|
||||
*/
|
||||
function onRestore(id: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await restore(id);
|
||||
},
|
||||
"ยืนยันการคืนค่าข้อมูลสำรอง",
|
||||
"ต้องการยืนยันการคืนค่าข้อมูลสำรองนี้ใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
const dateStart = ref<string>("");
|
||||
const typeTime = ref<string>("");
|
||||
const timeStartEvery = ref<number>();
|
||||
const tab = ref("daily");
|
||||
const tabItems = ref<ItemsTeb[]>([
|
||||
{ name: "daily", label: "ทุกวัน", icon: "" },
|
||||
{ name: "weekly", label: "ทุกสัปดาห์", icon: "" },
|
||||
{ name: "monthly", label: "ทุกเดือน", icon: "" },
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
getSchedule();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="items-center col-12 row q-gutter-x-sm q-mb-sm">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="add"
|
||||
label="ตั้งเวลาสำรองข้อมูล"
|
||||
@click="
|
||||
() => {
|
||||
openDialog = true;
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-tooltip>ตั้งเวลาสำรองข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
borderless
|
||||
dense
|
||||
debounce="300"
|
||||
outlined
|
||||
v-model="filter"
|
||||
placeholder="ค้นหา"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
:options="columns"
|
||||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
:rows="dataSchedule"
|
||||
:columns="columns"
|
||||
row-key="name"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="(col, i) in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" :class="{ 'q-ml-md': i === 2 }">{{
|
||||
col.label
|
||||
}}</span>
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="(col, i) in props.cols" :key="col.name" :props="props">
|
||||
<div :class="{ 'text-center': i === 4 }">
|
||||
{{
|
||||
i !== 4 && i !== 2 && i !== 3
|
||||
? col.value
|
||||
: col.value === "สำเร็จ"
|
||||
? "สำเร็จ"
|
||||
: i === 2 || i === 3
|
||||
? getSize(col.value)
|
||||
: ""
|
||||
}}
|
||||
|
||||
<q-circular-progress
|
||||
v-if="props.row.status === 'running' && col.name === 'status'"
|
||||
indeterminate
|
||||
rounded
|
||||
size="20px"
|
||||
color="lime"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
size="12px"
|
||||
@click.petvent="onDelete(props.row.name)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูลสำรอง </q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="restoreRunTotal !== 0"
|
||||
icon="restore"
|
||||
color="primary"
|
||||
size="12px"
|
||||
@click.petvent="onRestore(props.row.name)"
|
||||
>
|
||||
<q-tooltip>คืนค่า </q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</q-card-section>
|
||||
|
||||
<FormDialog
|
||||
v-model:openDialog="openDialog"
|
||||
title="สร้างข้อมูลสำรองใหม่ ตั้งตารางเวลา"
|
||||
class="bbbb"
|
||||
:close="() => (openDialog = false)"
|
||||
:submit="
|
||||
() => {
|
||||
formDataschedule.type = tab;
|
||||
|
||||
if (formDataschedule.startAt !== undefined) {
|
||||
formDataschedule.startAt = new Date(
|
||||
formDataschedule.startAt
|
||||
).toISOString();
|
||||
}
|
||||
convertFormToCron();
|
||||
|
||||
onSubmit();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-card flast bordered>
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="bg-white text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<div v-for="item in tabItems">
|
||||
<q-tab :name="item.name" :label="item.label" />
|
||||
</div>
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
|
||||
<div class="q-pa-sm">
|
||||
<formSchedule
|
||||
v-model:name="formDataschedule.name"
|
||||
v-model:type-time="typeTime"
|
||||
v-model:time="formDataschedule.time"
|
||||
v-model:time-start-every="formDataschedule.timeStartEvery"
|
||||
v-model:start-at="formDataschedule.startAt"
|
||||
v-model:date="formDataschedule.date"
|
||||
v-model:tab="tab"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
|
||||
<q-tab-panel name="daily">
|
||||
<FormDaily />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="weekly">
|
||||
<FormWeekly />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="monthly">
|
||||
<q-card-section class="q-pa-none">
|
||||
<div class="text-h6">คืนค่า</div>
|
||||
</q-card-section>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels> -->
|
||||
</q-card>
|
||||
|
||||
<!-- <FormAutoBackup
|
||||
v-model:nameBackup="formDataschedule.name"
|
||||
v-model:typeBackup="formDataschedule.type"
|
||||
v-model:dateList="formDataschedule.date"
|
||||
v-model:time="formDataschedule.time"
|
||||
/> -->
|
||||
</FormDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue