jws-frontend/src/components/04_product-service/ฺBasicInfoProduct.vue

<script setup lang="ts">
const remark = defineModel<string>('remark');
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="row col-10">
    <div class="col-4 app-text-muted">
      • {{ $t(`formDialogTitleInformation`) }}
    </div>
    <div class="col-8 row q-col-gutter-md">
      <q-input
        for="input-code"
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('productCode')"
        v-model="code"
      />

      <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"
      />

      <q-input
        for="input-remark"
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('detail')"
        v-model="remark"
      />

      <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>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped></style>