feat: complete admin panel and backend admin api migration
This commit is contained in:
s.esmaeili
@@ -0,0 +1,273 @@
|
||||
<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">
|
||||
<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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user