feat: 更新智能柜相关界面和功能

- 在SmartCabinetDTO接口中添加usedCells和availableCells字段
- 修改机柜图片映射文件中的命名格式为"X格柜"
- 将商店相关文案统一修改为地址
- 优化智能柜卡片布局,增加使用状态显示并调整样式
This commit is contained in:
dzq 2025-06-02 10:25:04 +08:00
parent 33408d023d
commit 7319fae447
5 changed files with 38 additions and 27 deletions

View File

@ -43,6 +43,8 @@ export interface SmartCabinetDTO {
operator?: string;
/** 归属类型0-借还柜 1-固资通) */
belongType?: number;
usedCells?: number;
availableCells?: number;
}
/**

View File

@ -1,38 +1,38 @@
export const CabinetImgMap = {
1: {
img: "cabinet_16.jpg",
name: "16口机柜",
name: "16柜",
},
2: {
img: "cabinet_20.jpg",
name: "20口机柜",
name: "20柜",
},
3: {
img: "cabinet_22.jpg",
name: "22口机柜",
name: "22柜",
},
4: {
img: "cabinet_24.jpg",
name: "24口机柜",
name: "24柜",
},
5: {
img: "cabinet_40.jpg",
name: "40口机柜",
name: "40柜",
},
6: {
img: "cabinet_48.jpg",
name: "48口机柜",
name: "48柜",
},
7: {
img: "cabinet_60.jpg",
name: "60口机柜",
name: "60柜",
},
8: {
img: "cabinet_120.jpg",
name: "120口机柜",
name: "120柜",
},
9: {
img: "cabinet_4.jpg",
name: "4口机柜",
name: "4柜",
},
}

View File

@ -93,7 +93,7 @@ const handleBulkDelete = async () => {
try {
await ElMessageBox.confirm(
`确认删除选中的${multipleSelection.value.length}商店吗?`,
`确认删除选中的${multipleSelection.value.length}地址吗?`,
"警告",
{ confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }
);
@ -138,7 +138,7 @@ getList();
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
<el-form-item prop="shopName">
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入商店名称" clearable
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入地址名称" clearable
class="!w-[200px]" />
</el-form-item>
<el-form-item>
@ -151,7 +151,7 @@ getList();
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true"
style="margin-right: 10px;">
新增商店
新增地址
</el-button>
</el-form-item>
</el-form>
@ -160,8 +160,8 @@ getList();
<el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="id"
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" />
<el-table-column label="商店ID" prop="shopId" width="100" />
<el-table-column label="商店名称" prop="shopName" />
<el-table-column label="地址ID" prop="shopId" width="100" />
<el-table-column label="地址名称" prop="shopName" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)">

View File

@ -23,7 +23,7 @@ const formData = ref<UpdateShopCommand>({
});
const rules = {
shopName: [{ required: true, message: "请输入商店名称", trigger: "blur" }]
shopName: [{ required: true, message: "请输入地址名称", trigger: "blur" }]
};
watch(
@ -70,14 +70,14 @@ const handleClose = () => {
</script>
<template>
<el-dialog :title="formData.shopId ? '编辑商店' : '新增商店'" :model-value="visible" @update:model-value="handleClose"
<el-dialog :title="formData.shopId ? '编辑地址' : '新增地址'" :model-value="visible" @update:model-value="handleClose"
width="600px">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="商店ID" prop="shopId" v-if="formData.shopId">
<el-form-item label="地址ID" prop="shopId" v-if="formData.shopId">
<el-input v-model="formData.shopId" :disabled="true" />
</el-form-item>
<el-form-item label="商店名称" prop="shopName">
<el-input v-model="formData.shopName" placeholder="请输入商店名称" />
<el-form-item label="地址名称" prop="shopName">
<el-input v-model="formData.shopName" placeholder="请输入地址名称" />
</el-form-item>
</el-form>
<template #footer>

View File

@ -124,17 +124,23 @@ onMounted(() => {
<div class="grid-container">
<el-row :gutter="12">
<el-col v-for="(item, index) in dataList" :key="item.cabinetId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
<el-card class="cabinet-card" :body-style="{ padding: '8px 20px' }">
<el-card class="cabinet-card" :body-style="{ padding: '8px 10px' }">
<div class="card-content">
<img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
class="cabinet-image" />
<el-descriptions class="cabinet-info" :column="2">
<el-descriptions-item class="name" :span="2">柜体名称{{ item.cabinetName }}
<el-descriptions class="cabinet-info" :column="1">
<el-descriptions-item class="name">名称{{ item.cabinetName }}
</el-descriptions-item>
<el-descriptions-item class="name">模式{{ '支付模式' }}
</el-descriptions-item>
<!-- <div class="type">柜体类型{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
<el-descriptions-item class="template">模板{{ CabinetImgMap[item.templateNo]?.name || '-' }}
<el-descriptions-item class="template">格式{{ CabinetImgMap[item.templateNo]?.name || '-' }}
</el-descriptions-item>
<el-descriptions-item class="shop">商店{{ item.shopName || '-' }}
<el-descriptions-item class="shop">已用{{ item.usedCells }}
</el-descriptions-item>
<el-descriptions-item class="shop">未用{{ item.availableCells }}
</el-descriptions-item>
<el-descriptions-item class="shop">柜址{{ item.shopName || '-' }}
</el-descriptions-item>
</el-descriptions>
</div>
@ -176,7 +182,7 @@ onMounted(() => {
justify-content: space-between;
.cabinet-image {
width: 100%;
width: 55%;
height: 200px;
object-fit: contain;
border-radius: 4px;
@ -185,10 +191,13 @@ onMounted(() => {
.card-content {
flex: 1;
margin: 15px 0px;
margin: 0px;
display: flex;
flex-direction: row;
.cabinet-info {
text-align: left;
padding: 16px 0px;
.name,
.type,
@ -198,7 +207,7 @@ onMounted(() => {
width: 100%;
font-size: 14px;
color: #606266;
margin-bottom: 6px;
margin-bottom: 12px;
line-height: 1;
text-align: left;
}