chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: order => add validation and status change handling in TableEmployee component

Browse source
This commit is contained in:
puriphatt 2024-12-27 10:26:26 +07:00
parent b510e32809
commit 1458a32403
2 changed files with 140 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/pages/09_task-order/TableEmployee.vue
View file

@ -15,6 +15,7 @@ import { TaskStatus } from 'src/stores/task-order/types';
const props = withDefaults(
defineProps<{
validate?: boolean;
checkboxOn?: boolean;
checkAll?: boolean;
stepOn?: boolean;
@ -210,7 +211,47 @@ function handleCheck(
class=""
>
<q-menu :offset="[0, 4]">
<q-list dense>
<q-list v-if="validate">
<q-item
clickable
v-close-popup
class="items-center"
@click="
$emit('changeAllStatus', {
data: selectedEmployee,
status: TaskStatus.Complete,
})
"
>
<q-icon
style="color: hsl(var(--positive-bg))"
name="mdi-file-check-outline"
class="q-pr-sm"
size="xs"
></q-icon>
{{ $t(`taskOrder.status.Complete`) }}
</q-item>
<q-item
clickable
v-close-popup
class="items-center"
@click="
$emit('changeAllStatus', {
data: selectedEmployee,
status: TaskStatus.Redo,
})
"
>
<q-icon
style="color: hsl(var(--negative-bg))"
name="mdi-file-remove-outline"
class="q-pr-sm"
size="xs"
></q-icon>
{{ $t(`taskOrder.status.Redo`) }}
</q-item>
</q-list>
<q-list v-if="!validate" dense>
<q-item
clickable
v-close-popup

132
src/pages/09_task-order/order_view/MainPage.vue
View file

@ -38,6 +38,7 @@ import {
} from 'src/stores/task-order/types';
import { RequestWork } from 'src/stores/request-list';
import { precisionRound } from 'src/utils/arithmetic';
import { getUserId } from 'src/services/keycloak';
const taskOrderFormStore = useTaskOrderForm();
const taskOrderStore = useTaskOrderStore();
@ -83,6 +84,27 @@ const responsibleInstitution = ref<string[]>([]);
const summaryPrice = computed(() => getPrice(taskListGroup.value));
const selectedEmployee = ref<
(RequestWork & {
_template?: {
id: string;
templateName: string;
templateStepName: string;
step: number;
} | null;
})[][][]
>([]);
const failedDialog = ref(false);
const taskStatusRecords = ref<
{
requestWorkId: string;
step: number;
failedComment?: string;
failedType?: string;
code?: string;
}[]
>([]);
function getPrice(
list: {
product: RequestWork['productService']['product'];
@ -199,6 +221,9 @@ const messengerListGroup = computed(() =>
},
],
});
if (selectedEmployee.value.length < acc.length) {
selectedEmployee.value.push([[]]);
}
}
if (indexUser !== -1) {
@ -578,13 +603,50 @@ function taskStatusCount(index: number, id: string) {
}
}
function viewDocument(id: string, routeName: 'order' | 'receive') {
window.open(`/task-order/${id}/doc-product-${routeName}`, '_blank');
}
function handleChangeStatus(
records: {
data: (RequestWork & {
_template?: {
id: string;
templateName: string;
templateStepName: string;
step: number;
} | null;
})[];
status: TaskStatus;
},
messengerIndex: number,
productIndex: number,
) {
const { data, status } = records;
if (data.length === 0) return;
taskStatusRecords.value = data.map((v) => ({
code: `${v.productService.product.code}-${v.request.code}`,
requestWorkId: v.id || '',
step: v._template?.step || 0,
}));
if (status === TaskStatus.Failed) {
failedDialog.value = true;
return;
}
taskOrderFormStore.changeStatus(taskStatusRecords.value, status, () => {
if (!currentFormData.value.id) return;
selectedEmployee.value[messengerIndex][productIndex] = [];
taskOrderFormStore.assignFormData(currentFormData.value.id, 'info');
});
}
watch([currentFormData.value.taskStatus], () => {
fetchStatus();
});
function viewDocument(id: string, routeName: 'order' | 'receive') {
window.open(`/task-order/${id}/doc-prouct-${routeName}`, '_blank');
}
</script>
<template>
<div class="column surface-0 fullscreen">
@ -768,8 +830,8 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
"
>
<InfoMessengerExpansion
v-for="(v, i) in messengerListGroup"
:key="i"
v-for="(v, messengerIndex) in messengerListGroup"
:key="messengerIndex"
:gender="getMessengerName(v.responsibleUser, { gender: true })"
:contact-name="
getMessengerName(v.responsibleUser, { locale: $i18n.locale })
@ -788,7 +850,7 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
{{ $t('menu.product') }}
</FormGroupHead>
<div
v-for="{ product, list } in v.list"
v-for="({ product, list }, productIndex) in v.list"
:key="product.id"
class="bordered-b"
>
@ -848,14 +910,31 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
<div>
<div class="full-width q-pa-sm">
<TableEmployee step-on :rows="list">
<TableEmployee
validate
step-on
:checkbox-on="view === TaskOrderStatus.Validate"
:check-all="view === TaskOrderStatus.Validate"
:rows="list"
@change-all-status="
(v) =>
handleChangeStatus(
v,
messengerIndex,
productIndex,
)
"
v-model:selected-employee="
selectedEmployee[messengerIndex][productIndex]
"
>
<template #append="{ props: subProps }">
<TaskStatusComponent
:no-action="view !== TaskOrderStatus.Validate"
type="order"
:readonly="
fullTaskOrder?.taskList[i].taskStatus ===
TaskStatus.Pending
fullTaskOrder?.taskList[messengerIndex]
.taskStatus === TaskStatus.Pending
"
:status="subProps.row.taskStatus"
@click-failed="
@ -867,31 +946,16 @@ function viewDocument(id: string, routeName: 'order' | 'receive') {
}
"
@change-status="
(status) =>
taskOrderFormStore.changeStatus(
[
{
requestWorkId: subProps.row.id || '',
step: subProps.row._template?.step || 0,
},
],
status,
() => {
subProps.row.taskStatus = status;
if (fullTaskOrder) {
const target =
fullTaskOrder.taskList.find(
(t) =>
t.requestWorkId ===
subProps.row.id,
);
if (target) {
target.taskStatus = status;
}
}
(status) => {
handleChangeStatus(
{
data: [subProps.row],
status: status,
},
)
messengerIndex,
productIndex,
);
}
"
/>
</template>