832 lines
21 KiB
Vue
832 lines
21 KiB
Vue
 
|
<script setup lang="ts">
|
|||
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|||
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
import { api } from '@/lib/api';
|
|||
|
|
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
|||
|
|
import { useAuthStore } from '@/stores/auth';
|
|||
|
|
import { canManageSettings } from '@/lib/roles';
|
|||
|
|
import {
|
|||
|
|
UiButton,
|
|||
|
|
UiEmptyState,
|
|||
|
|
UiPageHeader,
|
|||
|
|
UiPagination,
|
|||
|
|
} from '@/components/ui';
|
|||
|
|
import UiIcon from '@/components/UiIcon.vue';
|
|||
|
|
import type {
|
|||
|
|
LeadDto,
|
|||
|
|
LeadImportJobDto,
|
|||
|
|
LeadStageDto,
|
|||
|
|
OrgUserDto,
|
|||
|
|
PaginatedResponse,
|
|||
|
|
} from '@mento/shared';
|
|||
|
|
import { brand } from '@mento/shared';
|
|||
|
|
|
|||
|
|
const PAGE_SIZE = 20;
|
|||
|
|
|
|||
|
|
type SortKey = 'updated' | 'newest' | 'follow_up' | 'last_contact';
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const auth = useAuthStore();
|
|||
|
|
const isAdmin = computed(() => canManageSettings(auth.user?.role));
|
|||
|
|
|
|||
|
|
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const busy = ref(false);
|
|||
|
|
const error = ref('');
|
|||
|
|
const okMsg = ref('');
|
|||
|
|
const data = ref<PaginatedResponse<LeadDto> | null>(null);
|
|||
|
|
const stages = ref<LeadStageDto[]>([]);
|
|||
|
|
const users = ref<OrgUserDto[]>([]);
|
|||
|
|
const selected = ref<Set<string>>(new Set());
|
|||
|
|
const sortOpen = ref(false);
|
|||
|
|
const filterOpen = ref(false);
|
|||
|
|
const assignOpen = ref(false);
|
|||
|
|
const stageOpen = ref(false);
|
|||
|
|
const assignUserId = ref('');
|
|||
|
|
const bulkStageId = ref('');
|
|||
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|||
|
|
const importJob = ref<LeadImportJobDto | null>(null);
|
|||
|
|
let importTimer: ReturnType<typeof setInterval> | null = null;
|
|||
|
|
|
|||
|
|
const page = computed(() => {
|
|||
|
|
const raw = Number(route.query.page);
|
|||
|
|
return Number.isFinite(raw) && raw > 0 ? raw : 1;
|
|||
|
|
});
|
|||
|
|
const sort = computed<SortKey>(() => {
|
|||
|
|
const s = route.query.sort;
|
|||
|
|
if (s === 'newest' || s === 'follow_up' || s === 'last_contact') return s;
|
|||
|
|
return 'updated';
|
|||
|
|
});
|
|||
|
|
const stageId = computed(() =>
|
|||
|
|
typeof route.query.stageId === 'string' ? route.query.stageId : '',
|
|||
|
|
);
|
|||
|
|
const assigneeId = computed(() =>
|
|||
|
|
typeof route.query.assigneeId === 'string' ? route.query.assigneeId : '',
|
|||
|
|
);
|
|||
|
|
const unassigned = computed(
|
|||
|
|
() => route.query.unassigned === '1' || route.query.unassigned === 'true',
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const total = computed(() => data.value?.total ?? 0);
|
|||
|
|
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)));
|
|||
|
|
const allSelected = computed(
|
|||
|
|
() =>
|
|||
|
|
Boolean(data.value?.items.length) &&
|
|||
|
|
data.value!.items.every((l) => selected.value.has(l.id)),
|
|||
|
|
);
|
|||
|
|
const selectedIds = computed(() => [...selected.value]);
|
|||
|
|
|
|||
|
|
const sortLabels: Record<SortKey, string> = {
|
|||
|
|
updated: 'آخرین بهروزرسانی',
|
|||
|
|
newest: 'جدیدترین',
|
|||
|
|
follow_up: 'پیگیری بعدی',
|
|||
|
|
last_contact: 'آخرین تماس',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function formatDate(value: string | null) {
|
|||
|
|
if (!value) return '—';
|
|||
|
|
try {
|
|||
|
|
return formatJalaliNumeric(new Date(value));
|
|||
|
|
} catch {
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closePopups() {
|
|||
|
|
sortOpen.value = false;
|
|||
|
|
filterOpen.value = false;
|
|||
|
|
assignOpen.value = false;
|
|||
|
|
stageOpen.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function patchQuery(next: Record<string, string | undefined>) {
|
|||
|
|
const query = { ...route.query, ...next };
|
|||
|
|
for (const key of Object.keys(query)) {
|
|||
|
|
if (query[key] == null || query[key] === '') delete query[key];
|
|||
|
|
}
|
|||
|
|
void router.replace({ name: 'leads', query });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onSearch() {
|
|||
|
|
patchQuery({ q: q.value.trim() || undefined, page: undefined });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setSort(next: SortKey) {
|
|||
|
|
sortOpen.value = false;
|
|||
|
|
patchQuery({ sort: next === 'updated' ? undefined : next, page: undefined });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setStageFilter(id: string) {
|
|||
|
|
filterOpen.value = false;
|
|||
|
|
patchQuery({ stageId: id || undefined, page: undefined });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setAssigneeFilter(id: string) {
|
|||
|
|
filterOpen.value = false;
|
|||
|
|
patchQuery({
|
|||
|
|
assigneeId: id || undefined,
|
|||
|
|
unassigned: undefined,
|
|||
|
|
page: undefined,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setUnassigned(on: boolean) {
|
|||
|
|
filterOpen.value = false;
|
|||
|
|
patchQuery({
|
|||
|
|
unassigned: on ? '1' : undefined,
|
|||
|
|
assigneeId: undefined,
|
|||
|
|
page: undefined,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setPage(next: number) {
|
|||
|
|
if (next < 1 || next > pageCount.value) return;
|
|||
|
|
patchQuery({ page: next === 1 ? undefined : String(next) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleOne(id: string, checked: boolean) {
|
|||
|
|
const next = new Set(selected.value);
|
|||
|
|
if (checked) next.add(id);
|
|||
|
|
else next.delete(id);
|
|||
|
|
selected.value = next;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleAll(checked: boolean) {
|
|||
|
|
if (!checked) {
|
|||
|
|
selected.value = new Set();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
selected.value = new Set(data.value?.items.map((l) => l.id) ?? []);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadMeta() {
|
|||
|
|
const [stagesRes, usersRes] = await Promise.all([
|
|||
|
|
api.get<LeadStageDto[]>('/leads/stages'),
|
|||
|
|
api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
|
|||
|
|
]);
|
|||
|
|
stages.value = stagesRes.data;
|
|||
|
|
users.value = usersRes.data.filter((u) => u.isActive !== false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
loading.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
closePopups();
|
|||
|
|
try {
|
|||
|
|
const { data: res } = await api.get<PaginatedResponse<LeadDto>>('/leads', {
|
|||
|
|
params: {
|
|||
|
|
q: q.value || undefined,
|
|||
|
|
page: page.value,
|
|||
|
|
limit: PAGE_SIZE,
|
|||
|
|
sort: sort.value === 'updated' ? undefined : sort.value,
|
|||
|
|
stageId: stageId.value || undefined,
|
|||
|
|
assigneeId: assigneeId.value || undefined,
|
|||
|
|
unassigned: unassigned.value ? '1' : undefined,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
data.value = res;
|
|||
|
|
selected.value = new Set(
|
|||
|
|
[...selected.value].filter((id) => res.items.some((l) => l.id === id)),
|
|||
|
|
);
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value =
|
|||
|
|
axios.isAxiosError(e) && !e.response
|
|||
|
|
? 'اتصال به API برقرار نشد.'
|
|||
|
|
: 'بارگذاری لیدها ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function assignSelected() {
|
|||
|
|
if (!assignUserId.value || !selectedIds.value.length) return;
|
|||
|
|
busy.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
await api.post('/leads/assign', {
|
|||
|
|
leadIds: selectedIds.value,
|
|||
|
|
assigneeId: assignUserId.value,
|
|||
|
|
});
|
|||
|
|
okMsg.value = `${toFaDigits(selectedIds.value.length)} لید تخصیص داده شد.`;
|
|||
|
|
selected.value = new Set();
|
|||
|
|
assignOpen.value = false;
|
|||
|
|
await load();
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'تخصیص ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
busy.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function bulkStageSelected() {
|
|||
|
|
if (!bulkStageId.value || !selectedIds.value.length) return;
|
|||
|
|
busy.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
await api.post('/leads/bulk-stage', {
|
|||
|
|
leadIds: selectedIds.value,
|
|||
|
|
stageId: bulkStageId.value,
|
|||
|
|
});
|
|||
|
|
okMsg.value = `وضعیت ${toFaDigits(selectedIds.value.length)} لید بهروز شد.`;
|
|||
|
|
selected.value = new Set();
|
|||
|
|
stageOpen.value = false;
|
|||
|
|
await load();
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'تغییر وضعیت گروهی ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
busy.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function archiveSelected() {
|
|||
|
|
if (!selectedIds.value.length) return;
|
|||
|
|
if (!confirm(`${toFaDigits(selectedIds.value.length)} لید بایگانی شود؟`)) return;
|
|||
|
|
busy.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
await api.post('/leads/archive', { leadIds: selectedIds.value });
|
|||
|
|
okMsg.value = `${toFaDigits(selectedIds.value.length)} لید بایگانی شد.`;
|
|||
|
|
selected.value = new Set();
|
|||
|
|
await load();
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'بایگانی ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
busy.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function exportExcel() {
|
|||
|
|
busy.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
const { data: blob } = await api.get<Blob>('/leads/export', {
|
|||
|
|
responseType: 'blob',
|
|||
|
|
});
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = `${brand.filePrefix}-leads.xlsx`;
|
|||
|
|
a.click();
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'خروجی اکسل ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
busy.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopImportPoll() {
|
|||
|
|
if (importTimer) {
|
|||
|
|
clearInterval(importTimer);
|
|||
|
|
importTimer = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function pollImport(jobId: string) {
|
|||
|
|
try {
|
|||
|
|
const { data: job } = await api.get<LeadImportJobDto>(`/leads/imports/${jobId}`);
|
|||
|
|
importJob.value = job;
|
|||
|
|
if (job.status === 'done' || job.status === 'failed' || job.status === 'completed') {
|
|||
|
|
stopImportPoll();
|
|||
|
|
okMsg.value = `ورود: موفق ${toFaDigits(job.successCount)} · تکراری ${toFaDigits(job.duplicateCount)} · خطا ${toFaDigits(job.errorCount)}`;
|
|||
|
|
await load();
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
stopImportPoll();
|
|||
|
|
error.value = 'پیگیری وضعیت ورود ناموفق بود.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function startImportPoll(jobId: string) {
|
|||
|
|
stopImportPoll();
|
|||
|
|
void pollImport(jobId);
|
|||
|
|
importTimer = setInterval(() => void pollImport(jobId), 1500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function onImportFile(ev: Event) {
|
|||
|
|
const input = ev.target as HTMLInputElement;
|
|||
|
|
const file = input.files?.[0];
|
|||
|
|
input.value = '';
|
|||
|
|
if (!file) return;
|
|||
|
|
busy.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
okMsg.value = '';
|
|||
|
|
try {
|
|||
|
|
const form = new FormData();
|
|||
|
|
form.append('file', file);
|
|||
|
|
const { data: job } = await api.post<LeadImportJobDto>('/leads/import/file', form, {
|
|||
|
|
headers: { 'Content-Type': 'multipart/form-data' },
|
|||
|
|
});
|
|||
|
|
importJob.value = job;
|
|||
|
|
startImportPoll(job.id);
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'ورود فایل ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
busy.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goDetail(id: string) {
|
|||
|
|
void router.push({ name: 'lead-detail', params: { id } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => [
|
|||
|
|
route.query.q,
|
|||
|
|
route.query.page,
|
|||
|
|
route.query.sort,
|
|||
|
|
route.query.stageId,
|
|||
|
|
route.query.assigneeId,
|
|||
|
|
route.query.unassigned,
|
|||
|
|
],
|
|||
|
|
() => {
|
|||
|
|
q.value = typeof route.query.q === 'string' ? route.query.q : '';
|
|||
|
|
void load();
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
await loadMeta();
|
|||
|
|
await load();
|
|||
|
|
const jobId = typeof route.query.jobId === 'string' ? route.query.jobId : '';
|
|||
|
|
if (jobId) startImportPoll(jobId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onBeforeUnmount(stopImportPoll);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="page" @click="closePopups">
|
|||
|
|
<UiPageHeader title="لیدها" lead="مدیریت سرنخها، تخصیص و پیگیری">
|
|||
|
|
<template #actions>
|
|||
|
|
<RouterLink class="link-btn" :to="{ name: 'leads-board' }">
|
|||
|
|
<UiButton variant="ghost" size="sm">کاریز لیدها</UiButton>
|
|||
|
|
</RouterLink>
|
|||
|
|
<UiButton
|
|||
|
|
v-if="isAdmin"
|
|||
|
|
variant="ghost"
|
|||
|
|
size="sm"
|
|||
|
|
:disabled="busy"
|
|||
|
|
@click.stop="exportExcel"
|
|||
|
|
>
|
|||
|
|
خروجی اکسل
|
|||
|
|
</UiButton>
|
|||
|
|
<UiButton
|
|||
|
|
v-if="isAdmin"
|
|||
|
|
variant="ghost"
|
|||
|
|
size="sm"
|
|||
|
|
:disabled="busy"
|
|||
|
|
@click.stop="fileInput?.click()"
|
|||
|
|
>
|
|||
|
|
ورود از فایل
|
|||
|
|
</UiButton>
|
|||
|
|
<input
|
|||
|
|
ref="fileInput"
|
|||
|
|
type="file"
|
|||
|
|
accept=".xlsx,.xls,.csv"
|
|||
|
|
hidden
|
|||
|
|
@change="onImportFile"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</UiPageHeader>
|
|||
|
|
|
|||
|
|
<div class="toolbar">
|
|||
|
|
<form class="search" @submit.prevent="onSearch">
|
|||
|
|
<UiIcon name="search" :size="16" />
|
|||
|
|
<input v-model="q" type="search" placeholder="جستجو نام، موبایل، شهر…" />
|
|||
|
|
</form>
|
|||
|
|
<div class="toolbar-tools">
|
|||
|
|
<div class="pop">
|
|||
|
|
<button
|
|||
|
|
class="tool"
|
|||
|
|
type="button"
|
|||
|
|
@click.stop="sortOpen = !sortOpen; filterOpen = false"
|
|||
|
|
>
|
|||
|
|
<UiIcon name="trend" :size="16" />
|
|||
|
|
<span class="tool-label">مرتبسازی</span>
|
|||
|
|
</button>
|
|||
|
|
<ul v-if="sortOpen" class="menu">
|
|||
|
|
<li v-for="(label, key) in sortLabels" :key="key">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: sort === key }"
|
|||
|
|
@click.stop="setSort(key as SortKey)"
|
|||
|
|
>
|
|||
|
|
{{ label }}
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="pop">
|
|||
|
|
<button
|
|||
|
|
class="tool"
|
|||
|
|
type="button"
|
|||
|
|
@click.stop="filterOpen = !filterOpen; sortOpen = false"
|
|||
|
|
>
|
|||
|
|
<UiIcon name="filter" :size="16" />
|
|||
|
|
<span class="tool-label">فیلتر</span>
|
|||
|
|
</button>
|
|||
|
|
<ul v-if="filterOpen" class="menu wide">
|
|||
|
|
<li class="menu-label">وضعیت</li>
|
|||
|
|
<li>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: !stageId }"
|
|||
|
|
@click.stop="setStageFilter('')"
|
|||
|
|
>
|
|||
|
|
همه
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li v-for="s in stages" :key="s.id">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: stageId === s.id }"
|
|||
|
|
@click.stop="setStageFilter(s.id)"
|
|||
|
|
>
|
|||
|
|
{{ s.name }}
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li class="menu-label">کارشناس</li>
|
|||
|
|
<li>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: !assigneeId && !unassigned }"
|
|||
|
|
@click.stop="setAssigneeFilter('')"
|
|||
|
|
>
|
|||
|
|
همه
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: unassigned }"
|
|||
|
|
@click.stop="setUnassigned(true)"
|
|||
|
|
>
|
|||
|
|
بدون کارشناس
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
<li v-for="u in users" :key="u.id">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
:class="{ on: assigneeId === u.id }"
|
|||
|
|
@click.stop="setAssigneeFilter(u.id)"
|
|||
|
|
>
|
|||
|
|
{{ u.fullName }}
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="selectedIds.length" class="bulk-bar" @click.stop>
|
|||
|
|
<span>{{ toFaDigits(selectedIds.length) }} مورد انتخابشده</span>
|
|||
|
|
<template v-if="isAdmin">
|
|||
|
|
<div class="pop">
|
|||
|
|
<UiButton size="sm" variant="ghost" @click="assignOpen = !assignOpen">
|
|||
|
|
تخصیص
|
|||
|
|
</UiButton>
|
|||
|
|
<div v-if="assignOpen" class="menu panel">
|
|||
|
|
<select v-model="assignUserId">
|
|||
|
|
<option value="">انتخاب کارشناس…</option>
|
|||
|
|
<option v-for="u in users" :key="u.id" :value="u.id">
|
|||
|
|
{{ u.fullName }}
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
<UiButton size="sm" :disabled="!assignUserId || busy" @click="assignSelected">
|
|||
|
|
اعمال
|
|||
|
|
</UiButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="pop">
|
|||
|
|
<UiButton size="sm" variant="ghost" @click="stageOpen = !stageOpen">
|
|||
|
|
تغییر وضعیت
|
|||
|
|
</UiButton>
|
|||
|
|
<div v-if="stageOpen" class="menu panel">
|
|||
|
|
<select v-model="bulkStageId">
|
|||
|
|
<option value="">انتخاب وضعیت…</option>
|
|||
|
|
<option v-for="s in stages" :key="s.id" :value="s.id">
|
|||
|
|
{{ s.name }}
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
<UiButton size="sm" :disabled="!bulkStageId || busy" @click="bulkStageSelected">
|
|||
|
|
اعمال
|
|||
|
|
</UiButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<UiButton size="sm" variant="ghost" :disabled="busy" @click="archiveSelected">
|
|||
|
|
بایگانی
|
|||
|
|
</UiButton>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p v-if="importJob && importJob.status !== 'done' && importJob.status !== 'completed' && importJob.status !== 'failed'" class="ok">
|
|||
|
|
ورود فایل: {{ toFaDigits(importJob.processedCount) }} / {{ toFaDigits(importJob.totalCount) }}
|
|||
|
|
</p>
|
|||
|
|
<p v-if="okMsg" class="ok">{{ okMsg }}</p>
|
|||
|
|
<p v-if="error" class="error">{{ error }}</p>
|
|||
|
|
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
|||
|
|
|
|||
|
|
<template v-else-if="data?.items.length">
|
|||
|
|
<div class="table-wrap">
|
|||
|
|
<table class="data-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th class="check-col">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
:checked="allSelected"
|
|||
|
|
@click.stop
|
|||
|
|
@change="toggleAll(($event.target as HTMLInputElement).checked)"
|
|||
|
|
/>
|
|||
|
|
</th>
|
|||
|
|
<th>نام</th>
|
|||
|
|
<th>موبایل</th>
|
|||
|
|
<th>شهر</th>
|
|||
|
|
<th>وضعیت</th>
|
|||
|
|
<th>کارشناس</th>
|
|||
|
|
<th>آخرین تماس</th>
|
|||
|
|
<th>پیگیری بعدی</th>
|
|||
|
|
<th>منبع</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr
|
|||
|
|
v-for="lead in data.items"
|
|||
|
|
:key="lead.id"
|
|||
|
|
class="row-click"
|
|||
|
|
@click="goDetail(lead.id)"
|
|||
|
|
>
|
|||
|
|
<td class="check-col" @click.stop>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
:checked="selected.has(lead.id)"
|
|||
|
|
@change="toggleOne(lead.id, ($event.target as HTMLInputElement).checked)"
|
|||
|
|
/>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<strong>{{ lead.title }}</strong>
|
|||
|
|
<span v-if="lead.contactName" class="sub">{{ lead.contactName }}</span>
|
|||
|
|
</td>
|
|||
|
|
<td dir="ltr">{{ lead.mobile || '—' }}</td>
|
|||
|
|
<td>{{ lead.city || '—' }}</td>
|
|||
|
|
<td>
|
|||
|
|
<span class="stage-pill">{{ lead.stageName }}</span>
|
|||
|
|
</td>
|
|||
|
|
<td>{{ lead.assigneeName || '—' }}</td>
|
|||
|
|
<td>{{ formatDate(lead.lastContactAt) }}</td>
|
|||
|
|
<td>{{ formatDate(lead.nextFollowUpAt) }}</td>
|
|||
|
|
<td>{{ lead.source || '—' }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<UiPagination
|
|||
|
|
v-if="total"
|
|||
|
|
:page="page"
|
|||
|
|
:total-pages="pageCount"
|
|||
|
|
:total-items="total"
|
|||
|
|
@update:page="setPage"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<UiEmptyState
|
|||
|
|
v-else-if="!loading"
|
|||
|
|
title="لیدی ثبت نشده است."
|
|||
|
|
description="از ورود فایل استفاده کنید یا لید جدید بسازید."
|
|||
|
|
/>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.page {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 1rem;
|
|||
|
|
width: 100%;
|
|||
|
|
min-width: 0;
|
|||
|
|
max-width: 100%;
|
|||
|
|
overflow-x: clip;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.link-btn {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toolbar {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.55rem;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toolbar-tools {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.45rem;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
flex: 1 1 14rem;
|
|||
|
|
min-width: 180px;
|
|||
|
|
max-width: 400px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.45rem;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 0 0.75rem;
|
|||
|
|
min-height: var(--control-h);
|
|||
|
|
height: var(--control-h);
|
|||
|
|
color: var(--muted);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search:focus-within {
|
|||
|
|
border-color: var(--accent);
|
|||
|
|
box-shadow: 0 0 0 2px var(--accent-soft);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search input {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 0;
|
|||
|
|
outline: none;
|
|||
|
|
background: transparent;
|
|||
|
|
font: inherit;
|
|||
|
|
font-size: var(--fs-sm);
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tool {
|
|||
|
|
min-height: var(--control-h);
|
|||
|
|
height: var(--control-h);
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 0 0.75rem;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.35rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font: inherit;
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu {
|
|||
|
|
position: absolute;
|
|||
|
|
top: calc(100% + 4px);
|
|||
|
|
inset-inline-end: 0;
|
|||
|
|
z-index: 20;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0.35rem;
|
|||
|
|
list-style: none;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
|
|||
|
|
min-width: 11rem;
|
|||
|
|
max-height: 18rem;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu.wide {
|
|||
|
|
min-width: 14rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu.panel {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
padding: 0.65rem;
|
|||
|
|
min-width: 14rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu button {
|
|||
|
|
width: 100%;
|
|||
|
|
border: 0;
|
|||
|
|
background: none;
|
|||
|
|
text-align: start;
|
|||
|
|
padding: 0.45rem 0.55rem;
|
|||
|
|
border-radius: calc(var(--radius) - 2px);
|
|||
|
|
font: inherit;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu button.on,
|
|||
|
|
.menu button:hover {
|
|||
|
|
background: var(--accent-soft);
|
|||
|
|
color: var(--accent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-label {
|
|||
|
|
padding: 0.35rem 0.55rem 0.15rem;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu select {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: var(--control-h);
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
padding: 0 0.5rem;
|
|||
|
|
font: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bulk-bar {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0.55rem 0.75rem;
|
|||
|
|
background: var(--accent-soft);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-wrap {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: var(--radius);
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
font-size: var(--fs-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-table th,
|
|||
|
|
.data-table td {
|
|||
|
|
padding: 0.65rem 0.75rem;
|
|||
|
|
text-align: start;
|
|||
|
|
border-bottom: 1px solid var(--line);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-table th {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--muted);
|
|||
|
|
background: color-mix(in srgb, var(--surface-2, #f8fafc) 80%, #fff);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-click {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-click:hover {
|
|||
|
|
background: color-mix(in srgb, var(--accent-soft) 55%, #fff);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.check-col {
|
|||
|
|
width: 2.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub {
|
|||
|
|
display: block;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stage-pill {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0.15rem 0.55rem;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: var(--accent-soft);
|
|||
|
|
color: var(--accent);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.muted {
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ok {
|
|||
|
|
color: #0f766e;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error {
|
|||
|
|
color: #b91c1c;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.tool-label {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|