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

<script lang="ts" setup>
import AppBox from '../app/AppBox.vue';
import FormAddress from './FormAddress.vue';

defineProps<{
  readonly?: boolean;
  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
              :readonly="readonly"
              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>