商品中心模块开发，表格组件优化
This commit is contained in:
2090205686@qq.com
parent
046c93c0e6
commit
941041ab29
@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'http://192.168.18.9:8080/'
|
||||
VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
|
||||
VITE_APP_PLATFORM = 'http://localhost:9000/platform'
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -24,3 +24,4 @@ selenium-debug.log
|
||||
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
public/临时记录.txt
|
||||
|
||||
54
src/api/goods/info.js
Normal file
54
src/api/goods/info.js
Normal file
@ -0,0 +1,54 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取商品管理列表
|
||||
export function getGoodManageInfo(query) {
|
||||
return request({
|
||||
url: '/goodInfoManage/getGoodManage',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 查询岗位详细
|
||||
export function getPost(postId) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增岗位
|
||||
export function addPost(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改岗位
|
||||
export function updatePost(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除岗位
|
||||
export function delPost(postId) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -9,6 +9,29 @@
|
||||
padding: 16px 8px 0 16px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
.order-tab {
|
||||
width: 100%;
|
||||
.el-tabs__nav-wrap::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
height: 3px !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-descriptions__label,
|
||||
.el-descriptions__content {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.cell-item {
|
||||
display: inline-flex;
|
||||
}
|
||||
.el-descriptions__label {
|
||||
color: #999;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-bar {
|
||||
display: flex;
|
||||
@ -21,7 +44,8 @@
|
||||
|
||||
.search-bar-right {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.demo-form-inline {
|
||||
@ -53,9 +77,8 @@
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.el-icon-custom {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
.el-table__empty-text {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,9 +187,42 @@
|
||||
.color-red {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
font-size: 12px !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
// 页面添加的自定义容器，上下撑满
|
||||
.customer-control {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
// 表格组件中的各插槽元素自定义样式
|
||||
.custom-tooltip-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.el-icon-custom {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.table-cell-img-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
display: flex; /* 使用 Flex 布局居中 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.table-cell-img {
|
||||
min-width: 100%; /* 至少撑满宽度 */
|
||||
min-height: 100%; /* 至少撑满高度 */
|
||||
object-fit: cover; /* 保持比例并覆盖容器 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ div:focus {
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
}
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<div class="custom-table-container">
|
||||
<div class="custom-table-tool">
|
||||
<el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="每页显示" style="margin-bottom: 10px;">
|
||||
<el-form-item label="每页显示" style="margin-bottom: 10px">
|
||||
<el-select
|
||||
v-model="internalPageSize"
|
||||
v-model="computedPageSize"
|
||||
placeholder="请选择"
|
||||
style="width: 100px"
|
||||
@change="pageSizeChange($event)"
|
||||
@ -20,11 +20,13 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table
|
||||
style="flex: 1; display: flex; flex-direction: column"
|
||||
style="flex: 1; display: flex; flex-direction: column; text-align: center"
|
||||
:max-height="tableMaxHeight"
|
||||
:data="pagedTableData"
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:border="showBorder"
|
||||
:stripe="showStripe"
|
||||
:fit="true"
|
||||
v-bind="$attrs"
|
||||
:header-cell-class-name="headerCellClassName"
|
||||
:cell-class-name="cellClassName"
|
||||
@ -57,26 +59,32 @@
|
||||
|
||||
<div v-if="showPagination" class="pagination-container">
|
||||
<span class="custom-pagination-text">
|
||||
第{{ internalPage }}页，共{{
|
||||
Math.ceil(internalTotal / internalPageSize)
|
||||
}}页，共{{ internalTotal }}条
|
||||
第{{ currentPage }}页，共{{
|
||||
Math.ceil(total / computedPageSize)
|
||||
}}页，共{{ total }}条
|
||||
</span>
|
||||
<div
|
||||
style="flex: 1; display: flex; justify-content: end; text-align: right"
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
text-align: right;
|
||||
padding-right: 120px;
|
||||
"
|
||||
>
|
||||
<el-pagination
|
||||
v-model:current-page="internalPage"
|
||||
v-model:page-size="internalPageSize"
|
||||
v-model:current-page="computedCurrentPage"
|
||||
v-model:page-size="computedPageSize"
|
||||
:page-sizes="pageSizes"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="prev, pager, next"
|
||||
:total="internalTotal"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
<span class="custom-pagination-size">
|
||||
{{ internalPageSize }}条/页
|
||||
{{ computedPageSize }}条/页
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,6 +95,10 @@
|
||||
import { ref, watch, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
@ -97,6 +109,21 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 当前页码（由外部传入）
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
// 每页数量（由外部传入）
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
// 总条数
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 是否显示分页
|
||||
showPagination: {
|
||||
type: Boolean,
|
||||
@ -149,56 +176,57 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["page-change", "selection-change"]);
|
||||
const emit = defineEmits([
|
||||
"update:currentPage",
|
||||
"update:pageSize",
|
||||
"page-change",
|
||||
"selection-change",
|
||||
]);
|
||||
|
||||
// 内部管理的分页状态
|
||||
const internalPage = ref(1);
|
||||
const internalPageSize = ref(props.pageSizes?.[0] || 10);
|
||||
const internalTotal = ref(0);
|
||||
|
||||
// 计算当前页显示的数据
|
||||
const pagedTableData = computed(() => {
|
||||
const start = (internalPage.value - 1) * internalPageSize.value;
|
||||
const end = start + internalPageSize.value;
|
||||
return props.tableData.slice(start, end);
|
||||
// 每页数量（双向绑定）
|
||||
const computedPageSize = computed({
|
||||
get: () => props.pageSize,
|
||||
set: (val) => emit('update:pageSize', val)
|
||||
});
|
||||
// 当前页码（双向绑定）
|
||||
const computedCurrentPage = computed({
|
||||
get: () => props.currentPage,
|
||||
set: (val) => emit('update:currentPage', val)
|
||||
});
|
||||
|
||||
// 计算总页数（可根据实际需求调整）
|
||||
watch(
|
||||
() => props.tableData,
|
||||
(newData) => {
|
||||
internalTotal.value = newData.length; // 示例：假设总数据量是当前显示的3倍
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
// 监听外部传入的pageSize变化
|
||||
// watch(
|
||||
// () => props.pageSize,
|
||||
// (newVal) => {
|
||||
// internalPageSize.value = newVal;
|
||||
// }
|
||||
// );
|
||||
|
||||
// 分页大小改变
|
||||
const pageSizeChange = (val) => {
|
||||
console.log(`每页 ${val} 条`);
|
||||
internalPageSize.value = val;
|
||||
internalPage.value = 1; // 重置为第一页
|
||||
console.log(internalPage.value, internalPageSize.value);
|
||||
emitPageChange();
|
||||
console.log(props.currentPage, internalPageSize.value);
|
||||
emit("update:pageSize", val);
|
||||
emit("page-change", {
|
||||
page: props.currentPage,
|
||||
pageSize: val,
|
||||
});
|
||||
};
|
||||
|
||||
// 当前页改变
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log(`当前页改变 ${val} 页`);
|
||||
internalPage.value = val;
|
||||
emitPageChange();
|
||||
};
|
||||
|
||||
// 触发分页变化事件
|
||||
const emitPageChange = () => {
|
||||
emit("page-change", {
|
||||
page: internalPage.value,
|
||||
page: val,
|
||||
pageSize: internalPageSize.value,
|
||||
});
|
||||
};
|
||||
|
||||
// 多选框变化
|
||||
const handleSelectionChange = (selection) => {
|
||||
emit("selection-change", selection);
|
||||
const selectedIds = selection.map((row) => row.id);
|
||||
emit("selection-change", selection, selectedIds);
|
||||
};
|
||||
|
||||
const tableRef = ref(null);
|
||||
@ -241,117 +269,123 @@ onBeforeUnmount(() => {
|
||||
flex-direction: column;
|
||||
height: 100%; /* 关键：继承父容器高度 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
}
|
||||
/* 表格弹性布局 */
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* 表头固定 */
|
||||
.el-table__header-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 表体可滚动 */
|
||||
.el-table__body-wrapper {
|
||||
/* 表格弹性布局 */
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.demo-form-inline {
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
/* 表头固定 */
|
||||
.el-table__header-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
.custom-pagination-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-pagination-size {
|
||||
text-align: right;
|
||||
line-height: 32px;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 去除表格边框 */
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: transparent;
|
||||
}
|
||||
|
||||
/* 自定义鼠标悬停颜色 */
|
||||
:deep(.el-table__body tr:hover > td) {
|
||||
background-color: rgba(37, 191, 130, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 自定义表头样式 */
|
||||
:deep(.custom-header) {
|
||||
background-color: #fff !important;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.el-pagination) {
|
||||
/* 整体分页样式 */
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
/* 页码按钮容器 */
|
||||
.el-pager {
|
||||
/* 所有页码项 */
|
||||
li {
|
||||
font-weight: 400; /* 普通页码字体不加粗 */
|
||||
color: #606266; /* 普通页码颜色 */
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
/* 当前选中页码 */
|
||||
&.active,
|
||||
&.is-active {
|
||||
font-weight: 400 !important; /* 当前页不加粗 */
|
||||
color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
|
||||
}
|
||||
|
||||
/* 悬停状态 */
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
/* 表体可滚动 */
|
||||
.el-table__body-wrapper {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上一页/下一页按钮 */
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
.demo-form-inline {
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 10px;
|
||||
padding: 0 30px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
|
||||
&:disabled {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
.custom-pagination-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 每页条数选择器 */
|
||||
.el-pagination__sizes {
|
||||
.el-input__inner {
|
||||
.custom-pagination-size {
|
||||
text-align: right;
|
||||
line-height: 32px;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 去除表格边框 */
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: transparent;
|
||||
}
|
||||
|
||||
/* 自定义鼠标悬停颜色 */
|
||||
:deep(.el-table__body tr:hover > td) {
|
||||
background-color: rgba(37, 191, 130, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 自定义表头样式 */
|
||||
:deep(.custom-header) {
|
||||
background-color: #fff !important;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.el-pagination) {
|
||||
/* 整体分页样式 */
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
/* 页码按钮容器 */
|
||||
.el-pager {
|
||||
/* 所有页码项 */
|
||||
li {
|
||||
font-weight: 400; /* 普通页码字体不加粗 */
|
||||
color: #606266; /* 普通页码颜色 */
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
/* 当前选中页码 */
|
||||
&.active,
|
||||
&.is-active {
|
||||
font-weight: 400 !important; /* 当前页不加粗 */
|
||||
color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
|
||||
}
|
||||
|
||||
/* 悬停状态 */
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 上一页/下一页按钮 */
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
/* 跳页输入框 */
|
||||
.el-pagination__jump {
|
||||
font-weight: 400;
|
||||
&:disabled {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* 每页条数选择器 */
|
||||
.el-pagination__sizes {
|
||||
.el-input__inner {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
/* 跳页输入框 */
|
||||
.el-pagination__jump {
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,11 +71,25 @@ export const constantRoutes = [
|
||||
path: '/index',
|
||||
component: () => import('@/views/index'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
meta: { title: '首页', icon: 'chart', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/goods',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'addGoods/:activeTab?',
|
||||
component: () => import('@/views/goods/addGoods'),
|
||||
name: 'addGoods',
|
||||
meta: { title: '新增商品', icon: '' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
@ -129,6 +143,46 @@ export const constantRoutes = [
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/goods',
|
||||
name: "goods",
|
||||
component: Layout,
|
||||
hidden: false,
|
||||
alwaysShow: true,
|
||||
redirect: 'noredirect',
|
||||
meta: {
|
||||
icon: "example",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "商品中心",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'goods/goodsManage',
|
||||
component: () => import('@/views/goods/goodsManage'),
|
||||
name: 'goodsManage',
|
||||
hidden: false,
|
||||
meta: {
|
||||
title: "商品信息管理",
|
||||
icon: "",
|
||||
noCache: false,
|
||||
link: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'goods/goodsCategory',
|
||||
component: () => import('@/views/goods/goodsCategory'),
|
||||
name: 'goodsCategory',
|
||||
hidden: false,
|
||||
meta: {
|
||||
title: "商品分类设置",
|
||||
icon: "",
|
||||
noCache: false,
|
||||
link: null,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/plant',
|
||||
name: "plant",
|
||||
|
||||
@ -27,8 +27,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" prop="userStatus">
|
||||
<el-select v-model="formInline.userStatus" placeholder="请选择">
|
||||
<el-option label="全部" value="99" />
|
||||
<el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
|
||||
<el-option label="异常" value="0" />
|
||||
<el-option label="正常" value="1" />
|
||||
</el-select>
|
||||
@ -87,6 +86,7 @@
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
|
||||
>
|
||||
<!-- 自定义-状态 -->
|
||||
<template #userStatus="slotProps">
|
||||
@ -98,26 +98,36 @@
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-dropdown>
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon><More /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 1)"
|
||||
>Action 1</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 2)"
|
||||
>Action 2</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 3)"
|
||||
>Action 3</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
@ -137,13 +147,15 @@ const formInline = reactive({
|
||||
userCategoryName: "",
|
||||
accountNumber: "",
|
||||
phoneNumber: "",
|
||||
sex: "99",
|
||||
userStatus: "99",
|
||||
userCategory: "99",
|
||||
sex: "",
|
||||
userStatus: "",
|
||||
userCategory: "",
|
||||
unitPrice: "",
|
||||
ordersNums: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
@ -174,20 +186,22 @@ const resetForm = () => {
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
const columns = ref([
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "nickname", label: "昵称", width: "120" },
|
||||
{ prop: "userName", label: "姓名" },
|
||||
{ prop: "accountNumber", label: "账号" },
|
||||
{ prop: "accountNumber", label: "账号", width: "120" },
|
||||
{ prop: "phoneNumber", label: "手机号", width: "120" },
|
||||
{ prop: "sex", label: "性别" },
|
||||
{ prop: "userStatus", label: "用户状态", slotName: "userStatus" },
|
||||
{ prop: "userCategory", label: "用户分类" },
|
||||
{ prop: "unitPrice", label: "客单价" },
|
||||
{ prop: "ordersNums", label: "订单数目" },
|
||||
{ prop: "action", label: "操作", slotName: "action", width: "180" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
|
||||
// 生成食物主题昵称
|
||||
@ -230,7 +244,7 @@ const generateFoodNickname = () => {
|
||||
// 生成模拟数据
|
||||
const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|30": [
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
nickname: () => generateFoodNickname(), //昵称
|
||||
@ -252,6 +266,7 @@ const loadData = () => {
|
||||
// 模拟API请求延迟
|
||||
setTimeout(() => {
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
}, 500);
|
||||
};
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
@ -269,12 +284,20 @@ const handleSelectionChange = (selection) => {
|
||||
console.log("选中项:", selection);
|
||||
};
|
||||
|
||||
let nowClickRow = ref({});
|
||||
// 编辑操作
|
||||
const handleEdit = (row, num) => {
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("编辑的行:", row);
|
||||
console.log("第几个按钮:", num);
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要删除的行:", row);
|
||||
};
|
||||
|
||||
const titleRef = ref(null);
|
||||
@ -299,7 +322,6 @@ const calculateTableHeight = () => {
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
columns.value = columns1.value;
|
||||
loadData();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
@ -48,15 +48,21 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select v-model="formInline.sex" placeholder="请选择">
|
||||
<el-option label="全部" value="99" />
|
||||
<el-select
|
||||
v-model="formInline.sex"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="男" value="1" />
|
||||
<el-option label="女" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" prop="userStatus">
|
||||
<el-select v-model="formInline.userStatus" placeholder="请选择">
|
||||
<el-option label="全部" value="99" />
|
||||
<el-select
|
||||
v-model="formInline.userStatus"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="异常" value="0" />
|
||||
<el-option label="正常" value="1" />
|
||||
</el-select>
|
||||
@ -65,8 +71,8 @@
|
||||
<el-select
|
||||
v-model="formInline.userCategory"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="全部" value="99" />
|
||||
<el-option label="活跃/低消费" value="1" />
|
||||
<el-option label="活跃/中消费" value="2" />
|
||||
<el-option label="活跃/高消费" value="3" />
|
||||
@ -148,6 +154,7 @@
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
|
||||
>
|
||||
<!-- 自定义-状态 -->
|
||||
<template #userStatus="slotProps">
|
||||
@ -159,26 +166,36 @@
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-dropdown>
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon><More /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 1)"
|
||||
>Action 1</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 2)"
|
||||
>Action 2</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="handleEdit(slotProps.row, 3)"
|
||||
>Action 3</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
@ -189,7 +206,8 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { id } from "element-plus/es/locales.mjs";
|
||||
|
||||
const iconSize = "16px";
|
||||
|
||||
const formInline = reactive({
|
||||
id: "",
|
||||
@ -197,13 +215,15 @@ const formInline = reactive({
|
||||
userName: "",
|
||||
accountNumber: "",
|
||||
phoneNumber: "",
|
||||
sex: "99",
|
||||
userStatus: "99",
|
||||
userCategory: "99",
|
||||
sex: "",
|
||||
userStatus: "",
|
||||
userCategory: "",
|
||||
unitPrice: "",
|
||||
ordersNums: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
@ -234,9 +254,11 @@ const resetForm = () => {
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
const columns = ref([
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "nickname", label: "昵称", width: "120" },
|
||||
{ prop: "userName", label: "姓名" },
|
||||
@ -247,7 +269,7 @@ const columns1 = ref([
|
||||
{ prop: "userCategory", label: "用户分类" },
|
||||
{ prop: "unitPrice", label: "客单价" },
|
||||
{ prop: "ordersNums", label: "订单数目" },
|
||||
{ prop: "action", label: "操作", slotName: "action", width: "180" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
|
||||
// 生成食物主题昵称
|
||||
@ -290,7 +312,7 @@ const generateFoodNickname = () => {
|
||||
// 生成模拟数据
|
||||
const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|30": [
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
nickname: () => generateFoodNickname(), //昵称
|
||||
@ -312,6 +334,7 @@ const loadData = () => {
|
||||
// 模拟API请求延迟
|
||||
setTimeout(() => {
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
}, 500);
|
||||
};
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
@ -329,13 +352,22 @@ const handleSelectionChange = (selection) => {
|
||||
console.log("选中项:", selection);
|
||||
};
|
||||
|
||||
let nowClickRow = ref({});
|
||||
// 编辑操作
|
||||
const handleEdit = (row, num) => {
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("编辑的行:", row);
|
||||
console.log("第几个按钮:", num);
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
};
|
||||
|
||||
|
||||
const titleRef = ref(null);
|
||||
const searchBarRef = ref(null);
|
||||
@ -359,7 +391,6 @@ const calculateTableHeight = () => {
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
columns.value = columns1.value;
|
||||
loadData();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
145
src/views/goods/addGoods.vue
Normal file
145
src/views/goods/addGoods.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="app-container customer-control">
|
||||
<div class="customer-box">
|
||||
<el-form ref="searchForm" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||||
<el-form-item label="商品名称" prop="goodName">
|
||||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品分类" required>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId">
|
||||
<el-select v-model="formInline.categoryId" placeholder="请选择" class="my-el-select">
|
||||
<el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId2">
|
||||
<el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select">
|
||||
<el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="categoryId3">
|
||||
<el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select">
|
||||
<el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const formInline = reactive({
|
||||
goodName: "高质量水稻",
|
||||
categoryId: "", //一级
|
||||
categoryId2: "", //二级
|
||||
categoryId3: "", //三级
|
||||
goodUrl:
|
||||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||||
netWeight: { "100元": "1kg", "200元": "10kg", "300元": "100kg" },
|
||||
stock: 6500,
|
||||
attribute: {
|
||||
品牌: "童涵春堂",
|
||||
型号: "种子种苗",
|
||||
储存条件: "15~25℃(避免高温或冷冻)",
|
||||
系列: "农用百货",
|
||||
产地: "耿马县",
|
||||
},
|
||||
sendAddress: "云南省昆明市",
|
||||
safeguard: "七天无理由退货",
|
||||
detailUrl:
|
||||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||||
brandId: "44552",
|
||||
traceCode: "45788",
|
||||
videoUrl: "",
|
||||
describe:
|
||||
"在实际应用中，你可能需要根据具体的业务需求来调整视频字段的表示方式。例如，在数据库设计中，你可能需要为每个字段定义更详细的数据类型、约束条件和索引策略；在API接口定义中，你可能需要为每个字段定义请求和响应的格式、错误码和文档说明等。",
|
||||
});
|
||||
const rules = reactive({
|
||||
goodName: [
|
||||
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
location: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a location',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
const categoryList = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
console.log(formInline);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.customer-box {
|
||||
border-radius: 16px;
|
||||
padding: 20px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.my-el-select {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
394
src/views/goods/goodsCategory.vue
Normal file
394
src/views/goods/goodsCategory.vue
Normal file
@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="app-container customer-control">
|
||||
<div class="container-custom">
|
||||
<!-- 搜索栏 -->
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form-item label="分类名称" prop="categoryName">
|
||||
<el-input
|
||||
v-model="formInline.categoryName"
|
||||
placeholder="请输入分类名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="categoryStatus">
|
||||
<el-select
|
||||
v-model="formInline.categoryStatus"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<br>
|
||||
<el-form-item
|
||||
label="添加时间"
|
||||
prop="startDate"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formInline.startDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择起始日期"
|
||||
clearable
|
||||
:disabled-date="disableStartDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<span
|
||||
style="width: 30px; text-align: center; display: inline-block"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
<el-date-picker
|
||||
v-model="formInline.endDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择截止日期"
|
||||
clearable
|
||||
:disabled-date="disableEndDate"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 10px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<router-link to="/goods/addGoods">
|
||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
||||
>添加分类</el-button
|
||||
>
|
||||
</router-link>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
>
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img
|
||||
:src="slotProps.row.goodsUrl"
|
||||
class="table-cell-img"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-状态 -->
|
||||
<template #categoryStatus="slotProps">
|
||||
<span v-if="slotProps.row.categoryStatus == '已启用'" class="color-green"
|
||||
>已启用</span
|
||||
>
|
||||
<span v-else class="color-gray">未启用</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toUpload(slotProps.row)"
|
||||
>
|
||||
<Upload />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toDownload(slotProps.row)"
|
||||
>
|
||||
<Download />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<More />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodManageInfo } from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
|
||||
const formInline = reactive({
|
||||
categoryName: "",
|
||||
categoryStatus: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const statusList = ref([
|
||||
{ name: "未启用", id: '0'},
|
||||
{ name: "已启用", id: '1' },
|
||||
]);
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
const disableStartDate = (time) => {
|
||||
if (!formInline.endDate) return false;
|
||||
const endDate = new Date(formInline.endDate);
|
||||
return time.getTime() > endDate.getTime();
|
||||
};
|
||||
|
||||
// 禁用结束日期的逻辑（不能早于已选的开始日期）
|
||||
const disableEndDate = (time) => {
|
||||
if (!formInline.startDate) return false;
|
||||
const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
|
||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
||||
return currentDate < startDate;
|
||||
};
|
||||
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
formInline.current = 1;
|
||||
formInline.categoryStatus = formInline.categoryStatus == undefined ? '' : formInline.categoryStatus;
|
||||
console.log(formInline);
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const btnStatus = computed(() => {
|
||||
return selectedIds.value.length <= 0;
|
||||
});
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
{ prop: "sort", label: "排序" },
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "categoryName", label: "类别" },
|
||||
{ prop: "addTime", label: "添加时间" },
|
||||
{ prop: "categoryStatus", label: "状态", slotName: "categoryStatus" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
|
||||
// 生成食物主题昵称
|
||||
const generateFoodNickname = () => {
|
||||
// 食物名词（仅限食物）
|
||||
const foods = [
|
||||
"辣椒",
|
||||
"西瓜",
|
||||
"土豆",
|
||||
"番茄",
|
||||
"黄瓜",
|
||||
"苹果",
|
||||
"蛋糕",
|
||||
"面包",
|
||||
"披萨",
|
||||
"冰淇淋",
|
||||
"奶茶",
|
||||
"咖啡",
|
||||
"啤酒",
|
||||
"炸鸡",
|
||||
];
|
||||
|
||||
// 随机组合：形容词 + 食物
|
||||
return Mock.mock(`@pick(${foods})`);
|
||||
};
|
||||
// 生成模拟数据
|
||||
const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
"sort|+1": 1,
|
||||
categoryName: '@pick(["种子", "化肥", "农药"])', //分类名称
|
||||
addTime: "@datetime", //添加时间
|
||||
categoryStatus: '@pick(["已启用", "未启用"])', //状态
|
||||
},
|
||||
],
|
||||
}).list;
|
||||
};
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(formInline);
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data.records;
|
||||
// tableTotal.value = response.data.total;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
tableLoading.value = false;
|
||||
};
|
||||
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
const getHeaderClass = ({ column }) => {
|
||||
return "custom-header";
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
loadData();
|
||||
};
|
||||
// 多选框变化
|
||||
const handleSelectionChange = (selection, ids) => {
|
||||
console.log("选中项:", selection, ids);
|
||||
selectedIds.value = ids;
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
const toUpload = () => {
|
||||
console.log("向上移动:");
|
||||
};
|
||||
const toDownload = () => {
|
||||
console.log("向下移动:");
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要删除的行:", row);
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
};
|
||||
|
||||
const titleRef = ref(null);
|
||||
const searchBarRef = ref(null);
|
||||
const tableViewportHeight = ref(0);
|
||||
// 精确计算可用高度
|
||||
const calculateTableHeight = () => {
|
||||
// 获取窗口总高度
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// 获取各组件高度
|
||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
||||
|
||||
// 计算容器内边距补偿（根据实际样式调整）
|
||||
const paddingCompensation = 130;
|
||||
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
columns.value = columns1.value;
|
||||
loadData();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
// 添加响应式监听
|
||||
window.addEventListener("resize", calculateTableHeight);
|
||||
|
||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
||||
const observer = new ResizeObserver(calculateTableHeight);
|
||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", calculateTableHeight);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-toolbar {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 14px 16px 0 0;
|
||||
}
|
||||
</style>
|
||||
412
src/views/goods/goodsManage.vue
Normal file
412
src/views/goods/goodsManage.vue
Normal file
@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<div class="app-container customer-control">
|
||||
<div class="container-custom">
|
||||
<!-- 搜索栏 -->
|
||||
<div ref="searchBarRef" class="search-box">
|
||||
<div class="search-bar">
|
||||
<div class="search-bar-left">
|
||||
<div class="order-tab" style="margin-top: -10px">
|
||||
<el-tabs v-model="activeCurrent" @tab-click="tabChange">
|
||||
<el-tab-pane
|
||||
v-for="t in bottomList"
|
||||
:key="t.id"
|
||||
:label="t.title + '(' + t.value + ')'"
|
||||
:name="t.id"
|
||||
>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="formInline"
|
||||
class="demo-form-inline"
|
||||
:label-width="'auto'"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="goodsName">
|
||||
<el-input
|
||||
v-model="formInline.goodsName"
|
||||
placeholder="请输入商品名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="goodsCategoryId">
|
||||
<el-select
|
||||
v-model="formInline.goodsCategoryId"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in goodsCategoryList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品品牌" prop="goodsBrandId">
|
||||
<el-select
|
||||
v-model="formInline.goodsBrandId"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in goodsBrandList"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-bar-right">
|
||||
<el-button type="primary" icon="Search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
style="margin: 16px 0 0 0"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
||||
<div class="table-toolbar">
|
||||
<el-button
|
||||
icon="delete"
|
||||
@click="batchDelete"
|
||||
:disabled="btnStatus"
|
||||
style="margin-right: 10px"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<router-link to="/goods/addGoods">
|
||||
<el-button type="primary" icon="plus" @click="onSubmit"
|
||||
>新增商品</el-button
|
||||
>
|
||||
</router-link>
|
||||
</div>
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-border="false"
|
||||
:show-selection="true"
|
||||
:header-cell-class-name="getHeaderClass"
|
||||
@page-change="handlePaginationChange"
|
||||
:loading="tableLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
>
|
||||
<!-- 自定义-图片 -->
|
||||
<template #goodsUrl="slotProps">
|
||||
<div class="table-cell-img-box">
|
||||
<img
|
||||
:src="slotProps.row.goodsUrl"
|
||||
class="table-cell-img"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-状态 -->
|
||||
<template #goodsStatus="slotProps">
|
||||
<span v-if="slotProps.row.goodsStatus == '上架'" class="color-green"
|
||||
>上架</span
|
||||
>
|
||||
<span v-else class="color-red">下架</span>
|
||||
</template>
|
||||
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-tooltip effect="dark" placement="bottom-end">
|
||||
<template #content>
|
||||
<div class="custom-tooltip-content">
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="seeDetails(slotProps.row)"
|
||||
>
|
||||
<View />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toUpload(slotProps.row)"
|
||||
>
|
||||
<Upload />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="toDownload(slotProps.row)"
|
||||
>
|
||||
<Download />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleEdit(slotProps.row)"
|
||||
>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
class="el-icon-custom"
|
||||
@click="handleDelete(slotProps.row)"
|
||||
>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon>
|
||||
<More />
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodManageInfo } from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
|
||||
const formInline = reactive({
|
||||
goodsName: "",
|
||||
goodsCategoryId: "",
|
||||
goodsBrandId: "",
|
||||
serachType: "1",
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const goodsCategoryList = ref([
|
||||
{ name: "蔬菜", id: 1 },
|
||||
{ name: "肥料", id: 2 },
|
||||
{ name: "农药", id: 3 },
|
||||
]);
|
||||
const goodsBrandList = ref([
|
||||
{ name: "品牌1", id: 1 },
|
||||
{ name: "品牌2", id: 2 },
|
||||
{ name: "品牌3", id: 3 },
|
||||
]);
|
||||
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log("submit!");
|
||||
formInline.current = 1;
|
||||
console.log(formInline);
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
let activeCurrent = ref("1");
|
||||
let bottomList = reactive([
|
||||
{ title: "全部", id: "1", value: 134 },
|
||||
{ title: "已上架", id: "2", value: 97 },
|
||||
{ title: "已下架", id: "3", value: 37 },
|
||||
]);
|
||||
const tabChange = (Event) => {
|
||||
console.log(Event.index);
|
||||
if (Event.index == "0") {
|
||||
// 请求全部
|
||||
formInline.serachType = "1";
|
||||
} else if (Event.index == "1") {
|
||||
// 请求已上架
|
||||
formInline.serachType = "2";
|
||||
} else {
|
||||
// 请求已下架
|
||||
formInline.serachType = "3";
|
||||
}
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const btnStatus = computed(() => {
|
||||
return selectedIds.value.length <= 0;
|
||||
});
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
let nowClickRow = ref({});
|
||||
// 列配置
|
||||
const columns = ref([]);
|
||||
const columns1 = ref([
|
||||
{ prop: "sort", label: "排序" },
|
||||
{ prop: "id", label: "ID" },
|
||||
{ prop: "goodsUrl", label: "商品图片", slotName: "goodsUrl" },
|
||||
{ prop: "goodsName", label: "商品名称", width: "120" },
|
||||
{ prop: "categoryName", label: "分类名称" },
|
||||
{ prop: "goodsPrice", label: "商品售价" },
|
||||
{ prop: "salesVolume", label: "销量" },
|
||||
{ prop: "pageView", label: "浏览量" },
|
||||
{ prop: "inventory", label: "库存" },
|
||||
{ prop: "goodsStatus", label: "状态", slotName: "goodsStatus" },
|
||||
{ prop: "action", label: "操作", slotName: "action" },
|
||||
]);
|
||||
|
||||
// 生成食物主题昵称
|
||||
const generateFoodNickname = () => {
|
||||
// 食物名词（仅限食物）
|
||||
const foods = [
|
||||
"辣椒",
|
||||
"西瓜",
|
||||
"土豆",
|
||||
"番茄",
|
||||
"黄瓜",
|
||||
"苹果",
|
||||
"蛋糕",
|
||||
"面包",
|
||||
"披萨",
|
||||
"冰淇淋",
|
||||
"奶茶",
|
||||
"咖啡",
|
||||
"啤酒",
|
||||
"炸鸡",
|
||||
];
|
||||
|
||||
// 随机组合：形容词 + 食物
|
||||
return Mock.mock(`@pick(${foods})`);
|
||||
};
|
||||
// 生成模拟数据
|
||||
const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
"sort|+1": 1,
|
||||
goodsUrl: " @image", //商品图片
|
||||
goodsName: () => generateFoodNickname(), //商品名称
|
||||
categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
|
||||
goodsPrice: "@float(10, 200, 2, 2)", //商品售价
|
||||
salesVolume: "@integer(1000, 20000)", //销量
|
||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
||||
inventory: "@integer(5000, 90000)", //库存
|
||||
goodsStatus: '@pick(["上架", "下架"])', //状态
|
||||
ordersNums: "@integer(10, 200)",
|
||||
},
|
||||
],
|
||||
}).list;
|
||||
};
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
tableData.value = generateMockData();
|
||||
tableTotal.value = tableData.value.length;
|
||||
// try {
|
||||
// let response = await getGoodManageInfo(formInline);
|
||||
// console.log(response);
|
||||
// if (response.code == 200) {
|
||||
// tableData.value = response.data.records;
|
||||
// tableTotal.value = response.data.total;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
tableLoading.value = false;
|
||||
};
|
||||
|
||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
||||
const getHeaderClass = ({ column }) => {
|
||||
return "custom-header";
|
||||
};
|
||||
// 分页变化
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
console.log("分页变化:", page, pageSize);
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
// 这里可以调用API获取新数据
|
||||
loadData();
|
||||
};
|
||||
// 多选框变化
|
||||
const handleSelectionChange = (selection, ids) => {
|
||||
console.log("选中项:", selection, ids);
|
||||
selectedIds.value = ids;
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const seeDetails = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要查看详情的行:", row);
|
||||
};
|
||||
const toUpload = () => {
|
||||
console.log("向上移动:");
|
||||
};
|
||||
const toDownload = () => {
|
||||
console.log("向下移动:");
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要删除的行:", row);
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
};
|
||||
|
||||
const titleRef = ref(null);
|
||||
const searchBarRef = ref(null);
|
||||
const tableViewportHeight = ref(0);
|
||||
// 精确计算可用高度
|
||||
const calculateTableHeight = () => {
|
||||
// 获取窗口总高度
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// 获取各组件高度
|
||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
||||
|
||||
// 计算容器内边距补偿（根据实际样式调整）
|
||||
const paddingCompensation = 130;
|
||||
|
||||
// 最终计算
|
||||
tableViewportHeight.value =
|
||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
||||
// console.log(tableViewportHeight.value);
|
||||
};
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
columns.value = columns1.value;
|
||||
loadData();
|
||||
|
||||
calculateTableHeight();
|
||||
|
||||
// 添加响应式监听
|
||||
window.addEventListener("resize", calculateTableHeight);
|
||||
|
||||
// 监听DOM变化（适用于动态变化的header/searchbar）
|
||||
const observer = new ResizeObserver(calculateTableHeight);
|
||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", calculateTableHeight);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-toolbar {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 14px 16px 0 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user