HAM!DREZA
135 lines
4.1 KiB
Vue
135 lines
4.1 KiB
Vue
<template>
|
|
<section class="flex flex-col gap-4">
|
|
<Panel :header="$t('ویرایش تخفیف')">
|
|
<div class="grid grid-cols-3 gap-7">
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full custom-input" v-model="date" />
|
|
<label>{{ $t("تاریخ شروع") }}</label>
|
|
</FloatLabel>
|
|
<date-picker
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
display-format="jYYYY-jMM-jDD HH:mm"
|
|
:timezone="true"
|
|
color="dimgray"
|
|
v-model="date"
|
|
simple
|
|
custom-input=".custom-input"
|
|
></date-picker>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full custom-input2" v-model="date2" />
|
|
<label>{{ $t("تاریخ پایان") }}</label>
|
|
</FloatLabel>
|
|
<date-picker
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
display-format="jYYYY-jMM-jDD HH:mm"
|
|
:timezone="true"
|
|
color="dimgray"
|
|
v-model="date2"
|
|
simple
|
|
custom-input=".custom-input2"
|
|
></date-picker>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="discount.code" />
|
|
<label>{{ $t("کد تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<Dropdown
|
|
v-model="noe"
|
|
@change="setType"
|
|
:options="['مبلغ', 'درصد']"
|
|
:optionLabel="levels"
|
|
:optionValue="levels"
|
|
class="w-full"
|
|
/>
|
|
<label>{{ $t("نوع تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
<div v-if="noe === 'مبلغ'" class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="discount.price" />
|
|
<label>{{ $t("مبلغ تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
|
|
<div v-if="noe === 'درصد'" class="flex flex-col gap-1">
|
|
<FloatLabel>
|
|
<InputText class="w-full" v-model="discount.percent" />
|
|
<label>{{ $t("درصد تخفیف") }}</label>
|
|
</FloatLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex pt-4 justify-end">
|
|
<Button
|
|
:label="$t('save')"
|
|
icon="pi pi-save"
|
|
severity="success"
|
|
:loading="saving"
|
|
@click="create(discount)"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useDiscountStore } from "@/stores/discounts";
|
|
import { ref, watchEffect, reactive } from "vue";
|
|
import moment from "moment-jalaali";
|
|
import { useRoute } from "vue-router";
|
|
const date = ref(null);
|
|
const date2 = ref(null);
|
|
const noe = ref("مبلغ");
|
|
const store = useDiscountStore();
|
|
const data = ref();
|
|
const setType = (val) => {
|
|
if (val.value === 'درصد') {
|
|
discount.discountType = 'percent'
|
|
}else{
|
|
discount.discountType = 'price'
|
|
}
|
|
}
|
|
const discount = reactive({
|
|
id: "",
|
|
startDate: "",
|
|
endDate: "",
|
|
code: "",
|
|
discountType: "",
|
|
price: "",
|
|
percent: 0,
|
|
allUsers: true,
|
|
});
|
|
const route = useRoute();
|
|
const create = async(val) => {
|
|
const posts = await store.update(val)
|
|
};
|
|
watchEffect(async () => {
|
|
data.value = await store.getDiscount(route.params.id);
|
|
console.log("this", data.value);
|
|
discount.id = data.value.id;
|
|
(discount.startDate = data.value.startDate),
|
|
(discount.endDate = data.value.endDate),
|
|
(discount.code = data.value.code),
|
|
(discount.discountType = data.value.discountType),
|
|
(discount.price = data.value.price),
|
|
(discount.percent = data.value.percent);
|
|
date.value = data.value.startDate;
|
|
date2.value = data.value.endDate;
|
|
if (data.value.discountType === "percent") {
|
|
noe.value = "درصد";
|
|
} else {
|
|
noe.value = "مبلغ";
|
|
}
|
|
});
|
|
</script> |