fix: product q-field
This commit is contained in:
puriphatt
parent
e40f62e422
commit
14c181ada5
1 changed files with 109 additions and 98 deletions
|
|
@ -15,95 +15,102 @@ defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-10">
|
||||
<div class="col-4 app-text-muted">
|
||||
• {{ $t(`formDialogTitleInformation`) }}
|
||||
</div>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleInformation`) }}
|
||||
</div>
|
||||
|
||||
<div class="col-8 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-code"
|
||||
:outlined="!readonly"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('productCode')"
|
||||
v-model="code"
|
||||
/>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
for="input-code"
|
||||
:outlined="!readonly"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
:label="$t('productCode')"
|
||||
v-model="code"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
for="input-name"
|
||||
:dense="dense"
|
||||
<q-input
|
||||
for="input-name"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('productName')"
|
||||
v-model="name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
for="input-detail"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12"
|
||||
:label="$t('serviceDetail')"
|
||||
v-model="detail"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<!-- <div class="col-12" v-if="readonly">
|
||||
<q-field
|
||||
class="rounded"
|
||||
:class="{ 'surface-2': remark !== undefined }"
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
dense
|
||||
readonly
|
||||
borderless
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('detail') }}
|
||||
</template>
|
||||
|
||||
<template #control>
|
||||
<div class="full-width q-pa-xs rounded">
|
||||
<q-card-section
|
||||
v-if="!!remark"
|
||||
class="rounded"
|
||||
v-html="remark"
|
||||
style="color: black; padding: 5px 0px 0px 0px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12">
|
||||
<q-field
|
||||
class="full-width"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-9"
|
||||
:label="$t('productName')"
|
||||
v-model="name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
for="input-detail"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12"
|
||||
:label="$t('serviceDetail')"
|
||||
v-model="detail"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<div class="col-12" v-if="readonly">
|
||||
<q-field
|
||||
class="rounded"
|
||||
:class="{ 'surface-2': remark !== undefined }"
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
dense
|
||||
>
|
||||
<q-editor
|
||||
dense
|
||||
readonly
|
||||
borderless
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('detail') }}
|
||||
</template>
|
||||
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: black"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<template #control>
|
||||
<div class="full-width q-pa-xs rounded">
|
||||
<q-card-section
|
||||
v-if="!!remark"
|
||||
class="rounded"
|
||||
v-html="remark"
|
||||
style="color: black; padding: 5px 0px 0px 0px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-field
|
||||
class="full-width q-pb-md"
|
||||
:label="$t('detail')"
|
||||
stack-label
|
||||
outlined
|
||||
dense
|
||||
>
|
||||
<q-editor
|
||||
dense
|
||||
class="rounded full-width"
|
||||
v-model="remark"
|
||||
min-height="5rem"
|
||||
style="border: none; cursor: auto; color: black; height: 80%"
|
||||
/>
|
||||
</q-field>
|
||||
|
||||
<!-- <div class="bordered rounded" style="padding-top: 12px">
|
||||
<!-- <div class="bordered rounded" style="padding-top: 12px">
|
||||
<text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
|
||||
{{ $t('detail') }}
|
||||
</text>
|
||||
|
|
@ -116,26 +123,26 @@ defineProps<{
|
|||
style="border: none"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
for="input-process"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('processingTime')"
|
||||
v-model="process"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
for="input-process"
|
||||
:dense="dense"
|
||||
:outlined="!readonly"
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-4"
|
||||
:label="$t('processingTime')"
|
||||
v-model="process"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
@ -143,4 +150,8 @@ defineProps<{
|
|||
.q-editor__toolbar {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
|
||||
background-color: var(--surface-3) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue