เพิ่ม Skeleton popup info
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ee9470182f
commit
c94e3964fc
7 changed files with 187 additions and 145 deletions
|
|
@ -1,27 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
/** importComponents*/
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const store = useResultsPerformDataStore();
|
||||
const { textRangePoint, textPoint } = store;
|
||||
const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
|
||||
useCounterMixin();
|
||||
const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const employeeClass = defineModel<string>("employeeClass", { required: true });
|
||||
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<DataDiscipline[]>([]);
|
||||
|
|
@ -131,7 +134,7 @@ const visibleColumns = ref<String[]>([
|
|||
|
||||
/** function fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
|
||||
function fetchListAssessments() {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(
|
||||
config.API.profileNewAssessmentsByProfileId(
|
||||
|
|
@ -140,14 +143,14 @@ function fetchListAssessments() {
|
|||
)
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -195,8 +198,12 @@ onMounted(() => {
|
|||
style="min-width: 140px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
@ -228,5 +235,3 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
/** importComponents*/
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
|
||||
useCounterMixin();
|
||||
const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const employeeClass = defineModel<string>("employeeClass", { required: true });
|
||||
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<DataDiscipline[]>([]);
|
||||
|
|
@ -210,7 +209,6 @@ const insigniaData = ref<any[]>([]);
|
|||
|
||||
/** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
|
||||
async function fetchListInsignia() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.profileNewInsignByProfileId(
|
||||
|
|
@ -219,21 +217,18 @@ async function fetchListInsignia() {
|
|||
)
|
||||
)
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** fetch ข้อมูลเครื่องราชอิสริยาภรณ์*/
|
||||
async function fetchInsignia() {
|
||||
showLoader();
|
||||
http
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(config.API.insigniaOrg)
|
||||
.then(async (res) => {
|
||||
insigniaData.value = res.data.result;
|
||||
|
|
@ -243,9 +238,10 @@ async function fetchInsignia() {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
rows.value = onSearchDataTable(
|
||||
keyword.value,
|
||||
|
|
@ -290,8 +286,12 @@ onMounted(async () => {
|
|||
style="min-width: 140px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -6,27 +6,19 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { checkPermissionGet } from "@/utils/permissions";
|
||||
import avatarMain from "@/assets/avatar_user.jpg";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* importCOmponents
|
||||
*/
|
||||
/** importComponents */
|
||||
import InfoSalary from "@/modules/13_salary/components/InfoSalary.vue";
|
||||
import InfoDiscipline from "@/modules/13_salary/components/InfoDiscipline.vue";
|
||||
import InfoLeave from "@/modules/13_salary/components/InfoLeave.vue";
|
||||
import InfoAssessments from "@/modules/07_insignia/components/2_Manage/InfoAssessments.vue";
|
||||
import InfoInsignia from "@/modules/07_insignia/components/2_Manage/InfoInsignia.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const { messageError } = useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
|
|
@ -44,11 +36,11 @@ const props = defineProps({
|
|||
const avatar = ref<string>("");
|
||||
const fullName = ref<string>("");
|
||||
const position = ref<string>("");
|
||||
const isSkeleton = ref<boolean>(false);
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** function เรียกข้อมูลส่วนตัว*/
|
||||
function fetchInformation() {
|
||||
isSkeleton.value = false;
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(config.API.orgProfileById(profileId.value, props.employeeClass))
|
||||
.then(async (res) => {
|
||||
|
|
@ -65,7 +57,9 @@ function fetchInformation() {
|
|||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
isSkeleton.value = true;
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +115,33 @@ watch(
|
|||
</q-toolbar>
|
||||
<q-card-section class="col q-pt-none bg-grey-12" style="height: 100%">
|
||||
<div class="q-gutter-md">
|
||||
<q-card bordered class="text-center bg-grey-12">
|
||||
<div v-if="isLoading">
|
||||
<q-skeleton
|
||||
type="QAvatar"
|
||||
size="120px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="150px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-md"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="text"
|
||||
width="100px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-sm"
|
||||
/>
|
||||
<q-skeleton
|
||||
type="QBtn"
|
||||
width="150px"
|
||||
style="background: #e3e3e3"
|
||||
class="q-mx-auto q-mt-sm"
|
||||
/>
|
||||
</div>
|
||||
<q-card v-else bordered class="text-center bg-grey-12">
|
||||
<div class="q-mt-md">
|
||||
<q-avatar size="120px" color="grey-4">
|
||||
<img
|
||||
|
|
@ -191,39 +211,41 @@ watch(
|
|||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-scroll-area
|
||||
<q-scroll-are
|
||||
:thumb-style="thumbStyle"
|
||||
style="height: 55vh; max-width: 100%"
|
||||
>
|
||||
<InfoSalary
|
||||
v-if="type === 'posSalary'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
<InfoDiscipline
|
||||
v-if="type === 'discipline'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
<div style="min-width: 1200px; overflow-x: auto">
|
||||
<InfoSalary
|
||||
v-if="type === 'posSalary'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
<InfoDiscipline
|
||||
v-if="type === 'discipline'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
|
||||
<InfoLeave
|
||||
v-if="type === 'leave'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
<InfoLeave
|
||||
v-if="type === 'leave'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
|
||||
<InfoAssessments
|
||||
v-if="type === 'assessments'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
<InfoAssessments
|
||||
v-if="type === 'assessments'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
|
||||
<InfoInsignia
|
||||
v-if="type === 'insignia'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
</q-scroll-area>
|
||||
<InfoInsignia
|
||||
v-if="type === 'insignia'"
|
||||
v-model:profileId="profileId"
|
||||
:employeeClass="employeeClass"
|
||||
/>
|
||||
</div>
|
||||
</q-scroll-are>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
/** importComponents*/
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { date2Thai, showLoader, hideLoader, messageError,onSearchDataTable } = useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const employeeClass = defineModel<string>("employeeClass", { required: true });
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<DataDiscipline[]>([]);
|
||||
const rowsData = ref<DataDiscipline[]>([]);
|
||||
|
|
@ -98,22 +93,20 @@ const visibleColumns = ref<string[]>([
|
|||
"date",
|
||||
]);
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลวินัย
|
||||
*/
|
||||
/** function fetch ข้อมูลวินัย*/
|
||||
function fetchListDiscipline() {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(config.API.disciplineListCard(profileId.value, employeeClass.value))
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -161,8 +154,11 @@ onMounted(() => {
|
|||
style="min-width: 140px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -1,34 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataLeave } from "@/modules/13_salary/interface/response/Main";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
/** importComponents*/
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
|
||||
useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
|
||||
|
||||
/** props*/
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const employeeClass = defineModel<string>("employeeClass", { required: true });
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<DataLeave[]>([]);
|
||||
const rowsData = ref<DataLeave[]>([]);
|
||||
|
|
@ -104,22 +98,20 @@ const visibleColumns = ref<string[]>([
|
|||
"reason",
|
||||
]);
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลการลา
|
||||
*/
|
||||
/** function fetch ข้อมูลการลา*/
|
||||
function fetchListSalary() {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(config.API.leaveListCard(profileId.value, employeeClass.value))
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +188,10 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
|
|||
|
|
@ -1,48 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { is, useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableColumn } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { QTableProps } from "quasar";
|
||||
/** importType*/
|
||||
import type { QTableColumn } from "quasar";
|
||||
import type { DataPosSalary } from "@/modules/13_salary/interface/response/Main";
|
||||
import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
date2Thai,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
onSearchDataTable,
|
||||
findOrgName,
|
||||
findOrgNameHtml,
|
||||
} = useCounterMixin();
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
|
||||
/** props*/
|
||||
const profileId = defineModel<string>("profileId", { required: true });
|
||||
const employeeClass = defineModel<string>("employeeClass", { required: true });
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
const modalCommand = ref<boolean>(false);
|
||||
const command = ref<string>("");
|
||||
const commandId = ref<string>("");
|
||||
const isLoading = ref<boolean>(true);
|
||||
|
||||
/** Table*/
|
||||
const keyword = ref<string>("");
|
||||
const rows = ref<DataPosSalary[]>([]);
|
||||
const rowsData = ref<DataPosSalary[]>([]);
|
||||
|
|
@ -343,22 +333,20 @@ const visibleColumns = ref<string[]>([
|
|||
"lastUpdatedAt",
|
||||
]);
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลเงินเดือน / ค่าจ้าง
|
||||
*/
|
||||
/** function fetch ข้อมูลเงินเดือน / ค่าจ้าง */
|
||||
function fetchListSalary() {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
http
|
||||
.get(config.API.salaryListCard(profileId.value, employeeClass.value))
|
||||
.then((res) => {
|
||||
rows.value = res.data.result;
|
||||
rowsData.value = res.data.result;
|
||||
onSearch();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -413,7 +401,10 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue