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/store/modules/user.ts
+2 -2
View File
@@ -195,9 +195,9 @@ export const useUserStore = defineStore(
persist: {
key: 'user',
storage: localStorage,
afterRestore: (ctx) => {
afterRestore: (ctx: { store: { restoreTokenTimer: () => void } }) => {
ctx.store.restoreTokenTimer()
}
}
} as any
}
)
src/views/crmpc/highseas/index.vue
+31 -28
View File
@@ -35,8 +35,9 @@
<el-table-column label="状态" min-width="140">
<template #default="scope">
<span :class="getCountdownClass(scope.row.follow_next)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe7b1;</i>
</span>
{{ getCountdown(scope.row.follow_next) }}
</span>
</template>
@@ -44,11 +45,15 @@
<el-table-column fixed="right" label="操作" width="160px">
<template #default="scope">
<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 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>
</template>
@@ -58,9 +63,7 @@
</div>
</div>
<el-dialog v-model="detailDialogVisible" title="详情" width="400px">
<div v-if="detailRow" v-html="detailRow.desc_collect" >
</div>
<div v-if="detailRow" v-html="detailRow.desc_collect"></div>
</el-dialog>
</template>
@@ -93,7 +96,7 @@ const gettableList = async () => {
}
if (remindRange.value) params.follow_last = remindRange.value
const { data, current, size, total } = await CrmService.getcustomerList(params)
tableData.value = data.map((item: any, index: number) => ({
tableData.value = data.map((item: any) => ({
...item
}))
Object.assign(pagination, { currentPage: current, pageSize: size, total })
@@ -139,6 +142,7 @@ onUnmounted(() => {
function getCountdown(targetDate: string) {
// 让 refreshKey 成为依赖，确保每秒刷新
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
refreshKey.value
const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
@@ -161,20 +165,18 @@ function getCountdownClass(targetDate: string) {
return 'countdown-success'
}
const onFollow = async (row: any) => {
ElMessageBox.confirm(
'确定要领取此客户吗？',
'提示',
{
ElMessageBox.confirm('确定要领取此客户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
type: 'warning'
})
.then(async () => {
const res = await CrmService.customerclaim({ customer_id: row.id })
ElMessage.success(res?.message || '提交成功！')
gettableList()
// 你可以在这里调用接口或做后续处理
}).catch(() => {
})
.catch(() => {
// 用户点击了取消
})
}
@@ -203,7 +205,7 @@ function onDetail(row: any) {
font-size: 20px;
font-weight: bold;
color: #333;
border-left: 4px solid #3471FF;
border-left: 4px solid #3471ff;
padding-left: 12px;
height: 32px;
display: flex;
@@ -227,16 +229,18 @@ function onDetail(row: any) {
}
}
}
.table {
:deep(.el-table__empty-block) {
height: 300px !important;
}
:deep(.el-table__header th) {
background: #f7f9fa !important;
color: #333;
font-weight: bold;
}
:deep(.el-table__body tr.custom-table-row td) {
border-bottom: 1px solid #F7F9FA !important;
border-right: 1px solid #F7F9FA !important;
border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #f7f9fa !important;
}
:deep(.el-table__body tr td:last-child) {
border-right: none !important;
@@ -245,14 +249,14 @@ function onDetail(row: any) {
border-bottom: none !important;
}
:deep(.el-table__header-wrapper th) {
border-bottom: 1px solid #F7F9FA !important;
border-right: 1px solid #F7F9FA !important;
border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #f7f9fa !important;
}
:deep(.el-table__header-wrapper th:last-child) {
border-right: none !important;
}
:deep(.el-table) {
border: 1px solid #F7F9FA !important;
border: 1px solid #f7f9fa !important;
border-radius: 6px;
}
:deep(.el-table th),
@@ -261,16 +265,16 @@ function onDetail(row: any) {
}
}
.countdown-danger {
color: #FF0000 !important;
color: #ff0000 !important;
}
.countdown-success {
color: #00A43F !important;
color: #00a43f !important;
}
.follow-detli {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #00A43F;
color: #00a43f;
padding: 4px 10px;
border-radius: 4px;
transition: background 0.2s;
@@ -282,7 +286,7 @@ function onDetail(row: any) {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #409EFF;
color: #409eff;
padding: 4px 10px;
border-radius: 4px;
transition: background 0.2s;
@@ -290,5 +294,4 @@ function onDetail(row: any) {
background: #f5f7fa;
}
}
</style>
src/views/crmpc/home/widget/CardList.vue
+119 -33
View File
@@ -1,6 +1,10 @@
<template>
<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 class="boxshadow">
<div class="heard">
@@ -16,7 +20,14 @@
</div>
<el-row :gutter="20" class="card-list">
<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
class="number box-title"
:endVal="homestatistics.customer"
@@ -29,7 +40,14 @@
</div>
</el-col>
<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
class="number box-title"
:endVal="homestatistics.visit"
@@ -42,7 +60,14 @@
</div>
</el-col>
<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
class="number box-title"
:endVal="homestatistics.follow"
@@ -55,39 +80,63 @@
</div>
</el-col>
<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
class="number box-title"
:endVal="homestatistics.customer_init"
:duration="1000"
separator=""
></CountTo>
>
</CountTo>
<div class="change-box">
<span class="change-text">跟进中</span>
</div>
</div>
</el-col>
<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
class="number box-title"
:endVal="homestatistics.customero_fllow"
:duration="1000"
separator=""
></CountTo>
>
</CountTo>
<div class="change-box">
<span class="change-text">已成交</span>
</div>
</div>
</el-col>
<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
class="number box-title"
:endVal="homestatistics.customer_deal"
:duration="1000"
separator=""
></CountTo>
>
</CountTo>
<div class="change-box">
<span class="change-text">已丢失</span>
</div>
@@ -111,18 +160,32 @@
</el-select>
</div>
<div class="table">
<ArtTable ref="tableRef" 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">
<ArtTable
ref="tableRef"
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>
<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="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">
<template #default="scope">
<span :class="getCountdownClass(scope.row.follow_next)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe7b1;</i>
</span>
{{ getCountdown(scope.row.follow_next) }}
</span>
</template>
@@ -130,7 +193,9 @@
<el-table-column label="操作" min-width="100">
<template #default="scope">
<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>
</template>
@@ -206,7 +271,7 @@ const gettableList = async () => {
if (remindRange.value) params.filter = remindRange.value
const { data, current, size, total } = await CrmService.waitFollow(params)
tableData.value = data.map((item: any, index: number) => ({
tableData.value = data.map((item: any) => ({
...item
}))
Object.assign(pagination, { currentPage: current, pageSize: size, total })
@@ -230,7 +295,7 @@ const timer = ref(0)
const refreshKey = ref(0)
onMounted(() => {
gethomestatistics()
gethomestatistics('')
gettableList()
timer.value = window.setInterval(() => {
refreshKey.value++
@@ -245,6 +310,7 @@ onUnmounted(() => {
function getCountdown(targetDate: string) {
// 让 refreshKey 成为依赖，确保每秒刷新
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
refreshKey.value
const now = dayjs()
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
@@ -276,26 +342,34 @@ function goAddFollow(row: any) {
</script>
<style lang="scss" scoped>
.table {
:deep(.el-table__empty-block) {
height: 300px !important;
}
}
.homeheard {
background:
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;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
align-items: center; /* 垂直居中 */
align-items: center;
/* 垂直居中 */
color: #333333;
}
.daynum {
margin-left: 20px;
color: #3471FF;
color: #3471ff;
}
.day {
font-size: 70px;
font-weight: bold;
}
.card-list {
box-sizing: border-box;
display: flex;
@@ -382,16 +456,18 @@ display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.heard-title {
font-size: 20px;
font-weight: bold;
color: #333;
border-left: 4px solid #3471FF;
border-left: 4px solid #3471ff;
padding-left: 12px;
height: 32px;
display: flex;
align-items: center;
}
.heard-select {
width: 120px;
}
@@ -409,46 +485,56 @@ display: flex;
.table {
::v-deep .custom-table-header {
background: #F7F9FA !important;
background: #f7f9fa !important;
color: #333;
font-weight: bold;
}
::v-deep .el-table__body tr.custom-table-row td {
border-bottom: 1px solid #F7F9FA !important;
border-right: 1px solid #F7F9FA !important;
border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #f7f9fa !important;
}
::v-deep .el-table__body tr td:last-child {
border-right: none !important;
}
::v-deep .el-table__body tr:last-child td {
border-bottom: none !important;
}
::v-deep .el-table__header-wrapper th {
border-bottom: 1px solid #F7F9FA !important;
border-right: 1px solid #F7F9FA !important;
border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #f7f9fa !important;
}
::v-deep .el-table__header-wrapper th:last-child {
border-right: none !important;
}
::v-deep .el-table {
border: 1px solid #F7F9FA !important;
border: 1px solid #f7f9fa !important;
border-radius: 6px;
}
}
.countdown-danger {
color: #FF0000 !important;
color: #ff0000 !important;
}
.countdown-success {
color: #00A43F !important;
color: #00a43f !important;
}
.follow-action {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #409EFF;
color: #409eff;
padding: 4px 10px;
border-radius: 4px;
transition: background 0.2s;
&:hover {
background: #f5f7fa;
}