feat(柜体管理): 添加格口号列和柜机列表功能
在柜体管理页面中，新增了格口号列以展示单元格编号，并添加了左侧柜机列表，方便用户快速切换柜体进行管理。同时优化了页面布局和样式，提升了用户体验。
This commit is contained in:
dzq
parent
312fb7ae81
commit
4146851ac2
|
|
@ -4,6 +4,7 @@ import { PureTableBar } from "@/components/RePureTableBar";
|
|||
import { onBeforeRouteUpdate, useRoute } from "vue-router";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { getCabinetCellList, deleteCabinetCell, CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
|
||||
import { allCabinets, SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
|
@ -14,39 +15,56 @@ import CellEditModal from "./cell-edit-modal.vue";
|
|||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { on } from "events";
|
||||
|
||||
// 定义组件选项
|
||||
defineOptions({
|
||||
name: "CabinetCell"
|
||||
name: "CabinetCell" // 组件名称
|
||||
});
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref();
|
||||
// 表格引用
|
||||
const tableRef = ref();
|
||||
// 新增单元格模态框显示状态
|
||||
const modalVisible = ref(false);
|
||||
|
||||
// 搜索表单参数
|
||||
const searchFormParams = ref({
|
||||
cabinetId: null,
|
||||
cellNo: null,
|
||||
cellType: null
|
||||
cabinetId: null, // 柜体ID
|
||||
cellNo: null, // 单元格号
|
||||
cellType: null // 单元格类型
|
||||
});
|
||||
|
||||
// 分页参数
|
||||
const pagination = ref({
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0
|
||||
pageSize: 10, // 每页显示数量
|
||||
currentPage: 1, // 当前页码
|
||||
total: 0 // 总条数
|
||||
});
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 表格数据列表
|
||||
const dataList = ref([]);
|
||||
// 多选选中项
|
||||
const multipleSelection = ref<number[]>([]);
|
||||
// 编辑单元格模态框显示状态
|
||||
const editVisible = ref(false);
|
||||
// 当前编辑行数据
|
||||
const currentRow = ref<CabinetCellDTO>();
|
||||
|
||||
// 路由实例
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
// 柜机列表数据
|
||||
const cabinets = ref<SmartCabinetDTO[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await allCabinets();
|
||||
cabinets.value = data;
|
||||
if (route.query.cabinetId) {
|
||||
searchFormParams.value.cabinetId = Number(route.query.cabinetId);
|
||||
getList();
|
||||
}
|
||||
getList();
|
||||
});
|
||||
onBeforeRouteUpdate(() => {
|
||||
if (route.query.cabinetId) {
|
||||
|
|
@ -55,24 +73,33 @@ onBeforeRouteUpdate(() => {
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取单元格列表数据
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const getList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
loading.value = true; // 显示加载状态
|
||||
// 调用API获取单元格列表
|
||||
const { data } = await getCabinetCellList({
|
||||
...searchFormParams.value,
|
||||
pageSize: pagination.value.pageSize,
|
||||
pageNum: pagination.value.currentPage
|
||||
...searchFormParams.value, // 搜索参数
|
||||
pageSize: pagination.value.pageSize, // 每页数量
|
||||
pageNum: pagination.value.currentPage // 当前页码
|
||||
});
|
||||
dataList.value = data.rows;
|
||||
pagination.value.total = data.total;
|
||||
dataList.value = data.rows; // 更新表格数据
|
||||
pagination.value.total = data.total; // 更新总条数
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false; // 隐藏加载状态
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索按钮点击事件
|
||||
* 重置页码为第一页并重新获取数据
|
||||
*/
|
||||
const onSearch = () => {
|
||||
pagination.value.currentPage = 1;
|
||||
getList();
|
||||
pagination.value.currentPage = 1; // 重置页码
|
||||
getList(); // 重新获取数据
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
|
|
@ -90,13 +117,18 @@ const onCurrentChange = (val: number) => {
|
|||
getList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除单元格
|
||||
* @param {CabinetCellDTO} row - 要删除的单元格数据
|
||||
*/
|
||||
const handleDelete = async (row: CabinetCellDTO) => {
|
||||
try {
|
||||
// 调用API删除单元格
|
||||
await deleteCabinetCell(row.cellId!.toString());
|
||||
ElMessage.success("删除成功");
|
||||
getList();
|
||||
ElMessage.success("删除成功"); // 显示成功消息
|
||||
getList(); // 刷新列表
|
||||
} catch (error) {
|
||||
console.error("删除失败", error);
|
||||
console.error("删除失败", error); // 打印错误信息
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -128,6 +160,11 @@ const handleEdit = (row: CabinetCellDTO) => {
|
|||
editVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 转换单元格类型为中文描述
|
||||
* @param {number} cellType - 单元格类型编号
|
||||
* @returns {string} 单元格类型中文描述
|
||||
*/
|
||||
const switchCellType = (cellType: number) => {
|
||||
switch (cellType) {
|
||||
case 1:
|
||||
|
|
@ -146,7 +183,24 @@ const switchCellType = (cellType: number) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main flex">
|
||||
<!-- 左侧柜机列表 -->
|
||||
<div class="w-[200px] pr-4 border-r h-full left-list">
|
||||
<div class="text-lg font-bold mb-4 px-2">柜机列表</div>
|
||||
<div class="h-[calc(100vh-180px)] overflow-y-auto">
|
||||
<div class="cabinet-list">
|
||||
<div v-for="cabinet in cabinets" :key="cabinet.cabinetId"
|
||||
class="cabinet-item p-3 mb-2 cursor-pointer rounded hover:bg-gray-100 transition-colors"
|
||||
:class="{ 'bg-blue-50': searchFormParams.cabinetId === cabinet.cabinetId }"
|
||||
@click="searchFormParams.cabinetId = cabinet.cabinetId; onSearch()">
|
||||
{{ cabinet.cabinetName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<div class="flex-1 pl-4">
|
||||
<el-form ref="formRef" :inline="true" :model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
|
||||
<el-form-item label="柜体ID：" prop="cabinetId">
|
||||
|
|
@ -229,6 +283,20 @@ const switchCellType = (cellType: number) => {
|
|||
@refresh="getList" />
|
||||
<cell-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.border-r {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.left-list {
|
||||
background: #FFFFFF;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import Qrcode from "@iconify-icons/ep/iphone";
|
|||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import ShopFormModal from "./shop-form-modal.vue";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
import { copyTextToClipboard } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "Shop"
|
||||
|
|
@ -123,6 +124,12 @@ const showQrCode = (shopId: number) => {
|
|||
qrVisible.value = true;
|
||||
};
|
||||
|
||||
const copyLink = () => {
|
||||
const url = `http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth?shopId=${currentShopId.value}`;
|
||||
const success = copyTextToClipboard(url);
|
||||
success ? ElMessage.success('链接复制成功') : ElMessage.error('复制失败，请手动复制');
|
||||
};
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
|
|
@ -188,6 +195,9 @@ getList();
|
|||
<ReQrcode :text="`http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth?shopId=${currentShopId}`"
|
||||
:options="{ width: 200 }" />
|
||||
<div class="mt-2 text-sm text-gray-500">微信扫码访问</div>
|
||||
<el-button class="mt-2" type="primary" size="small" @click="copyLink">
|
||||
复制链接
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -261,6 +261,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
|
|||
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
|
||||
@selection-change="handleSelectionChange" border>
|
||||
<el-table-column label="格口ID" prop="cellId" width="80" />
|
||||
<el-table-column label="格口号" prop="cellNo" width="80" />
|
||||
<el-table-column label="商品图片" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"
|
||||
|
|
|
|||
Loading…
Reference in New Issue