jws-frontend/src/components/04_product-service/BasicInformation.vue

123 lines
2.9 KiB
Vue

<script setup lang="ts">
import useOptionStore from 'src/stores/options';
const optionStore = useOptionStore();
const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');
const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceNameTh');
const serviceDescription = defineModel<string>('serviceDescription');
const registeredBranchId = defineModel<string | null>('registeredBranchId');
defineProps<{
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
isType?: boolean;
service?: boolean;
optionsBranch?: { id: string; name: string }[];
}>();
</script>
<template>
<div class="col-3 app-text-muted">
{{ $t(`formDialogTitleInformation`) }}
</div>
<div v-if="!service" class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-12"
:label="
$t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
"
v-model="name"
/>
<q-input
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('detail')"
v-model="detail"
/>
<q-input
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
v-model="remark"
/>
</div>
<div v-if="service" class="col-9 row q-col-gutter-md">
<q-input
id="input-service-code"
for="input-service-code"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
:label="$t('serviceCode')"
v-model="serviceCode"
/>
<q-select
id="input-source-nationality"
:dense="dense"
outlined
:readonly="readonly"
:hide-dropdown-icon="readonly"
hide-bottom-space
emit-value
map-options
options-dense
:label="$t('registeredBranch')"
class="col-3"
option-label="name"
option-value="id"
v-model="registeredBranchId"
:options="optionsBranch"
:rules="[(val) => !!val]"
/>
<q-input
id="input-service-name"
for="input-service-name"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
:label="$t('serviceName')"
v-model="serviceName"
/>
<q-input
id="input-service-description"
for="input-service-description"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
type="textarea"
class="col-12"
:label="$t('serviceDetail')"
v-model="serviceDescription"
/>
</div>
</template>
<style scoped></style>