Initial commit

app/components/application/CommPayment.vue

@@ -0,0 +1,148 @@
+<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>