feat: FormDialog

src/pages/02_personnel-management/MainPage.vue

@@ -9,6 +9,7 @@ import StatCardComponent from 'components/StatCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
+import FormDialog from 'src/components/FormDialog.vue';
 
 const userStore = useUserStore();
 const { data: userData } = storeToRefs(userStore);
@@ -24,12 +25,57 @@ const branchStat = ref([
 ]);
 
 const selectorLabel = ref('');
+const modal = ref(false);
+
+const hqId = ref('');
+const branchId = ref('');
+
+const genderOptions = ref([
+  { label: 'ชาย', value: '1' },
+  { label: 'หญิง', value: '2' },
+]);
+
+const hqOptions = ref([
+  { label: '0000000001', value: '1' },
+  { label: '0000000002', value: '2' },
+]);
+const branchOptions = ref([
+  { label: '0000000001-1', value: '1' },
+  { label: '0000000001-2', value: '2' },
+]);
+
+const formData = ref({
+  hqId: '',
+  branchId: '',
+  tel: '',
+  gender: '',
+  email: '',
+  addressL: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+  addressEng: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+});
+
 const selectorList = [
   { label: 'personnelSelector1', count: 0 },
   { label: 'personnelSelector2', count: 0 },
   { label: 'personnelSelector3', count: 0 },
   { label: 'personnelSelector4', count: 0 },
 ] satisfies InstanceType<typeof SelectorList>['$props']['list'];
+
+function openDialog() {
+  modal.value = true;
+}
 </script>
 
 <template>
@@ -48,9 +94,19 @@ const selectorList = [
 
       <!-- stat -->
       <AppBox bordered class="column full-width">
-        <span class="q-pb-lg text-weight-bold text-subtitle1">
-          {{ $t('personnelStatTitle') + $t(selectorLabel) }}
-        </span>
+        <div class="row q-pb-lg justify-between items-center">
+          <div class="text-weight-bold text-subtitle1">
+            {{ $t('personnelStatTitle') + $t(selectorLabel) }}
+          </div>
+          <q-btn
+            dense
+            unelevated
+            label="+ เพิ่มบุคลากร"
+            padding="4px 16px"
+            @click="openDialog"
+            style="background-color: var(--cyan-6); color: white"
+          />
+        </div>
         <div class="row col full-width" style="overflow-x: auto">
           <StatCardComponent :branch="branchStat" class="no-wrap" />
         </div>
@@ -93,10 +149,98 @@ const selectorList = [
           <BtnAddComponent
             :label="'personnelAdd'"
             :cyanOn="true"
-            @trigger="() => console.log('test')"
+            @trigger="openDialog"
           />
         </div>
       </div>
     </AppBox>
   </div>
+
+  <FormDialog
+    v-model:modal="modal"
+    v-model:addressL="formData.addressL"
+    v-model:addressEng="formData.addressEng"
+    title="เพิ่มบุคลากร"
+    addressLocaleTitle="ที่อยู่พนักงาน"
+    addressEngTitle="ที่อยู่พนักงาน ENG"
+  >
+    <template #top>
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="hqId"
+        class="col-6"
+        option-value="value"
+        option-label="label"
+        label="รหัสสำนักงานใหญ่"
+        :options="hqOptions"
+        bg-color="white"
+      />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="branchId"
+        class="col-6"
+        option-value="value"
+        option-label="label"
+        label="รหัสสาขา"
+        :options="branchOptions"
+        bg-color="white"
+      />
+    </template>
+
+    <template #prepend>
+      <div>asd</div>
+    </template>
+
+    <template #midTop>
+      <!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
+      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
+    </template>
+
+    <template #midBottom>
+      <q-input
+        dense
+        outlined
+        label="เบอร์โทร"
+        class="col-3"
+        v-model="formData.tel"
+      />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        v-model="formData.gender"
+        class="col-3"
+        option-value="value"
+        option-label="label"
+        label="เพศ"
+        :options="genderOptions"
+        bg-color="white"
+      />
+      <q-input
+        dense
+        outlined
+        label="อีเมล"
+        class="col-6"
+        v-model="formData.email"
+      />
+    </template>
+
+    <!-- <template #append>
+      <div style="background-color: blue">asd</div>
+    </template> -->
+  </FormDialog>
 </template>
+<style>
+.bg-white {
+  background-color: var(--surface-1) !important;
+}
+</style>