หมายเหตุแนวนอน/ตั้ง

src/modules/03_recruiting/components/Career.vue

@@ -48,6 +48,13 @@
           </q-td>
         </q-tr>
       </template>
+      <template #bottom="props">
+        <div :props="props" class="row col-11 justify-end">
+          <span class="text-weight-medium text-subtitle2"
+            >รวมระยะเวลา : <span class="q-pl-sm">{{ total }}</span></span
+          >
+        </div>
+      </template>
     </Table>
   </q-form>
   <!-- popup Edit window-->
@@ -317,6 +324,7 @@ const editRow = ref<boolean>(false); //เช็คมีการแก้ไ
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
+const total = ref<string>("-");
 const rows = ref<any>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;
@@ -480,12 +488,56 @@ const calDate = async () => {
   }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
 };
 
+const calDateSplit = async (startDate: Date, endDate: Date) => {
+  let _startDate = new Date(startDate.toISOString().substr(0, 10));
+  let _endDate = new Date(endDate.toISOString().substr(0, 10));
+  _endDate.setDate(_endDate.getDate() + 1);
+  if (_startDate > _endDate) {
+    const swap = _startDate;
+    _startDate = _endDate;
+    _endDate = swap;
+  }
+  const startYear = _startDate.getFullYear();
+  const february =
+    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+      ? 29
+      : 28;
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  let yearDiff = _endDate.getFullYear() - startYear;
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+  if (monthDiff < 0) {
+    yearDiff--;
+    monthDiff += 12;
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate();
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--;
+    } else {
+      yearDiff--;
+      monthDiff = 11;
+    }
+    dayDiff += daysInMonth[_startDate.getMonth()];
+  }
+  var obj = {
+    yearDiff: yearDiff,
+    monthDiff: monthDiff,
+    dayDiff: dayDiff,
+  };
+  return obj;
+};
+
 const fetchData = async () => {
   showLoader();
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
       const data = res.data.result;
+      var yearDiff = 0;
+      var monthDiff = 0;
+      var dayDiff = 0;
+      total.value = "-";
       rows.value = [];
       data.map((r: any) => {
         rows.value.push({
@@ -493,6 +545,24 @@ const fetchData = async () => {
           startDate: new Date(r.durationStart),
           endDate: new Date(r.durationEnd),
         });
+        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
+          (d) => {
+            yearDiff = yearDiff + d.yearDiff;
+            monthDiff = monthDiff + d.monthDiff;
+            dayDiff = dayDiff + d.dayDiff;
+            if (dayDiff > 30) {
+              dayDiff = dayDiff % 30;
+              monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
+            }
+            if (monthDiff > 12) {
+              monthDiff = monthDiff % 12;
+              yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
+            }
+            total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
+              monthDiff > 0 ? monthDiff + " เดือน " : ""
+            }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+          }
+        );
       });
     })
     .catch((e) => {