feat: input form

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const remark = defineModel<string>('remark');
+const detail = defineModel<string>('detail');
+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">
+    <div class="col-4 app-text-muted">
+      • {{ $t(`formDialogTitleInformation`) }}
+    </div>
+    <div class="col-8 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="
+          $t(
+            isType ? 'ProductAndServiceTypeCode' : 'ProductAndServiceGroupCode',
+          )
+        "
+        v-model="code"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="
+          $t(
+            isType ? 'ProductAndServiceTypeName' : 'ProductAndServiceGroupName',
+          )
+        "
+        v-model="name"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('detail')"
+        v-model="detail"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('formDialogInputRemark')"
+        v-model="remark"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>