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

API workflow

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-16 18:11:38 +07:00
parent 95cfcee530
commit a6c7981fd8
5 changed files with 228 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,74 +3,100 @@ 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 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>(2); //state ปัจุบัน
const isChangeState = ref<boolean>(false); //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
const isOperate = ref<boolean>(true); //เปลี่ยนสถานะ (state) เอกสารได้
const isView = ref<boolean>(true); //ดูเอกสารได้
const isUpdate = ref<boolean>(true); //แก้ไขเอกสารได้
const isDelete = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
const isCancel = ref<boolean>(true); //ลบเอกสารได้ (ถ้ามี)
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",
},
]);
const itemState = ref<any[]>([]);
function fetchData() {
async 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;
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 onConfirmDraft() {
dialogConfirm($q, () => {
state.value++;
async function fetchCheckState() {
await http
.post(config.API.workflow + `check-user-now`, {
refId: id,
system: sysName,
})
.then(async (res) => {
const data = await res.data.result;
stateId.value = data.stateId;
state.value = data.stateNo;
isChangeState.value = data.can_change_state;
isOperate.value = data.can_operate;
isView.value = data.can_view;
isUpdate.value = data.can_update;
isDelete.value = data.can_delete;
isCancel.value = data.can_cancel;
})
.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 Promise.all([fetchData(), fetchCheckState()]);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
onMounted(() => {
fetchData();
async function fetchAllFunction() {
await Promise.all([fetchData(), fetchCheckState()]);
}
onMounted(async () => {
await fetchAllFunction();
});
</script>
@ -103,14 +129,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">
<div>
<q-btn
v-if="isChangeState"
@click.prevent="onConfirmDraft"
@click.prevent="onChangeState"
label="Next Step"
color="primary"
/>
@ -120,31 +143,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
>
>{{ item.createdFullName }}
<!-- {{ `(${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="isOperate">
<q-btn
@click.prevent="modalSelectPerson = true"
label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
@ -152,9 +188,9 @@ onMounted(() => {
/>
</div>
<div v-if="isChangeState && state === 2">
<div v-if="isChangeState">
<q-btn
@click.prevent="onConfirmDraft"
@click.prevent="onChangeState"
label="Next Step"
color="primary"
/>
@ -166,7 +202,11 @@ onMounted(() => {
</q-card-section>
</q-card>
<DialogSelectPerson v-model:modal="modalSelectPerson" />
<DialogSelectPerson
v-model:modal="modalSelectPerson"
:state-id="stateId"
:fetch-data="fetchAllFunction"
/>
<DialogApprove v-model:modal="modalApprove" />
<DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
</template>