web/app/components/application/CommPayment.vue

<template>
  <div :id="docid">
    <div :id="docid1">
      <Caption v-bind="{ title: isVietnamese? 'Thanh toán' : 'Payment', type: 'has-text-warning' }"></Caption>
      <div class="columns is-multiline mx-0">
        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("loan_code")[lang] }}</label>
            <div class="control">
              <span class="hyperlink" @click="$copyToClipboard(record.code)">{{ record?.code || "/" }}</span>
            </div>
          </div>
        </div>

        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("name")[lang] }}</label>
            <div class="control">
              <span>{{ record?.fullname || "/" }}</span>
            </div>
          </div>
        </div>

        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("phone_number")[lang] }}</label>
            <div class="control">
              <span>{{ record?.phone || "/" }}</span>
            </div>
          </div>
        </div>

        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("modalcollaboratorcode")[lang] }}</label>
            <div class="control">
              <span>{{ record?.collaborator__code || "/" }}</span>
            </div>
          </div>
        </div>

        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ isVietnamese ? "Họ tên CTV" : "CTV name" }}</label>
            <div class="control">
              <span>{{ record?.collaborator__fullname || "/" }}</span>
            </div>
          </div>
        </div>

        <div class="column is-4 pb-1 px-0">
          <div class="field">
            <label class="label">{{ dataLang && findFieldName("commissionamount")[lang] }}</label>
            <div class="control">
              <span>{{ record?.commission ? $numtoString(record.commission) : "/" }}</span>
            </div>
          </div> 
        </div>

        <div class="column is-5 pb-1 px-0">
          <div class="field">
            <label class="label">{{ isVietnamese ? " Trạng thái" : "Status" }}</label>
            <div class="control">
              <SearchBox
                true
                v-bind="{
                  api: 'paymentstatus',
                  field: isVietnamese ? 'name' : 'en',
                  column: ['code'],
                  first: true,
                  optionid: record.payment_status ? record.payment_status : 1,
                }"
                @option="selected('payment_status', $event)"
                position="is-top-left"
              ></SearchBox>
            </div>
          </div>
        </div>

        
      </div>
    </div>

    <!-- <div class="mt-2 border-bottom"></div> -->
    <div class="buttons mt-5" id="ignore">
      <button class="button is-primary has-text-white mt-2" @click="handleUpdate()">
        {{ dataLang && findFieldName("update")[lang] }}
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useStore } from "@/stores/index";
import { useNuxtApp } from "#app";
const nuxtApp = useNuxtApp();

const {
  $updatepage,
  $getdata,
  $updateapi,
  $insertapi,
  $copyToClipboard,
  $empty,
  $snackbar,
  $numtoString,
  $formatNumber,
} = nuxtApp;
const store = useStore();
const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");
const dataLang = ref(store.common);
const emit = defineEmits(["close"]);

const props = defineProps({
  row: Object,
  api: String,
  pagename: String,
});
const record = ref(props.row);
const findFieldName = (code) => {
  let field = dataLang.value.find((v) => v.code === code);
  return field;
};

const selected = (fieldName, value) => {
  if (value) {
    record.value.payment_status = value.id;
    record.value.payment_status__code = value.code;
  }
};

const handleUpdate = async () => {
  try {
    await $updateapi(props.api, record.value);
    let ele = await $getdata(props.api, { id: record.value.id }, undefined, true);
    $updatepage(props.pagename, ele);
    $snackbar(isVietnamese.value ? "Cập nhật thành công" : "Update successful");
    emit("close");
  } catch (error) {
    console.error("Error updating data:", error);
  }
};

onMounted(async () => {
  record.value = await $getdata(props.api, { id: record.value.id }, undefined, true);
});
</script>