shop-front-end/src/views/cabinet/smart-cabinet-card/detail.vue

574 lines
20 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmartCabinetDetailApi, type SmartCabinetDTO, getModeText, getBalanceEnableText } from "@/api/cabinet/smart-cabinet";
import { CabinetCellQuery, changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { CabinetImgMap } from "@/utils/cabinetImgMap";
import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
import CabinetGoodsConfigModal from "@/views/shop/cabinet-goods/cabinet-goods-config-modal.vue";
import ConfiguredGoodsModal from "./configured-goods-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
import EditPen from "@iconify-icons/ep/edit-pen";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import CellFormModal from "@/views/cabinet/cabinet-cell/cell-form-modal.vue";
import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
import { getGoodsInfo } from "@/api/shop/goods";
import EditCabinetDrawer from "./edit-cabinet-drawer.vue";
import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
defineOptions({
name: "SmartCabinetDetail"
});
const router = useRouter();
const route = useRoute();
const currentCell = ref<CabinetCellDTO>();
const cabinetInfo = ref<SmartCabinetDTO>({
cabinetName: "",
cabinetType: 0,
templateNo: "",
lockControlNo: 0,
location: 0
});
const loading = ref(false);
const activeTab = ref('cells');
const mainboardList = ref<CabinetMainboardDTO[]>([]);
const mainboardPagination = ref({
pageSize: 5,
currentPage: 1,
total: 0
});
const cabinetId = ref<number>(0);
const gatewayConfigVisible = ref(false);
const shopConfigVisible = ref(false);
const mainCabinetConfigVisible = ref(false);
const editCabinetDrawerVisible = ref(false);
const cellList = ref<CabinetCellDTO[]>([]);
const searchCellParams = ref<CabinetCellQuery>({
goodsName: null
});
const cellPagination = ref({
pageSize: 18,
currentPage: 1,
total: 0
});
const goodsConfigVisible = ref(false);
const configuredGoodsVisible = ref(false);
const currentCellId = ref<number>();
const cellFormVisible = ref(false);
const cellEditVisible = ref(false);
function handleConfigure(row: CabinetCellDTO) {
if (row.goodsId) {
currentCell.value = row;
configuredGoodsVisible.value = true;
} else {
currentCellId.value = row.cellId;
goodsConfigVisible.value = true;
}
}
async function handleStockConfig(row: CabinetCellDTO) {
try {
const { data } = await getGoodsInfo(row.goodsId!);
const remainingStock = data.stock - data.totalStock + row.stock;
const { value } = await ElMessageBox.prompt(
`请输入${row.goodsName || '未配置商品'}的库存数量(本次最多可分配:${remainingStock})。\n 若可分配数量不足,请先调整商品列表中的库存。`,
'配置库存',
{
inputPattern: /^0$|^[1-9]\d*$/,
inputValue: row.stock?.toString(),
inputErrorMessage: '请输入有效的非负整数',
inputValidator: (inputValue: string) => {
const num = Number(inputValue);
if (num > remainingStock) {
return '分配数量不能超过剩余库存';
}
return true;
}
}
);
if (Number(value) > remainingStock) {
ElMessage.warning('分配数量不能超过剩余库存');
return;
}
await changeGoodsCellsStock(row.cellId!, Number(value));
ElMessage.success('库存更新成功');
fetchCellList();
} catch (error) {
console.error('库存配置取消或失败', error);
}
}
async function handleClearGoods(row: CabinetCellDTO) {
try {
await ElMessageBox.confirm(
`确认要下架${row.goodsName || '未配置商品'}吗?`,
'警告',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
);
await clearGoodsCells(row.cellId!);
ElMessage.success('商品下架成功');
fetchCellList();
} catch (error) {
console.error('操作取消或失败', error);
}
}
function handleEditCell(row: CabinetCellDTO) {
currentCell.value = row;
cellEditVisible.value = true;
}
async function fetchCabinetDetail() {
try {
loading.value = true;
const { data } = await getSmartCabinetDetailApi(cabinetId.value);
cabinetInfo.value = data;
} finally {
loading.value = false;
}
}
function switchCellType(cellType: number) {
switch (cellType) {
case 1: return '小格';
case 2: return '中格';
case 3: return '大格';
case 4: return '超大格';
default: return '未知';
}
}
function resetCellSearch() {
searchCellParams.value.cellNo = null;
fetchCellList();
}
async function fetchCellList() {
try {
loading.value = true;
const { data } = await getCabinetCellList({
cabinetId: cabinetId.value,
goodsName: searchCellParams.value.goodsName,
pageSize: cellPagination.value.pageSize,
pageNum: cellPagination.value.currentPage
});
cellList.value = data.rows;
cellPagination.value.total = data.total;
} finally {
loading.value = false;
}
}
function handleCellSizeChange(val: number) {
cellPagination.value.pageSize = val;
fetchCellList();
}
function handleCellPageChange(val: number) {
cellPagination.value.currentPage = val;
fetchCellList();
}
async function fetchMainboardList() {
try {
loading.value = true;
const { data } = await getMainboardList({
cabinetId: cabinetId.value,
pageSize: mainboardPagination.value.pageSize,
pageNum: mainboardPagination.value.currentPage
});
mainboardList.value = data.rows;
mainboardPagination.value.total = data.total;
} finally {
loading.value = false;
}
}
function handleMainboardSizeChange(val: number) {
mainboardPagination.value.pageSize = val;
fetchMainboardList();
}
function handleMainboardPageChange(val: number) {
mainboardPagination.value.currentPage = val;
fetchMainboardList();
}
async function handleEditMainboard(row: CabinetMainboardDTO) {
try {
const { value } = await ElMessageBox.prompt(
'请输入锁控板序号',
'编辑主板',
{
inputPattern: /^\d+$/,
inputValue: row.lockControlNo.toString(),
inputErrorMessage: '请输入有效的数字'
}
);
await updateMainboard(row.mainboardId!, {
mainboardId: row.mainboardId,
lockControlNo: Number(value)
});
ElMessage.success('主板更新成功');
fetchMainboardList();
} catch (error) {
console.error('操作取消或失败', error);
}
}
async function handleDeleteMainboard(row: CabinetMainboardDTO) {
try {
await ElMessageBox.confirm(
'确认要删除该主板吗?',
'警告',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
);
await deleteMainboard(row.mainboardId!.toString());
ElMessage.success('主板删除成功');
fetchMainboardList();
} catch (error) {
console.error('操作取消或失败', error);
}
}
onMounted(() => {
cabinetId.value = Number(route.query.id);
fetchCabinetDetail();
fetchCellList();
fetchMainboardList();
});
</script>
<template>
<div class="detail-container">
<div class="flex-container">
<el-card class="cabinet-info-card">
<div class="cabinet-header">
<img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
class="cabinet-image" />
<div class="cabinet-name">{{ cabinetInfo.cabinetName }}</div>
</div>
<el-divider />
<el-descriptions class="cabinet-details" :column="1" border>
<el-descriptions-item label="名称">{{ cabinetInfo.cabinetName }}</el-descriptions-item>
<el-descriptions-item label="模式">{{ getModeText(cabinetInfo.mode) }}</el-descriptions-item>
<el-descriptions-item label="格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
}}</el-descriptions-item>
<el-descriptions-item label="已用">{{ cabinetInfo.usedCells || '0' }}</el-descriptions-item>
<el-descriptions-item label="未用">{{ cabinetInfo.availableCells || '0' }}</el-descriptions-item>
<el-descriptions-item label="柜址">{{ cabinetInfo.shopName || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="info-card">
<div class="tab-header">
<el-tabs type="card" v-model="activeTab">
<el-tab-pane label="格口管理" name="cells"></el-tab-pane>
<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
<el-tab-pane label="主板管理" name="mainboards"></el-tab-pane>
</el-tabs>
</div>
<div class="info-details" v-if="activeTab === 'basic'">
<div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="editCabinetDrawerVisible = true">
编辑柜体
</el-button>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="柜体名称">{{ cabinetInfo.cabinetName || '-' }}</el-descriptions-item>
<el-descriptions-item label="运行模式">{{ getModeText(cabinetInfo.mode) }}</el-descriptions-item>
<el-descriptions-item label="柜体格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
}}</el-descriptions-item>
<el-descriptions-item label="柜体地址">{{ cabinetInfo.shopName || '-' }}
<el-button type="success" link @click="shopConfigVisible = true">
配置
</el-button></el-descriptions-item>
<el-descriptions-item label="柜体网关">{{ cabinetInfo.mqttServerId || '-' }}
<el-button type="warning" link @click="gatewayConfigVisible = true">
配置
</el-button></el-descriptions-item>
<el-descriptions-item label="借呗支付">{{ getBalanceEnableText(cabinetInfo.balanceEnable)
}}</el-descriptions-item>
<!-- <el-descriptions-item label="归属类型">
{{ cabinetInfo.belongType === 0 ? '借还柜' : '固资通' }}
</el-descriptions-item> -->
</el-descriptions>
</div>
<div class="cell-details" v-if="activeTab === 'cells'">
<div style="display: flex; justify-content: space-between; margin-bottom: 0px;">
<el-form :inline="true" :model="searchCellParams" class="search-form">
<el-form-item>
<el-input @keydown.enter.prevent="fetchCellList" v-model="searchCellParams.goodsName"
placeholder="请输入商品名称" clearable class="!w-[180px]" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="fetchCellList">
搜索
</el-button>
</el-form-item>
</el-form>
<!-- <el-button type="primary" :size="'small'" :icon="useRenderIcon(AddFill)" @click="cellFormVisible = true">
新增格口
</el-button> -->
</div>
<el-row :gutter="12">
<el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
<el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
<div class="card-content">
<el-image v-if="item.coverImg" :src="item.coverImg" class="cell-image" fit="contain" />
<svg v-if="!item.coverImg" width="80" height="80" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" class="cell-image">
<rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
<!-- 添加在矩形和文本之间的虚线 -->
<line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
<text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
text-anchor="middle">空闲</text>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
</svg>
<div class="cell-info">
<div class="cell-no">格口号: {{ item.cellNo }}</div>
<div class="price">价格: {{ item.price }}</div>
<div class="stock">库存: {{ item.stock }}</div>
<!-- <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div> -->
</div>
<!-- <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div> -->
</div>
<div class="line-num">
<el-divider direction="horizontal" class="vertical-divider"/>
<span class="line-number">{{ item.cellNo }}</span>
</div>
<div class="action-buttons">
<el-button v-if="cabinetInfo.belongType === 0 && !item.goodsId" link type="success"
@click="handleConfigure(item)" class="cell-btn">
商品配置
</el-button>
<el-button v-if="cabinetInfo.belongType === 1 || item.goodsId" link type="primary"
@click="handleEditCell(item)" class="cell-btn">
{{ item.goodsName }}
</el-button>
<!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
@click="handleStockConfig(item)">
库存
</el-button>
<el-button v-if="item.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
@click="handleClearGoods(item)">
下架
</el-button> -->
</div>
</el-card>
</el-col>
</el-row>
<el-pagination v-model:current-page="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
:page-sizes="[12, 18, 24, 30, 36, 42]" layout="total, sizes, prev, pager, next, jumper"
:total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
class="pagination" />
</div>
<div class="mainboard-details" v-if="activeTab === 'mainboards'">
<el-table v-loading="loading" :data="mainboardList" border>
<el-table-column label="主板ID" prop="mainboardId" width="80" />
<el-table-column label="锁控板序号" prop="lockControlNo" width="120" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEditMainboard(row)">
编辑
</el-button>
<el-button type="danger" link :icon="useRenderIcon(Delete)" @click="handleDeleteMainboard(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-model:current-page="mainboardPagination.currentPage"
v-model:page-size="mainboardPagination.pageSize" :page-sizes="[5, 8, 16, 24, 32]"
layout="total, sizes, prev, pager, next, jumper" :total="mainboardPagination.total"
@size-change="handleMainboardSizeChange" @current-change="handleMainboardPageChange" class="pagination" />
</div>
</el-card>
<GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
<ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
<MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
@refresh="fetchCabinetDetail" />
<el-drawer v-model="editCabinetDrawerVisible" title="编辑柜体" size="30%" direction="rtl">
<EditCabinetDrawer v-model="editCabinetDrawerVisible" :cabinet-info="cabinetInfo"
@refresh="fetchCabinetDetail" />
</el-drawer>
<el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
<CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="configuredGoodsVisible" title="管理商品" size="30%" direction="rtl">
<ConfiguredGoodsModal v-model="configuredGoodsVisible" :cell-id="currentCell?.cellId"
:goods-id="currentCell?.goodsId" :goods-name="currentCell?.goodsName" :current-stock="currentCell?.stock"
:cover-img="currentCell?.coverImg" :price="currentCell?.price" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
<CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
</el-drawer>
<el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
<CellEditModal v-model="cellEditVisible" :row="currentCell" @refresh="fetchCellList" />
</el-drawer>
</div>
</div>
</template>
<style scoped lang="scss">
.cell-card {
margin-bottom: 12px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
/* &:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */
.card-content {
display: flex;
flex-direction: row;
margin: 0px;
.cell-image {
width: 50%;
height: 130px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 12px;
}
.cell-info {
padding: 18px 8px 0 8px;
div {
font-size: 13px;
margin-bottom: 6px;
color: #606266;
&.goods-name {
font-weight: 500;
color: var(--el-text-color-primary);
}
&.price {
font-weight: 600;
}
}
}
}
.line-num {
display: flex;
justify-content: space-between;
align-items: center;
.vertical-divider {
margin: 0 0 0 0;
width: 85%;
}
.line-number {
font-size: 14px;
color: #606266;
font-weight: 600;
}
}
.action-buttons {
display: flex;
justify-content: center;
margin-top: auto;
padding: 8px 0 0 0;
/* border-top: 1px solid var(--el-border-color-light); */
.cell-btn {
margin-right: 8px;
width: 80px;
height: 30px;
}
}
}
:deep(.el-tabs__header) {
margin-bottom: 8px;
}
:deep(.el-drawer__header) {
margin: 0;
}
:deep(.el-drawer__body) {
padding: 4px;
}
.el-form-item {
margin-bottom: 8px;
}
.detail-container {
display: flex;
flex-direction: column;
height: 100%;
.flex-container {
display: flex;
flex: 1;
gap: 12px;
min-height: 0;
.cabinet-info-card {
width: 20%;
height: 88vh;
}
.info-card {
width: 80%;
height: 88vh;
overflow-y: auto;
}
}
.cabinet-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.cabinet-image {
width: 100%;
height: 320px;
object-fit: contain;
margin-bottom: 15px;
}
.cabinet-name {
font-size: 20px;
font-weight: bold;
}
}
.tab-header {
margin-bottom: 0px;
}
}
.pagination {
margin-top: 10px;
}
</style>