<template>
|
<div class="large-glass-config">
|
<el-form-item label="笼子格子配置">
|
</el-form-item>
|
<div class="grid-ranges">
|
<div
|
v-for="(range, index) in config.gridRanges"
|
:key="index"
|
class="grid-range-item"
|
>
|
<span style="margin-right: 10px;">笼子{{ range.row }}：</span>
|
<el-input-number
|
v-model="range.start"
|
:min="1"
|
:max="1000"
|
:step="1"
|
style="width: 120px; margin: 0 10px;"
|
placeholder="起始格子"
|
/>
|
<span>~</span>
|
<el-input-number
|
v-model="range.end"
|
:min="1"
|
:max="1000"
|
:step="1"
|
style="width: 120px; margin-left: 10px;"
|
placeholder="结束格子"
|
/>
|
<el-button
|
type="danger"
|
size="small"
|
style="margin-left: 10px;"
|
@click="removeGridRange(index)"
|
>
|
删除
|
</el-button>
|
</div>
|
<el-button type="primary" size="small" @click="addGridRange">
|
添加笼子
|
</el-button>
|
</div>
|
<span class="form-tip">配置每个笼子的格子范围，例如：笼子1是1~52格，笼子2是53~101格。</span>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="每格长度(mm)">
|
<el-input-number
|
v-model="config.gridLength"
|
:min="100"
|
:max="10000"
|
:step="100"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">每格长度（毫米）</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每格宽度(mm)">
|
<el-input-number
|
v-model="config.gridWidth"
|
:min="100"
|
:max="10000"
|
:step="100"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">每格宽度（毫米）</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每格厚度(mm)">
|
<el-input-number
|
v-model="config.gridThickness"
|
:min="1"
|
:max="100"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">每格厚度（毫米）</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
// 配置数据
|
const config = ref({
|
gridRanges: [
|
{ row: 1, start: 1, end: 52 },
|
{ row: 2, start: 53, end: 101 }
|
],
|
gridLength: 2000,
|
gridWidth: 1500,
|
gridThickness: 5
|
})
|
|
// 监听props变化
|
watch(() => props.modelValue, (newVal) => {
|
if (newVal && Object.keys(newVal).length > 0) {
|
let gridRanges = newVal.gridRanges || [
|
{ row: 1, start: 1, end: 52 },
|
{ row: 2, start: 53, end: 101 }
|
]
|
// 确保每个范围都有row字段（如果没有则自动生成）
|
gridRanges = gridRanges.map((range, index) => ({
|
...range,
|
row: range.row || (index + 1)
|
}))
|
|
config.value = {
|
gridRanges: gridRanges,
|
gridLength: newVal.gridLength ?? 2000,
|
gridWidth: newVal.gridWidth ?? 1500,
|
gridThickness: newVal.gridThickness ?? 5
|
}
|
}
|
}, { immediate: true, deep: true })
|
|
// 监听config变化，同步到父组件
|
watch(config, (newVal) => {
|
emit('update:modelValue', { ...newVal })
|
}, { deep: true })
|
|
// 格子范围相关方法
|
const addGridRange = () => {
|
const maxRow = config.value.gridRanges.length > 0
|
? Math.max(...config.value.gridRanges.map(r => r.row || 0))
|
: 0
|
const lastEnd = config.value.gridRanges.length > 0
|
? Math.max(...config.value.gridRanges.map(r => r.end || 0))
|
: 0
|
config.value.gridRanges.push({
|
row: maxRow + 1, // 自动生成笼子编号
|
start: lastEnd + 1,
|
end: lastEnd + 50
|
})
|
}
|
|
const removeGridRange = (index) => {
|
config.value.gridRanges.splice(index, 1)
|
}
|
</script>
|
|
<style scoped>
|
.form-tip {
|
margin-left: 10px;
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.grid-ranges {
|
width: 100%;
|
}
|
|
.grid-range-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12px;
|
padding: 12px;
|
border: 1px solid #ebeef5;
|
border-radius: 6px;
|
background-color: #fafafa;
|
}
|
</style>
|
