0325-北仑:客群修改+pad走访

This commit is contained in:
2026-03-25 14:14:32 +08:00
parent 7f5a045cab
commit 59e05e85b1
17 changed files with 492 additions and 126 deletions

View File

@@ -1,8 +1,18 @@
<template>
<div class="customer-wrap">
<!-- 搜索区域 -->
<div class="search-area" v-show="showSearch">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-radio-group v-model="activeTab" class="group-tab-radio" @input="handleTabChange">
<el-radio-button label="mine">我创建的</el-radio-button>
<el-radio-button label="sharedToMe">下发给我的</el-radio-button>
</el-radio-group>
<div v-show="showSearch" class="search-area">
<el-form
ref="queryForm"
:model="queryParams"
size="small"
:inline="true"
label-width="80px"
>
<el-form-item label="客群名称" prop="groupName">
<el-input
v-model="queryParams.groupName"
@@ -13,13 +23,23 @@
/>
</el-form-item>
<el-form-item label="客群模式" prop="groupMode">
<el-select v-model="queryParams.groupMode" placeholder="请选择" clearable style="width: 150px">
<el-select
v-model="queryParams.groupMode"
placeholder="请选择"
clearable
style="width: 150px"
>
<el-option label="静态" value="0" />
<el-option label="动态" value="1" />
</el-select>
</el-form-item>
<el-form-item label="创建方式" prop="createMode">
<el-select v-model="queryParams.createMode" placeholder="请选择" clearable style="width: 150px">
<el-select
v-model="queryParams.createMode"
placeholder="请选择"
clearable
style="width: 150px"
>
<el-option label="模板导入" value="1" />
<el-option label="绩效网格" value="2" />
<el-option label="地理网格" value="3" />
@@ -27,31 +47,61 @@
</el-select>
</el-form-item>
<el-form-item label="客群状态" prop="groupStatus">
<el-select v-model="queryParams.groupStatus" placeholder="请选择" clearable style="width: 150px">
<el-select
v-model="queryParams.groupStatus"
placeholder="请选择"
clearable
style="width: 150px"
>
<el-option label="正常" value="0" />
<el-option label="已禁用" value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">
搜索
</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">
重置
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 操作栏 -->
<section class="operate-cnt">
<div class="operate-left">
<el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
<el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete">删除</el-button>
<template v-if="isMineTab">
<el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">
新增
</el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="small"
:disabled="multiple"
@click="handleDelete"
>
删除
</el-button>
</template>
</div>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
</section>
<!-- 表格区域 -->
<div class="main_table">
<el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange" style="width: 100%" max-height="625">
<el-table-column type="selection" width="55" align="center" />
<el-table
v-loading="loading"
:data="groupList"
style="width: 100%"
max-height="625"
@selection-change="handleSelectionChange"
>
<el-table-column
v-if="isMineTab"
type="selection"
width="55"
align="center"
/>
<el-table-column label="客群名称" prop="groupName" min-width="180" show-overflow-tooltip />
<el-table-column label="客群模式" align="center" width="100">
<template slot-scope="scope">
@@ -78,14 +128,36 @@
<el-table-column label="创建时间" prop="createTime" width="180" />
<el-table-column label="操作" align="center" width="180" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
>
查看
</el-button>
<template v-if="isMineTab">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>
编辑
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
@@ -95,7 +167,6 @@
/>
</div>
<!-- 创建/编辑客群弹窗 -->
<create-dialog
:visible.sync="dialogVisible"
:group-data="form"
@@ -114,44 +185,63 @@ export default {
components: { CreateDialog },
data() {
return {
// 加载状态
loading: false,
// 显示搜索
showSearch: true,
// 选中ID数组
activeTab: 'mine',
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 客群列表
groupList: [],
// 弹窗显示
dialogVisible: false,
// 是否编辑
isEdit: false,
// 表单数据
form: {},
// 查询参数
refreshTimer: null,
queryParams: {
pageNum: 1,
pageSize: 10,
groupName: null,
groupMode: null,
createMode: null,
groupStatus: null
groupStatus: null,
viewType: 'mine'
}
}
},
computed: {
isMineTab() {
return this.activeTab === 'mine'
}
},
created() {
this.getList()
},
beforeDestroy() {
this.clearRefreshTimer()
},
methods: {
/** 查询客群列表 */
clearRefreshTimer() {
if (this.refreshTimer) {
clearTimeout(this.refreshTimer)
this.refreshTimer = null
}
},
refreshList(delay = 0) {
this.clearRefreshTimer()
if (delay > 0) {
this.refreshTimer = setTimeout(() => {
this.getList()
this.refreshTimer = null
}, delay)
return
}
this.getList()
},
getList() {
this.loading = true
this.queryParams.viewType = this.activeTab
listCustGroup(this.queryParams).then(response => {
this.groupList = response.rows
this.total = response.total
@@ -161,33 +251,46 @@ export default {
})
},
/** 搜索按钮操作 */
handleTabChange() {
this.ids = []
this.single = true
this.multiple = true
this.queryParams.pageNum = 1
this.queryParams.viewType = this.activeTab
this.getList()
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.queryParams.viewType = this.activeTab
this.handleQuery()
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
if (!this.isMineTab) {
this.ids = []
this.single = true
this.multiple = true
return
}
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.isEdit = false
this.dialogVisible = true
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids[0]
@@ -198,7 +301,6 @@ export default {
})
},
/** 查看按钮操作 */
handleView(row) {
this.$router.push({
path: '/group/custGroup/detail',
@@ -206,24 +308,22 @@ export default {
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id ? [row.id] : this.ids
this.$modal.confirm('是否确认删除选中的客群?').then(() => {
return deleteCustGroup(ids)
}).then(() => {
this.getList()
this.refreshList()
this.$modal.msgSuccess('删除成功')
}).catch(() => {})
},
/** 提交表单 */
handleSubmit() {
this.dialogVisible = false
this.getList()
this.queryParams.pageNum = 1
this.refreshList(800)
},
/** 表单重置 */
reset() {
this.form = {
id: null,
@@ -249,6 +349,64 @@ export default {
border-radius: 16px 16px 0 0;
padding: 24px 30px;
.group-tab-radio {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ebebeb;
margin-bottom: 8px;
.el-radio-button {
flex: 1;
::v-deep .el-radio-button__inner {
width: 100%;
border: none;
font-weight: 400;
letter-spacing: 0.44px;
line-height: 25px;
font-size: 16px;
color: #666666;
padding: 11px 0 12px 0;
border-radius: 0;
box-shadow: none;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #4886f8;
font-weight: 400;
color: #ffffff;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:nth-child(2) {
&::before,
&::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 21px;
width: 1px;
background: #ebebeb;
z-index: 1;
}
&::after {
right: 1px;
}
}
&.is-active {
&::before,
&::after {
content: none;
}
}
}
}
.search-area {
padding: 16px 0;
border-bottom: 1px solid #ebebeb;
@@ -272,6 +430,7 @@ export default {
.operate-left {
display: flex;
gap: 8px;
min-height: 32px;
}
.el-button {