s.esmaeiliandCursor
7dd883ca30
Drop @ant-design/icons-vue and wire list pages, nav, and forms through the shared icons map. Co-authored-by: Cursor <cursoragent@cursor.com>
288 lines
9.3 KiB
Vue
288 lines
9.3 KiB
Vue
<template>
|
|
<!--
|
|
Ported from legacy henza_admin/src/views/invoice/AddInvoice.vue — the branch
|
|
allocation ("فاکتور انتقال") form. Serves BOTH create and edit; EditInvoice
|
|
is a wrapper over it. Converted to a modal (BaseFormModal): the /invoice/add
|
|
and /invoice/edit/:id routes still exist and still render this component
|
|
directly as a route-based fallback, but ListInvoice.vue now opens it as a
|
|
modal via open/id props.
|
|
|
|
Pick products from the grid, choose the receiving branch, submit. Legacy
|
|
posts `{ branch_id, products: [productId...] }`. Kept at the widest modal
|
|
size (xl) since it embeds its own product-picker grid and a running cart
|
|
table.
|
|
-->
|
|
<BaseFormModal
|
|
v-if="asModal"
|
|
:open="Boolean(open)"
|
|
:id="id"
|
|
add-title="افزودن فاکتور"
|
|
edit-title="ویرایش فاکتور"
|
|
:loading="loading"
|
|
:submitting="loading"
|
|
width="xl"
|
|
ok-text="ثبت تغییرات"
|
|
@update:open="$emit('update:open', $event)"
|
|
@submit="handleSubmit"
|
|
>
|
|
<a-card title="لیست محصولات">
|
|
<XTable ref="tblProducts" :model="productCols" mobile-cards>
|
|
<template #image="{ record }">
|
|
<img
|
|
width="90px"
|
|
height="90px"
|
|
style="object-fit: scale-down"
|
|
:src="record.thumb && record.thumb.full ? record.thumb.full : noImage"
|
|
/>
|
|
</template>
|
|
|
|
<template #op="{ record }">
|
|
<a-button size="small" type="primary" @click="addToCart(record)">افزودن</a-button>
|
|
</template>
|
|
</XTable>
|
|
</a-card>
|
|
|
|
<a-card v-if="items.length > 0" title="ثبت سفارش" class="mt-5 table-scroll">
|
|
<a-table :columns="columns" :data-source="items" bordered :pagination="false" row-key="pid">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.dataIndex === 'delete'">
|
|
<Icon icon="vuesax-linear:close-circle" size="16" class="cursor-pointer" @click="cart.remove(record)" />
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'product'">
|
|
<div class="flex items-center">
|
|
<img :src="getImage(record.product)" width="50px" />
|
|
{{ record.product.title }}
|
|
</div>
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'weight'">
|
|
{{ record.product.min_gram ?? '-' }}
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<div class="grid-3 mt-4">
|
|
<a-form-item
|
|
label="نام شعبه"
|
|
:validate-status="err.branch_id ? 'error' : ''"
|
|
:help="err.branch_id"
|
|
>
|
|
<a-select
|
|
v-model:value="form.branch_id"
|
|
show-search
|
|
placeholder="انتخاب کنید"
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option v-for="b in branches" :key="b.id" :value="b.id">
|
|
{{ b.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="توضیحات">
|
|
<a-input v-model:value="form.note" />
|
|
</a-form-item>
|
|
</div>
|
|
</a-card>
|
|
</BaseFormModal>
|
|
|
|
<!-- route-based fallback for direct links to /invoice/add and /invoice/edit/:id -->
|
|
<a-spin v-else :spinning="loading">
|
|
<a-card title="لیست محصولات" class="page-card">
|
|
<XTable ref="tblProducts" :model="productCols" mobile-cards>
|
|
<template #image="{ record }">
|
|
<img
|
|
width="90px"
|
|
height="90px"
|
|
style="object-fit: scale-down"
|
|
:src="record.thumb && record.thumb.full ? record.thumb.full : noImage"
|
|
/>
|
|
</template>
|
|
|
|
<template #op="{ record }">
|
|
<a-button size="small" type="primary" @click="addToCart(record)">افزودن</a-button>
|
|
</template>
|
|
</XTable>
|
|
|
|
<a-card v-if="items.length > 0" title="ثبت سفارش" class="mt-5 table-scroll">
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="items"
|
|
bordered
|
|
:pagination="false"
|
|
row-key="pid"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.dataIndex === 'delete'">
|
|
<Icon icon="vuesax-linear:close-circle" size="16" class="cursor-pointer" @click="cart.remove(record)" />
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'product'">
|
|
<div class="flex items-center">
|
|
<img :src="getImage(record.product)" width="50px" />
|
|
{{ record.product.title }}
|
|
</div>
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'weight'">
|
|
{{ record.product.min_gram ?? '-' }}
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<a-form layout="vertical" class="mt-4" @submit.prevent="handleSubmit">
|
|
<div class="grid-3">
|
|
<a-form-item
|
|
label="نام شعبه"
|
|
:validate-status="err.branch_id ? 'error' : ''"
|
|
:help="err.branch_id"
|
|
>
|
|
<a-select
|
|
v-model:value="form.branch_id"
|
|
show-search
|
|
placeholder="انتخاب کنید"
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option v-for="b in branches" :key="b.id" :value="b.id">
|
|
{{ b.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="توضیحات">
|
|
<a-input v-model:value="form.note" />
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<a-button type="primary" class="form-submit" :disabled="items.length < 1" @click="handleSubmit">
|
|
ثبت تغییرات
|
|
</a-button>
|
|
</a-form>
|
|
</a-card>
|
|
</a-card>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Icon from '../../components/icon/Icon.vue';
|
|
import { computed, onMounted, reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { message } from 'ant-design-vue';
|
|
import BaseFormModal from '../../components/common/BaseFormModal.vue';
|
|
import XTable from '../../components/x-table/XTable.vue';
|
|
import { buildInvoiceProductModel } from './AddInvoice';
|
|
import { useInvoiceCartStore } from '../../stores/invoiceCart';
|
|
import api from '../../api/client';
|
|
|
|
const props = defineProps<{
|
|
open?: boolean;
|
|
id?: string;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
(e: 'update:open', value: boolean): void;
|
|
(e: 'success'): void;
|
|
}>();
|
|
|
|
const asModal = props.open !== undefined;
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const cart = useInvoiceCartStore();
|
|
|
|
const id = asModal ? props.id : (route.params.id as string | undefined);
|
|
const noImage = '/img/no-items.png';
|
|
const loading = ref(false);
|
|
const productCols = buildInvoiceProductModel();
|
|
const tblProducts = ref<{ fetch: () => Promise<void> } | null>(null);
|
|
const branches = ref<{ id: string; name: string }[]>([]);
|
|
|
|
const form = reactive<Record<string, any>>({ branch_id: undefined, note: '' });
|
|
const err = reactive<Record<string, string>>({});
|
|
|
|
const items = computed(() => cart.items);
|
|
|
|
const columns = [
|
|
{ title: 'حذف', dataIndex: 'delete', width: 60, align: 'center' },
|
|
{ title: 'کد محصول', dataIndex: 'pid', align: 'center', width: 120 },
|
|
{ title: 'محصول', dataIndex: 'product' },
|
|
{ title: 'وزن', dataIndex: 'weight', align: 'center' },
|
|
];
|
|
|
|
function getImage(product: Record<string, any>) {
|
|
return product?.thumb?.full ?? product?.ProductImage?.[0]?.image ?? noImage;
|
|
}
|
|
|
|
function addToCart(record: Record<string, any>) {
|
|
cart.add({ pid: record.id, qty: 1, product: record as Record<string, unknown> });
|
|
message.info('اضافه شد');
|
|
}
|
|
|
|
function filterOption(input: string, option: any) {
|
|
return String(option?.children?.[0]?.children ?? '').includes(input);
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
Object.keys(err).forEach((k) => delete err[k]);
|
|
if (!form.branch_id) {
|
|
err.branch_id = 'مقدار را وارد نمایید';
|
|
return;
|
|
}
|
|
try {
|
|
loading.value = true;
|
|
const products = items.value.map((x) => x.pid);
|
|
if (id) {
|
|
await api.put(`branch/product/${id}`, { ...form, products });
|
|
} else {
|
|
await api.post('branch/product', { ...form, products });
|
|
}
|
|
message.info('عملیات با موفقیت انجام شد');
|
|
cart.clear();
|
|
if (asModal) {
|
|
emit('success');
|
|
emit('update:open', false);
|
|
} else {
|
|
router.push('/invoice/list');
|
|
}
|
|
} catch (e: any) {
|
|
message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
cart.init();
|
|
try {
|
|
const { data } = await api.get('branch/list');
|
|
branches.value = data;
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
|
|
if (id) {
|
|
try {
|
|
const { data } = await api.get(`branch/product/${id}`);
|
|
form.branch_id = data.branch_id;
|
|
form.note = data.note ?? '';
|
|
// seed the basket with the allocation's current products
|
|
cart.setItems(
|
|
(data.products ?? []).map((p: any) => ({
|
|
pid: p.id,
|
|
qty: 1,
|
|
product: { id: p.id, title: p.title, min_gram: p.grams },
|
|
})),
|
|
);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* .grid-3 now comes from the global utilities.less (dedup) */
|
|
.mt-4 {
|
|
margin-top: 1rem;
|
|
}
|
|
.mt-5 {
|
|
margin-top: 1.25rem;
|
|
}
|
|
</style>
|