web/app/components/customer/CustomerInfo2.vue

<template>
  <div v-if="!selectedCustomerType && isNewCustomer && !props.customerType" class="p-5">
    <h3 class="title is-4 mb-5 has-text-centered">
      {{ isVietnamese ? "Chọn loại khách hàng" : "Select Customer Type" }}
    </h3>
    <div class="columns is-multiline">
      <div class="column is-6">
        <button
          :disabled="!$getEditRights('edit', { code: 'individual', category: 'submenu' })"
          class="button is-large is-fullwidth" 
          style="height: 120px" 
          @click="selectCustomerType(1)"
        >
          <div class="has-text-centered">
            <div>
              <SvgIcon v-bind="{ name: 'user.svg', type: 'black', size: 40 }"></SvgIcon>
            </div>
            <div class="title is-5 mb-0">
              {{ isVietnamese ? "Cá nhân" : "Individual" }}
            </div>
          </div>
        </button>
      </div>
      <div class="column is-6">
        <button           
          :disabled="!$getEditRights('edit', { code: 'org', category: 'submenu' })"
          class="button is-large is-fullwidth" 
          style="height: 120px" 
          @click="selectCustomerType(2)"
        >
          <div class="has-text-centered">
            <div>
              <SvgIcon v-bind="{ name: 'building.svg', type: 'black', size: 40 }"></SvgIcon>
            </div>
            <div class="title is-5 mb-0">
              {{ isVietnamese ? "Tổ chức" : "Organization" }}
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <template v-else-if="isLoaded">
    <div v-if="record && isLoaded">
      <div class="columns is-multiline">
        <div class="column is-4">
          <div class="field">
            <label class="label">{{ isIndividual ? "Họ và tên" : "Tên tổ chức" }}<b class="ml-1 has-text-danger">*</b></label>
            <div class="control">
              <input class="input" type="text" v-model="record.fullname" />
            </div>
            <p class="help is-danger" v-if="errors.fullname">{{ errors.fullname }}</p>
          </div>
        </div>
        <div class="column is-4">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("phone_number")[lang] }}<b class="ml-1 has-text-danger">*</b></label>
            <InputPhone v-bind="{ record: record, attr: 'phone' }" @phone="selected('phone', $event)"></InputPhone>
            <p class="help is-danger" v-if="errors.phone">
              {{ errors.phone }}
              <a class="has-text-primary" v-if="existedCustomer" @click="showCustomer()">Chi tiết</a>
            </p>
          </div>
        </div>
        <div class="column is-4">
          <div class="field">
            <label class="label">Email</label>
            <InputEmail v-bind="{ record: record, attr: 'email' }" @email="selected('email', $event)"></InputEmail>
            <p class="help is-danger" v-if="errors.email">{{ errors.email }}</p>
          </div>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-6">
          <div class="field">
            <label class="label">Địa chỉ liên hệ</label>
            <input class="input" type="text" v-model="record.contact_address" />
          </div>
        </div>
        <div class="column is-6">
          <div class="field">
            <label class="label">{{ isIndividual ? 'Địa chỉ thường trú' : 'Địa chỉ đăng ký' }}</label>
            <input class="input" type="text" v-model="record.address" />
          </div>
        </div>
      </div>

      <div v-if="isOrganization" class="columns is-multiline">
        <div class="column is-6">
          <div class="field">
            <label class="label">Tài khoản ngân hàng</label>
            <input class="input" type="text" v-model="organizationData.bank_account" />
          </div>
        </div>
        <div class="column is-6">
          <div class="field">
            <label class="label">Tên ngân hàng</label>
            <input class="input" type="text" v-model="organizationData.bank_name" />
          </div>
        </div>
      </div>

      <div class="columns is-multiline">
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ isIndividual ? 'Giấy tờ tùy thân' : 'Giấy tờ' }}<b class="ml-1 has-text-danger">*</b></label>
            <SearchBox v-bind="{ vdata: filteredLegalTypes, api: 'legaltype', field: isVietnamese ? 'name' : 'en', column: ['name', 'en'], first: true, optionid: record.legal_type }" @option="selected('legal_type', $event)"></SearchBox>
          </div>
        </div>
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("idnum")[lang] }}<b class="ml-1 has-text-danger">*</b></label>
            <input class="input" type="text" v-model="record.legal_code" />
            <p class="help is-danger" v-if="errors.legal_code">{{ errors.legal_code }}</p>
          </div>
        </div>
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("issued_date")[lang] }}<b class="ml-1 has-text-danger">*</b></label>
            <Datepicker v-bind="{ record: record, attr: 'issued_date', maxdate: new Date() }" @date="selected('issued_date', $event)"></Datepicker>
            <p class="help is-danger" v-if="errors.issued_date">{{ errors.issued_date }}</p>
          </div>
        </div>
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("issued_place")[lang] }}</label>
            <SearchBox
                v-bind="{ api: 'issuedplace', field: 'name', column: ['name'], first: true, position: 'is-bottom-right', optionid: record.issued_place,filter: {id__in: isIndividual ? [2, 3] : [4, 5] } }"
                @option="selected('issued_place', $event)"></SearchBox>
          </div>
        </div>
      </div>

      <div class="columns is-multiline" v-if="isIndividual">
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("gender")[lang] }}</label>
            <SearchBox v-bind="{ vdata: store.sex, api: 'sex', field: isVietnamese ? 'name' : 'en', column: ['name', 'en'], first: true, optionid: individualData.sex }" @option="selectedIndividual('sex', $event)"></SearchBox>
          </div>
        </div> 
        <div class="column is-3">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("birth_date")[lang] }}</label>
            <Datepicker v-bind="{ record: individualData, attr: 'dob', maxdate: new Date() }" @date="selectedIndividual('dob', $event)"></Datepicker>
            <p class="help is-danger" v-if="errors.dob">{{ errors.dob }}</p>
          </div>
        </div>
      </div>

      <div class="columns is-multiline">
        <div class="column is-12">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("note")[lang] }}</label>
            <textarea class="textarea" v-model="record.note" rows="2"></textarea>
          </div>
        </div>
      </div>

      <div class="mt-5 mb-4">
        <h4 class="title is-6 has-text-warning">{{ isIndividual ? 'Người liên quan' : 'Người đại diện pháp luật' }}</h4>
      </div>
      <div class="columns is-multiline mb-0 is-2" v-for="(v, i) in localPeople" :key="i">
        <div class="column">
          <label class="label" v-if="i === 0">{{ findFieldName("select")[lang] }}</label>
          <SearchBox 
            v-bind="{ 
              api: 'people',
              field: 'label',
              column: ['code', 'fullname', 'phone'],
              first: true,
              optionid: v.people,
              position: 'is-top-left',
              addon: peopleAddon,
              viewaddon: peopleviewAddon
            }" 
            @option="selectPeople($event, v, i)"></SearchBox>
        </div>
        <div class="column is-4">
          <label class="label" v-if="i === 0">{{ isIndividual ? 'Quan hệ' : 'Chức vụ' }}</label>
          <SearchBox 
            v-bind="{ 
              api: 'relation',
              field: store.lang === 'en' ? 'en' : 'name',
              column: ['code', 'name', 'en'], 
              first: true, 
              optionid: v.relation, 
              position: 'is-top-left',
              filter:{ id__in: isIndividual ? [1,2,3,4,5,6,7,8] : [9,10,11,12] } 
            }" 
            @option="selectRelation($event, v, i)"
          />
        </div>
        <div class="column is-narrow">
          <label class="label" v-if="i === 0">&nbsp;</label>
          <div class="buttons is-gap-0.5 is-flex-wrap-nowrap are-small" style="height: 40px">
            <button class="button is-dark" @click="add()">
              <span class="icon">
                <SvgIcon v-bind="{ name: 'add4.svg', type: 'white', size: 20 }"></SvgIcon>
              </span>
            </button>
            <button class="button is-dark" @click="remove(v, i)">
              <span class="icon">
                <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 20 }"></SvgIcon>
              </span>
            </button>
          </div>
        </div>
      </div>

      <div class="mt-5 buttons is-right">
        <button class="button" @click="emit('close')">{{ isVietnamese ? 'Hủy' : 'Cancel' }}</button>
        <button class="button is-primary" @click="update()">{{ isVietnamese ? 'Lưu lại' : 'Save' }}</button>
      </div>

      <Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
    </div>
  </template>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useNuxtApp } from "#app";
import InputPhone from "~/components/common/InputPhone";
import InputEmail from "~/components/common/InputEmail";
import SearchBox from "~/components/SearchBox";
import Datepicker from "~/components/datepicker/Datepicker";
import { useStore } from "~/stores/index";
import { isEqual, pick } from 'es-toolkit';

const emit = defineEmits(["close", "update", "modalevent"]);
const { $getdata, $patchapi, $insertapi, $deleteapi, $empty, $errPhone, $resetNull, $snackbar, $copy } = useNuxtApp();

const props = defineProps({
  pagename: String,
  row: Object,
  application: Object,
  customerType: Number,
});

const store = useStore();
const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");
const dataLang = ref(store.common);

const errors = ref({});
const record = ref({});
const individualData = ref({});
const organizationData = ref({});
const isLoaded = ref(false);
const isNewCustomer = ref(true);
const selectedCustomerType = ref(null);
const showmodal = ref();
const existedCustomer = ref(undefined);
const people = ref([]);
const localPeople = ref([]); // { id?: number; people: number; relation: number }[]

const isIndividual = computed(() => selectedCustomerType.value === 1);
const isOrganization = computed(() => selectedCustomerType.value === 2);

const filteredLegalTypes = computed(() => {
  if (!store.legaltype) return [];
  return isOrganization.value ? store.legaltype.filter(lt => lt.id === 4) : store.legaltype.filter(lt => lt.id !== 4);
});

const peopleAddon = { 
  component: "people/People",
  width: "65%",
  height: "500px", 
  title: store.lang === "en" ? "Related person" : "Người liên quan" 
};
const peopleviewAddon = { ...peopleAddon };

function selectCustomerType(type) {
  const typeNum = Number(type);
  selectedCustomerType.value = typeNum;
  record.value = { fullname: "", phone: "", email: "", country: 1, type: typeNum, legal_type: typeNum === 2 ? 4 : null, creator: store.login.id, updater: store.login.id };
  if (typeNum === 1) {
    individualData.value = { dob: null, sex: 1 };
    organizationData.value = {};
  } else {
    individualData.value = {};
    organizationData.value = { established_date: null };
  }
  people.value = [{}];
  isLoaded.value = true;
}

function findFieldName(code) {
  return dataLang.value.find(item => item.code === code) || { vi: code, en: code };
}

function showCustomer() {
  showmodal.value = { component: "customer/CustomerView", width: "60%", height: "600px", title: "Khách hàng", vbind: { row: existedCustomer.value } };
}

const selected = (f, v) => { record.value[f] = (v && typeof v === 'object') ? v.id : v; if (errors.value[f]) delete errors.value[f]; };
const selectedIndividual = (f, v) => { individualData.value[f] = (v && typeof v === 'object') ? v.id : v; };
const selectedOrg = (f, v) => { organizationData.value[f] = (v && typeof v === 'object') ? v.id : v; };
const selectPeople = (opt, _v, i) => { 
  localPeople.value[i].people = opt.id; 
};
const selectRelation = (opt, _v, i) => { localPeople.value[i].relation = opt ? opt.id : null; };
const add = () => localPeople.value.push({});
const remove = (_v, i) => {
  localPeople.value.splice(i, 1);
  if (localPeople.value.length === 0) localPeople.value = [{}];
};

watch(people, (val) => {
  localPeople.value = val.map(cp => pick(cp, ['id', 'people', 'relation']));
}, { deep: true })

function checkError() {
  errors.value = {};
  if ($empty(record.value.fullname)) errors.value.fullname = isVietnamese.value ? "Họ tên không được bỏ trống" : "Full name is required";
  if ($empty(record.value.phone)) {
    errors.value.phone = isVietnamese.value ? "Số điện thoại không được bỏ trống" : "Phone is required";
  } else {
    const text = $errPhone(record.value.phone);
    if (text) errors.value.phone = text;
  }
  if ($empty(record.value.legal_code)) errors.value.legal_code = isVietnamese.value ? "Mã số không được bỏ trống" : "Legal code is required";
  if ($empty(record.value.issued_date)) errors.value.issued_date = "Ngày cấp không được bỏ trống";

  return Object.keys(errors.value).length > 0;
}

async function update() {
  try {
    if (checkError()) return;

    if (isNewCustomer.value) {
      if (record.value.phone) {
        const phoneCheck = await $getdata("customer", { phone: record.value.phone.trim() }, undefined, true);
        if (phoneCheck) {
          existedCustomer.value = phoneCheck;
          errors.value.phone = isVietnamese.value ? "Số điện thoại đã tồn tại." : "Phone already exists.";
          return;
        }
      }
      if (record.value.email) {
        const emailCheck = await $getdata("customer", { email: record.value.email.trim() }, undefined, true);
        if (emailCheck) {
          existedCustomer.value = emailCheck;
          errors.value.email = isVietnamese.value ? "Email đã tồn tại." : "Email already exists.";
          return;
        }
      }
      if (record.value.legal_code) {
        const legalCheck = await $getdata("customer", { legal_code: record.value.legal_code }, undefined, true);
        if (legalCheck) { errors.value.legal_code = "Số CMND/CCCD đã tồn tại."; return; }
      }
    }

    let customerData = $resetNull({ ...record.value });
    customerData.type = selectedCustomerType.value;
    customerData.updater = store.login.id;
    customerData.update_time = new Date();

    let res = isNewCustomer.value ? await $insertapi("customer", customerData, undefined, false) : await $patchapi("customer", customerData, undefined, false);
    if (!res || res === "error") return;

    const customerId = res.id;
    let organizationId = organizationData.value?.id;

    if (isIndividual.value) {
      let indPayload = $resetNull({ ...individualData.value });
      indPayload.customer = customerId;
      if (individualData.value.id) await $patchapi("individual", { ...indPayload, id: individualData.value.id }, undefined, false);
      else await $insertapi("individual", indPayload, undefined, false);
    } else if (isOrganization.value) {
      let orgPayload = $resetNull({ ...organizationData.value });
      orgPayload.customer = customerId;
      let orgRes;
      if (organizationData.value.id) {
        orgRes = await $patchapi("organization", { ...orgPayload, id: organizationData.value.id }, undefined, false);
      } else {
        orgRes = await $insertapi("organization", orgPayload, undefined, false);
      }
      if (orgRes && orgRes.id) {
        organizationId = orgRes.id;
      }
    }

    // Người liên quan / Người đại diện
    const apiName = isIndividual.value ? "customerpeople" : "legalrep";
    let commonPayload = {};
    if (isIndividual.value) {
      commonPayload = { customer: customerId };
    }
    if (isOrganization.value && organizationId) {
      commonPayload = { organization: organizationId };
    }

    const validLocalPeople = localPeople.value.filter(lp => lp.people && lp.relation).map(lp => toRaw(lp));
    const peopleKeys = people.value.map(p => pick(p, ['id', 'people', 'relation']));

    // 1. check existing ids, if people or relation changes -> patch
    const existingLocalPeople = validLocalPeople.filter(cp => Boolean(cp.id));
    existingLocalPeople.forEach(lp => {
      const match = peopleKeys.find(p => isEqual(p, lp));
      const payload = { ...lp, ...commonPayload }
      
      if (!match) {
        $patchapi(apiName, payload);
      }
    });
   
    // 2. if localPeople has and people doesn't -> insert
    validLocalPeople.forEach(lp => {
      if (!lp.id) {
        const payload = { ...lp, ...commonPayload };
        $insertapi(apiName, payload);
      }
    });

    // 3. if people has and localPeople doesn't -> delete
    if (peopleKeys.length !== 0 && validLocalPeople.length !== 0) {
      peopleKeys.forEach(cp => {
        const match = validLocalPeople.find(lp => cp.id === lp.id);
        if (!match) {
          $deleteapi(apiName, cp.id);
        }
      });
    }

    // Ảnh
    if (record.value.image && record.value.image.length > 0) {
      await $insertapi("customerfile", record.value.image.map(v => ({ ref: customerId, file: v })), undefined, false);
    }

    const completeData = await $getdata("customer", { id: customerId }, undefined, true);
    
    $snackbar(`Khách hàng đã được ${isNewCustomer.value ? "khởi tạo" : "cập nhật"} thành công`, "Thành công");

    emit("modalevent", { name: "dataevent", data: completeData });
    emit("update", completeData);
    setTimeout(() => emit("close"), 100);
  } catch (e) { console.error(e); }
}

async function initData() {
  if (props.row && props.row.id) {
    isNewCustomer.value = false;
    selectedCustomerType.value = Number(props.row.type);
    record.value = { ...props.row };
    if (isIndividual.value) {
      const ind = await $getdata("individual", { customer: props.row.id }, undefined, true);
      individualData.value = ind || { dob: null, sex: 1 };
      const rows = await $getdata("customerpeople", { customer: props.row.id });
      people.value = rows.length > 0 ? rows : [{}];
    } else {
      const org = await $getdata("organization", { customer: props.row.id }, undefined, true);
      organizationData.value = org || { established_date: null };
      if (org && org.id) {
        const rows = await $getdata("legalrep", { organization: org.id });
        people.value = rows.length > 0 ? rows : [{}];
      } else {
        people.value = [{}];
      }
    }
    isLoaded.value = true;
  } else if (props.application && props.application.id) {
    const copyData = $copy(props.application);
    const type = props.customerType || copyData.type || 1;
    selectCustomerType(type);
    record.value = { ...record.value, ...copyData, id: undefined, code: undefined };
    individualData.value = { ...individualData.value, ...copyData };
  } else if (props.customerType) {
    selectCustomerType(props.customerType);
  }
}

onMounted(() => initData());
</script>