style(线索页面): 格式化LeadsPage.vue模板代码以提升可读性
本次提交仅对模板代码进行缩进和换行格式化,未修改任何业务逻辑,旨在提升代码的可读性与可维护性。
This commit is contained in:
@@ -89,30 +89,49 @@ onMounted(load);
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-intro"><div><p class="eyebrow">INBOX / LEADS</p><h2>需求线索</h2><p>按类型、状态和关键词筛选需求,并记录跟进状态。</p></div></div>
|
||||
<div class="page-intro">
|
||||
<div>
|
||||
<p class="eyebrow">INBOX / LEADS</p>
|
||||
<h2>需求线索</h2>
|
||||
<p>按类型、状态和关键词筛选需求,并记录跟进状态。</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-card shadow="never" class="panel-card lead-filter-card">
|
||||
<div class="lead-filters">
|
||||
<el-select v-model="leadType" aria-label="线索类型" placeholder="全部类型"><el-option v-for="option in leadTypeOptions" :key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select>
|
||||
<el-select v-model="status" aria-label="线索状态" placeholder="全部状态" clearable><el-option label="全部状态" value="" /><el-option v-for="option in leadStatusOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select>
|
||||
<el-select v-model="leadType" aria-label="线索类型" placeholder="全部类型"><el-option v-for="option in leadTypeOptions"
|
||||
:key="option.value || 'all'" :label="option.label" :value="option.value" /></el-select>
|
||||
<el-select v-model="status" aria-label="线索状态" placeholder="全部状态" clearable><el-option label="全部状态"
|
||||
value="" /><el-option v-for="option in leadStatusOptions" :key="option.value" :label="option.label"
|
||||
:value="option.value" /></el-select>
|
||||
<el-input v-model="keyword" clearable placeholder="搜索地点、手机号或备注" aria-label="搜索线索" @keyup.enter="load(1)" />
|
||||
<el-button type="primary" :loading="loading" @click="load(1)">查询</el-button>
|
||||
<el-button :disabled="loading" @click="resetFilters">重置</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false"><template #default><el-button link type="primary" @click="load(page)">重试</el-button></template></el-alert>
|
||||
<el-alert v-if="error" :title="error" type="error" show-icon :closable="false"><template #default><el-button link
|
||||
type="primary" @click="load(page)">重试</el-button></template></el-alert>
|
||||
<el-card shadow="never" class="panel-card">
|
||||
<el-skeleton v-if="loading" :rows="8" animated />
|
||||
<el-empty v-else-if="!leads.length" description="暂无符合条件的需求线索" />
|
||||
<template v-else>
|
||||
<el-table :data="leads" stripe row-key="id">
|
||||
<el-table-column label="需求" min-width="250"><template #default="{ row }"><div class="lead-summary"><strong>{{ row.contactName || "未填写联系人" }}</strong><span>{{ leadTitle(row) }} · {{ row.phone }}</span></div></template></el-table-column>
|
||||
<el-table-column label="需求" min-width="250"><template #default="{ row }">
|
||||
<div class="lead-summary"><strong>{{ row.contactName || "未填写联系人" }}</strong><span>{{ leadTitle(row) }} ·
|
||||
{{ row.phone }}</span></div>
|
||||
</template></el-table-column>
|
||||
<el-table-column prop="destination" label="目的地" min-width="130" />
|
||||
<el-table-column label="类型" width="100"><template #default="{ row }"><el-tag effect="plain">{{ row.leadType === "vehicle" ? "用车" : "一般" }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="状态" width="110"><template #default="{ row }"><el-tag :type="statusTagType(row.status)" effect="plain">{{ leadStatusLabel(row.status) }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="提交时间" min-width="175"><template #default="{ row }">{{ formatDate(row.createdAt) }}</template></el-table-column>
|
||||
<el-table-column label="操作" width="110" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="openDetail(row)">查看详情</el-button></template></el-table-column>
|
||||
<el-table-column label="类型" width="100"><template #default="{ row }"><el-tag effect="plain">{{ row.leadType
|
||||
=== "vehicle" ? "用车" : "一般" }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="状态" width="110"><template #default="{ row }"><el-tag :type="statusTagType(row.status)"
|
||||
effect="plain">{{ leadStatusLabel(row.status) }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="提交时间" min-width="175"><template #default="{ row }">{{ formatDate(row.createdAt)
|
||||
}}</template></el-table-column>
|
||||
<el-table-column label="操作" width="110" fixed="right"><template #default="{ row }"><el-button link
|
||||
type="primary" @click="openDetail(row)">查看详情</el-button></template></el-table-column>
|
||||
</el-table>
|
||||
<div class="lead-pagination"><span>共 {{ total }} 条</span><el-pagination v-model:current-page="page" v-model:page-size="pageSize" background layout="sizes, prev, pager, next, jumper" :page-sizes="[20, 50, 100]" :total="total" @current-change="load" @size-change="load(1)" /></div>
|
||||
<div class="lead-pagination"><span>共 {{ total }} 条</span><el-pagination v-model:current-page="page"
|
||||
v-model:page-size="pageSize" background layout="sizes, prev, pager, next, jumper"
|
||||
:page-sizes="[20, 50, 100]" :total="total" @current-change="load" @size-change="load(1)" /></div>
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
@@ -120,18 +139,37 @@ onMounted(load);
|
||||
<template v-if="selectedLead">
|
||||
<div class="lead-detail-card">
|
||||
<dl class="lead-detail-grid">
|
||||
<div class="lead-detail-item"><dt>联系人</dt><dd>{{ selectedLead.contactName || "未填写" }}</dd></div>
|
||||
<div class="lead-detail-item"><dt>联系方式</dt><dd>{{ selectedLead.phone || "未填写" }}</dd></div>
|
||||
<div class="lead-detail-item"><dt>需求类型</dt><dd>{{ selectedLead.leadType === "vehicle" ? "用车需求" : "一般需求" }}</dd></div>
|
||||
<div class="lead-detail-item"><dt>提交时间</dt><dd>{{ formatDate(selectedLead.createdAt) }}</dd></div>
|
||||
<div class="lead-detail-item"><dt>目的地</dt><dd>{{ selectedLead.destination || "未填写" }}</dd></div>
|
||||
<div class="lead-detail-item"><dt>出行日期</dt><dd>{{ formatDate(selectedLead.vehicleDemand?.travelDate || selectedLead.travelDate) }}</dd></div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>联系人</dt>
|
||||
<dd>{{ selectedLead.contactName || "未填写" }}</dd>
|
||||
</div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>联系方式</dt>
|
||||
<dd>{{ selectedLead.phone || "未填写" }}</dd>
|
||||
</div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>需求类型</dt>
|
||||
<dd>{{ selectedLead.leadType === "vehicle" ? "用车需求" : "一般需求" }}</dd>
|
||||
</div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>提交时间</dt>
|
||||
<dd>{{ formatDate(selectedLead.createdAt) }}</dd>
|
||||
</div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>目的地</dt>
|
||||
<dd>{{ selectedLead.destination || "未填写" }}</dd>
|
||||
</div>
|
||||
<div class="lead-detail-item">
|
||||
<dt>出行日期</dt>
|
||||
<dd>{{ formatDate(selectedLead.vehicleDemand?.travelDate || selectedLead.travelDate) }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<section v-if="selectedLead.vehicleDemand" class="lead-detail-section lead-detail-trip">
|
||||
<div class="lead-detail-section-title"><strong>用车行程</strong></div>
|
||||
<p>{{ selectedLead.vehicleDemand.pickupLocation }} → {{ selectedLead.vehicleDemand.dropoffLocation }}</p>
|
||||
<p>{{ selectedLead.vehicleDemand.peopleCount }} 人 · 行李 {{ selectedLead.vehicleDemand.luggageCount ?? "未填写" }} 件 · {{ selectedLead.vehicleDemand.vehicleOptionTitle || "未指定车型" }}</p>
|
||||
<p>{{ selectedLead.vehicleDemand.peopleCount }} 人 · 行李 {{ selectedLead.vehicleDemand.luggageCount ?? "未填写" }}
|
||||
件 · {{ selectedLead.vehicleDemand.vehicleOptionTitle || "未指定车型" }}</p>
|
||||
</section>
|
||||
<section class="lead-detail-section lead-detail-note">
|
||||
<div class="lead-detail-section-title"><strong>备注</strong></div>
|
||||
@@ -142,13 +180,18 @@ onMounted(load);
|
||||
<div v-if="selectedLead" class="lead-detail-footer">
|
||||
<div class="lead-detail-footer-status">
|
||||
<span>处理状态</span>
|
||||
<el-tag :type="statusTagType(pendingStatus || selectedLead.status)" effect="plain">{{ leadStatusLabel(pendingStatus || selectedLead.status) }}</el-tag>
|
||||
<el-tag :type="statusTagType(pendingStatus || selectedLead.status)" effect="plain">{{
|
||||
leadStatusLabel(pendingStatus || selectedLead.status) }}</el-tag>
|
||||
</div>
|
||||
<div class="lead-detail-footer-actions">
|
||||
<el-select v-permission="'admin:leads:update'" v-model="pendingStatus" :loading="updatingId === selectedLead.id" size="small" aria-label="选择处理状态">
|
||||
<el-option v-for="option in leadStatusOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
<el-select v-permission="'admin:leads:update'" v-model="pendingStatus"
|
||||
:loading="updatingId === selectedLead.id" aria-label="选择处理状态">
|
||||
<el-option v-for="option in leadStatusOptions" :key="option.value" :label="option.label"
|
||||
:value="option.value" />
|
||||
</el-select>
|
||||
<el-button v-permission="'admin:leads:update'" type="primary" :disabled="!pendingStatus || pendingStatus === selectedLead.status" :loading="updatingId === selectedLead.id" @click="submitStatus(selectedLead)">提交状态</el-button>
|
||||
<el-button v-permission="'admin:leads:update'" type="primary"
|
||||
:disabled="!pendingStatus || pendingStatus === selectedLead.status"
|
||||
:loading="updatingId === selectedLead.id" @click="submitStatus(selectedLead)">提交状态</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user