141 lines
3.8 KiB
Vue
141 lines
3.8 KiB
Vue
<template>
|
|
<div class="dinner physical-receive-page">
|
|
<div class="dinner__container">
|
|
<DesktopPageTopbar title="درخواست جدید" show-back />
|
|
|
|
<div class="dinner-surface p-5 space-y-4">
|
|
<div class="physical-new-request__picker-row">
|
|
<div class="physical-new-request__select">
|
|
<ProductPicker
|
|
v-model:value="selectedProduct"
|
|
:items="items"
|
|
placeholder="لطفاً محصول را انتخاب کنید"
|
|
sheet-title="انتخاب محصول تحویل فیزیکی"
|
|
allow-clear
|
|
/>
|
|
</div>
|
|
<BasicButton
|
|
class="physical-new-request__add-btn"
|
|
:disabled-b="selectedProduct == null"
|
|
type="primary"
|
|
@click="handleAdd"
|
|
>
|
|
افزودن
|
|
</BasicButton>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="val in selectedProducts"
|
|
:key="val.product.id"
|
|
class="rounded-lg p-2 bg-gray-100"
|
|
>
|
|
<PhysicalReceiveCartRow :item="val" @remove="handleRemove" />
|
|
</div>
|
|
<div v-if="selectedProducts.length === 0" class="text-center text-gray-500 py-8">
|
|
محصولی به سبد اضافه نشده است.
|
|
</div>
|
|
</div>
|
|
|
|
<BasicButton
|
|
:disabled-b="selectedProducts.length == 0"
|
|
class="w-full"
|
|
type="primary"
|
|
@click="handelFirstSubmit()"
|
|
>
|
|
ادامه و انتخاب آدرس
|
|
</BasicButton>
|
|
</div>
|
|
</div>
|
|
|
|
<BasicModal
|
|
v-model:visible="showAddress"
|
|
title="انتخاب آدرس"
|
|
width="520px"
|
|
custom-footer
|
|
>
|
|
<PhysicalReceiveAddressPicker
|
|
v-model:selected-address-id="selectedAddressID"
|
|
:addresses="address"
|
|
hide-title
|
|
@add-address="addAddressVisible = true; showAddress = false"
|
|
@submit="handelsubmit"
|
|
/>
|
|
<template #footer>
|
|
<div></div>
|
|
</template>
|
|
</BasicModal>
|
|
|
|
<BasicModal
|
|
v-model:visible="addAddressVisible"
|
|
title="افزودن آدرس"
|
|
width="520px"
|
|
custom-footer
|
|
>
|
|
<New_EditAddress v-if="addAddressVisible" :visible="addAddressVisible" @onOk="handleAddress" />
|
|
<template #footer>
|
|
<div></div>
|
|
</template>
|
|
</BasicModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import ProductPicker from '@/components/BasicPacks/ProductPicker.vue'
|
|
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
|
|
import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
|
|
import New_EditAddress from '@/views/base/address/components/New_EditAddress.vue'
|
|
import PhysicalReceiveCartRow from '../components/PhysicalReceiveCartRow.vue'
|
|
import PhysicalReceiveAddressPicker from '../components/PhysicalReceiveAddressPicker.vue'
|
|
import { useNewPhysicalRequestContext } from '../composables/useNewPhysicalRequestPage'
|
|
|
|
const {
|
|
items,
|
|
selectedProduct,
|
|
selectedProducts,
|
|
address,
|
|
selectedAddressID,
|
|
showAddress,
|
|
addAddressVisible,
|
|
handleAdd,
|
|
handleRemove,
|
|
handelFirstSubmit,
|
|
handelsubmit,
|
|
handleAddress,
|
|
} = useNewPhysicalRequestContext()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.physical-new-request__picker-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.physical-new-request__select {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.physical-new-request__select :deep(.ant-select) {
|
|
width: 100%;
|
|
}
|
|
|
|
.physical-new-request__select :deep(.ant-select-selector) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.physical-new-request__select :deep(.ant-select-selection-item),
|
|
.physical-new-request__select :deep(.ant-select-selection-placeholder) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.physical-new-request__add-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|