tehran_tala/apps/admin-panel/src/views/city/createCity.vue

<template>
  <!--
    Ported from legacy henza_admin/src/views/city/createCity.vue.
    Converted from a standalone page to a modal (BaseFormModal): the /city/create
    route still exists and still renders this component directly for a route-based
    fallback (a-form as a plain page), but cityList.vue now opens it as a modal via
    the `open`/`id` props instead of navigating.
  -->
  <BaseFormModal
    v-if="asModal"
    :open="Boolean(open)"
    :id="id"
    add-title="افزودن شهر"
    edit-title="افزودن شهر"
    :loading="loading"
    :submitting="loading"
    width="sm"
    @update:open="$emit('update:open', $event)"
    @submit="handleSubmit"
  >
    <div class="grid-2">
      <a-form-item label="نام شهر" :validate-status="err.title ? 'error' : ''" :help="err.title">
        <a-input v-model:value="form.title" />
      </a-form-item>
      <a-form-item label="والد" help="خالی = سرشاخه، مثل کشور">
        <CityTreeSelect v-model:value="form.parent" :cities="cities" parent-picker placeholder="والد را انتخاب کنید" />
      </a-form-item>
      <a-form-item label="درصد مشتری عمده">
        <a-input-number v-model:value="form.percent" class="w-full" :min="0" :max="100" :step="0.1" />
      </a-form-item>
      <a-form-item label="درصد کارشناس فروش">
        <a-input-number v-model:value="form.percent_aux" class="w-full" :min="0" :max="100" :step="0.1" />
      </a-form-item>
    </div>
  </BaseFormModal>

  <!-- route-based fallback for direct links to /city/create -->
  <a-spin v-else :spinning="loading">
    <a-form layout="vertical" @submit.prevent="handleSubmit">
      <a-card title="افزودن شهر" class="page-card">
        <div class="grid-2">
          <a-form-item label="نام شهر" :validate-status="err.title ? 'error' : ''" :help="err.title">
            <a-input v-model:value="form.title" />
          </a-form-item>
          <a-form-item label="والد" help="خالی = سرشاخه، مثل کشور">
            <CityTreeSelect v-model:value="form.parent" :cities="cities" parent-picker placeholder="والد را انتخاب کنید" />
          </a-form-item>
          <a-form-item label="درصد مشتری عمده">
            <a-input-number v-model:value="form.percent" class="w-full" :min="0" :max="100" :step="0.1" />
          </a-form-item>
          <a-form-item label="درصد کارشناس فروش">
            <a-input-number v-model:value="form.percent_aux" class="w-full" :min="0" :max="100" :step="0.1" />
          </a-form-item>
        </div>
        <a-button type="primary" class="form-submit" @click="handleSubmit">ثبت اطلاعات</a-button>
      </a-card>
    </a-form>
  </a-spin>
</template>

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

const props = defineProps<{
  /** Present -> rendered as a modal by the parent list page. */
  open?: boolean;
  id?: string;
}>();
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void;
  (e: 'success'): void;
}>();

// `asModal` is fixed at mount: the parent decides which way this component is
// used (modal vs the plain /city/create route) by passing `open` or not.
const asModal = props.open !== undefined;

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

const loading = ref(false);
const form = reactive<Record<string, any>>({ title: '', parent: undefined, percent: null, percent_aux: null });
const cities = ref<{ id: string; title: string; parent?: string | null }[]>([]);

async function loadCities() {
  try {
    const { data } = await api.post('cities/list');
    cities.value = data.rows ?? [];
  } catch (e) {
    console.log(e);
  }
}
// Fresh each time the modal opens, so a city added a moment ago can be a parent.
if (asModal) watch(() => props.open, (o) => o && loadCities(), { immediate: true });
else onMounted(loadCities);
const err = reactive<Record<string, string>>({});

async function handleSubmit() {
  Object.keys(err).forEach((k) => delete err[k]);
  if (!form.title) {
    err.title = 'لطفا مقدار را وارد کنید';
    return;
  }
  try {
    loading.value = true;
    await api.post('cities', { ...form, parent: form.parent ?? null });
    message.info('اطلاعات با موفقیت به ثبت رسید.');
    if (asModal) {
      // Keep the parent: cities are usually added several under the same one.
      Object.assign(form, { title: '', percent: null, percent_aux: null });
      emit('success');
      emit('update:open', false);
    } else {
      router.push('/city/list');
    }
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
  } finally {
    loading.value = false;
  }
}
</script>

<!-- .grid-2 now comes from the global utilities.less (dedup) -->