refactor: responsive (#180)
* refactor: can open one dropdown whe lt.md * style: update MainLayout background color and fix avatar border class name * feat: add touch position binding for dropdown in ProfileMenu * refactor: enhance icon styling in DrawerComponent * fix: update screen size conditions * feat: add responsive search and filter functionality in MainPage * feat: update styling and functionality in BasicInformation and MainPage components * feat: package view mode improve layout and responsiveness * feat: improve layout and responsiveness of ProfileBanner component * feat: enhance TreeView component with improved icon layout and cursor pointer styling * feat: update DialogForm component to prevent text wrapping in the center column * feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements * feat: enhance ProfileBanner dark tab * feat: 02 => responsive & responsibleArea type * fix: layout header bg condition & 02 filter col * feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog * feat: 07 => enhance layout and responsiveness * refactor: simplify header structure and improve layout consistency * fix: improve text color in ItemCard and adjust responsive breakpoints in product service group * refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components * refactor: enhance styling and improve props flexibility in dialog and select components * refactor: 05 => enhance layout responsiveness in quotation components * refactor: 05 => enhance layout responsiveness * refactor: 05 => formWorkerAdd * refactor: 05 => formWorkerAdd Product table * refactor: 05 => improve layout responsiveness and enhance component structure * refactor: enhance grid view handling and improve component imports * refactor: improve column classes for better layout consistency * refactor: 09 => enhance layout structure and improve responsiveness in task order views * refactor: 10 => enhance invoice main page layout and improve component interactions * refactor: 13 => enhance receipt main page layout and improve component interactions * refactor: 11 => enhance layout and improve responsiveness in credit note pages * refactor: 01 => screen.sm search & filter * refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms --------- Co-authored-by: puriphatt <puriphat@frappet.com>
This commit is contained in:
Methapon Metanipat
GitHub
parent
79ec995547
commit
e0c1725001
45 changed files with 993 additions and 609 deletions
|
|
@ -44,7 +44,7 @@ defineEmits<{
|
|||
}>();
|
||||
|
||||
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
||||
let bankBoookFilter: (
|
||||
let bankBookFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
|
@ -77,7 +77,7 @@ function change(e: Event) {
|
|||
|
||||
onMounted(() => {
|
||||
if (optionStore.globalOption) {
|
||||
bankBoookFilter = selectFilterOptionRefMod(
|
||||
bankBookFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.bankBook),
|
||||
bankBookOptions,
|
||||
'label',
|
||||
|
|
@ -94,7 +94,7 @@ onMounted(() => {
|
|||
watch(
|
||||
() => optionStore.globalOption,
|
||||
() => {
|
||||
bankBoookFilter = selectFilterOptionRefMod(
|
||||
bankBookFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.bankBook),
|
||||
bankBookOptions,
|
||||
'label',
|
||||
|
|
@ -131,8 +131,8 @@ watch(
|
|||
|
||||
<div
|
||||
v-for="(book, i) in bankBookList"
|
||||
class="col-12 row"
|
||||
:class="{ 'q-pt-lg': i !== 0 }"
|
||||
class="col-12"
|
||||
:class="{ 'q-pt-lg': i !== 0, row: $q.screen.gt.sm }"
|
||||
:key="i"
|
||||
>
|
||||
<q-separator
|
||||
|
|
@ -172,8 +172,8 @@ watch(
|
|||
</span>
|
||||
|
||||
<div
|
||||
class="bordered q-mr-sm rounded"
|
||||
:class="{ 'pointer-none': readonly }"
|
||||
class="bordered q-mr-sm rounded col text-center overflow-hidden"
|
||||
:class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
|
||||
>
|
||||
<ImageHover
|
||||
:readonly="readonly"
|
||||
|
|
@ -214,7 +214,7 @@ watch(
|
|||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (book.bankName = v) : '')
|
||||
"
|
||||
@filter="bankBoookFilter"
|
||||
@filter="bankBookFilter"
|
||||
@clear="book.bankName = ''"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-4"
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('form.telephone')"
|
||||
for="input-telephone-no"
|
||||
:model-value="readonly ? telephoneNo || '-' : telephoneNo"
|
||||
|
|
@ -116,7 +116,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-4"
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('branch.form.contactTelephone')"
|
||||
for="input-contact"
|
||||
:model-value="readonly ? contact || '-' : contact"
|
||||
|
|
@ -139,7 +139,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-4"
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('branch.form.webUrl')"
|
||||
for="input-web-url"
|
||||
:model-value="readonly ? webUrl || '-' : webUrl"
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
class="col-md-4 col-12"
|
||||
:label="$t('general.licenseNumber')"
|
||||
v-model="permitNo"
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
|
|
@ -212,7 +212,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
|
|||
/>
|
||||
|
||||
<DatePicker
|
||||
class="col-3"
|
||||
class="col-md-3 col-12"
|
||||
id="input-start-date"
|
||||
:readonly="readonly"
|
||||
:label="$t('general.dateOfIssue')"
|
||||
|
|
@ -221,7 +221,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
|
|||
/>
|
||||
|
||||
<DatePicker
|
||||
class="col-3"
|
||||
class="col-md-3 col-12"
|
||||
id="input-start-date"
|
||||
:readonly="readonly"
|
||||
:label="$t('general.expirationDate')"
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import SelectMenuWithSearch from '../shared/SelectMenuWithSearch.vue';
|
|||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||
import NoData from '../NoData.vue';
|
||||
import SelectBranch from '../shared/select/SelectBranch.vue';
|
||||
import AddButton from '../button/AddButton.vue';
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
|
|
@ -127,6 +128,7 @@ function optionSearch(val: string | null) {
|
|||
|
||||
defineEmits<{
|
||||
(e: 'moveUp'): void;
|
||||
(e: 'addStep'): void;
|
||||
(e: 'moveDown'): void;
|
||||
(e: 'changeStatus'): void;
|
||||
(e: 'triggerProperties', step: WorkFlowPayloadStep): void;
|
||||
|
|
@ -159,7 +161,10 @@ onMounted(async () => {
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`general.name`, { msg: $t('flow.title') }) }}
|
||||
<span class="row q-ml-lg items-center text-weight-regular text-body2">
|
||||
<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
|
||||
|
|
@ -216,6 +221,13 @@ onMounted(async () => {
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`flow.processStep`) }}
|
||||
<AddButton
|
||||
v-if="!readonly && $q.screen.lt.md"
|
||||
id="btn-add-work"
|
||||
icon-only
|
||||
class="q-ml-sm"
|
||||
@click="$emit('addStep')"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
|
|||
"
|
||||
@drop="detailEditorImageDrop"
|
||||
min-height="5rem"
|
||||
class="q-mt-sm q-mb-xs"
|
||||
class="q-mt-sm q-mb-xs col"
|
||||
:flat="!readonly"
|
||||
:readonly="readonly"
|
||||
:toolbar-color="
|
||||
|
|
@ -275,4 +275,8 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
|
|||
:deep(.q-editor__toolbar) {
|
||||
border-color: var(--surface-3) !important;
|
||||
}
|
||||
|
||||
:deep(.q-editor.q-editor--default) {
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
|
|||
/>
|
||||
|
||||
<q-field
|
||||
class="full-width"
|
||||
class="col-12"
|
||||
outlined
|
||||
for="input-service-description"
|
||||
id="input-service-description"
|
||||
|
|
@ -180,31 +180,34 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
|
|||
>
|
||||
<q-editor
|
||||
dense
|
||||
class="q-mt-sm q-mb-xs col"
|
||||
:model-value="
|
||||
readonly ? serviceDescription || '-' : serviceDescription || ''
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (serviceDescription = v) : '')
|
||||
"
|
||||
@drop="detailEditorImageDrop"
|
||||
min-height="5rem"
|
||||
class="q-mt-sm q-mb-xs"
|
||||
:flat="!readonly"
|
||||
:readonly="readonly"
|
||||
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
||||
:toolbar-color="
|
||||
readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
|
||||
"
|
||||
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
||||
style="
|
||||
cursor: auto;
|
||||
color: var(--foreground);
|
||||
border-color: var(--surface-3);
|
||||
"
|
||||
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (serviceDescription = v) : '')
|
||||
"
|
||||
@drop="detailEditorImageDrop"
|
||||
/>
|
||||
</q-field>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
:deep(.q-editor.q-editor--default) {
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
|
|||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
behavior="menu"
|
||||
:readonly
|
||||
outlined
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ withDefaults(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12 full-width">
|
||||
<q-table
|
||||
:columns="column"
|
||||
:rows="row"
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ defineEmits<{
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`general.about`) }}
|
||||
<div class="q-ml-md text-weight-regular">
|
||||
<div class="text-weight-regular" :class="{ 'q-ml-md ': $q.screen.gt.sm }">
|
||||
<q-checkbox
|
||||
:label="$t('productService.product.agentPrice')"
|
||||
size="xs"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import { formatNumberDecimal } from 'src/stores/utils';
|
||||
import BadgeComponent from 'components/BadgeComponent.vue';
|
||||
import KebabAction from '../shared/KebabAction.vue';
|
||||
import MainButton from '../button/MainButton.vue';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -48,7 +46,7 @@ const rand = Math.random();
|
|||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="surface-1 rounded q-pa-sm quo-card bordered"
|
||||
class="surface-1 rounded q-pa-sm quo-card bordered column"
|
||||
:class="{ 'urgent-card': urgent }"
|
||||
:style="{ '--animation-delay': rand + 's' }"
|
||||
>
|
||||
|
|
@ -71,7 +69,7 @@ const rand = Math.random();
|
|||
/>
|
||||
</div>
|
||||
|
||||
<nav class="col text-right">
|
||||
<nav class="col text-right no-wrap">
|
||||
<q-btn
|
||||
v-if="!hidePreview"
|
||||
flat
|
||||
|
|
@ -125,7 +123,7 @@ const rand = Math.random();
|
|||
|
||||
<!-- SEC: body -->
|
||||
<section
|
||||
class="rounded q-px-sm"
|
||||
class="rounded q-px-sm col"
|
||||
:class="{
|
||||
'surface-1': urgent,
|
||||
'surface-2': !urgent,
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ type Options = { label: string; value: string };
|
|||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<SelectInput
|
||||
:class="{ col: $q.screen.lt.md }"
|
||||
:disable="!readonly && onDrawer"
|
||||
:readonly="readonly"
|
||||
for="input-agencies-code"
|
||||
|
|
@ -60,7 +61,7 @@ type Options = { label: string; value: string };
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
class="col-md col-12"
|
||||
:label="$t('agencies.name')"
|
||||
v-model="name"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
|
|
@ -71,7 +72,7 @@ type Options = { label: string; value: string };
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
class="col-md col-12"
|
||||
:label="'Agencies Name'"
|
||||
v-model="nameEn"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ const currentTab = defineModel<string>('currentTab');
|
|||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="col column full-height">
|
||||
<div class="col column full-height no-wrap">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,9 @@ onMounted(() => {
|
|||
:class="{ dark: $q.dark.isActive }"
|
||||
:style="`background-color: ${bgColor}`"
|
||||
>
|
||||
<div style="font-size: 14px">{{ $t(text) }}</div>
|
||||
<div style="font-size: 14px; color: var(--foreground)">
|
||||
{{ $t(text) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -154,15 +154,15 @@ const smallBanner = ref(false);
|
|||
class="absolute-bottom-right"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 1.25vw;
|
||||
height: 1.25vw;
|
||||
z-index: 2;
|
||||
background: var(--surface-1);
|
||||
"
|
||||
>
|
||||
<q-badge
|
||||
class="absolute-center"
|
||||
style="border-radius: 50%; width: 14px; height: 14px"
|
||||
style="border-radius: 50%; width: 0.8vw; height: 0.8vw"
|
||||
:style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
|
||||
></q-badge>
|
||||
</q-badge>
|
||||
|
|
@ -193,7 +193,7 @@ const smallBanner = ref(false);
|
|||
>
|
||||
<div
|
||||
class="row justify-between full-height"
|
||||
style="padding-left: 7.5vw"
|
||||
style="padding-left: calc(6vw + 50px)"
|
||||
>
|
||||
<div class="col column">
|
||||
<span
|
||||
|
|
@ -261,7 +261,7 @@ const smallBanner = ref(false);
|
|||
inline-label
|
||||
mobile-arrows
|
||||
v-model="currentTab"
|
||||
active-class="active-tab text-weight-bold"
|
||||
:active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
|
||||
class="app-text-muted full-width"
|
||||
align="left"
|
||||
v-if="typeof tabsList === 'object'"
|
||||
|
|
@ -271,6 +271,7 @@ const smallBanner = ref(false);
|
|||
:id="`${prefix}-tab-${tab.label}`"
|
||||
v-bind:key="tab.name"
|
||||
class="content-tab text-capitalize"
|
||||
:class="{ 'tab-label': currentTab !== tab.name }"
|
||||
:name="tab.name"
|
||||
:label="tab.label"
|
||||
/>
|
||||
|
|
@ -302,7 +303,11 @@ const smallBanner = ref(false);
|
|||
>
|
||||
<!-- profile -->
|
||||
<span class="row col items-center">
|
||||
<div class="flex items-center full-height q-pl-lg" style="z-index: 1">
|
||||
<div
|
||||
class="flex items-center full-height"
|
||||
:class="{ 'q-pl-lg': $q.screen.gt.sm, 'q-pl-sm': $q.screen.lt.md }"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<div
|
||||
class="surface-1"
|
||||
style="border-radius: 50%; border: 2px solid var(--surface-1)"
|
||||
|
|
@ -347,13 +352,14 @@ const smallBanner = ref(false);
|
|||
<Icon
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:icon="icon || 'mdi-account'"
|
||||
style="width: 25px !important"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
<div
|
||||
v-else
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
class="full-width full-height flex items-center justify-center no-padding"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
|
|
@ -362,6 +368,7 @@ const smallBanner = ref(false);
|
|||
<Icon
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:icon="icon || 'mdi-account'"
|
||||
style="width: 25px !important"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -378,6 +385,7 @@ const smallBanner = ref(false);
|
|||
<Icon
|
||||
class="full-width full-height flex items-center justify-center"
|
||||
:icon="icon || 'mdi-account'"
|
||||
style="width: 25px !important"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -425,7 +433,7 @@ const smallBanner = ref(false);
|
|||
inline-label
|
||||
mobile-arrows
|
||||
v-model="currentTab"
|
||||
active-class="active-tab text-weight-bold"
|
||||
:active-class="`active-tab text-weight-bold ${$q.dark.isActive && 'dark'}`"
|
||||
class="app-text-muted full-width"
|
||||
align="left"
|
||||
v-if="typeof tabsList === 'object'"
|
||||
|
|
@ -435,6 +443,7 @@ const smallBanner = ref(false);
|
|||
:id="`${prefix}-tab-${tab.label}`"
|
||||
v-bind:key="tab.name"
|
||||
class="content-tab text-capitalize"
|
||||
:class="{ 'tab-label': currentTab !== tab.name }"
|
||||
:name="tab.name"
|
||||
:label="tab.label"
|
||||
/>
|
||||
|
|
@ -526,5 +535,13 @@ const smallBanner = ref(false);
|
|||
|
||||
.active-tab {
|
||||
color: var(--brand-1);
|
||||
&.dark {
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
color: var(--foreground);
|
||||
opacity: 75%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,13 +57,13 @@ async function downloadImage(url: string | null) {
|
|||
<main class="column full-height">
|
||||
<section
|
||||
v-if="!hideTab"
|
||||
style="background: var(--gray-3)"
|
||||
:style="`background: var(${$q.dark.isActive ? '--gray-8' : '--gray-3'})`"
|
||||
class="q-py-sm row justify-center"
|
||||
>
|
||||
<div class="surface-2 q-px-md q-py-sm rounded row no-wrap items-center">
|
||||
<MainButton
|
||||
icon="mdi-minus"
|
||||
color="0 0% 0%"
|
||||
:color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
|
|
@ -90,7 +90,7 @@ async function downloadImage(url: string | null) {
|
|||
></q-input>
|
||||
<MainButton
|
||||
icon="mdi-plus"
|
||||
color="0 0% 0%"
|
||||
:color="`var(--gray-${$q.dark.isActive ? '1' : '11'}-hsl)`"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ const props = withDefaults(
|
|||
id?: string;
|
||||
label?: string;
|
||||
option: T[];
|
||||
optionLabel?: keyof T;
|
||||
optionValue?: keyof T;
|
||||
optionLabel?: keyof T | string;
|
||||
optionValue?: keyof T | string;
|
||||
placeholder?: string;
|
||||
|
||||
hideSelected?: boolean;
|
||||
|
|
|
|||
|
|
@ -74,16 +74,16 @@ function assignSelect(to: unknown[], from: unknown[]) {
|
|||
<template>
|
||||
<section class="full-width column">
|
||||
<header
|
||||
class="row items-center no-wrap q-px-md q-py-sm"
|
||||
class="row items-center q-px-md q-py-sm"
|
||||
:class="{ 'bordered surface-3 ': borderSearchSection }"
|
||||
>
|
||||
<div class="col"><slot name="top"></slot></div>
|
||||
<div class="col-12 col-md"><slot name="top"></slot></div>
|
||||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-ml-auto"
|
||||
class="col-12 col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="search"
|
||||
debounce="300"
|
||||
|
|
|
|||
|
|
@ -118,6 +118,9 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
|
|||
<template v-for="(node, i) in nodes" :key="i">
|
||||
<div
|
||||
class="tree-item"
|
||||
:class="{
|
||||
'cursor-pointer': node.children ? true : undefined,
|
||||
}"
|
||||
v-if="filterText ? visibleNode(filterText, node, ancestorNode) : true"
|
||||
>
|
||||
<slot
|
||||
|
|
@ -205,19 +208,21 @@ function visibleNode(text: string, node: Node, ancestor?: Node[]): boolean {
|
|||
/>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="item__icon flex items-center justify-center"
|
||||
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
|
||||
class="item__icon flex items-center justify-center"
|
||||
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
|
||||
>
|
||||
<Icon
|
||||
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
|
||||
:icon="node.icon || dec.icon"
|
||||
class="full-width full-height"
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
|
||||
>
|
||||
<Icon
|
||||
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
|
||||
:icon="node.icon || dec.icon"
|
||||
class="full-width full-height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
|
|||
import { Icon } from '@iconify/vue';
|
||||
import useMyBranch from 'stores/my-branch';
|
||||
import { getUserId, getRole } from 'src/services/keycloak';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
type Menu = {
|
||||
label: string;
|
||||
|
|
@ -17,6 +18,8 @@ type Menu = {
|
|||
};
|
||||
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
|
||||
const userBranch = useMyBranch();
|
||||
const { currentMyBranch } = storeToRefs(userBranch);
|
||||
|
||||
|
|
@ -35,17 +38,6 @@ const currentPath = computed(() => {
|
|||
return router.currentRoute.value.path;
|
||||
});
|
||||
|
||||
// const labelMenu = ref<
|
||||
// {
|
||||
// label: string;
|
||||
// icon: string;
|
||||
// route: string;
|
||||
// hidden?: boolean;
|
||||
// disabled?: boolean;
|
||||
// isax?: boolean;
|
||||
// }[]
|
||||
// >([]);
|
||||
|
||||
function navigateTo(label: string, destination?: string) {
|
||||
if (!destination) return;
|
||||
router.push(`${destination}`);
|
||||
|
|
@ -57,6 +49,8 @@ function reActiveMenu() {
|
|||
);
|
||||
|
||||
const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
|
||||
|
||||
if ($q.screen.lt.sm) menuActive.value.fill(false);
|
||||
menuActive.value[currMenuIndex] = true;
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +198,6 @@ onMounted(async () => {
|
|||
:width="mini ? 80 : 256"
|
||||
show-if-above
|
||||
>
|
||||
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
|
||||
<section
|
||||
class="scroll"
|
||||
style="overflow-x: hidden; scrollbar-gutter: stable"
|
||||
|
|
@ -236,7 +229,6 @@ onMounted(async () => {
|
|||
:disable="menu.disabled"
|
||||
:header-class="{
|
||||
row: true,
|
||||
'justify-between': !mini,
|
||||
'no-padding justify-center': mini,
|
||||
'active-menu text-weight-bold': menuActive[i],
|
||||
'text-weight-medium': !menu.disabled,
|
||||
|
|
@ -254,7 +246,12 @@ onMounted(async () => {
|
|||
:class="`isax ${menu.icon}`"
|
||||
style="font-size: 24px"
|
||||
/>
|
||||
<Icon v-else :icon="menu.icon || ''" width="24px" />
|
||||
<Icon
|
||||
v-else
|
||||
:icon="menu.icon || ''"
|
||||
width="24px"
|
||||
:class="{ 'fix-icon': !menuActive[i] }"
|
||||
/>
|
||||
<span
|
||||
v-if="!mini"
|
||||
class="q-pl-sm"
|
||||
|
|
@ -514,4 +511,12 @@ onMounted(async () => {
|
|||
border-bottom-right-radius: var(--radius-2);
|
||||
}
|
||||
}
|
||||
|
||||
.fix-icon {
|
||||
color: var(--text-mute-2) !important;
|
||||
}
|
||||
|
||||
:deep(.q-item.q-item-type.row.no-wrap.q-item--dense.disabled) {
|
||||
opacity: 30% !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -208,6 +208,9 @@ onMounted(async () => {
|
|||
<div
|
||||
class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
|
||||
style="position: sticky; top: 0; z-index: 8"
|
||||
:style="`
|
||||
background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
|
||||
`"
|
||||
>
|
||||
<q-btn
|
||||
v-if="$q.screen.lt.sm"
|
||||
|
|
@ -530,7 +533,7 @@ onMounted(async () => {
|
|||
}
|
||||
}
|
||||
|
||||
.avartar-border {
|
||||
.avatar-border {
|
||||
margin-top: 24px;
|
||||
border: 5px solid var(--surface-1);
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -317,6 +317,7 @@ onMounted(async () => {
|
|||
max-width="200"
|
||||
:offset="[10, 0]"
|
||||
style="width: 160px"
|
||||
:touch-position="$q.screen.lt.sm"
|
||||
>
|
||||
<div v-for="(mode, index) in themeMode" :key="index">
|
||||
<q-item clickable @click="theme = setTheme(mode.value)">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue';
|
|||
import { BranchContact } from 'stores/branch-contact/types';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { QTableProps, QTableSlots } from 'quasar';
|
||||
import type { QSelect, QTableProps, QTableSlots } from 'quasar';
|
||||
import { resetScrollBar } from 'src/stores/utils';
|
||||
import useBranchStore from 'stores/branch';
|
||||
import useFlowStore from 'stores/flow';
|
||||
|
|
@ -72,6 +72,7 @@ const typeBranchItem = [
|
|||
color: 'var(--blue-6-hsl)',
|
||||
},
|
||||
];
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const holdDialog = ref(false);
|
||||
const isSubCreate = ref(false);
|
||||
const columns = [
|
||||
|
|
@ -302,7 +303,10 @@ const stats = ref<
|
|||
}[]
|
||||
>([]);
|
||||
|
||||
const splitterModel = ref(25);
|
||||
// const splitterModel = ref(25);
|
||||
const splitterModel = computed(() =>
|
||||
$q.screen.lt.md ? (currentHq.value.id ? 0 : 100) : 25,
|
||||
);
|
||||
|
||||
const defaultFormData = {
|
||||
headOfficeId: null,
|
||||
|
|
@ -1020,12 +1024,13 @@ watch(currentHq, () => {
|
|||
class="col"
|
||||
before-class="overflow-hidden"
|
||||
after-class="overflow-hidden"
|
||||
:disable="$q.screen.lt.sm"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="surface-1 column full-height">
|
||||
<div
|
||||
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
|
||||
>
|
||||
<div class="col ellipsis-2-lines">
|
||||
{{ $t('branch.allBranch') }}
|
||||
|
|
@ -1157,7 +1162,7 @@ watch(currentHq, () => {
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-4"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -1165,13 +1170,26 @@ watch(currentHq, () => {
|
|||
<template v-slot: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-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
>
|
||||
<div class="row col-md-6 justify-end">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
v-model="statusFilter"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -1179,7 +1197,7 @@ watch(currentHq, () => {
|
|||
option-value="value"
|
||||
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||
option-label="label"
|
||||
class="col"
|
||||
class="col-md-5"
|
||||
map-options
|
||||
:for="'field-select-status'"
|
||||
emit-value
|
||||
|
|
@ -1194,6 +1212,7 @@ watch(currentHq, () => {
|
|||
></q-select>
|
||||
|
||||
<q-select
|
||||
v-if="!modeView"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
:options="
|
||||
|
|
@ -1204,7 +1223,7 @@ watch(currentHq, () => {
|
|||
"
|
||||
:display-value="$t('general.displayField')"
|
||||
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||
class="col q-mx-sm"
|
||||
class="col q-ml-sm"
|
||||
v-model="fieldSelected"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
|
|
@ -1220,7 +1239,7 @@ watch(currentHq, () => {
|
|||
id="btn-mode"
|
||||
v-model="modeView"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1"
|
||||
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
|
|
@ -1266,8 +1285,26 @@ watch(currentHq, () => {
|
|||
|
||||
<div
|
||||
v-if="
|
||||
inputSearch &&
|
||||
treeData.flatMap((v) => [v, ...v.branch]).length === 0
|
||||
(
|
||||
currentSubBranch ||
|
||||
(inputSearch !== ''
|
||||
? treeData.flatMap((v) => [v, ...v.branch])
|
||||
: treeData)
|
||||
).filter((v) => {
|
||||
if (
|
||||
statusFilter === 'statusACTIVE' &&
|
||||
v.status === 'INACTIVE'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
statusFilter === 'statusINACTIVE' &&
|
||||
v.status !== 'INACTIVE'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}).length === 0
|
||||
"
|
||||
class="row items-center justify-center full-height"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import useOptionStore from 'stores/options';
|
|||
import useAddressStore from 'stores/address';
|
||||
import useMyBranch from 'src/stores/my-branch';
|
||||
import { calculateAge } from 'src/utils/datetime';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
import { QSelect, useQuasar, type QTableProps } from 'quasar';
|
||||
import { dialog, baseUrl } from 'stores/utils';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
|
||||
|
|
@ -73,6 +73,7 @@ const isImageEdit = ref(false);
|
|||
const imageDialog = ref(false);
|
||||
const infoDrawerEdit = ref(false);
|
||||
const refreshImageState = ref(false);
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
|
||||
const inputSearch = ref('');
|
||||
const currentTab = ref<string>('ALL');
|
||||
|
|
@ -820,7 +821,7 @@ watch(
|
|||
class="col surface-2 rounded justify-between column no-wrap bordered full-height overflow-hidden"
|
||||
>
|
||||
<div class="column">
|
||||
<div
|
||||
<header
|
||||
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||
style="z-index: 1"
|
||||
>
|
||||
|
|
@ -830,7 +831,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -838,14 +839,26 @@ watch(
|
|||
<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-12 col-md-5"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<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
|
||||
|
|
@ -936,7 +949,7 @@ watch(
|
|||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="surface-2 bordered-b q-px-md full-width">
|
||||
<q-tabs
|
||||
|
|
@ -1521,7 +1534,7 @@ watch(
|
|||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
|
|
@ -1618,7 +1631,7 @@ watch(
|
|||
class="col-12 col-md-10 relative-position"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="user-form-content"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
|
|
@ -1734,6 +1747,7 @@ watch(
|
|||
}"
|
||||
>
|
||||
<ProfileBanner
|
||||
:prefix="formData.firstName"
|
||||
active
|
||||
useToggle
|
||||
color="white"
|
||||
|
|
@ -1789,7 +1803,7 @@ watch(
|
|||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
|
|
@ -1837,7 +1851,7 @@ watch(
|
|||
class="col-md-10 col-12 full-height scroll"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<FormInformation
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
|
|
@ -160,7 +160,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form-dialog"
|
||||
|
|
@ -169,6 +169,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
v-model:flow-data="flowData"
|
||||
v-model:register-branch-id="registerBranchId"
|
||||
@trigger-properties="triggerPropertiesDialog"
|
||||
@add-step="addStep"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -199,7 +200,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
|
|
@ -304,7 +305,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
id="flow-form-drawer"
|
||||
|
|
@ -317,6 +318,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
|
|||
v-model:register-branch-id="registerBranchId"
|
||||
@change-status="$emit('changeStatus')"
|
||||
@trigger-properties="triggerPropertiesDialog"
|
||||
@add-step="addStep"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { QTableProps } from 'quasar';
|
||||
import { QSelect, QTableProps } from 'quasar';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
|
@ -68,6 +68,7 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const currWorkflowData = ref<WorkflowTemplate>();
|
||||
const formDataWorkflow = ref<WorkflowTemplatePayload>({
|
||||
status: 'CREATED',
|
||||
|
|
@ -361,7 +362,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -369,14 +370,26 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
<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-12 col-md-5 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<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
|
||||
|
|
@ -394,6 +407,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
|
|||
]"
|
||||
/>
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col q-ml-sm"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { nextTick, ref, watch, reactive } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
import { QSelect, useQuasar, type QTableProps } from 'quasar';
|
||||
|
||||
import DialogProperties from 'src/components/dialog/DialogProperties.vue';
|
||||
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
|
||||
|
|
@ -156,6 +156,12 @@ const priceDisplay = computed(() => ({
|
|||
const actionDisplay = computed(() =>
|
||||
isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']),
|
||||
);
|
||||
const splitterModel = computed(() =>
|
||||
$q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
|
||||
);
|
||||
|
||||
const refFilterGroup = ref<InstanceType<typeof QSelect>>();
|
||||
const refFilterProductService = ref<InstanceType<typeof QSelect>>();
|
||||
const holdDialog = ref(false);
|
||||
const imageDialog = ref(false);
|
||||
const currentNode = ref<ProductGroup & { type: string }>();
|
||||
|
|
@ -205,7 +211,6 @@ const drawerInfo = ref(false);
|
|||
const isEdit = ref(false);
|
||||
|
||||
const modeView = ref(false);
|
||||
const splitterModel = ref(25);
|
||||
|
||||
const dialogInputForm = ref(false);
|
||||
const dialogProduct = ref(false);
|
||||
|
|
@ -1829,16 +1834,46 @@ watch(
|
|||
style="width: 100%"
|
||||
class="col"
|
||||
after-class="overflow-hidden"
|
||||
:disable="$q.screen.lt.sm"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="surface-1 column full-height">
|
||||
<div
|
||||
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : ''}`"
|
||||
>
|
||||
<div class="col ellipsis-2-lines">
|
||||
<div v-if="$q.screen.gt.sm" class="col ellipsis-2-lines">
|
||||
{{ $t('productService.caption') }}
|
||||
</div>
|
||||
<q-input
|
||||
v-else
|
||||
for="input-search"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="col"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
>
|
||||
<template v-slot: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="refFilterGroup?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="col full-width scroll">
|
||||
|
|
@ -1964,10 +1999,9 @@ watch(
|
|||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class=""
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -1975,14 +2009,26 @@ watch(
|
|||
<template v-slot: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="refFilterGroup?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterGroup"
|
||||
v-model="currentStatus"
|
||||
for="select-status"
|
||||
outlined
|
||||
|
|
@ -2466,11 +2512,11 @@ watch(
|
|||
style="overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
|
||||
class="row justify-between q-px-md q-py-sm surface-3 bordered-b"
|
||||
>
|
||||
<q-input
|
||||
for="input-search"
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
class="col col-md-3"
|
||||
outlined
|
||||
dense
|
||||
unelavated
|
||||
|
|
@ -2482,14 +2528,26 @@ watch(
|
|||
<template v-slot: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="refFilterProductService?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-6" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilterProductService"
|
||||
:for="'field-select-status'"
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
|
|
@ -3721,86 +3779,93 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
id="product-form"
|
||||
class="full-width full-height scroll"
|
||||
:class="{
|
||||
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
|
||||
'q-pb-sm q-px-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
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">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
class="col surface-1 rounded bordered scroll row relative-position full-height"
|
||||
id="product-form"
|
||||
>
|
||||
<div
|
||||
class="q-py-md q-px-lg"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
<div class="q-py-md q-pl-md q-pr-sm">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
id="customer-form-content"
|
||||
: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"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
|
@ -3887,123 +3952,131 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 rounded bordered scroll row relative-position"
|
||||
id="product-form"
|
||||
class="full-width full-height scroll"
|
||||
:class="{
|
||||
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
'q-pb-lg q-px-lg ': $q.screen.gt.sm,
|
||||
'q-pb-sm q-px-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="surface-1 rounded row q-mx-lg q-my-md"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
class="col surface-1 rounded bordered scroll row relative-position full-height"
|
||||
id="product-form"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
formProduct = { ...prevProduct };
|
||||
if (prevProduct.document)
|
||||
formProductDocument = prevProduct.document;
|
||||
infoProductEdit = false;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="infoProductEdit = true"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="() => deleteProductConfirm()"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
<div
|
||||
class="surface-1 rounded row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
formProduct = { ...prevProduct };
|
||||
if (prevProduct.document)
|
||||
formProductDocument = prevProduct.document;
|
||||
infoProductEdit = false;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoProductEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="infoProductEdit = true"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoProductEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="() => deleteProductConfirm()"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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">
|
||||
<q-item
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
dense
|
||||
clickable
|
||||
class="no-padding items-center rounded full-width"
|
||||
:class="{ 'q-mt-xs': v > 1 }"
|
||||
active-class="product-form-active"
|
||||
:active="productTab === v"
|
||||
@click="productTab = v"
|
||||
>
|
||||
<span class="full-width q-py-sm" style="padding-inline: 20px">
|
||||
{{
|
||||
v === 1
|
||||
? $t('form.field.basicInformation')
|
||||
: v === 2
|
||||
? $t('productService.product.priceInformation')
|
||||
: $t('general.information', {
|
||||
msg: $t('general.attachment'),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
disableCode
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
:priceDisplay="priceDisplay"
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-md-10"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<BasicInfoProduct
|
||||
v-if="productTab === 1"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:detail="formProduct.detail"
|
||||
v-model:remark="formProduct.remark"
|
||||
v-model:name="formProduct.name"
|
||||
v-model:code="formProduct.code"
|
||||
v-model:process="formProduct.process"
|
||||
v-model:expense-type="formProduct.expenseType"
|
||||
v-model:shared="formProduct.shared"
|
||||
disableCode
|
||||
dense
|
||||
separator
|
||||
/>
|
||||
<PriceDataComponent
|
||||
v-if="productTab === 2"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:price="formProduct.price"
|
||||
v-model:agent-price="formProduct.agentPrice"
|
||||
v-model:service-charge="formProduct.serviceCharge"
|
||||
v-model:vat-included="formProduct.vatIncluded"
|
||||
v-model:calc-vat="formProduct.calcVat"
|
||||
dense
|
||||
:priceDisplay="priceDisplay"
|
||||
/>
|
||||
<FormDocument
|
||||
v-if="productTab === 3"
|
||||
:readonly="!infoProductEdit"
|
||||
v-model:attachment="formProductDocument"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
|
@ -4170,17 +4243,33 @@ watch(
|
|||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div
|
||||
class="surface-1 rounded q-my-md q-mx-lg items-center row"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
class="surface-1 rounded items-center justify-end row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
"
|
||||
:style="$q.screen.lt.sm && 'width: 80px'"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<div class="bordered rounded q-mr-md" v-if="serviceTab === 2">
|
||||
<div
|
||||
class="bordered rounded col-md row"
|
||||
v-if="serviceTab === 2"
|
||||
:style="$q.screen.lt.sm && 'flex-basis: 100%; '"
|
||||
>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-file-tree-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4199,6 +4288,7 @@ watch(
|
|||
@click="serviceTreeView = true"
|
||||
/>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-view-list-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4446,16 +4536,29 @@ watch(
|
|||
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<!-- row: $q.screen.gt.sm, -->
|
||||
<div
|
||||
class="surface-1 rounded q-my-md q-mx-lg row items-center"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
class="surface-1 rounded items-center justify-end row"
|
||||
:class="{
|
||||
'q-my-md q-mx-lg': $q.screen.gt.sm,
|
||||
'q-ma-sm': $q.screen.lt.md,
|
||||
}"
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
"
|
||||
v-if="actionDisplay && !currentNoAction"
|
||||
>
|
||||
<div
|
||||
class="bordered rounded q-mr-md"
|
||||
class="bordered rounded col-md row"
|
||||
v-if="serviceTab === 2 && !infoServiceEdit"
|
||||
:style="$q.screen.lt.sm && 'flex-basis: 100%; width: 1px'"
|
||||
>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-file-tree-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4474,6 +4577,7 @@ watch(
|
|||
@click="serviceTreeView = true"
|
||||
/>
|
||||
<q-btn
|
||||
class="col"
|
||||
icon="mdi-view-list-outline"
|
||||
flat
|
||||
square
|
||||
|
|
@ -4533,6 +4637,7 @@ watch(
|
|||
type="button"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col column justify-between no-wrap"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
|
|
@ -4613,7 +4718,7 @@ watch(
|
|||
id="customer-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
v-if="dialogServiceEdit"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { pageTabs, columnQuotation } from './constants';
|
||||
|
||||
import { onMounted, reactive, ref, watch, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
// NOTE: Import stores
|
||||
import { useQuotationStore } from 'src/stores/quotations';
|
||||
|
|
@ -12,6 +11,7 @@ import useFlowStore from 'src/stores/flow';
|
|||
import useMyBranch from 'stores/my-branch';
|
||||
import { useQuotationForm } from './form';
|
||||
import { hslaColors } from './constants';
|
||||
import { pageTabs, columnQuotation } from './constants';
|
||||
|
||||
// NOTE Import Types
|
||||
import { CustomerBranchCreate, CustomerType } from 'stores/customer/types';
|
||||
|
|
@ -44,6 +44,7 @@ import { Quotation } from 'src/stores/quotations/types';
|
|||
import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
|
||||
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const quotationFormStore = useQuotationForm();
|
||||
const customerFormStore = useCustomerForm();
|
||||
const flowStore = useFlowStore();
|
||||
|
|
@ -240,6 +241,7 @@ const {
|
|||
} = storeToRefs(quotationStore);
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
navigatorStore.current.title = 'quotation.title';
|
||||
navigatorStore.current.path = [
|
||||
{
|
||||
|
|
@ -476,7 +478,7 @@ async function storeDataLocal(id: string) {
|
|||
<header class="col surface-1 rounded bordered overflow-hidden">
|
||||
<div class="column full-height">
|
||||
<section
|
||||
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||
class="row surface-3 justify-between full-width bordered-b"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||
|
|
@ -485,7 +487,7 @@ async function storeDataLocal(id: string) {
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -495,16 +497,12 @@ async function storeDataLocal(id: string) {
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-3 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5 justify-end" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-if="!pageState.gridView"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col q-ml-sm"
|
||||
class="col-md-5 q-ml-sm"
|
||||
:options="
|
||||
fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
|
|
@ -654,8 +652,9 @@ async function storeDataLocal(id: string) {
|
|||
@delete="(id) => triggerDialogDeleteQuottaion(id)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<div class="col-md-4 col-sm-6 col-12 column">
|
||||
<QuotationCard
|
||||
class="col"
|
||||
hide-kebab-delete
|
||||
:hide-kebab-edit="!(pageState.currentTab === 'Issued')"
|
||||
:urgent="item.row.urgent"
|
||||
|
|
@ -788,7 +787,12 @@ async function storeDataLocal(id: string) {
|
|||
}
|
||||
"
|
||||
>
|
||||
<header class="q-mx-lg q-mt-lg">
|
||||
<header
|
||||
:class="{
|
||||
'q-mx-lg q-mt-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-mt-sm': $q.screen.lt.md,
|
||||
}"
|
||||
>
|
||||
<ProfileBanner
|
||||
prefix="dialog"
|
||||
img="/images/quotation-bg-avatar.png"
|
||||
|
|
@ -801,9 +805,19 @@ async function storeDataLocal(id: string) {
|
|||
hideFade
|
||||
/>
|
||||
</header>
|
||||
<section class="col surface-1 q-ma-lg rounded bordered row scroll">
|
||||
<section
|
||||
class="col surface-1 rounded bordered row scroll"
|
||||
:class="{
|
||||
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||
'q-mx-md q-my-sm': $q.screen.lt.md,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="col-12 q-px-md q-py-lg"
|
||||
class="col-12"
|
||||
:class="{
|
||||
'q-px-md q-py-lg': $q.screen.gt.sm,
|
||||
'q-pa-sm': $q.screen.lt.md,
|
||||
}"
|
||||
id="customer-form-content"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
|
|
@ -839,7 +853,7 @@ async function storeDataLocal(id: string) {
|
|||
>
|
||||
<div class="full-height row q-pa-md">
|
||||
<ItemCard
|
||||
class="col q-mx-sm full-height"
|
||||
class="col q-mx-sm full-height cursor-pointer"
|
||||
v-for="value in dialogCreateCustomerItem"
|
||||
:key="value.text"
|
||||
:icon="value.icon"
|
||||
|
|
@ -850,7 +864,9 @@ async function storeDataLocal(id: string) {
|
|||
() => {
|
||||
triggerCreateCustomerd({
|
||||
type:
|
||||
value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
|
||||
value.text === 'customer.employerLegalEntity'
|
||||
? CustomerType.Corporate
|
||||
: CustomerType.Person,
|
||||
});
|
||||
emptyCreateDialog = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -371,10 +371,11 @@ onMounted(async () => {
|
|||
"
|
||||
class="row items-center q-pb-sm"
|
||||
>
|
||||
<span class="app-text-muted-2">
|
||||
<span class="app-text-muted-2 col-12 col-md">
|
||||
{{ $t('quotation.paySplitCount') }}
|
||||
</span>
|
||||
<span class="q-ml-auto">
|
||||
|
||||
<span>
|
||||
{{ $t('quotation.receiptDialog.total') }}
|
||||
</span>
|
||||
<span class="bordered rounded surface-2 number-box q-mx-sm">
|
||||
|
|
@ -415,49 +416,58 @@ onMounted(async () => {
|
|||
<!-- summary total, paid, remain -->
|
||||
<div class="row items-center">
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md"
|
||||
class="row col rounded q-px-sm q-py-md justify-end"
|
||||
style="border: 1px solid hsl(var(--info-bg))"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.totalAmount') }}
|
||||
<span class="q-ml-auto">
|
||||
{{ formatNumberDecimal(data.finalPrice, 2) }}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.totalAmount') }}
|
||||
</span>
|
||||
{{ formatNumberDecimal(data.finalPrice, 2) }}
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md q-mx-md"
|
||||
class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
|
||||
style="border: 1px solid hsl(var(--positive-bg))"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.paid') }}
|
||||
<span class="q-ml-auto">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
paymentData.reduce(
|
||||
(c, i) =>
|
||||
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
|
||||
0,
|
||||
),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.paid') }}
|
||||
</span>
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
paymentData.reduce(
|
||||
(c, i) =>
|
||||
i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
|
||||
0,
|
||||
),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md"
|
||||
class="row col rounded q-px-sm q-py-md justify-end"
|
||||
style="border: 1px solid hsl(var(--warning-bg))"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.remain') }}
|
||||
<span class="q-ml-auto">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
paymentData.reduce(
|
||||
(c, i) =>
|
||||
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
|
||||
0,
|
||||
),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('quotation.receiptDialog.remain') }}
|
||||
</span>
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
paymentData.reduce(
|
||||
(c, i) =>
|
||||
i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
|
||||
0,
|
||||
),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { QSelect, useQuasar } from 'quasar';
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
|
||||
import {
|
||||
baseUrl,
|
||||
|
|
@ -13,10 +13,9 @@ import { ProductTree, quotationProductTree } from './utils';
|
|||
|
||||
// NOTE: Import stores
|
||||
import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
|
||||
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
|
||||
import { useQuotationStore } from 'src/stores/quotations';
|
||||
import useProductServiceStore from 'stores/product-service';
|
||||
import { waitAll, calculateDaysUntilExpire, dialog } from 'src/stores/utils';
|
||||
import { calculateDaysUntilExpire, dialog } from 'src/stores/utils';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
import { useInvoice, useReceipt, usePayment } from 'stores/payment';
|
||||
import useCustomerStore from 'stores/customer';
|
||||
|
|
@ -28,13 +27,12 @@ import { deleteItem } from 'stores/utils';
|
|||
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
|
||||
import { View } from './types.ts';
|
||||
import {
|
||||
EmployeeWorker,
|
||||
PayCondition,
|
||||
ProductRelation,
|
||||
ProductServiceList,
|
||||
QuotationPayload,
|
||||
} from 'src/stores/quotations/types';
|
||||
import { Employee, EmployeeWork } from 'src/stores/employee/types';
|
||||
import { Employee } from 'src/stores/employee/types';
|
||||
import { Receipt } from 'src/stores/payment/types';
|
||||
import {
|
||||
ProductGroup,
|
||||
|
|
@ -50,7 +48,6 @@ import ProductItem from 'components/05_quotation/ProductItem.vue';
|
|||
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
||||
import ToggleButton from 'components/button/ToggleButton.vue';
|
||||
import FormAbout from 'components/05_quotation/FormAbout.vue';
|
||||
import SelectZone from 'components/shared/SelectZone.vue';
|
||||
import ImportWorker from './ImportWorker.vue';
|
||||
import {
|
||||
AddButton,
|
||||
|
|
@ -127,7 +124,7 @@ const {
|
|||
const { data: config } = storeToRefs(configStore);
|
||||
|
||||
const receiptList = ref<Receipt[]>([]);
|
||||
|
||||
const refStatusFilter = ref<InstanceType<typeof QSelect>>();
|
||||
const templateForm = ref<string>('');
|
||||
const templateFormOption = ref<{ label: string; value: string }[]>([]);
|
||||
|
||||
|
|
@ -1072,25 +1069,25 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
async function searchEmployee(text: string) {
|
||||
let query: string | undefined = text;
|
||||
let pageSize = 50;
|
||||
// async function searchEmployee(text: string) {
|
||||
// let query: string | undefined = text;
|
||||
// let pageSize = 50;
|
||||
|
||||
if (!text) {
|
||||
query = undefined;
|
||||
pageSize = 9999;
|
||||
}
|
||||
// if (!text) {
|
||||
// query = undefined;
|
||||
// pageSize = 9999;
|
||||
// }
|
||||
|
||||
const retEmp = await customerStore.fetchBranchEmployee(
|
||||
quotationFormData.value.customerBranchId,
|
||||
{
|
||||
query: query,
|
||||
pageSize: pageSize,
|
||||
passport: true,
|
||||
},
|
||||
);
|
||||
if (retEmp) workerList.value = retEmp.data.result;
|
||||
}
|
||||
// const retEmp = await customerStore.fetchBranchEmployee(
|
||||
// quotationFormData.value.customerBranchId,
|
||||
// {
|
||||
// query: query,
|
||||
// pageSize: pageSize,
|
||||
// passport: true,
|
||||
// },
|
||||
// );
|
||||
// if (retEmp) workerList.value = retEmp.data.result;
|
||||
// }
|
||||
|
||||
function storeDataLocal() {
|
||||
quotationFormData.value.productServiceList = productServiceList.value;
|
||||
|
|
@ -1308,12 +1305,24 @@ async function formDownload() {
|
|||
|
||||
<div
|
||||
v-if="quotationFormState.mode !== 'create'"
|
||||
class="column col-2 q-ml-auto"
|
||||
class="column col-sm-2 col-12 q-ml-auto"
|
||||
style="gap: 10px"
|
||||
>
|
||||
<div class="row justify-end">
|
||||
<BadgeComponent :title-i18n="$t('general.laborIdentified')" />
|
||||
<div
|
||||
class="row"
|
||||
:class="{
|
||||
'justify-end': $q.screen.gt.xs,
|
||||
'q-pl-xl q-mt-sm': $q.screen.lt.sm,
|
||||
}"
|
||||
>
|
||||
<BadgeComponent
|
||||
:title-i18n="$t('general.laborIdentified')"
|
||||
:class="{
|
||||
'q-ml-md': $q.screen.lt.sm,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row items-center justify-between surface-1 rounded q-pa-xs"
|
||||
style="height: 40px; border-radius: 40px"
|
||||
|
|
@ -1895,9 +1904,25 @@ async function formDownload() {
|
|||
<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="refStatusFilter?.showPopup"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refStatusFilter"
|
||||
v-model="quotationFormState.statusFilterRequest"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -2093,9 +2118,10 @@ async function formDownload() {
|
|||
</section>
|
||||
</template>
|
||||
|
||||
<div class="surface-1 q-pa-md flex" style="gap: var(--size-2)">
|
||||
<div class="surface-1 q-pa-md row" style="gap: var(--size-2)">
|
||||
<SelectInput
|
||||
class="q-mr-sm"
|
||||
class="q-mr-xl col-md-3 col-12"
|
||||
incremental
|
||||
v-model="templateForm"
|
||||
id="quotation-branch"
|
||||
:option="templateFormOption"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import useOptionStore from 'stores/options';
|
|||
import DialogForm from 'src/components/DialogForm.vue';
|
||||
import TreeView from 'src/components/shared/TreeView.vue';
|
||||
import SelectZone from 'src/components/shared/SelectZone.vue';
|
||||
import SelectInput from 'src/components/shared/SelectInput.vue';
|
||||
import SelectProductGroup from 'src/components/shared/select/SelectProductGroup.vue';
|
||||
import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
|
||||
import DeleteButton from 'src/components/button/DeleteButton.vue';
|
||||
|
|
@ -491,7 +490,7 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row items-center q-gutter-x-sm">
|
||||
<div class="row items-center q-gutter-x-sm no-wrap">
|
||||
<q-btn
|
||||
color="primary"
|
||||
padding="4px"
|
||||
|
|
@ -499,7 +498,6 @@ watch(
|
|||
rounded
|
||||
icon="mdi-store-plus-outline"
|
||||
@click="triggerAddDialog"
|
||||
style="color: hsl(var(--text-mute))"
|
||||
/>
|
||||
<q-btn
|
||||
padding="4px"
|
||||
|
|
@ -507,6 +505,7 @@ watch(
|
|||
rounded
|
||||
icon="mdi-information-outline"
|
||||
@click="triggerInfo"
|
||||
:color="pageState.infoDrawer ? 'info' : ''"
|
||||
style="color: hsl(var(--text-mute))"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -634,7 +633,8 @@ watch(
|
|||
<div
|
||||
v-if="pageState.infoDrawer"
|
||||
class="column no-wrap surface-1"
|
||||
style="z-index: 1; width: 20vw; position: sticky"
|
||||
style="z-index: 1; position: sticky"
|
||||
:style="`width:${$q.screen.gt.sm ? '20vw' : '100%'}`"
|
||||
>
|
||||
<span
|
||||
v-if="selectedType === ''"
|
||||
|
|
@ -840,12 +840,14 @@ watch(
|
|||
>
|
||||
<template #top>
|
||||
<div class="row items-center app-text-muted">
|
||||
{{ $t('productService.group.title') }}
|
||||
<span class="q-pr-sm">
|
||||
{{ $t('productService.group.title') }}
|
||||
</span>
|
||||
|
||||
<SelectProductGroup
|
||||
class="q-pl-sm col-5"
|
||||
class="col-md-4 col-12"
|
||||
:class="{ 'q-mb-sm': $q.screen.lt.md }"
|
||||
id="product-group-select"
|
||||
style="min-height: 50px"
|
||||
clearable
|
||||
v-model:value="selectedProductGroup"
|
||||
:placeholder="
|
||||
|
|
|
|||
|
|
@ -28,8 +28,11 @@ withDefaults(
|
|||
);
|
||||
</script>
|
||||
<template>
|
||||
<section class="surface-1 rounded row">
|
||||
<aside class="column col bordered-r q-py-md q-pl-md">
|
||||
<section class="surface-1 rounded" :class="{ row: $q.screen.gt.xs }">
|
||||
<aside
|
||||
class="column col q-py-md q-pl-md"
|
||||
:class="{ 'bordered-r': $q.screen.gt.xs, ' bordered-b': $q.screen.lt.sm }"
|
||||
>
|
||||
<span class="text-weight-medium text-body1">
|
||||
{{ title || $t('quotation.receiptDialog.PaymentReceive') }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -305,7 +305,7 @@ watch(() => state.search, getWorkerList);
|
|||
</template>
|
||||
</DialogHeader>
|
||||
</template>
|
||||
<div class="col scroll">
|
||||
<div class="col full-width no-wrap scroll">
|
||||
<q-tab-panels
|
||||
class="surface-0 rounded full-height"
|
||||
v-model="state.step"
|
||||
|
|
@ -346,7 +346,7 @@ watch(() => state.search, getWorkerList);
|
|||
...data,
|
||||
_selectedIndex: selectedIndex(data),
|
||||
}))"
|
||||
class="col-2"
|
||||
class="col-md-2 col-sm-6 col-12"
|
||||
>
|
||||
<button
|
||||
class="selectable-item full-width"
|
||||
|
|
@ -399,7 +399,10 @@ watch(() => state.search, getWorkerList);
|
|||
<BackButton icon-only @click="prev" />
|
||||
</section>
|
||||
<section class="full-height scroll col">
|
||||
<div class="rounded column" style="gap: var(--size-4)">
|
||||
<div
|
||||
class="rounded column full-width no-wrap"
|
||||
style="gap: var(--size-4)"
|
||||
>
|
||||
<q-expansion-item
|
||||
dense
|
||||
default-opened
|
||||
|
|
@ -408,6 +411,7 @@ watch(() => state.search, getWorkerList);
|
|||
expand-icon="mdi-chevron-down-circle"
|
||||
header-class="q-py-sm text-medium text-body items-center surface-1"
|
||||
v-for="{ id, amount, worker, product } in productServiceList"
|
||||
:key="id"
|
||||
>
|
||||
<template #header>
|
||||
<q-avatar class="q-mr-md" size="md">
|
||||
|
|
@ -500,7 +504,11 @@ watch(() => state.search, getWorkerList);
|
|||
:class="{ dark: $q.dark.isActive }"
|
||||
class="text-center"
|
||||
>
|
||||
<q-td v-for="col in columns" :align="col.align">
|
||||
<q-td
|
||||
v-for="col in columns"
|
||||
:align="col.align"
|
||||
:key="col.name"
|
||||
>
|
||||
<!-- NOTE: custom column will starts with # -->
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
<q-avatar
|
||||
|
|
|
|||
|
|
@ -461,7 +461,7 @@ watch(() => state.search, getWorkerList);
|
|||
...data,
|
||||
_selectedIndex: selectedIndex(data),
|
||||
}))"
|
||||
class="col-2"
|
||||
class="col-md-2 col-sm-6 col-12"
|
||||
>
|
||||
<button
|
||||
class="selectable-item full-width"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QTableColumn, QTableSlots } from 'quasar';
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
|
||||
import BadgeComponent from 'components/BadgeComponent.vue';
|
||||
|
||||
|
|
@ -46,8 +44,6 @@ const emits = defineEmits<{
|
|||
(e: 'success'): void;
|
||||
}>();
|
||||
|
||||
const open = defineModel<boolean>('open', { default: false });
|
||||
|
||||
function goToRequestList(id: string) {
|
||||
const url = new URL(`/request-list/${id}`, window.location.origin);
|
||||
window.open(url.toString(), '_blank');
|
||||
|
|
@ -70,6 +66,10 @@ function goToRequestList(id: string) {
|
|||
card-container-class="q-col-gutter-sm"
|
||||
:no-data-label="$t('general.noDataTable')"
|
||||
class="full-width"
|
||||
:no-data-label="$t('general.noDataTable')"
|
||||
:pagination="{
|
||||
rowsPerPage: 0,
|
||||
}"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr
|
||||
|
|
@ -88,7 +88,7 @@ function goToRequestList(id: string) {
|
|||
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||
>
|
||||
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
||||
<q-td v-for="col in columns" :align="col.align">
|
||||
<q-td v-for="col in columns" :align="col.align" :key="col.name">
|
||||
<!-- NOTE: custom column will starts with # -->
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -251,12 +251,16 @@ watch(
|
|||
id="agencies-form-content"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<div
|
||||
class="q-py-md q-px-lg"
|
||||
class="rounded"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
|
|
@ -346,7 +350,7 @@ watch(
|
|||
class="rounded row"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||
>
|
||||
|
|
@ -425,7 +429,7 @@ watch(
|
|||
class="col-12 col-md-10 relative-position"
|
||||
:class="{
|
||||
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||
'q-pa-sm': !$q.screen.gt.sm,
|
||||
}"
|
||||
id="user-form-content"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { onMounted, reactive, ref } from 'vue';
|
|||
import { storeToRefs } from 'pinia';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import { baseUrl } from 'src/stores/utils';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
|
|
@ -22,6 +23,7 @@ import AgenciesDialog from './AgenciesDialog.vue';
|
|||
import { watch } from 'vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const institutionStore = useInstitution();
|
||||
|
||||
|
|
@ -248,6 +250,7 @@ async function fetchData() {
|
|||
onMounted(async () => {
|
||||
navigatorStore.current.title = 'agencies.title';
|
||||
navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
|
||||
await fetchData();
|
||||
});
|
||||
|
|
@ -324,7 +327,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -334,11 +337,7 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-3 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5 justify-end" style="white-space: nowrap">
|
||||
<!-- <q-select
|
||||
v-model="statusFilter"
|
||||
outlined
|
||||
|
|
@ -361,7 +360,7 @@ watch(
|
|||
v-if="!pageState.gridView"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col"
|
||||
class="col-md-5 q-ml-sm"
|
||||
:options="
|
||||
fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
// NOTE: Library
|
||||
import { computed, onMounted, reactive, watch } from 'vue';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QSelect, useQuasar } from 'quasar';
|
||||
|
||||
// NOTE: Components
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
|
|
@ -19,12 +20,15 @@ import { useRequestList } from 'src/stores/request-list';
|
|||
import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
|
||||
import { dialogWarningClose } from 'src/stores/utils';
|
||||
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const requestListStore = useRequestList();
|
||||
const { t } = useI18n();
|
||||
const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore);
|
||||
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
|
||||
// NOTE: Variable
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
|
|
@ -89,6 +93,7 @@ function triggerView(opts: { requestData: RequestData }) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
navigatorStore.current.title = 'requestList.title';
|
||||
navigatorStore.current.path = [{ text: 'requestList.caption', i18n: true }];
|
||||
|
||||
|
|
@ -185,7 +190,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -193,14 +198,26 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
|
|||
<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-12 col-md-5 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
v-model="pageState.statusFilter"
|
||||
outlined
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// NOTE: Library
|
||||
import { computed, onMounted, reactive, watch, ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// NOTE: Components
|
||||
|
|
@ -21,14 +22,13 @@ import {
|
|||
} from 'src/stores/task-order/types';
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { useTaskOrderStore } from 'src/stores/task-order';
|
||||
import { useTaskOrderForm } from './form';
|
||||
import useFlowStore from 'src/stores/flow';
|
||||
import { pageTabs, column, pageTabsReceive } from './constants';
|
||||
import { dialogWarningClose, isRoleInclude } from 'src/stores/utils';
|
||||
import { PaginationResult } from 'src/types';
|
||||
|
||||
const { t } = useI18n();
|
||||
const taskOrderFormStore = useTaskOrderForm();
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const taskOrderStore = useTaskOrderStore();
|
||||
|
|
@ -138,6 +138,7 @@ async function deleteTaskOrder(id: string) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
navigatorStore.current.title = 'taskOrder.title';
|
||||
navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
|
||||
fetchTaskOrderList();
|
||||
|
|
@ -284,7 +285,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -294,11 +295,7 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-3 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5 justify-end" style="white-space: nowrap">
|
||||
<!-- <q-select
|
||||
v-model="pageState.statusFilter"
|
||||
outlined
|
||||
|
|
@ -334,7 +331,7 @@ watch(
|
|||
v-if="!pageState.gridView"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col"
|
||||
class="col-md-5 q-ml-sm"
|
||||
:options="
|
||||
fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
|
|
|
|||
|
|
@ -1033,55 +1033,63 @@ watch(
|
|||
header-class="text-medium text-body items-center bordered-b "
|
||||
>
|
||||
<template #header>
|
||||
<q-avatar class="q-mr-md" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
<section class="row items-center full-width">
|
||||
<div class="flex items-center col-sm col-12 no-wrap">
|
||||
<q-avatar class="q-mr-md" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<span>
|
||||
{{ product.name }}
|
||||
<div class="app-text-muted text-caption">
|
||||
{{ product.code }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="row items-center q-gutter-x-sm"
|
||||
:class="{ 'q-py-xs': $q.screen.lt.sm }"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
v-for="taskStatus in 3"
|
||||
:key="taskStatus"
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.1)"
|
||||
:style="`color: hsl(var(--${
|
||||
taskStatus === 1
|
||||
? 'warning'
|
||||
: taskStatus === 2
|
||||
? 'positive'
|
||||
: 'negative'
|
||||
}-bg))`"
|
||||
>
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<span>
|
||||
{{ product.name }}
|
||||
<div class="app-text-muted text-caption">
|
||||
{{ product.code }}
|
||||
</div>
|
||||
</span>
|
||||
<span class="q-ml-auto row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="taskStatus in 3"
|
||||
:key="taskStatus"
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.1)"
|
||||
:style="`color: hsl(var(--${
|
||||
taskStatus === 1
|
||||
? 'warning'
|
||||
: taskStatus === 2
|
||||
? 'positive'
|
||||
: 'negative'
|
||||
}-bg))`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
{{
|
||||
taskStatusCount(
|
||||
taskStatus,
|
||||
product.id,
|
||||
v.responsibleUser.id,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
{{
|
||||
taskStatusCount(
|
||||
taskStatus,
|
||||
product.id,
|
||||
v.responsibleUser.id,
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -440,42 +440,55 @@ watch([currentFormData.value.taskStatus], () => {
|
|||
class="row items-center surface-1 q-pa-md rounded gradient-stat"
|
||||
>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md info"
|
||||
class="row col rounded q-px-sm q-py-md info justify-end"
|
||||
style="border: 1px solid hsl(var(--info-bg))"
|
||||
>
|
||||
{{ $t('taskOrder.allProduct') }}
|
||||
<span class="q-ml-auto">{{ fullTaskOrder.taskList.length }}</span>
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('taskOrder.allProduct') }}
|
||||
</span>
|
||||
{{ fullTaskOrder.taskList.length }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md q-mx-md positive"
|
||||
class="row col rounded q-px-sm q-py-md q-mx-md positive justify-end"
|
||||
style="border: 1px solid hsl(var(--positive-bg))"
|
||||
>
|
||||
{{ $t('taskOrder.alreadySentTask') }}
|
||||
<span class="q-ml-auto">
|
||||
{{
|
||||
fullTaskOrder.taskList.filter(
|
||||
(t) =>
|
||||
t.taskStatus === TaskStatus.Complete ||
|
||||
t.taskStatus === TaskStatus.Success ||
|
||||
t.taskStatus === TaskStatus.Validate ||
|
||||
t.taskStatus === TaskStatus.Redo ||
|
||||
t.taskStatus === TaskStatus.Failed,
|
||||
).length
|
||||
}}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('taskOrder.alreadySentTask') }}
|
||||
</span>
|
||||
{{
|
||||
fullTaskOrder.taskList.filter(
|
||||
(t) =>
|
||||
t.taskStatus === TaskStatus.Complete ||
|
||||
t.taskStatus === TaskStatus.Success ||
|
||||
t.taskStatus === TaskStatus.Validate ||
|
||||
t.taskStatus === TaskStatus.Redo ||
|
||||
t.taskStatus === TaskStatus.Failed,
|
||||
).length
|
||||
}}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md warning"
|
||||
class="row col rounded q-px-sm q-py-md warning justify-end"
|
||||
style="border: 1px solid hsl(var(--warning-bg))"
|
||||
>
|
||||
{{ $t('taskOrder.status.Pending') }}
|
||||
<span class="q-ml-auto">
|
||||
{{
|
||||
fullTaskOrder.taskList.filter(
|
||||
(t) => t.taskStatus === TaskStatus.InProgress,
|
||||
).length
|
||||
}}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('taskOrder.status.Pending') }}
|
||||
</span>
|
||||
{{
|
||||
fullTaskOrder.taskList.filter(
|
||||
(t) => t.taskStatus === TaskStatus.InProgress,
|
||||
).length
|
||||
}}
|
||||
</span>
|
||||
</article>
|
||||
|
||||
|
|
@ -553,64 +566,79 @@ watch([currentFormData.value.taskStatus], () => {
|
|||
header-class="q-py-sm text-medium text-body items-center rounded q-mx-md q-my-sm"
|
||||
>
|
||||
<template #header>
|
||||
<q-avatar class="q-mr-md" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<span>
|
||||
{{ product.name }}
|
||||
<div class="app-text-muted text-caption">
|
||||
{{ product.code }}
|
||||
<section class="row items-center full-width">
|
||||
<div class="flex items-center col-sm col-12 no-wrap">
|
||||
<q-avatar class="q-mr-md" size="md">
|
||||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
>
|
||||
<template #error>
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<span>
|
||||
{{ product.name }}
|
||||
<div class="app-text-muted text-caption">
|
||||
{{ product.code }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
fullTaskOrder.taskOrderStatus === TaskOrderStatus.Pending
|
||||
"
|
||||
class="q-ml-auto"
|
||||
>
|
||||
<div
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.15)"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
{{ list.length }}
|
||||
</div>
|
||||
</span>
|
||||
<span v-else class="q-ml-auto row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.1)"
|
||||
:style="`color: hsl(var(--${
|
||||
v === 1 ? 'warning' : v === 2 ? 'positive' : 'negative'
|
||||
}-bg))`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
|
||||
{{ taskStatusCount(v, product.id) }}
|
||||
<div
|
||||
class="row items-center"
|
||||
:class="{ 'q-py-xs': $q.screen.lt.sm }"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
fullTaskOrder.taskOrderStatus ===
|
||||
TaskOrderStatus.Pending
|
||||
"
|
||||
class="q-ml-auto"
|
||||
>
|
||||
<div
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.15)"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
{{ list.length }}
|
||||
</div>
|
||||
</span>
|
||||
<span v-else class="row items-center q-gutter-x-sm">
|
||||
<div
|
||||
v-for="v in 3"
|
||||
:key="v"
|
||||
class="rounded q-px-sm row items-center"
|
||||
style="background: hsl(var(--text-mute) / 0.1)"
|
||||
:style="`color: hsl(var(--${
|
||||
v === 1
|
||||
? 'warning'
|
||||
: v === 2
|
||||
? 'positive'
|
||||
: 'negative'
|
||||
}-bg))`"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-account-group-outline"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
|
||||
{{ taskStatusCount(v, product.id) }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script lang="ts" setup>
|
||||
// NOTE: Library
|
||||
import { computed, onMounted, reactive, watch } from 'vue';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { QSelect, useQuasar } from 'quasar';
|
||||
|
||||
// NOTE: Components
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
|
|
@ -20,10 +21,12 @@ import { useInvoice } from 'src/stores/payment';
|
|||
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { Quotation } from 'src/stores/quotations';
|
||||
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const invoiceStore = useInvoice();
|
||||
const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
|
||||
// NOTE: Variable
|
||||
const pageState = reactive({
|
||||
|
|
@ -74,7 +77,7 @@ async function fetchStats() {
|
|||
}
|
||||
|
||||
function triggerView(opts: { quotationId: string }) {
|
||||
const url = new URL(`/quotation/view?tab=invoice`, window.location.origin);
|
||||
const url = new URL('/quotation/view?tab=invoice', window.location.origin);
|
||||
|
||||
localStorage.setItem(
|
||||
'new-quotation',
|
||||
|
|
@ -105,6 +108,8 @@ function viewDocExample(quotationId: string) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
|
||||
navigatorStore.current.title = 'invoice.title';
|
||||
navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
|
||||
|
||||
|
|
@ -189,7 +194,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -197,14 +202,26 @@ watch(
|
|||
<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-12 col-md-5 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
v-model="pageState.statusFilter"
|
||||
outlined
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { computed, onMounted, reactive, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
// NOTE: Components
|
||||
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||
|
|
@ -24,6 +25,7 @@ import { CreditNoteStatus, useCreditNote } from 'src/stores/credit-note';
|
|||
import TableCreditNote from './TableCreditNote.vue';
|
||||
import { dialogWarningClose } from 'src/stores/utils';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const flow = useFlowStore();
|
||||
const navigator = useNavigator();
|
||||
|
|
@ -115,6 +117,7 @@ function close() {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
navigator.current.title = 'creditNote.title';
|
||||
navigator.current.path = [{ text: 'creditNote.caption', i18n: true }];
|
||||
|
||||
|
|
@ -209,7 +212,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -219,16 +222,12 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-3 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5 justify-end" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-if="!pageState.gridView"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col"
|
||||
class="col q-ml-sm"
|
||||
:options="
|
||||
fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
|
|
|
|||
|
|
@ -125,31 +125,40 @@ const refundOpts = ref<
|
|||
class="row col-12 items-center surface-1 q-py-sm rounded gradient-stat"
|
||||
>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md info"
|
||||
class="row col rounded q-px-sm q-py-md info justify-end"
|
||||
style="border: 1px solid hsl(var(--info-bg))"
|
||||
>
|
||||
{{ $t('creditNote.label.totalAmount') }}
|
||||
<span class="q-ml-auto">
|
||||
{{ formatNumberDecimal(total) }}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('creditNote.label.totalAmount') }}
|
||||
</span>
|
||||
{{ formatNumberDecimal(total) }}
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-mx-md q-py-md positive"
|
||||
class="row col rounded q-px-sm q-mx-md q-py-md positive justify-end"
|
||||
style="border: 1px solid hsl(var(--positive-bg))"
|
||||
>
|
||||
{{ $t('creditNote.label.paid') }}
|
||||
<span class="q-ml-auto">
|
||||
{{ formatNumberDecimal(paid) }}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('creditNote.label.paid') }}
|
||||
</span>
|
||||
{{ formatNumberDecimal(paid) }}
|
||||
</span>
|
||||
<span
|
||||
class="row col rounded q-px-sm q-py-md warning"
|
||||
class="row col rounded q-px-sm q-py-md warning justify-end"
|
||||
style="border: 1px solid hsl(var(--warning-bg))"
|
||||
>
|
||||
{{ $t('creditNote.label.remain') }}
|
||||
<span class="q-ml-auto">
|
||||
{{ formatNumberDecimal(remain) }}
|
||||
<span
|
||||
class="col-sm col-12"
|
||||
:class="{ 'text-right': $q.screen.lt.sm }"
|
||||
>
|
||||
{{ $t('creditNote.label.remain') }}
|
||||
</span>
|
||||
{{ formatNumberDecimal(remain) }}
|
||||
</span>
|
||||
</article>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
// NOTE: Library
|
||||
import { computed, onMounted, reactive, watch } from 'vue';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
// NOTE: Components
|
||||
|
|
@ -19,14 +19,17 @@ import { useRequestList } from 'src/stores/request-list';
|
|||
import { usePayment, useReceipt } from 'src/stores/payment';
|
||||
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { Quotation } from 'src/stores/quotations';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { QSelect, useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
const receiptStore = useReceipt();
|
||||
const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
|
||||
|
||||
// NOTE: Variable
|
||||
const refFilter = ref<InstanceType<typeof QSelect>>();
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
statusFilter: 'None' as 'None' | PaymentDataStatus,
|
||||
|
|
@ -59,7 +62,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
|
|||
}
|
||||
|
||||
function triggerView(opts: { quotationId: string }) {
|
||||
const url = new URL(`/quotation/view?tab=receipt`, window.location.origin);
|
||||
const url = new URL('/quotation/view?tab=receipt', window.location.origin);
|
||||
|
||||
localStorage.setItem(
|
||||
'new-quotation',
|
||||
|
|
@ -82,6 +85,8 @@ async function viewDocExample(id: string) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pageState.gridView = $q.screen.lt.md ? true : false;
|
||||
|
||||
navigatorStore.current.title = 'receipt.title';
|
||||
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
|
||||
|
||||
|
|
@ -159,7 +164,7 @@ watch(
|
|||
outlined
|
||||
dense
|
||||
:label="$t('general.search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
class="col col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="pageState.inputSearch"
|
||||
debounce="200"
|
||||
|
|
@ -167,14 +172,26 @@ watch(
|
|||
<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-12 col-md-5 justify-end"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<div class="row col-md-5" style="white-space: nowrap">
|
||||
<q-select
|
||||
v-show="$q.screen.gt.sm"
|
||||
ref="refFilter"
|
||||
v-model="pageState.statusFilter"
|
||||
outlined
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export type User = {
|
|||
id: string;
|
||||
code: string;
|
||||
birthDate?: Date | null;
|
||||
responsibleArea: string;
|
||||
responsibleArea: string[];
|
||||
checkpoint?: string | null;
|
||||
checkpointEN?: string | null;
|
||||
citizenExpire?: Date | null;
|
||||
|
|
@ -99,7 +99,7 @@ export type UserCreate = {
|
|||
username: string;
|
||||
status?: Status;
|
||||
birthDate?: Date | null;
|
||||
responsibleArea?: string | null;
|
||||
responsibleArea?: string[] | null;
|
||||
checkpoint?: string | null;
|
||||
checkpointEN?: string | null;
|
||||
citizenExpire?: Date | null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue