fix: workflow page
This commit is contained in:
puriphatt
parent
06f099a62b
commit
2cc957ffde
2 changed files with 268 additions and 0 deletions
263
src/pages/04_flow-managment/MainPage.vue
Normal file
263
src/pages/04_flow-managment/MainPage.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
|
||||||
|
import StatCardComponent from 'src/components/StatCardComponent.vue';
|
||||||
|
import CreateButton from 'src/components/AddButton.vue';
|
||||||
|
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||||
|
import FlowDialog from '../04_product-service/FlowDialog.vue';
|
||||||
|
|
||||||
|
const pageState = reactive({
|
||||||
|
hideStat: false,
|
||||||
|
inputSearch: '',
|
||||||
|
fieldSelected: [],
|
||||||
|
gridView: true,
|
||||||
|
total: 0,
|
||||||
|
|
||||||
|
addModal: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||||
|
|
||||||
|
function triggerAddDialog() {
|
||||||
|
pageState.addModal = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="column full-height no-wrap">
|
||||||
|
<!-- SEC: stat -->
|
||||||
|
<section class="text-body-2 q-mb-xs flex items-center">
|
||||||
|
{{ $t('general.dataSum') }}
|
||||||
|
<q-badge
|
||||||
|
rounded
|
||||||
|
class="q-ml-sm"
|
||||||
|
style="
|
||||||
|
background-color: hsla(var(--info-bg) / 0.15);
|
||||||
|
color: hsl(var(--info-bg));
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ 0 }}
|
||||||
|
</q-badge>
|
||||||
|
<q-btn
|
||||||
|
class="q-ml-sm"
|
||||||
|
icon="mdi-pin-outline"
|
||||||
|
color="primary"
|
||||||
|
size="sm"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
rounded
|
||||||
|
@click="pageState.hideStat = !pageState.hideStat"
|
||||||
|
:style="pageState.hideStat ? 'rotate: 90deg' : ''"
|
||||||
|
style="transition: 0.1s ease-in-out"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<transition name="slide">
|
||||||
|
<div v-if="!pageState.hideStat" class="scroll q-mb-md">
|
||||||
|
<div style="display: inline-block">
|
||||||
|
<StatCardComponent
|
||||||
|
labelI18n
|
||||||
|
:branch="[
|
||||||
|
{
|
||||||
|
icon: 'mdi-folder-outline',
|
||||||
|
count: 0,
|
||||||
|
label: 'flow.title',
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:dark="$q.dark.isActive"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<!-- SEC: header content -->
|
||||||
|
<section class="col surface-1 rounded">
|
||||||
|
<div class="column full-height">
|
||||||
|
<header
|
||||||
|
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||||
|
style="z-index: 1"
|
||||||
|
>
|
||||||
|
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||||
|
<q-input
|
||||||
|
for="input-search"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:label="$t('general.search')"
|
||||||
|
class="q-mr-md col-12 col-md-3"
|
||||||
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||||
|
v-model="pageState.inputSearch"
|
||||||
|
debounce="200"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<q-icon name="mdi-magnify" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="true"
|
||||||
|
class="row col-12 col-md-4 justify-end"
|
||||||
|
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="statusFilter"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
option-value="value"
|
||||||
|
option-label="label"
|
||||||
|
class="col"
|
||||||
|
:class="{ 'offset-md-5': pageState.gridView }"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
:for="'field-select-status'"
|
||||||
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||||
|
:options="[
|
||||||
|
{ label: $t('general.all'), value: 'all' },
|
||||||
|
{ label: $t('general.active'), value: 'statusACTIVE' },
|
||||||
|
{ label: $t('general.inactive'), value: 'statusINACTIVE' },
|
||||||
|
]"
|
||||||
|
></q-select>
|
||||||
|
|
||||||
|
<q-select
|
||||||
|
v-if="!pageState.gridView"
|
||||||
|
id="select-field"
|
||||||
|
for="select-field"
|
||||||
|
class="col q-ml-sm"
|
||||||
|
:display-value="$t('general.displayField')"
|
||||||
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||||
|
v-model="pageState.fieldSelected"
|
||||||
|
option-label="label"
|
||||||
|
option-value="value"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
outlined
|
||||||
|
multiple
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-btn-toggle
|
||||||
|
id="btn-mode"
|
||||||
|
v-model="pageState.gridView"
|
||||||
|
dense
|
||||||
|
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
||||||
|
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||||
|
size="xs"
|
||||||
|
:options="[
|
||||||
|
{ value: true, slot: 'folder' },
|
||||||
|
{ value: false, slot: 'list' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template v-slot:folder>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-view-grid-outline"
|
||||||
|
size="16px"
|
||||||
|
class="q-px-sm q-py-xs rounded"
|
||||||
|
:style="{
|
||||||
|
color: $q.dark.isActive
|
||||||
|
? pageState.gridView
|
||||||
|
? '#C9D3DB '
|
||||||
|
: '#787B7C'
|
||||||
|
: pageState.gridView
|
||||||
|
? '#787B7C'
|
||||||
|
: '#C9D3DB',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-slot:list>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-format-list-bulleted"
|
||||||
|
class="q-px-sm q-py-xs rounded"
|
||||||
|
size="16px"
|
||||||
|
:style="{
|
||||||
|
color: $q.dark.isActive
|
||||||
|
? pageState.gridView === false
|
||||||
|
? '#C9D3DB'
|
||||||
|
: '#787B7C'
|
||||||
|
: pageState.gridView === false
|
||||||
|
? '#787B7C'
|
||||||
|
: '#C9D3DB',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-btn-toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- SEC: body content -->
|
||||||
|
<article
|
||||||
|
v-if="true"
|
||||||
|
class="col surface-2 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<NoData
|
||||||
|
v-if="pageState.inputSearch"
|
||||||
|
:not-found="!!pageState.inputSearch"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CreateButton
|
||||||
|
v-if="!pageState.inputSearch"
|
||||||
|
@click="triggerAddDialog"
|
||||||
|
label="general.add"
|
||||||
|
:i18n-args="{ text: $t('flow.title') }"
|
||||||
|
/>
|
||||||
|
</article>
|
||||||
|
<article v-else class="col q-pa-md surface-2 scroll"></article>
|
||||||
|
|
||||||
|
<!-- SEC: footer content -->
|
||||||
|
<!-- <footer
|
||||||
|
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
||||||
|
v-if="quotationPageMax > 0"
|
||||||
|
>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="row items-center no-wrap">
|
||||||
|
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
|
||||||
|
{{ $t('general.recordPerPage') }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<q-btn-dropdown
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
:label="quotationPageSize"
|
||||||
|
class="bordered q-pl-md"
|
||||||
|
>
|
||||||
|
<q-list>
|
||||||
|
<q-item
|
||||||
|
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||||
|
:key="v"
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="quotationPageSize = v"
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>{{ v }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-btn-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 row justify-center app-text-muted">
|
||||||
|
{{
|
||||||
|
$t('general.recordsPage', {
|
||||||
|
resultcurrentPage: quotationData.length,
|
||||||
|
total: pageState.inputSearch
|
||||||
|
? quotationData.length
|
||||||
|
: pageState.total,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<nav class="col-4 row justify-end">
|
||||||
|
<PaginationComponent
|
||||||
|
v-model:current-page="quotationPage"
|
||||||
|
v-model:max-page="quotationPageMax"
|
||||||
|
:fetch-data="fetchQuotationList"
|
||||||
|
/>
|
||||||
|
</nav>
|
||||||
|
</footer> -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FlowDialog v-model="pageState.addModal" />
|
||||||
|
</template>
|
||||||
|
|
@ -79,6 +79,11 @@ const routes: RouteRecordRaw[] = [
|
||||||
name: 'Quotation',
|
name: 'Quotation',
|
||||||
component: () => import('pages/05_quotation/MainPage.vue'),
|
component: () => import('pages/05_quotation/MainPage.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/workflow',
|
||||||
|
name: 'Workflow',
|
||||||
|
component: () => import('pages/04_flow-managment/MainPage.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/document-management',
|
path: '/document-management',
|
||||||
name: 'document-management',
|
name: 'document-management',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue