166 lines
3.8 KiB
Vue
166 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
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');
|
|
|
|
defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
isType?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-3 app-text-muted">
|
|
• {{ $t(`formDialogTitleInformation`) }}
|
|
</div>
|
|
|
|
<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"
|
|
:rules="[(val: string) => (!!val && val === 'AC') || val === 'DO']"
|
|
/>
|
|
|
|
<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"
|
|
: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 class="bordered rounded" style="padding-top: 12px">
|
|
<text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
|
|
{{ $t('detail') }}
|
|
</text>
|
|
|
|
<q-editor
|
|
dense
|
|
class="rounded surface-2"
|
|
v-model="remark"
|
|
min-height="5rem"
|
|
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-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>
|