web/app/components/transaction/ChangeCustomerModal.vue

<script setup>
import { useStore } from "~/stores/index";
import { useAdvancedWorkflow } from "~/composables/useAdvancedWorkflow";
import Contract from "~/components/application/Contract.vue";
import Datepicker from "~/components/datepicker/Datepicker.vue";
import dayjs from 'dayjs';

const props = defineProps({
  transactionId: Number,
});

const emit = defineEmits(['close', 'modalevent']);

const { $getdata, $snackbar } = useNuxtApp();
const store = useStore();
const { updateTransactionCustomer, isLoading } = useAdvancedWorkflow();

const transaction = ref(null);
const currentCustomer = ref(null);
const newCustomer = ref(null);
const workflowResult = ref(null);
const showContract = ref(false);
const contractId = ref(null);

// Contract Date
const initialContractDate = dayjs().format('YYYY-MM-DD');
const contractDate = ref(initialContractDate);
const dateRecord = ref({ contractDate: initialContractDate });

const customerViewAddon = {
  component: "customer/CustomerView",
  width: "70%",
  height: "600px",
  title: "Chi tiết khách hàng"
};

const customerViewAdd = {
  component: "customer/CustomerInfo2",
  width: "60%",
  height: "auto",
  title: "Chỉnh sửa khách hàng",
};

onMounted(async () => {
  if (props.transactionId) {
    transaction.value = await $getdata('transaction', { id: props.transactionId }, undefined, true);
    if (transaction.value && transaction.value.customer) {
      currentCustomer.value = await $getdata('customer', { id: transaction.value.customer }, undefined, true);
    }
  }
});

function updateContractDate(newDate) {
  contractDate.value = newDate;
  dateRecord.value.contractDate = newDate;
}

function updateTransactionCustomerDisplay(result) {
  if (result?.success) {
    const contract = result?.contract;
    if (contract && contract.id) {
      $snackbar(`Đổi khách hàng thành công. Hợp đồng mới được tạo với ID: ${contract.id}`, { type: 'is-success' });
      contractId.value = contract.id;
      showContract.value = true;
    }
  }
}

async function confirmChangeCustomer() {
  if (!newCustomer.value) {
    $snackbar('Vui lòng chọn khách hàng mới.', { type: 'is-warning' });
    return;
  }

  workflowResult.value = null;

  try {
    const result = await updateTransactionCustomer(
      props.transactionId, 
      newCustomer.value.id,
      contractDate.value
    );
    workflowResult.value = result;
    updateTransactionCustomerDisplay(result);
  } catch (error) {
    console.error('Workflow execution error:', error);
    $snackbar('Có lỗi xảy ra khi thực thi workflow.', { type: 'is-danger' });
  }
}
</script>

<template>
  <div v-if="!showContract">
    <div v-if="transaction && currentCustomer">
      <h3 class="fsb-18 mb-3">Mã giao dịch: {{ transaction.code }}</h3>

      <div class="mb-4">
        <h4 class="is-size-6 has-text-weight-bold mb-2">Khách hàng hiện tại</h4>
        <div class="is-flex is-flex-wrap-wrap is-gap-4">
          <div>
            <p class="has-text-grey is-size-7">Mã</p>
            <p class="is-size-6">{{ currentCustomer.code }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Tên</p>
            <p class="is-size-6">{{ currentCustomer.name || currentCustomer.fullname }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Loại</p>
            <p class="is-size-6"><span class="tag" :class="currentCustomer.type === 1 ? 'is-info' : 'is-warning'">{{
              currentCustomer.type === 1 ? 'Cá nhân' : 'Tổ chức' }}</span></p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Điện thoại</p>
            <p class="is-size-6">{{ currentCustomer.phone }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Email</p>
            <p class="is-size-6">{{ currentCustomer.email }}</p>
          </div>
        </div>
      </div>

      <div class="field mb-3">
        <label class="label">Chọn khách hàng mới<b class="ml-1 has-text-danger">*</b></label>
        <div class="control">
          <SearchBox v-bind="{
            api: 'customer',
            field: 'label',
            searchfield: ['code', 'fullname', 'phone', 'legal_code'],
            column: ['code', 'fullname', 'phone', 'legal_code'],
            first: true,
            viewaddon: customerViewAddon,
            addon: customerViewAdd,
            placeholder: 'Tìm khách hàng theo mã, tên, số điện thoại hoặc CMND'
          }" @option="(customer) => { newCustomer = customer }" />
        </div>
      </div>

      <div v-if="newCustomer" class="mb-4">
        <h4 class="is-size-6 has-text-weight-bold mb-2">Khách hàng mới được chọn</h4>
        <div class="is-flex is-flex-wrap-wrap is-gap-4">
          <div>
            <p class="has-text-grey is-size-7">Mã</p>
            <p class="is-size-6">{{ newCustomer.code }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Tên</p>
            <p class="is-size-6">{{ newCustomer.name || newCustomer.fullname }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Loại</p>
            <p class="is-size-6"><span class="tag" :class="newCustomer.type === 1 ? 'is-info' : 'is-warning'">{{
              newCustomer.type === 1 ? 'Cá nhân' : 'Tổ chức' }}</span></p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Điện thoại</p>
            <p class="is-size-6">{{ newCustomer.phone }}</p>
          </div>
          <div>
            <p class="has-text-grey is-size-7">Email</p>
            <p class="is-size-6">{{ newCustomer.email }}</p>
          </div>
        </div>
      </div>

      <div class="field mb-4">
        <label class="label">Ngày ký hợp đồng mới<b class="ml-1 has-text-danger">*</b></label>
        <div class="control" style="max-width: 200px;">
          <Datepicker 
            :record="dateRecord" 
            attr="contractDate" 
            @date="updateContractDate" 
            position="is-top-left" 
          />
        </div>
      </div>

      <div class="is-flex is-justify-content-flex-end is-gap-2">
        <button class="button" @click="$emit('close')">Hủy</button>
        <button class="button is-primary" :disabled="!newCustomer" :class="{ 'is-loading': isLoading }"
          @click="confirmChangeCustomer">
          Xác nhận
        </button>
      </div>

    </div>
    <div v-else class="is-flex is-justify-content-center is-align-items-center" style="min-height: 200px;">
      <div class="loader"></div>
    </div>
  </div>
  <div v-else>
    <Contract :contractId="contractId" />
  </div>
</template>