refactor: product create
This commit is contained in:
puriphatt
parent
676c2c5ebf
commit
5e4cfb747d
8 changed files with 325 additions and 217 deletions
|
|
@ -23,7 +23,6 @@ defineProps<{
|
|||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
isType?: boolean;
|
||||
}>();
|
||||
|
||||
|
|
@ -51,162 +50,176 @@ const branchFilter = selectFilterOptionRefMod(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleInformation`) }}
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`formDialogTitleInformation`) }}
|
||||
</div>
|
||||
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
class="col-3"
|
||||
v-model="code"
|
||||
id="select-br-id"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="codeOptions"
|
||||
:label="$t('productCode')"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:rules="[(val: string) => !!val]"
|
||||
@filter="codeFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
class="col-3"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules="ondemand"
|
||||
id="input-source-nationality"
|
||||
v-model="registeredBranchId"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="branchOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:label="$t('registeredBranch')"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
|
||||
(role) => roles.includes(role),
|
||||
);
|
||||
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
|
||||
},
|
||||
]"
|
||||
@filter="branchFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
class="col-3"
|
||||
v-model="code"
|
||||
id="select-br-id"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="codeOptions"
|
||||
:label="$t('productCode')"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:rules="[(val: string) => !!val]"
|
||||
@filter="codeFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
class="col-3"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
lazy-rules="ondemand"
|
||||
id="input-source-nationality"
|
||||
v-model="registeredBranchId"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="branchOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:label="$t('registeredBranch')"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
|
||||
(role) => roles.includes(role),
|
||||
);
|
||||
return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
|
||||
},
|
||||
]"
|
||||
@filter="branchFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-name"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('productName')"
|
||||
v-model="name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-detail"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12"
|
||||
:label="$t('serviceDetail')"
|
||||
v-model="detail"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<q-field
|
||||
class="full-width"
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-name"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
dense
|
||||
>
|
||||
<q-editor
|
||||
dense
|
||||
v-model="remark"
|
||||
min-height="5rem"
|
||||
class="full-width q-mt-sm q-mb-xs"
|
||||
:flat="!readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('productName')"
|
||||
v-model="name"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-process"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('productProcessingTime')"
|
||||
v-model="process"
|
||||
type="number"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-detail"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12"
|
||||
:label="$t('serviceDetail')"
|
||||
v-model="detail"
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<q-field
|
||||
class="full-width"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
: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);
|
||||
"
|
||||
/>
|
||||
</q-field>
|
||||
:borderless="readonly"
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
dense
|
||||
>
|
||||
<q-editor
|
||||
dense
|
||||
v-model="remark"
|
||||
min-height="5rem"
|
||||
class="full-width q-mt-sm q-mb-xs"
|
||||
:flat="!readonly"
|
||||
:readonly="readonly"
|
||||
: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);
|
||||
"
|
||||
/>
|
||||
</q-field>
|
||||
</div>
|
||||
<!-- <q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-detail"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12"
|
||||
:label="$t('formDialogInputRemark')"
|
||||
v-model="detail"
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
for="input-process"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('productProcessingTime')"
|
||||
v-model="process"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -13,46 +13,58 @@ defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('salePrice')"
|
||||
v-model="price"
|
||||
/>
|
||||
<div class="row col-12">
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-cash"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t('priceInformation') }}
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('salePrice')"
|
||||
v-model="price"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('agentPrice')"
|
||||
v-model="agentPrice"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('agentPrice')"
|
||||
v-model="agentPrice"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('processingPrice')"
|
||||
v-model="serviceCharge"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
type="number"
|
||||
:label="$t('processingPrice')"
|
||||
v-model="serviceCharge"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import ToggleButton from './button/ToggleButton.vue';
|
||||
|
||||
defineProps<{
|
||||
icon?: string;
|
||||
|
|
@ -12,6 +13,8 @@ defineProps<{
|
|||
toggleTitle?: string;
|
||||
|
||||
hideFade?: boolean;
|
||||
hideActive?: boolean;
|
||||
noImageAction?: boolean;
|
||||
active?: boolean;
|
||||
readonly?: boolean;
|
||||
useToggle?: boolean;
|
||||
|
|
@ -73,11 +76,12 @@ const showOverlay = ref(false);
|
|||
<q-avatar
|
||||
size="6rem"
|
||||
font-size="3rem"
|
||||
class="cursor-pointer relative-position"
|
||||
class="relative-position"
|
||||
style="z-index: 1"
|
||||
:style="{
|
||||
background: `${bgColor || 'var(--brand-1)'}`,
|
||||
color: `${color || 'white'}`,
|
||||
cursor: `${noImageAction ? 'default' : 'pointer'}`,
|
||||
}"
|
||||
@mouseover="showOverlay = true"
|
||||
@mouseleave="showOverlay = false"
|
||||
|
|
@ -98,6 +102,7 @@ const showOverlay = ref(false);
|
|||
</q-img>
|
||||
<q-icon id="profile-view" v-else :name="icon || 'mdi-account'" />
|
||||
<q-badge
|
||||
v-if="!hideActive"
|
||||
class="absolute-bottom-right"
|
||||
style="
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue