234 lines
7.5 KiB
Vue
234 lines
7.5 KiB
Vue
<template>
|
|
<Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
|
|
<el-form :model="form" label-width="auto">
|
|
<el-form-item label="X" prop="locationX" required>
|
|
<el-input v-model="form.locationX" placeholder="请输入" />
|
|
</el-form-item>
|
|
<el-form-item label="Y" prop="locationY" required>
|
|
<el-input v-model="form.locationY" placeholder="请输入" />
|
|
</el-form-item>
|
|
<el-form-item label="类型" prop="type" required>
|
|
<el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
|
|
<el-option label="路径点位" :value="1" />
|
|
<el-option label="库位点" :value="2" />
|
|
<el-option label="设备点" :value="3" />
|
|
<el-option label="停车点" :value="4" />
|
|
<el-option label="区域变更点" :value="5" />
|
|
<el-option label="等待点" :value="6" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<div v-if="form.type !== 1 && form.type !== 6">
|
|
<el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
|
|
<el-input-number v-model="form.layersNumber" :min="1" :max="3" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="编号"
|
|
prop="id"
|
|
required
|
|
v-if="form.type === 3"
|
|
:rules="{ required: true, message: '请选择设备编号', trigger: 'change' }"
|
|
>
|
|
<div>
|
|
<el-select
|
|
v-model="deviceInfo.deviceType"
|
|
class="!w-160px"
|
|
clearable
|
|
placeholder="请选择设备类型"
|
|
@change="deviceTypeChange()"
|
|
>
|
|
<el-option
|
|
v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_TYPE)"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-select>
|
|
|
|
<el-select
|
|
v-model="form.id"
|
|
class="!w-160px ml-4"
|
|
clearable
|
|
placeholder="请选择设备编号"
|
|
>
|
|
<el-option
|
|
v-for="item in deviceList"
|
|
:key="item.id"
|
|
:label="item.deviceNo"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="库位长度" prop="length">
|
|
<div style="display: flex">
|
|
<el-input v-model="form.length" placeholder="请输入" />
|
|
<span class="ml-2">cm</span>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="库位宽度" prop="width">
|
|
<div style="display: flex">
|
|
<el-input v-model="form.width" placeholder="请输入" />
|
|
<span class="ml-2">cm</span>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="库位方向" prop="direction">
|
|
<el-select
|
|
v-model="form.direction"
|
|
placeholder="请选择库位方向"
|
|
@change="directionChange"
|
|
>
|
|
<el-option label="单向" :value="1" />
|
|
<el-option label="双向" :value="2" />
|
|
<el-option label="三向" :value="3" />
|
|
<el-option label="四向" :value="4" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<div v-if="form.direction !== 1">
|
|
<el-form-item label="进入方向" prop="inDirection">
|
|
<el-select v-model="form.inDirection" placeholder="请选择进入方向">
|
|
<el-option label="尾入" :value="0" />
|
|
<el-option label="头入" :value="1" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="离开方向" prop="outDirection">
|
|
<el-select v-model="form.outDirection" placeholder="请选择离开方向">
|
|
<el-option label="尾出" :value="0" />
|
|
<el-option label="头出" :value="1" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submit"> 确认 </el-button>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
import * as MapApi from '@/api/map/map'
|
|
|
|
const dialogFormVisible = ref(false)
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
const props = defineProps({
|
|
positionMapId: {
|
|
type: String,
|
|
default: () => ''
|
|
}
|
|
})
|
|
|
|
const form = ref({
|
|
locationX: undefined,
|
|
locationY: undefined,
|
|
type: 1,
|
|
layersNumber: 1, //层数
|
|
length: undefined, //长度
|
|
width: undefined, //宽度
|
|
direction: 1, //方向
|
|
inDirection: undefined,
|
|
outDirection: undefined,
|
|
list: []
|
|
})
|
|
|
|
const rules = reactive({
|
|
locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
|
|
locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
|
direction: [{ required: true, message: '请输入层数', trigger: 'blur' }],
|
|
id: [{ required: true, message: '请选择设备编号', trigger: 'blur' }]
|
|
})
|
|
|
|
const emit = defineEmits(['submitNodeSuccess'])
|
|
const submit = () => {
|
|
if (form.value.type === 1 || form.value.type === 6) {
|
|
form.value.dataJson = ''
|
|
} else if (form.value.type === 2) {
|
|
//在这边把数据处理好
|
|
let list = []
|
|
for (let index = 0; index < form.value.layersNumber; index++) {
|
|
list.push({
|
|
locationWide: form.value.width || undefined,
|
|
locationDeep: form.value.length || undefined,
|
|
direction: form.value.direction || undefined, //方向
|
|
inDirection: form.value.inDirection || undefined, //进入方向
|
|
outDirection: form.value.outDirection || undefined, //离开方向
|
|
locationStorey: index + 1 //层数
|
|
})
|
|
}
|
|
form.value.dataJson = JSON.stringify(list)
|
|
} else {
|
|
let obj = {
|
|
id: form.value.id || undefined,
|
|
mapId: props.positionMapId,
|
|
locationWide: form.value.width || undefined,
|
|
locationDeep: form.value.length || undefined,
|
|
direction: form.value.direction || undefined, //方向
|
|
inDirection: form.value.inDirection || undefined, //进入方向
|
|
outDirection: form.value.outDirection || undefined //离开方向
|
|
}
|
|
form.value.dataJson = JSON.stringify(obj)
|
|
}
|
|
console.log(form.value, '保存')
|
|
emit('submitNodeSuccess', form.value)
|
|
dialogFormVisible.value = false
|
|
}
|
|
|
|
const open = (item) => {
|
|
form.value = item
|
|
form.value.locationX = item.x
|
|
form.value.locationY = item.y
|
|
form.value.type = item.type || 1
|
|
dialogFormVisible.value = true
|
|
}
|
|
|
|
//类型改变
|
|
const typeChange = () => {
|
|
if (form.value.type === 1 || form.value.type === 6) {
|
|
form.value.layersNumber = undefined
|
|
form.value.dataJson = ''
|
|
} else {
|
|
}
|
|
}
|
|
//方向改变
|
|
const directionChange = (e) => {
|
|
if (e === 1) {
|
|
form.value.inDirection = undefined
|
|
form.value.outDirection = undefined
|
|
}
|
|
}
|
|
|
|
//获取设备信息
|
|
const deviceInfo = ref({
|
|
positionMapId: '',
|
|
deviceType: ''
|
|
})
|
|
const deviceList = ref([])
|
|
const getDeviceList = async () => {
|
|
deviceInfo.value.positionMapId = props.positionMapId
|
|
deviceList.value = await MapApi.getDeviceInformationList(deviceInfo.value)
|
|
}
|
|
const deviceTypeChange = () => {
|
|
getDeviceList()
|
|
}
|
|
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.node-form-dialog {
|
|
.el-dialog__header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
</style>
|