added notif 2
This commit is contained in:
@@ -0,0 +1,863 @@
|
||||
<template>
|
||||
<div class="cs-wrap">
|
||||
|
||||
<!-- ─── بنر آمار ─── -->
|
||||
<div class="cs-banner">
|
||||
<div class="cs-banner__title">همگام‌سازی مشتریان</div>
|
||||
|
||||
<!-- آمار اصلی: ردیف بالا -->
|
||||
<div class="cs-stats-main">
|
||||
<div class="cs-stat cs-stat--neutral">
|
||||
<div class="cs-stat__num">
|
||||
<template v-if="status">{{ status.panel_total }}</template>
|
||||
<a-spin v-else size="small" />
|
||||
</div>
|
||||
<div class="cs-stat__label">مشتریان پنل</div>
|
||||
</div>
|
||||
<div class="cs-sep-arrows">
|
||||
<Icon icon="vuesax-linear:arrow-left" :size="16" />
|
||||
<Icon icon="vuesax-linear:arrow-right" :size="16" />
|
||||
</div>
|
||||
<div class="cs-stat cs-stat--zarin">
|
||||
<div class="cs-stat__num">
|
||||
<template v-if="status?.zarin_total != null">{{ status.zarin_total }}</template>
|
||||
<a-spin v-else-if="loadingZarin" size="small" />
|
||||
<span v-else class="cs-stat__hint">تب دوم</span>
|
||||
</div>
|
||||
<div class="cs-stat__label">مشتریان زرین</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- آمار تفاوت: ردیف پایین -->
|
||||
<div class="cs-stats-diff">
|
||||
<div class="cs-stat cs-stat--amber">
|
||||
<div class="cs-stat__num">
|
||||
<template v-if="status">{{ status.panel_only }}</template>
|
||||
<a-spin v-else-if="loadingPanel" size="small" />
|
||||
<span v-else>—</span>
|
||||
</div>
|
||||
<div class="cs-stat__label">پنل — بدون زرین</div>
|
||||
</div>
|
||||
<div class="cs-stat cs-stat--sky">
|
||||
<div class="cs-stat__num">
|
||||
<template v-if="status?.zarin_only_count != null">{{ status.zarin_only_count }}</template>
|
||||
<a-spin v-else-if="loadingZarin" size="small" />
|
||||
<span v-else class="cs-stat__hint">تب دوم</span>
|
||||
</div>
|
||||
<div class="cs-stat__label">زرین — بدون پنل</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- progress -->
|
||||
<div v-if="status" class="cs-progress">
|
||||
<div class="cs-progress__labels">
|
||||
<span>{{ registeredPercent }}٪ پنل در زرین</span>
|
||||
<span>{{ status.panel_registered }} / {{ status.panel_total }}</span>
|
||||
</div>
|
||||
<div class="cs-track"><div class="cs-track__fill" :style="{ width: registeredPercent + '%' }" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── تب‌ها ─── -->
|
||||
<div class="cs-tabs">
|
||||
<button
|
||||
class="cs-tab"
|
||||
:class="{ 'cs-tab--active': activeTab === 'panel' }"
|
||||
@click="onTabChange('panel')"
|
||||
>
|
||||
<Icon icon="vuesax-linear:arrow-left" :size="14" />
|
||||
پنل ← زرین
|
||||
<span v-if="status?.panel_only" class="cs-tab__badge cs-tab__badge--amber">{{ status.panel_only }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="cs-tab"
|
||||
:class="{ 'cs-tab--active': activeTab === 'zarin' }"
|
||||
@click="onTabChange('zarin')"
|
||||
>
|
||||
<Icon icon="vuesax-linear:arrow-right" :size="14" />
|
||||
زرین ← پنل
|
||||
<span v-if="status?.zarin_only_count" class="cs-tab__badge cs-tab__badge--sky">{{ status.zarin_only_count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ─── تب ۱: پنل → زرین ─── -->
|
||||
<div v-show="activeTab === 'panel'" class="cs-card">
|
||||
<div class="cs-card__head">
|
||||
<div class="cs-card__head-right">
|
||||
<span class="cs-dot cs-dot--amber" />
|
||||
<span class="cs-card__head-title">مشتریان پنل بدون کد زرین</span>
|
||||
</div>
|
||||
<div class="cs-card__head-actions">
|
||||
<a-input
|
||||
v-model:value="panelSearch"
|
||||
placeholder="جستجو..."
|
||||
allow-clear
|
||||
size="small"
|
||||
class="cs-search"
|
||||
@change="onPanelSearch"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="syncingPanel"
|
||||
:disabled="!status?.panel_only"
|
||||
@click="syncAllPanel"
|
||||
>
|
||||
<template #icon><Icon icon="vuesax-linear:send-2" :size="13" /></template>
|
||||
ثبت همه در زرین
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="syncingPanel || panelSyncResult" class="cs-result">
|
||||
<template v-if="syncingPanel">
|
||||
<a-spin size="small" />
|
||||
<span>در حال ثبت مشتریان پنل در زرین...</span>
|
||||
</template>
|
||||
<template v-else-if="panelSyncResult">
|
||||
<span class="cs-result__ok">✓ {{ panelSyncResult.success }} موفق</span>
|
||||
<span v-if="panelSyncResult.failed" class="cs-result__fail">✗ {{ panelSyncResult.failed }} ناموفق</span>
|
||||
<a-button v-if="panelSyncResult.failed" type="link" size="small" @click="showPanelErrors = !showPanelErrors">
|
||||
{{ showPanelErrors ? 'پنهان' : 'جزئیات' }}
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="panelSyncResult = null">بستن</a-button>
|
||||
</template>
|
||||
<div v-if="showPanelErrors && panelSyncResult?.errors.length" class="cs-result__errors">
|
||||
<div v-for="e in panelSyncResult.errors" :key="e.mobile"><b>{{ e.name }}</b> — {{ e.error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingPanel" class="cs-loading"><a-spin /></div>
|
||||
<template v-else-if="panelList.length">
|
||||
<!-- موبایل -->
|
||||
<div class="cs-mobile-list">
|
||||
<div
|
||||
v-for="c in panelList" :key="c.id"
|
||||
class="cs-mobile-row"
|
||||
:class="{ 'cs-mobile-row--done': panelDone.has(c.id) }"
|
||||
>
|
||||
<div class="cs-mobile-row__info">
|
||||
<div class="cs-mobile-row__name">{{ c.name }}</div>
|
||||
<div class="cs-mobile-row__mobile">{{ c.mobile }}</div>
|
||||
</div>
|
||||
<span v-if="panelDone.has(c.id)" class="cs-done-badge">✓ ثبت شد</span>
|
||||
<a-button v-else type="primary" ghost size="small"
|
||||
:loading="panelRegisteringId === c.id" @click="registerOnePanel(c)">
|
||||
ارسال به زرین
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- دسکتاپ -->
|
||||
<table class="cs-table">
|
||||
<thead><tr>
|
||||
<th>#</th><th>نام مشتری</th><th>موبایل</th><th>تاریخ عضویت</th><th>عملیات</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="(c, idx) in panelList" :key="c.id"
|
||||
:class="{ 'cs-table__row--done': panelDone.has(c.id) }">
|
||||
<td class="cs-table__num">{{ (panelPagination.page - 1) * 20 + idx + 1 }}</td>
|
||||
<td class="cs-table__name">{{ c.name }}</td>
|
||||
<td class="cs-table__mobile">{{ c.mobile }}</td>
|
||||
<td class="cs-table__date">{{ toJalali(c.created_at) }}</td>
|
||||
<td class="cs-table__action">
|
||||
<span v-if="panelDone.has(c.id)" class="cs-done-badge">✓ ثبت شد</span>
|
||||
<a-button v-else type="primary" ghost size="small"
|
||||
:loading="panelRegisteringId === c.id" @click="registerOnePanel(c)">
|
||||
<template #icon><Icon icon="vuesax-linear:send-2" :size="13" /></template>
|
||||
ارسال به زرین
|
||||
</a-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="panelPagination.lastPage > 1" class="cs-pagination">
|
||||
<a-pagination
|
||||
v-model:current="panelPagination.page"
|
||||
:total="panelPagination.total"
|
||||
:page-size="20" size="small" show-less-items
|
||||
@change="p => loadPanel(p)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="cs-empty">
|
||||
<div class="cs-empty__icon"><Icon icon="vuesax-linear:tick-circle" :size="28" /></div>
|
||||
<div class="cs-empty__title">همه مشتریان پنل در زرین ثبت شده‌اند</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── تب ۲: زرین → پنل ─── -->
|
||||
<div v-show="activeTab === 'zarin'" class="cs-card">
|
||||
<div class="cs-card__head">
|
||||
<div class="cs-card__head-right">
|
||||
<span class="cs-dot cs-dot--sky" />
|
||||
<span class="cs-card__head-title">مشتریان زرین بدون حساب پنل</span>
|
||||
</div>
|
||||
<div class="cs-card__head-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="syncingZarin"
|
||||
:disabled="!status?.zarin_only_count || selectedZarin.size === 0"
|
||||
@click="importSelected"
|
||||
>
|
||||
<template #icon><Icon icon="vuesax-linear:import" :size="13" /></template>
|
||||
وارد کردن انتخاب‌شده‌ها ({{ selectedZarin.size }})
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
:loading="importStore.active"
|
||||
:disabled="!zarinOnlyList.length"
|
||||
@click="importAll"
|
||||
>
|
||||
{{ importStore.active ? 'در حال وارد کردن…' : `وارد کردن همه (${status?.zarin_only_count ?? 0})` }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="syncingZarin || zarinSyncResult" class="cs-result">
|
||||
<template v-if="syncingZarin">
|
||||
<a-spin size="small" />
|
||||
<span>در حال وارد کردن مشتریان زرین به پنل...</span>
|
||||
</template>
|
||||
<template v-else-if="zarinSyncResult">
|
||||
<span class="cs-result__ok">✓ {{ zarinSyncResult.success }} موفق</span>
|
||||
<span v-if="zarinSyncResult.failed" class="cs-result__fail">✗ {{ zarinSyncResult.failed }} ناموفق</span>
|
||||
<a-button v-if="zarinSyncResult.failed" type="link" size="small" @click="showZarinErrors = !showZarinErrors">
|
||||
{{ showZarinErrors ? 'پنهان' : 'جزئیات' }}
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="zarinSyncResult = null">بستن</a-button>
|
||||
</template>
|
||||
<div v-if="showZarinErrors && zarinSyncResult?.errors.length" class="cs-result__errors">
|
||||
<div v-for="e in zarinSyncResult.errors" :key="e.name"><b>{{ e.name }}</b> — {{ e.error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingZarin" class="cs-loading"><a-spin /></div>
|
||||
<template v-else-if="zarinOnlyList.length">
|
||||
<!-- موبایل -->
|
||||
<div class="cs-mobile-list">
|
||||
<div
|
||||
v-for="c in pagedZarin" :key="c.code"
|
||||
class="cs-mobile-row"
|
||||
:class="{ 'cs-mobile-row--done': zarinDone.has(c.code) }"
|
||||
>
|
||||
<a-checkbox
|
||||
:checked="selectedZarin.has(c.code)"
|
||||
:disabled="zarinDone.has(c.code)"
|
||||
class="cs-mobile-row__check"
|
||||
@change="toggleZarin(c.code)"
|
||||
/>
|
||||
<div class="cs-mobile-row__info">
|
||||
<div class="cs-mobile-row__name">{{ c.name }}</div>
|
||||
<div class="cs-mobile-row__mobile">{{ c.tel || '—' }} · کد {{ c.code }}</div>
|
||||
</div>
|
||||
<span v-if="zarinDone.has(c.code)" class="cs-done-badge">✓ وارد شد</span>
|
||||
<a-button v-else type="primary" ghost size="small"
|
||||
@click="importOne(c)">
|
||||
وارد کردن
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- دسکتاپ -->
|
||||
<table class="cs-table">
|
||||
<thead><tr>
|
||||
<th><a-checkbox :checked="allPageSelected" :indeterminate="someSelected" @change="toggleAll" /></th>
|
||||
<th>#</th><th>نام مشتری</th><th>شماره تلفن</th><th>کد زرین</th><th>گروه</th><th>عملیات</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="(c, idx) in pagedZarin" :key="c.code"
|
||||
:class="{ 'cs-table__row--done': zarinDone.has(c.code) }">
|
||||
<td>
|
||||
<a-checkbox
|
||||
:checked="selectedZarin.has(c.code)"
|
||||
:disabled="zarinDone.has(c.code)"
|
||||
@change="toggleZarin(c.code)"
|
||||
/>
|
||||
</td>
|
||||
<td class="cs-table__num">{{ (zarinPage - 1) * 20 + idx + 1 }}</td>
|
||||
<td class="cs-table__name">{{ c.name }}</td>
|
||||
<td class="cs-table__mobile">{{ c.tel || '—' }}</td>
|
||||
<td class="cs-table__mobile">{{ c.code }}</td>
|
||||
<td class="cs-table__date">{{ c.group || '—' }}</td>
|
||||
<td class="cs-table__action">
|
||||
<span v-if="zarinDone.has(c.code)" class="cs-done-badge">✓ وارد شد</span>
|
||||
<a-button v-else type="primary" ghost size="small" @click="importOne(c)">
|
||||
<template #icon><Icon icon="vuesax-linear:import" :size="13" /></template>
|
||||
وارد کردن
|
||||
</a-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="zarinLastPage > 1" class="cs-pagination">
|
||||
<a-pagination
|
||||
v-model:current="zarinPage"
|
||||
:total="zarinOnlyList.length"
|
||||
:page-size="20" size="small" show-less-items
|
||||
@change="p => { zarinPage = p; selectedZarin.clear() }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="cs-empty">
|
||||
<div class="cs-empty__icon"><Icon icon="vuesax-linear:tick-circle" :size="28" /></div>
|
||||
<div class="cs-empty__title">همه مشتریان زرین در پنل ثبت شده‌اند</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, reactive, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue/es'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
import {
|
||||
getZarinCustomerSyncStatus,
|
||||
syncPanelToZarin,
|
||||
importFromZarin,
|
||||
registerCustomerInZarin,
|
||||
type CustomerSyncStatus,
|
||||
type PanelOnlyCustomer,
|
||||
type ZarinOnlyCustomer,
|
||||
type SyncPanelResult,
|
||||
} from '@/api/zarin'
|
||||
import { useCustomerImportStore } from '@/store/customerImportStore'
|
||||
|
||||
const importStore = useCustomerImportStore()
|
||||
|
||||
// ─── state ───
|
||||
const loadingPanel = ref(true) // شروع با true تا اولین load کامل بشه
|
||||
const loadingZarin = ref(false)
|
||||
const syncingPanel = ref(false)
|
||||
const syncingZarin = ref(false)
|
||||
const activeTab = ref<'panel' | 'zarin'>('panel')
|
||||
const zarinFetched = ref(false) // آیا مشتریان زرین قبلاً fetch شده؟
|
||||
|
||||
const status = ref<CustomerSyncStatus | null>(null)
|
||||
|
||||
// تب ۱
|
||||
const panelSearch = ref('')
|
||||
const panelList = ref<PanelOnlyCustomer[]>([])
|
||||
const panelPagination = ref({ page: 1, lastPage: 1, total: 0 })
|
||||
const panelDone = reactive(new Set<number>())
|
||||
const panelRegisteringId = ref<number | null>(null)
|
||||
const panelSyncResult = ref<SyncPanelResult | null>(null)
|
||||
const showPanelErrors = ref(false)
|
||||
|
||||
// تب ۲
|
||||
const zarinOnlyList = ref<ZarinOnlyCustomer[]>([])
|
||||
const zarinPage = ref(1)
|
||||
const zarinDone = reactive(new Set<number>())
|
||||
const selectedZarin = reactive(new Set<number>())
|
||||
const zarinSyncResult = ref<SyncPanelResult | null>(null)
|
||||
const showZarinErrors = ref(false)
|
||||
|
||||
// ─── computed ───
|
||||
const registeredPercent = computed(() => {
|
||||
if (!status.value?.panel_total) return 0
|
||||
return Math.round((status.value.panel_registered / status.value.panel_total) * 100)
|
||||
})
|
||||
|
||||
const zarinLastPage = computed(() => Math.max(1, Math.ceil(zarinOnlyList.value.length / 20)))
|
||||
|
||||
const pagedZarin = computed(() => {
|
||||
const s = (zarinPage.value - 1) * 20
|
||||
return zarinOnlyList.value.slice(s, s + 20)
|
||||
})
|
||||
|
||||
const allPageSelected = computed(() =>
|
||||
pagedZarin.value.length > 0 &&
|
||||
pagedZarin.value.every(c => selectedZarin.has(c.code) || zarinDone.has(c.code))
|
||||
)
|
||||
const someSelected = computed(() =>
|
||||
pagedZarin.value.some(c => selectedZarin.has(c.code)) && !allPageSelected.value
|
||||
)
|
||||
|
||||
// ─── load panel only (سریع — بدون API زرین) ───
|
||||
let panelSearchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
async function load(panelPage = 1) {
|
||||
loadingPanel.value = true
|
||||
try {
|
||||
const res = await getZarinCustomerSyncStatus({
|
||||
search: panelSearch.value || undefined,
|
||||
page: panelPage,
|
||||
})
|
||||
// این درخواست داده‌های زرین را شامل نمی‌شود؛ پس فیلدهای زرین را دست‌نخورده نگه می‌داریم
|
||||
if (status.value) {
|
||||
status.value.panel_total = res.panel_total
|
||||
status.value.panel_registered = res.panel_registered
|
||||
status.value.panel_only = res.panel_only
|
||||
status.value.panel_only_list = res.panel_only_list
|
||||
} else {
|
||||
status.value = res
|
||||
}
|
||||
panelList.value = res.panel_only_list.data
|
||||
panelPagination.value = {
|
||||
page: res.panel_only_list.current_page,
|
||||
lastPage: res.panel_only_list.last_page,
|
||||
total: res.panel_only_list.total,
|
||||
}
|
||||
} catch (e) { console.error(e) }
|
||||
finally { loadingPanel.value = false }
|
||||
}
|
||||
|
||||
// ─── load zarin customers (کند — فقط وقتی تب زرین باز میشه) ───
|
||||
async function loadZarin() {
|
||||
if (zarinFetched.value) return
|
||||
loadingZarin.value = true
|
||||
try {
|
||||
const res = await getZarinCustomerSyncStatus({ include_zarin: 1 } as any)
|
||||
if (status.value) {
|
||||
status.value.zarin_total = res.zarin_total ?? 0
|
||||
status.value.zarin_only_count = res.zarin_only_count ?? 0
|
||||
} else {
|
||||
status.value = res
|
||||
}
|
||||
zarinOnlyList.value = res.zarin_only_list?.data ?? []
|
||||
zarinFetched.value = true
|
||||
} catch (e) { console.error(e) }
|
||||
finally { loadingZarin.value = false }
|
||||
}
|
||||
|
||||
function onTabChange(tab: 'panel' | 'zarin') {
|
||||
activeTab.value = tab
|
||||
if (tab === 'zarin') loadZarin()
|
||||
}
|
||||
|
||||
async function loadPanel(page = 1) {
|
||||
loadingPanel.value = true
|
||||
try {
|
||||
const res = await getZarinCustomerSyncStatus({ search: panelSearch.value || undefined, page })
|
||||
if (status.value) {
|
||||
status.value.panel_total = res.panel_total
|
||||
status.value.panel_registered = res.panel_registered
|
||||
status.value.panel_only = res.panel_only
|
||||
}
|
||||
panelList.value = res.panel_only_list.data
|
||||
panelPagination.value = {
|
||||
page: res.panel_only_list.current_page,
|
||||
lastPage: res.panel_only_list.last_page,
|
||||
total: res.panel_only_list.total,
|
||||
}
|
||||
} catch { } finally { loadingPanel.value = false }
|
||||
}
|
||||
|
||||
function onPanelSearch() {
|
||||
if (panelSearchTimer) clearTimeout(panelSearchTimer)
|
||||
panelSearchTimer = setTimeout(() => loadPanel(1), 400)
|
||||
}
|
||||
|
||||
// ─── تب ۱: عملیات ───
|
||||
async function registerOnePanel(customer: PanelOnlyCustomer) {
|
||||
panelRegisteringId.value = customer.id
|
||||
try {
|
||||
const res = await registerCustomerInZarin(customer.id)
|
||||
if (res.ok) {
|
||||
panelDone.add(customer.id)
|
||||
if (status.value) { status.value.panel_registered++; status.value.panel_only-- }
|
||||
message.success(`${customer.name} در زرین ثبت شد`)
|
||||
} else {
|
||||
message.error((res as any).message || 'ثبت ناموفق بود')
|
||||
}
|
||||
} catch { message.error('خطا در ارتباط با سرور') }
|
||||
finally { panelRegisteringId.value = null }
|
||||
}
|
||||
|
||||
async function syncAllPanel() {
|
||||
syncingPanel.value = true
|
||||
panelSyncResult.value = null
|
||||
showPanelErrors.value = false
|
||||
try {
|
||||
const res = await syncPanelToZarin()
|
||||
panelSyncResult.value = res
|
||||
if (res.success) message.success(`${res.success} مشتری ثبت شد`)
|
||||
if (res.failed) message.warning(`${res.failed} مشتری ثبت نشد`)
|
||||
await load(1)
|
||||
panelDone.clear()
|
||||
} catch { message.error('خطا در ارتباط با سرور') }
|
||||
finally { syncingPanel.value = false }
|
||||
}
|
||||
|
||||
// ─── تب ۲: عملیات ───
|
||||
function toggleZarin(code: number) {
|
||||
if (selectedZarin.has(code)) selectedZarin.delete(code)
|
||||
else selectedZarin.add(code)
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
if (allPageSelected.value) {
|
||||
pagedZarin.value.forEach(c => selectedZarin.delete(c.code))
|
||||
} else {
|
||||
pagedZarin.value.forEach(c => { if (!zarinDone.has(c.code)) selectedZarin.add(c.code) })
|
||||
}
|
||||
}
|
||||
|
||||
async function doImport(customers: ZarinOnlyCustomer[]) {
|
||||
syncingZarin.value = true
|
||||
zarinSyncResult.value = null
|
||||
showZarinErrors.value = false
|
||||
try {
|
||||
const res = await importFromZarin(customers)
|
||||
zarinSyncResult.value = res
|
||||
if (res.success) {
|
||||
message.success(`${res.success} مشتری وارد پنل شد`)
|
||||
customers.forEach(c => { if (!res.errors.find((e: any) => e.code === c.code)) zarinDone.add(c.code) })
|
||||
if (status.value?.zarin_only_count != null) {
|
||||
status.value.zarin_only_count = Math.max(0, status.value.zarin_only_count - res.success)
|
||||
}
|
||||
}
|
||||
if (res.failed) message.warning(`${res.failed} مشتری وارد نشد`)
|
||||
await loadPanel(panelPagination.value.page)
|
||||
selectedZarin.clear()
|
||||
} catch { message.error('خطا در ارتباط با سرور') }
|
||||
finally { syncingZarin.value = false }
|
||||
}
|
||||
|
||||
async function importOne(customer: ZarinOnlyCustomer) { await doImport([customer]) }
|
||||
async function importSelected() { await doImport(zarinOnlyList.value.filter(c => selectedZarin.has(c.code))) }
|
||||
|
||||
// «وارد کردن همه» با پروگرس‌بار سراسری و قابل مینیمایز (پس‌زمینه‌ای)
|
||||
async function importAll() {
|
||||
const pending = zarinOnlyList.value.filter(c => !zarinDone.has(c.code))
|
||||
if (!pending.length) return
|
||||
if (importStore.active) {
|
||||
importStore.expand()
|
||||
return
|
||||
}
|
||||
await importStore.start(pending, 'zarin')
|
||||
}
|
||||
|
||||
// با پیشرفت عملیات سراسری، ردیف‌های وارد شده را همین‌جا هم تیک بزن
|
||||
watch(() => importStore.doneCodes.length, () => {
|
||||
importStore.doneCodes.forEach(code => zarinDone.add(code))
|
||||
})
|
||||
|
||||
// پس از پایان کامل، آمار و لیست را تازه کن
|
||||
watch(() => importStore.status, async (s, prev) => {
|
||||
if (prev === 'running' && (s === 'done' || s === 'canceled')) {
|
||||
selectedZarin.clear()
|
||||
if (status.value?.zarin_only_count != null) {
|
||||
status.value.zarin_only_count = Math.max(0, status.value.zarin_only_count - importStore.success)
|
||||
}
|
||||
await loadPanel(panelPagination.value.page)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
load(1)
|
||||
// اگر عملیات سراسری در حال اجراست، ردیف‌های انجام‌شده را همگام کن
|
||||
importStore.doneCodes.forEach(code => zarinDone.add(code))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cs-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 8px 4px 24px;
|
||||
}
|
||||
|
||||
/* ─── بنر ─── */
|
||||
.cs-banner {
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #0ea5e9 100%);
|
||||
padding: 14px 16px;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 20px rgba(79, 70, 229, 0.35);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
@media (min-width: 640px) { padding: 20px 24px; gap: 16px; }
|
||||
|
||||
&__title { font-size: 14px; font-weight: 700; }
|
||||
}
|
||||
|
||||
/* ردیف اصلی: پنل ↔ زرین */
|
||||
.cs-stats-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ردیف تفاوت */
|
||||
.cs-stats-diff {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cs-sep-arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: rgba(255,255,255,0.4);
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cs-stat {
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
|
||||
&--neutral { background: rgba(255,255,255,0.12); }
|
||||
&--zarin { background: rgba(14,165,233,0.25); }
|
||||
&--amber { background: rgba(251,191,36,0.2); }
|
||||
&--sky { background: rgba(14,165,233,0.2); }
|
||||
|
||||
&__num {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
min-height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 640px) { font-size: 24px; }
|
||||
}
|
||||
&__label {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.65);
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&__hint { font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 400; }
|
||||
}
|
||||
|
||||
/* progress */
|
||||
.cs-progress {
|
||||
&__labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cs-track {
|
||||
height: 7px;
|
||||
border-radius: 99px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
overflow: hidden;
|
||||
|
||||
&__fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
background: #34d399;
|
||||
transition: width 0.7s ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── تب‌ها ─── */
|
||||
.cs-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid var(--admin-border);
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
}
|
||||
|
||||
.cs-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (min-width: 640px) { padding: 8px 16px; font-size: 13px; }
|
||||
|
||||
&:hover { color: var(--admin-text); }
|
||||
|
||||
&--active {
|
||||
color: #7c3aed;
|
||||
border-bottom-color: #7c3aed;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 99px;
|
||||
|
||||
&--amber { background: rgba(245,158,11,0.15); color: #d97706; }
|
||||
&--sky { background: rgba(14,165,233,0.15); color: #0ea5e9; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── کارت ─── */
|
||||
.cs-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--admin-border-strong);
|
||||
background: var(--admin-bg-surface);
|
||||
overflow: hidden;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--admin-border);
|
||||
background: var(--admin-bg-muted);
|
||||
|
||||
@media (min-width: 640px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__head-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
&__head-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ant-btn { flex-shrink: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/* روی موبایل دکمه‌های head رو کوچیک‌تر نشون بده */
|
||||
@media (max-width: 639px) {
|
||||
.cs-card__head-title { font-size: 12px; }
|
||||
}
|
||||
|
||||
.cs-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--amber { background: #f59e0b; }
|
||||
&--sky { background: #0ea5e9; }
|
||||
}
|
||||
|
||||
.cs-search { width: 150px; }
|
||||
@media (max-width: 639px) { .cs-search { flex: 1; min-width: 0; } }
|
||||
|
||||
/* ─── نتیجه sync ─── */
|
||||
.cs-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--admin-border);
|
||||
background: var(--admin-bg-muted);
|
||||
font-size: 13px;
|
||||
color: var(--admin-text);
|
||||
|
||||
&__ok { background: rgba(52,211,153,0.15); color: #059669; font-weight: 600; border-radius: 99px; padding: 2px 10px; font-size: 12px; }
|
||||
&__fail { background: rgba(239,68,68,0.12); color: #dc2626; font-weight: 600; border-radius: 99px; padding: 2px 10px; font-size: 12px; }
|
||||
&__errors { width: 100%; margin-top: 4px; max-height: 100px; overflow-y: auto; border-radius: 8px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); padding: 8px 12px; font-size: 11px; color: #dc2626; line-height: 1.8; }
|
||||
}
|
||||
|
||||
.cs-loading { display: flex; justify-content: center; padding: 48px; }
|
||||
|
||||
/* ─── موبایل ─── */
|
||||
.cs-mobile-list {
|
||||
display: block;
|
||||
@media (min-width: 640px) { display: none; }
|
||||
}
|
||||
|
||||
.cs-mobile-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--admin-border);
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&--done { opacity: 0.45; }
|
||||
|
||||
&__check { flex-shrink: 0; }
|
||||
&__info { flex: 1; min-width: 0; }
|
||||
&__name { font-size: 13px; font-weight: 600; color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
&__mobile{ font-size: 11px; color: var(--admin-text-secondary); font-family: monospace; margin-top: 2px; }
|
||||
}
|
||||
|
||||
/* ─── جدول دسکتاپ ─── */
|
||||
.cs-table {
|
||||
display: none;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
@media (min-width: 640px) { display: table; }
|
||||
|
||||
thead tr { background: var(--admin-bg-muted); border-bottom: 1px solid var(--admin-border); }
|
||||
th { padding: 10px 14px; text-align: right; font-size: 11px; font-weight: 600; color: var(--admin-text-secondary); white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid var(--admin-border); transition: background 0.15s; }
|
||||
tbody tr:hover { background: var(--admin-bg-hover); }
|
||||
tbody tr.cs-table__row--done { opacity: 0.45; }
|
||||
td { padding: 10px 14px; color: var(--admin-text); }
|
||||
|
||||
&__num { color: var(--admin-text-secondary); font-size: 12px; width: 40px; }
|
||||
&__name { font-weight: 600; }
|
||||
&__mobile { font-family: monospace; font-size: 12px; color: var(--admin-text-muted); }
|
||||
&__date { font-size: 12px; color: var(--admin-text-secondary); }
|
||||
&__action { text-align: center; white-space: nowrap; }
|
||||
}
|
||||
|
||||
.cs-done-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(52,211,153,0.15);
|
||||
color: #059669;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 10px;
|
||||
border-radius: 99px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cs-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 52px 16px;
|
||||
gap: 8px;
|
||||
|
||||
&__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(52,211,153,0.12); color: #059669; display: flex; align-items: center; justify-content: center; }
|
||||
&__title { font-size: 14px; font-weight: 700; color: var(--admin-text); }
|
||||
}
|
||||
|
||||
.cs-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--admin-border);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="سندی یافت نشد"
|
||||
@search="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<ZarinMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@open="openSheet"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<ZarinMobileDetailSheet
|
||||
v-model:visible="sheetVisible"
|
||||
:item="selectedItem"
|
||||
@retry="openRetry"
|
||||
@register-customer="openRegister"
|
||||
/>
|
||||
|
||||
<ZarinRetryModal
|
||||
v-model="retryVisible"
|
||||
mode="retry-sanad"
|
||||
:zarin-id="selectedItem?.id"
|
||||
@success="onRetrySuccess"
|
||||
/>
|
||||
|
||||
<ZarinRetryModal
|
||||
v-model="registerVisible"
|
||||
mode="register-customer"
|
||||
:customer-id="selectedItem?.customer_id"
|
||||
:customer-name="selectedItem?.customer?.name"
|
||||
@success="onRetrySuccess"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getZarinTable, type ZarinRecord } from '@/api/zarin'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import ZarinRetryModal from '@/components/ZarinRetryModal.vue'
|
||||
import ZarinMobileDetailSheet from './ZarinMobileDetailSheet.vue'
|
||||
import ZarinMobileListItem from './ZarinMobileListItem.vue'
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<ZarinRecord>()
|
||||
const retryVisible = ref(false)
|
||||
const registerVisible = ref(false)
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<ZarinRecord>({
|
||||
fetchApi: getZarinTable,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
function openRetry(item: ZarinRecord) {
|
||||
selectedItem.value = item
|
||||
sheetVisible.value = false
|
||||
retryVisible.value = true
|
||||
}
|
||||
|
||||
function openRegister(item: ZarinRecord) {
|
||||
selectedItem.value = item
|
||||
sheetVisible.value = false
|
||||
registerVisible.value = true
|
||||
}
|
||||
|
||||
async function onRetrySuccess() {
|
||||
await fetch()
|
||||
}
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch })
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="sheetTitle" :show-title="isMobile">
|
||||
<template #actions>
|
||||
<MobileIconButton
|
||||
v-if="!row.zarin_id && !row.customer?.moshtari_code"
|
||||
plain
|
||||
icon="vuesax-linear:profile-add"
|
||||
color="#7C3AED"
|
||||
:size="22"
|
||||
@click="$emit('register-customer', row)"
|
||||
/>
|
||||
<MobileIconButton
|
||||
v-if="canRetry(row)"
|
||||
plain
|
||||
icon="vuesax-linear:refresh-circle"
|
||||
color="#CA8A04"
|
||||
:size="22"
|
||||
@click="$emit('retry', row)"
|
||||
/>
|
||||
</template>
|
||||
</MobileSheetHeader>
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="شناسه" :value="row.id" />
|
||||
<MobileDetailRow label="مشتری" :value="row.customer?.name || '-'" />
|
||||
<MobileDetailRow label="موبایل" :value="row.customer?.mobile || '-'" />
|
||||
<MobileDetailRow label="نوع" :value="row.type || '-'" />
|
||||
<MobileDetailRow label="مقدار" :value="row.amount ?? '-'" />
|
||||
<MobileDetailRow label="شرح" full-width :value="row.desc || '-'" />
|
||||
<MobileDetailRow label="وضعیت" :value="zarinStatusLabel(row.sync_status, row.zarin_id)" />
|
||||
<MobileDetailRow label="کد زرین" :value="row.zarin_id || '-'" />
|
||||
<MobileDetailRow label="زمان" :value="row.created_at ? toJalali(row.created_at) : '-'" />
|
||||
<MobileDetailRow v-if="row.res" label="پاسخ API" full-width :value="row.res" />
|
||||
</MobileInfoGrid>
|
||||
|
||||
<div
|
||||
v-if="row.sync_log"
|
||||
class="mt-3 rounded-lg bg-red-50 p-3 text-sm text-red-700 whitespace-pre-wrap"
|
||||
>
|
||||
{{ row.sync_log }}
|
||||
</div>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZarinRecord } from '@/api/zarin'
|
||||
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
||||
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||||
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
||||
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
||||
import { canRetryZarin, zarinStatusLabel } from '@/pages/menuPages/accounting/utils/zarinStatus'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: ZarinRecord | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'retry', item: ZarinRecord): void
|
||||
(e: 'register-customer', item: ZarinRecord): void
|
||||
}>()
|
||||
|
||||
const visibleProxy = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
})
|
||||
|
||||
const sheetTitle = computed(() => props.item?.customer?.name || 'سند زرین')
|
||||
|
||||
function canRetry(row: ZarinRecord) {
|
||||
return canRetryZarin(row)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="truncate text-sm font-700 text-gray-900">{{ customerName }}</div>
|
||||
<span class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-600" :class="statusClass">
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-600">
|
||||
<span>نوع: <span class="font-600 text-gray-900">{{ item.type || '-' }}</span></span>
|
||||
<span>مقدار: <span class="font-600 text-gray-900">{{ item.amount ?? '-' }}</span></span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400">{{ createdAtLabel }}</div>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZarinRecord } from '@/api/zarin'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
import { zarinStatusLabel } from '@/pages/menuPages/accounting/utils/zarinStatus'
|
||||
|
||||
const props = defineProps<{
|
||||
item: ZarinRecord
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: ZarinRecord): void
|
||||
}>()
|
||||
|
||||
const customerName = computed(() => props.item.customer?.name || '-')
|
||||
const createdAtLabel = computed(() =>
|
||||
props.item.created_at ? toJalali(props.item.created_at) : '-'
|
||||
)
|
||||
const statusText = computed(() =>
|
||||
zarinStatusLabel(props.item.sync_status, props.item.zarin_id)
|
||||
)
|
||||
const statusClass = computed(() => {
|
||||
const text = statusText.value
|
||||
if (text === 'موفق') return 'bg-green-100 text-green-700'
|
||||
if (text === 'ناموفق') return 'bg-red-100 text-red-700'
|
||||
return 'bg-amber-100 text-amber-700'
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="min-w-0 w-full max-w-full overflow-x-hidden">
|
||||
<BasicShowContext title="اسناد زرین">
|
||||
<div v-if="!isMobile" class="min-w-0 w-full max-w-full overflow-x-auto">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template #action="{ record }">
|
||||
<div class="flex justify-center gap-2">
|
||||
|
||||
<!-- دکمه ۱: اطلاعات کلی (همیشه نمایان) -->
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="openInfo(record)">
|
||||
<template #title><span>اطلاعات سند</span></template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
|
||||
<!-- دکمه ۲: ثبت مشتری در زرین (فقط اگر سند هنوز ثبت نشده و مشتری کد ندارد) -->
|
||||
<a-tooltip
|
||||
v-if="!record.zarin_id && !record.customer?.moshtari_code"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="openRegister(record)"
|
||||
>
|
||||
<template #title><span>ثبت مشتری در زرین</span></template>
|
||||
<Icon icon="vuesax-linear:profile-add" color="#7C3AED" />
|
||||
</a-tooltip>
|
||||
|
||||
<!-- دکمه ۳: ارسال به زرین (فقط اگر هنوز در زرین ثبت نشده) -->
|
||||
<a-tooltip
|
||||
v-if="!record.zarin_id"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="openSend(record)"
|
||||
>
|
||||
<template #title><span>ارسال به زرین</span></template>
|
||||
<Icon icon="vuesax-linear:send-2" color="#CA8A04" />
|
||||
</a-tooltip>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
</div>
|
||||
|
||||
<ZarinMobileCardList v-else ref="mobileListRef" />
|
||||
</BasicShowContext>
|
||||
|
||||
<!-- مودال اطلاعات کلی -->
|
||||
<BasicModal v-model:visible="infoVisible" title="اطلاعات سند" width="36rem" :footer="null">
|
||||
<div class="space-y-2 text-sm">
|
||||
<div
|
||||
v-for="item in infoItems"
|
||||
:key="item.label"
|
||||
class="flex justify-between gap-3 border-b border-gray-100 py-2"
|
||||
>
|
||||
<span class="text-gray-500">{{ item.label }}</span>
|
||||
<span class="break-all text-left">{{ item.value ?? '-' }}</span>
|
||||
</div>
|
||||
<div v-if="selected?.res" class="rounded-lg bg-gray-100 p-3 text-xs font-mono text-gray-700 whitespace-pre-wrap">
|
||||
{{ selected.res }}
|
||||
</div>
|
||||
<div v-if="selected?.sync_log" class="rounded-lg bg-red-50 p-3 text-red-700 whitespace-pre-wrap">
|
||||
{{ selected.sync_log }}
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
|
||||
<!-- مودال ارسال به زرین -->
|
||||
<ZarinRetryModal
|
||||
v-model="sendVisible"
|
||||
mode="retry-sanad"
|
||||
:zarin-id="selected?.id"
|
||||
@success="fetch"
|
||||
/>
|
||||
|
||||
<!-- مودال ثبت مشتری در زرین -->
|
||||
<ZarinRetryModal
|
||||
v-model="registerVisible"
|
||||
mode="register-customer"
|
||||
:customer-id="selected?.customer_id"
|
||||
:customer-name="selected?.customer?.name"
|
||||
@success="fetch"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import { getZarinTable, type ZarinRecord } from '@/api/zarin'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import ZarinRetryModal from '@/components/ZarinRetryModal.vue'
|
||||
import ZarinMobileCardList from '@/pages/menuPages/accounting/components/ZarinMobileCardList.vue'
|
||||
import { zarinStatusLabel } from '@/pages/menuPages/accounting/utils/zarinStatus'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
const infoVisible = ref(false)
|
||||
const sendVisible = ref(false)
|
||||
const registerVisible = ref(false)
|
||||
const selected = ref<ZarinRecord | null>(null)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ردیف',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
filterable: false,
|
||||
sortable: false,
|
||||
customRender: (r: any) => r.index + 1
|
||||
},
|
||||
{ title: 'مشتری', dataIndex: 'customer.name', key: 'customer.name', type: 'Text' },
|
||||
{ title: 'نوع', dataIndex: 'type', key: 'type', type: 'Text' },
|
||||
{ title: 'مقدار', dataIndex: 'amount', key: 'amount', type: 'Number' },
|
||||
{ title: 'شرح', dataIndex: 'desc', key: 'desc', type: 'Text' },
|
||||
{
|
||||
title: 'وضعیت',
|
||||
dataIndex: 'sync_status',
|
||||
key: 'sync_status',
|
||||
type: 'Text',
|
||||
filterable: false,
|
||||
customRender: (r: any) => zarinStatusLabel(r.record.sync_status, r.record.zarin_id)
|
||||
},
|
||||
{
|
||||
title: 'زمان',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
type: 'Text',
|
||||
customRender: (r: any) => toJalali(r.record.created_at)
|
||||
},
|
||||
{
|
||||
title: 'عملیات',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
slot: 'action',
|
||||
filterable: false
|
||||
}
|
||||
]
|
||||
|
||||
const tblProps = ref({
|
||||
columns,
|
||||
api: (params: TableInput) => getZarinTable(params)
|
||||
})
|
||||
|
||||
/** اطلاعاتی که برای هر سند حسابداری نیاز است (بدون جزئیات زرین‌محور) */
|
||||
const infoItems = computed(() => {
|
||||
const row = selected.value
|
||||
if (!row) return []
|
||||
return [
|
||||
{ label: 'شناسه سند', value: row.id },
|
||||
{ label: 'مشتری', value: row.customer?.name },
|
||||
{ label: 'موبایل', value: row.customer?.mobile },
|
||||
{ label: 'نوع', value: row.type },
|
||||
{ label: 'مقدار', value: row.amount },
|
||||
{ label: 'شرح', value: row.desc },
|
||||
{ label: 'زمان ثبت', value: row.created_at ? toJalali(row.created_at) : '-' },
|
||||
{ label: 'وضعیت', value: zarinStatusLabel(row.sync_status, row.zarin_id) },
|
||||
{ label: 'کد زرین', value: row.zarin_id || 'ثبت نشده' }
|
||||
]
|
||||
})
|
||||
|
||||
function openInfo(record: ZarinRecord) {
|
||||
selected.value = record
|
||||
infoVisible.value = true
|
||||
}
|
||||
|
||||
function openSend(record: ZarinRecord) {
|
||||
selected.value = record
|
||||
sendVisible.value = true
|
||||
}
|
||||
|
||||
function openRegister(record: ZarinRecord) {
|
||||
selected.value = record
|
||||
registerVisible.value = true
|
||||
}
|
||||
|
||||
async function fetch() {
|
||||
if (isMobile.value) {
|
||||
await mobileListRef.value?.fetch?.()
|
||||
return
|
||||
}
|
||||
await reload()
|
||||
}
|
||||
|
||||
defineExpose({ fetch })
|
||||
</script>
|
||||
@@ -3,18 +3,22 @@
|
||||
<BasicMainCard>
|
||||
<div
|
||||
class="flex h-full w-full min-w-0 max-w-full flex-col overflow-x-hidden"
|
||||
:class="activeTab === 'customer-sync' || activeTab === 'pargar-customer-sync' ? 'overflow-y-auto' : 'overflow-hidden'"
|
||||
:class="activeTab === 'customer-sync' || activeTab === 'pargar-customer-sync' || activeTab === 'zarin-customer-sync' ? 'overflow-y-auto' : 'overflow-hidden'"
|
||||
>
|
||||
<ATabs v-model:activeKey="activeTab" class="mb-3 shrink-0">
|
||||
<ATabPane key="reports" tab="گزارشات" />
|
||||
<ATabPane v-if="tahesabEnabled" key="tahesab" tab="اسناد ته‌حساب" />
|
||||
<ATabPane v-if="tahesabEnabled" key="customer-sync" tab="همگام سازی مشتریان در ته‌حساب" />
|
||||
<ATabPane v-if="zarinEnabled" key="zarin" tab="اسناد زرین" />
|
||||
<ATabPane v-if="zarinEnabled" key="zarin-customer-sync" tab="همگام سازی مشتریان در زرین" />
|
||||
<ATabPane v-if="pargarEnabled" key="pargar" tab="اسناد پرگار" />
|
||||
<ATabPane v-if="pargarEnabled" key="pargar-customer-sync" tab="همگام سازی مشتریان در پرگار" />
|
||||
</ATabs>
|
||||
<tbl v-if="activeTab === 'reports'" ref="table" class="min-h-0 flex-1" />
|
||||
<tahesabTbl v-else-if="tahesabEnabled && activeTab === 'tahesab'" ref="tahesabTable" class="min-h-0 flex-1" />
|
||||
<customerSync v-else-if="tahesabEnabled && activeTab === 'customer-sync'" class="shrink-0" />
|
||||
<zarinTbl v-else-if="zarinEnabled && activeTab === 'zarin'" ref="zarinTable" class="min-h-0 flex-1" />
|
||||
<zarinCustomerSync v-else-if="zarinEnabled && activeTab === 'zarin-customer-sync'" class="shrink-0" />
|
||||
<pargarTbl v-else-if="pargarEnabled && activeTab === 'pargar'" ref="pargarTable" class="min-h-0 flex-1" />
|
||||
<pargarCustomerSync v-else-if="pargarEnabled && activeTab === 'pargar-customer-sync'" class="shrink-0" />
|
||||
</div>
|
||||
@@ -147,6 +151,8 @@ import { ref } from 'vue'
|
||||
import tbl from './components/table.vue'
|
||||
import tahesabTbl from './components/tahesabTable.vue'
|
||||
import customerSync from './components/TahesabCustomerSync.vue'
|
||||
import zarinTbl from './components/zarinTable.vue'
|
||||
import zarinCustomerSync from './components/ZarinCustomerSync.vue'
|
||||
import pargarTbl from './components/pargarTable.vue'
|
||||
import pargarCustomerSync from './components/PargarCustomerSync.vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
@@ -166,13 +172,14 @@ import type { last } from '@/model/price'
|
||||
import { createOrder } from '@/api/order'
|
||||
import { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
|
||||
import { metalLabel } from '@/utils/adminMetalLabels'
|
||||
import { initAccountingSettingsFromApi, tahesabEnabledSetting, pargarEnabledSetting } from '@/utils/config'
|
||||
import { initAccountingSettingsFromApi, tahesabEnabledSetting, zarinEnabledSetting, pargarEnabledSetting } from '@/utils/config'
|
||||
|
||||
//loading
|
||||
const loading = ref<boolean>(false)
|
||||
const submitError = ref('')
|
||||
const activeTab = ref<'reports' | 'tahesab' | 'customer-sync' | 'pargar' | 'pargar-customer-sync'>('reports')
|
||||
const activeTab = ref<'reports' | 'tahesab' | 'customer-sync' | 'zarin' | 'zarin-customer-sync' | 'pargar' | 'pargar-customer-sync'>('reports')
|
||||
const tahesabEnabled = tahesabEnabledSetting
|
||||
const zarinEnabled = zarinEnabledSetting
|
||||
const pargarEnabled = pargarEnabledSetting
|
||||
|
||||
//define store
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export function zarinStatusLabel(status?: string, zarinId?: string | null): string {
|
||||
if (zarinId) return 'موفق'
|
||||
if (status === 'failed') return 'ناموفق'
|
||||
if (status === 'success') return 'موفق'
|
||||
// pending = ردیف محلی ساخته شده ولی هنوز در نرم‌افزار زرین ثبت نشده (نه «در صف»)
|
||||
return 'ارسال نشده'
|
||||
}
|
||||
|
||||
export function canRetryZarin(record: { zarin_id?: string | null; sync_status?: string }): boolean {
|
||||
return !record.zarin_id || record.sync_status === 'failed'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user