Merge branch 'develop'
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 10s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 10s
This commit is contained in:
Methapon2001
commit
53b9b392fe
43 changed files with 2384 additions and 153 deletions
|
|
@ -1004,6 +1004,48 @@
|
|||
"label": "Ministry of Labour",
|
||||
"value": "MOL"
|
||||
}
|
||||
],
|
||||
|
||||
"propertiesField": [
|
||||
{
|
||||
"label": "Worker status",
|
||||
"value": "workerStatus",
|
||||
"type": "array"
|
||||
},
|
||||
{
|
||||
"label": "Work type",
|
||||
"value": "workType",
|
||||
"type": "array"
|
||||
},
|
||||
{
|
||||
"label": "Hospital name / Medical entitlement",
|
||||
"value": "hospitalNEntitlement",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "Reference Number (Ref)",
|
||||
"value": "refNo",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "Work Status",
|
||||
"value": "workStatus",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "Contact channels",
|
||||
"value": "contactChannel",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "Remark",
|
||||
"value": "remark",
|
||||
"type": "string"
|
||||
},
|
||||
{ "label": "Document Check", "value": "documentCheck", "type": "string" },
|
||||
{ "label": "Duty", "value": "duty", "type": "string" },
|
||||
{ "label": "Messenger", "value": "messenger", "type": "string" },
|
||||
{ "label": "Form", "value": "designForm", "type": "string" }
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -2013,6 +2055,48 @@
|
|||
"label": "กรมแรงงาน",
|
||||
"value": "MOL"
|
||||
}
|
||||
],
|
||||
|
||||
"propertiesField": [
|
||||
{
|
||||
"label": "สถานะคนงาน",
|
||||
"value": "workerStatus",
|
||||
"type": "array"
|
||||
},
|
||||
{
|
||||
"label": "ประเภทงาน",
|
||||
"value": "workType",
|
||||
"type": "array"
|
||||
},
|
||||
{
|
||||
"label": "ชื่อ รพ./สิทธิการรักษา",
|
||||
"value": "hospitalNEntitlement",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "เลขที่อ้างอิง (Ref)",
|
||||
"value": "refNo",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "สถานะงาน",
|
||||
"value": "workStatus",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "ช่องทางการติดต่อ",
|
||||
"value": "contactChannel",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"label": "หมายเหตุ",
|
||||
"value": "remark",
|
||||
"type": "string"
|
||||
},
|
||||
{ "label": "ตรวจสอบเอกสาร", "value": "documentCheck", "type": "string" },
|
||||
{ "label": "อากร", "value": "duty", "type": "string" },
|
||||
{ "label": "พนักงานส่งเอกสาร", "value": "messenger", "type": "string" },
|
||||
{ "label": "ออกแบบฟอร์ม", "value": "designForm", "type": "string" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ defineProps<{
|
|||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
isax?: boolean;
|
||||
tab?: string;
|
||||
color:
|
||||
| 'green'
|
||||
| 'red'
|
||||
|
|
@ -28,8 +29,8 @@ defineProps<{
|
|||
}[];
|
||||
}>();
|
||||
|
||||
function navigateTo(destination: string) {
|
||||
router.push(`${destination}`);
|
||||
function navigateTo(destination: string, tab?: string) {
|
||||
router.push({ path: `${destination}`, query: tab ? { tab } : {} });
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -44,7 +45,7 @@ function navigateTo(destination: string) {
|
|||
v-for="(v, i) in list.filter((item) => !item.hidden)"
|
||||
:key="i"
|
||||
:bordered="$q.dark.isActive"
|
||||
@click="!v.disabled && navigateTo(v.value)"
|
||||
@click="!v.disabled && navigateTo(v.value, v.tab)"
|
||||
>
|
||||
<AppCircle
|
||||
:id="`menu-icon-${v.value}`"
|
||||
|
|
|
|||
|
|
@ -455,7 +455,12 @@ onMounted(async () => {
|
|||
:key="i"
|
||||
class="surface-2 bordered rounded q-px-xs"
|
||||
>
|
||||
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
||||
{{
|
||||
optionStore.mapOption(
|
||||
att.fieldName ?? '',
|
||||
'propertiesField',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -584,7 +584,12 @@ watch(
|
|||
:key="i"
|
||||
class="surface-2 bordered rounded q-px-xs"
|
||||
>
|
||||
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
||||
{{
|
||||
optionStore.mapOption(
|
||||
att.fieldName ?? '',
|
||||
'propertiesField',
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="app-text-muted-2">
|
||||
|
|
|
|||
226
src/components/04_property-management/FormProperty.vue
Normal file
226
src/components/04_property-management/FormProperty.vue
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
import SelectBranch from '../shared/select/SelectBranch.vue';
|
||||
import SelectInput from '../shared/SelectInput.vue';
|
||||
import ToggleButton from '../button/ToggleButton.vue';
|
||||
import { Status } from 'src/stores/types';
|
||||
|
||||
const name = defineModel<string>('name');
|
||||
const nameEN = defineModel<string>('nameEn');
|
||||
const type = defineModel<Record<string, any>>('type');
|
||||
const registeredBranchId = defineModel<string>('registeredBranchId');
|
||||
const status = defineModel<Status>('status');
|
||||
|
||||
const isAdmin = computed(() => {
|
||||
const roles = getRole() || [];
|
||||
return roles.includes('system');
|
||||
});
|
||||
|
||||
const typeOption = [
|
||||
{
|
||||
label: 'Text',
|
||||
value: 'string',
|
||||
color: 'var(--pink-6-hsl)',
|
||||
icon: 'mdi-alpha-t',
|
||||
},
|
||||
{
|
||||
label: 'Number',
|
||||
value: 'number',
|
||||
color: 'var(--purple-11-hsl)',
|
||||
icon: 'mdi-numeric',
|
||||
},
|
||||
{
|
||||
label: 'Date',
|
||||
value: 'date',
|
||||
color: 'var(--green-9-hsl)',
|
||||
icon: 'mdi-calendar-blank-outline',
|
||||
},
|
||||
{
|
||||
label: 'Selection',
|
||||
value: 'array',
|
||||
color: 'var(--indigo-7-hsl)',
|
||||
icon: 'mdi-code-array',
|
||||
},
|
||||
];
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
onDrawer?: boolean;
|
||||
inputOnly?: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'changeStatus'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="{ 'surface-1 rounded bordered': readonly }"
|
||||
style="border: 1px solid transparent"
|
||||
>
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-map-marker-radius-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t('general.information', { msg: $t('property.title') }) }}
|
||||
<span
|
||||
class="row items-center text-weight-regular text-body2"
|
||||
:class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
|
||||
>
|
||||
<ToggleButton
|
||||
class="q-mr-sm"
|
||||
two-way
|
||||
:model-value="status !== 'INACTIVE'"
|
||||
@click="
|
||||
() => {
|
||||
onDrawer
|
||||
? $emit('changeStatus')
|
||||
: status !== 'INACTIVE'
|
||||
? (status = 'INACTIVE')
|
||||
: (status = 'CREATED');
|
||||
}
|
||||
"
|
||||
/>
|
||||
{{ $t('status.title') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="q-col-gutter-sm row">
|
||||
<SelectBranch
|
||||
v-if="isAdmin"
|
||||
v-model:value="registeredBranchId"
|
||||
:label="$t('quotation.branchVirtual')"
|
||||
class="col-12"
|
||||
:class="{
|
||||
'field-one': inputOnly && $q.screen.gt.sm,
|
||||
'q-mb-sm': inputOnly && $q.screen.lt.md,
|
||||
}"
|
||||
simple
|
||||
required
|
||||
:readonly
|
||||
/>
|
||||
<q-input
|
||||
:for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.name')"
|
||||
:model-value="!readonly ? name : name || '-'"
|
||||
@update:model-value="(v) => (name = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`input-nameEn-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:bg-color="readonly ? 'transparent' : ''"
|
||||
:readonly
|
||||
class="col-md-6 col-12"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
:label="$t('property.dialog.nameEn')"
|
||||
:model-value="!readonly ? nameEN : nameEN || '-'"
|
||||
@update:model-value="(v) => (nameEN = v?.toString() || '')"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
hide-input
|
||||
:fill-input="false"
|
||||
:hide-selected="false"
|
||||
:readonly
|
||||
:for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
|
||||
:label="$t('property.dialog.type')"
|
||||
class="col-md-6 col-12"
|
||||
v-model="type.type"
|
||||
:option="typeOption"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:option="{ scope }">
|
||||
<q-item
|
||||
v-if="scope.opt"
|
||||
v-bind="scope.itemProps"
|
||||
class="row items-center col-12"
|
||||
:id="`type-${scope.itemProps}`"
|
||||
>
|
||||
<q-avatar
|
||||
size="sm"
|
||||
class="q-mr-md"
|
||||
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="20px"
|
||||
:name="scope.opt.icon"
|
||||
:style="`color: hsl(${scope.opt.color})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ scope.opt.label }}
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:selected-item="{ scope }">
|
||||
<div v-if="scope.opt" class="row items-center col-12">
|
||||
<q-avatar
|
||||
size="xs"
|
||||
class="q-mr-sm"
|
||||
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="14px"
|
||||
:name="scope.opt.icon"
|
||||
:style="`color: hsl(${scope.opt.color})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ scope.opt.label }}
|
||||
</div>
|
||||
</template>
|
||||
</SelectInput>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.responsible-search .q-field__control) {
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
|
||||
) {
|
||||
justify-content: start !important;
|
||||
padding-right: 8px !important;
|
||||
padding-top: 16px;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
||||
color: hsl(var(--text-mute));
|
||||
}
|
||||
|
||||
:deep(
|
||||
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
|
||||
) {
|
||||
color: var(--brand-1);
|
||||
}
|
||||
|
||||
:deep(
|
||||
.q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
|
||||
.q-focus-helper
|
||||
) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,7 @@ defineProps<{
|
|||
hideAction?: boolean;
|
||||
useCancel?: boolean;
|
||||
disableCancel?: boolean;
|
||||
useRejectCancel?: boolean;
|
||||
|
||||
customData?: {
|
||||
label: string;
|
||||
|
|
@ -41,6 +42,7 @@ defineEmits<{
|
|||
(e: 'example'): void;
|
||||
(e: 'preview'): void;
|
||||
(e: 'cancel'): void;
|
||||
(e: 'rejectCancel'): void;
|
||||
}>();
|
||||
|
||||
const rand = Math.random();
|
||||
|
|
@ -62,15 +64,16 @@ const rand = Math.random();
|
|||
solid
|
||||
/>
|
||||
</div>
|
||||
<div class="q-mr-sm" style="font-size: 90%">
|
||||
<div class="q-mr-sm col row q-gutter-xs" style="font-size: 90%">
|
||||
<BadgeComponent
|
||||
:title="status"
|
||||
:hsla-color="badgeColor || '--blue-6-hsl'"
|
||||
:border="urgent"
|
||||
/>
|
||||
<slot name="badge"></slot>
|
||||
</div>
|
||||
|
||||
<nav class="col text-right no-wrap">
|
||||
<nav class="text-right no-wrap">
|
||||
<q-btn
|
||||
v-if="!hidePreview"
|
||||
flat
|
||||
|
|
@ -97,6 +100,7 @@ const rand = Math.random();
|
|||
hide-toggle
|
||||
:use-cancel
|
||||
:disable-cancel
|
||||
:use-reject-cancel
|
||||
:hide-delete="hideKebabDelete"
|
||||
:hide-view="hideKebabView"
|
||||
:hide-edit="hideKebabEdit"
|
||||
|
|
@ -106,6 +110,7 @@ const rand = Math.random();
|
|||
@upload="$emit('upload')"
|
||||
@delete="$emit('delete')"
|
||||
@cancel="$emit('cancel')"
|
||||
@reject-cancel="$emit('rejectCancel')"
|
||||
/>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import { formatNumberDecimal } from 'src/stores/utils';
|
||||
|
||||
defineEmits<{ (e: 'labelClick', value: string, index: number | null): void }>();
|
||||
|
||||
|
|
@ -39,7 +38,7 @@ withDefaults(
|
|||
v-if="typeof value === 'string'"
|
||||
@click="$emit('labelClick', value, null)"
|
||||
>
|
||||
{{ formatNumberDecimal(+value, 2) }}
|
||||
{{ value }}
|
||||
<q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
|
||||
</span>
|
||||
<span v-else :class="{ 'link cursor-pointer': clickable }">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ defineProps<{
|
|||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__pill': pill,
|
||||
'main-btn__dark': dark,
|
||||
'main-btn__dark': dark || $q.dark.isActive,
|
||||
'main-btn__icon-only': iconOnly,
|
||||
}"
|
||||
:style="{ '--button-main-color': color }"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
|
|||
|
||||
import useOptionStore from 'src/stores/options';
|
||||
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
||||
import { Option } from 'stores/options/types';
|
||||
import {
|
||||
WorkFlowPayloadStep,
|
||||
WorkflowTemplate,
|
||||
|
|
@ -15,6 +14,12 @@ import SelectFlow from '../shared/select/SelectFlow.vue';
|
|||
import NoData from '../NoData.vue';
|
||||
import DialogForm from '../DialogForm.vue';
|
||||
|
||||
interface Option {
|
||||
value: string;
|
||||
label: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
const { t } = useI18n();
|
||||
const { getWorkflowTemplate } = useWorkflowTemplate();
|
||||
const optionStore = useOptionStore();
|
||||
|
|
@ -90,8 +95,9 @@ function manageProperties(
|
|||
) {
|
||||
if (property === 'all' && propertiesOption.value) {
|
||||
if (
|
||||
tempStep.value[stepIndex].attributes.properties.length ===
|
||||
propertiesOption.value.length
|
||||
tempStep.value[stepIndex].attributes.properties.filter((p) =>
|
||||
propertiesOption.value.some((opt: Option) => opt.value === p.fieldName),
|
||||
).length === propertiesOption.value.length
|
||||
) {
|
||||
tempStep.value[stepIndex].attributes.properties = [];
|
||||
return;
|
||||
|
|
@ -261,8 +267,8 @@ function confirmDelete(items: unknown[], index: number) {
|
|||
});
|
||||
}
|
||||
|
||||
function assignTemp() {
|
||||
propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
|
||||
async function assignTemp() {
|
||||
propertiesOption.value = optionStore.globalOption?.propertiesField;
|
||||
|
||||
tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
|
||||
tempWorkflowId.value = workflowId.value;
|
||||
|
|
@ -385,8 +391,11 @@ watch(
|
|||
<div class="full-width flex items-center">
|
||||
<q-icon
|
||||
v-if="
|
||||
tempStep[stepIndex].attributes.properties?.length ===
|
||||
propertiesOption?.length
|
||||
tempStep[stepIndex].attributes.properties?.filter((p) =>
|
||||
propertiesOption.some(
|
||||
(opt: Option) => opt.value === p.fieldName,
|
||||
),
|
||||
).length === propertiesOption.length
|
||||
"
|
||||
name="mdi-checkbox-marked"
|
||||
size="xs"
|
||||
|
|
@ -407,10 +416,13 @@ watch(
|
|||
<q-item
|
||||
v-for="(ops, index) in propertiesOption"
|
||||
clickable
|
||||
:class="{
|
||||
'bordered-t': index === propertiesOption.length - 4,
|
||||
}"
|
||||
:key="index"
|
||||
@click="manageProperties(stepIndex, ops.value, ops.type)"
|
||||
:for="`list-${ops.value}`"
|
||||
:id="`list-${ops.value}`"
|
||||
@click="manageProperties(stepIndex, ops.value, ops.type)"
|
||||
>
|
||||
<div class="full-width flex items-center no-wrap">
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const props = withDefaults(
|
|||
useLink?: boolean;
|
||||
useUpload?: boolean;
|
||||
useCancel?: boolean;
|
||||
useRejectCancel?: boolean;
|
||||
disableCancel?: boolean;
|
||||
disableDelete?: boolean;
|
||||
}>(),
|
||||
|
|
@ -31,6 +32,7 @@ defineEmits<{
|
|||
(e: 'upload'): void;
|
||||
(e: 'delete'): void;
|
||||
(e: 'cancel'): void;
|
||||
(e: 'rejectCancel'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
}>();
|
||||
|
||||
|
|
@ -193,12 +195,41 @@ watch(
|
|||
}"
|
||||
/>
|
||||
<span class="col-9 q-px-md flex items-center">
|
||||
<slot name="labelDelete">
|
||||
<slot name="labelCancel">
|
||||
{{ $t('general.cancel') }}
|
||||
</slot>
|
||||
</span>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
v-if="useRejectCancel"
|
||||
v-close-popup
|
||||
dense
|
||||
class="row"
|
||||
style="white-space: nowrap"
|
||||
:clickable="!disableCancel"
|
||||
:id="`btn-kebab-delete-${idName}`"
|
||||
:class="{
|
||||
'surface-3': disableCancel,
|
||||
'app-text-muted': disableCancel,
|
||||
}"
|
||||
@click.stop="() => $emit('rejectCancel')"
|
||||
>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-close"
|
||||
class="col-3"
|
||||
:class="{
|
||||
'app-text-negative': !disableCancel,
|
||||
}"
|
||||
/>
|
||||
<span class="col-9 q-px-md flex items-center">
|
||||
<slot name="labelRejectCancel">
|
||||
{{ $t('requestList.status.work.RejectCancel') }}
|
||||
</slot>
|
||||
</span>
|
||||
</q-item>
|
||||
|
||||
<q-item v-if="!hideToggle" dense>
|
||||
<q-item-section class="q-py-sm">
|
||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ export default {
|
|||
unread: 'Unread',
|
||||
all: 'All',
|
||||
read: 'Read',
|
||||
viewALL: 'View All',
|
||||
viewAll: 'View All',
|
||||
markAsRead: 'Mark as Read',
|
||||
},
|
||||
|
||||
|
|
@ -941,6 +941,7 @@ export default {
|
|||
Ended: 'Ended',
|
||||
Completed: 'Completed',
|
||||
Canceled: 'Canceled',
|
||||
RejectCancel: 'Reject cancellation request',
|
||||
},
|
||||
|
||||
Pending: 'Pending',
|
||||
|
|
@ -949,6 +950,8 @@ export default {
|
|||
Completed: 'Completed',
|
||||
Canceled: 'Canceled',
|
||||
CancelRequested: 'Cancel Requested',
|
||||
RejectCancel: 'Rejection of cancellation request',
|
||||
RejectedCancel: 'Cancellation request rejected',
|
||||
|
||||
AwaitOrder: 'Awaiting Order',
|
||||
ReadyOrder: 'Ready for Order',
|
||||
|
|
@ -1360,6 +1363,7 @@ export default {
|
|||
Product: 'Product and Service Report',
|
||||
Sale: 'Sales Summary Report',
|
||||
Profit: 'Profit and Loss Report',
|
||||
Debt: 'Overdue Customer Report',
|
||||
},
|
||||
document: {
|
||||
code: 'Code',
|
||||
|
|
@ -1395,6 +1399,12 @@ export default {
|
|||
expenses: 'Expenses',
|
||||
income: 'Income',
|
||||
},
|
||||
debtReport: {
|
||||
title: 'Overdue Customer Report',
|
||||
customerName: 'Customer Name',
|
||||
unpaid: 'Unpaid',
|
||||
paid: 'Paid',
|
||||
},
|
||||
},
|
||||
dashboard: {
|
||||
title: 'Dashboard',
|
||||
|
|
@ -1443,4 +1453,20 @@ export default {
|
|||
11: 'November',
|
||||
12: 'December',
|
||||
},
|
||||
|
||||
property: {
|
||||
title: 'Property',
|
||||
caption: 'Manage Properties',
|
||||
table: {
|
||||
name: 'Name',
|
||||
nameEn: 'English Name',
|
||||
type: 'Type',
|
||||
},
|
||||
dialog: {
|
||||
title: '',
|
||||
name: 'Name',
|
||||
nameEn: 'English Name',
|
||||
type: 'Type',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@ export default {
|
|||
personnel: 'บุคลากร',
|
||||
productService: 'สินค้าและบริการ',
|
||||
workflow: 'ขั้นตอนการทำงาน',
|
||||
property: 'คุณสมบัติ',
|
||||
customer: 'ลูกค้า',
|
||||
mainData: 'ข้อมูลหลัก',
|
||||
agencies: 'หน่วยงาน',
|
||||
|
|
@ -930,6 +931,7 @@ export default {
|
|||
Ended: 'จบงาน',
|
||||
Completed: 'เสร็จสิ้น',
|
||||
Canceled: 'ยกเลิก',
|
||||
RejectCancel: 'ปฏิเสธคําขอยกเลิก',
|
||||
},
|
||||
Pending: 'รอดำเนินการ',
|
||||
Ready: 'พร้อมดำเนินการ',
|
||||
|
|
@ -937,6 +939,8 @@ export default {
|
|||
Completed: 'เสร็จสิ้น',
|
||||
Canceled: 'ยกเลิก',
|
||||
CancelRequested: 'ต้องการยกเลิก',
|
||||
RejectCancel: 'การปฏิเสธคําขอยกเลิก',
|
||||
RejectedCancel: 'ปฏิเสธคําขอยกเลิกแล้ว',
|
||||
|
||||
AwaitOrder: 'รอสั่งงาน',
|
||||
ReadyOrder: 'พร้อมสั่งงาน',
|
||||
|
|
@ -1340,6 +1344,7 @@ export default {
|
|||
Product: 'รายงานสินค้าและบริการ',
|
||||
Sale: 'รายงานสรุปยอดขาย',
|
||||
Profit: 'รายงานกำไรและขาดทุน',
|
||||
Debt: 'รายงานลูกค้าที่มีหนี้ค้างชำระ',
|
||||
},
|
||||
document: {
|
||||
code: 'รหัส',
|
||||
|
|
@ -1376,6 +1381,12 @@ export default {
|
|||
expenses: 'ต้นทุน',
|
||||
income: 'รายได้',
|
||||
},
|
||||
debtReport: {
|
||||
title: 'รายงานลูกค้าที่มีหนี้ค้างชำระ ',
|
||||
customerName: 'ชื่อลูกค้า',
|
||||
unpaid: 'ยังไม่ได้ชำระ',
|
||||
paid: 'ชำระแล้ว',
|
||||
},
|
||||
},
|
||||
dashboard: {
|
||||
title: 'Dashboard',
|
||||
|
|
@ -1424,4 +1435,20 @@ export default {
|
|||
11: 'พฤศจิกายน',
|
||||
12: 'ธันวาคม',
|
||||
},
|
||||
|
||||
property: {
|
||||
title: 'คุณสมบัติ',
|
||||
caption: 'จัดการคุณสมบัติ',
|
||||
table: {
|
||||
name: 'ชื่อ',
|
||||
nameEn: 'ชื่อภาษาอังกฤษ',
|
||||
type: 'ประเภท',
|
||||
},
|
||||
dialog: {
|
||||
title: '',
|
||||
name: 'ชื่อ',
|
||||
nameEn: 'ชื่อภาษาอังกฤษ',
|
||||
type: 'ประเภท',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -120,6 +120,15 @@ onMounted(async () => {
|
|||
),
|
||||
},
|
||||
{ label: 'workflow', route: '/workflow' },
|
||||
{
|
||||
label: 'property',
|
||||
route: '/property',
|
||||
hidden: !(
|
||||
role.value.includes('admin') ||
|
||||
role.value.includes('head_of_admin') ||
|
||||
role.value.includes('system')
|
||||
),
|
||||
},
|
||||
{ label: 'productService', route: '/product-service' },
|
||||
{ label: 'customer', route: '/customer-management' },
|
||||
{ label: 'agencies', route: '/agencies-management' },
|
||||
|
|
|
|||
|
|
@ -115,8 +115,13 @@ function doLogout() {
|
|||
}
|
||||
|
||||
function readNoti(id: string) {
|
||||
const notification = notificationData.value.find((n) => n.id === id);
|
||||
|
||||
state.notiDialog = true;
|
||||
state.notiId = id;
|
||||
if (notification) {
|
||||
notification.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -307,17 +312,17 @@ onMounted(async () => {
|
|||
}
|
||||
"
|
||||
>
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
<div class="q-pa-sm row col-12 items-center">
|
||||
<div class="text-subtitle1 text-weight-bold">
|
||||
{{ $t('noti.title') }}
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="q-px-md q-pb-md q-gutter-x-md">
|
||||
<div class="q-px-sm q-pb-md">
|
||||
<q-btn
|
||||
rounded
|
||||
padding="0px 10px"
|
||||
class="text-weight-medium"
|
||||
class="text-weight-medium text-capitalize"
|
||||
v-for="(btn, index) in notiMenu"
|
||||
:flat="!btn.active"
|
||||
:unelevated="btn.active"
|
||||
|
|
@ -327,68 +332,82 @@ onMounted(async () => {
|
|||
@click="setActive(btn)"
|
||||
/>
|
||||
</div>
|
||||
<div style="max-height: 30vh; width: 400px; overflow-y: auto">
|
||||
<section
|
||||
v-if="
|
||||
state.filterUnread
|
||||
? notificationData.filter((v) => !v.read).length
|
||||
: notificationData.length
|
||||
"
|
||||
class="caption cursor-pointer"
|
||||
<section
|
||||
v-if="
|
||||
state.filterUnread
|
||||
? notificationData.filter((v) => !v.read).length
|
||||
: notificationData.length
|
||||
"
|
||||
class="caption cursor-pointer scroll"
|
||||
style="max-height: 30vh; width: 300px"
|
||||
>
|
||||
<q-item
|
||||
v-for="(item, i) in state.filterUnread
|
||||
? notificationData.filter((v) => !v.read)
|
||||
: notificationData"
|
||||
dense
|
||||
clickable
|
||||
class="items-center q-py-xs q-px-sm"
|
||||
v-ripple
|
||||
@click="readNoti(item.id)"
|
||||
:key="i"
|
||||
>
|
||||
<q-item
|
||||
v-for="(item, i) in state.filterUnread
|
||||
? notificationData.filter((v) => !v.read)
|
||||
: notificationData"
|
||||
dense
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
v-ripple
|
||||
@click="readNoti(item.id)"
|
||||
:key="i"
|
||||
<div
|
||||
class="rounded q-mr-sm"
|
||||
:style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
|
||||
/>
|
||||
<q-avatar
|
||||
v-if="$q.screen.gt.xs"
|
||||
color="positive"
|
||||
style="height: 36px; width: 36px"
|
||||
>
|
||||
<q-avatar
|
||||
color="positive"
|
||||
style="height: 36px; width: 36px"
|
||||
>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
|
||||
<div class="col-6 column text-caption q-pl-md ellipsis">
|
||||
<span
|
||||
class="block ellipsis full-width text-weight-bold"
|
||||
>
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span class="block ellipsis full-width text-stone">
|
||||
{{ item.detail }}
|
||||
</span>
|
||||
</div>
|
||||
<span align="right" class="col text-caption text-stone">
|
||||
{{ moment(item.createdAt).fromNow() }}
|
||||
<div class="col column text-caption q-pl-md ellipsis">
|
||||
<span class="block ellipsis full-width text-weight-bold">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<q-tooltip
|
||||
anchor="top middle"
|
||||
self="bottom middle"
|
||||
:delay="1000"
|
||||
:offset="[10, 10]"
|
||||
<span
|
||||
class="block ellipsis full-width text-stone"
|
||||
:class="{ 'text-weight-medium': !item.read }"
|
||||
>
|
||||
{{ item.detail }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
</section>
|
||||
<section v-else class="text-center q-py-sm">
|
||||
<span class="app-text-muted">
|
||||
{{ $t('general.noData') }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
align="right"
|
||||
class="text-caption text-stone q-pl-md"
|
||||
:class="{ 'text-weight-bold': !item.read }"
|
||||
>
|
||||
{{ moment(item.createdAt).fromNow() }}
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
<q-tooltip
|
||||
anchor="top middle"
|
||||
self="bottom middle"
|
||||
:delay="1000"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ item.title }}
|
||||
{{ item.detail }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
</section>
|
||||
<section
|
||||
v-else
|
||||
class="text-center q-py-sm"
|
||||
style="max-height: 30vh; width: 300px"
|
||||
>
|
||||
<span class="app-text-muted">
|
||||
{{ $t('general.noData') }}
|
||||
</span>
|
||||
</section>
|
||||
<div class="col bordered-t">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
color="info"
|
||||
class="full-width"
|
||||
class="full-width text-capitalize"
|
||||
@click="() => $router.push('/notification')"
|
||||
>
|
||||
{{ $t('noti.viewAll') }}
|
||||
|
|
|
|||
|
|
@ -75,8 +75,13 @@ async function deleteNoti() {
|
|||
}
|
||||
|
||||
function readNoti(id: string) {
|
||||
const notification = noti.value.find((n) => n.id === id);
|
||||
|
||||
state.notiId = id;
|
||||
state.notiDialog = true;
|
||||
if (notification) {
|
||||
notification.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
@ -203,10 +208,10 @@ onMounted(async () => {
|
|||
class="q-py-sm q-px-md rounded row no-wrap items-center"
|
||||
@click.stop="readNoti(n.id)"
|
||||
>
|
||||
<!-- <div
|
||||
<div
|
||||
class="rounded"
|
||||
:style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
|
||||
/> -->
|
||||
/>
|
||||
<q-checkbox
|
||||
:model-value="selectedNoti.includes(n.id)"
|
||||
size="xs"
|
||||
|
|
|
|||
|
|
@ -1463,7 +1463,7 @@ const currentPropertiesMode = ref<'service' | 'work'>('service');
|
|||
|
||||
function openPropertiesDialog(type: 'service' | 'work') {
|
||||
if (type === 'service') {
|
||||
propertiesOption.value = optionStore.globalOption.servicePropertiesField;
|
||||
propertiesOption.value = optionStore.globalOption.propertiesField;
|
||||
}
|
||||
|
||||
if (type === 'work') {
|
||||
|
|
|
|||
875
src/pages/04_property-managment/MainPage.vue
Normal file
875
src/pages/04_property-managment/MainPage.vue
Normal file
|
|
@ -0,0 +1,875 @@
|
|||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { QSelect, QTableProps } from 'quasar';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { useProperty } from 'src/stores/property';
|
||||
import { useQuasar } from 'quasar';
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
import NoData from 'src/components/NoData.vue';
|
||||
import { watch } from 'vue';
|
||||
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||
import { FloatingActionButton, PaginationComponent } from 'src/components';
|
||||
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
||||
import PropertyDialog from './PropertyDialog.vue';
|
||||
import { Property } from 'src/stores/property/types';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
import CreateButton from 'src/components/AddButton.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const propertyStore = useProperty();
|
||||
const {
|
||||
data: propertyData,
|
||||
page: propertyPage,
|
||||
pageSize: propertyPageSize,
|
||||
pageMax: propertyPageMax,
|
||||
} = storeToRefs(propertyStore);
|
||||
|
||||
const currPropertyData = ref<Property>();
|
||||
const formProperty = ref<Property>({
|
||||
name: '',
|
||||
nameEN: '',
|
||||
type: {},
|
||||
});
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const fieldSelected = ref<('order' | 'name' | 'type')[]>([
|
||||
'order',
|
||||
'name',
|
||||
'type',
|
||||
]);
|
||||
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
||||
{
|
||||
label: 'general.order',
|
||||
value: 'order',
|
||||
},
|
||||
{
|
||||
label: 'property.table.name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
label: 'property.table.type',
|
||||
value: 'type',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'order',
|
||||
align: 'center',
|
||||
label: 'general.order',
|
||||
field: 'order',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
align: 'center',
|
||||
label: 'property.table.name',
|
||||
field: 'order',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'type',
|
||||
align: 'center',
|
||||
label: 'property.table.type',
|
||||
field: 'type',
|
||||
},
|
||||
] satisfies QTableProps['columns'];
|
||||
|
||||
const typeOption = {
|
||||
string: {
|
||||
label: 'Text',
|
||||
value: 'string',
|
||||
color: 'var(--pink-6-hsl)',
|
||||
icon: 'mdi-alpha-t',
|
||||
},
|
||||
number: {
|
||||
label: 'Number',
|
||||
value: 'number',
|
||||
color: 'var(--purple-11-hsl)',
|
||||
icon: 'mdi-numeric',
|
||||
},
|
||||
date: {
|
||||
label: 'Date',
|
||||
value: 'date',
|
||||
color: 'var(--green-9-hsl)',
|
||||
icon: 'mdi-calendar-blank-outline',
|
||||
},
|
||||
array: {
|
||||
label: 'Selection',
|
||||
value: 'array',
|
||||
color: 'var(--indigo-7-hsl)',
|
||||
icon: 'mdi-code-array',
|
||||
},
|
||||
};
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
inputSearch: '',
|
||||
fieldSelected: [],
|
||||
gridView: false,
|
||||
total: 0,
|
||||
|
||||
addModal: false,
|
||||
viewDrawer: false,
|
||||
isDrawerEdit: true,
|
||||
});
|
||||
|
||||
async function fetchPropertyList(mobileFetch?: boolean) {
|
||||
const res = await propertyStore.getPropertyList({
|
||||
page: mobileFetch ? 1 : propertyPage.value,
|
||||
pageSize: mobileFetch
|
||||
? propertyData.value.length +
|
||||
(pageState.total === propertyData.value.length ? 1 : 0)
|
||||
: propertyPageSize.value,
|
||||
query: pageState.inputSearch,
|
||||
status:
|
||||
statusFilter.value === 'all'
|
||||
? undefined
|
||||
: statusFilter.value === 'statusACTIVE'
|
||||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
});
|
||||
if (res) {
|
||||
propertyData.value =
|
||||
$q.screen.xs && !mobileFetch
|
||||
? [...propertyData.value, ...res.result]
|
||||
: res.result;
|
||||
|
||||
propertyPageMax.value = Math.ceil(res.total / propertyPageSize.value);
|
||||
if (pageState.inputSearch || statusFilter.value !== 'all') return;
|
||||
pageState.total = res.total;
|
||||
}
|
||||
}
|
||||
|
||||
function triggerDialog(type: 'add' | 'edit' | 'view') {
|
||||
if (type === 'add') {
|
||||
pageState.addModal = true;
|
||||
pageState.isDrawerEdit = true;
|
||||
}
|
||||
if (type === 'view') {
|
||||
pageState.viewDrawer = true;
|
||||
pageState.isDrawerEdit = false;
|
||||
}
|
||||
if (type === 'edit') {
|
||||
pageState.viewDrawer = true;
|
||||
pageState.isDrawerEdit = true;
|
||||
}
|
||||
}
|
||||
|
||||
function assignFormData(propertyData: Property) {
|
||||
currPropertyData.value = JSON.parse(JSON.stringify(propertyData));
|
||||
formProperty.value = JSON.parse(
|
||||
JSON.stringify({
|
||||
name: propertyData.name,
|
||||
nameEN: propertyData.nameEN,
|
||||
type: propertyData.type,
|
||||
status: propertyData.status,
|
||||
registeredBranchId: propertyData.registeredBranchId,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
currPropertyData.value = undefined;
|
||||
pageState.isDrawerEdit = true;
|
||||
pageState.addModal = false;
|
||||
pageState.viewDrawer = false;
|
||||
formProperty.value = {
|
||||
name: '',
|
||||
nameEN: '',
|
||||
type: {},
|
||||
};
|
||||
}
|
||||
|
||||
async function deleteProperty(id?: string) {
|
||||
const targetId = id || currPropertyData.value?.id;
|
||||
if (targetId === undefined) return;
|
||||
|
||||
dialog({
|
||||
color: 'negative',
|
||||
icon: 'mdi-trash-can-outline',
|
||||
title: t('dialog.title.confirmDelete'),
|
||||
actionText: t('general.delete'),
|
||||
persistent: true,
|
||||
message: t('dialog.message.confirmDelete'),
|
||||
action: async () => {
|
||||
await propertyStore.deleteProperty(targetId);
|
||||
await fetchPropertyList($q.screen.xs);
|
||||
|
||||
resetForm();
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
async function changeStatus(id?: string) {
|
||||
const targetId = id || currPropertyData.value?.id;
|
||||
if (targetId === undefined) return;
|
||||
|
||||
formProperty.value.status =
|
||||
formProperty.value.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE';
|
||||
|
||||
const res = await propertyStore.editProperty({
|
||||
id: targetId,
|
||||
...formProperty.value,
|
||||
});
|
||||
if (res) {
|
||||
formProperty.value.status = res.data.status;
|
||||
if (currPropertyData.value) {
|
||||
currPropertyData.value.status = res.data.status;
|
||||
}
|
||||
await fetchPropertyList();
|
||||
}
|
||||
}
|
||||
|
||||
async function triggerChangeStatus(data?: Property) {
|
||||
const targetId = (data && data.id) || currPropertyData.value?.id;
|
||||
const targetStatus = (data && data.status) || currPropertyData.value?.status;
|
||||
if (data) assignFormData(data);
|
||||
if (targetId === undefined || targetStatus === undefined) return;
|
||||
|
||||
return await new Promise((resolve, reject) => {
|
||||
dialog({
|
||||
color: targetStatus !== 'INACTIVE' ? 'warning' : 'info',
|
||||
icon:
|
||||
targetStatus !== 'INACTIVE'
|
||||
? 'mdi-alert'
|
||||
: 'mdi-message-processing-outline',
|
||||
title: t('dialog.title.confirmChangeStatus'),
|
||||
actionText:
|
||||
targetStatus !== 'INACTIVE' ? t('general.close') : t('general.open'),
|
||||
message:
|
||||
targetStatus !== 'INACTIVE'
|
||||
? t('dialog.message.confirmChangeStatusOff')
|
||||
: t('dialog.message.confirmChangeStatusOn'),
|
||||
action: async () => {
|
||||
await changeStatus(targetId).then(resolve).catch(reject);
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if (!currPropertyData.value) return;
|
||||
assignFormData(currPropertyData.value);
|
||||
pageState.isDrawerEdit = false;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (currPropertyData.value?.id !== undefined) {
|
||||
await propertyStore.editProperty({
|
||||
id: currPropertyData.value.id,
|
||||
...formProperty.value,
|
||||
});
|
||||
} else {
|
||||
await propertyStore.creatProperty({
|
||||
...formProperty.value,
|
||||
});
|
||||
}
|
||||
await fetchPropertyList($q.screen.xs);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'property.title';
|
||||
navigatorStore.current.path = [{ text: 'property.caption', i18n: true }];
|
||||
await fetchPropertyList();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => statusFilter.value,
|
||||
() => {
|
||||
propertyData.value = [];
|
||||
propertyPage.value = 1;
|
||||
fetchPropertyList();
|
||||
},
|
||||
);
|
||||
watch([() => pageState.inputSearch, propertyPageSize], () => {
|
||||
propertyData.value = [];
|
||||
propertyPage.value = 1;
|
||||
fetchPropertyList();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<FloatingActionButton
|
||||
style="z-index: 999"
|
||||
hide-icon
|
||||
@click="triggerDialog('add')"
|
||||
></FloatingActionButton>
|
||||
|
||||
<div class="column full-height no-wrap">
|
||||
<!-- SEC: stat -->
|
||||
<section class="text-body-2 q-mb-xs flex items-center">
|
||||
{{ $t('general.dataSum') }}
|
||||
<q-badge
|
||||
rounded
|
||||
class="q-ml-sm"
|
||||
style="
|
||||
background-color: hsla(var(--info-bg) / 0.15);
|
||||
color: hsl(var(--info-bg));
|
||||
"
|
||||
>
|
||||
{{ pageState.total }}
|
||||
</q-badge>
|
||||
<q-btn
|
||||
class="q-ml-sm"
|
||||
icon="mdi-pin-outline"
|
||||
color="primary"
|
||||
size="sm"
|
||||
flat
|
||||
dense
|
||||
rounded
|
||||
@click="pageState.hideStat = !pageState.hideStat"
|
||||
:style="pageState.hideStat ? 'rotate: 90deg' : ''"
|
||||
style="transition: 0.1s ease-in-out"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<transition name="slide">
|
||||
<div v-if="!pageState.hideStat" class="scroll q-mb-md">
|
||||
<div style="display: inline-block">
|
||||
<StatCardComponent
|
||||
labelI18n
|
||||
:branch="[
|
||||
{
|
||||
icon: 'mdi-tag-text-outline',
|
||||
count: pageState.total,
|
||||
label: 'property.title',
|
||||
color: 'blue',
|
||||
},
|
||||
]"
|
||||
:dark="$q.dark.isActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- SEC: header content -->
|
||||
<section class="col surface-1 rounded bordered overflow-hidden">
|
||||
<div class="column full-height no-wrap">
|
||||
<header
|
||||
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template v-if="$q.screen.lt.md" v-slot:append>
|
||||
<span class="row">
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
icon="mdi-filter-variant"
|
||||
unelevated
|
||||
class="q-ml-sm"
|
||||
padding="4px"
|
||||
size="sm"
|
||||
rounded
|
||||
@click="refFilter?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row col-md-5" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
v-model="statusFilter"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
map-options
|
||||
emit-value
|
||||
:for="'field-select-status'"
|
||||
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||
:options="[
|
||||
{ label: $t('general.all'), value: 'all' },
|
||||
{ label: $t('general.active'), value: 'statusACTIVE' },
|
||||
{ label: $t('general.inactive'), value: 'statusINACTIVE' },
|
||||
]"
|
||||
/>
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col q-ml-sm"
|
||||
:options="
|
||||
fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
label: $t(v.label),
|
||||
}))
|
||||
"
|
||||
:display-value="$t('general.displayField')"
|
||||
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||
v-model="fieldSelected"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
autocomplete="off"
|
||||
map-options
|
||||
emit-value
|
||||
outlined
|
||||
multiple
|
||||
dense
|
||||
/>
|
||||
<q-btn-toggle
|
||||
id="btn-mode"
|
||||
v-model="pageState.gridView"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: true, slot: 'folder' },
|
||||
{ value: false, slot: 'list' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:folder>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="16px"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? pageState.gridView
|
||||
? '#C9D3DB '
|
||||
: '#787B7C'
|
||||
: pageState.gridView
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:list>
|
||||
<q-icon
|
||||
name="mdi-format-list-bulleted"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
size="16px"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? pageState.gridView === false
|
||||
? '#C9D3DB'
|
||||
: '#787B7C'
|
||||
: pageState.gridView === false
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- SEC: body content -->
|
||||
<article
|
||||
v-if="propertyData.length === 0"
|
||||
class="col surface-2 flex items-center justify-center"
|
||||
>
|
||||
<NoData
|
||||
v-if="pageState.total !== 0"
|
||||
:not-found="!!pageState.inputSearch"
|
||||
/>
|
||||
<CreateButton
|
||||
v-if="pageState.total === 0"
|
||||
@click="triggerDialog('add')"
|
||||
label="general.add"
|
||||
:i18n-args="{ text: $t('flow.title') }"
|
||||
/>
|
||||
</article>
|
||||
|
||||
<article v-else class="col q-pa-md surface-2 scroll full-width">
|
||||
<q-infinite-scroll
|
||||
:offset="10"
|
||||
@load="
|
||||
(_, done) => {
|
||||
if ($q.screen.gt.xs || propertyPage === propertyPageMax) return;
|
||||
propertyPage = propertyPage + 1;
|
||||
fetchPropertyList().then(() =>
|
||||
done(propertyPage >= propertyPageMax),
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
:grid="pageState.gridView"
|
||||
:rows="propertyData"
|
||||
:columns="columns"
|
||||
class="full-width"
|
||||
card-container-class="q-col-gutter-md"
|
||||
row-key="name"
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:visible-columns="fieldSelected"
|
||||
>
|
||||
<template #header="{ cols }">
|
||||
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
||||
<q-th
|
||||
v-for="(v, i) in cols"
|
||||
:key="i"
|
||||
:class="{
|
||||
'text-center': v.name === 'order',
|
||||
'text-left': v.name === 'name' || v.name === 'type',
|
||||
}"
|
||||
>
|
||||
{{ $t(v.label) }}
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template #body="props">
|
||||
<q-tr
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
'status-active': props.row.status !== 'INACTIVE',
|
||||
'status-inactive': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
:style="
|
||||
props.rowIndex % 2 !== 0
|
||||
? $q.dark.isActive
|
||||
? 'background: hsl(var(--gray-11-hsl)/0.2)'
|
||||
: `background: #f9fafc`
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<q-td
|
||||
v-if="fieldSelected.includes('order')"
|
||||
class="text-center"
|
||||
style="width: 5%"
|
||||
>
|
||||
{{
|
||||
$q.screen.xs
|
||||
? props.rowIndex + 1
|
||||
: (propertyPage - 1) * propertyPageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</q-td>
|
||||
<q-td v-if="fieldSelected.includes('name')">
|
||||
<section class="row items-center no-wrap">
|
||||
<q-avatar
|
||||
class="q-mr-sm"
|
||||
size="md"
|
||||
style="
|
||||
color: var(--blue-6);
|
||||
background: hsla(var(--blue-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-tag-text-outline" />
|
||||
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.nameEN
|
||||
: props.row.name
|
||||
}}
|
||||
</section>
|
||||
</q-td>
|
||||
|
||||
<q-td
|
||||
style="width: 20%"
|
||||
v-if="fieldSelected.includes('type')"
|
||||
class="text-left"
|
||||
>
|
||||
<q-avatar
|
||||
size="sm"
|
||||
class="q-mr-xs"
|
||||
:style="`background-color: hsla(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="20px"
|
||||
:name="
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].icon
|
||||
"
|
||||
:style="`color: hsl(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{
|
||||
typeOption[props.row.type.type as keyof typeof typeOption]
|
||||
.label
|
||||
}}
|
||||
</q-td>
|
||||
<q-td style="width: 20%" class="text-right">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
:id="`btn-eye-${props.row.name}`"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.name"
|
||||
:status="props.row.status"
|
||||
@view="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('edit');
|
||||
}
|
||||
"
|
||||
@delete="
|
||||
() => {
|
||||
deleteProperty(props.row.id);
|
||||
}
|
||||
"
|
||||
@change-status="
|
||||
() => {
|
||||
triggerChangeStatus(props.row);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item="props">
|
||||
<section class="col-12 col-md-4 column">
|
||||
<div
|
||||
:class="{
|
||||
'status-inactive': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
class="surface-1 rounded bordered row no-wrap col"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="col-md-2 col-3 flex items-center justify-center"
|
||||
style="
|
||||
color: var(--blue-6);
|
||||
background: hsla(var(--blue-6-hsl) / 0.1);
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-tag-text-outline" size="md" />
|
||||
</div>
|
||||
<article class="row q-pa-sm q-gutter-y-sm col">
|
||||
<div
|
||||
v-if="fieldSelected.includes('name')"
|
||||
class="text-weight-bold col-12 ellipsis-2-lines"
|
||||
:class="{
|
||||
'app-text-muted': props.row.status === 'INACTIVE',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.nameEN
|
||||
: props.row.name
|
||||
}}
|
||||
<q-tooltip>
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.nameEN
|
||||
: props.row.name
|
||||
}}
|
||||
</q-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-if="fieldSelected.includes('type')"
|
||||
class="self-end"
|
||||
>
|
||||
<q-avatar
|
||||
size="xs"
|
||||
class="q-mr-xs"
|
||||
:style="`background-color: hsla(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
}/0.2)`"
|
||||
>
|
||||
<q-icon
|
||||
size="16px"
|
||||
:name="
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].icon
|
||||
"
|
||||
:style="`color: hsl(${
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].color
|
||||
})`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{
|
||||
typeOption[
|
||||
props.row.type.type as keyof typeof typeOption
|
||||
].label
|
||||
}}
|
||||
</div>
|
||||
</article>
|
||||
<nav class="q-pa-sm row items-center self-start">
|
||||
<q-btn
|
||||
icon="mdi-eye-outline"
|
||||
size="sm"
|
||||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
/>
|
||||
<KebabAction
|
||||
:id-name="props.row.id"
|
||||
:status="props.row.status"
|
||||
@view="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('view');
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
() => {
|
||||
assignFormData(props.row);
|
||||
triggerDialog('edit');
|
||||
}
|
||||
"
|
||||
@delete="
|
||||
() => {
|
||||
deleteProperty(props.row.id);
|
||||
}
|
||||
"
|
||||
@change-status="
|
||||
() => {
|
||||
triggerChangeStatus(props.row);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
<template v-slot:loading>
|
||||
<div
|
||||
v-if="$q.screen.lt.sm && propertyPage !== propertyPageMax"
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</article>
|
||||
|
||||
<!-- SEC: footer content -->
|
||||
<footer
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
||||
v-if="propertyPageMax > 0 && $q.screen.gt.xs"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
|
||||
{{ $t('general.recordPerPage') }}
|
||||
</div>
|
||||
<div><PaginationPageSize v-model="propertyPageSize" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$q.screen.gt.sm
|
||||
? $t('general.recordsPage', {
|
||||
resultcurrentPage: propertyData.length,
|
||||
total: pageState.inputSearch
|
||||
? propertyData.length
|
||||
: pageState.total,
|
||||
})
|
||||
: $t('general.ofPage', {
|
||||
current: propertyData.length,
|
||||
total: pageState.inputSearch
|
||||
? propertyData.length
|
||||
: pageState.total,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<nav class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="propertyPage"
|
||||
v-model:max-page="propertyPageMax"
|
||||
:fetch-data="() => fetchPropertyList()"
|
||||
/>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<PropertyDialog
|
||||
@change-status="triggerChangeStatus"
|
||||
@drawer-delete="() => deleteProperty()"
|
||||
@drawer-edit="pageState.isDrawerEdit = true"
|
||||
@drawer-undo="() => undo()"
|
||||
@close="() => resetForm()"
|
||||
@submit="() => submit()"
|
||||
:readonly="!pageState.isDrawerEdit"
|
||||
:isEdit="pageState.isDrawerEdit"
|
||||
v-model="pageState.addModal"
|
||||
v-model:property-data="formProperty"
|
||||
v-model:drawer-model="pageState.viewDrawer"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-active {
|
||||
--_branch-status-color: var(--green-6-hsl);
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
--_branch-status-color: var(--stone-5-hsl);
|
||||
--_branch-badge-bg: var(--stone-5-hsl);
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
252
src/pages/04_property-managment/PropertyDialog.vue
Normal file
252
src/pages/04_property-managment/PropertyDialog.vue
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<script lang="ts" setup>
|
||||
import SideMenu from 'src/components/SideMenu.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import FormProperty from 'src/components/04_property-management/FormProperty.vue';
|
||||
import {
|
||||
UndoButton,
|
||||
SaveButton,
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
} from 'src/components/button';
|
||||
import { Property } from 'src/stores/property/types';
|
||||
import { DialogFormContainer, DialogHeader } from 'src/components/dialog';
|
||||
|
||||
const model = defineModel<boolean>({ required: true, default: false });
|
||||
const drawerModel = defineModel<boolean>('drawerModel', {
|
||||
required: true,
|
||||
default: false,
|
||||
});
|
||||
|
||||
const formProperty = defineModel<Property>('propertyData', {
|
||||
required: true,
|
||||
default: {
|
||||
name: '',
|
||||
nameEN: '',
|
||||
type: {},
|
||||
},
|
||||
});
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
isEdit?: boolean;
|
||||
}>(),
|
||||
{ readonly: false, isEdit: false },
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'submit'): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
(e: 'drawerUndo'): void;
|
||||
(e: 'drawerEdit'): void;
|
||||
(e: 'drawerDelete'): void;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<DialogFormContainer
|
||||
width="65vw"
|
||||
height="500px"
|
||||
v-model="model"
|
||||
@submit="() => $emit('submit')"
|
||||
>
|
||||
<template #header>
|
||||
<DialogHeader
|
||||
:title="$t(`general.add`, { text: $t('property.title') })"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<section
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="rounded row"
|
||||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('general.information', {
|
||||
msg: $t('property.title'),
|
||||
}),
|
||||
anchor: 'form-property-dialog',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#flow-form-dialog"
|
||||
></SideMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="form-property-dialog"
|
||||
>
|
||||
<FormProperty
|
||||
v-model:name="formProperty.name"
|
||||
v-model:name-en="formProperty.nameEN"
|
||||
v-model:type="formProperty.type"
|
||||
v-model:registered-branch-id="formProperty.registeredBranchId"
|
||||
v-model:status="formProperty.status"
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</DialogFormContainer>
|
||||
|
||||
<DrawerInfo
|
||||
bg-on
|
||||
hide-action
|
||||
:is-edit="isEdit"
|
||||
:title="propertyData.name"
|
||||
v-model:drawerOpen="drawerModel"
|
||||
:submit="() => $emit('submit')"
|
||||
:close="() => $emit('close')"
|
||||
>
|
||||
<div class="col column full-height">
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
id="drawer-user-form"
|
||||
:class="{
|
||||
'q-px-lg q-py-md': $q.screen.gt.sm,
|
||||
'q-px-md q-py-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||||
>
|
||||
<div
|
||||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
<div
|
||||
v-if="propertyData.status !== 'INACTIVE'"
|
||||
class="surface-1 row rounded"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerUndo');
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="isEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerEdit');
|
||||
// infoDrawerEdit = true;
|
||||
// isImageEdit = true;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!isEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
$emit('drawerDelete');
|
||||
// onDelete(currentUser.id);
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('general.information', {
|
||||
msg: $t('property.title'),
|
||||
}),
|
||||
anchor: 'form-property-dialog',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#flow-form-dialog"
|
||||
></SideMenu>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form-drawer"
|
||||
>
|
||||
<FormProperty
|
||||
onDrawer
|
||||
:readonly="!isEdit"
|
||||
v-model:name="formProperty.name"
|
||||
v-model:name-en="formProperty.nameEN"
|
||||
v-model:type="formProperty.type"
|
||||
v-model:registered-branch-id="formProperty.registeredBranchId"
|
||||
v-model:status="formProperty.status"
|
||||
@change-status="$emit('changeStatus')"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerInfo>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
@ -1756,7 +1756,7 @@ function covertToNode() {
|
|||
</div>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item
|
||||
v-if="view === View.Accepted"
|
||||
v-if="false"
|
||||
for="item-up"
|
||||
id="item-up"
|
||||
dense
|
||||
|
|
@ -2155,7 +2155,7 @@ function covertToNode() {
|
|||
|
||||
<template
|
||||
v-if="
|
||||
(view === View.Quotation || view === View.Payment) &&
|
||||
(view === View.Quotation || view === View.Accepted) &&
|
||||
quotationFormData.id
|
||||
"
|
||||
>
|
||||
|
|
@ -2186,7 +2186,6 @@ function covertToNode() {
|
|||
<div class="surface-1 q-pa-md row" style="gap: var(--size-2)">
|
||||
<SelectInput
|
||||
class="q-mr-xl col-md-3 col-12"
|
||||
incremental
|
||||
v-model="templateForm"
|
||||
id="quotation-branch"
|
||||
:option="templateFormOption"
|
||||
|
|
|
|||
|
|
@ -773,7 +773,12 @@ watch(
|
|||
:key="att"
|
||||
class="bordered q-py-xs q-px-sm rounded"
|
||||
>
|
||||
{{ optionStore.mapOption(att.fieldName) }}
|
||||
{{
|
||||
optionStore.mapOption(
|
||||
att.fieldName,
|
||||
'propertiesField',
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
21
src/pages/08_request-list/FormCancel.vue
Normal file
21
src/pages/08_request-list/FormCancel.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts" setup>
|
||||
const reason = defineModel<string>('reason');
|
||||
</script>
|
||||
<template>
|
||||
<article>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
v-model="reason"
|
||||
hide-bottom-space
|
||||
class="full-height"
|
||||
:label="
|
||||
$t('general.remark', { msg: $t('requestList.status.RejectCancel') })
|
||||
"
|
||||
:rules="[(val) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -11,6 +11,9 @@ import NoData from 'src/components/NoData.vue';
|
|||
import TableRequestList from './TableRequestList.vue';
|
||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
||||
import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
|
||||
import DialogHeader from 'src/components/dialog/DialogHeader.vue';
|
||||
import FormCancel from './FormCancel.vue';
|
||||
|
||||
// NOTE: Stores & Type
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
|
|
@ -19,6 +22,7 @@ import useFlowStore from 'src/stores/flow';
|
|||
import { useRequestList } from 'src/stores/request-list';
|
||||
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
|
||||
import { dialogWarningClose } from 'src/stores/utils';
|
||||
import { CancelButton, SaveButton } from 'src/components/button';
|
||||
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
|
|
@ -37,6 +41,9 @@ const pageState = reactive({
|
|||
fieldSelected: [...column.map((v) => v.name)],
|
||||
gridView: false,
|
||||
total: 0,
|
||||
rejectCancelDialog: false,
|
||||
rejectCancelReason: '',
|
||||
requestId: '',
|
||||
});
|
||||
|
||||
const fieldSelectedOption = computed(() => {
|
||||
|
|
@ -93,6 +100,23 @@ function triggerView(opts: { requestData: RequestData }) {
|
|||
window.open(url.toString(), '_blank');
|
||||
}
|
||||
|
||||
async function submitRejectCancel() {
|
||||
const res = await requestListStore.rejectRequest(pageState.requestId, {
|
||||
reason: pageState.rejectCancelReason,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
const indexRequest = data.value?.findIndex(
|
||||
(v) => v.id === pageState.requestId,
|
||||
);
|
||||
|
||||
data.value[indexRequest].rejectRequestCancel = true;
|
||||
data.value[indexRequest].rejectRequestCancelReason =
|
||||
pageState.rejectCancelReason;
|
||||
pageState.rejectCancelDialog = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
navigatorStore.current.title = 'requestList.title';
|
||||
|
|
@ -357,6 +381,13 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
|
|||
:visible-columns="pageState.fieldSelected"
|
||||
@view="(data) => triggerView({ requestData: data })"
|
||||
@delete="(data) => triggerCancel(data.id)"
|
||||
@reject-cancel="
|
||||
(data) => {
|
||||
pageState.rejectCancelDialog = true;
|
||||
pageState.rejectCancelReason = '';
|
||||
pageState.requestId = data.id;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<template v-slot:loading>
|
||||
<div
|
||||
|
|
@ -409,6 +440,36 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
|
|||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<DialogFormContainer
|
||||
width="60vw"
|
||||
height="40vh"
|
||||
v-model="pageState.rejectCancelDialog"
|
||||
@submit="() => submitRejectCancel()"
|
||||
>
|
||||
<template #header>
|
||||
<DialogHeader :title="$t('requestList.status.work.RejectCancel')" />
|
||||
</template>
|
||||
|
||||
<section class="col q-pa-md scroll">
|
||||
<FormCancel v-model:reason="pageState.rejectCancelReason" />
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<CancelButton
|
||||
class="q-ml-auto"
|
||||
outlined
|
||||
@click="() => (pageState.rejectCancelDialog = false)"
|
||||
/>
|
||||
<SaveButton
|
||||
label="ยืนยัน"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-check"
|
||||
solid
|
||||
type="submit"
|
||||
/>
|
||||
</template>
|
||||
</DialogFormContainer>
|
||||
</div>
|
||||
</template>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ const props = defineProps<{
|
|||
imgUrl?: string;
|
||||
requestCancel?: boolean;
|
||||
requestCancelReason?: string;
|
||||
rejectRequestCancel?: boolean;
|
||||
rejectRequestCancelReason?: string;
|
||||
installmentInfo?: {
|
||||
total: number;
|
||||
paid?: number;
|
||||
|
|
@ -37,7 +39,9 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
|
|||
case RequestWorkStatus.Ready:
|
||||
case RequestWorkStatus.Waiting:
|
||||
case RequestWorkStatus.InProgress:
|
||||
return [RequestWorkStatus.Canceled];
|
||||
return props.requestCancel && !props.rejectRequestCancel
|
||||
? [RequestWorkStatus.Canceled, RequestWorkStatus.RejectCancel]
|
||||
: [RequestWorkStatus.Canceled];
|
||||
case RequestWorkStatus.Validate:
|
||||
case RequestWorkStatus.Ended:
|
||||
case RequestWorkStatus.Completed:
|
||||
|
|
@ -45,12 +49,15 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
|
|||
return [];
|
||||
default:
|
||||
if (props.readonly) return [];
|
||||
const statuses = [
|
||||
RequestWorkStatus.Ready,
|
||||
RequestWorkStatus.Ended,
|
||||
RequestWorkStatus.Canceled,
|
||||
];
|
||||
if (props.orderAble) {
|
||||
return [
|
||||
RequestWorkStatus.Ready,
|
||||
RequestWorkStatus.Ended,
|
||||
RequestWorkStatus.Canceled,
|
||||
];
|
||||
return props.requestCancel && !props.rejectRequestCancel
|
||||
? [...statuses, RequestWorkStatus.RejectCancel]
|
||||
: statuses;
|
||||
} else {
|
||||
return [RequestWorkStatus.Ended, RequestWorkStatus.Canceled];
|
||||
}
|
||||
|
|
@ -101,13 +108,21 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
|
|||
</div>
|
||||
<BadgeComponent
|
||||
v-if="requestCancel && !cancel"
|
||||
:hsla-color="'--red-5-hsl'"
|
||||
:hsla-color="rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'"
|
||||
class="q-ml-sm"
|
||||
:title="$t(`requestList.status.CancelRequested`) || '-'"
|
||||
:title="
|
||||
rejectRequestCancel
|
||||
? $t('requestList.status.RejectedCancel') || '-'
|
||||
: $t(`requestList.status.CancelRequested`) || '-'
|
||||
"
|
||||
>
|
||||
<template #append>
|
||||
<q-tooltip>
|
||||
{{ requestCancelReason || $t('general.noReason') }}
|
||||
{{
|
||||
rejectRequestCancel
|
||||
? rejectRequestCancelReason || $t('general.noReason')
|
||||
: requestCancelReason || $t('general.noReason')
|
||||
}}
|
||||
</q-tooltip>
|
||||
</template>
|
||||
</BadgeComponent>
|
||||
|
|
@ -171,10 +186,11 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
|
|||
clickable
|
||||
v-close-popup
|
||||
class="row items-center"
|
||||
:class="{ 'bordered-t': value === 'RejectCancel' }"
|
||||
@click="
|
||||
$emit('changeStatus', {
|
||||
step: status,
|
||||
requestWorkStatus: value,
|
||||
requestWorkStatus: value as RequestWorkStatus,
|
||||
})
|
||||
"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -164,12 +164,15 @@ defineEmits<{
|
|||
class="row items-center q-pb-sm"
|
||||
>
|
||||
<article class="col-5">
|
||||
{{ i + 1 }} {{ optionStore.mapOption(prop.fieldName) }}
|
||||
{{ i + 1 }}
|
||||
{{ optionStore.mapOption(prop.fieldName, 'propertiesField') }}
|
||||
</article>
|
||||
<PropertiesToInput
|
||||
:readonly="!state.isEdit || readonlyField.includes(prop.fieldName)"
|
||||
:prop="prop"
|
||||
:placeholder="optionStore.mapOption(prop.fieldName)"
|
||||
:placeholder="
|
||||
optionStore.mapOption(prop.fieldName, 'propertiesField')
|
||||
"
|
||||
v-model="formData[prop.fieldName]"
|
||||
/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ enum Step {
|
|||
Configure = 2,
|
||||
}
|
||||
|
||||
const open = defineModel<boolean>('selected', { default: false });
|
||||
const open = defineModel<boolean>({ default: false });
|
||||
const step = ref<Step>(Step.Product);
|
||||
const selected = ref<{ _work: RequestWork }[]>([]);
|
||||
const form = reactive({
|
||||
|
|
|
|||
|
|
@ -11,10 +11,13 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
|
|||
import FormGroupHead from './FormGroupHead.vue';
|
||||
import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
|
||||
import { StateButton } from 'components/button';
|
||||
import { CancelButton, MainButton } from 'components/button';
|
||||
import { CancelButton, MainButton, SaveButton } from 'components/button';
|
||||
import DutyExpansion from './DutyExpansion.vue';
|
||||
import MessengerExpansion from './MessengerExpansion.vue';
|
||||
import RequestAction from './RequestAction.vue';
|
||||
import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
|
||||
import DialogHeader from 'src/components/dialog/DialogHeader.vue';
|
||||
import FormCancel from './FormCancel.vue';
|
||||
|
||||
// NOTE: Store
|
||||
import {
|
||||
|
|
@ -104,6 +107,9 @@ const pageState = reactive({
|
|||
hideMetaData: false,
|
||||
currentStep: 1,
|
||||
requestActionDialog: false,
|
||||
rejectCancelDialog: false,
|
||||
rejectCancelReason: '',
|
||||
requestWorkId: '',
|
||||
});
|
||||
|
||||
// NOTE: Function
|
||||
|
|
@ -173,6 +179,14 @@ async function triggerChangeStatusWork(step: Step, responsibleUserId?: string) {
|
|||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (step.workStatus === 'RejectCancel') {
|
||||
pageState.rejectCancelDialog = true;
|
||||
pageState.rejectCancelReason = '';
|
||||
pageState.requestWorkId = step.requestWorkId;
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await requestListStore.editStatusRequestWork(step);
|
||||
if (res) {
|
||||
const indexWork = workList.value?.findIndex(
|
||||
|
|
@ -400,6 +414,30 @@ async function submitRequestAction(data: {
|
|||
pageState.requestActionDialog = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRejectCancel() {
|
||||
const current = route.params['requestListId'];
|
||||
if (typeof current !== 'string') return;
|
||||
|
||||
const res = await requestListStore.rejectRequestWork(
|
||||
current,
|
||||
pageState.requestWorkId,
|
||||
{
|
||||
reason: pageState.rejectCancelReason,
|
||||
},
|
||||
);
|
||||
|
||||
if (res) {
|
||||
const indexWork = workList.value?.findIndex(
|
||||
(v) => v.id === pageState.requestWorkId,
|
||||
);
|
||||
|
||||
workList.value[indexWork].rejectRequestCancel = true;
|
||||
workList.value[indexWork].rejectRequestCancelReason =
|
||||
pageState.rejectCancelReason;
|
||||
pageState.rejectCancelDialog = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="column surface-0 fullscreen" v-if="data">
|
||||
|
|
@ -599,8 +637,8 @@ async function submitRequestAction(data: {
|
|||
data.quotation?.invoice?.map((i: Invoice) => i.code)
|
||||
"
|
||||
@label-click="
|
||||
(_: string, i: number) => {
|
||||
if (!data) return;
|
||||
(value: string, index: number | null) => {
|
||||
if (!data || index === null) return;
|
||||
|
||||
data.quotation.isDebitNote
|
||||
? goToDebitNote({
|
||||
|
|
@ -609,8 +647,8 @@ async function submitRequestAction(data: {
|
|||
})
|
||||
: goToQuotation(data.quotation, {
|
||||
tab: 'invoice',
|
||||
id: data.quotation.invoice?.[i]?.id,
|
||||
amount: data.quotation.invoice?.[i]?.amount,
|
||||
id: data.quotation.id,
|
||||
amount: data.quotation.invoice?.[index]?.amount,
|
||||
});
|
||||
}
|
||||
"
|
||||
|
|
@ -733,6 +771,8 @@ async function submitRequestAction(data: {
|
|||
<ProductExpansion
|
||||
:request-cancel="value.customerRequestCancel"
|
||||
:request-cancel-reason="value.customerRequestCancelReason"
|
||||
:reject-request-cancel="value.rejectRequestCancel"
|
||||
:reject-request-cancel-reason="value.rejectRequestCancelReason"
|
||||
:cancel="data.requestDataStatus === RequestDataStatus.Canceled"
|
||||
:readonly="
|
||||
data.requestDataStatus === RequestDataStatus.Canceled ||
|
||||
|
|
@ -929,5 +969,35 @@ async function submitRequestAction(data: {
|
|||
:responsible-district-id="data?.quotation.customerBranch.districtId || ''"
|
||||
@submit="submitRequestAction"
|
||||
/>
|
||||
|
||||
<DialogFormContainer
|
||||
width="60vw"
|
||||
height="40vh"
|
||||
v-model="pageState.rejectCancelDialog"
|
||||
@submit="() => submitRejectCancel()"
|
||||
>
|
||||
<template #header>
|
||||
<DialogHeader :title="$t('requestList.status.work.RejectCancel')" />
|
||||
</template>
|
||||
|
||||
<section class="col q-pa-md scroll">
|
||||
<FormCancel v-model:reason="pageState.rejectCancelReason" />
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<CancelButton
|
||||
class="q-ml-auto"
|
||||
outlined
|
||||
@click="() => (pageState.rejectCancelDialog = false)"
|
||||
/>
|
||||
<SaveButton
|
||||
label="ยืนยัน"
|
||||
class="q-ml-sm"
|
||||
icon="mdi-check"
|
||||
solid
|
||||
type="submit"
|
||||
/>
|
||||
</template>
|
||||
</DialogFormContainer>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ const props = withDefaults(
|
|||
defineEmits<{
|
||||
(e: 'view', data: RequestData): void;
|
||||
(e: 'delete', data: RequestData): void;
|
||||
(e: 'rejectCancel', data: RequestData): void;
|
||||
}>();
|
||||
|
||||
function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
|
||||
|
|
@ -188,15 +189,24 @@ function getEmployeeName(
|
|||
props.row.customerRequestCancel &&
|
||||
props.row.requestDataStatus !== RequestDataStatus.Canceled
|
||||
"
|
||||
:hsla-color="'--red-5-hsl'"
|
||||
:hsla-color="
|
||||
props.row.rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'
|
||||
"
|
||||
:title="
|
||||
props.row.rejectRequestCancel
|
||||
? $t('requestList.status.RejectedCancel') || '-'
|
||||
: $t(`requestList.status.CancelRequested`) || '-'
|
||||
"
|
||||
class="q-ml-sm"
|
||||
:title="$t(`requestList.status.CancelRequested`) || '-'"
|
||||
>
|
||||
<template #append>
|
||||
<q-tooltip>
|
||||
{{
|
||||
props.row.customerRequestCancelReason ||
|
||||
$t('general.noReason')
|
||||
props.row.rejectRequestCancel
|
||||
? props.row.rejectRequestCancelReason ||
|
||||
$t('general.noReason')
|
||||
: props.row.customerRequestCancelReason ||
|
||||
$t('general.noReason')
|
||||
}}
|
||||
</q-tooltip>
|
||||
</template>
|
||||
|
|
@ -220,11 +230,15 @@ function getEmployeeName(
|
|||
hide-view
|
||||
hide-delete
|
||||
use-cancel
|
||||
:use-reject-cancel="
|
||||
props.row.customerRequestCancel && !props.row.rejectRequestCancel
|
||||
"
|
||||
:disable-cancel="
|
||||
props.row.requestDataStatus === RequestDataStatus.Canceled ||
|
||||
props.row.requestDataStatus === RequestDataStatus.Completed
|
||||
"
|
||||
@cancel="$emit('delete', props.row)"
|
||||
@reject-cancel="$emit('rejectCancel', props.row)"
|
||||
/>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
|
|
@ -242,6 +256,10 @@ function getEmployeeName(
|
|||
hide-kebab-edit
|
||||
hide-kebab-delete
|
||||
use-cancel
|
||||
class="full-height"
|
||||
:use-reject-cancel="
|
||||
props.row.customerRequestCancel && !props.row.rejectRequestCancel
|
||||
"
|
||||
:disable-cancel="
|
||||
props.row.requestDataStatus === RequestDataStatus.Canceled ||
|
||||
props.row.requestDataStatus === RequestDataStatus.Completed
|
||||
|
|
@ -285,6 +303,7 @@ function getEmployeeName(
|
|||
]"
|
||||
@view="$emit('view', props.row)"
|
||||
@cancel="$emit('delete', props.row)"
|
||||
@reject-cancel="$emit('rejectCancel', props.row)"
|
||||
>
|
||||
<template v-slot:responsiblePerson="{ props: subProps }">
|
||||
<div class="col-4 app-text-muted q-pr-sm">
|
||||
|
|
@ -312,6 +331,35 @@ function getEmployeeName(
|
|||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #badge>
|
||||
<BadgeComponent
|
||||
v-if="
|
||||
props.row.customerRequestCancel &&
|
||||
props.row.requestDataStatus !== RequestDataStatus.Canceled
|
||||
"
|
||||
:hsla-color="
|
||||
props.row.rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'
|
||||
"
|
||||
:title="
|
||||
props.row.rejectRequestCancel
|
||||
? $t('requestList.status.RejectedCancel') || '-'
|
||||
: $t(`requestList.status.CancelRequested`) || '-'
|
||||
"
|
||||
>
|
||||
<template #append>
|
||||
<q-tooltip>
|
||||
{{
|
||||
props.row.rejectRequestCancel
|
||||
? props.row.rejectRequestCancelReason ||
|
||||
$t('general.noReason')
|
||||
: props.row.customerRequestCancelReason ||
|
||||
$t('general.noReason')
|
||||
}}
|
||||
</q-tooltip>
|
||||
</template>
|
||||
</BadgeComponent>
|
||||
</template>
|
||||
</QuotationCard>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { computed, onMounted, reactive, watch, ref } from 'vue';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// NOTE: Components
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
|
|
@ -29,6 +30,7 @@ import { PaginationResult } from 'src/types';
|
|||
|
||||
const { t } = useI18n();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const taskOrderStore = useTaskOrderStore();
|
||||
|
|
@ -143,6 +145,10 @@ onMounted(async () => {
|
|||
navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
|
||||
fetchTaskOrderList();
|
||||
taskOrderStore.getTaskOrderStats();
|
||||
|
||||
if (route.query['tab'] && typeof route.query['tab'] === 'string') {
|
||||
pageState.currentTab = route.query['tab'];
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const visible = computed(() =>
|
|||
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||
>
|
||||
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
||||
<q-td v-for="col in visible" :align="col.align">
|
||||
<q-td v-for="col in visible" :align="col.align" :key="col.name">
|
||||
<!-- NOTE: custom column will starts with # -->
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
<span v-if="col.name !== 'quotationPayment'">
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const columns = [
|
|||
name: 'creditNoteValue',
|
||||
align: 'center',
|
||||
label: 'debitNote.label.value',
|
||||
field: (data: DebitNote) => formatNumberDecimal(data.totalPrice),
|
||||
field: (data: DebitNote) => formatNumberDecimal(data.finalPrice),
|
||||
},
|
||||
{
|
||||
name: '#action',
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import {
|
|||
colProfit,
|
||||
colProfitByMoth,
|
||||
colProfitByYear,
|
||||
colProfitDebtReport,
|
||||
} from './constants';
|
||||
import useFlowStore from 'src/stores/flow';
|
||||
import { useReportStore } from 'src/stores/report';
|
||||
|
|
@ -29,6 +30,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
|
|||
import Expansion from 'src/components/14_report/Expansion.vue';
|
||||
import { SaveButton } from 'src/components/button';
|
||||
import { ReportProfit } from 'src/stores/report/types';
|
||||
import { dateFormatJS } from 'src/utils/datetime';
|
||||
|
||||
// NOTE: Variable
|
||||
const navigatorStore = useNavigator();
|
||||
|
|
@ -46,8 +48,16 @@ const {
|
|||
dataReportSale,
|
||||
dataReportProduct,
|
||||
dataReportProfit,
|
||||
detaReportDept,
|
||||
} = storeToRefs(reportStore);
|
||||
|
||||
const endDate = new Date();
|
||||
const startDate = new Date(new Date().setFullYear(endDate.getFullYear() - 1));
|
||||
|
||||
const state = reactive({
|
||||
date: [startDate, endDate],
|
||||
});
|
||||
|
||||
const userRoles = computed(() => getRole() || []);
|
||||
|
||||
const combinedProfitYear = computed(() => {
|
||||
|
|
@ -72,24 +82,48 @@ const combinedProfitYear = computed(() => {
|
|||
});
|
||||
|
||||
async function fetchReportQuotation() {
|
||||
dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
|
||||
dataReportQuotation.value =
|
||||
(await reportStore.getReportQuotation({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || [];
|
||||
}
|
||||
async function fetchReportInvoice() {
|
||||
dataReportInvoice.value = (await reportStore.getReportInvoice()) || [];
|
||||
dataReportInvoice.value =
|
||||
(await reportStore.getReportInvoice({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || [];
|
||||
}
|
||||
|
||||
async function fetchReportReceipt() {
|
||||
dataReportReceipt.value = (await reportStore.getReportReceipt()) || [];
|
||||
dataReportReceipt.value =
|
||||
(await reportStore.getReportReceipt({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || [];
|
||||
}
|
||||
async function fetchReportSale() {
|
||||
dataReportSale.value = (await reportStore.getReportSale()) || undefined;
|
||||
dataReportSale.value =
|
||||
(await reportStore.getReportSale({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || undefined;
|
||||
}
|
||||
async function fetchReportProduct() {
|
||||
dataReportProduct.value = (await reportStore.getReportProduct()) || [];
|
||||
dataReportProduct.value =
|
||||
(await reportStore.getReportProduct({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || [];
|
||||
}
|
||||
|
||||
async function fetchReportProfit() {
|
||||
dataReportProfit.value = (await reportStore.getReportProfit()) || undefined;
|
||||
dataReportProfit.value =
|
||||
(await reportStore.getReportProfit({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})) || undefined;
|
||||
dataReportProfitByYears.value = dataReportProfit.value?.dataset || [];
|
||||
}
|
||||
|
||||
|
|
@ -98,6 +132,10 @@ async function fetchReportProfitByYears(years: number) {
|
|||
dataReportProfitByYears.value = res?.dataset || [];
|
||||
}
|
||||
|
||||
async function fetchReportDept() {
|
||||
detaReportDept.value = (await reportStore.getReportDept()) || [];
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'report.title';
|
||||
navigatorStore.current.path = [{ text: '' }];
|
||||
|
|
@ -146,6 +184,10 @@ async function fetchReportTab() {
|
|||
await fetchReportProfit();
|
||||
break;
|
||||
}
|
||||
case ViewMode.DebtReport: {
|
||||
await fetchReportDept();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +195,7 @@ onMounted(async () => {
|
|||
await fetchReportTab();
|
||||
});
|
||||
|
||||
watch([() => pageState.currentTab], async () => {
|
||||
watch([() => pageState.currentTab, () => state.date], async () => {
|
||||
await fetchReportTab();
|
||||
});
|
||||
|
||||
|
|
@ -164,9 +206,50 @@ watch([() => pastYears.value], async () => {
|
|||
|
||||
<template>
|
||||
<div class="column full-height no-wrap">
|
||||
<div class="row q-mb-sm">
|
||||
<VueDatePicker
|
||||
utc
|
||||
range
|
||||
teleport
|
||||
auto-apply
|
||||
for="select-date-range"
|
||||
class="col-md-3 col"
|
||||
v-model="state.date"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
placeholder="DD/MM/YYYY"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
for="select-date-range"
|
||||
:model-value="
|
||||
dateFormatJS({ date: state.date[0] }) +
|
||||
' - ' +
|
||||
dateFormatJS({ date: state.date[1] })
|
||||
"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-calendar-outline" class="app-text-muted" />
|
||||
</template>
|
||||
<q-tooltip>
|
||||
{{
|
||||
dateFormatJS({ date: state.date[0] }) +
|
||||
' - ' +
|
||||
dateFormatJS({ date: state.date[1] })
|
||||
}}
|
||||
</q-tooltip>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
|
||||
<section class="col surface-1 rounded bordered overflow-hidden">
|
||||
<div class="column full-height">
|
||||
<!-- SEC: header content -->
|
||||
|
||||
<header
|
||||
class="row surface-3 justify-between full-width items-center"
|
||||
style="z-index: 1"
|
||||
|
|
@ -222,7 +305,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportQuotation()"
|
||||
@click.stop="
|
||||
reportStore.downloadReportQuotation({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -263,7 +351,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportInvoice()"
|
||||
@click.stop="
|
||||
reportStore.downloadReportInvoice({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -303,7 +396,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportReceipt()"
|
||||
@click.stop="
|
||||
reportStore.downloadReportReceipt({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -345,7 +443,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportInvoice()"
|
||||
@click.stop="
|
||||
reportStore.downloadReportInvoice({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -386,7 +489,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportInvoice()"
|
||||
@click.stop="
|
||||
reportStore.downloadReportInvoice({
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -409,7 +517,10 @@ watch([() => pastYears.value], async () => {
|
|||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="
|
||||
reportStore.downloadReportSale('by-customer')
|
||||
reportStore.downloadReportSale('by-customer', {
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -450,7 +561,10 @@ watch([() => pastYears.value], async () => {
|
|||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="
|
||||
reportStore.downloadReportSale('by-product-group')
|
||||
reportStore.downloadReportSale('by-product-group', {
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -482,7 +596,12 @@ watch([() => pastYears.value], async () => {
|
|||
style="margin-left: auto"
|
||||
:icon="'material-symbols:download'"
|
||||
:label="$t('general.download')"
|
||||
@click.stop="reportStore.downloadReportSale('by-sale')"
|
||||
@click.stop="
|
||||
reportStore.downloadReportSale('by-sale', {
|
||||
startDate: state.date[0],
|
||||
endDate: state.date[1],
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -636,6 +755,36 @@ watch([() => pastYears.value], async () => {
|
|||
</Expansion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="pageState.currentTab === ViewMode.DebtReport">
|
||||
<Expansion default-opened>
|
||||
<template #header>
|
||||
<div class="flex full-width items-center">
|
||||
{{ $t('report.debtReport.title') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #main>
|
||||
<TableReport
|
||||
:row="
|
||||
detaReportDept.map((v) => ({
|
||||
customerName:
|
||||
v.customerBranch.customer.customerType === 'CORP'
|
||||
? $i18n.locale === 'eng'
|
||||
? v.customerBranch.registerNameEN
|
||||
: v.customerBranch.registerName
|
||||
: $i18n.locale === 'eng'
|
||||
? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
|
||||
: `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
|
||||
unpaid: v.unpaid,
|
||||
paid: v.paid,
|
||||
}))
|
||||
"
|
||||
:columns="colProfitDebtReport"
|
||||
></TableReport>
|
||||
</template>
|
||||
</Expansion>
|
||||
</template>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { QTableProps } from 'quasar';
|
||||
import { Invoice, Receipt } from 'src/stores/payment/types';
|
||||
import {
|
||||
CustomerDept,
|
||||
Report,
|
||||
ReportProduct,
|
||||
ReportQuotation,
|
||||
|
|
@ -15,6 +15,7 @@ export enum ViewMode {
|
|||
Product = 'product',
|
||||
Sale = 'sale',
|
||||
Profit = 'profit',
|
||||
DebtReport = 'debtReport',
|
||||
}
|
||||
|
||||
type ColumnsSale = {
|
||||
|
|
@ -48,6 +49,10 @@ type ColumnsProfixByYear = Omit<ColumnsProfixByMonth, 'moth'> & {
|
|||
income: number;
|
||||
};
|
||||
|
||||
type ColumnsDebt = Omit<CustomerDept, 'customerBranch'> & {
|
||||
customerName: string;
|
||||
};
|
||||
|
||||
export const colReportQuotation = [
|
||||
{
|
||||
name: 'code',
|
||||
|
|
@ -260,10 +265,33 @@ export const colProfitByYear = [
|
|||
field: (data: ColumnsProfixByYear) => formatNumberDecimal(data.income, 2),
|
||||
},
|
||||
] as const satisfies QTableProps['columns'];
|
||||
|
||||
export const colProfitDebtReport = [
|
||||
{
|
||||
name: 'customerName',
|
||||
align: 'left',
|
||||
label: 'report.debtReport.customerName',
|
||||
field: (data: ColumnsDebt) => data.customerName,
|
||||
},
|
||||
{
|
||||
name: 'unpaid',
|
||||
align: 'left',
|
||||
label: 'report.debtReport.unpaid',
|
||||
field: (data: ColumnsDebt) => formatNumberDecimal(data.unpaid, 2),
|
||||
},
|
||||
{
|
||||
name: 'paid',
|
||||
align: 'left',
|
||||
label: 'report.debtReport.paid',
|
||||
field: (data: ColumnsDebt) => formatNumberDecimal(data.paid, 2),
|
||||
},
|
||||
] as const satisfies QTableProps['columns'];
|
||||
|
||||
export const pageTabs = [
|
||||
{ label: 'Document', value: ViewMode.Document, by: ['user'] },
|
||||
{ label: 'Invoice', value: ViewMode.Invoice, by: ['user'] },
|
||||
{ label: 'Product', value: ViewMode.Product, by: ['user'] },
|
||||
{ label: 'Sale', value: ViewMode.Sale, by: ['admin'] },
|
||||
{ label: 'Profit', value: ViewMode.Profit, by: ['admin'] },
|
||||
{ label: 'Debt', value: ViewMode.DebtReport, by: ['admin'] },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ watch(
|
|||
teleport
|
||||
auto-apply
|
||||
for="select-date-range"
|
||||
class="col-md-4 col"
|
||||
class="col-md-3 col"
|
||||
v-model="state.date"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
|
||||
|
|
@ -118,6 +118,13 @@ watch(
|
|||
<template #prepend>
|
||||
<q-icon name="mdi-calendar-outline" class="app-text-muted" />
|
||||
</template>
|
||||
<q-tooltip>
|
||||
{{
|
||||
dateFormatJS({ date: state.date[0] }) +
|
||||
' - ' +
|
||||
dateFormatJS({ date: state.date[1] })
|
||||
}}
|
||||
</q-tooltip>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
import VueApexCharts, { VueApexChartsComponent } from 'vue3-apexcharts';
|
||||
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { locale } = useI18n({ useScope: 'global' });
|
||||
import { formatNumberDecimal } from 'src/stores/utils';
|
||||
|
||||
const prop = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -22,12 +21,14 @@ const prop = withDefaults(
|
|||
categories: () => ['Jan', 'Feb', 'Mar'],
|
||||
},
|
||||
);
|
||||
const chartOptions = computed(() => {
|
||||
|
||||
const chartOptions = computed<VueApexChartsComponent['options']>(() => {
|
||||
return {
|
||||
colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
|
||||
chart: {
|
||||
fontFamily: 'Noto Sans Thai',
|
||||
type: 'line',
|
||||
foreColor: 'var(--foreground)',
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
|
|
@ -91,7 +92,7 @@ const detail = [
|
|||
</q-avatar>
|
||||
<DataDisplay
|
||||
:label="$t(`dashboard.receipt.${v.label}`)"
|
||||
:value="summary[i].toString()"
|
||||
:value="formatNumberDecimal(summary[i], 2)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,12 +84,12 @@ onMounted(() => {
|
|||
isax: true,
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
value: 'task-order',
|
||||
icon: 'material-symbols:box',
|
||||
color: 'camo',
|
||||
title: 'menu.invoice',
|
||||
caption: 'menu.invoiceCaption',
|
||||
disabled: true,
|
||||
tab: 'Complete',
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
|
|
@ -99,23 +99,22 @@ onMounted(() => {
|
|||
caption: 'menu.accountingLedgerCaption',
|
||||
isax: true,
|
||||
disabled: true,
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
value: 'report',
|
||||
icon: 'mdi-file-document',
|
||||
color: 'indigo',
|
||||
title: 'menu.report',
|
||||
caption: 'menu.reportCaption',
|
||||
},
|
||||
{
|
||||
value: 'dash-board',
|
||||
icon: 'isax-element-35',
|
||||
color: 'cyan',
|
||||
title: 'menu.dashboard',
|
||||
caption: 'menu.dashboardCaption',
|
||||
isax: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
icon: 'mdi-file-document',
|
||||
color: 'indigo',
|
||||
title: 'menu.report',
|
||||
caption: 'menu.reportCaption',
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
|
|
|||
|
|
@ -80,6 +80,11 @@ const routes: RouteRecordRaw[] = [
|
|||
name: 'Workflow',
|
||||
component: () => import('pages/04_flow-managment/MainPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/property',
|
||||
name: 'Property',
|
||||
component: () => import('pages/04_property-managment/MainPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/quotation',
|
||||
name: 'Quotation',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { ref, watch } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useProperty } from 'src/stores/property';
|
||||
import { toCamelCase } from '../utils';
|
||||
|
||||
const useOptionStore = defineStore('optionStore', () => {
|
||||
const { getPropertyList } = useProperty();
|
||||
const { locale } = useI18n();
|
||||
|
||||
const globalOption = ref();
|
||||
|
|
@ -12,6 +15,36 @@ const useOptionStore = defineStore('optionStore', () => {
|
|||
rawOption.value = await fetch('/option/option.json').then((r) => r.json());
|
||||
|
||||
_switchOptionLang();
|
||||
|
||||
const res = await getPropertyList({ pageSize: 999, activeOnly: true });
|
||||
const targetOptions = globalOption.value?.propertiesField ?? [];
|
||||
|
||||
if (!res) return;
|
||||
|
||||
const propList = res.result.map((v) => {
|
||||
return {
|
||||
label: locale.value === 'eng' ? v.nameEN : v.name,
|
||||
value: toCamelCase(v.nameEN),
|
||||
type: v.type.type,
|
||||
};
|
||||
});
|
||||
|
||||
globalOption.value.propertiesField = [...targetOptions];
|
||||
|
||||
const existingValues = new Set(
|
||||
globalOption.value.propertiesField.map(
|
||||
(item: { value: string }) => item.value,
|
||||
),
|
||||
);
|
||||
const newProps = propList.filter((prop) => !existingValues.has(prop.value));
|
||||
|
||||
if (newProps) {
|
||||
globalOption.value.propertiesField.splice(
|
||||
globalOption.value.propertiesField.length - 4,
|
||||
0,
|
||||
...newProps,
|
||||
);
|
||||
}
|
||||
})();
|
||||
|
||||
watch(locale, _switchOptionLang);
|
||||
|
|
|
|||
71
src/stores/property/index.ts
Normal file
71
src/stores/property/index.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { PaginationResult } from 'src/types';
|
||||
import { Status } from '../types';
|
||||
import { Property } from './types';
|
||||
|
||||
export const useProperty = defineStore('property-store', () => {
|
||||
const data = ref<Property[]>([]);
|
||||
const page = ref<number>(1);
|
||||
const pageMax = ref<number>(1);
|
||||
const pageSize = ref<number>(30);
|
||||
|
||||
async function getProperty(id: string) {
|
||||
const res = await api.get<Property[]>(`/property/${id}`);
|
||||
|
||||
if (res.status >= 400) return null;
|
||||
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function getPropertyList(params?: {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
query?: string;
|
||||
status?: Status;
|
||||
activeOnly?: boolean;
|
||||
}) {
|
||||
const res = await api.get<PaginationResult<Property>>('/property', {
|
||||
params,
|
||||
});
|
||||
|
||||
if (res.status >= 400) return null;
|
||||
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function creatProperty(data: Property) {
|
||||
const res = await api.post<Property>('/property', data);
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
async function editProperty(data: Property) {
|
||||
const res = await api.put<Property>(`/property/${data.id}`, {
|
||||
...data,
|
||||
id: undefined,
|
||||
});
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
async function deleteProperty(id: string) {
|
||||
const res = await api.delete<Property>(`/property/${id}`);
|
||||
if (res.status >= 400) return null;
|
||||
return res;
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
page,
|
||||
pageSize,
|
||||
pageMax,
|
||||
|
||||
getProperty,
|
||||
getPropertyList,
|
||||
creatProperty,
|
||||
editProperty,
|
||||
deleteProperty,
|
||||
};
|
||||
});
|
||||
10
src/stores/property/types.ts
Normal file
10
src/stores/property/types.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Status } from '../types';
|
||||
|
||||
export type Property = {
|
||||
id?: string;
|
||||
status?: Status;
|
||||
registeredBranchId?: string;
|
||||
name: string;
|
||||
nameEN: string;
|
||||
type: Record<string, any>;
|
||||
};
|
||||
|
|
@ -8,13 +8,35 @@ import {
|
|||
ReportQuotation,
|
||||
ReportSale,
|
||||
ReportProfit,
|
||||
CustomerDept,
|
||||
} from './types';
|
||||
import { baseUrl } from '../utils';
|
||||
import { getToken } from 'src/services/keycloak';
|
||||
|
||||
const ENDPOINT = 'report';
|
||||
|
||||
async function _download(url: string, filename?: string) {
|
||||
async function _download(
|
||||
url: string,
|
||||
filename?: string,
|
||||
params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
},
|
||||
) {
|
||||
if (params) {
|
||||
const queryParams = new URLSearchParams({
|
||||
startDate:
|
||||
params.startDate instanceof Date
|
||||
? params.startDate.toISOString()
|
||||
: params.startDate,
|
||||
endDate:
|
||||
params.endDate instanceof Date
|
||||
? params.endDate.toISOString()
|
||||
: params.endDate,
|
||||
}).toString();
|
||||
url += '?' + queryParams;
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
|
||||
});
|
||||
|
|
@ -29,15 +51,24 @@ async function _download(url: string, filename?: string) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function downloadReportQuotation() {
|
||||
export async function downloadReportQuotation(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
await _download(
|
||||
baseUrl + '/' + ENDPOINT + '/quotation/download',
|
||||
'quotation-report',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
||||
export async function getReportQuotation() {
|
||||
const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`);
|
||||
export async function getReportQuotation(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`, {
|
||||
params,
|
||||
});
|
||||
if (res.status < 400) {
|
||||
res.data;
|
||||
return res.data;
|
||||
|
|
@ -45,30 +76,44 @@ export async function getReportQuotation() {
|
|||
return null;
|
||||
}
|
||||
|
||||
export async function downloadReportInvoice() {
|
||||
export async function downloadReportInvoice(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
await _download(
|
||||
baseUrl + '/' + ENDPOINT + '/invoice/download',
|
||||
'invoice-report',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
||||
export async function getReportInvoice() {
|
||||
const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`);
|
||||
export async function getReportInvoice(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`, { params });
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function downloadReportReceipt() {
|
||||
export async function downloadReportReceipt(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
await _download(
|
||||
baseUrl + '/' + ENDPOINT + '/receipt/download',
|
||||
'receipt-report',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
||||
export async function getReportReceipt() {
|
||||
const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`);
|
||||
export async function getReportReceipt(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`, { params });
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
}
|
||||
|
|
@ -77,15 +122,23 @@ export async function getReportReceipt() {
|
|||
|
||||
export async function downloadReportSale(
|
||||
category: 'by-product-group' | 'by-sale' | 'by-customer',
|
||||
params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
},
|
||||
) {
|
||||
await _download(
|
||||
baseUrl + '/' + ENDPOINT + '/sale/' + category + '/download',
|
||||
'sale-' + category + '-report',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
||||
export async function getReportSale() {
|
||||
const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`);
|
||||
export async function getReportSale(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`, { params });
|
||||
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
|
|
@ -93,15 +146,24 @@ export async function getReportSale() {
|
|||
return null;
|
||||
}
|
||||
|
||||
export async function downloadReportProduct() {
|
||||
export async function downloadReportProduct(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
await _download(
|
||||
baseUrl + '/' + ENDPOINT + '/receipt/download',
|
||||
'product-report',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
||||
export async function getReportProduct() {
|
||||
const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`);
|
||||
export async function getReportProduct(params?: {
|
||||
startDate: string | Date;
|
||||
endDate: string | Date;
|
||||
}) {
|
||||
const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`, {
|
||||
params,
|
||||
});
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
}
|
||||
|
|
@ -146,6 +208,14 @@ export async function getReportProfit(params?: {
|
|||
return null;
|
||||
}
|
||||
|
||||
export async function getReportDept() {
|
||||
const res = await api.get<CustomerDept[]>(`/${ENDPOINT}/customer-dept`);
|
||||
if (res.status < 400) {
|
||||
return res.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export const useReportStore = defineStore('report-store', () => {
|
||||
const dataReportQuotation = ref<ReportQuotation[]>([]);
|
||||
const dataReportInvoice = ref<Report[]>([]);
|
||||
|
|
@ -154,6 +224,7 @@ export const useReportStore = defineStore('report-store', () => {
|
|||
const dataReportProduct = ref<ReportProduct[]>([]);
|
||||
const dataReportPayment = ref<ReportPayment[]>([]);
|
||||
const dataReportProfit = ref<ReportProfit>();
|
||||
const detaReportDept = ref<CustomerDept[]>([]);
|
||||
|
||||
return {
|
||||
dataReportQuotation,
|
||||
|
|
@ -163,6 +234,7 @@ export const useReportStore = defineStore('report-store', () => {
|
|||
dataReportProduct,
|
||||
dataReportPayment,
|
||||
dataReportProfit,
|
||||
detaReportDept,
|
||||
|
||||
downloadReportQuotation,
|
||||
getReportQuotation,
|
||||
|
|
@ -176,5 +248,6 @@ export const useReportStore = defineStore('report-store', () => {
|
|||
getReportProduct,
|
||||
getReportPayment,
|
||||
getReportProfit,
|
||||
getReportDept,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -63,3 +63,9 @@ export type ReportProfit = {
|
|||
expenses: number;
|
||||
income: number;
|
||||
};
|
||||
|
||||
export type CustomerDept = {
|
||||
customerBranch: CustomerBranch;
|
||||
unpaid: number;
|
||||
paid: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -294,6 +294,37 @@ export const useRequestList = defineStore('request-list', () => {
|
|||
return null;
|
||||
}
|
||||
|
||||
async function rejectRequest(
|
||||
requestDataId: string,
|
||||
body: { reason: string },
|
||||
) {
|
||||
const res = await api.post(
|
||||
`/request-data/${requestDataId}/reject-request-cancel`,
|
||||
body,
|
||||
);
|
||||
|
||||
if (res.status < 400) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function rejectRequestWork(
|
||||
requestDataId: string,
|
||||
requestWorkId: string,
|
||||
body: {
|
||||
reason: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.post(
|
||||
`/request-data/${requestDataId}/request-work/${requestWorkId}/reject-request-cancel`,
|
||||
body,
|
||||
);
|
||||
|
||||
if (res.status < 400) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
page,
|
||||
|
|
@ -316,6 +347,9 @@ export const useRequestList = defineStore('request-list', () => {
|
|||
cancelRequest,
|
||||
|
||||
actionRequestWork,
|
||||
|
||||
rejectRequest,
|
||||
rejectRequestWork,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ export type RequestData = {
|
|||
|
||||
customerRequestCancel?: boolean;
|
||||
customerRequestCancelReason?: string;
|
||||
rejectRequestCancel?: boolean;
|
||||
rejectRequestCancelReason?: string;
|
||||
|
||||
quotation: QuotationFull & {
|
||||
debitNoteQuotationId: string;
|
||||
|
|
@ -43,6 +45,7 @@ export enum RequestWorkStatus {
|
|||
Ended = 'Ended',
|
||||
Completed = 'Completed',
|
||||
Canceled = 'Canceled',
|
||||
RejectCancel = 'RejectCancel',
|
||||
}
|
||||
|
||||
export enum DocStatus {
|
||||
|
|
@ -65,6 +68,8 @@ export type RequestWork = {
|
|||
processByUserId?: string;
|
||||
customerRequestCancel?: boolean;
|
||||
customerRequestCancelReason?: string;
|
||||
rejectRequestCancel?: boolean;
|
||||
rejectRequestCancelReason?: string;
|
||||
};
|
||||
|
||||
export type RowDocument = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue