tehran_taj/apps/admin-panel/src/views/finical/addFinDoc.vue

<template>
  <!--
    Ported from legacy henza_admin/src/views/finical/addFinDoc.vue — filing a
    financial document (a customer repayment). Serves both create and edit.

    The form's defining behaviour, preserved: which fields appear depends on the
    document type.
      1 آب شده -> weight, karat, lab, hallmark + the normalized final weight
      2 حواله  -> weight + destination
      3 چک     -> cheque amount, account holder, bank
      4 پولی   -> Rial amount + quoted price per gram, with a live conversion
  -->
  <a-spin :spinning="loading">
    <a-form layout="vertical" @submit.prevent="handleSubmit">
      <a-card title="ثبت سند مالی" class="mb-base">
        <div class="grid-3">
          <a-form-item label="نوع سند">
            <a-select v-model:value="form.type">
              <a-select-option :value="2">حواله</a-select-option>
              <a-select-option :value="1">آب شده</a-select-option>
              <a-select-option :value="4">پولی</a-select-option>
              <a-select-option :value="3">چک</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="مشتری"
            :validate-status="err.customer_id ? 'error' : ''"
            :help="err.customer_id"
          >
            <a-select
              v-model:value="form.customer_id"
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              placeholder="انتخاب کنید"
            >
              <a-select-option v-for="c in customers" :key="c.id" :value="c.id">
                {{ `${c.name} - ${c.mobile}` }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <!-- 1 آب شده -->
        <div v-if="form.type == 1" class="grid-3">
          <a-form-item label="وزن (گرم)">
            <a-input-number v-model:value="form.original_value" class="w-full" :step="0.001" />
          </a-form-item>
          <a-form-item label="عیار">
            <a-input-number v-model:value="form.ayar" class="w-full" />
          </a-form-item>
          <a-form-item label="نام آزمایشگاه">
            <a-input v-model:value="form.lab" />
          </a-form-item>
          <a-form-item label="انگ">
            <a-input v-model:value="form.ang" />
          </a-form-item>
          <a-form-item label="وزن نهایی اعمال شده">
            <a-input :value="meltedFinalWeight" disabled />
          </a-form-item>
        </div>

        <!-- 2 حواله -->
        <div v-if="form.type == 2" class="grid-3">
          <a-form-item label="وزن (گرم)">
            <a-input-number v-model:value="form.value" class="w-full" :step="0.001" />
          </a-form-item>
          <a-form-item label="حواله به">
            <a-input v-model:value="form.to" />
          </a-form-item>
        </div>

        <!-- 3 چک -->
        <div v-if="form.type == 3" class="grid-3">
          <a-form-item label="مبلغ چک">
            <a-input-number v-model:value="form.price" class="w-full" />
          </a-form-item>
          <a-form-item label="وزن (گرم)">
            <a-input-number v-model:value="form.value" class="w-full" :step="0.001" />
          </a-form-item>
          <a-form-item label="نام صاحب حساب">
            <a-input v-model:value="form.account_name" />
          </a-form-item>
          <a-form-item label="نام بانک">
            <a-input v-model:value="form.bank_name" />
          </a-form-item>
        </div>

        <!-- 4 پولی -->
        <div v-if="form.type == 4" class="grid-3">
          <a-form-item label="میزان پول">
            <a-input-number v-model:value="form.price" class="w-full" />
          </a-form-item>
          <a-form-item label="مظنه">
            <a-input-number v-model:value="form.price_per_gram" class="w-full" />
          </a-form-item>
          <a-form-item v-if="form.price_per_gram" label="وزن نهایی اعمال شده">
            <a-input :value="cashFinalWeight" disabled />
          </a-form-item>
        </div>

        <a-form-item label="توضیحات">
          <a-textarea v-model:value="form.note" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>

        <a-button type="primary" @click="handleSubmit">ثبت اطلاعات</a-button>
      </a-card>
    </a-form>
  </a-spin>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import api from '../../api/client';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string | undefined;
const loading = ref(false);
const customers = ref<{ id: string; name: string; mobile: string }[]>([]);

const form = reactive<Record<string, any>>({
  type: 2, // legacy initialValue
  customer_id: undefined,
  value: undefined,
  original_value: undefined,
  ayar: undefined,
  lab: '',
  ang: '',
  to: '',
  price: undefined,
  price_per_gram: undefined,
  account_name: '',
  bank_name: '',
  note: '',
});

const err = reactive<Record<string, string>>({});

/**
 * Live previews of the same conversions the server performs, so the operator
 * sees the figure before filing. The SERVER is authoritative — these are for
 * display only and are not sent.
 *
 * legacy: value = original_value * ayar / 750
 */
const meltedFinalWeight = computed(() => {
  const raw = Number(form.original_value ?? 0);
  const karat = Number(form.ayar ?? 0);
  if (!raw || !karat) return '';
  return ((raw * karat) / 750).toFixed(4);
});

/** legacy: value = price / (price_per_gram / 4.331802) */
const GRAMS_PER_MESGHAL = 4.331802;
const cashFinalWeight = computed(() => {
  const price = Number(form.price ?? 0);
  const perGram = Number(form.price_per_gram ?? 0);
  if (!price || !perGram) return '';
  return (price / (perGram / GRAMS_PER_MESGHAL)).toFixed(4);
});

function filterOption(input: string, option: any) {
  return String(option?.children?.[0]?.children ?? '')
    .toLowerCase()
    .includes(input.toLowerCase());
}

function validate(): boolean {
  Object.keys(err).forEach((k) => delete err[k]);
  if (!form.customer_id) err.customer_id = 'مقدار را وارد نمایید';
  return Object.keys(err).length === 0;
}

async function handleSubmit() {
  if (!validate()) return;
  try {
    loading.value = true;
    if (id) {
      await api.put(`cash/${id}`, form);
    } else {
      await api.post('cash', form);
    }
    message.info('اطلاعات با موفقیت به ثبت رسید.');
    router.push('/finical/list');
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  try {
    const { data } = await api.get('query/customer');
    customers.value = data;
  } catch (e) {
    console.log(e);
  }

  if (id) {
    try {
      const { data } = await api.get(`cash/${id}`);
      Object.assign(form, {
        type: data.type ?? 2,
        customer_id: data.customer?.id,
        value: data.value !== null ? Number(data.value) : undefined,
        original_value: data.original_value !== null ? Number(data.original_value) : undefined,
        ayar: data.ayar ?? undefined,
        lab: data.lab ?? '',
        ang: data.ang ?? '',
        to: data.to ?? '',
        price: data.price !== null ? Number(data.price) : undefined,
        price_per_gram:
          data.price_per_gram !== null ? Number(data.price_per_gram) : undefined,
        account_name: data.account_name ?? '',
        bank_name: data.bank_name ?? '',
        note: data.note ?? '',
      });
    } catch (e) {
      console.log(e);
    }
  }
});
</script>

<style scoped>
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
</style>