เพิ่ม q-skeleton ===> PopupPersonalNew
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
3a308d8a8c
commit
c07163b74f
3 changed files with 333 additions and 278 deletions
|
|
@ -55,6 +55,7 @@ const emit = defineEmits(["update:modal"]);
|
|||
|
||||
/** ตัวแปร*/
|
||||
const modal = ref<boolean>(false);
|
||||
const isLoading = ref<boolean>(true);
|
||||
const employeeClass = ref<string>("");
|
||||
const avatar = reactive<Avatar>({
|
||||
avatar: "",
|
||||
|
|
@ -128,7 +129,7 @@ function calculateAge(birthDate: Date | null) {
|
|||
* @param id profileID
|
||||
*/
|
||||
async function fetchInformation(id: string) {
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(
|
||||
config.API.orgProfileById(
|
||||
|
|
@ -182,7 +183,7 @@ async function fetchInformation(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -324,7 +325,33 @@ watch(modal, (newValue) => {
|
|||
|
||||
<q-card-section class="col q-pt-none bg-grey-12">
|
||||
<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>
|
||||
<q-avatar size="120px" color="grey-4">
|
||||
<img
|
||||
|
|
@ -341,6 +368,7 @@ watch(modal, (newValue) => {
|
|||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="q-mt-md text-subtitle2 text-bold"
|
||||
style="font-size: 18px"
|
||||
|
|
@ -378,7 +406,16 @@ watch(modal, (newValue) => {
|
|||
<q-icon name="mdi-account" color="grey-7" />
|
||||
<span class="q-ml-md">ข้อมูลส่วนตัว </span>
|
||||
</div>
|
||||
<div class="row q-pa-sm">
|
||||
<div v-if="isLoading" class="row q-pa-sm">
|
||||
<div
|
||||
v-for="n in 6"
|
||||
:key="n"
|
||||
class="col-xs-6 col-md-6 q-pa-sm"
|
||||
>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
|
|
@ -460,294 +497,312 @@ watch(modal, (newValue) => {
|
|||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="dateLeave ? dateLeave : '-'"
|
||||
label="วันเดือนปีที่พ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveType ? leaveType : '-'"
|
||||
label="ประเภทการพ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveCommandNo ? leaveCommandNo : '-'"
|
||||
label="คำสั่ง/เอกสารอ้างอิง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-12">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveReason ? leaveReason : '-'"
|
||||
label="สาเหตุ/เหตุผล"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator v-if="isLeave" />
|
||||
<div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.oc ? goverment.oc : '-'"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.posNo ? goverment.posNo : '-'"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่งเลขที่'
|
||||
: 'เลขที่ตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.position ? goverment.position : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่ง'
|
||||
: 'ตำแหน่งในสายงาน'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionPathSide
|
||||
? goverment.positionPathSide
|
||||
: '-'
|
||||
"
|
||||
label="ด้าน/สาขา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLine ? goverment.positionLine : '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionType ? goverment.positionType : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'กลุ่มงาน'
|
||||
: 'ตำแหน่งประเภท'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLevel
|
||||
? goverment.positionLevel
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ระดับชั้นงาน'
|
||||
: 'ระดับตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="row q-pa-sm">
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
v-for="n in 8"
|
||||
:key="n"
|
||||
class="col-xs-6 col-md-6 q-pa-sm"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutive
|
||||
? goverment.positionExecutive
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionExecutiveSide
|
||||
? goverment.positionExecutiveSide
|
||||
: '-'
|
||||
"
|
||||
autogrow
|
||||
label="ด้านทางการบริหาร"
|
||||
/>
|
||||
<q-skeleton type="QInput" height="40px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-pa-sm" v-else>
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeOc
|
||||
? govermentTemp.employeeOc
|
||||
: '-'
|
||||
"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
<div v-else>
|
||||
<div v-if="isLeave" class="row q-col-gutter-sm q-pa-sm">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="dateLeave ? dateLeave : '-'"
|
||||
label="วันเดือนปีที่พ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveType ? leaveType : '-'"
|
||||
label="ประเภทการพ้นจากราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveCommandNo ? leaveCommandNo : '-'"
|
||||
label="คำสั่ง/เอกสารอ้างอิง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-12">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="leaveReason ? leaveReason : '-'"
|
||||
label="สาเหตุ/เหตุผล"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeGroupId
|
||||
? govermentTemp.positionEmployeeGroupId
|
||||
: '-'
|
||||
"
|
||||
label="กลุ่มงาน"
|
||||
/>
|
||||
<q-separator v-if="isLeave" />
|
||||
<div class="row q-pa-sm" v-if="employeeClass !== 'TEMP'">
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.oc ? goverment.oc : '-'"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="goverment.posNo ? goverment.posNo : '-'"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่งเลขที่'
|
||||
: 'เลขที่ตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.position ? goverment.position : '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ตำแหน่ง'
|
||||
: 'ตำแหน่งในสายงาน'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionPathSide
|
||||
? goverment.positionPathSide
|
||||
: '-'
|
||||
"
|
||||
label="ด้าน/สาขา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLine
|
||||
? goverment.positionLine
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionType
|
||||
? goverment.positionType
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'กลุ่มงาน'
|
||||
: 'ตำแหน่งประเภท'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionLevel
|
||||
? goverment.positionLevel
|
||||
: '-'
|
||||
"
|
||||
:label="
|
||||
props.type.toLocaleLowerCase() == 'employee'
|
||||
? 'ระดับชั้นงาน'
|
||||
: 'ระดับตำแหน่ง'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
autogrow
|
||||
:model-value="
|
||||
goverment.positionExecutive
|
||||
? goverment.positionExecutive
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่งทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-md-6"
|
||||
v-if="props.type.toLocaleLowerCase() !== 'employee'"
|
||||
>
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
goverment.positionExecutiveSide
|
||||
? goverment.positionExecutiveSide
|
||||
: '-'
|
||||
"
|
||||
autogrow
|
||||
label="ด้านทางการบริหาร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeLineId
|
||||
? govermentTemp.positionEmployeeLineId
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-pa-sm" v-else>
|
||||
<div class="col-xs-12 col-md-12 text-html">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeOc
|
||||
? govermentTemp.employeeOc
|
||||
: '-'
|
||||
"
|
||||
label="สังกัด"
|
||||
autogrow
|
||||
></q-input>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeePositionId
|
||||
? govermentTemp.positionEmployeePositionId
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeGroupId
|
||||
? govermentTemp.positionEmployeeGroupId
|
||||
: '-'
|
||||
"
|
||||
label="กลุ่มงาน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeTypeIndividual
|
||||
? govermentTemp.employeeTypeIndividual
|
||||
: '-'
|
||||
"
|
||||
label="ประเภทบุคคล"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeeLineId
|
||||
? govermentTemp.positionEmployeeLineId
|
||||
: '-'
|
||||
"
|
||||
label="สายงาน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeWage
|
||||
? govermentTemp.employeeWage
|
||||
: '-'
|
||||
"
|
||||
label="ค่าจ้าง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.positionEmployeePositionId
|
||||
? govermentTemp.positionEmployeePositionId
|
||||
: '-'
|
||||
"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyIncrease
|
||||
? govermentTemp.employeeMoneyIncrease
|
||||
: '-'
|
||||
"
|
||||
label="เงินเพิ่มการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeTypeIndividual
|
||||
? govermentTemp.employeeTypeIndividual
|
||||
: '-'
|
||||
"
|
||||
label="ประเภทบุคคล"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyAllowance
|
||||
? govermentTemp.employeeMoneyAllowance
|
||||
: '-'
|
||||
"
|
||||
label="เงินช่วยเหลือการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeWage
|
||||
? govermentTemp.employeeWage
|
||||
: '-'
|
||||
"
|
||||
label="ค่าจ้าง"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployee
|
||||
? govermentTemp.employeeMoneyEmployee
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (ลูกจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyIncrease
|
||||
? govermentTemp.employeeMoneyIncrease
|
||||
: '-'
|
||||
"
|
||||
label="เงินเพิ่มการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployer
|
||||
? govermentTemp.employeeMoneyEmployer
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (นายจ้าง)"
|
||||
/>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyAllowance
|
||||
? govermentTemp.employeeMoneyAllowance
|
||||
: '-'
|
||||
"
|
||||
label="เงินช่วยเหลือการครองชีพชั่วคราว"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployee
|
||||
? govermentTemp.employeeMoneyEmployee
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (ลูกจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="
|
||||
govermentTemp.employeeMoneyEmployer
|
||||
? govermentTemp.employeeMoneyEmployer
|
||||
: '-'
|
||||
"
|
||||
label="เงินสมทบประกันสังคม (นายจ้าง)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import type {
|
|||
import type { QTableProps } from "quasar";
|
||||
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
import CardProfile from "@/components/CardProfile.vue";
|
||||
import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import type {
|
|||
} from "@/modules/06_retirement/interface/response/Main";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
import CardProfile from "@/components/CardProfile.vue";
|
||||
import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue