<!-- LockConfigurator.vue -->
|
<template>
|
<div class="lock-configurator">
|
<h3>锁配置（共 {{ lockCount }} 把锁）</h3>
|
<div v-for="(lock, index) in lockConfigs" :key="index" class="lock-item">
|
<label>锁 {{ index + 1 }}：</label>
|
<select
|
v-model="lock.cabinetIdx"
|
@change="updateDoors(index)"
|
class="select-input"
|
>
|
<option :value="null">选择机柜</option>
|
<option
|
v-for="cab in availableCabinets"
|
:key="cab.idx"
|
:value="cab.idx"
|
:disabled="isCabinetUsed(cab.idx)"
|
>
|
机柜 {{ cab.idx }}
|
</option>
|
</select>
|
<select
|
v-model="lock.doorIdx"
|
:disabled="!lock.cabinetIdx"
|
class="select-input"
|
>
|
<option :value="null">选择门</option>
|
<option
|
v-for="door in availableDoors(lock.cabinetIdx)"
|
:key="door"
|
:value="door"
|
:disabled="isDoorUsed(lock.cabinetIdx, door)"
|
>
|
门 {{ door }}
|
</option>
|
</select>
|
</div>
|
<button @click="submitConfig" class="submit-btn">
|
提交配置
|
</button>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, watch } from 'vue';
|
|
// 接收父组件传入的锁数量
|
const props = defineProps({
|
lockCount: {
|
type: Number,
|
required: true
|
}
|
});
|
|
// 初始化所有机柜（1-20号，各2个门）
|
const allCabinets = ref(
|
Array.from({ length: 20 }, (_, i) => ({
|
idx: i + 1,
|
doors: [1, 2]
|
}))
|
);
|
|
// 锁的配置数组（响应式）
|
const lockConfigs = reactive(
|
Array.from({ length: props.lockCount }, () => ({
|
cabinetIdx: null,
|
doorIdx: null
|
}))
|
);
|
|
// 计算可用机柜（过滤已使用的机柜）
|
const usedCabinets = computed(() =>
|
lockConfigs.filter(lock => lock.cabinetIdx !== null)
|
);
|
|
// 防重复选择逻辑
|
const isCabinetUsed = (cabIdx) => {
|
return lockConfigs.some(lock =>
|
lock.cabinetIdx === cabIdx && lock.doorIdx !== null
|
);
|
};
|
|
const isDoorUsed = (cabIdx, door) => {
|
return lockConfigs.some(lock =>
|
lock.cabinetIdx === cabIdx && lock.doorIdx === door
|
);
|
};
|
|
// 允许同一机柜选不同门，但需配合门选择时的去重逻辑
|
const availableCabinets = computed(() =>
|
allCabinets.value.filter(cab =>
|
!lockConfigs.some(lock => lock.cabinetIdx === cab.idx)
|
)
|
);
|
|
// 更新可用门选项
|
const availableDoors = (cabIdx) => {
|
if (!cabIdx) return [];
|
return allCabinets.value.find(cab => cab.idx === cabIdx)?.doors.filter(door =>
|
!isDoorUsed(cabIdx, door)
|
) || [];
|
};
|
|
// 提交配置（根据需求可替换为API调用）
|
const submitConfig = () => {
|
const valid = lockConfigs.every(lock =>
|
lock.cabinetIdx !== null && lock.doorIdx !== null
|
);
|
|
if (valid) {
|
console.log(' 配置提交成功:', lockConfigs);
|
} else {
|
alert('请完成所有锁的配置');
|
}
|
};
|
|
// 监听锁数量变化（动态调整配置数组）
|
watch(() => props.lockCount, (newVal) => {
|
lockConfigs.length = newVal;
|
lockConfigs.forEach((lock, index) => {
|
if (index >= newVal) {
|
lock.cabinetIdx = null;
|
lock.doorIdx = null;
|
}
|
});
|
});
|
</script>
|
|
<style scoped>
|
.lock-configurator {
|
max-width: 600px;
|
margin: 20px auto;
|
padding: 20px;
|
background: #f5f5f5;
|
border-radius: 8px;
|
}
|
|
.lock-item {
|
margin: 15px 0;
|
display: flex;
|
align-items: center;
|
}
|
|
.lock-item label {
|
margin-right: 20px;
|
width: 80px;
|
font-weight: bold;
|
}
|
|
.select-input {
|
margin-right: 15px;
|
padding: 8px 12px;
|
width: 150px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
}
|
|
.select-input:disabled {
|
background: #f0f0f0;
|
}
|
|
.submit-btn {
|
display: block;
|
margin: 20px auto;
|
padding: 12px 30px;
|
background: #4CAF50;
|
color: white;
|
border: none;
|
border-radius: 6px;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.submit-btn:hover {
|
background: #45a049;
|
}
|
</style>
|
