refactor(form-quotation): layout

src/pages/05_quotation/QuotationFormMetadata.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
+defineProps<{
+  readonly: boolean;
+  quotationNo?: string;
+}>();
+
+const actor = defineModel<string>('actor', { required: false });
+const workName = defineModel<string>('workName', { required: true });
+const contactor = defineModel<string>('contactor', { required: true });
+const telephone = defineModel<string>('telephone', { required: true });
+const documentReceivePoint = defineModel<string>('documentReceivePoint', {
+  required: true,
+});
+const dueDate = defineModel<Date | string>('dueDate', { required: true });
+const createdAt = defineModel<Date | string>('createdAt');
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <slot name="issue-info" />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('general.createdAt')"
+      :model-value="createdAt || new Date()"
+      class="col-6 col-md-2"
+      :readonly
+      :disabled="!readonly"
+    />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('quotation.dueDate')"
+      :readonly
+      v-model="dueDate"
+      class="col-6 col-md-2"
+    />
+    <q-input
+      for="input-quotation"
+      :label="$t('general.itemNo', { msg: $t('quotation.title') })"
+      :readonly
+      :model-value="!quotationNo ? $t('general.generated') : quotationNo"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-actor"
+      :label="$t('quotation.actor')"
+      :readonly
+      v-model="actor"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-work-name"
+      :label="$t('quotation.workName')"
+      :readonly
+      v-model="workName"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-contact-name"
+      :label="$t('quotation.contactName')"
+      :readonly
+      v-model="contactor"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-telephone"
+      :label="$t('general.telephone')"
+      :readonly="readonly"
+      v-model="telephone"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-docs-receive-point"
+      :label="$t('quotation.documentReceivePoint')"
+      :readonly
+      v-model="documentReceivePoint"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+  </div>
+</template>