115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import AppBox from 'components/app/AppBox.vue';
|
||
|
|
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
|
||
|
|
|
||
|
|
const inputSearch = ref<string>('');
|
||
|
|
|
||
|
|
withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
color: 'purple' | 'green';
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
color: 'green',
|
||
|
|
},
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AppBox no-padding bordered>
|
||
|
|
<div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
|
||
|
|
<div class="row items-center">
|
||
|
|
<q-btn
|
||
|
|
round
|
||
|
|
icon="mdi-arrow-left"
|
||
|
|
flat
|
||
|
|
dense
|
||
|
|
@click="$emit('back')"
|
||
|
|
class="q-mr-md"
|
||
|
|
/>
|
||
|
|
<q-card-section
|
||
|
|
class="q-pa-sm q-pt-md bg-green q-mr-md"
|
||
|
|
style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
|
||
|
|
>
|
||
|
|
<q-avatar no-padding size="50px">
|
||
|
|
<img src="https://cdn.quasar.dev/img/avatar1.jpg" />
|
||
|
|
</q-avatar>
|
||
|
|
</q-card-section>
|
||
|
|
<div>
|
||
|
|
<div>นายสุขใจ แสนดี</div>
|
||
|
|
<div class="flex items-center">
|
||
|
|
<i
|
||
|
|
class="isax isax-frame5"
|
||
|
|
style="font-size: 1rem; color: var(--stone-6)"
|
||
|
|
/>
|
||
|
|
{{ '10' }}
|
||
|
|
<q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
|
||
|
|
{{ '2' }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row items-center">
|
||
|
|
<q-btn
|
||
|
|
id="btn-add-customer"
|
||
|
|
dense
|
||
|
|
unelevated
|
||
|
|
:label="'+ ' + $t('customerAdd')"
|
||
|
|
padding="4px 16px"
|
||
|
|
@click="console.log('add')"
|
||
|
|
style="background-color: var(--cyan-6); color: white"
|
||
|
|
/>
|
||
|
|
<q-separator vertical inset class="q-mx-lg" />
|
||
|
|
<q-input
|
||
|
|
style="width: 250px"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
label="ค้นหา"
|
||
|
|
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"
|
||
|
|
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-pa-lg q-col-gutter-xl">
|
||
|
|
<div v-for="i in 2" class="col-4">
|
||
|
|
<BranchCardCustomer></BranchCardCustomer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</AppBox>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|