feat: complete admin panel and backend admin api migration
This commit is contained in:
s.esmaeili
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/AddBranches.vue.
|
||||
Serves BOTH create and edit — EditBranches.vue is a wrapper over it.
|
||||
|
||||
A branch's manager is an EXISTING admin picked from user/list. (The workshop
|
||||
form differs: it creates its supervisor inline — see AddWorkshop.vue.)
|
||||
-->
|
||||
<a-spin :spinning="loading">
|
||||
<a-form layout="vertical" @submit.prevent="handleSubmit">
|
||||
<a-card :title="id ? 'ویرایش شعبه' : 'افزودن شعبه'" class="mb-base">
|
||||
<div class="grid-2">
|
||||
<a-form-item label="نام شعبه" :validate-status="err.name ? 'error' : ''" :help="err.name">
|
||||
<a-input v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="تلفن شعبه">
|
||||
<a-input v-model:value="form.phone" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="مدیر">
|
||||
<a-select
|
||||
v-model:value="form.user_id"
|
||||
show-search
|
||||
allow-clear
|
||||
placeholder="انتخاب کنید"
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option v-for="u in adminUsers" :key="u.id" :value="u.id">
|
||||
{{ u.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="آدرس">
|
||||
<a-textarea v-model:value="form.address" :auto-size="{ minRows: 2, maxRows: 5 }" />
|
||||
</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 route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const id = route.params.id as string | undefined;
|
||||
const loading = ref(false);
|
||||
const adminUsers = ref<{ id: string; name: string }[]>([]);
|
||||
|
||||
const form = reactive<Record<string, any>>({
|
||||
name: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
user_id: undefined,
|
||||
});
|
||||
const err = reactive<Record<string, string>>({});
|
||||
|
||||
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.name) {
|
||||
err.name = 'لطفا مقدار را وارد کنید';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
loading.value = true;
|
||||
if (id) {
|
||||
await api.put(`branch/${id}`, form);
|
||||
} else {
|
||||
await api.post('branch', form);
|
||||
}
|
||||
message.info('اطلاعات با موفقیت به ثبت رسید.');
|
||||
router.push('/branch/list');
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const { data } = await api.get('user/list');
|
||||
adminUsers.value = data;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
if (id) {
|
||||
try {
|
||||
const { data } = await api.get(`branch/${id}`);
|
||||
Object.assign(form, {
|
||||
name: data.name ?? '',
|
||||
phone: data.phone ?? '',
|
||||
address: data.address ?? '',
|
||||
user_id: data.user_id ?? undefined,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<!-- Ported from legacy views/branch/EditBranches.vue. AddBranches reads the
|
||||
:id route param to switch between create and edit. -->
|
||||
<AddBranches />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AddBranches from './AddBranches.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!--
|
||||
Shared implementation of legacy ListBranches.vue and ListWorkshop.vue.
|
||||
Verified by diff: the two files differ by 14 lines — the card title, the
|
||||
model import, and the edit route. Parameterised rather than duplicated.
|
||||
|
||||
Legacy quirks preserved:
|
||||
- the delete action is COMMENTED OUT in both files and stays absent
|
||||
- the status tooltip is labelled "وضعیت" and toggles on click
|
||||
- legacy binds `slot-scope="text,record"` then reads `text.record.id`,
|
||||
i.e. the row arrives as the FIRST argument; the Vue 3 slot gives us
|
||||
`record` directly, which is the same row.
|
||||
-->
|
||||
<a-card :title="title">
|
||||
<XTable ref="tbl" :model="model">
|
||||
<template #actions="{ record }">
|
||||
<div class="flex gap-2">
|
||||
<a-tooltip title="ویرایش">
|
||||
<EditOutlined class="cursor-pointer mx-1 text-primary" @click="toEdit(record.id)" />
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip title="وضعیت">
|
||||
<CheckOutlined
|
||||
v-if="record.is_active"
|
||||
class="cursor-pointer mx-1 text-success"
|
||||
@click="setOffer(record.id)"
|
||||
/>
|
||||
<CloseOutlined v-else class="cursor-pointer mx-1 text-danger" @click="setOffer(record.id)" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</XTable>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons-vue';
|
||||
import XTable from '../../components/x-table/XTable.vue';
|
||||
import api from '../../api/client';
|
||||
import type { XTbl } from '../../components/x-table/model';
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
model: XTbl;
|
||||
/** Where the edit pencil navigates, e.g. '/branch/edit' or '/workshop/edit'. */
|
||||
editPath: string;
|
||||
/** The toggle endpoint, e.g. 'branch/active' or 'workshop/active'. */
|
||||
activePath: string;
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
|
||||
|
||||
function toEdit(id: string) {
|
||||
router.push(`${props.editPath}/${id}`);
|
||||
}
|
||||
|
||||
/** legacy setOffer(): the status toggle */
|
||||
async function setOffer(id: string) {
|
||||
try {
|
||||
await api.get(`${props.activePath}/${id}`);
|
||||
message.success('تغییرات ثبت شد');
|
||||
tbl.value?.fetch();
|
||||
} catch (e: any) {
|
||||
message.error(e?.response?.data?.message ?? 'خطا در تغییر وضعیت');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
// Ported from legacy henza_admin/src/views/branch/ListBranch.js
|
||||
//
|
||||
// Legacy sets `_noFilter` and `_noDownload` — note `_noFilter` (singular), which
|
||||
// is NOT the `_noFilters` flag XTable actually reads, so the filter bar stayed
|
||||
// visible. Preserved: neither flag is set here either.
|
||||
import XTbl, { Xtc } from '../../components/x-table/model';
|
||||
|
||||
export function buildBranchListModel(): XTbl {
|
||||
const tbl = new XTbl('admin/branches/list', 'لیست شعب');
|
||||
tbl.add(new Xtc('name', 'نام').filterText());
|
||||
tbl.add(new Xtc('address', 'آدرس').filterText());
|
||||
// legacy declares filterNumber() on these two text columns — preserved
|
||||
tbl.add(new Xtc('phone', 'شماره تلفن').filterNumber());
|
||||
tbl.add(new Xtc('user.name', 'مدیر شعبه').filterNumber().noSort());
|
||||
tbl.add(new Xtc('op', 'عملیات').noSort().renderSlot('actions'));
|
||||
return tbl;
|
||||
}
|
||||
|
||||
export default buildBranchListModel;
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<!-- Ported from legacy views/branch/ListBranches.vue — a thin wrapper over the
|
||||
shared facility list (see FacilityList.vue for why). -->
|
||||
<FacilityList
|
||||
title="لیست شعب"
|
||||
:model="model"
|
||||
edit-path="/branch/edit"
|
||||
active-path="branch/active"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FacilityList from './FacilityList.vue';
|
||||
import { buildBranchListModel } from './ListBranch';
|
||||
|
||||
const model = buildBranchListModel();
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/addCustomer.vue — a 19-line
|
||||
wrapper whose entire template is <singleCustomer />. Kept as a wrapper.
|
||||
-->
|
||||
<div>
|
||||
<SingleCustomerForm />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SingleCustomerForm from '../apps/customer/singleCustomer.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/buyList.vue — the branch's
|
||||
purchase invoices: the product allocations head office sent to this branch.
|
||||
|
||||
The backend scopes allocations by the caller's branch, so a branch user sees
|
||||
only their own without the view having to filter.
|
||||
-->
|
||||
<div id="page-user-list">
|
||||
<a-card title="فاکتور خرید">
|
||||
<XTable ref="tbl" :model="model">
|
||||
<template #opt="{ record }">
|
||||
<a-tooltip title="مشاهده">
|
||||
<EyeOutlined class="cursor-pointer mx-1 text-primary" @click="view(record)" />
|
||||
</a-tooltip>
|
||||
</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>
|
||||
|
||||
<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 { EyeOutlined } from '@ant-design/icons-vue';
|
||||
import XTable from '../../components/x-table/XTable.vue';
|
||||
import { buildBranchBuyListModel } from './orderListModel';
|
||||
import { jdate } from '../../utils/filters';
|
||||
import api from '../../api/client';
|
||||
|
||||
const model = buildBranchBuyListModel();
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/dashboard.vue — the branch
|
||||
home screen: this week's orders and best-selling products.
|
||||
|
||||
LEGACY GAP, deliberately closed: the legacy file declares both tables against
|
||||
demo arrays defined in the component and makes NO server call at all
|
||||
(verified: zero axios references in the file). The cards are wired to real
|
||||
endpoints here, because a dashboard showing placeholder rows is worse than
|
||||
one showing nothing. Recorded in docs/ADMIN-PORT-PLAN.md.
|
||||
-->
|
||||
<a-spin :spinning="loading">
|
||||
<a-card title="سفارشات هفته جاری">
|
||||
<a-table
|
||||
size="small"
|
||||
:data-source="lastOrder"
|
||||
:columns="orderColumns"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'sts_str'">
|
||||
<a-tag :color="tagColor(record.statusColor)">{{ record.sts_str }}</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'caj'">
|
||||
{{ jdate(record.caj) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<a-card title="محصولات پر فروش" class="mt-4">
|
||||
<a-table
|
||||
size="small"
|
||||
:data-source="topProducts"
|
||||
:columns="productColumns"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
/>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { jdate } from '../../utils/filters';
|
||||
import api from '../../api/client';
|
||||
|
||||
const loading = ref(false);
|
||||
const lastOrder = ref<Record<string, any>[]>([]);
|
||||
const topProducts = ref<Record<string, any>[]>([]);
|
||||
|
||||
const orderColumns = [
|
||||
{ title: 'شماره سفارش', dataIndex: 'name' },
|
||||
{ title: 'مشتری', dataIndex: 'customer' },
|
||||
{ title: 'وزن', dataIndex: 'w' },
|
||||
{ title: 'وضعیت', dataIndex: 'sts_str' },
|
||||
{ title: 'تاریخ', dataIndex: 'caj' },
|
||||
];
|
||||
|
||||
const productColumns = [
|
||||
{ title: 'کد محصول', dataIndex: 'product_code' },
|
||||
{ title: 'نام محصول', dataIndex: 'title' },
|
||||
{ title: 'تعداد تنوع', dataIndex: 'variants_count' },
|
||||
];
|
||||
|
||||
function tagColor(c: string) {
|
||||
return { success: 'green', warning: 'orange', danger: 'red', primary: 'blue' }[c] ?? '';
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const [o, p] = await Promise.all([
|
||||
api.get('get-analytics-tak'),
|
||||
api.post('products', { page: 1, limit: 5 }),
|
||||
]);
|
||||
lastOrder.value = o.data.lastOrder ?? [];
|
||||
topProducts.value = p.data.rows ?? [];
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/login.vue — the branch-mode
|
||||
sign-in. A different layout from the admin login (centred logo, no split
|
||||
illustration panel), but the same auth action underneath.
|
||||
|
||||
Legacy's right-hand illustration panel is COMMENTED OUT and stays absent.
|
||||
-->
|
||||
<div class="flex gap-6 w-full justify-center h-screen branch-login-page">
|
||||
<div class="flex flex-col h-screen items-center justify-center">
|
||||
<img
|
||||
src="../../assets/images/logo/henza-icon.svg"
|
||||
width="150"
|
||||
alt="login"
|
||||
class="mx-auto mb-5"
|
||||
/>
|
||||
|
||||
<a-form layout="vertical" class="login-form" @submit.prevent="handleSubmit">
|
||||
<a-form-item
|
||||
label="نام کاربری"
|
||||
class="w-full"
|
||||
:validate-status="err.phone ? 'error' : ''"
|
||||
:help="err.phone"
|
||||
>
|
||||
<a-input v-model:value="form.phone" size="large" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="رمز عبور"
|
||||
class="w-full"
|
||||
:validate-status="err.password ? 'error' : ''"
|
||||
:help="err.password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="form.password"
|
||||
size="large"
|
||||
@press-enter="handleSubmit"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
class="mt-8 w-full"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
ورود
|
||||
</a-button>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const form = reactive({ phone: '', password: '' });
|
||||
const err = reactive<Record<string, string>>({});
|
||||
|
||||
async function handleSubmit() {
|
||||
Object.keys(err).forEach((k) => delete err[k]);
|
||||
if (!form.phone) err.phone = 'نام کاربری را وارد نمایید';
|
||||
if (!form.password) err.password = 'رمز عبور را وارد نمایید';
|
||||
if (Object.keys(err).length) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
await auth.login({ phone: form.phone, password: form.password });
|
||||
// legacy did a hard window.location.href = '/branch/dashboard'; a router
|
||||
// push reaches the same route without discarding the populated store.
|
||||
await router.push('/dashboard');
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
message.error('خطا در ورود');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.branch-login-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.flex-col { flex-direction: column; }
|
||||
.justify-center { justify-content: center; }
|
||||
.h-screen { min-height: 100vh; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
.mx-auto { margin: 0 auto; }
|
||||
.mb-5 { margin-bottom: 1.25rem; }
|
||||
.mt-8 { margin-top: 2rem; }
|
||||
.login-form { width: 320px; max-width: 90vw; }
|
||||
</style>
|
||||
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<!--
|
||||
Ported from legacy henza_admin/src/views/branch/order/create.vue — the
|
||||
branch-mode order builder.
|
||||
|
||||
It differs from the admin builder (views/order/create.vue) in flow, not in
|
||||
substance: the CUSTOMER is picked first and the product grid stays hidden
|
||||
until one is chosen ("جهت ثبت سفارش مشتری را انتخاب نمایید"). Preserved.
|
||||
|
||||
It also drops the admin version's `$hasPermission('order.create')` wrapper —
|
||||
branch mode gates the whole route instead. Preserved.
|
||||
-->
|
||||
<a-spin :spinning="loading">
|
||||
<a-card title="ثبت سفارش">
|
||||
<span>جهت ثبت سفارش مشتری را انتخاب نمایید</span>
|
||||
|
||||
<a-form layout="vertical" class="mt-4" @submit.prevent="submitOrder">
|
||||
<a-form-item
|
||||
label="مشتری"
|
||||
class="customer-field"
|
||||
:validate-status="err.customer_id ? 'error' : ''"
|
||||
:help="err.customer_id"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="form.customer_id"
|
||||
show-search
|
||||
option-filter-prop="children"
|
||||
:filter-option="filterOption"
|
||||
>
|
||||
<a-select-option v-for="item in customers" :key="item.id" :value="item.id">
|
||||
{{ `${item.id}-${item.fname} ${item.lname}` }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- legacy: the grid appears only once a customer is chosen -->
|
||||
<div v-if="form.customer_id != null">
|
||||
<h6>تعداد {{ items.length }} محصول انتخاب شده است.</h6>
|
||||
|
||||
<XTable ref="tblProducts" :model="cols">
|
||||
<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-dropdown>
|
||||
<a-button style="margin-left: 8px">
|
||||
افزودن
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="onVariantPick(record, $event)">
|
||||
<a-menu-item v-for="item in record.variants_all" :key="item.id">
|
||||
افزودن تنوع {{ item.title }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</XTable>
|
||||
|
||||
<a-card v-if="items.length > 0" title="سبد سفارش" class="mt-4">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="items"
|
||||
bordered
|
||||
:pagination="false"
|
||||
row-key="vid"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<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 === 'qty'">
|
||||
<a-input-number
|
||||
v-model:value="items[index].qty"
|
||||
:min="1"
|
||||
:max="maxQtyFor(index)"
|
||||
@change="onQtyChange(index, $event)"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'weight'">
|
||||
{{ getVariant(record).grams }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'total'">
|
||||
{{ rowWeight(record) }} گرم
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="totals">
|
||||
<a-tag color="blue">مجموع وزن: {{ totalWeight }} گرم</a-tag>
|
||||
</div>
|
||||
|
||||
<a-form-item label="توضیحات">
|
||||
<a-textarea v-model:value="form.note" :auto-size="{ minRows: 2, maxRows: 4 }" />
|
||||
</a-form-item>
|
||||
|
||||
<a-button type="primary" :disabled="items.length < 1" @click="submitOrder">
|
||||
ثبت سفارش
|
||||
</a-button>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
|
||||
import XTable from '../../../components/x-table/XTable.vue';
|
||||
import { buildProductListModel } from '../../apps/product/productListModel';
|
||||
import { useCartStore, type CartItem, type CartVariant } from '../../../stores/cart';
|
||||
import api from '../../../api/client';
|
||||
|
||||
const router = useRouter();
|
||||
const cart = useCartStore();
|
||||
|
||||
const noImage = '/img/no-items.png';
|
||||
const cols = buildProductListModel();
|
||||
const tblProducts = ref<{ fetch: () => Promise<void> } | null>(null);
|
||||
const loading = ref(false);
|
||||
const customers = ref<{ id: string; fname: string; lname: string }[]>([]);
|
||||
|
||||
const form = reactive<Record<string, any>>({ customer_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: 'product' },
|
||||
{ title: 'تعداد', dataIndex: 'qty', align: 'center', width: 140 },
|
||||
{ title: 'وزن', dataIndex: 'weight', align: 'center', width: 90 },
|
||||
{ title: 'مجموع', dataIndex: 'total', align: 'center' },
|
||||
];
|
||||
|
||||
function getVariant(item: CartItem): CartVariant & Record<string, any> {
|
||||
return (item.product.variants_all.find((x) => x.id === item.vid) ?? {}) as CartVariant;
|
||||
}
|
||||
|
||||
function getImage(product: Record<string, any>) {
|
||||
return product?.thumb?.full ?? product?.ProductImage?.[0]?.image ?? noImage;
|
||||
}
|
||||
|
||||
/** Same as the admin builder: 0 stock means uncapped, which keeps pre-orders orderable. */
|
||||
function maxQtyFor(index: number): number {
|
||||
const item = items.value[index];
|
||||
if (!item) return Infinity;
|
||||
const stock = Number(getVariant(item).qty ?? 0);
|
||||
return stock > 0 ? stock : Infinity;
|
||||
}
|
||||
|
||||
function onQtyChange(index: number, value: unknown) {
|
||||
cart.updateItemQuantity({ index, quantity: Number(value) });
|
||||
}
|
||||
|
||||
function onVariantPick(record: Record<string, any>, e: { key: string | number }) {
|
||||
cart.add({
|
||||
vid: String(e.key),
|
||||
pid: record.id,
|
||||
product: record as any,
|
||||
qty: 1,
|
||||
promotion_id: record.promotion && record.promotion.id ? record.promotion.id : null,
|
||||
});
|
||||
message.info('اضافه شد');
|
||||
}
|
||||
|
||||
function rowWeight(record: CartItem) {
|
||||
return Number(getVariant(record).grams ?? 0) * record.qty;
|
||||
}
|
||||
|
||||
/** legacy sums the gram figures WITHOUT multiplying by qty — preserved. */
|
||||
const totalWeight = computed(() => {
|
||||
let total = 0;
|
||||
for (const item of items.value) total += Number(getVariant(item).grams ?? 0);
|
||||
return total;
|
||||
});
|
||||
|
||||
function filterOption(input: string, option: any) {
|
||||
return String(option?.children?.[0]?.children ?? '')
|
||||
.toLowerCase()
|
||||
.includes(input.toLowerCase());
|
||||
}
|
||||
|
||||
async function submitOrder() {
|
||||
Object.keys(err).forEach((k) => delete err[k]);
|
||||
if (!form.customer_id) {
|
||||
err.customer_id = 'مقدار را وارد نمایید';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
loading.value = true;
|
||||
const order_items = items.value.map((x) => {
|
||||
const v = getVariant(x);
|
||||
return { vid: x.vid, qty: x.qty, percent: v.percentage_pay };
|
||||
});
|
||||
|
||||
await api.post('order', {
|
||||
customer_id: form.customer_id,
|
||||
note: form.note,
|
||||
sts: 1,
|
||||
order_items,
|
||||
});
|
||||
|
||||
message.info('عملیات با موفقیت انجام شد');
|
||||
cart.clear();
|
||||
router.push('/order/list');
|
||||
} catch (e: any) {
|
||||
console.log(e);
|
||||
message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const { data } = await api.post('single-customer', { page: 1, limit: 500 });
|
||||
customers.value = data.rows ?? [];
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
await cart.init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-field {
|
||||
max-width: 320px;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.totals {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
// Ported from legacy henza_admin/src/views/branch/orderListModel.js — the
|
||||
// branch's "فاکتور خرید": the allocations head office sent to this branch.
|
||||
//
|
||||
// Legacy carries several commented-out columns (customer name, total price,
|
||||
// wage, and an order.tamin.state block). They stay absent.
|
||||
import XTbl, { Xtc } from '../../components/x-table/model';
|
||||
|
||||
export function buildBranchBuyListModel(): XTbl {
|
||||
const tbl = new XTbl('admin/invoices/list', 'فاکتور خرید');
|
||||
tbl.add(new Xtc('id', 'شماره').filterNumber());
|
||||
tbl.add(new Xtc('count_item', 'تعداد آیتم ها').noSort());
|
||||
tbl.add(new Xtc('sum_weight', 'جمع وزن').noSort());
|
||||
tbl.add(new Xtc('caj', 'تاریخ ثبت').filterKey('createdAt').filterDate().noSort());
|
||||
tbl.add(new Xtc('uaj', 'تاریخ ویرایش').hidden().filterKey('createdAt').filterDate().noSort());
|
||||
tbl.add(new Xtc('opt', 'عملیات').noSort().renderSlot('opt'));
|
||||
return tbl;
|
||||
}
|
||||
|
||||
export default buildBranchBuyListModel;
|
||||
Reference in New Issue
Block a user