feat: Personnel info

src/components/02_personnel-management/infoForm.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AppBox from '../app/AppBox.vue';
+import FormAddress from './FormAddress.vue';
+
+defineProps<{
+  addressTitle?: string;
+  addressTitleEN?: string;
+}>();
+
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const zipCode = defineModel<string>('zipCode', { default: '' });
+</script>
+<template>
+  <div class="row items-stretch" style="position: absolute; inset: 0">
+    <div class="col-3">
+      <slot name="person-card"></slot>
+    </div>
+    <div class="col-9" style="position: relative">
+      <AppBox
+        bordered
+        class="q-my-md q-mr-md"
+        style="position: absolute; overflow-y: auto; inset: 0"
+      >
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address">
+            <FormAddress
+              dense
+              outlined
+              separator
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
+      </AppBox>
+    </div>
+  </div>
+</template>