Initial commit

app/components/customer/Customer.vue

@@ -0,0 +1,136 @@
+<template>
+  <!-- Nội dung chính - chỉ hiển thị form cá nhân (màn hình chọn đã được xử lý ở SearchBox) -->
+  <div class="columns mx-0 px-0 py-2">
+    <div
+      :class="`column is-narrow p-0 pr-4 ${viewport === 1 ? 'px-0' : ''}`"
+      :style="`${viewport === 1 ? '' : 'border-right: 1px solid #B0B0B0;'}`"
+    >
+      <template v-if="viewport > 1">
+        <div
+          v-for="(v, i) in tabs"
+          :key="i"
+          :class="['is-clickable p-3', i !== 0 && 'mt-2', getStyle(v)]"
+          style="width: 130px; border-radius: 4px;"
+          @click="changeTab(v)"
+        >
+          {{ isVietnamese ? v.name : v.en }}
+        </div>
+      </template>
+      <div v-else class="field is-grouped is-grouped-multiline">
+        <div class="control" v-for="(v, i) in tabs" @click="changeTab(v)">
+          <div style="width: 130px">
+            <div :class="`py-3 px-3 ${getStyle(v)}`">
+              {{ isVietnamese ? v.name : v.en }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="['column', { 'px-0': viewport === 1 }]">
+      <CustomerInfo2
+        v-if="tab === 'info' && record !== undefined"
+        v-bind="{ row: record, pagename, application }"
+        @update="update"
+        @close="emit('close')"
+      />
+      <template v-if="record">
+        <ImageGallery
+          v-bind="{
+            row: record,
+            pagename: pagename,
+            show: ['delete'],
+            api: 'customerfile',
+          }"
+          @update="update"
+          v-if="tab === 'image'"
+        ></ImageGallery>
+        <CustomerView
+          v-bind="{ row: record, pagename: pagename }"
+          @update="update"
+          @close="emit('close')"
+          v-if="tab === 'print'"
+        ></CustomerView>
+      </template>
+    </div>
+  </div>
+
+  <Modal @close="handleModalClose" v-bind="showmodal" v-if="showmodal"></Modal>
+</template>
+<script setup>
+import { computed, ref } from "vue";
+import { useNuxtApp } from "#app";
+import CustomerInfo2 from "~/components/customer/CustomerInfo2";
+import CustomerView from "~/components/customer/CustomerView";
+import Modal from "~/components/Modal.vue";
+import { useStore } from "@/stores/index";
+const nuxtApp = useNuxtApp();
+const { $dialog } = nuxtApp;
+
+const store = useStore();
+var props = defineProps({
+  pagename: String,
+  row: Object,
+  application: Object,
+  isEditMode: Boolean,
+  handleCustomer: Function,
+});
+
+const lang = computed(() => store.lang);
+const isVietnamese = computed(() => lang.value === "vi");
+const emit = defineEmits(["modalevent", "close"]);
+var viewport = 5;
+var tabs = [
+  { code: "info", name: "1. Thông tin", en: "1. Information", active: true },
+  { code: "image", name: "2. Hình ảnh", en: "2. Images", active: false },
+  { code: "print", name: "3. Bản in", en: "3. Print", active: false },
+];
+var tab = ref("info");
+var record = props.row || null;
+var showmodal = ref();
+
+function getStyle(v) {
+  let check = record ? record.id : false;
+  // let check = props.isEditMode;
+  if (v.tab === "info") check = true;
+  return v.code === tab.value
+    ? "has-background-primary has-text-white"
+    : `has-background-light ${check ? "" : "has-text-grey"}`;
+}
+
+function changeTab(v) {
+  if (tab.value === v.code) return;
+  if (!record)
+    return $dialog(
+      "Vui lòng <b>lưu dữ liệu</b> trước khi chuyển sang mục tiếp theo",
+      "Thông báo"
+    );
+  tab.value = v.code;
+}
+
+function handleModalClose() {
+  showmodal.value = undefined;
+}
+
+function update(v) {
+  record = {
+    ...v,
+    label: `${v.code} / ${v.fullname} / ${v.phone || ""}`,
+  }
+  emit("modalevent", { name: "dataevent", data: record });
+  if (!props.isEditMode) emit("close");
+}
+</script>
+
+<style scoped>
+.title {
+  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial,
+    sans-serif !important;
+}
+.button.is-large.is-fullwidth:hover {
+  color: white !important;
+  background-color: rgb(75, 114, 243) !important;
+  .title {
+    color: white !important;
+  }
+}
+</style>