fix: service & product card image
This commit is contained in:
puriphatt
parent
b07d1b9085
commit
2d0def98a3
3 changed files with 185 additions and 176 deletions
|
|
@ -39,205 +39,208 @@ withDefaults(
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AppBox
|
<div
|
||||||
no-padding
|
|
||||||
bordered
|
bordered
|
||||||
:class="{ 'is-add-product': isAddProduct }"
|
:class="{ 'is-add-product': isAddProduct }"
|
||||||
style="box-shadow: var(--shadow-3); min-height: 300px"
|
class="column bordered rounded q-pa-sm no-wrap"
|
||||||
|
style="box-shadow: var(--shadow-3); height: 20rem"
|
||||||
@click="$emit('select', data)"
|
@click="$emit('select', data)"
|
||||||
>
|
>
|
||||||
<div class="q-pa-sm">
|
<div class="row flex justify-between text-bold">
|
||||||
<div class="row flex justify-between text-bold">
|
<div class="col-9" :class="{ inactive: isDisabled }">
|
||||||
<div class="col-9" :class="{ inactive: isDisabled }">
|
{{ title ?? 'title' }}
|
||||||
{{ title ?? 'title' }}
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
v-if="isSelected === false"
|
||||||
v-if="isSelected === false"
|
class="col-3 relative-position"
|
||||||
class="col-3 relative-position"
|
style="left: 10px; bottom: 10px"
|
||||||
style="left: 10px; bottom: 10px"
|
>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
padding="sm"
|
||||||
|
class="absolute-top-right dots-btn"
|
||||||
|
icon="mdi-dots-vertical"
|
||||||
|
size="sm"
|
||||||
|
@click.stop=""
|
||||||
>
|
>
|
||||||
<q-btn
|
<q-menu class="bordered">
|
||||||
flat
|
<q-list v-close-popup>
|
||||||
round
|
<q-item
|
||||||
padding="sm"
|
clickable
|
||||||
class="absolute-top-right dots-btn"
|
dense
|
||||||
icon="mdi-dots-vertical"
|
class="row q-py-sm"
|
||||||
size="sm"
|
style="white-space: nowrap"
|
||||||
@click.stop=""
|
@click="$emit('menuViewDetail')"
|
||||||
>
|
>
|
||||||
<q-menu class="bordered">
|
<q-icon
|
||||||
<q-list v-close-popup>
|
name="mdi-eye-outline"
|
||||||
<q-item
|
class="col-3"
|
||||||
clickable
|
size="xs"
|
||||||
dense
|
style="color: hsl(var(--green-6-hsl))"
|
||||||
class="row q-py-sm"
|
/>
|
||||||
style="white-space: nowrap"
|
<span class="col-9 q-px-md flex items-center">
|
||||||
@click="$emit('menuViewDetail')"
|
{{ $t('viewDetail') }}
|
||||||
>
|
</span>
|
||||||
<q-icon
|
</q-item>
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
<q-item
|
||||||
v-if="!isDisabled"
|
v-if="!isDisabled"
|
||||||
dense
|
dense
|
||||||
clickable
|
clickable
|
||||||
class="row q-py-sm"
|
class="row q-py-sm"
|
||||||
style="white-space: nowrap"
|
style="white-space: nowrap"
|
||||||
@click="$emit('menuEdit')"
|
@click="$emit('menuEdit')"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
>
|
>
|
||||||
<q-icon
|
<q-icon
|
||||||
name="mdi-pencil-outline"
|
name="mdi-pencil-outline"
|
||||||
class="col-3"
|
class="col-3"
|
||||||
size="xs"
|
size="xs"
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
style="color: hsl(var(--cyan-6-hsl))"
|
||||||
/>
|
/>
|
||||||
<span class="col-9 q-px-md flex items-center">
|
<span class="col-9 q-px-md flex items-center">
|
||||||
{{ $t('edit') }}
|
{{ $t('edit') }}
|
||||||
</span>
|
</span>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
||||||
<q-item dense>
|
<q-item dense>
|
||||||
<q-item-section class="q-py-sm">
|
<q-item-section class="q-py-sm">
|
||||||
<div class="q-pa-sm surface-2 rounded">
|
<div class="q-pa-sm surface-2 rounded">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
dense
|
dense
|
||||||
size="sm"
|
size="sm"
|
||||||
@click="$emit('toggleStatus', data?.id)"
|
@click="$emit('toggleStatus', data?.id)"
|
||||||
:model-value="!isDisabled"
|
:model-value="!isDisabled"
|
||||||
val="xs"
|
val="xs"
|
||||||
padding="none"
|
padding="none"
|
||||||
>
|
>
|
||||||
<div class="q-ml-xs">
|
<div class="q-ml-xs">
|
||||||
{{
|
{{
|
||||||
!isDisabled
|
!isDisabled
|
||||||
? $t('switchOnLabel')
|
? $t('switchOnLabel')
|
||||||
: $t('switchOffLabel')
|
: $t('switchOffLabel')
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
</q-toggle>
|
</q-toggle>
|
||||||
</div>
|
</div>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-avatar
|
|
||||||
v-if="isAddProduct"
|
|
||||||
:style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
|
|
||||||
size="18px"
|
|
||||||
text-color="white"
|
|
||||||
>
|
|
||||||
{{ (index ?? 0) + 1 }}
|
|
||||||
</q-avatar>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="{ inactive: isDisabled }">
|
<q-avatar
|
||||||
<div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
|
v-if="isAddProduct"
|
||||||
<div class="flex justify-start text-bold">
|
:style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
|
||||||
<div
|
size="18px"
|
||||||
v-if="data?.type === 'service'"
|
text-color="white"
|
||||||
class="bordered q-pa-xs row surface-0"
|
>
|
||||||
style="font-size: 12px; border-radius: 5px; width: 80px"
|
{{ (index ?? 0) + 1 }}
|
||||||
>
|
</q-avatar>
|
||||||
<div class="col ellipsis-2-lines">งาน</div>
|
</div>
|
||||||
<q-space />
|
|
||||||
<div class="col text-center">{{ data?.work.length }}</div>
|
<div :class="{ inactive: isDisabled }" class="column col">
|
||||||
</div>
|
<div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
|
||||||
|
<div class="flex justify-start text-bold">
|
||||||
|
<div
|
||||||
|
v-if="data?.type === 'service'"
|
||||||
|
class="bordered q-pa-xs row surface-0"
|
||||||
|
style="font-size: 12px; border-radius: 5px; width: 80px"
|
||||||
|
>
|
||||||
|
<div class="col ellipsis-2-lines">งาน</div>
|
||||||
|
<q-space />
|
||||||
|
<div class="col text-center">{{ data?.work.length }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="data?.type === 'product'" class="flex">
|
<div v-if="data?.type === 'product'" class="flex">
|
||||||
<div
|
<div
|
||||||
class="row full-width text-right"
|
class="row full-width text-right"
|
||||||
style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
|
style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
|
||||||
>
|
>
|
||||||
<div class="col-4">ราคาขาย</div>
|
<div class="col-4">ราคาขาย</div>
|
||||||
<div class="col-4">ราคาตัวแทน</div>
|
<div class="col-4">ราคาตัวแทน</div>
|
||||||
<div class="col-4">ราคาค่าดำเนินการ</div>
|
<div class="col-4">ราคาค่าดำเนินการ</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="row full-width text-right items-center"
|
|
||||||
style="margin-top: -5px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="col-4 text-weight-bold"
|
|
||||||
style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
|
|
||||||
>
|
|
||||||
฿{{ formatNumberDecimal(data?.price, 2) }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="col-4 text-weight-bold"
|
|
||||||
style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
|
|
||||||
>
|
|
||||||
฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="col-4"
|
|
||||||
style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
|
|
||||||
>
|
|
||||||
฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex justify-center rounded items-center q-my-md q-py-lg"
|
class="row full-width text-right items-center"
|
||||||
:class="[
|
style="margin-top: -5px"
|
||||||
data?.type === 'product' ? 'card__green' : 'card__orange',
|
|
||||||
$q.dark.isActive ? 'dark' : '',
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<q-img
|
<div
|
||||||
loading="lazy"
|
class="col-4 text-weight-bold"
|
||||||
:src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
|
style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
|
||||||
style="height: 86px; max-width: 100px"
|
|
||||||
>
|
>
|
||||||
<template #error>
|
฿{{ formatNumberDecimal(data?.price, 2) }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-4 text-weight-bold"
|
||||||
|
style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
|
||||||
|
>
|
||||||
|
฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-4"
|
||||||
|
style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
|
||||||
|
>
|
||||||
|
฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="col rounded q-my-md items-center justify-center flex"
|
||||||
|
:class="[
|
||||||
|
data?.type === 'product' ? 'card__green' : 'card__orange',
|
||||||
|
$q.dark.isActive ? 'dark' : '',
|
||||||
|
]"
|
||||||
|
style="overflow: hidden"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
loading="lazy"
|
||||||
|
:src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
|
||||||
|
>
|
||||||
|
<template #error>
|
||||||
|
<div
|
||||||
|
class="full-width items-center justify-center flex"
|
||||||
|
style="background-color: transparent"
|
||||||
|
>
|
||||||
<q-img
|
<q-img
|
||||||
style="background: none; height: 86px; max-width: 100px"
|
|
||||||
:src="
|
:src="
|
||||||
data?.type === 'product'
|
data?.type === 'product'
|
||||||
? '/shop-image.png'
|
? '/shop-image.png'
|
||||||
: '/service-image.png'
|
: '/service-image.png'
|
||||||
"
|
"
|
||||||
width="100%"
|
width="5rem"
|
||||||
/>
|
/>
|
||||||
</template>
|
</div>
|
||||||
</q-img>
|
</template>
|
||||||
</div>
|
</q-img>
|
||||||
<div class="row justify-between items-center q-mb-xs">
|
</div>
|
||||||
<div class="q-pr-md" v-if="data?.type === 'service'">
|
|
||||||
<q-icon
|
|
||||||
name="mdi-calendar-month"
|
|
||||||
class="surface-0 rounded q-pa-xs app-text-muted"
|
|
||||||
size="20px"
|
|
||||||
/>
|
|
||||||
{{ dateFormat(data?.createdAt) }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="q-pr-md" v-if="data?.type === 'product'">
|
<div class="row justify-between items-center q-mb-xs">
|
||||||
<q-icon
|
<div class="q-pr-md" v-if="data?.type === 'service'">
|
||||||
name="mdi-clock-outline"
|
<q-icon
|
||||||
class="surface-0 rounded q-pa-xs app-text-muted"
|
name="mdi-calendar-month"
|
||||||
size="20px"
|
class="surface-0 rounded q-pa-xs app-text-muted"
|
||||||
/>
|
size="20px"
|
||||||
{{ data?.process }} วัน
|
/>
|
||||||
</div>
|
{{ dateFormat(data?.createdAt) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="q-pr-md" v-if="data?.type === 'product'">
|
||||||
|
<q-icon
|
||||||
|
name="mdi-clock-outline"
|
||||||
|
class="surface-0 rounded q-pa-xs app-text-muted"
|
||||||
|
size="20px"
|
||||||
|
/>
|
||||||
|
{{ data?.process }} วัน
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AppBox>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ withDefaults(
|
||||||
isService?: boolean;
|
isService?: boolean;
|
||||||
labelStatusToggle?: string;
|
labelStatusToggle?: string;
|
||||||
hideToggle?: boolean;
|
hideToggle?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
hideToggle: true,
|
hideToggle: true,
|
||||||
|
|
@ -48,7 +49,7 @@ defineEmits<{
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="urlProfile && !profileSubmit"
|
v-if="urlProfile && !profileSubmit && !readonly"
|
||||||
class="col-12 row q-mt-md q-col-gutter-x-md"
|
class="col-12 row q-mt-md q-col-gutter-x-md"
|
||||||
>
|
>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
@ -78,7 +79,7 @@ defineEmits<{
|
||||||
</div>
|
</div>
|
||||||
<q-btn
|
<q-btn
|
||||||
id="btn-profile-edit"
|
id="btn-profile-edit"
|
||||||
v-else-if="urlProfile && profileSubmit"
|
v-else-if="urlProfile && profileSubmit && !readonly"
|
||||||
dense
|
dense
|
||||||
unelevated
|
unelevated
|
||||||
outlined
|
outlined
|
||||||
|
|
@ -91,7 +92,7 @@ defineEmits<{
|
||||||
|
|
||||||
<q-btn
|
<q-btn
|
||||||
id="btn-profile-upload"
|
id="btn-profile-upload"
|
||||||
v-else
|
v-if="!urlProfile && !readonly"
|
||||||
dense
|
dense
|
||||||
unelevated
|
unelevated
|
||||||
outlined
|
outlined
|
||||||
|
|
|
||||||
|
|
@ -634,6 +634,9 @@ async function assignFormDataProductService(id: string) {
|
||||||
|
|
||||||
if (res) {
|
if (res) {
|
||||||
statusToggle.value = res.status === 'INACTIVE' ? false : true;
|
statusToggle.value = res.status === 'INACTIVE' ? false : true;
|
||||||
|
profileUrl.value = res.imageUrl;
|
||||||
|
profileSubmit.value = true;
|
||||||
|
|
||||||
currentService.value = JSON.parse(JSON.stringify(res));
|
currentService.value = JSON.parse(JSON.stringify(res));
|
||||||
|
|
||||||
prevService.value = {
|
prevService.value = {
|
||||||
|
|
@ -732,7 +735,7 @@ function clearFormProduct() {
|
||||||
code: '',
|
code: '',
|
||||||
image: undefined,
|
image: undefined,
|
||||||
};
|
};
|
||||||
|
imageProduct.value = undefined;
|
||||||
dialogProduct.value = false;
|
dialogProduct.value = false;
|
||||||
dialogProductEdit.value = false;
|
dialogProductEdit.value = false;
|
||||||
profileUrl.value = '';
|
profileUrl.value = '';
|
||||||
|
|
@ -758,6 +761,7 @@ function clearFormService() {
|
||||||
dialogServiceEdit.value = false;
|
dialogServiceEdit.value = false;
|
||||||
profileUrl.value = '';
|
profileUrl.value = '';
|
||||||
profileSubmit.value = false;
|
profileSubmit.value = false;
|
||||||
|
imageProduct.value = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
function assignFormDataProductServiceCreate() {
|
function assignFormDataProductServiceCreate() {
|
||||||
|
|
@ -2172,6 +2176,7 @@ watch(inputSearchProductAndService, async () => {
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<ProfileUpload
|
<ProfileUpload
|
||||||
isService
|
isService
|
||||||
|
:readonly="!infoServiceEdit"
|
||||||
v-model:url-profile="profileUrl"
|
v-model:url-profile="profileUrl"
|
||||||
v-model:status-toggle="statusToggle"
|
v-model:status-toggle="statusToggle"
|
||||||
v-model:profile-submit="profileSubmit"
|
v-model:profile-submit="profileSubmit"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue