594 lines
18 KiB
Vue
594 lines
18 KiB
Vue
<script setup lang="ts">
|
|
// NOTE: Library
|
|
import { onMounted, reactive, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
// NOTE: Components
|
|
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
|
|
import DocumentExpansion from './DocumentExpansion.vue';
|
|
import FormExpansion from './FormExpansion.vue';
|
|
import PropertiesExpansion from './PropertiesExpansion.vue';
|
|
|
|
// NOTE: Store
|
|
import { dateFormatJS } from 'src/utils/datetime';
|
|
import { useRequestList } from 'src/stores/request-list';
|
|
import {
|
|
RequestData,
|
|
RequestWork,
|
|
Attributes,
|
|
DocStatus,
|
|
Step,
|
|
RequestWorkStatus,
|
|
} from 'src/stores/request-list/types';
|
|
import useOptionStore from 'src/stores/options';
|
|
import ProductExpansion from './ProductExpansion.vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
|
import { WorkflowTemplate } from 'src/stores/workflow-template/types';
|
|
import { initLang, initTheme, Lang } from 'src/utils/ui';
|
|
import {
|
|
EmployeePassportPayload,
|
|
EmployeeVisaPayload,
|
|
} from 'stores/employee/types';
|
|
|
|
const { locale } = useI18n();
|
|
|
|
// NOTE: Variable
|
|
const route = useRoute();
|
|
const optionStore = useOptionStore();
|
|
const requestListStore = useRequestList();
|
|
const flowTemplateStore = useWorkflowTemplate();
|
|
|
|
const workList = ref<RequestWork[]>();
|
|
const statusFile = ref<Attributes>({
|
|
customer: {},
|
|
employee: {},
|
|
});
|
|
|
|
const refDocumentExpansion = ref<InstanceType<typeof DocumentExpansion>[]>([]);
|
|
const data = ref<RequestData>();
|
|
const flow = ref<WorkflowTemplate>();
|
|
const pageState = reactive({
|
|
hideMetaData: false,
|
|
currentStep: 1,
|
|
});
|
|
|
|
// NOTE: Function
|
|
|
|
async function fetchRequestWorkList(opts: { requestDataId: string }) {
|
|
const res = await requestListStore.getRequestWorkList({
|
|
requestDataId: opts.requestDataId,
|
|
pageSize: 9999,
|
|
});
|
|
|
|
if (res) {
|
|
workList.value = res.result;
|
|
}
|
|
}
|
|
|
|
function getCustomerName(
|
|
record: RequestData,
|
|
opts?: {
|
|
locale?: string;
|
|
noCode?: boolean;
|
|
},
|
|
) {
|
|
const customer = record.quotation.customerBranch;
|
|
|
|
return (
|
|
{
|
|
['CORP']: {
|
|
[Lang.English]: customer.registerNameEN,
|
|
[Lang.Thai]: customer.registerName,
|
|
}[opts?.locale || 'eng'],
|
|
['PERS']:
|
|
{
|
|
[Lang.English]: `${optionStore.mapOption(customer.namePrefix)} ${customer.firstNameEN} ${customer.lastNameEN}`,
|
|
[Lang.Thai]: `${optionStore.mapOption(customer.namePrefix)} ${customer.firstName} ${customer.lastName}`,
|
|
}[opts?.locale || Lang.English] || '-',
|
|
}[customer.customer.customerType] +
|
|
(opts?.noCode ? '' : ' ' + `(${customer.code})`)
|
|
);
|
|
}
|
|
|
|
function getEmployeeName(
|
|
record: RequestData,
|
|
opts?: {
|
|
locale?: string;
|
|
},
|
|
) {
|
|
const employee = record.employee;
|
|
|
|
return (
|
|
{
|
|
[Lang.English]: `${optionStore.mapOption(employee.namePrefix)} ${employee.firstNameEN} ${employee.lastNameEN}`,
|
|
[Lang.Thai]: `${optionStore.mapOption(employee.namePrefix)} ${employee.firstName} ${employee.lastName}`,
|
|
}[opts?.locale || Lang.English] || '-'
|
|
);
|
|
}
|
|
|
|
async function getData() {
|
|
const current = route.params['requestListId'];
|
|
|
|
if (typeof current === 'string') {
|
|
const res = await requestListStore.getRequestData(current);
|
|
|
|
if (res) {
|
|
data.value = res;
|
|
await fetchRequestWorkList({ requestDataId: current });
|
|
await getFlow();
|
|
}
|
|
}
|
|
}
|
|
|
|
async function getFlow() {
|
|
if (!workList.value) return;
|
|
|
|
const attr = workList.value.find((v) => !!v.productService.work?.attributes)
|
|
?.productService.work?.attributes;
|
|
|
|
if (attr && Object.hasOwn(attr, 'workflowId')) {
|
|
const workflowId = attr['workflowId'];
|
|
|
|
const res = await flowTemplateStore.getWorkflowTemplate(workflowId);
|
|
|
|
if (res) flow.value = res;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
initTheme();
|
|
initLang();
|
|
|
|
// get data
|
|
await getData();
|
|
});
|
|
|
|
watch(() => route.params['requestListId'], getData);
|
|
|
|
async function triggerChangeStatusWork(step: Step) {
|
|
const res = await requestListStore.editStatusRequestWork(step);
|
|
if (res) {
|
|
const indexWork = workList.value?.findIndex(
|
|
(v) => v.id === step.requestWorkId,
|
|
);
|
|
if (indexWork === -1 || indexWork === undefined) return;
|
|
if (workList.value === undefined) return;
|
|
|
|
const indexStep = workList.value[indexWork].stepStatus.findIndex(
|
|
(v) => v.step === step.step,
|
|
);
|
|
|
|
if (indexStep === -1) {
|
|
workList.value[indexWork].stepStatus.push(res);
|
|
}
|
|
if (indexStep !== -1) {
|
|
workList.value[indexWork].stepStatus[indexStep].workStatus =
|
|
res.workStatus;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function triggerChangeStatusFile(opt: {
|
|
index: number;
|
|
id: string;
|
|
documentType: string;
|
|
status: DocStatus;
|
|
type: 'customer' | 'employee';
|
|
}) {
|
|
if (!workList.value) return;
|
|
|
|
const workItem = workList.value[opt.index];
|
|
if (!workItem || !workItem.attributes) {
|
|
if (workItem) {
|
|
workItem.attributes = { customer: {}, employee: {} };
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const attributes = workItem.attributes;
|
|
|
|
statusFile.value = attributes;
|
|
if (!statusFile.value[opt.type]) {
|
|
statusFile.value[opt.type] = {};
|
|
}
|
|
|
|
statusFile.value[opt.type]![opt.documentType] = opt.status;
|
|
|
|
const res = await requestListStore.editRequestWork({
|
|
id: opt.id,
|
|
attributes: statusFile.value,
|
|
});
|
|
|
|
if (res) {
|
|
workList.value[opt.index].attributes = res.attributes;
|
|
}
|
|
}
|
|
|
|
async function triggerUpload(opt: {
|
|
id: string;
|
|
type: 'customer' | 'employee';
|
|
group: string;
|
|
file: File;
|
|
form?: EmployeePassportPayload | EmployeeVisaPayload;
|
|
}) {
|
|
const newName = `${opt.group}-${Date.now()}-${opt.file.name}`;
|
|
|
|
const res = await requestListStore.uploadAttachmentRequest({
|
|
...opt,
|
|
name: newName,
|
|
});
|
|
|
|
return !!res;
|
|
}
|
|
|
|
async function triggerViewFile(opt: {
|
|
id: string;
|
|
fileName: string;
|
|
type: 'customer' | 'employee';
|
|
group: string;
|
|
download?: boolean;
|
|
}) {
|
|
let url;
|
|
url = await requestListStore.viewAttachmentRequest({
|
|
id: opt.id,
|
|
name: opt.fileName,
|
|
type: opt.type,
|
|
group: opt.group,
|
|
download: opt.download,
|
|
});
|
|
|
|
if (!opt.download) window.open(url, '_blank');
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="column surface-0 fullscreen" v-if="data">
|
|
<!-- SEC: Header -->
|
|
<header class="row q-px-md q-py-sm items-center full justify-between">
|
|
<div style="flex: 1" class="row items-center">
|
|
<RouterLink to="/quotation">
|
|
<q-img src="/icons/favicon-512x512.png" width="3rem" />
|
|
</RouterLink>
|
|
<span class="column text-h6 text-bold q-ml-md">
|
|
{{ $t('requestList.title') }}
|
|
{{ data.code || '' }}
|
|
<span class="text-caption text-regular app-text-muted">
|
|
{{
|
|
$t('quotation.processOn', {
|
|
msg: dateFormatJS({ date: data.createdAt }),
|
|
})
|
|
}}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- SEC: Body -->
|
|
<main class="col full-width q-pa-md" style="flex-grow: 1; overflow-y: auto">
|
|
<section class="col-sm col-12">
|
|
<div class="col q-gutter-y-md" :key="pageState.currentStep">
|
|
<!-- step -->
|
|
<nav
|
|
v-if="flow"
|
|
class="surface-1 q-pa-sm row no-wrap full-width scroll rounded"
|
|
style="gap: 10px"
|
|
>
|
|
<template v-for="(value, i) in flow.step" :key="value.id">
|
|
<button
|
|
v-if="
|
|
workList?.every(
|
|
(v) =>
|
|
v.productService.work?.attributes.workflowStep[i]
|
|
.attributes.properties.length > 0,
|
|
)
|
|
"
|
|
class="status-color q-pa-sm bordered row items-center cursor-pointer no-wrap"
|
|
style="text-wrap: nowrap"
|
|
:class="{
|
|
['status-color-done']: workList
|
|
?.filter((v) => {
|
|
return v.productService.work?.attributes.workflowStep?.[
|
|
i
|
|
]?.productsId.includes(v.productService.productId);
|
|
})
|
|
.every((v) => {
|
|
const status = v.stepStatus.find(
|
|
({ step }) => step === i + 1,
|
|
)?.workStatus;
|
|
|
|
return (
|
|
status === RequestWorkStatus.Completed ||
|
|
status === RequestWorkStatus.Ended
|
|
);
|
|
}),
|
|
['status-color-doing']: true,
|
|
['step-status-active']: pageState.currentStep === value.order,
|
|
}"
|
|
@click="() => (pageState.currentStep = value.order)"
|
|
>
|
|
<!-- 'quotation-status-active': value.active?.(), -->
|
|
<!-- @click="'waiting' !== 'waiting' && value.handler()" -->
|
|
<div class="q-px-sm">
|
|
<q-icon
|
|
class="icon-color quotation-status"
|
|
style="border-radius: 50%"
|
|
:name="`${pageState.currentStep === value.order ? 'mdi-circle-slice-8' : 'mdi-checkbox-blank-circle-outline'}`"
|
|
/>
|
|
</div>
|
|
<div class="text-left">{{ value.name }}</div>
|
|
</button>
|
|
</template>
|
|
</nav>
|
|
|
|
<!-- meta data -->
|
|
<article class="surface-1 rounded q-pa-sm">
|
|
<div
|
|
class="text-weight-bold row items-center no-wrap"
|
|
style="gap: 16px"
|
|
>
|
|
<q-img src="/images/quotation-avatar.png" width="42px" />
|
|
<span class="ellipsis" style="font-size: 18px">
|
|
{{ data.quotation.workName || '-' }}
|
|
</span>
|
|
<q-btn
|
|
class="q-ml-sm"
|
|
icon="mdi-pin-outline"
|
|
color="primary"
|
|
size="sm"
|
|
flat
|
|
dense
|
|
rounded
|
|
@click="pageState.hideMetaData = !pageState.hideMetaData"
|
|
:style="pageState.hideMetaData ? 'rotate: 90deg' : ''"
|
|
style="transition: 0.1s ease-in-out"
|
|
/>
|
|
</div>
|
|
<transition name="slide">
|
|
<section
|
|
v-if="!pageState.hideMetaData"
|
|
class="q-pt-md"
|
|
:class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
|
|
>
|
|
<div
|
|
class="col q-gutter-y-md"
|
|
:class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
|
|
>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-file-document-outline"
|
|
:label="$t('requestList.requestListCode')"
|
|
:value="data.code || '-'"
|
|
/>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-account-settings-outline"
|
|
:label="$t('customer.employee')"
|
|
:value="
|
|
getEmployeeName(data, { locale: $i18n.locale }) || '-'
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col q-gutter-y-md"
|
|
:class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
|
|
>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-file-document-outline"
|
|
:label="$t('requestList.quotationCode')"
|
|
:value="data.quotation.code || '-'"
|
|
/>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-account-settings-outline"
|
|
:label="$t('customer.employer')"
|
|
:value="
|
|
getCustomerName(data, { locale: locale, noCode: true }) ||
|
|
'-'
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col q-gutter-y-md"
|
|
:class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
|
|
>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-file-document-outline"
|
|
:label="$t('requestList.invoiceCode')"
|
|
:value="'-'"
|
|
/>
|
|
<span class="col"></span>
|
|
</div>
|
|
<div
|
|
class="col q-gutter-y-md"
|
|
:class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
|
|
>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-file-document-outline"
|
|
:label="$t('requestList.receiptCode')"
|
|
:value="'-'"
|
|
/>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-passport"
|
|
:label="$t('customerEmployee.form.passportNo')"
|
|
:value="'-'"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col q-gutter-y-md"
|
|
:class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
|
|
>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-card-account-details-outline"
|
|
:label="$t('requestList.alienIdCard')"
|
|
:value="data.employee.nrcNo"
|
|
/>
|
|
<DataDisplay
|
|
class="col"
|
|
icon="mdi-account-settings-outline"
|
|
:label="$t('flow.responsiblePerson')"
|
|
:value="'-'"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</transition>
|
|
</article>
|
|
<!-- product -->
|
|
<template
|
|
v-for="(value, index) in workList?.filter((v) =>
|
|
v.productService.work?.attributes.workflowStep?.[
|
|
pageState.currentStep - 1
|
|
]?.productsId.includes(v.productService.productId),
|
|
)"
|
|
:key="value"
|
|
>
|
|
<ProductExpansion
|
|
:status="
|
|
value.stepStatus?.find((v) => v.step === pageState.currentStep)
|
|
"
|
|
v-model:product-id="value.productService.productId"
|
|
:name="value.productService.product.name"
|
|
:code="value.productService.product.code"
|
|
:product="value.productService.product"
|
|
@change-status="
|
|
(v) => {
|
|
triggerChangeStatusWork({
|
|
workStatus: v.requestWorkStatus,
|
|
step:
|
|
v.step === undefined
|
|
? pageState.currentStep
|
|
: v.step.step,
|
|
requestWorkId: value.id || '',
|
|
});
|
|
}
|
|
"
|
|
>
|
|
<template v-slot="{ product }">
|
|
<section class="column surface-1 q-pa-sm bordered-t">
|
|
<DocumentExpansion
|
|
ref="refDocumentExpansion"
|
|
:attributes="value.attributes"
|
|
@change-status="
|
|
(opt) => {
|
|
triggerChangeStatusFile({
|
|
index,
|
|
id: value.id || '',
|
|
documentType: opt.key || '',
|
|
status: opt.status,
|
|
type: opt.type || 'customer',
|
|
});
|
|
}
|
|
"
|
|
@view-doc="
|
|
(opt) => {
|
|
triggerViewFile({
|
|
id: opt.id,
|
|
fileName: opt.data.fileName,
|
|
type: opt.type,
|
|
group: opt.data.documentType,
|
|
});
|
|
}
|
|
"
|
|
@upload="
|
|
async (opt, done) => {
|
|
await triggerUpload({ ...opt });
|
|
await done(opt.type || 'customer');
|
|
}
|
|
"
|
|
@download="
|
|
(opt) => {
|
|
console.log(opt);
|
|
|
|
triggerViewFile({
|
|
id: opt.id,
|
|
fileName: opt.data.fileName,
|
|
type: opt.type,
|
|
group: opt.data.documentType,
|
|
download: true,
|
|
});
|
|
}
|
|
"
|
|
:current-id="{
|
|
customer: value.request.quotation.customerBranchId,
|
|
employee: value.request.employeeId,
|
|
}"
|
|
:listDocument="product?.document"
|
|
/>
|
|
<FormExpansion
|
|
:step="{
|
|
step: pageState.currentStep,
|
|
requestWorkId: value.id || '',
|
|
}"
|
|
:id="value.id"
|
|
:attributes-form="
|
|
value.stepStatus?.[pageState.currentStep - 1]?.attributes
|
|
?.form
|
|
"
|
|
/>
|
|
<PropertiesExpansion
|
|
:id="value.id"
|
|
:properties-to-show="
|
|
value.productService.work?.attributes.workflowStep[
|
|
pageState.currentStep - 1
|
|
].attributes.properties
|
|
"
|
|
:attributes="value.attributes"
|
|
/>
|
|
</section>
|
|
</template>
|
|
</ProductExpansion>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.status-color {
|
|
--_color: var(--gray-0);
|
|
border-color: hsla(var(--_color));
|
|
background: hsla(var(--_color) / 0.05);
|
|
border-radius: 4px;
|
|
|
|
.icon-color {
|
|
color: hsla(var(--_color));
|
|
}
|
|
|
|
&.status-color-waiting {
|
|
--_color: var(--gray-4-hsl);
|
|
color: var(--foreground);
|
|
}
|
|
&.status-color-doing {
|
|
--_color: var(--blue-5-hsl);
|
|
color: var(--foreground);
|
|
}
|
|
&.status-color-done {
|
|
--_color: var(--green-5-hsl);
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.step-status-active {
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
transition: 1s box-shadow ease-in-out;
|
|
animation: status 1s infinite;
|
|
}
|
|
|
|
@keyframes status {
|
|
0% {
|
|
box-shadow: 0x 0px 0px hsla(var(--_color) / 0.5);
|
|
}
|
|
50% {
|
|
box-shadow: 0px 0px 1px 4px hsla(var(--_color) / 0.2);
|
|
}
|
|
100% {
|
|
box-shadow: 0px 0px 4px 7px hsla(var(--_color) / 0);
|
|
}
|
|
}
|
|
</style>
|