เพิ่ม ui แสดงผล
This commit is contained in:
Net
parent
ce00f149d3
commit
64039caddc
1 changed files with 107 additions and 39 deletions
|
|
@ -70,9 +70,9 @@ const formDataschedule = ref<ScheduleCreate>({
|
|||
const filter = ref<string>("");
|
||||
const visibleColumns = ref<string[]>([
|
||||
"name",
|
||||
"createAt",
|
||||
"databaseSize",
|
||||
"storageSize",
|
||||
"type",
|
||||
"date",
|
||||
"startAt",
|
||||
"status",
|
||||
]);
|
||||
const baseColumns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -86,23 +86,33 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "createAt",
|
||||
name: "type",
|
||||
align: "center",
|
||||
label: "ตารางการข้อมูลสำรองใหม่",
|
||||
sortable: true,
|
||||
// field: (v) => date2Thai(v, false, true),
|
||||
field: "timestamp",
|
||||
format: (v) => date2Thai(v, false, true),
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "databaseSize",
|
||||
align: "center",
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "เวลาการทำข้อมูลสำรองใหม่",
|
||||
sortable: true,
|
||||
// field: (v) => date2Thai(v, false, true),
|
||||
field: "databaseSize",
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "startAt",
|
||||
align: "left",
|
||||
label: "วันที่เริ่มการสำรองข้อมูล",
|
||||
sortable: true,
|
||||
field: (v) => date2Thai(v, false, true),
|
||||
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -139,7 +149,7 @@ function convertFormToCron() {
|
|||
if (typeTime.value.includes("set")) {
|
||||
formDataschedule.value.schedule = `0 ${time} * * *`;
|
||||
} else {
|
||||
formDataschedule.value.schedule = `0 * 23/${formDataschedule.value.timeStartEvery} * * *`;
|
||||
formDataschedule.value.schedule = `0 0 */${formDataschedule.value.timeStartEvery} * * *`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,8 +160,6 @@ function convertFormToCron() {
|
|||
if (formDataschedule.value.type === "monthly") {
|
||||
formDataschedule.value.schedule = `0 ${time} ${result} * *`;
|
||||
}
|
||||
|
||||
console.log(formDataschedule.value);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -201,6 +209,32 @@ const tabItems = ref<ItemsTeb[]>([
|
|||
{ name: "monthly", label: "ทุกเดือน", icon: "" },
|
||||
]);
|
||||
|
||||
const dayColors: { [key: string]: string } = {
|
||||
monday: "#FFFF00", // Yellow
|
||||
tuesday: "#FF69B4", // Pink
|
||||
wednesday: "#008000", // Green
|
||||
thursday: "#FFA500", // Orange
|
||||
friday: "#0000FF", // Blue
|
||||
saturday: "#800080", // Purple
|
||||
sunday: "#FF0000", // Red
|
||||
};
|
||||
|
||||
const dayNames: { [key: string]: string } = {
|
||||
mon: "จ", // Yellow
|
||||
tue: "อ", // Pink
|
||||
wed: "พ", // Green
|
||||
thu: "พฤ", // Orange
|
||||
fri: "ศ", // Blue
|
||||
sat: "ส", // Purple
|
||||
sun: "อา", // Red
|
||||
};
|
||||
|
||||
const typeSchedule: { [key: string]: string } = {
|
||||
daily: "รายวัน",
|
||||
weekly: "รายสัปดาห์",
|
||||
monthly: "รายเดือน",
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getSchedule();
|
||||
});
|
||||
|
|
@ -261,44 +295,78 @@ onMounted(async () => {
|
|||
<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>
|
||||
{{ col.label }}
|
||||
</q-th>
|
||||
<q-th auto-width></q-th>
|
||||
<q-th></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-td>
|
||||
{{ props.row.name }}
|
||||
</q-td>
|
||||
<q-td class="text-center">
|
||||
<q-badge
|
||||
rounded
|
||||
style="color: #007aff; background: #ededed"
|
||||
:label="typeSchedule[props.row.type]"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<div class="column">
|
||||
<div class="col-6">{{ props.row.time }}</div>
|
||||
|
||||
<q-circular-progress
|
||||
v-if="props.row.status === 'running' && col.name === 'status'"
|
||||
indeterminate
|
||||
rounded
|
||||
size="20px"
|
||||
color="lime"
|
||||
class="q-ma-md"
|
||||
/>
|
||||
<div
|
||||
class="col-6 q-gutter-x-sm"
|
||||
v-if="props.row.type.includes('daily')"
|
||||
>
|
||||
<q-badge
|
||||
rounded
|
||||
style="color: #fefefe; background: #242121"
|
||||
:label="
|
||||
props.row.timeStartEvery !== ''
|
||||
? `ทุก ${props.row.timeStartEvery} ชั่วโมง`
|
||||
: 'ทุกวัน'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-6 q-gutter-x-sm"
|
||||
v-if="props.row.type.includes('weekly')"
|
||||
>
|
||||
<q-badge
|
||||
v-for="(t, i) in props.row.date.split(' ')"
|
||||
rounded
|
||||
:style="`color: #fefefe; background: ${dayColors[t]}`"
|
||||
:label="dayNames[t]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-6 q-gutter-x-sm"
|
||||
v-if="props.row.type.includes('monthly')"
|
||||
>
|
||||
<q-badge
|
||||
v-for="(t, i) in props.row.date.split(' ')"
|
||||
rounded
|
||||
style="color: #fefefe; background: #242121"
|
||||
:label="`ทุกวันที่ ${t}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
{{ date2Thai(props.row.startAt, true, false) }}
|
||||
</q-td>
|
||||
<q-td> <q-toggle size="lg" v-model="props.row.enabled" /> </q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
icon="edit"
|
||||
color="primary"
|
||||
size="12px"
|
||||
@click.petvent="onDelete(props.row.name)"
|
||||
>
|
||||
|
|
@ -310,8 +378,8 @@ onMounted(async () => {
|
|||
flat
|
||||
round
|
||||
:disable="restoreRunTotal !== 0"
|
||||
icon="restore"
|
||||
color="primary"
|
||||
icon="delete"
|
||||
color="red"
|
||||
size="12px"
|
||||
@click.petvent="onRestore(props.row.name)"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue