feat: 更新智能柜相关界面和功能
- 在SmartCabinetDTO接口中添加usedCells和availableCells字段 - 修改机柜图片映射文件中的命名格式为"X格柜" - 将商店相关文案统一修改为地址 - 优化智能柜卡片布局,增加使用状态显示并调整样式
This commit is contained in:
parent
33408d023d
commit
7319fae447
|
@ -43,6 +43,8 @@ export interface SmartCabinetDTO {
|
|||
operator?: string;
|
||||
/** 归属类型(0-借还柜 1-固资通) */
|
||||
belongType?: number;
|
||||
usedCells?: number;
|
||||
availableCells?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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格柜",
|
||||
},
|
||||
}
|
|
@ -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)">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue