ปรับ popup history
This commit is contained in:
setthawutttty
parent
9e1386c052
commit
0a4aa8384a
2 changed files with 207 additions and 87 deletions
|
|
@ -3,7 +3,14 @@ import { ref, reactive, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
|
||||||
|
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
|
||||||
|
import { getDateMeta } from "@fullcalendar/core/internal";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modal: Boolean,
|
modal: Boolean,
|
||||||
|
|
@ -12,102 +19,193 @@ const props = defineProps({
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dialogConfirm } = mixin;
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||||
|
const rows = ref<HistoryType[]>([]);
|
||||||
const rows = ref<any[]>([]);
|
|
||||||
|
|
||||||
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ลำดับ",
|
label: "ลำดับ",
|
||||||
sortable: false,
|
sortable: false,
|
||||||
field: "no",
|
field: "no",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "name",
|
name: "orgRevisionName",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "ชื่อ",
|
label: "ชื่อโครงสร้าง",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "name",
|
field: "orgRevisionName",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "lastUpdatedAt",
|
name: "lastUpdatedAt",
|
||||||
align: "left",
|
align: "left",
|
||||||
label: "วันที่แก้ไข",
|
label: "วันที่แก้ไข",
|
||||||
sortable: true,
|
sortable: true,
|
||||||
field: "lastUpdatedAt",
|
field: "lastUpdatedAt",
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
]);
|
name: "orgRevisionIsCurrent",
|
||||||
const visibleColumns = ref<string[]>([
|
align: "center",
|
||||||
"no",
|
label: "โครงสร้างที่ใช้อยู่",
|
||||||
"name",
|
sortable: false,
|
||||||
"lastUpdatedAt",
|
field: "orgRevisionIsCurrent",
|
||||||
]);
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "orgRevisionIsDraft",
|
||||||
|
align: "center",
|
||||||
|
label: "โครงสร้างแบบร่าง",
|
||||||
|
sortable: false,
|
||||||
|
field: "orgRevisionIsDraft",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "orgRevisionCreatedAt",
|
||||||
|
align: "left",
|
||||||
|
label: "วันเริ่มใช้โครงสร้าง",
|
||||||
|
sortable: true,
|
||||||
|
field: "orgRevisionCreatedAt",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const visibleColumns = ref<string[]>([
|
||||||
|
"no",
|
||||||
|
"orgRevisionName",
|
||||||
|
"orgRevisionIsCurrent",
|
||||||
|
"orgRevisionIsDraft",
|
||||||
|
"orgRevisionCreatedAt",
|
||||||
|
]);
|
||||||
|
|
||||||
|
function getDate() {
|
||||||
|
const dataDraft: HistoryType[] = [
|
||||||
|
{
|
||||||
|
orgRevisionId: "00000000-0000-0000-0000-000000000000",
|
||||||
|
orgRevisionName: "xxxx",
|
||||||
|
orgRevisionIsCurrent: true,
|
||||||
|
orgRevisionIsDraft: false,
|
||||||
|
orgRevisionCreatedAt: date2Thai(new Date(),false,true),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orgRevisionId: "00000000-0000-0000-0000-000000000001",
|
||||||
|
orgRevisionName: "xxx1",
|
||||||
|
orgRevisionIsCurrent: false,
|
||||||
|
orgRevisionIsDraft: true,
|
||||||
|
orgRevisionCreatedAt: date2Thai(new Date(),false,true),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
rows.value = dataDraft;
|
||||||
|
// รอ API
|
||||||
|
// showLoader()
|
||||||
|
// http
|
||||||
|
// .get(config.API.organizationHistoryNew)
|
||||||
|
// .then((res)=>{
|
||||||
|
// const dataList = res.data.result
|
||||||
|
// dataList.map((item:HistoryType)=>(
|
||||||
|
// {
|
||||||
|
// orgRevisionId:item.orgRevisionId ? item.orgRevisionId:'-',
|
||||||
|
// orgRevisionName:item.orgRevisionName ? item.orgRevisionName:'-',
|
||||||
|
// orgRevisionIsCurrent:item.orgRevisionIsCurrent ? item.orgRevisionIsCurrent:'-',
|
||||||
|
// orgRevisionIsDraft:item.orgRevisionIsDraft ? item.orgRevisionIsDraft:'-',
|
||||||
|
// orgRevisionCreatedAt:item.orgRevisionCreatedAt ? date2Thai(item.orgRevisionCreatedAt):'-',
|
||||||
|
// }
|
||||||
|
// ))
|
||||||
|
// rows.value = dataList
|
||||||
|
// }).catch((e)=>{
|
||||||
|
// messageError($q,e)
|
||||||
|
// })
|
||||||
|
// .finally(()=>{
|
||||||
|
// hideLoader()
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
watch(
|
||||||
|
() => props.modal,
|
||||||
|
() => {
|
||||||
|
if (props.modal == true) {
|
||||||
|
getDate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="props.modal" persistent>
|
<q-dialog v-model="props.modal" persistent>
|
||||||
<q-card style="min-width: 40vw">
|
<q-card style="min-width: 40vw">
|
||||||
<DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
|
<DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<d-table
|
<d-table
|
||||||
ref="table"
|
ref="table"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:rows="rows"
|
:rows="rows"
|
||||||
row-key="idcard"
|
row-key="idcard"
|
||||||
flat
|
flat
|
||||||
bordered
|
bordered
|
||||||
:paging="true"
|
:paging="true"
|
||||||
dense
|
dense
|
||||||
class="custom-header-table"
|
class="custom-header-table"
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
<q-tr :props="props">
|
<q-tr :props="props">
|
||||||
<q-th
|
<q-th
|
||||||
v-for="col in props.cols"
|
v-for="col in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:props="props"
|
:props="props"
|
||||||
style="color: #000000; font-weight: 500"
|
style="color: #000000; font-weight: 500"
|
||||||
>
|
>
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
</q-th>
|
</q-th>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:body="props">
|
<template v-slot:body="props">
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
<q-td
|
<q-td
|
||||||
v-for="col in props.cols"
|
v-for="col in props.cols"
|
||||||
:key="col.name"
|
:key="col.name"
|
||||||
:props="props"
|
:props="props"
|
||||||
>
|
>
|
||||||
<div v-if="col.name == 'no'">
|
<div v-if="col.name == 'no'">
|
||||||
{{ props.rowIndex + 1 }}
|
{{ props.rowIndex + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
|
||||||
{{ col.value }}
|
<div v-else-if="col.name == 'orgRevisionIsCurrent'">
|
||||||
</div>
|
<q-icon
|
||||||
</q-td>
|
:name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':'mdi-close'"
|
||||||
</q-tr>
|
:color="props.row.orgRevisionIsCurrent == true ? 'positive':'red'"
|
||||||
</template>
|
class="text-h5"
|
||||||
</d-table>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="col.name == 'orgRevisionIsDraft'">
|
||||||
|
<q-icon
|
||||||
|
:name="props.row.orgRevisionIsDraft == true ? 'mdi-check':'mdi-close'"
|
||||||
|
:color="props.row.orgRevisionIsDraft == true ? 'positive':'red'"
|
||||||
|
class="text-h5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</div>
|
||||||
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -40,18 +40,40 @@ interface FormAgencyRef {
|
||||||
tel: object | null;
|
tel: object | null;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FormPositionRef {
|
interface FormPositionRef {
|
||||||
prefixNo: object | null;
|
prefixNo: object | null;
|
||||||
positionNo: object | null;
|
positionNo: object | null;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FormDateTimeRef {
|
interface FormDateTimeRef {
|
||||||
dateTime: object | null;
|
dateTime: object | null;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FormNewStructureRef {
|
interface FormNewStructureRef {
|
||||||
orgRevisionName: object | null;
|
orgRevisionName: object | null;
|
||||||
type: object | null;
|
type: object | null;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
export type { Pagination, DataOption, FormDataAgency, FormDataPosition, FormAgencyRef, FormPositionRef, FormDateTimeRef,FormDataNewStructure,FormNewStructureRef };
|
|
||||||
|
interface HistoryType {
|
||||||
|
orgRevisionId: string
|
||||||
|
orgRevisionName: string
|
||||||
|
orgRevisionIsCurrent: boolean
|
||||||
|
orgRevisionIsDraft: boolean
|
||||||
|
orgRevisionCreatedAt: any
|
||||||
|
}
|
||||||
|
export type {
|
||||||
|
Pagination,
|
||||||
|
DataOption,
|
||||||
|
FormDataAgency,
|
||||||
|
FormDataPosition,
|
||||||
|
FormAgencyRef,
|
||||||
|
FormPositionRef,
|
||||||
|
FormDateTimeRef,
|
||||||
|
FormDataNewStructure,
|
||||||
|
FormNewStructureRef,
|
||||||
|
HistoryType
|
||||||
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue