feat: complete admin panel and backend admin api migration
This commit is contained in:
s.esmaeili
@@ -0,0 +1,19 @@
|
||||
// Ported from legacy henza_admin/src/views/invoice/AddInvoice.js — the product
|
||||
// picker grid shown at the top of the invoice form.
|
||||
import XTbl, { Xtc } from '../../components/x-table/model';
|
||||
|
||||
export function buildInvoiceProductModel(): XTbl {
|
||||
const tbl = new XTbl('admin/products/list', 'لیست محصولات');
|
||||
tbl.add(new Xtc('id', 'کد').filterNumber());
|
||||
tbl.add(new Xtc('ProductImage', 'تصویر محصول').renderSlot('image').noSort());
|
||||
tbl.add(new Xtc('title', 'نام محصول').filterText());
|
||||
tbl.add(new Xtc('min_gram', 'وزن').filterNumber().noSort());
|
||||
tbl.add(new Xtc('brand.title', 'برند').filterText());
|
||||
tbl.add(new Xtc('category.collection.title', 'دسته بندی').filterText());
|
||||
tbl.add(new Xtc('product_code', 'کد محصول').filterText());
|
||||
tbl.add(new Xtc('max_gram', 'حداکثر وزن').filterNumber().hidden().noSort());
|
||||
tbl.add(new Xtc('op', 'عملیات').noSort().renderSlot('op'));
|
||||
return tbl;
|
||||
}
|
||||
|
||||
export default buildInvoiceProductModel;
|
||||
@@ -0,0 +1,195 @@
|
||||
<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.
|
||||
|
||||
Pick products from the grid, choose the receiving branch, submit. Legacy
|
||||
posts `{ branch_id, products: [productId...] }`.
|
||||
-->
|
||||
<a-spin :spinning="loading">
|
||||
<a-card title="لیست محصولات">
|
||||
<XTable ref="tblProducts" :model="productCols">
|
||||
<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">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="items"
|
||||
bordered
|
||||
:pagination="false"
|
||||
row-key="pid"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'delete'">
|
||||
<CloseOutlined 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" :disabled="items.length < 1" @click="handleSubmit">
|
||||
ثبت تغییرات
|
||||
</a-button>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||
import XTable from '../../components/x-table/XTable.vue';
|
||||
import { buildInvoiceProductModel } from './AddInvoice';
|
||||
import { useInvoiceCartStore } from '../../stores/invoiceCart';
|
||||
import api from '../../api/client';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const cart = useInvoiceCartStore();
|
||||
|
||||
const 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();
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/invoice/EditInvoice.vue.
|
||||
|
||||
Legacy ships this as a 333-line near-copy of AddInvoice (the diff is the
|
||||
extra GET that loads the existing allocation). Here AddInvoice reads the :id
|
||||
route param and performs that load itself, so this is a thin wrapper.
|
||||
-->
|
||||
<AddInvoice />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AddInvoice from './AddInvoice.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
// Ported from legacy henza_admin/src/views/invoice/ListInvoice.js
|
||||
import XTbl, { Xtc } from '../../components/x-table/model';
|
||||
|
||||
export function buildInvoiceListModel(): XTbl {
|
||||
const tbl = new XTbl('admin/invoices/list', 'لیست فاکتورها');
|
||||
// legacy keeps a commented-out duplicate of this column above it — not revived
|
||||
tbl.add(new Xtc('id', 'ردیف').filterNumber());
|
||||
tbl.add(new Xtc('name', 'نام مشتری').filterKey('branch.name').filterText());
|
||||
tbl.add(new Xtc('sum_weight', 'جمع کل سفارش').filterNumber().noSort());
|
||||
tbl.add(new Xtc('count_item', 'تعداد آیتم ها').filterNumber().noSort());
|
||||
tbl.add(new Xtc('caj', 'تاریخ ثبت').filterKey('createdAt').filterDate().noSort());
|
||||
tbl.add(new Xtc('allocator_user.name', 'ثبت کننده').renderSlot('user').noSort());
|
||||
tbl.add(new Xtc('note', 'توضیحات').filterText().noSort());
|
||||
tbl.add(new Xtc('op', 'عملیات').noSort().renderSlot('actions'));
|
||||
return tbl;
|
||||
}
|
||||
|
||||
export default buildInvoiceListModel;
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/invoice/ListInvoice.vue — the
|
||||
branch-allocation grid.
|
||||
-->
|
||||
<div id="page-user-list">
|
||||
<a-card title="لیست فاکتورها">
|
||||
<XTable ref="tbl" :model="model">
|
||||
<template #user="{ record }">
|
||||
{{ record.allocator_user?.name ?? '-' }}
|
||||
</template>
|
||||
|
||||
<template #actions="{ record }">
|
||||
<div class="flex gap-2">
|
||||
<a-tooltip title="مشاهده">
|
||||
<EyeOutlined class="cursor-pointer mx-1 text-success" @click="view(record)" />
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip title="ویرایش">
|
||||
<EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip title="حذف">
|
||||
<a-popconfirm
|
||||
placement="top"
|
||||
ok-text="بله"
|
||||
cancel-text="خیر"
|
||||
@confirm="confirmDelete(record.id)"
|
||||
>
|
||||
<template #title><p>آیا مطمئن به حذف فاکتور مورد نظر هستید ؟</p></template>
|
||||
<DeleteOutlined class="cursor-pointer mx-1 text-danger" />
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</XTable>
|
||||
|
||||
<a-modal v-model:open="visible" title="مشاهده فاکتور" width="70%">
|
||||
<div v-if="tempRow">
|
||||
<a-descriptions bordered size="small" :column="2">
|
||||
<a-descriptions-item label="شعبه">{{ tempRow.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="ثبت کننده">
|
||||
{{ tempRow.allocator_user?.name ?? '-' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="تاریخ ثبت">{{ jdate(tempRow.caj) }}</a-descriptions-item>
|
||||
<a-descriptions-item label="تعداد آیتم">{{ tempRow.count_item }}</a-descriptions-item>
|
||||
<a-descriptions-item label="جمع وزن">{{ tempRow.sum_weight }}</a-descriptions-item>
|
||||
<a-descriptions-item label="توضیحات">{{ tempRow.note ?? '-' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-table
|
||||
class="mt-4"
|
||||
size="small"
|
||||
:data-source="tempRow.products"
|
||||
:columns="productColumns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
/>
|
||||
</div>
|
||||
<a-empty v-else />
|
||||
|
||||
<template #footer>
|
||||
<a-button @click="visible = false">بستن</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons-vue';
|
||||
import XTable from '../../components/x-table/XTable.vue';
|
||||
import { buildInvoiceListModel } from './ListInvoice';
|
||||
import { jdate } from '../../utils/filters';
|
||||
import api from '../../api/client';
|
||||
|
||||
const router = useRouter();
|
||||
const model = buildInvoiceListModel();
|
||||
const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
|
||||
const visible = ref(false);
|
||||
const tempRow = ref<Record<string, any> | undefined>(undefined);
|
||||
|
||||
const productColumns = [
|
||||
{ title: 'کد محصول', dataIndex: 'product_code' },
|
||||
{ title: 'نام محصول', dataIndex: 'title' },
|
||||
{ title: 'وزن', dataIndex: 'grams' },
|
||||
];
|
||||
|
||||
async function view(record: Record<string, any>) {
|
||||
const { data } = await api.get(`branch/product/${record.id}`);
|
||||
tempRow.value = data;
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
function toEdit(id: string) {
|
||||
router.push(`/invoice/edit/${id}`);
|
||||
}
|
||||
|
||||
async function confirmDelete(id: string) {
|
||||
try {
|
||||
await api.delete(`branch/product/${id}`);
|
||||
message.success('فاکتور حذف شد');
|
||||
tbl.value?.fetch();
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message ?? 'خطا در حذف فاکتور');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user