xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整代码格式

Browse Source
This commit is contained in:
浅念
2025-07-24 17:28:51 +08:00
parent 858147fbbd
commit f18cfdb69e
4 changed files with 627 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+18 -18
View File
@@ -58,59 +58,59 @@
} }
</script> </script>
<style> <style>
.boxshadow { .boxshadow {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
background: var(--art-main-bg-color); background: var(--art-main-bg-color);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.border{ .border {
width: 6px; width: 6px;
height: 22px; height: 22px;
border-radius: 3px; border-radius: 3px;
background: #3471FF; background: #3471FF;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
} }
.el-dialog { .el-dialog {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.el-dialog::before { .el-dialog::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 0; z-index: 0;
background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 50%); background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 50%);
pointer-events: none; pointer-events: none;
} }
.el-dialog__header, .el-dialog__header,
.el-dialog__body, .el-dialog__body,
.el-dialog__footer { .el-dialog__footer {
background: transparent !important; background: transparent !important;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.el-dialog__header{ .el-dialog__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
padding-right: 40px; padding-right: 40px;
} }
.el-dialog__title{ .el-dialog__title {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.el-dialog__headerbtn{ .el-dialog__headerbtn {
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
</style> </style>
src/store/modules/user.ts
+2 -2
View File
@@ -195,9 +195,9 @@ export const useUserStore = defineStore(
persist: { persist: {
key: 'user', key: 'user',
storage: localStorage, storage: localStorage,
afterRestore: (ctx) => { afterRestore: (ctx: { store: { restoreTokenTimer: () => void } }) => {
ctx.store.restoreTokenTimer() ctx.store.restoreTokenTimer()
} }
} } as any
} }
) )
src/views/crmpc/highseas/index.vue
+81 -78
View File
@@ -35,8 +35,9 @@
<el-table-column label="状态" min-width="140"> <el-table-column label="状态" min-width="140">
<template #default="scope"> <template #default="scope">
<span :class="getCountdownClass(scope.row.follow_next)"> <span :class="getCountdownClass(scope.row.follow_next)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span> <i class="iconfont-sys">&#xe7b1;</i>
</span>
{{ getCountdown(scope.row.follow_next) }} {{ getCountdown(scope.row.follow_next) }}
</span> </span>
</template> </template>
@@ -44,11 +45,15 @@
<el-table-column fixed="right" label="操作" width="160px"> <el-table-column fixed="right" label="操作" width="160px">
<template #default="scope"> <template #default="scope">
<div class="follow-detli" @click="onDetail(scope.row)"> <div class="follow-detli" @click="onDetail(scope.row)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe70f;</i></span> <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe70f;</i>
</span>
详情 详情
</div> </div>
<div class="follow-action" @click="onFollow(scope.row)"> <div class="follow-action" @click="onFollow(scope.row)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe841;</i></span> <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe841;</i>
</span>
领单 领单
</div> </div>
</template> </template>
@@ -58,42 +63,40 @@
</div> </div>
</div> </div>
<el-dialog v-model="detailDialogVisible" title="详情" width="400px"> <el-dialog v-model="detailDialogVisible" title="详情" width="400px">
<div v-if="detailRow" v-html="detailRow.desc_collect" > <div v-if="detailRow" v-html="detailRow.desc_collect"></div>
</div>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { CrmService } from '@/api/crmApi' import { CrmService } from '@/api/crmApi'
const loading = ref(false) const loading = ref(false)
const pagination = reactive({ const pagination = reactive({
currentPage: 1, currentPage: 1,
pageSize: 20, pageSize: 20,
total: 0 total: 0
}) })
const remindRange = ref('') const remindRange = ref('')
const tableData = ref<any[]>([]) const tableData = ref<any[]>([])
watch([remindRange], () => { watch([remindRange], () => {
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
}) })
// 获取列表数据 // 获取列表数据
const gettableList = async () => { const gettableList = async () => {
loading.value = true loading.value = true
try { try {
const { currentPage, pageSize } = pagination const { currentPage, pageSize } = pagination
const params: any = { const params: any = {
current: currentPage, current: currentPage,
size: pageSize, size: pageSize,
seas:'seas' seas: 'seas'
} }
if (remindRange.value) params.follow_last = remindRange.value if (remindRange.value) params.follow_last = remindRange.value
const { data, current, size, total } = await CrmService.getcustomerList(params) const { data, current, size, total } = await CrmService.getcustomerList(params)
tableData.value = data.map((item: any, index: number) => ({ tableData.value = data.map((item: any) => ({
...item ...item
})) }))
Object.assign(pagination, { currentPage: current, pageSize: size, total }) Object.assign(pagination, { currentPage: current, pageSize: size, total })
@@ -102,8 +105,8 @@ const gettableList = async () => {
} finally { } finally {
loading.value = false loading.value = false
} }
} }
// 选中的行数据 // 选中的行数据
const selectedRows = ref<any[]>([]) const selectedRows = ref<any[]>([])
// 处理表格行选择变化 // 处理表格行选择变化
const handleSelectionChange = (selection: any[]) => { const handleSelectionChange = (selection: any[]) => {
@@ -119,26 +122,27 @@ const gettableList = async () => {
pagination.currentPage = newCurrentPage pagination.currentPage = newCurrentPage
gettableList() gettableList()
} }
const timer = ref(0) const timer = ref(0)
const refreshKey = ref(0) const refreshKey = ref(0)
const detailDialogVisible = ref(false) const detailDialogVisible = ref(false)
const detailRow = ref<any>(null) const detailRow = ref<any>(null)
onMounted(() => { onMounted(() => {
gettableList() gettableList()
timer.value = window.setInterval(() => { timer.value = window.setInterval(() => {
refreshKey.value++ refreshKey.value++
}, 1000) }, 1000)
}) })
onUnmounted(() => { onUnmounted(() => {
if (timer.value) { if (timer.value) {
clearInterval(timer.value) clearInterval(timer.value)
} }
}) })
function getCountdown(targetDate: string) { function getCountdown(targetDate: string) {
// 让 refreshKey 成为依赖，确保每秒刷新 // 让 refreshKey 成为依赖，确保每秒刷新
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
refreshKey.value refreshKey.value
const now = dayjs() const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss') const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
@@ -150,51 +154,49 @@ function getCountdown(targetDate: string) {
const minutes = Math.floor((diff / (1000 * 60)) % 60) const minutes = Math.floor((diff / (1000 * 60)) % 60)
const seconds = Math.floor((diff / 1000) % 60) const seconds = Math.floor((diff / 1000) % 60)
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒` return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
} }
function getCountdownClass(targetDate: string) { function getCountdownClass(targetDate: string) {
const now = dayjs() const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss') const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
if (!target.isValid() || target.diff(now) <= 0) { if (!target.isValid() || target.diff(now) <= 0) {
return 'countdown-danger' return 'countdown-danger'
} }
return 'countdown-success' return 'countdown-success'
} }
const onFollow = async (row: any) => { const onFollow = async (row: any) => {
ElMessageBox.confirm( ElMessageBox.confirm('确定要领取此客户吗？', '提示', {
'确定要领取此客户吗？',
'提示',
{
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
} })
).then(async () => { .then(async () => {
const res = await CrmService.customerclaim({customer_id:row.id}) const res = await CrmService.customerclaim({ customer_id: row.id })
ElMessage.success(res?.message || '提交成功！') ElMessage.success(res?.message || '提交成功！')
gettableList() gettableList()
// 你可以在这里调用接口或做后续处理 // 你可以在这里调用接口或做后续处理
}).catch(() => { })
.catch(() => {
// 用户点击了取消 // 用户点击了取消
}) })
} }
function onDetail(row: any) { function onDetail(row: any) {
detailRow.value = row detailRow.value = row
detailDialogVisible.value = true detailDialogVisible.value = true
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.boxshadow { .boxshadow {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
background:var(--el-card-bg-color); background: var(--el-card-bg-color);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.heard { .heard {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -203,7 +205,7 @@ function onDetail(row: any) {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
border-left: 4px solid #3471FF; border-left: 4px solid #3471ff;
padding-left: 12px; padding-left: 12px;
height: 32px; height: 32px;
display: flex; display: flex;
@@ -216,9 +218,9 @@ function onDetail(row: any) {
.heard-select { .heard-select {
width: 120px; width: 120px;
} }
} }
.dark { .dark {
.card-list { .card-list {
.art-custom-card { .art-custom-card {
.iconfont-sys { .iconfont-sys {
@@ -226,17 +228,19 @@ function onDetail(row: any) {
} }
} }
} }
} }
.table {
.table { :deep(.el-table__empty-block) {
height: 300px !important;
}
:deep(.el-table__header th) { :deep(.el-table__header th) {
background: #f7f9fa !important; background: #f7f9fa !important;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
:deep(.el-table__body tr.custom-table-row td) { :deep(.el-table__body tr.custom-table-row td) {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
:deep(.el-table__body tr td:last-child) { :deep(.el-table__body tr td:last-child) {
border-right: none !important; border-right: none !important;
@@ -245,50 +249,49 @@ function onDetail(row: any) {
border-bottom: none !important; border-bottom: none !important;
} }
:deep(.el-table__header-wrapper th) { :deep(.el-table__header-wrapper th) {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
:deep(.el-table__header-wrapper th:last-child) { :deep(.el-table__header-wrapper th:last-child) {
border-right: none !important; border-right: none !important;
} }
:deep(.el-table) { :deep(.el-table) {
border: 1px solid #F7F9FA !important; border: 1px solid #f7f9fa !important;
border-radius: 6px; border-radius: 6px;
} }
:deep(.el-table th), :deep(.el-table th),
:deep(.el-table td) { :deep(.el-table td) {
text-align: center !important; text-align: center !important;
} }
} }
.countdown-danger { .countdown-danger {
color: #FF0000 !important; color: #ff0000 !important;
} }
.countdown-success { .countdown-success {
color: #00A43F !important; color: #00a43f !important;
} }
.follow-detli{ .follow-detli {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: #00A43F; color: #00a43f;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 4px;
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: #f5f7fa; background: #f5f7fa;
} }
} }
.follow-action { .follow-action {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409eff;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 4px;
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: #f5f7fa; background: #f5f7fa;
} }
} }
</style> </style>
src/views/crmpc/home/widget/CardList.vue
+196 -110
View File
@@ -1,6 +1,10 @@
<template> <template>
<div class="homeheard"> <div class="homeheard">
您已陪伴领客 CRM <span class="daynum"><span class="day">{{homestatistics.day}}</span>天</span> 您已陪伴领客 CRM
<span class="daynum"
><span class="day">{{ homestatistics.day }}</span
>天</span
>
</div> </div>
<div class="boxshadow"> <div class="boxshadow">
<div class="heard"> <div class="heard">
@@ -15,8 +19,15 @@
/> />
</div> </div>
<el-row :gutter="20" class="card-list"> <el-row :gutter="20" class="card-list">
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${adduser})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${adduser})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.customer" :endVal="homestatistics.customer"
@@ -28,8 +39,15 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${addbf})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${addbf})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.visit" :endVal="homestatistics.visit"
@@ -41,8 +59,15 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${addgj})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${addgj})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.follow" :endVal="homestatistics.follow"
@@ -54,40 +79,64 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${deal})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${deal})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.customer_init" :endVal="homestatistics.customer_init"
:duration="1000" :duration="1000"
separator="" separator=""
></CountTo> >
</CountTo>
<div class="change-box"> <div class="change-box">
<span class="change-text">跟进中</span> <span class="change-text">跟进中</span>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${gjing})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${gjing})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.customero_fllow" :endVal="homestatistics.customero_fllow"
:duration="1000" :duration="1000"
separator="" separator=""
></CountTo> >
</CountTo>
<div class="change-box"> <div class="change-box">
<span class="change-text">已成交</span> <span class="change-text">已成交</span>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :sm="12" :md="6" :lg="4" > <el-col :sm="12" :md="6" :lg="4">
<div class="card art-custom-card" :style="{ backgroundImage: `url(${loss})`, backgroundSize: 'cover', backgroundPosition: 'center' }"> <div
class="card art-custom-card"
:style="{
backgroundImage: `url(${loss})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}"
>
<CountTo <CountTo
class="number box-title" class="number box-title"
:endVal="homestatistics.customer_deal" :endVal="homestatistics.customer_deal"
:duration="1000" :duration="1000"
separator="" separator=""
></CountTo> >
</CountTo>
<div class="change-box"> <div class="change-box">
<span class="change-text">已丢失</span> <span class="change-text">已丢失</span>
</div> </div>
@@ -111,18 +160,32 @@
</el-select> </el-select>
</div> </div>
<div class="table"> <div class="table">
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage" <ArtTable
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange" ref="tableRef"
@current-change="handleCurrentChange" lass="customer-table"> row-key="id"
:loading="loading"
:data="tableData"
:currentPage="pagination.currentPage"
:pageSize="pagination.pageSize"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
lass="customer-table"
>
<template #default> <template #default>
<el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column> <el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column> <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
<el-table-column prop="follow_next" label="下次跟进时间" min-width="140"></el-table-column> <el-table-column
prop="follow_next"
label="下次跟进时间"
min-width="140"
></el-table-column>
<el-table-column label="状态" min-width="140"> <el-table-column label="状态" min-width="140">
<template #default="scope"> <template #default="scope">
<span :class="getCountdownClass(scope.row.follow_next)"> <span :class="getCountdownClass(scope.row.follow_next)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span> <i class="iconfont-sys">&#xe7b1;</i>
</span>
{{ getCountdown(scope.row.follow_next) }} {{ getCountdown(scope.row.follow_next) }}
</span> </span>
</template> </template>
@@ -130,7 +193,9 @@
<el-table-column label="操作" min-width="100"> <el-table-column label="操作" min-width="100">
<template #default="scope"> <template #default="scope">
<div class="follow-action" @click="goAddFollow(scope.row)"> <div class="follow-action" @click="goAddFollow(scope.row)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe6bf;</i></span> <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe6bf;</i>
</span>
跟进 跟进
</div> </div>
</template> </template>
@@ -142,60 +207,60 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from 'vue' import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { CountTo } from 'vue3-count-to' import { CountTo } from 'vue3-count-to'
import adduser from '@/assets/img/crm/adduser.png' import adduser from '@/assets/img/crm/adduser.png'
import addbf from '@/assets/img/crm/addbf.png' import addbf from '@/assets/img/crm/addbf.png'
import addgj from '@/assets/img/crm/addgj.png' import addgj from '@/assets/img/crm/addgj.png'
import deal from '@/assets/img/crm/deal.png' import deal from '@/assets/img/crm/deal.png'
import gjing from '@/assets/img/crm/gjing.png' import gjing from '@/assets/img/crm/gjing.png'
import loss from '@/assets/img/crm/loss.png' import loss from '@/assets/img/crm/loss.png'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { CrmService } from '@/api/crmApi' import { CrmService } from '@/api/crmApi'
const router = useRouter() const router = useRouter()
function getCurrentMonth() { function getCurrentMonth() {
const d = new Date() const d = new Date()
const month = d.getMonth() + 1 const month = d.getMonth() + 1
return `${d.getFullYear()}-${month < 10 ? '0' + month : month}` return `${d.getFullYear()}-${month < 10 ? '0' + month : month}`
} }
const selectedDate = ref(getCurrentMonth()) const selectedDate = ref(getCurrentMonth())
const remindRange = ref('') const remindRange = ref('')
const loading = ref(false) const loading = ref(false)
const pagination = reactive({ const pagination = reactive({
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0 total: 0
}) })
const tableData = ref([]) const tableData = ref([])
watch([remindRange], () => { watch([remindRange], () => {
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
}) })
watch(selectedDate, (val) => { watch(selectedDate, (val) => {
console.log('用户选择的时间:', val) console.log('用户选择的时间:', val)
gethomestatistics(val) gethomestatistics(val)
}) })
//获取统计数据 homestatistics //获取统计数据 homestatistics
interface CustomerInfo { interface CustomerInfo {
[key: string]: any [key: string]: any
} }
const homestatistics = ref<CustomerInfo>({}) const homestatistics = ref<CustomerInfo>({})
const gethomestatistics = async (val:any) => { const gethomestatistics = async (val: any) => {
loading.value = true loading.value = true
try { try {
const data = await CrmService.homestatistics({created:val?val:getCurrentMonth()}) const data = await CrmService.homestatistics({ created: val ? val : getCurrentMonth() })
homestatistics.value = data homestatistics.value = data
} catch (error) { } catch (error) {
console.error('获取用户列表失败:', error) console.error('获取用户列表失败:', error)
} finally { } finally {
loading.value = false loading.value = false
} }
} }
// 获取列表数据 // 获取列表数据
const gettableList = async () => { const gettableList = async () => {
loading.value = true loading.value = true
try { try {
const { currentPage, pageSize } = pagination const { currentPage, pageSize } = pagination
@@ -206,7 +271,7 @@ const gettableList = async () => {
if (remindRange.value) params.filter = remindRange.value if (remindRange.value) params.filter = remindRange.value
const { data, current, size, total } = await CrmService.waitFollow(params) const { data, current, size, total } = await CrmService.waitFollow(params)
tableData.value = data.map((item: any, index: number) => ({ tableData.value = data.map((item: any) => ({
...item ...item
})) }))
Object.assign(pagination, { currentPage: current, pageSize: size, total }) Object.assign(pagination, { currentPage: current, pageSize: size, total })
@@ -215,36 +280,37 @@ const gettableList = async () => {
} finally { } finally {
loading.value = false loading.value = false
} }
} }
// 处理表格分页变化 // 处理表格分页变化
const handleSizeChange = (newPageSize: number) => { const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize pagination.pageSize = newPageSize
// getWorkList() // getWorkList()
} }
const handleCurrentChange = (newCurrentPage: number) => { const handleCurrentChange = (newCurrentPage: number) => {
pagination.currentPage = newCurrentPage pagination.currentPage = newCurrentPage
// getWorkList() // getWorkList()
} }
const timer = ref(0) const timer = ref(0)
const refreshKey = ref(0) const refreshKey = ref(0)
onMounted(() => { onMounted(() => {
gethomestatistics() gethomestatistics('')
gettableList() gettableList()
timer.value = window.setInterval(() => { timer.value = window.setInterval(() => {
refreshKey.value++ refreshKey.value++
}, 1000) }, 1000)
}) })
onUnmounted(() => { onUnmounted(() => {
if (timer.value) { if (timer.value) {
clearInterval(timer.value) clearInterval(timer.value)
} }
}) })
function getCountdown(targetDate: string) { function getCountdown(targetDate: string) {
// 让 refreshKey 成为依赖，确保每秒刷新 // 让 refreshKey 成为依赖，确保每秒刷新
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
refreshKey.value refreshKey.value
const now = dayjs() const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss') const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
@@ -256,47 +322,55 @@ function getCountdown(targetDate: string) {
const minutes = Math.floor((diff / (1000 * 60)) % 60) const minutes = Math.floor((diff / (1000 * 60)) % 60)
const seconds = Math.floor((diff / 1000) % 60) const seconds = Math.floor((diff / 1000) % 60)
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒` return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
} }
function getCountdownClass(targetDate: string) { function getCountdownClass(targetDate: string) {
const now = dayjs() const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss') const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
if (!target.isValid() || target.diff(now) <= 0) { if (!target.isValid() || target.diff(now) <= 0) {
return 'countdown-danger' return 'countdown-danger'
} }
return 'countdown-success' return 'countdown-success'
} }
function goAddFollow(row: any) { function goAddFollow(row: any) {
router.push({ router.push({
path: '/crmpc/customer/followadd', path: '/crmpc/customer/followadd',
query: { id: row.id } // 可带客户名等参数 query: { id: row.id } // 可带客户名等参数
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.homeheard{ .table {
:deep(.el-table__empty-block) {
height: 300px !important;
}
}
.homeheard {
background: background:
url('@/assets/img/crm/hometop.png') no-repeat center/cover, url('@/assets/img/crm/hometop.png') no-repeat center/cover,
linear-gradient(90deg, #EDF2FF 0%, #CBE5FC 72.55%); linear-gradient(90deg, #edf2ff 0%, #cbe5fc 72.55%);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
/* 垂直居中 */
color: #333333; color: #333333;
}
} .daynum {
.daynum{
margin-left: 20px; margin-left: 20px;
color: #3471FF; color: #3471ff;
} }
.day{
.day {
font-size: 70px; font-size: 70px;
font-weight: bold; font-weight: bold;
} }
.card-list {
.card-list {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -375,29 +449,31 @@ display: flex;
} }
} }
} }
} }
.heard { .heard {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
.heard-title { .heard-title {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
border-left: 4px solid #3471FF; border-left: 4px solid #3471ff;
padding-left: 12px; padding-left: 12px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.heard-select { .heard-select {
width: 120px; width: 120px;
} }
} }
.dark { .dark {
.card-list { .card-list {
.art-custom-card { .art-custom-card {
.iconfont-sys { .iconfont-sys {
@@ -405,52 +481,62 @@ display: flex;
} }
} }
} }
} }
.table { .table {
::v-deep .custom-table-header { ::v-deep .custom-table-header {
background: #F7F9FA !important; background: #f7f9fa !important;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-table__body tr.custom-table-row td { ::v-deep .el-table__body tr.custom-table-row td {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
::v-deep .el-table__body tr td:last-child { ::v-deep .el-table__body tr td:last-child {
border-right: none !important; border-right: none !important;
} }
::v-deep .el-table__body tr:last-child td { ::v-deep .el-table__body tr:last-child td {
border-bottom: none !important; border-bottom: none !important;
} }
::v-deep .el-table__header-wrapper th { ::v-deep .el-table__header-wrapper th {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
::v-deep .el-table__header-wrapper th:last-child { ::v-deep .el-table__header-wrapper th:last-child {
border-right: none !important; border-right: none !important;
} }
::v-deep .el-table { ::v-deep .el-table {
border: 1px solid #F7F9FA !important; border: 1px solid #f7f9fa !important;
border-radius: 6px; border-radius: 6px;
} }
} }
.countdown-danger {
color: #FF0000 !important; .countdown-danger {
} color: #ff0000 !important;
.countdown-success { }
color: #00A43F !important;
} .countdown-success {
.follow-action { color: #00a43f !important;
}
.follow-action {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409eff;
padding: 4px 10px; padding: 4px 10px;
border-radius: 4px; border-radius: 4px;
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: #f5f7fa; background: #f5f7fa;
} }
} }
</style> </style>