feat: product and service main page UI
This commit is contained in:
oat_dev
parent
7bac214529
commit
eb643fe06f
2 changed files with 176 additions and 0 deletions
73
src/components/04_product-service/ProductCardComponent.vue
Normal file
73
src/components/04_product-service/ProductCardComponent.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
|
import AllAroundBtn from '../AllAroundBtn.vue';
|
||||||
|
import { dateFormat } from 'src/utils/datetime';
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
color?: string;
|
||||||
|
status?: boolean;
|
||||||
|
date?: Date;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
color: 'var(--brand-2)',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="full-width rounded" :style="`border:1px solid ${color}`">
|
||||||
|
<div class="q-pa-md row justify-between items-center">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
icon="mdi-folder"
|
||||||
|
size="12px"
|
||||||
|
flat
|
||||||
|
:style="`color:${color};background-color:var(--surface-0)`"
|
||||||
|
/>
|
||||||
|
<AllAroundBtn :label="'viewDetail'" :color="color" />
|
||||||
|
</div>
|
||||||
|
<div class="q-px-md">
|
||||||
|
<div class="text-subtitle1 text-bold">{{ title }}</div>
|
||||||
|
<div class="text-subtitle3">{{ subtitle }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="q-pa-md q-mt-lg sub-card">
|
||||||
|
<div>
|
||||||
|
<div class="row justify-between q-mb-sm">
|
||||||
|
<div class="app-text-muted">{{ $t('status') }}</div>
|
||||||
|
|
||||||
|
<q-badge
|
||||||
|
v-if="status"
|
||||||
|
class="q-px-md q-py-xs rounded"
|
||||||
|
style="background-color: var(--teal-0); color: var(--teal-6)"
|
||||||
|
>
|
||||||
|
{{ $t('statusACTIVE') }}
|
||||||
|
</q-badge>
|
||||||
|
<q-badge
|
||||||
|
v-else
|
||||||
|
text-color="orange"
|
||||||
|
class="q-px-md q-py-xs rounded"
|
||||||
|
style="background-color: var(--red-1); color: var(--orange-4)"
|
||||||
|
>
|
||||||
|
{{ $t('statusINACTIVE') }}
|
||||||
|
</q-badge>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-between">
|
||||||
|
<div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
|
||||||
|
<div>{{ dateFormat(date) }}</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sub-card {
|
||||||
|
background-color: var(--surface-0);
|
||||||
|
border-radius: 0 0 var(--radius-2) var(--radius-2);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
103
src/pages/04_product-service/MainPage.vue
Normal file
103
src/pages/04_product-service/MainPage.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
|
import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue';
|
||||||
|
import StatCard from 'components/StatCardComponent.vue';
|
||||||
|
|
||||||
|
const cardData = ref({
|
||||||
|
title: 'งาน MCU',
|
||||||
|
subtitle: 'G00000000001',
|
||||||
|
color: 'var(--brand-2)',
|
||||||
|
status: true,
|
||||||
|
date: new Date(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const stat = ref<
|
||||||
|
{
|
||||||
|
count: number;
|
||||||
|
label: string;
|
||||||
|
color: 'pink' | 'purple' | 'green';
|
||||||
|
}[]
|
||||||
|
>([
|
||||||
|
{ count: 5, label: 'branchHQLabel', color: 'pink' },
|
||||||
|
{ count: 4, label: 'branchLabel', color: 'purple' },
|
||||||
|
{ count: 12, label: 'branchLabel', color: 'green' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const inputSearch = ref<string>('');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="column q-pb-lg">
|
||||||
|
<div class="text-h6 text-weight-bold q-mb-md">กลุ่มสินค้าและบริการ</div>
|
||||||
|
<AppBox bordered class="q-mb-md">
|
||||||
|
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
|
||||||
|
</AppBox>
|
||||||
|
<AppBox bordered style="min-height: 80vh">
|
||||||
|
<div class="row justify-between">
|
||||||
|
<div class="text-h6 text-weight-bold q-mb-md">
|
||||||
|
กลุ่มสินค้าและบริการทั้งหมด
|
||||||
|
</div>
|
||||||
|
<div class="row q-px-md q-pb-md">
|
||||||
|
<q-input
|
||||||
|
style="width: 250px"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:label="$t('search')"
|
||||||
|
class="q-mr-lg"
|
||||||
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||||
|
v-model="inputSearch"
|
||||||
|
debounce="500"
|
||||||
|
></q-input>
|
||||||
|
<q-btn
|
||||||
|
icon="mdi-tune-vertical-variant"
|
||||||
|
size="sm"
|
||||||
|
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||||
|
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||||
|
class="bordered rounded"
|
||||||
|
unelevated
|
||||||
|
>
|
||||||
|
<q-menu class="bordered">
|
||||||
|
<q-list v-close-popup dense>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
class="flex items-center"
|
||||||
|
@click="console.log('test')"
|
||||||
|
>
|
||||||
|
{{ $t('all') }}
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
class="flex items-center"
|
||||||
|
@click="console.log('test')"
|
||||||
|
>
|
||||||
|
{{ $t('statusACTIVE') }}
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
class="flex items-center"
|
||||||
|
@click="console.log('test')"
|
||||||
|
>
|
||||||
|
{{ $t('statusINACTIVE') }}
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-col-gutter-lg">
|
||||||
|
<div class="col-3" v-for="i in 6" :key="i">
|
||||||
|
<ProductCardComponent
|
||||||
|
:title="cardData.title"
|
||||||
|
:subtitle="cardData.subtitle"
|
||||||
|
:date="cardData.date"
|
||||||
|
:status="cardData.status"
|
||||||
|
:color="cardData.color"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue