tehran_taj/apps/admin-panel/src/views/promotion/PromotionForm.vue

<template>
  <!--
    Shared implementation of legacy promotion_add_edit.vue and
    promotion_tak_add_edit.vue.

    Verified by diff: the two legacy files differ only in the card title and in
    whether the "مشتری" scope option is offered — the "tak" variant has that
    option and its whole customer block COMMENTED OUT. Both differences are
    parameterised here rather than duplicating ~400 lines.
  -->
  <a-spin :spinning="loading">
    <a-form layout="vertical" @submit.prevent="handleSubmit">
      <a-card :title="title" class="mb-base">
        <div class="grid-4 grid-4--tight">
          <a-form-item label="نوع تخفیف">
            <!-- legacy disables the type selector while editing -->
            <a-select v-model:value="form.type" :disabled="Boolean(id)" @change="changeType">
              <a-select-option :value="1">محصولات</a-select-option>
              <a-select-option :value="2">دسته بندی</a-select-option>
              <a-select-option v-if="allowCustomerScope" :value="3">مشتری</a-select-option>
              <a-select-option :value="4">برند</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="عنوان"
            :validate-status="err.title ? 'error' : ''"
            :help="err.title"
          >
            <a-input v-model:value="form.title" />
          </a-form-item>

          <!-- the target picker changes with the scope -->
          <a-form-item v-if="form.type === 1" label="محصول">
            <a-select
              v-model:value="form.product_id"
              show-search
              allow-clear
              :filter-option="filterOption"
              placeholder="انتخاب کنید"
            >
              <a-select-option v-for="p in products" :key="p.id" :value="p.id">
                {{ p.title }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-if="form.type === 2" label="دسته بندی">
            <a-select
              v-model:value="form.category_id"
              show-search
              allow-clear
              :filter-option="filterOption"
              placeholder="انتخاب کنید"
            >
              <a-select-option v-for="c in categories" :key="c.id" :value="c.id">
                {{ c.title }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-if="form.type === 3 && allowCustomerScope" label="مشتری">
            <a-select
              v-model:value="form.customer_id"
              show-search
              allow-clear
              :filter-option="filterOption"
              placeholder="انتخاب کنید"
            >
              <a-select-option v-for="c in customers" :key="c.id" :value="c.id">
                {{ c.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item v-if="form.type === 4" label="برند">
            <a-select
              v-model:value="form.brand_id"
              show-search
              allow-clear
              :filter-option="filterOption"
              placeholder="انتخاب کنید"
            >
              <a-select-option v-for="b in brands" :key="b.id" :value="b.id">
                {{ b.title }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="درصد تخفیف"
            :validate-status="err.discount_percent ? 'error' : ''"
            :help="err.discount_percent"
          >
            <a-input-number
              v-model:value="form.discount_percent"
              class="w-full"
              :min="0"
              :max="100"
            />
          </a-form-item>

          <a-form-item label="تاریخ شروع">
            <a-date-picker v-model:value="form.start" class="w-full" value-format="YYYY-MM-DD" />
          </a-form-item>

          <a-form-item label="تاریخ پایان">
            <a-date-picker v-model:value="form.end" class="w-full" value-format="YYYY-MM-DD" />
          </a-form-item>

          <a-form-item label="قابلیت استفاده">
            <a-radio-group v-model:value="form.use_only">
              <a-radio :value="1"> فقط یکبار</a-radio>
              <a-radio :value="2">تا  تاریخ پایان</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="وضعیت تخفیف">
            <a-switch v-model:checked="form.is_active" />
          </a-form-item>
        </div>

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

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

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

const props = withDefaults(
  defineProps<{
    title?: string;
    /**
     * The "tak" variant has the customer scope commented out in legacy, so it
     * is not offered there. Preserved behind this flag.
     */
    allowCustomerScope?: boolean;
  }>(),
  { title: 'تعریف تخفیف', allowCustomerScope: true },
);

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

const id = route.params.id as string | undefined;
const loading = ref(false);

const products = ref<{ id: string; title: string }[]>([]);
const categories = ref<{ id: string; title: string }[]>([]);
const customers = ref<{ id: string; name: string }[]>([]);
const brands = ref<{ id: string; title: string }[]>([]);

const form = reactive<Record<string, any>>({
  type: 1, // legacy initialValue
  title: '',
  description: '',
  discount_percent: undefined,
  use_only: 1, // legacy initialValue
  is_active: true,
  start: undefined,
  end: undefined,
  product_id: undefined,
  category_id: undefined,
  customer_id: undefined,
  brand_id: undefined,
});

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

/** legacy changeType(): clears the previously picked target when scope changes */
function changeType() {
  form.product_id = undefined;
  form.category_id = undefined;
  form.customer_id = undefined;
  form.brand_id = undefined;
}

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.title) err.title = 'لطفا مقدار را وارد کنید';
  if (form.discount_percent === undefined || form.discount_percent === null) {
    err.discount_percent = 'لطفا مقدار را وارد کنید';
  }
  return Object.keys(err).length === 0;
}

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

onMounted(async () => {
  try {
    const [p, c, b] = await Promise.all([
      api.post('products', { page: 1, limit: 500 }),
      api.post('category', { page: 1, limit: 500 }),
      api.get('brand'),
    ]);
    products.value = p.data.rows ?? [];
    categories.value = c.data.rows ?? [];
    brands.value = b.data ?? [];
  } catch (e) {
    console.log(e);
  }

  if (props.allowCustomerScope) {
    try {
      const { data } = await api.get('query/customer');
      customers.value = data;
    } catch (e) {
      console.log(e);
    }
  }

  if (id) {
    try {
      const { data } = await api.get(`admin/promotions/${id}`);
      Object.assign(form, {
        type: data.type ?? 1,
        title: data.title ?? '',
        description: data.description ?? '',
        discount_percent: data.discount_percent !== null ? Number(data.discount_percent) : undefined,
        use_only: data.use_only ?? 1,
        is_active: data.is_active ?? true,
        start: data.start ? String(data.start).slice(0, 10) : undefined,
        end: data.end ? String(data.end).slice(0, 10) : undefined,
        product_id: data.product_id ?? undefined,
        category_id: data.category_id ?? undefined,
        customer_id: data.customer_id ?? undefined,
        brand_id: data.brand_id ?? undefined,
      });
    } catch (e) {
      console.log(e);
    }
  }
});
</script>

<style scoped>
/* .grid-4 base now comes from the global utilities.less (dedup); this form's
   tighter 0.5rem gap (a real, deliberate visual difference, not a drift) is
   kept as a small modifier instead of redeclaring the whole class. */
.grid-4--tight {
  gap: 0.5rem;
}
</style>