code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-13 04:18:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(manager): 优化列表操作列规范、会员分组统计、漏斗图重构与订单交互

Browse Source 
1. 订单交互：移除 orderList 缓存机制修复默认带入订单号问题，支持 query 联动；

2. 会员模块：会员分组新增人数统计与联动，全量规范会员提现、充值、日志等操作列样式；

3. 商品与销量：虚拟销量优化首列缩略图与对齐方式，规范品牌与商品分组操作；

4. 数据统计：重构交易转化漏斗图为自适应 SVG 渐变图与指标卡片；

5. 系统与营销：统一菜单/部门操作列样式，优化 OSS 模块、营销活动与首页待办对齐。
This commit is contained in:
pikachu1995@126.com
2026-10-30 06:51:48 +08:00
parent 2563f122fc
commit c0cc8d8598
39 changed files with 16121 additions and 6705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
manager/src/views/goods/group/index.vue
View File

@@ -1,27 +1,84 @@
<template>
<div class="search">
<el-card>
<div class="operation padding-row">
<el-button type="primary" @click="openAdd">添加分组</el-button>
<div class="goods-group-page search">
<!-- 顶部筛选与操作栏 -->
<el-card shadow="never" class="filter-card">
<div class="card-toolbar">
<el-form inline :model="searchForm" class="filter-form" @keyup.enter="handleSearch">
<el-form-item label="分组名称">
<el-input
v-model="searchForm.groupName"
placeholder="请输入分组名称"
clearable
style="width: 220px"
@clear="handleSearch"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<div class="toolbar-right">
<el-button type="primary" @click="openAdd">添加分组</el-button>
</div>
</div>
</el-card>
<el-table ref="table" v-loading="loading" :data="data" border class="mt_10" style="width: 100%">
<!-- 分组数据表格卡片 -->
<el-card shadow="never" class="table-card mt_10">
<template #header>
<div class="card-header-bar">
<div class="header-title">
<span>商品分组列表</span>
</div>
<div class="header-actions">
<el-button size="small" @click="getData">刷新</el-button>
</div>
</div>
</template>
<el-table
ref="table"
v-loading="loading"
:data="data"
border
stripe
style="width: 100%"
class="custom-group-table"
>
<!-- 分组ID -->
<el-table-column prop="id" label="分组ID" min-width="190" show-overflow-tooltip />
<!-- 分组名称 -->
<el-table-column prop="groupName" label="分组名称" min-width="160" show-overflow-tooltip />
<el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" width="180" />
<el-table-column prop="updateTime" label="更新时间" width="180" />
<el-table-column label="操作" width="200" align="center" fixed="right">
<!-- 分组描述 -->
<el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip>
<template #default="{ row }">
<div v-if="row" class="ops" style="display: flex; justify-content: center">
{{ row ? row.description || "-" : "-" }}
</template>
</el-table-column>
<!-- 创建时间 -->
<el-table-column prop="createTime" label="创建时间" min-width="170" align="center" />
<!-- 更新时间 -->
<el-table-column prop="updateTime" label="更新时间" min-width="170" align="center" />
<!-- 操作栏 -->
<el-table-column label="操作" width="140" align="center" fixed="right">
<template #default="{ row }">
<template v-if="row">
<a class="link-text" @click="openEdit(row)">编辑</a>
<span class="op-split">|</span>
<a class="link-text" @click="remove(row)">删除</a>
</div>
</template>
</template>
</el-table-column>
</el-table>
<div class="mt_10" style="display: flex; justify-content: flex-end">
<!-- 底部分页 -->
<div class="pagination-wrap mt_10">
<el-pagination
v-model:current-page="searchForm.pageNumber"
v-model:page-size="searchForm.pageSize"
@@ -35,13 +92,32 @@
</div>
</el-card>
<el-dialog v-model="addFlag" title="添加商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
<!-- 添加商品分组弹窗 -->
<el-dialog
v-model="addFlag"
title="添加商品分组"
width="520px"
:close-on-click-modal="false"
destroy-on-close
>
<el-form ref="addFormRef" :model="formAdd" :rules="rulesAdd" label-width="90px">
<el-form-item label="分组名称" prop="groupName" style="width: 90%">
<el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
<el-form-item label="分组名称" prop="groupName">
<el-input
v-model="formAdd.groupName"
maxlength="30"
show-word-limit
placeholder="请输入分组名称"
/>
</el-form-item>
<el-form-item label="分组描述" prop="description" style="width: 90%">
<el-input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
<el-form-item label="分组描述" prop="description">
<el-input
v-model="formAdd.description"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入分组描述信息"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -50,14 +126,35 @@
</template>
</el-dialog>
<el-dialog v-model="editFlag" title="编辑商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
<!-- 编辑商品分组弹窗 -->
<el-dialog
v-model="editFlag"
title="编辑商品分组"
width="520px"
:close-on-click-modal="false"
destroy-on-close
>
<el-form ref="editFormRef" :model="formEdit" :rules="rulesEdit" label-width="90px">
<el-input v-model="formEdit.id" style="display: none" />
<el-form-item label="分组名称" prop="groupName" style="width: 90%">
<el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
<el-form-item label="分组ID">
<span>{{ formEdit.id }}</span>
</el-form-item>
<el-form-item label="分组描述" prop="description" style="width: 90%">
<el-input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
<el-form-item label="分组名称" prop="groupName">
<el-input
v-model="formEdit.groupName"
maxlength="30"
show-word-limit
placeholder="请输入分组名称"
/>
</el-form-item>
<el-form-item label="分组描述" prop="description">
<el-input
v-model="formEdit.description"
type="textarea"
:rows="3"
maxlength="200"
show-word-limit
placeholder="请输入分组描述信息"
/>
</el-form-item>
</el-form>
<template #footer>
@@ -79,6 +176,7 @@ const loading = ref(true);
const searchForm = reactive({
pageNumber: 1,
pageSize: 20,
groupName: "",
});
const data = ref([]);
const total = ref(0);
@@ -86,18 +184,22 @@ const addFlag = ref(false);
const editFlag = ref(false);
const submitAddLoading = ref(false);
const submitEditLoading = ref(false);
const formAdd = ref({
groupName: "",
description: "",
});
const formEdit = ref({
id: "",
groupName: "",
description: "",
});
const rulesAdd = reactive({
groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
});
const rulesEdit = reactive({
groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
});
@@ -105,7 +207,14 @@ const rulesEdit = reactive({
const addFormRef = ref(null);
const editFormRef = ref(null);
function init() {
function handleSearch() {
searchForm.pageNumber = 1;
getData();
}
function handleReset() {
searchForm.pageNumber = 1;
searchForm.groupName = "";
getData();
}
@@ -216,36 +325,78 @@ function submitEdit() {
}
function remove(row) {
ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
return API_Goods.deleteGoodsGroup(row.id)
.then((res) => {
if (res && res.success) {
ElMessage.success("删除成功");
getData();
} else if (res && res.message) {
ElMessage.error(res.message);
}
})
.catch(() => {
ElMessage.error("删除失败，请检查权限或后端接口");
});
}).catch(() => {});
ElMessageBox.confirm(`确定删除分组 "${row.groupName || "该分组"}" 吗？`, "提示", {
type: "warning",
confirmButtonText: "确定删除",
cancelButtonText: "取消",
})
.then(() => {
return API_Goods.deleteGoodsGroup(row.id)
.then((res) => {
if (res && res.success) {
ElMessage.success("删除成功");
getData();
} else if (res && res.message) {
ElMessage.error(res.message);
}
})
.catch(() => {
ElMessage.error("删除失败，请检查权限或后端接口");
});
})
.catch(() => {});
}
onMounted(() => {
init();
getData();
});
</script>
<style scoped>
.ops a {
color: #2d8cf0;
cursor: pointer;
text-decoration: none;
}
.ops span {
display: inline-block;
margin: 0 8px;
color: #dcdee2;
<style scoped lang="scss">
.goods-group-page {
.card-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
.filter-form {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 0;
:deep(.el-form-item) {
margin-bottom: 0;
margin-right: 16px;
}
}
.toolbar-right {
display: flex;
align-items: center;
}
}
.card-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
.header-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: #303133;
}
}
.pagination-wrap {
display: flex;
justify-content: flex-end;
}
}
</style>