Merge branch 'develop' of github.com:Frappet/hrms-mgt into develop
This commit is contained in:
commit
197b621436
8 changed files with 1158 additions and 769 deletions
|
|
@ -37,6 +37,7 @@ export default {
|
|||
orgPosExecutive: `${orgPos}/executive`,
|
||||
orgPosType: `${orgPos}/type`,
|
||||
orgPosTypeSearch: `${orgPos}/position/search`,
|
||||
orgCommandCode: `${organization}/metadata/commandCode`,
|
||||
|
||||
orgPosTypeId: (id: string) => `${orgPos}/type/${id}`,
|
||||
orgPosLevel: `${orgPos}/level`,
|
||||
|
|
@ -129,12 +130,10 @@ export default {
|
|||
orgProfileEmpTemp: `${orgEmployeePosTemp}/profile`,
|
||||
orgSearchProfileEmpTemp: `${orgProfile}-temp/search`,
|
||||
|
||||
|
||||
orgProfileById: (id: string, type: string) =>
|
||||
`${orgProfile}${type}/admin/${id}`,
|
||||
orgDeceasedProfile: `${orgPos}/profile/search`,
|
||||
|
||||
|
||||
orgCheckAvatar: (id: string) => `${orgProfile}/avatar/profileId-admin/${id}`,
|
||||
orgCheckAvatarAdmin: (id: string) =>
|
||||
`${orgProfile}/avatar/profileid-admin/${id}`,
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -4,16 +4,18 @@ import { useQuasar } from "quasar";
|
|||
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useGovernmentPosDataStore } from "@/modules/04_registryPerson/stores/Position";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
|
||||
import type { DataPositions } from "@/modules/04_registryPerson/interface/response/Position";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const store = useGovernmentPosDataStore();
|
||||
const {
|
||||
date2Thai,
|
||||
showLoader,
|
||||
|
|
@ -30,8 +32,8 @@ const salaryId = defineModel<string>("salaryId", { required: true });
|
|||
|
||||
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
|
||||
|
||||
const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
|
||||
const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
|
||||
const rows = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
|
||||
const rowsMain = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
const baseColumns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -58,7 +60,7 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
return row.posNoAbb && row.posNo
|
||||
? `${row.posNoAbb}${row.posNo}`
|
||||
? `${row.posNoAbb}.${row.posNo}`
|
||||
: row.posNo
|
||||
? row.posNo
|
||||
: "-";
|
||||
|
|
@ -133,46 +135,26 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
field: "amount",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => Number(v).toLocaleString(),
|
||||
format(v, row) {
|
||||
return row.amount
|
||||
? `${row.amount.toLocaleString()}${
|
||||
row.amountSpecial !== 0 && row.amountSpecial
|
||||
? ` (${row.amountSpecial.toLocaleString()})`
|
||||
: ""
|
||||
}`
|
||||
: "-";
|
||||
},
|
||||
sort: (a: string, b: string) =>
|
||||
a
|
||||
.toString()
|
||||
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
// {
|
||||
// name: "positionSalaryAmount",
|
||||
// align: "left",
|
||||
// label: "เงินประจำตำแหน่ง",
|
||||
// sortable: true,
|
||||
// field: "positionSalaryAmount",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// format: (v) => Number(v).toLocaleString(),
|
||||
// sort: (a: string, b: string) =>
|
||||
// a
|
||||
// .toString()
|
||||
// .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "mouthSalaryAmount",
|
||||
// align: "left",
|
||||
// label: "เงินค่าตอบแทนรายเดือน",
|
||||
// sortable: true,
|
||||
// field: "mouthSalaryAmount",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// format: (v) => Number(v).toLocaleString(),
|
||||
// sort: (a: string, b: string) =>
|
||||
// a
|
||||
// .toString()
|
||||
// .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
{
|
||||
name: "refCommandNo",
|
||||
name: "commandNo",
|
||||
align: "left",
|
||||
label: "เลขที่คำสั่ง",
|
||||
sortable: true,
|
||||
field: "refCommandNo",
|
||||
field: "commandNo",
|
||||
format(val, row) {
|
||||
return row.commandNo && row.commandYear
|
||||
? `${row.commandNo}/${row.commandYear}`
|
||||
|
|
@ -184,13 +166,16 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "commandName",
|
||||
name: "commandCode",
|
||||
align: "left",
|
||||
label: "ประเภทคำสั่ง",
|
||||
sortable: true,
|
||||
field: "commandName",
|
||||
field: "commandCode",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
return store.convertCommandCodeName(val);
|
||||
},
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
|
|
@ -239,22 +224,47 @@ const baseColumns = ref<QTableProps["columns"]>([
|
|||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdateFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "lastUpdateFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a
|
||||
.toString()
|
||||
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastUpdatedAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "lastUpdatedAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => date2Thai(v, false, true),
|
||||
sort: (a: string, b: string) =>
|
||||
a
|
||||
.toString()
|
||||
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
"commandDateAffect",
|
||||
"amount",
|
||||
"positionSalaryAmount",
|
||||
"mouthSalaryAmount",
|
||||
"posNo",
|
||||
"positionName",
|
||||
"positionType",
|
||||
"positionLevel",
|
||||
"positionExecutive",
|
||||
"amount",
|
||||
"commandNo",
|
||||
"commandCode",
|
||||
"commandDateSign",
|
||||
"commandName",
|
||||
"refCommandNo",
|
||||
"remark",
|
||||
"organization",
|
||||
"remark",
|
||||
"lastUpdateFullName",
|
||||
"lastUpdatedAt",
|
||||
]);
|
||||
|
|
@ -377,7 +387,10 @@ watch(
|
|||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols">
|
||||
<div class="table_ellipsis">
|
||||
<div v-if="col.name == 'organization'" class="table_ellipsis">
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
|
|||
|
|
@ -57,4 +57,28 @@ interface Data {
|
|||
name: string;
|
||||
time: string;
|
||||
}
|
||||
export type { RequestItemsHistoryObject, FormMain, DataCardPos };
|
||||
|
||||
interface FormPostition {
|
||||
commandCode: string; //ประเภทคำสั่ง
|
||||
commandNo: string; //เลขที่คำสั่ง
|
||||
commandYear: number | null; //ปี
|
||||
commandDateAffect: Date | null; //วันที่มีผล
|
||||
commandDateSign: Date | null; //วันที่ลงนาม
|
||||
posNoAbb: string; //ตัวย่อเลขที่ตำแหน่ง
|
||||
posNo: string; //เลขที่ตำแหน่ง
|
||||
positionName: string; //ตำแหน่ง
|
||||
positionType: string; //ประเภทตำแหน่ง, กลุ่มงาน
|
||||
positionLevel: string; //ระดับตำแหน่ง, ระดับชั้นงาน
|
||||
positionLine: string; // สายงาน
|
||||
positionPathSide: string; //ด้าน/สาขา
|
||||
positionExecutive: string; //ตำแหน่งทางการบริหาร
|
||||
amount: number | null; //เงินเดือน
|
||||
amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
|
||||
orgRoot: string; //หน่วยงาน
|
||||
orgChild1: string; //ส่วนราชการระดับ 1
|
||||
orgChild2: string; //ส่วนราชการระดับ 2
|
||||
orgChild3: string; //ส่วนราชการระดับ 3
|
||||
orgChild4: string; //ส่วนราชการระดับ 4
|
||||
remark: string; //หมายเหตุstring
|
||||
}
|
||||
export type { RequestItemsHistoryObject, FormMain, DataCardPos, FormPostition };
|
||||
|
|
|
|||
119
src/modules/04_registryPerson/interface/response/Position.ts
Normal file
119
src/modules/04_registryPerson/interface/response/Position.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
interface DataPositions {
|
||||
amount: number;
|
||||
amountSpecial: number;
|
||||
commandCode: string;
|
||||
commandDateAffect: Date;
|
||||
commandDateSign: Date;
|
||||
commandId: string;
|
||||
commandName: string;
|
||||
commandNo: string;
|
||||
commandYear: number;
|
||||
createdAt: string;
|
||||
createdFullName: string;
|
||||
createdUserId: string;
|
||||
dateGovernment: Date;
|
||||
id: string;
|
||||
isEntry: boolean;
|
||||
isGovernment: boolean;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdateUserId: string;
|
||||
lastUpdatedAt: Date;
|
||||
mouthSalaryAmount: number;
|
||||
order: number;
|
||||
orgChild1: string;
|
||||
orgChild2: string;
|
||||
orgChild3: string;
|
||||
orgChild4: string;
|
||||
orgRoot: string;
|
||||
posNo: string;
|
||||
posNoAbb: string;
|
||||
positionCee: string;
|
||||
positionExecutive: string;
|
||||
positionLevel: string;
|
||||
positionLine: string;
|
||||
positionPathSide: string;
|
||||
positionName: string;
|
||||
positionSalaryAmount: number;
|
||||
positionType: string;
|
||||
profileEmployeeId: string;
|
||||
profileId: string;
|
||||
refId: string;
|
||||
remark: string;
|
||||
}
|
||||
|
||||
interface DataCommandCode {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
createdFullName: string;
|
||||
lastUpdateFullName: string;
|
||||
name: string;
|
||||
code: number;
|
||||
}
|
||||
|
||||
interface DataPosType {
|
||||
id: string;
|
||||
posTypeName: string;
|
||||
posTypeRank: number;
|
||||
posLevels: DataPosLevel[];
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateFullName: string;
|
||||
posTypeShortName?: string;
|
||||
}
|
||||
|
||||
interface DataPosLevel {
|
||||
id: string;
|
||||
posLevelName: string;
|
||||
posLevelRank: number;
|
||||
posLevelAuthority: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateFullName: string;
|
||||
}
|
||||
|
||||
interface DataPosPosition {
|
||||
createdAt: Date;
|
||||
id: string;
|
||||
isSpecial: boolean;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdatedAt: Date;
|
||||
posExecutiveId: string;
|
||||
posExecutiveName: string;
|
||||
posLevelId: string;
|
||||
posLevelName: string;
|
||||
posTypeId: string;
|
||||
posTypeName: string;
|
||||
positionArea: string;
|
||||
positionExecutiveField: string;
|
||||
positionField: string;
|
||||
positionIsSelected: boolean;
|
||||
positionName: string;
|
||||
}
|
||||
|
||||
interface DataPosExecutive {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
lastUpdatedAt: Date;
|
||||
lastUpdateFullName: string;
|
||||
posExecutiveName: string;
|
||||
posExecutivePriority: number;
|
||||
}
|
||||
|
||||
interface DataTenure {
|
||||
name: string;
|
||||
days: number;
|
||||
year: number;
|
||||
month: number;
|
||||
day: number;
|
||||
}
|
||||
|
||||
export type {
|
||||
DataPositions,
|
||||
DataCommandCode,
|
||||
DataPosType,
|
||||
DataPosLevel,
|
||||
DataPosPosition,
|
||||
DataPosExecutive,
|
||||
DataTenure,
|
||||
};
|
||||
43
src/modules/04_registryPerson/stores/Position.ts
Normal file
43
src/modules/04_registryPerson/stores/Position.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {} = mixin;
|
||||
|
||||
export const useGovernmentPosDataStore = defineStore("GovernmentPos", () => {
|
||||
// commandCode ขอตำแหน่ง
|
||||
const positionCode = ref<number[]>([
|
||||
0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16,
|
||||
]);
|
||||
|
||||
const commandCodeData = ref<DataOption[]>([]);
|
||||
const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
|
||||
const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
|
||||
const posLineData = ref<DataOption[]>([]); //รายการสายงาน
|
||||
const posPathSideData = ref<DataOption[]>([]); //รายการด้าน/สาขา
|
||||
const posExecutiveData = ref<DataOption[]>([]); //รายการตำแหน่งทางการบริหาร
|
||||
|
||||
function convertCommandCodeName(val: string) {
|
||||
return commandCodeData.value.find((e: DataOption) => e.id === val)?.name;
|
||||
}
|
||||
|
||||
return {
|
||||
// Data
|
||||
commandCodeData,
|
||||
posTypeData,
|
||||
posLevelData,
|
||||
posLineData,
|
||||
posPathSideData,
|
||||
posExecutiveData,
|
||||
positionCode,
|
||||
|
||||
// Function
|
||||
convertCommandCodeName,
|
||||
};
|
||||
});
|
||||
|
|
@ -54,6 +54,25 @@ const objectRound: MyObjectRoundRef = {
|
|||
endTimeAfternoon: pmOutRef,
|
||||
};
|
||||
|
||||
const formDate = reactive<any>({
|
||||
startTimeMorning: {
|
||||
hours: new Date().getHours(),
|
||||
minutes: new Date().getMinutes(),
|
||||
},
|
||||
endTimeMorning: {
|
||||
hours: new Date().getHours(),
|
||||
minutes: new Date().getMinutes(),
|
||||
},
|
||||
startTimeAfternoon: {
|
||||
hours: new Date().getHours(),
|
||||
minutes: new Date().getMinutes(),
|
||||
},
|
||||
endTimeAfternoon: {
|
||||
hours: new Date().getHours(),
|
||||
minutes: new Date().getMinutes(),
|
||||
},
|
||||
});
|
||||
|
||||
/** Form ข้อมูล */
|
||||
const formData = reactive<FormData>({
|
||||
startTimeMorning: "",
|
||||
|
|
@ -200,16 +219,29 @@ watch(
|
|||
<p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="amRef"
|
||||
class="inputgreen"
|
||||
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.startTimeMorning"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeMorning"
|
||||
:rules="[
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.startTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="amRef"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
borderless
|
||||
:model-value="
|
||||
formData.startTimeMorning
|
||||
? `${formData.startTimeMorning} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val:string) => {
|
||||
if (val && formData.endTimeMorning) {
|
||||
|
|
@ -229,24 +261,59 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
hide-bottom-space
|
||||
style="width: 140px"
|
||||
><template v-slot:append>
|
||||
<q-icon
|
||||
v-if="props.editCheck !== 'edit' && !isRead"
|
||||
name="mdi-clock-outline"
|
||||
size="15px"
|
||||
color="dark"
|
||||
></q-icon> </template
|
||||
></q-input>
|
||||
</template>
|
||||
<template
|
||||
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||
>
|
||||
<div class="time_picker action-row q-gutter-sm">
|
||||
<q-btn
|
||||
label="ยกเลิก"
|
||||
@click="closePicker"
|
||||
color="grey"
|
||||
outline
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="amOutRef"
|
||||
class="inputgreen"
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.endTimeMorning"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeMorning"
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.endTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="amOutRef"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
:model-value="
|
||||
formData.endTimeMorning
|
||||
? `${formData.endTimeMorning} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
borderless
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val:string) => {
|
||||
if (val && formData.startTimeMorning) {
|
||||
|
|
@ -266,10 +333,33 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
hide-bottom-space
|
||||
style="width: 140px"
|
||||
><template v-slot:append>
|
||||
<q-icon
|
||||
v-if="props.editCheck !== 'edit' && !isRead"
|
||||
name="mdi-clock-outline"
|
||||
size="15px"
|
||||
color="dark"
|
||||
></q-icon> </template
|
||||
></q-input>
|
||||
</template>
|
||||
<template
|
||||
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||
>
|
||||
<div class="time_picker action-row q-gutter-sm">
|
||||
<q-btn
|
||||
label="ยกเลิก"
|
||||
@click="closePicker"
|
||||
color="grey"
|
||||
outline
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -278,9 +368,18 @@ watch(
|
|||
<p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="pmRef"
|
||||
:rules="[
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.startTimeAfternoon"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.startTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="pmRef"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||
(val:string) => {
|
||||
if (val && formData.endTimeAfternoon) {
|
||||
|
|
@ -300,24 +399,60 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeAfternoon"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
borderless
|
||||
:model-value="
|
||||
formData.startTimeAfternoon
|
||||
? `${formData.startTimeAfternoon} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
hide-bottom-space
|
||||
style="width: 140px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="props.editCheck !== 'edit' && !isRead"
|
||||
name="mdi-clock-outline"
|
||||
size="15px"
|
||||
color="dark"
|
||||
></q-icon> </template
|
||||
></q-input>
|
||||
</template>
|
||||
<template
|
||||
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||
>
|
||||
<div class="time_picker action-row q-gutter-sm">
|
||||
<q-btn
|
||||
label="ยกเลิก"
|
||||
@click="closePicker"
|
||||
color="grey"
|
||||
outline
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="pmOutRef"
|
||||
:rules="[
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.endTimeAfternoon"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.endTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="pmOutRef"
|
||||
:rules="[
|
||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||
(val:string) => {
|
||||
if (val && formData.startTimeAfternoon) {
|
||||
|
|
@ -337,17 +472,45 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeAfternoon"
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
:model-value="
|
||||
formData.endTimeAfternoon
|
||||
? `${formData.endTimeAfternoon} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
style="width: 140px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="props.editCheck !== 'edit' && !isRead"
|
||||
name="mdi-clock-outline"
|
||||
size="15px"
|
||||
color="dark"
|
||||
></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<template
|
||||
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||
>
|
||||
<div class="time_picker action-row q-gutter-sm">
|
||||
<q-btn
|
||||
label="ยกเลิก"
|
||||
@click="closePicker"
|
||||
color="grey"
|
||||
outline
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
|
|
@ -426,6 +589,14 @@ watch(
|
|||
border-radius: 6px !important;
|
||||
border: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
$toggle-background-color-on: #06884d;
|
||||
$toggle-background-color-off: darkgray;
|
||||
$toggle-control-color: white;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ $activetab: #4a5568
|
|||
.bg-activetab
|
||||
background: $activetab !important
|
||||
|
||||
|
||||
|
||||
.inputgreen .q-field__prefix,
|
||||
.inputgreen .q-field__suffix,
|
||||
.inputgreen .q-field__input,
|
||||
|
|
@ -55,6 +57,11 @@ $activetab: #4a5568
|
|||
|
||||
color: rgb(6, 136, 77)
|
||||
|
||||
.dp__action_row
|
||||
padding: 10px 0,
|
||||
border-top: 1px solid #e1e1e1
|
||||
width: 100%
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
|
||||
|
||||
$noto-thai: 'Noto Sans Thai', sans-serif
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue