admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增主柜配置功能并优化配置逻辑 

- 在 `smart-cabinet` 模块中新增 `MainCabinetConfigModal` 组件，用于配置主柜信息
- 优化 `ShopConfigModal` 和 `GatewayConfigModal` 的 `visible` 属性，使用 `computed` 替代 `ref`
- 调整 `cabinet-goods` 模块的分页选项，增加更多可选页大小
- 修复 `smart-cabinet-edit-modal` 中 `cabinetId` 的默认值问题
This commit is contained in:
dzq 2025-05-14 15:36:17 +08:00
parent b9bd840bea
commit f0be0febb2
6 changed files with 155 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/cabinet/smart-cabinet/GatewayConfigModal.vue
View File

@ -17,7 +17,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { getMqttServerList } from '@/api/cabinet/mqttServer';
import { MqttServerDTO } from '@/api/cabinet/mqttServer';
import { ElMessage } from 'element-plus';
@ -30,7 +30,10 @@ const props = defineProps<{
const emit = defineEmits(['update:modelValue', 'refresh']);
const visible = ref(props.modelValue);
const visible = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
});
const mqttList = ref<MqttServerDTO[]>([]);
const loading = ref(false);
const currentCabinetId = ref<number>();

101
src/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<el-dialog v-model="visible" title="主柜配置" width="800px">
<el-table :data="cabinetList" v-loading="loading" border>
<el-table-column prop="cabinetId" label="柜体ID" width="100" />
<el-table-column prop="cabinetName" label="柜体名称" />
<el-table-column label="柜体类型" width="120">
<template #default="{ row }">
<el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
{{ row.cabinetType === 0 ? '主柜' : '副柜' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="80" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleConfig(row)">配置</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" />
</el-dialog>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { SmartCabinetDTO } from '@/api/cabinet/smart-cabinet';
import { ElMessage } from 'element-plus';
import { getSmartCabinetList } from '@/api/cabinet/smart-cabinet';
import { updateSmartCabinet } from '@/api/cabinet/smart-cabinet';
const props = defineProps<{
modelValue: boolean;
cabinetId: number;
}>();
const emit = defineEmits(['update:modelValue', 'refresh']);
const visible = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
});
const cabinetList = ref<SmartCabinetDTO[]>([]);
const loading = ref(false);
const currentCabinetId = ref<number>();
const pagination = ref({
pageSize: 10,
currentPage: 1,
total: 0
});
const loadMainCabinets = async () => {
try {
loading.value = true;
const { data } = await getSmartCabinetList({
cabinetType: 0,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
cabinetList.value = data.rows;
pagination.value.total = data.total;
} finally {
loading.value = false;
}
};
const onSizeChange = (val: number) => {
pagination.value.pageSize = val;
loadMainCabinets();
};
const onCurrentChange = (val: number) => {
pagination.value.currentPage = val;
loadMainCabinets();
};
watch(() => props.modelValue, (val) => {
visible.value = val;
});
watch(() => props.cabinetId, (newVal) => {
if (newVal) {
currentCabinetId.value = newVal;
loadMainCabinets();
}
});
const handleConfig = async (row: SmartCabinetDTO) => {
try {
await updateSmartCabinet(currentCabinetId.value, {
cabinetId: currentCabinetId.value,
mainCabinet: row.cabinetId
});
ElMessage.success('配置成功');
emit('update:modelValue', false);
emit('refresh');
} catch (error) {
console.error('配置失败', error);
}
};
</script>

7
src/views/cabinet/smart-cabinet/ShopConfigModal.vue
View File

@ -16,7 +16,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { getShopList } from '@/api/shop/shop';
import { ShopDTO } from '@/api/shop/shop';
import { ElMessage } from 'element-plus';
@ -29,7 +29,10 @@ const props = defineProps<{
const emit = defineEmits(['update:modelValue', 'refresh']);
const visible = ref(props.modelValue);
const visible = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
});
const shopList = ref<ShopDTO[]>([]);
const loading = ref(false);
const currentCabinetId = ref<number>();

51
src/views/cabinet/smart-cabinet/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getSmartCabinetList, SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
@ -16,6 +16,7 @@ import { deleteSmartCabinet } from "@/api/cabinet/smart-cabinet";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import GatewayConfigModal from "./GatewayConfigModal.vue";
import ShopConfigModal from "./ShopConfigModal.vue";
import MainCabinetConfigModal from "./MainCabinetConfigModal.vue";
defineOptions({
name: "SmartCabinet"
@ -43,7 +44,8 @@ const editVisible = ref(false);
const currentRow = ref<SmartCabinetDTO>();
const gatewayConfigVisible = ref(false);
const shopConfigVisible = ref(false);
const currentCabinetId = ref<number>();
const mainCabinetConfigVisible = ref(false);
const currentCabinetId = ref<number>(0);
const getList = async () => {
try {
@ -145,6 +147,11 @@ const handleShopConfig = (row: SmartCabinetDTO) => {
shopConfigVisible.value = true;
};
const handleMainCabinetConfig = (row: SmartCabinetDTO) => {
currentCabinetId.value = row.cabinetId;
mainCabinetConfigVisible.value = true;
};
getList();
</script>
@ -185,15 +192,43 @@ getList();
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" />
<el-table-column label="柜体名称" prop="cabinetName" />
<el-table-column label="归属商店" prop="shopName" width="120" />
<el-table-column label="归属商店" prop="shopName" width="180">
<template #default="{ row }">
<span>{{ row.shopName }}</span>
<el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
配置
</el-button>
</template>
</el-table-column>
<el-table-column label="归属主柜" prop="mainCabinetName" width="180">
<template #default="{ row }">
<template v-if="row.cabinetType === 1">
<span>{{ row.mainCabinetName || '-' }}</span>
<el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="handleMainCabinetConfig(row)">
配置
</el-button>
</template>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="柜体类型" prop="cabinetType" width="120">
<template #default="{ row }">
<el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
{{ row.cabinetType === 0 ? '主柜' : '副柜' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="模板编号" prop="templateNo" width="180" />
<el-table-column label="锁控编号" prop="lockControlNo" width="120" />
<el-table-column label="网关ID" prop="mqttServerId" width="120" />
<el-table-column label="网关ID" prop="mqttServerId" width="180">
<template #default="{ row }">
<span>{{ row.mqttServerId }}</span>
<el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
@click="handleGatewayConfig(row)">
配置
</el-button>
</template>
</el-table-column>
<el-table-column label="位置" prop="location" width="120" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
@ -203,13 +238,6 @@ getList();
<el-button type="warning" link :icon="useRenderIcon(EditPen)" @click="goCellManagement(row)">
格口
</el-button>
<el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
@click="handleGatewayConfig(row)">
配置网关
</el-button>
<el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
配置商店
</el-button>
<el-popconfirm :title="`确认删除【${row.cabinetName}】？`" @confirm="handleDelete(row)">
<template #reference>
<el-button type="danger" link :icon="useRenderIcon(Delete)">
@ -228,5 +256,6 @@ getList();
<smart-cabinet-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
<GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
<ShopConfigModal v-model="shopConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
<MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
</div>
</template>

3
src/views/cabinet/smart-cabinet/smart-cabinet-edit-modal.vue
View File

@ -7,7 +7,7 @@ import Confirm from "@iconify-icons/ep/check";
import type { FormRules } from 'element-plus';
export interface FormDTO {
cabinetId?: number;
cabinetId: number;
cabinetName: string;
cabinetType: number;
templateNo: string;
@ -30,6 +30,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
const formRef = ref();
const formData = reactive<FormDTO>({
cabinetId: 0,
cabinetName: "",
cabinetType: 1,
templateNo: "",

2
src/views/shop/cabinet-goods/index.vue
View File

@ -311,7 +311,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
</el-table-column>
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
:page-sizes="[5,8,10,11,12,13,14,15,16,18,20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
</div>
<el-dialog v-model="configVisible" title="配置商品" width="80%">