150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { locale } = useI18n({ useScope: 'global' });
|
|
|
|
const remark = defineModel<string>('remark', { default: '' });
|
|
const detail = defineModel<string>('detail');
|
|
const process = defineModel<number>('process');
|
|
const name = defineModel<string>('name');
|
|
const code = defineModel<string>('code');
|
|
|
|
const codeOption = ref([]);
|
|
|
|
defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
isType?: boolean;
|
|
}>();
|
|
|
|
onMounted(async () => {
|
|
const resultOption = await fetch('/option/option.json');
|
|
const option = await resultOption.json();
|
|
|
|
if (locale.value === 'en-US') {
|
|
codeOption.value = option.eng.typeProduct;
|
|
}
|
|
if (locale.value === 'th-th') {
|
|
codeOption.value = option.tha.typeProduct;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-3 app-text-muted">
|
|
• {{ $t(`formDialogTitleInformation`) }}
|
|
</div>
|
|
|
|
<div class="col-9 row q-col-gutter-md">
|
|
<q-select
|
|
id="select-br-id"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
:hide-dropdown-icon="readonly"
|
|
emit-value
|
|
map-options
|
|
options-dense
|
|
clearable
|
|
hide-bottom-space
|
|
class="col-3"
|
|
v-model="code"
|
|
:label="$t('productCode')"
|
|
option-label="label"
|
|
option-value="value"
|
|
:options="codeOption"
|
|
:rules="[(val: string) => !!val]"
|
|
/>
|
|
|
|
<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">
|
|
<q-field
|
|
class="full-width"
|
|
:outlined="!readonly"
|
|
: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"
|
|
: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
|
|
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-mb-md"
|
|
style="padding-block: 0.5px; margin-top: 32px"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.q-editor__toolbar {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
|
|
background-color: var(--surface-2) !important;
|
|
}
|
|
|
|
:deep(.q-editor__toolbar) {
|
|
border-color: var(--surface-3) !important;
|
|
}
|
|
</style>
|