changes

app/components/customer/Company.vue

@@ -199,34 +199,36 @@
 import InputPhone from "~/components/common/InputPhone";
 import InputEmail from "~/components/common/InputEmail";
 import SearchBox from "~/components/SearchBox";
-var props = defineProps({
+
+const props = defineProps({
   pagename: String,
   row: Object,
 });
+
 const store = useStore();
 const { $find, $getdata, $patchapi, $insertapi, $findapi, $getapi, $empty, $errPhone, $resetNull, $snackbar } =
   useNuxtApp();
 const emit = defineEmits(["update", "dataevent"]);
-var viewport = store.viewport;
-var errors = ref({});
-var record = ref();
-var showmodal = undefined;
-var existedCustomer = undefined;
+const viewport = store.viewport;
+const errors = ref({});
+const record = ref();
+const showmodal = ref();
+let existedCustomer = undefined;
 async function initData() {
   if (props.row) {
-    let conn = $findapi("company");
+    const conn = $findapi("company");
     conn.params.filter = {
       id: props.row.company || props.row.customer__company || props.row.id,
     };
-    let rs = await $getapi([conn]);
-    let found = $find(rs, { name: "company" });
+    const rs = await $getapi([conn]);
+    const found = $find(rs, { name: "company" });
     if (found.data.rows.length > 0) record.value = found.data.rows[0];
   } else {
     record.value = {};
   }
 }
 function findLang(code) {
-  let found = $find(store.common, { code: code });
+  const found = $find(store.common, { code: code });
   return found ? found[store.lang] : "";
 }
 function showCustomer() {
@@ -269,13 +271,13 @@ async function update() {
   if (!record.value.creator) record.value.creator = store.login.id;
   record.value.updater = store.login.id;
   record.update_time = new Date();
-  let rs = record.value.id
+  const rs = record.value.id
     ? await $patchapi("company", { data: record.value })
     : await $insertapi("company", { data: record.value });
   if (rs === "error") return;
   if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
   record.value.id = rs.id;
-  let ele = await $getdata("company", {
+  const ele = await $getdata("company", {
     first: true,
     filter: { id: rs.id },
   });

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>