From 0f79329260403d8b54cfc71ea3672d1cfe8b5780 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 5 Oct 2023 17:32:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87=E0=B8=84?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B9=80=E0=B8=A7=E0=B9=87=E0=B8=9A=E0=B9=84?=
 =?UTF-8?q?=E0=B8=8B=E0=B8=95=E0=B9=8C=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2=20(=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3,=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/views/03_editor/index.vue   | 1290 +++++++++--------
 1 file changed, 663 insertions(+), 627 deletions(-)

diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 7413d8b03..399041376 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -1,3 +1,665 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import type {
+  WebType,
+  AddressWeb,
+  DataOption,
+  zipCodeOption,
+  EnableType,
+  CmsTable,
+} from "@/modules/03_recruiting/interface/index/Main";
+import type { Columns } from "@/modules/03_recruiting/interface/request/Career";
+import type { DataLink } from "@/modules/03_recruiting/interface/request/Editor";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+
+const { date2Thai, messageError, showLoader, hideLoader, dialogMessageNotify,dialogConfirm ,dialogRemove} =
+  mixin;
+const previous = ref<boolean>(false);
+const next = ref<boolean>(false);
+const addDialog = ref<boolean>(false);
+const imageUrl = ref<any>(null);
+const imageFile = ref<any>(null);
+const inputImage = ref<any>(null);
+const imageUrlLogo = ref<any>(null);
+const imageFileLogo = ref<any>(null);
+const inputImageLogo = ref<any>(null);
+const myform = ref<QForm | null>(null);
+const webform = ref<QForm | null>(null);
+const dialogform = ref<QForm | null>(null);
+const idRow = ref<string | null>("");
+const indexRow = ref<number>(0);
+const agencyRow = ref<boolean>(false);
+const inputLink = ref<string | null>("");
+const inputName = ref<string | null>("");
+const inputNameBack = ref<string | null>("");
+const editvisible = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const qeditor = ref<string>("");
+const title = ref<string>("");
+const filter = ref<string>(""); //search data table
+const filterAgency = ref<string>(""); //search data table
+const provinceOptions = ref<DataOption[]>([]);
+const districtOptions = ref<DataOption[]>([]);
+const subdistrictOptions = ref<zipCodeOption[]>([]);
+const cmsGoverment = ref<CmsTable[]>([]);
+const cmsAgency = ref<CmsTable[]>([]);
+const web = ref<WebType>({
+  by: "",
+  thai: "",
+  eng: "",
+  descripstion: "",
+});
+const address = ref<AddressWeb>({
+  address: null,
+  provinceId: null,
+  districtId: null,
+  subdistrictId: null,
+  tel: null,
+  code: null,
+});
+const enable = ref<EnableType>({
+  photo: false,
+  web: false,
+  about: false,
+});
+const visibleColumns = ref<String[]>([
+  "name",
+  "link",
+  "createdAt",
+  "lastUpdatedAt",
+]);
+const visibleColumnsAgency = ref<String[]>([
+  "name",
+  "link",
+  "createdAt",
+  "lastUpdatedAt",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "link",
+    align: "left",
+    label: "ลิ้งค์",
+    sortable: true,
+    field: "link",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "ว้นที่แก้ไขล่าสุด",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+onMounted(async () => {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(address.value.provinceId);
+  await fetchSubDistrict(address.value.districtId);
+});
+
+const clickPreviousNext = (page: string) => {
+  const index: number =
+    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
+  let length: number;
+  editvisible.value = false;
+  if (agencyRow.value) {
+    inputLink.value = cmsAgency.value[index].link;
+    inputName.value = cmsAgency.value[index].name;
+    idRow.value = cmsAgency.value[index].id;
+    length = cmsAgency.value.length;
+  } else {
+    inputLink.value = cmsGoverment.value[index].link;
+    inputName.value = cmsGoverment.value[index].name;
+    idRow.value = cmsGoverment.value[index].id;
+    length = cmsGoverment.value.length;
+  }
+
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+  indexRow.value = index;
+};
+
+const selectData = (id: string, agency: boolean) => {
+  dialog.value = !dialog.value;
+  addDialog.value = false;
+  editvisible.value = false;
+  agencyRow.value = agency;
+  title.value = agency ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
+  let length: number;
+  let index: number;
+  if (agency) {
+    index = cmsAgency.value.findIndex((r: any) => r.id == id);
+    length = cmsAgency.value.length;
+    inputLink.value = cmsAgency.value[index].link;
+    inputName.value = cmsAgency.value[index].name;
+    inputNameBack.value = cmsAgency.value[index].name;
+    idRow.value = cmsAgency.value[index].id;
+  } else {
+    index = cmsGoverment.value.findIndex((r: any) => r.id == id);
+    length = cmsGoverment.value.length;
+
+    inputLink.value = cmsGoverment.value[index].link;
+    inputName.value = cmsGoverment.value[index].name;
+    inputNameBack.value = cmsGoverment.value[index].name;
+    idRow.value = cmsGoverment.value[index].id;
+  }
+  indexRow.value = index;
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+};
+
+const editDialog = () => {
+
+    inputName.value = inputNameBack.value
+
+  editvisible.value = !editvisible.value;
+};
+
+const clickClose = () => {
+  dialog.value = !dialog.value;
+  addDialog.value = false;
+};
+
+const clickAdd = (agency: boolean) => {
+  dialog.value = !dialog.value;
+  title.value = agency ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
+  agencyRow.value = agency;
+  addDialog.value = true;
+  editvisible.value = true;
+  inputLink.value = "";
+  inputName.value = "";
+};
+
+const statusHeader = () => {
+  return Object.values(enable.value).includes(true);
+};
+
+const cancelBlog = async () => {
+  await fetchData();
+};
+
+const saveAdd = async () => {
+  dialogform.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      if (agencyRow.value) {
+        let arrData: DataLink[] = [];
+        cmsAgency.value.map((r: any) => {
+          arrData.push({
+            name: r.name,
+            link: r.link,
+          });
+        });
+        arrData.push({
+          name: inputName.value,
+          link: inputLink.value,
+        });
+        await saveDataAgency(arrData,'');
+        dialog.value = false;
+      } else {
+        let arrData: DataLink[] = [];
+        cmsGoverment.value.map((r: any) => {
+          arrData.push({
+            name: r.name,
+            link: r.link,
+          });
+        });
+        arrData.push({
+          name: inputName.value,
+          link: inputLink.value,
+        });
+        await saveDataGoverment(arrData,'');
+        dialog.value = false;
+      }
+    }
+  });
+};
+
+const saveDelete = async (del:string) => {
+  if (agencyRow.value) {
+    const filt = cmsAgency.value.filter((r: any) => r.id != idRow.value);
+    let arrData: DataLink[] = [];
+    filt.map((r: any) => {
+      arrData.push({
+        name: r.name,
+        link: r.link,
+      });
+    });
+    await saveDataAgency(arrData,del);
+    dialog.value = false;
+  } else {
+    const filt = cmsGoverment.value.filter((r: any) => r.id != idRow.value);
+    let arrData: DataLink[] = [];
+    filt.map((r: any) => {
+      arrData.push({
+        name: r.name,
+        link: r.link,
+      });
+    });
+    await saveDataGoverment(arrData,del);
+    dialog.value = false;
+  }
+};
+
+const saveEdit = async () => {
+  if (agencyRow.value) {
+    let arrData: DataLink[] = [];
+    cmsAgency.value.map((r: any) => {
+      if (r.id == idRow.value) {
+        arrData.push({
+          name: inputName.value,
+          link: inputLink.value,
+        });
+      } else {
+        arrData.push({
+          name: r.name,
+          link: r.link,
+        });
+      }
+    });
+    await saveDataAgency(arrData,'');
+    dialog.value = false;
+  } else {
+    let arrData: DataLink[] = [];
+    cmsGoverment.value.map((r: any) => {
+      if (r.id == idRow.value) {
+        arrData.push({
+          name: inputName.value,
+          link: inputLink.value,
+        });
+      } else {
+        arrData.push({
+          name: r.name,
+          link: r.link,
+        });
+      }
+    });
+    await saveDataGoverment(arrData,'');
+
+  }
+};
+
+const saveDataAgency = async (data: DataLink[],del:string) => {
+  dialogform.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      if (data.length === 0) {
+        dialogMessageNotify($q, "ลบข้อมูลต้องมี 2 ลิ้งอย่างน้อย 2 ลิ้ง");
+      } else if(del){
+        dialogRemove($q,() => dataPostAgency(data))
+      }else {
+        dialogConfirm($q,() => dataPostAgency(data))
+      }
+
+    }
+  });
+};
+
+const saveDataGoverment = async (data: DataLink[],del:string) => {
+  dialogform.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      if (data.length === 0) {
+        dialogMessageNotify($q, "ลบข้อมูลต้องมี 2 ลิ้งอย่างน้อย 2 ลิ้ง");
+      } else if(del){
+        dialogRemove($q,() => dataPost(data))
+      }else {
+        dialogConfirm($q,() => dataPost(data))
+      }
+
+    }
+  });
+};
+const dataPostAgency = async(data: DataLink[]) => {
+  showLoader();
+        await http
+          .post(config.API.cmsAgency, data)
+          .then((res) => {})
+          .catch((e: any) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            dialog.value = false;
+            await fetchData();
+          });
+}
+const dataPost = async(data: DataLink[]) => {
+  showLoader();
+        await http
+          .post(config.API.cmsGoverment, data)
+          .then((res) => {})
+          .catch((e: any) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            dialog.value = false;
+            await fetchData();
+          });
+}
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.cms)
+    .then((res) => {
+      const data = res.data.result;
+      web.value.eng = data.nameEn;
+      web.value.thai = data.nameTh;
+      web.value.by = data.shortName;
+      web.value.descripstion = data.description;
+      qeditor.value = data.about;
+      address.value.address = data.address;
+      address.value.tel = data.telephone;
+      address.value.code = data.zipCode;
+      if (data.bannerImg) {
+        imageUrl.value = data.bannerImg.detail;
+      }
+      if (data.logoImg) {
+        imageUrlLogo.value = data.logoImg.detail;
+      }
+      address.value.provinceId = data.provinceId;
+      address.value.districtId = data.districtId;
+      address.value.subdistrictId = data.subDistrictId;
+
+      if (data.cmsGovernments.length > 0) {
+        let setData: CmsTable[] = [];
+        data.cmsGovernments.map((r: CmsTable) => {
+          setData.push({
+            id: r.id,
+            name: r.name,
+            link: r.link,
+            createdAt: r.createdAt,
+            lastUpdatedAt: r.lastUpdatedAt,
+          });
+        });
+        cmsGoverment.value = setData;
+      }
+
+      if (data.cmsAgencys.length > 0) {
+        let setData: CmsTable[] = [];
+        data.cmsAgencys.map((r: CmsTable) => {
+          setData.push({
+            id: r.id,
+            name: r.name,
+            link: r.link,
+            createdAt: r.createdAt,
+            lastUpdatedAt: r.lastUpdatedAt,
+          });
+        });
+        cmsAgency.value = setData;
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const takeLogo = async () => {
+  showLoader();
+  const formData = new FormData();
+  formData.append("FileData", imageFileLogo.value);
+  await http
+    .post(config.API.cmsLogo, formData)
+    .then((res) => {})
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      imageFileLogo.value = null;
+      imageUrlLogo.value = null;
+      await fetchData();
+    });
+};
+
+const takeBanner = async () => {
+  showLoader();
+  const formData = new FormData();
+  formData.append("FileData", imageFile.value);
+  await http
+    .post(config.API.cmsBanner, formData)
+    .then((res) => {})
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      imageFile.value = null;
+      imageUrl.value = null;
+      await fetchData();
+    });
+};
+
+const sendDataDetail = async () => {
+  webform.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      const data = {
+        nameTh: web.value.thai,
+        nameEn: web.value.eng,
+        description: web.value.descripstion,
+        shortName: web.value.by,
+      };
+      showLoader();
+      await http
+        .post(config.API.cmsDeatail, data)
+        .then((res) => {})
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+          enable.value.web = false;
+        });
+    }
+  });
+};
+
+const sendDataAbout = async () => {
+  myform.value?.validate().then(async (result: boolean) => {
+    if (result) {
+      const data = {
+        about: qeditor.value,
+        address: address.value.address,
+        provinceId: address.value.provinceId,
+        districtId: address.value.districtId,
+        subDistrictId: address.value.subdistrictId,
+        zipCode: address.value.code,
+        telephone: address.value.tel,
+      };
+      showLoader();
+      await http
+        .post(config.API.cmsAbout, data)
+        .then((res) => {})
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+          enable.value.about = false;
+        });
+    }
+  });
+};
+
+const fetchProvince = async () => {
+  showLoader();
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      provinceOptions.value = option;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchDistrict = async (id: string | null) => {
+  if (id !== null && id != "") {
+    showLoader();
+    await http
+      .get(config.API.listDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        districtOptions.value = option;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const fetchSubDistrict = async (id: string | null) => {
+  if (id !== null && id != "") {
+    showLoader();
+    await http
+      .get(config.API.listSubDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+            zipCode: r.zipCode.toString(),
+          });
+        });
+        subdistrictOptions.value = option;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const selectProvince = (e: string) => {
+  address.value.districtId = "";
+  address.value.subdistrictId = "";
+  address.value.code = "";
+  myform.value?.resetValidation();
+  fetchDistrict(e);
+};
+
+const selectDistrict = (e: string) => {
+  address.value.subdistrictId = "";
+  address.value.code = "";
+
+  myform.value?.resetValidation();
+  fetchSubDistrict(e);
+};
+
+const selectSubDistrict = (e: string) => {
+  const findcode = subdistrictOptions.value.filter((r: any) => r.id == e);
+  const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+  address.value.code = namecode;
+};
+
+const clickImageLogo = () => {
+  if (imageFileLogo.value !== null) {
+    takeLogo();
+  } else {
+    inputImageLogo.value.click();
+  }
+};
+
+const clickImage = () => {
+  if (imageFile.value !== null) {
+    takeBanner();
+  } else {
+    inputImage.value.click();
+  }
+};
+
+const uploadImageLogo = (e: any) => {
+  let input = e.target.files;
+  if (input.length > 0) {
+    const formData = new FormData();
+    formData.append("FileData", input[0]);
+
+    imageFileLogo.value = input[0];
+    imageUrlLogo.value = URL.createObjectURL(input[0]);
+    return;
+  }
+  return;
+};
+
+const uploadImage = (e: any) => {
+  let input = e.target.files;
+  if (input.length > 0) {
+    const formData = new FormData();
+    formData.append("FileData", input[0]);
+
+    imageFile.value = input[0];
+    imageUrl.value = URL.createObjectURL(input[0]);
+    return;
+  }
+  return;
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ตั้งค่าเว็บไซต์ระบบสรรหา
@@ -497,7 +1159,7 @@
           round
           :disabled="editvisible"
           :color="editvisible ? 'grey-7' : 'red'"
-          @click="saveDelete()"
+          @click="saveDelete('delect')"
           icon="mdi-delete-outline"
         >
           <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -552,633 +1214,7 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
-import type {
-  WebType,
-  AddressWeb,
-  DataOption,
-  zipCodeOption,
-  EnableType,
-  CmsTable,
-} from "@/modules/03_recruiting/interface/index/Main";
-import type { Columns } from "@/modules/03_recruiting/interface/request/Career";
-import type { DataLink } from "@/modules/03_recruiting/interface/request/Editor";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import ProfileTable from "@/modules/04_registry/components/Table.vue";
 
-import { useQuasar } from "quasar";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
-const previous = ref<boolean>(false);
-const next = ref<boolean>(false);
-const addDialog = ref<boolean>(false);
-const imageUrl = ref<any>(null);
-const imageFile = ref<any>(null);
-const inputImage = ref<any>(null);
-const imageUrlLogo = ref<any>(null);
-const imageFileLogo = ref<any>(null);
-const inputImageLogo = ref<any>(null);
-const myform = ref<QForm | null>(null);
-const webform = ref<QForm | null>(null);
-const dialogform = ref<QForm | null>(null);
-const idRow = ref<string | null>("");
-const indexRow = ref<number>(0);
-const agencyRow = ref<boolean>(false);
-const inputLink = ref<string | null>("");
-const inputName = ref<string | null>("");
-const editvisible = ref<boolean>(false);
-const dialog = ref<boolean>(false);
-const edit = ref<boolean>(false);
-const qeditor = ref<string>("");
-const title = ref<string>("");
-const filter = ref<string>(""); //search data table
-const filterAgency = ref<string>(""); //search data table
-const provinceOptions = ref<DataOption[]>([]);
-const districtOptions = ref<DataOption[]>([]);
-const subdistrictOptions = ref<zipCodeOption[]>([]);
-const cmsGoverment = ref<CmsTable[]>([]);
-const cmsAgency = ref<CmsTable[]>([]);
-const web = ref<WebType>({
-  by: "",
-  thai: "",
-  eng: "",
-  descripstion: "",
-});
-const address = ref<AddressWeb>({
-  address: null,
-  provinceId: null,
-  districtId: null,
-  subdistrictId: null,
-  tel: null,
-  code: null,
-});
-const enable = ref<EnableType>({
-  photo: false,
-  web: false,
-  about: false,
-});
-const visibleColumns = ref<String[]>([
-  "name",
-  "link",
-  "createdAt",
-  "lastUpdatedAt",
-]);
-const visibleColumnsAgency = ref<String[]>([
-  "name",
-  "link",
-  "createdAt",
-  "lastUpdatedAt",
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "link",
-    align: "left",
-    label: "ลิ้งค์",
-    sortable: true,
-    field: "link",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "ว้นที่แก้ไขล่าสุด",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-onMounted(async () => {
-  await fetchData();
-  await fetchProvince();
-  await fetchDistrict(address.value.provinceId);
-  await fetchSubDistrict(address.value.districtId);
-});
-
-const clickPreviousNext = (page: string) => {
-  const index: number =
-    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
-  let length: number;
-  editvisible.value = false;
-  if (agencyRow.value) {
-    inputLink.value = cmsAgency.value[index].link;
-    inputName.value = cmsAgency.value[index].name;
-    idRow.value = cmsAgency.value[index].id;
-    length = cmsAgency.value.length;
-  } else {
-    inputLink.value = cmsGoverment.value[index].link;
-    inputName.value = cmsGoverment.value[index].name;
-    idRow.value = cmsGoverment.value[index].id;
-    length = cmsGoverment.value.length;
-  }
-
-  previous.value = index == 0 ? false : true;
-  next.value = index == length - 1 ? false : true;
-  indexRow.value = index;
-};
-
-const selectData = (id: string, agency: boolean) => {
-  dialog.value = !dialog.value;
-  addDialog.value = false;
-  editvisible.value = false;
-  agencyRow.value = agency;
-  title.value = agency ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
-  let length: number;
-  let index: number;
-  if (agency) {
-    index = cmsAgency.value.findIndex((r: any) => r.id == id);
-    length = cmsAgency.value.length;
-    inputLink.value = cmsAgency.value[index].link;
-    inputName.value = cmsAgency.value[index].name;
-    idRow.value = cmsAgency.value[index].id;
-  } else {
-    index = cmsGoverment.value.findIndex((r: any) => r.id == id);
-    length = cmsGoverment.value.length;
-
-    inputLink.value = cmsGoverment.value[index].link;
-    inputName.value = cmsGoverment.value[index].name;
-    idRow.value = cmsGoverment.value[index].id;
-  }
-  indexRow.value = index;
-  previous.value = index == 0 ? false : true;
-  next.value = index == length - 1 ? false : true;
-};
-
-const editDialog = () => {
-  editvisible.value = !editvisible.value;
-};
-
-const clickClose = () => {
-  dialog.value = !dialog.value;
-  addDialog.value = false;
-};
-
-const clickAdd = (agency: boolean) => {
-  dialog.value = !dialog.value;
-  title.value = agency ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
-  agencyRow.value = agency;
-  addDialog.value = true;
-  editvisible.value = true;
-  inputLink.value = "";
-  inputName.value = "";
-};
-
-const statusHeader = () => {
-  return Object.values(enable.value).includes(true);
-};
-
-const cancelBlog = async () => {
-  await fetchData();
-};
-
-const saveAdd = async () => {
-  dialogform.value?.validate().then(async (result: boolean) => {
-    if (result) {
-      if (agencyRow.value) {
-        let arrData: DataLink[] = [];
-        cmsAgency.value.map((r: any) => {
-          arrData.push({
-            name: r.name,
-            link: r.link,
-          });
-        });
-        arrData.push({
-          name: inputName.value,
-          link: inputLink.value,
-        });
-        await saveDataAgency(arrData);
-        dialog.value = false;
-      } else {
-        let arrData: DataLink[] = [];
-        cmsGoverment.value.map((r: any) => {
-          arrData.push({
-            name: r.name,
-            link: r.link,
-          });
-        });
-        arrData.push({
-          name: inputName.value,
-          link: inputLink.value,
-        });
-        await saveDataGoverment(arrData);
-        dialog.value = false;
-      }
-    }
-  });
-};
-
-const saveDelete = async () => {
-  if (agencyRow.value) {
-    const filt = cmsAgency.value.filter((r: any) => r.id != idRow.value);
-    let arrData: DataLink[] = [];
-    filt.map((r: any) => {
-      arrData.push({
-        name: r.name,
-        link: r.link,
-      });
-    });
-    await saveDataAgency(arrData);
-    dialog.value = false;
-  } else {
-    const filt = cmsGoverment.value.filter((r: any) => r.id != idRow.value);
-    let arrData: DataLink[] = [];
-    filt.map((r: any) => {
-      arrData.push({
-        name: r.name,
-        link: r.link,
-      });
-    });
-    await saveDataGoverment(arrData);
-    dialog.value = false;
-  }
-};
-
-const saveEdit = async () => {
-  if (agencyRow.value) {
-    let arrData: DataLink[] = [];
-    cmsAgency.value.map((r: any) => {
-      if (r.id == idRow.value) {
-        arrData.push({
-          name: inputName.value,
-          link: inputLink.value,
-        });
-      } else {
-        arrData.push({
-          name: r.name,
-          link: r.link,
-        });
-      }
-    });
-    await saveDataAgency(arrData);
-    dialog.value = false;
-  } else {
-    let arrData: DataLink[] = [];
-    cmsGoverment.value.map((r: any) => {
-      if (r.id == idRow.value) {
-        arrData.push({
-          name: inputName.value,
-          link: inputLink.value,
-        });
-      } else {
-        arrData.push({
-          name: r.name,
-          link: r.link,
-        });
-      }
-    });
-    await saveDataGoverment(arrData);
-    dialog.value = false;
-  }
-};
-
-const saveDataAgency = async (data: DataLink[]) => {
-  showLoader();
-  await http
-    .post(config.API.cmsAgency, data)
-    .then((res) => {})
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-const saveDataGoverment = async (data: DataLink[]) => {
-  showLoader();
-
-  await http
-    .post(config.API.cmsGoverment, data)
-    .then((res) => {})
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.cms)
-    .then((res) => {
-      const data = res.data.result;
-      web.value.eng = data.nameEn;
-      web.value.thai = data.nameTh;
-      web.value.by = data.shortName;
-      web.value.descripstion = data.description;
-      qeditor.value = data.about;
-      address.value.address = data.address;
-      address.value.tel = data.telephone;
-      address.value.code = data.zipCode;
-      if (data.bannerImg) {
-        imageUrl.value = data.bannerImg.detail;
-      }
-      if (data.logoImg) {
-        imageUrlLogo.value = data.logoImg.detail;
-      }
-      address.value.provinceId = data.provinceId;
-      address.value.districtId = data.districtId;
-      address.value.subdistrictId = data.subDistrictId;
-
-      if (data.cmsGovernments.length > 0) {
-        let setData: CmsTable[] = [];
-        data.cmsGovernments.map((r: CmsTable) => {
-          setData.push({
-            id: r.id,
-            name: r.name,
-            link: r.link,
-            createdAt: r.createdAt,
-            lastUpdatedAt: r.lastUpdatedAt,
-          });
-        });
-        cmsGoverment.value = setData;
-      }
-
-      if (data.cmsAgencys.length > 0) {
-        let setData: CmsTable[] = [];
-        data.cmsAgencys.map((r: CmsTable) => {
-          setData.push({
-            id: r.id,
-            name: r.name,
-            link: r.link,
-            createdAt: r.createdAt,
-            lastUpdatedAt: r.lastUpdatedAt,
-          });
-        });
-        cmsAgency.value = setData;
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const takeLogo = async () => {
-  showLoader();
-  const formData = new FormData();
-  formData.append("FileData", imageFileLogo.value);
-  await http
-    .post(config.API.cmsLogo, formData)
-    .then((res) => {})
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      imageFileLogo.value = null;
-      imageUrlLogo.value = null;
-      await fetchData();
-    });
-};
-
-const takeBanner = async () => {
-  showLoader();
-  const formData = new FormData();
-  formData.append("FileData", imageFile.value);
-  await http
-    .post(config.API.cmsBanner, formData)
-    .then((res) => {})
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      imageFile.value = null;
-      imageUrl.value = null;
-      await fetchData();
-    });
-};
-
-const sendDataDetail = async () => {
-  webform.value?.validate().then(async (result: boolean) => {
-    if (result) {
-      const data = {
-        nameTh: web.value.thai,
-        nameEn: web.value.eng,
-        description: web.value.descripstion,
-        shortName: web.value.by,
-      };
-      showLoader();
-      await http
-        .post(config.API.cmsDeatail, data)
-        .then((res) => {})
-        .catch((e: any) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          enable.value.web = false;
-        });
-    }
-  });
-};
-
-const sendDataAbout = async () => {
-  myform.value?.validate().then(async (result: boolean) => {
-    if (result) {
-      const data = {
-        about: qeditor.value,
-        address: address.value.address,
-        provinceId: address.value.provinceId,
-        districtId: address.value.districtId,
-        subDistrictId: address.value.subdistrictId,
-        zipCode: address.value.code,
-        telephone: address.value.tel,
-      };
-      showLoader();
-      await http
-        .post(config.API.cmsAbout, data)
-        .then((res) => {})
-        .catch((e: any) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          enable.value.about = false;
-        });
-    }
-  });
-};
-
-const fetchProvince = async () => {
-  showLoader();
-  await http
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      provinceOptions.value = option;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchDistrict = async (id: string | null) => {
-  if (id !== null && id != "") {
-    showLoader();
-    await http
-      .get(config.API.listDistrict(id))
-      .then((res) => {
-        const data = res.data.result;
-        let option: DataOption[] = [];
-        data.map((r: any) => {
-          option.push({ id: r.id.toString(), name: r.name.toString() });
-        });
-        districtOptions.value = option;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchSubDistrict = async (id: string | null) => {
-  if (id !== null && id != "") {
-    showLoader();
-    await http
-      .get(config.API.listSubDistrict(id))
-      .then((res) => {
-        const data = res.data.result;
-        let option: zipCodeOption[] = [];
-        data.map((r: any) => {
-          option.push({
-            id: r.id.toString(),
-            name: r.name.toString(),
-            zipCode: r.zipCode.toString(),
-          });
-        });
-        subdistrictOptions.value = option;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const selectProvince = (e: string) => {
-  address.value.districtId = "";
-  address.value.subdistrictId = "";
-  address.value.code = "";
-  myform.value?.resetValidation();
-  fetchDistrict(e);
-};
-
-const selectDistrict = (e: string) => {
-  address.value.subdistrictId = "";
-  address.value.code = "";
-
-  myform.value?.resetValidation();
-  fetchSubDistrict(e);
-};
-
-const selectSubDistrict = (e: string) => {
-  const findcode = subdistrictOptions.value.filter((r: any) => r.id == e);
-  const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-  address.value.code = namecode;
-};
-
-const clickImageLogo = () => {
-  if (imageFileLogo.value !== null) {
-    takeLogo();
-  } else {
-    inputImageLogo.value.click();
-  }
-};
-
-const clickImage = () => {
-  if (imageFile.value !== null) {
-    takeBanner();
-  } else {
-    inputImage.value.click();
-  }
-};
-
-const uploadImageLogo = (e: any) => {
-  let input = e.target.files;
-  if (input.length > 0) {
-    const formData = new FormData();
-    formData.append("FileData", input[0]);
-
-    imageFileLogo.value = input[0];
-    imageUrlLogo.value = URL.createObjectURL(input[0]);
-    return;
-  }
-  return;
-};
-
-const uploadImage = (e: any) => {
-  let input = e.target.files;
-  if (input.length > 0) {
-    const formData = new FormData();
-    formData.append("FileData", input[0]);
-
-    imageFile.value = input[0];
-    imageUrl.value = URL.createObjectURL(input[0]);
-    return;
-  }
-  return;
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
 <style lang="scss" scoped>
 .my-content {
   padding: 20px 15px;