hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2024-10-17 15:37:04 +07:00
commit 5d9131d5b7
13 changed files with 663 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/api/02_organizational/api.organization.ts
View file

@ -6,6 +6,7 @@ const orgProfile = `${env.API_URI}/org/profile`;
const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
const orgAct = `${env.API_URI}/org/act`;
const orgPosAct = `${env.API_URI}/org/pos/act`;
const workflow = `${env.API_URI}/org/workflow`;
export default {
keycloakPosition: () => `${organization}/profile/keycloak/position`,
@ -134,4 +135,9 @@ export default {
orgPermissionsSys: `${organization}/permission`,
checkIsOfficer: (id: string) => `${organization}/check/child1/${id}`,
/**
* workflow
*/
workflow: `${workflow}/`,
};

96
src/components/Workflow/DialogApprove.vue
View file

@ -1,34 +1,90 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const { stateId } = defineProps({
stateId: { type: String, require: true },
});
const isAcknowledge = ref<boolean>(false);
const isConsider = ref<boolean>(true);
const isComment = ref<boolean>(true);
const isAcceptSetting = ref<boolean>(false);
const isApproveSetting = ref<boolean>(false);
const isReasonSetting = ref<boolean>(false);
const acknowledge = ref<boolean>(false);
const consider = ref<string>("");
const comment = ref<string>("");
const isAccept = ref<boolean>(false);
const isApprove = ref<string>("");
const reason = ref<string>("");
async function fetchData() {
showLoader();
await http
.post(config.API.workflow + `comment-state-user`, { stateId: stateId })
.then(async (res) => {
const data = res.data.result;
isAcceptSetting.value = data.isAcceptSetting;
isApproveSetting.value = data.isApproveSetting;
isReasonSetting.value = data.isReasonSetting;
isAccept.value = data.isAccept;
isApprove.value = data.isApprove ? "approve" : "";
reason.value = data.reason;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onSubmit() {
dialogConfirm($q, () => {});
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.workflow + `comment`, {
stateId: stateId,
isAccept: isAcceptSetting.value ? isAccept.value : undefined,
isApprove: isApproveSetting.value
? isApprove.value === "approve"
? true
: false
: undefined,
reason: isReasonSetting.value ? reason.value : undefined,
})
.then(async () => {
onCloseModal();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
function onCloseModal() {
modal.value = false;
acknowledge.value = false;
consider.value = "";
comment.value = "";
isAccept.value = false;
isApprove.value = "";
reason.value = "";
}
watch(modal, (val) => {
if (val) {
fetchData();
}
});
</script>
<template>
@ -43,23 +99,23 @@ function onCloseModal() {
<q-card-section>
<div class="q-gutter-xs">
<div v-if="isAcknowledge">
<div v-if="isAcceptSetting">
<q-checkbox
keep-color
color="primary"
dense
v-model="acknowledge"
v-model="isAccept"
label="รับทราบ"
/>
</div>
<div v-if="!isAcknowledge && isConsider">
<div v-if="!isAcceptSetting && isApproveSetting">
<div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
<div class="q-pa-sm q-gutter-sm">
<q-radio
dense
keep-color
color="primary"
v-model="consider"
v-model="isApprove"
label="อนุมัติ"
val="approve"
/>
@ -67,14 +123,14 @@ function onCloseModal() {
dense
keep-color
color="primary"
v-model="consider"
v-model="isApprove"
label="ไม่อนุมัติ"
val="reject"
/>
</div>
</div>
<div v-if="!isAcknowledge && isComment">
<div v-if="!isAcceptSetting && isReasonSetting">
<div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
<div class="q-pa-sm q-gutter-sm">
<div class="col-12">
@ -82,7 +138,7 @@ function onCloseModal() {
dense
outlined
label="ความเห็น"
v-model="comment"
v-model="reason"
type="textarea"
lazy-rules
:rules="[
@ -103,7 +159,7 @@ function onCloseModal() {
label="บันทึก"
color="public"
type="submit"
:disable="!isAcknowledge && !isConsider && !isComment"
:disable="!isAcceptSetting && !isApproveSetting && !isReasonSetting"
>
</q-btn>
</q-card-actions>

98
src/components/Workflow/DialogSelectPerson.vue
View file

@ -3,26 +3,26 @@ import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError } =
useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const { stateId, fetchData } = defineProps({
stateId: { type: String, require: true },
fetchData: { type: Function, require: true },
});
/** table*/
const selected = ref<any[]>([]);
const rows = ref<any[]>([
{
fullName: "นายศรัณย์ ศิลาดี",
position: "นักบริหาร",
posType: "บริหาร(สูง)",
organization: "",
},
]);
const rows = ref<any[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "fullName",
@ -30,6 +30,9 @@ const columns = ref<QTableProps["columns"]>([
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -42,15 +45,15 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posType",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: true,
field: "posType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
// {
// name: "posType",
// align: "left",
// label: "ประเภทตำแหน่ง",
// sortable: true,
// field: "posType",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
{
name: "organization",
align: "left",
@ -62,14 +65,47 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const isAcknowledge = ref<boolean>(false);
const isConsider = ref<boolean>(false);
const isComment = ref<boolean>(false);
const isAcceptSetting = ref<boolean>(false);
const isApproveSetting = ref<boolean>(false);
const isReasonSetting = ref<boolean>(false);
function fetchLists() {}
async function fetchLists() {
showLoader();
await http
.get(config.API.workflow + `commander`)
.then(async (res) => {
rows.value = res.data.result;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onSubmit() {
dialogConfirm($q, () => {});
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.workflow + `add-step`, {
stateId: stateId,
profileId: selected.value[0].id,
isAcceptSetting: isAcceptSetting.value,
isApproveSetting: isApproveSetting.value,
isReasonSetting: isReasonSetting.value,
})
.then(async () => {
await fetchData?.();
onCloseModal();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
function onCloseModal() {
@ -146,26 +182,28 @@ watch(modal, (val) => {
keep-color
color="primary"
dense
v-model="isAcknowledge"
v-model="isAcceptSetting"
label="ให้เลือกรับทราบ"
@update:model-value="(isConsider = false), (isComment = false)"
@update:model-value="
(isApproveSetting = false), (isReasonSetting = false)
"
/>
</div>
<div v-if="!isAcknowledge">
<div v-if="!isAcceptSetting">
<q-checkbox
dense
keep-color
color="primary"
v-model="isConsider"
v-model="isApproveSetting"
label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
/>
</div>
<div v-if="!isAcknowledge">
<div v-if="!isAcceptSetting">
<q-checkbox
dense
keep-color
color="primary"
v-model="isComment"
v-model="isReasonSetting"
label="ให้แสดงความเห็นในเอกสาร"
/>
</div>
@ -181,7 +219,7 @@ watch(modal, (val) => {
type="submit"
:disable="
selected.length === 0 ||
(!isAcknowledge && !isConsider && !isComment)
(!isAcceptSetting && !isApproveSetting && !isReasonSetting)
"
>
</q-btn>

185
src/components/Workflow/Main.vue
View file

@ -3,79 +3,112 @@ import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { Permission } from "@/interface/index/workflow/Main";
import type { DataListState } from "@/interface/response/workflow/Main";
import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
import DialogApprove from "@/components/Workflow/DialogApprove.vue";
const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();
const { dialogConfirm, showLoader, hideLoader, messageError } =
useCounterMixin();
const { id, sysName } = defineProps({
id: { type: String, require: true },
sysName: { type: String, require: true },
});
const state = ref<number>(1);
const isChangeState = ref<boolean>(false);
const isOperate = ref<boolean>(false);
const stateId = ref<string>(""); //id state ปัจุบัน
const state = ref<number>(1); //state ปัจุบัน
const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
const permission = ref<Permission>({
isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
isOperate: false, //เปลี่ยนสถานะ (state) เอกสารได้
isView: false, //ดูเอกสารได้
isUpdate: false, //แก้ไขเอกสารได้
isDelete: false, //ลบเอกสารได้ (ถ้ามี)
isCancel: false, //ลบเอกสารได้ (ถ้ามี)
});
const itemState = ref<DataListState[]>([]);
const rowsOperate = ref<any[]>([
{
fullName: "ชื่อนาม - สกุล",
comment: "ความเห็น",
position: " บริหาร - ต้น ",
status: "อนุมัติ",
},
]);
const modalSelectPerson = ref<boolean>(false);
const modalApprove = ref<boolean>(false);
const itemState = ref<any[]>([
{
stateNo: 1,
stateName: "Darft",
},
{
stateNo: 2,
stateName: "Operate",
},
{
stateNo: 3,
stateName: "Finish",
},
]);
function fetchData() {
console.log(id, sysName);
const data = {
stateNo: 1,
step: 1,
can_view: true,
can_update: true,
can_operate: true,
can_change_state: true,
can_delete: false,
can_cancel: false,
};
state.value = data.stateNo;
isChangeState.value = data.can_change_state;
isOperate.value = data.can_operate;
async function fetchCheckState() {
await http
.post(config.API.workflow + `check-user-now`, {
refId: id,
system: sysName,
})
.then(async (res) => {
await fetchData();
const data = await res.data.result;
stateId.value = data.stateId;
state.value = data.stateNo === 4 ? 5 : data.stateNo;
permission.value = {
isChangeState: data.can_change_state,
isOperate: data.can_operate,
isView: data.can_view,
isUpdate: data.can_update,
isDelete: data.can_delete,
isCancel: data.can_cancel,
};
})
.catch(() => {
isPermission.value = false;
});
}
function onConfirmDraft() {
dialogConfirm($q, () => {
state.value++;
async function fetchData() {
await http
.post(config.API.workflow + `check-state-all`, {
refId: id,
system: sysName,
})
.then(async (res) => {
const data = await res.data.result;
itemState.value = data;
})
.catch((err) => {
messageError($q, err);
});
}
function onChangeState() {
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.workflow + `state-next`, {
refId: id,
system: sysName,
})
.then(async () => {
await fetchCheckState();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
onMounted(() => {
fetchData();
onMounted(async () => {
await fetchCheckState();
});
defineExpose({
permission,
});
</script>
<template>
<q-card bordered class="row col-12">
<q-card bordered class="row col-12" v-if="isPermission">
<div class="bg-grey-1 q-pa-sm col-12 row items-center">
<div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
<q-space />
@ -103,14 +136,11 @@ onMounted(() => {
:color="state < index + 1 ? 'grey-4' : ''"
>
<!-- Darft -->
<div
class="row q-col-gutter-sm"
v-if="step.stateName === 'Darft' && state === 1"
>
<div class="row q-col-gutter-sm" v-if="state === 1 && index === 0">
<div>
<q-btn
v-if="isChangeState"
@click.prevent="onConfirmDraft"
v-if="permission.isChangeState"
@click.prevent="onChangeState"
label="Next Step"
color="primary"
/>
@ -120,31 +150,44 @@ onMounted(() => {
<!-- Operate -->
<div
class="q-col-gutter-sm"
v-if="step.stateName === 'Operate' && state > 1"
v-if="index > 0 && index < itemState.length - 1 && state > index"
>
<div>
<div v-if="step.stateUserComments.length !== 0">
<q-list bordered separator style="min-width: 20vw">
<q-item v-for="(item, index) in rowsOperate" :key="index">
<q-item
v-for="(item, index) in step.stateUserComments"
:key="index"
>
<q-item-section>
<q-item-label
>{{ item.fullName }}
{{ `(${item.position})` }}</q-item-label
>
<q-item-label>
{{ `${item.prefix}${item.firstName} ${item.lastName}` }}
<!-- {{ `(${item.position})` }} -->
</q-item-label>
<q-item-label caption lines="2">{{
item.comment
item.isReasonSetting ? item.reason : ""
}}</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label class="text-green">
{{ item.status }}</q-item-label
{{
item.isAcceptSetting
? item.isAccept
? "รับทราบ"
: ""
: item.isApproveSetting
? item.isApprove
? "อนุมันติ"
: ""
: ""
}}</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</div>
<div v-if="isOperate && state === 2">
<div v-if="permission.isOperate && state === index + 1">
<q-btn
@click.prevent="modalSelectPerson = true"
label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@ -152,9 +195,9 @@ onMounted(() => {
/>
</div>
<div v-if="isChangeState && state === 2">
<div v-if="permission.isChangeState && state === index + 1">
<q-btn
@click.prevent="onConfirmDraft"
@click.prevent="onChangeState"
label="Next Step"
color="primary"
/>
@ -166,7 +209,11 @@ onMounted(() => {
</q-card-section>
</q-card>
<DialogSelectPerson v-model:modal="modalSelectPerson" />
<DialogSelectPerson
v-model:modal="modalSelectPerson"
:state-id="stateId"
:fetch-data="fetchCheckState"
/>
<DialogApprove v-model:modal="modalApprove" />
<DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
</template>

0
src/interface/index/Main.ts Normal file
View file

10
src/interface/index/workflow/Main.ts Normal file
View file

@ -0,0 +1,10 @@
interface Permission {
isChangeState: boolean; //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
isOperate: boolean; //เปลี่ยนสถานะ (state) เอกสารได้
isView: boolean; //ดูเอกสารได้
isUpdate: boolean; //แก้ไขเอกสารได้
isDelete: boolean; //ลบเอกสารได้ (ถ้ามี)
isCancel: boolean; //ลบเอกสารได้ (ถ้ามี)
}
export type { Permission };

39
src/interface/response/workflow/Main.ts Normal file
View file

@ -0,0 +1,39 @@
interface DataListState {
stateId: string;
stateName: string;
stateNo: number;
stateUserComments: StateUserComments[];
}
interface StateUserComments {
createdAt: string;
createdFullName: string;
createdUserId: string;
id: string;
isAccept: boolean | null;
isAcceptSetting: boolean | null;
isApprove: boolean | null;
isApproveSetting: boolean | null;
isReasonSetting: boolean | null;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: string;
order: null;
profileId: string;
reason: string;
stateId: string;
firstName: string;
lastName: string;
prefix: string;
}
interface DataCommander {
firstName: string;
id: string;
lastName: string;
orgRoot: string;
position: string;
prefix: string;
}
export type { DataListState, DataCommander };

9
src/modules/02_organization/components/TreeMain.vue
View file

@ -436,8 +436,15 @@ watch(
class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
<div
:class="
prop.node.isOfficer
? 'text-weight-medium text-blue'
: 'text-weight-medium'
"
>
{{ prop.node.orgTreeName }}
{{ prop.node.isOfficer ? "(สกจ.)" : "" }}
</div>
<div class="text-weight-light text-grey-8">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}

20
src/modules/02_organization/components/TreeTable.vue
View file

@ -28,7 +28,6 @@ import DialogMovePos from "@/modules/02_organization/components/DialogMovePos.vu
import DialogHistoryPos from "@/modules/02_organization/components/DialogHistoryPos.vue"; // ประวัติตำแหน่ง
import DialogSelectPerson from "@/modules/02_organization/components/DialogSelectPerson.vue"; // เลือกคนครอง
import DialogSuccession from "@/modules/02_organization/components/DialogSuccession.vue"; // สืบทอดตำแหน่ง
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";
const $q = useQuasar();
const store = useOrganizational();
@ -252,7 +251,6 @@ const columnsExpand = ref<QTableProps["columns"]>([
]);
const dialogPosition = ref<boolean>(false); //ตำแหน่ง
const modalCommand = ref<boolean>(false); //สร้างคำสั่ง
/**
* function openPopup เพิ่มอัตรากำลัง
@ -542,18 +540,6 @@ watch(
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<q-btn
v-if="store.typeOrganizational === 'draft'"
flat
round
dense
color="add"
icon="mdi-account-arrow-right"
@click.prevent="modalCommand = true"
>
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
</q-btn>
<q-space />
<div class="row q-gutter-md">
<div>
@ -905,12 +891,6 @@ watch(
<!-- สืบทอดตำแหน่ง -->
<DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
<!-- dialog สร้างคำสั่ง -->
<DialogCreateCommandORG
v-model:modal="modalCommand"
command-type-code="C-PM-38"
/>
</template>
<style lang="scss" scoped>

1
src/modules/02_organization/interface/response/organizational.ts
View file

@ -35,6 +35,7 @@ interface OrgTree {
orgTreePhoneIn: string;
orgTreeFax: string;
orgRevisionId: string;
isOfficer: boolean;
children: OrgTree[];
}

45
src/modules/02_organization/views/main.vue
View file

@ -22,6 +22,7 @@ import StructureView from "@/modules/02_organization/components/StructureMain.vu
import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue"; //ส่่งไปออกคำสั่ง
/**
* use
@ -30,9 +31,7 @@ const $q = useQuasar();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const store = useOrganizational();
/**
* ตัวแปร
*/
/** ตัวแปร*/
const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
const modalDateTime = ref<boolean>(false); // ตั้งเวลาเผยแพร่
const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
@ -43,29 +42,10 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
const count = ref<number>(0);
// รายการเมนูเพิ่มโครงสร้าง
const itemStructure = ref<DataOption[]>([
{
id: "NEW",
name: "สร้างใหม่",
},
{
id: "ORG",
name: "ทำสำเนาเฉพาะโครงสร้าง",
},
{
id: "ORG_POSITION",
name: "ทำสำเนาโครงสร้างและตำแหน่ง",
},
{
id: "ORG_POSITION_PERSON",
name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
},
]);
const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
/**
* function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
*
* เก็บข่อมูลใน store
*/
async function fetchOrganizationActive() {
@ -225,6 +205,7 @@ onMounted(async () => {
</div>
</q-card>
</div>
<div v-else>
<q-card class="my-card">
<q-card-section class="q-pa-sm">
@ -294,6 +275,17 @@ onMounted(async () => {
@click="ocClickAddStructure('ADD')"
class="q-px-md"
/>
<q-btn
v-if="store.typeOrganizational === 'draft'"
flat
round
dense
color="add"
icon="mdi-account-arrow-right"
@click.prevent="modalCommand = true"
>
<q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
</q-btn>
<!-- <q-btn-dropdown
v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
@ -383,6 +375,13 @@ onMounted(async () => {
:close="onClickDateTime"
:fetch-active="fetchOrganizationActive"
/>
<!-- dialog ส่งไปออกคำสั่ง -->
<DialogCreateCommandORG
v-model:modal="modalCommand"
command-type-code="C-PM-38"
:org-publish-date="store.orgPublishDate as Date | undefined"
/>
</template>
<style scoped></style>

14
src/modules/05_placement/components/Transfer/TransferDetail.vue
View file

@ -38,6 +38,7 @@ const transferId = ref<string>(route.params.id as string); //Id รายกา
const roleAdmin = ref<boolean>(false); //admin
const edit = ref<boolean>(false); //การแก่ไข
const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
const workflowRef = ref<any>(null);
const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
const positionTypeOld = ref<string>(""); //ประเภทตำแหน่ง
@ -335,7 +336,7 @@ onMounted(async () => {
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
<q-space />
<q-btn
<!-- <q-btn
v-if="!roleAdmin && responseData.status != 'APPROVE'"
outline
color="primary"
@ -344,7 +345,7 @@ onMounted(async () => {
class="q-px-sm"
label="ส่งคำร้องไปยัง สกจ."
@click="confirmMessage"
/>
/> -->
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
@ -489,7 +490,8 @@ onMounted(async () => {
v-if="
!(
responseData.status == 'REPORT' ||
responseData.status == 'DONE'
responseData.status == 'DONE' ||
!workflowRef?.permission.isUpdate
) && checkPermission($route)?.attrIsUpdate
"
/>
@ -686,7 +688,11 @@ onMounted(async () => {
</q-card>
<!-- Workflow -->
<WorkFlow :id="transferId" :sys-name="'transfer'" />
<WorkFlow
ref="workflowRef"
:id="transferId"
:sys-name="'PLACEMENT_TRANSFER'"
/>
</div>
</template>

336
src/modules/18_command/components/DialogCreateCommandORG.vue
View file

@ -8,7 +8,12 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandMainStore } from "@/modules/18_command/store/Main";
import type { ListCommand } from "@/modules/18_command/interface/index/Main";
/** importType*/
import type { QTableProps } from "quasar";
import type {
ListCommand,
DataOption,
} from "@/modules/18_command/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue";
@ -28,6 +33,7 @@ const {
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
commandTypeCode: String, // ไอดีประเภทคำสั่ง
orgPublishDate: { type: Date, defult: undefined },
});
const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
@ -36,33 +42,123 @@ const commandNo = ref<string>(""); //คำสั่งเลขที่
const commandYear = ref<number>(new Date().getFullYear());
const commandAffectDate = ref<Date | null>(null); //วันที่ลงนาม
const commandExcecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
const group = ref<string>(
"กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ"
); //กลุ่ม
const isCheckOrgPublishDate = ref<boolean>(false); //เช็คค่าของวันที่คำสั่งมีผล
const groupOp = ref<DataOption[]>([]);
const groupDataOp = ref<DataOption[]>([
{
id: "1.1",
name: "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ",
},
{
id: "1.2",
name: "กลุ่มที่ 1.2 : อาวุโส ชำนาญการพิเศษ อำนวยการต้น",
},
{
id: "2",
name: "กลุ่มที่ 2 : ทักษะพิเศษ เชี่ยวชาญ ทรงคุณวุฒิ อำนวยการสูง บริหารต้น บริหารสูง",
},
]);
//Table
const rows = ref<any[]>([
{
id: "1",
posMasterNo: "สกก.3",
positionName: "นักจัดการงานทั่วไป",
posTypeName: "ทั่วไป",
posLevelName: "ปฏิบัติงาน",
positionIsSelected: "นายศรัณย์ ศิลาดี",
group: "1.1",
selected: true,
},
{
id: "4",
posMasterNo: "สกก.4",
positionName: "นักจัดการงานทั่วไป",
posTypeName: "วิชาการ",
posLevelName: "ปฏิบัติการ",
positionIsSelected: "นางเกษมณี ใจดี",
group: "1.1",
selected: true,
},
]);
const selected = ref<any[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "posMasterNo",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: false,
field: "posMasterNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionName",
align: "left",
label: "ตำแหน่งในสายงาน",
field: "positionName",
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posTypeName",
align: "left",
label: "ประเภทตำแหน่ง",
sortable: false,
field: "posTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posLevelName",
align: "left",
label: "ระดับตำแหน่ง",
sortable: false,
field: "posLevelName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionIsSelected",
align: "left",
label: "คนครอง",
sortable: false,
field: "positionIsSelected",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** ฟังก์ชันบันทึกและไปยังหน้าคำสั่ง*/
function onSubmit() {
dialogConfirm($q, async () => {
showLoader();
const body = {
commandYear: commandYear.value,
commandNo: commandNo.value,
commandTypeId: commandType.value,
commandAffectDate: commandAffectDate.value,
commandExcecuteDate: commandExcecuteDate.value,
persons: [],
};
await http
.post(config.API.command + `/person`, body)
.then(async (res) => {
const id = await res.data.result;
router.push(`/command/edit/${id}`);
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
// showLoader();
// const body = {
// commandYear: commandYear.value,
// commandNo: commandNo.value,
// commandTypeId: commandType.value,
// commandAffectDate: commandAffectDate.value,
// commandExcecuteDate: commandExcecuteDate.value,
// persons: [],
// };
// await http
// .post(config.API.command + `/person`, body)
// .then(async (res) => {
// const id = await res.data.result;
// router.push(`/command/edit/${id}`);
// modal.value = false;
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
});
}
@ -76,6 +172,10 @@ function closeModal() {
commandYear.value = new Date().getFullYear();
commandAffectDate.value = null;
commandExcecuteDate.value = null;
group.value = "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ";
isCheckOrgPublishDate.value = false;
// rows.value = [];
// selected.value = [];
}
/** ฟังก์ชันดึงข้อมูลคำสั่ง */
@ -88,9 +188,69 @@ async function fetchCommandType() {
commandType.value = commandOp.value[0].id;
}
/**
* ฟังก์ชันต้นหาข้อมูลของ Option ขอสถานะ
* @param val ค่าที่ต้องการฟิลเตอร์
* @param update อัพเดทค่า
* @param refData ดาต้าที่ต้องการฟิลเตอร์
*/
function filterOption(val: string, update: Function) {
update(() => {
group.value = val ? "" : group.value;
groupOp.value = groupDataOp.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
}
/**
* ฟังก์ชันเลือกกลุ่ม
* @param val กลุ่มที่ต้องการค้นหา
*/
function updateGroup(val: string) {
const data = [
{
id: "1",
posMasterNo: "สกก.3",
positionName: "นักจัดการงานทั่วไป",
posTypeName: "ทั่วไป",
posLevelName: "ปฏิบัติงาน",
positionIsSelected: "นายศรัณย์ ศิลาดี",
group: "1.1",
selected: true,
},
{
id: "2",
posMasterNo: "สกก.2",
positionName: "นักทรัพยากรบุคคล",
posTypeName: "วิชาการ",
posLevelName: "ชำนาญการพิเศษ",
positionIsSelected: "นางสาวพรทิพย์ กาญจนา",
group: "1.2",
selected: true,
},
{
id: "3",
posMasterNo: "สกก.1",
positionName: "นักบริหาร",
posTypeName: "บริหาร",
posLevelName: "สูง",
positionIsSelected: "นางสาวพรทิพย์ กาญจนา",
group: "2",
selected: true,
},
];
rows.value = data.filter((e: any) => e.group === val);
}
watch(modal, () => {
if (modal.value) {
fetchCommandType();
if (props.orgPublishDate) {
commandExcecuteDate.value = props.orgPublishDate;
isCheckOrgPublishDate.value = true;
}
}
});
</script>
@ -128,19 +288,23 @@ watch(modal, () => {
</template>
</q-select>
</div>
<!-- คำสั่งเลขที่ -->
<div class="col-6">
<q-input
class="inputgreen"
outlined
dense
hide-bottom-space
v-model="commandNo"
:label="`${'คำสั่งเลขที่'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
/>
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
<!-- พ.ศ -->
<div class="col-5">
<datepicker
menu-class-name="modalfix"
@ -179,6 +343,7 @@ watch(modal, () => {
</datepicker>
</div>
<!-- วันที่ลงนาม -->
<div class="col-6">
<datepicker
clearable
@ -222,6 +387,7 @@ watch(modal, () => {
</datepicker>
</div>
<!-- วันที่คำสั่งมีผล -->
<div class="col-6">
<datepicker
clearable
@ -230,7 +396,8 @@ watch(modal, () => {
:locale="'th'"
autoApply
:enableTimePicker="false"
class="inputgreen"
:class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
:readonly="isCheckOrgPublishDate"
>
<template #year="{ year }">
{{ year + 543 }}
@ -240,11 +407,12 @@ watch(modal, () => {
</template>
<template #trigger>
<q-input
:readonly="isCheckOrgPublishDate"
clearable
dense
outlined
hide-bottom-space
class="inputgreen"
:class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
:model-value="
commandExcecuteDate == null
? null
@ -265,6 +433,111 @@ watch(modal, () => {
</template>
</datepicker>
</div>
<!-- กลุ่ม -->
<div class="col-12">
<q-select
v-model="group"
:label="`${'กลุ่ม'}`"
option-label="name"
:options="groupOp"
option-value="id"
class="inputgreen"
dense
emit-value
map-options
lazy-rules
use-input
hide-bottom-space
outlined
@update:model-value="updateGroup"
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<!-- TABLE -->
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:rows="rows"
:paging="true"
row-key="id"
flat
bordered
dense
:rows-per-page-options="[10, 25, 50, 100]"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.row.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name === 'posMasterNo'">
{{
props.row.isSit
? col.value + " " + "(นั่งทับตำแหน่ง)"
: col.value
}}
</div>
<div v-else-if="col.name === 'posLevelName'">
{{
props.row.posLevelName
? props.row.isSpecial == true
? `${props.row.posLevelName} (ฉ)`
: props.row.posLevelName
: "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="reqMaster.page"
active-color="primary"
color="dark"
:max="totalPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> -->
</d-table>
</div>
</div>
</q-card-section>
@ -272,8 +545,13 @@ watch(modal, () => {
<q-card-actions align="right">
<q-btn
label="บันทึกและไปยังหน้าคำสั่ง"
:disable="commandType == ''"
label="ส่งไปออกคำสั่ง"
:disable="
commandType == '' ||
rows.filter((x) => x.selected).length === 0 ||
!commandNo ||
!commandYear
"
type="submit"
color="public"
>