From 1f84d952236c89e96707051395d85c857e119254 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 23 Apr 2024 13:40:03 +0700
Subject: [PATCH] feat:  FormBusiness components

---
 .../03_customer-management/FormBusiness.vue   | 197 ++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 src/components/03_customer-management/FormBusiness.vue

diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
new file mode 100644
index 00000000..1857b3aa
--- /dev/null
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+const businessAddress = defineModel<string>('email');
+const typeBusiness = defineModel<string>('typeBusiness');
+const JobPosition = defineModel<string>('JobPosition');
+
+const typeBusinessEN = defineModel<string>('typeBusinessEN');
+const JobPositionEN = defineModel<string>('JobPositionEN');
+
+const jobDescription = defineModel<string>('jobDescription');
+
+const payDay = defineModel<string>('payDay');
+const payRate = defineModel<string>('payRate');
+
+const salesPerson = defineModel<string>('salesPerson');
+
+const typeBusinessOptions = [
+  {
+    value: '1',
+    label: 'ประเภทบริษัท 1',
+  },
+  {
+    value: '2',
+    label: 'ประเภทบริษัท 2',
+  },
+  {
+    value: '3',
+    label: 'ประเภทบริษัท 3',
+  },
+];
+
+const JobPositionOptions = [
+  {
+    value: '1',
+    label: 'ตําแหน่งงาน 1',
+  },
+  {
+    value: '2',
+    label: 'ตําแหน่งงาน 2',
+  },
+  {
+    value: '3',
+    label: 'ตําแหน่งงาน 3',
+  },
+];
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-12 app-text-muted"></div>
+  <div class="col-12 row q-col-gutter-y-md">
+    <div class="col-3 q-pl-xl app-text-muted">
+      {{ $t('businessInformation') }}
+    </div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-12"
+        :label="$t('inputCustomerAddress')"
+        v-model="businessAddress"
+      />
+
+      <q-select
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        v-model="typeBusiness"
+        :options="typeBusinessOptions"
+        :label="$t('businessType')"
+        class="col-6"
+      />
+
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('businessTypeEN')"
+        v-model="typeBusinessEN"
+      />
+
+      <q-select
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        v-model="JobPosition"
+        :options="JobPositionOptions"
+        :label="$t('jobPosition')"
+        class="col-6"
+      />
+
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('jobPositionEN')"
+        v-model="JobPositionEN"
+      />
+
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('jobDescription')"
+        v-model="jobDescription"
+      />
+
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('payDay')"
+        v-model="payDay"
+      >
+        <template v-slot:prepend>
+          <q-icon
+            name="mdi-calendar-blank-outline"
+            color="primary"
+            class="cursor-pointer"
+            size="16px"
+          >
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date v-model="payDay" mask="YYYY-MM-DD HH:mm">
+                <div class="row items-center justify-end">
+                  <q-btn v-close-popup label="Close" color="primary" flat />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+
+      <!-- <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('payDay')"
+        v-model="payDay"
+      /> -->
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('payRate')"
+        v-model="payRate"
+      />
+
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('salesPerson')"
+        v-model="salesPerson"
+      />
+    </div>
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>