changes

app/components/customer/Customer.vue

@@ -2,38 +2,21 @@
   <!-- 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;'}`"
+      :class="['column is-narrow p-0 pr-4', store.viewport === 1 && 'px-0']"
+      :style="{ borderRight: store.viewport > 1 ? '1px solid var(--bulma-border)' : 'initial' }"
     >
-      <template v-if="viewport > 1">
-        <div
+      <div :class="['buttons is-align-items-stretch', store.viewport > 1 && 'is-flex-direction-column']">
+        <button
           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"
+          :class="['button is-justify-content-flex-start', v.code === tab ? 'is-primary' : 'is-light']"
           @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>
+        </button>
       </div>
     </div>
-    <div :class="['column', { 'px-0': viewport === 1 }]">
+    <div :class="['column', { 'px-0': store.viewport === 1 }]">
       <CustomerForm
         v-if="tab === 'info' && record !== undefined"
         v-bind="{ row: record, pagename, application }"
@@ -50,22 +33,21 @@
           }"
           @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>
+    v-bind="showmodal"
+    @close="showmodal.value = undefined"
+  />
 </template>
 <script setup>
 import CustomerForm from "~/components/customer/CustomerForm.vue";
@@ -85,24 +67,14 @@ const props = defineProps({
 
 const isVietnamese = computed(() => store.lang === "vi");
 const emit = defineEmits(["modalevent", "close"]);
-var viewport = 5;
-var tabs = [
+const 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"}`;
-}
+const tab = ref("info");
+let record = props.row || null;
+const showmodal = ref();
 
 function changeTab(v) {
   if (tab.value === v.code) return;
@@ -110,10 +82,6 @@ function changeTab(v) {
   tab.value = v.code;
 }
 
-function handleModalClose() {
-  showmodal.value = undefined;
-}
-
 function update(v) {
   record = {
     ...v,
@@ -123,16 +91,3 @@ function update(v) {
   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>