289 lines
10 KiB
Vue
289 lines
10 KiB
Vue
<template>
|
||
<Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
|
||
<el-form :model="form" label-width="auto" ref="ruleFormRef">
|
||
<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 === 2 || form.type === 3 || form.type === 4">
|
||
<el-form-item
|
||
label="层数"
|
||
prop="layersNumber"
|
||
:rules="{ required: true, message: '请输入层数', trigger: 'change' }"
|
||
required
|
||
v-if="form.type === 2"
|
||
>
|
||
<el-input-number
|
||
v-model="form.layersNumber"
|
||
:min="1"
|
||
:max="3"
|
||
@change="layersNumberChange"
|
||
/>
|
||
</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="locationDeep">
|
||
<div style="display: flex">
|
||
<el-input v-model="form.locationDeep" placeholder="请输入" />
|
||
<span class="ml-2">cm</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="库位宽度" prop="locationWide">
|
||
<div style="display: flex">
|
||
<el-input v-model="form.locationWide" placeholder="请输入" />
|
||
<span class="ml-2">cm</span>
|
||
</div>
|
||
</el-form-item>
|
||
<div v-if="form.type === 2 || form.type === 4">
|
||
<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>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="submit(ruleFormRef)"> 确认 </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 ruleFormRef = ref()
|
||
const dialogFormVisible = ref(false)
|
||
const message = useMessage() // 消息弹窗
|
||
|
||
const props = defineProps({
|
||
positionMapId: {
|
||
type: String,
|
||
default: () => ''
|
||
}
|
||
})
|
||
|
||
const form = ref({
|
||
type: 1, //类型 1.路径点位 2.库位点 3.充电桩 4.停车点 5.区域变更点 6.等待点
|
||
layersNumber: 1, //层数
|
||
locationX: undefined, //库位坐标x轴
|
||
locationY: undefined, //库位坐标y轴
|
||
locationDeep: undefined, //长度
|
||
locationWide: undefined, //宽度
|
||
direction: undefined, //库位方向（1：单向、2：双向、3：三向、4：四向）
|
||
inDirection: undefined, //进入方向（0：尾入、1：头入）
|
||
outDirection: undefined, //离开方向（0：尾出、1：头出）
|
||
dataList: [], //存库位的
|
||
dataObj: {}, //存 设备点 停车点 文字
|
||
positionMapId: undefined
|
||
})
|
||
|
||
const rules = reactive({
|
||
locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
|
||
locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
|
||
type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
||
layersNumber: [{ required: true, message: '请输入层数', trigger: 'blur' }],
|
||
id: [{ required: true, message: '请选择设备编号', trigger: 'blur' }]
|
||
})
|
||
|
||
const emit = defineEmits(['submitNodeSuccess'])
|
||
const submit = async (formEl) => {
|
||
if (!formEl) return
|
||
await formEl.validate((valid, fields) => {
|
||
if (!valid) return
|
||
//在这边把数据处理好
|
||
if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
|
||
//不需要dataJson的类型
|
||
form.value.dataJson = ''
|
||
} else if (form.value.type === 2) {
|
||
//库位点 类型为数组
|
||
|
||
let list = []
|
||
for (let index = 0; index < form.value.layersNumber; index++) {
|
||
let item = {
|
||
positionMapId: props.positionMapId,
|
||
locationWide: form.value.locationWide || undefined,
|
||
locationDeep: form.value.locationDeep || undefined,
|
||
direction: form.value.direction || undefined, //方向
|
||
inDirection: form.value.inDirection || undefined, //进入方向
|
||
outDirection: form.value.outDirection || undefined, //离开方向
|
||
locationStorey: index + 1 //层数
|
||
}
|
||
if (
|
||
form.value.dataList.length > 0 &&
|
||
form.value.dataList[index] &&
|
||
form.value.dataList[index].id
|
||
) {
|
||
item.id = form.value.dataList[index].id
|
||
item.locationNo = form.value.dataList[index].locationNo
|
||
item.mapItemId = form.value.dataList[index].mapItemId
|
||
item.laneId = form.value.dataList[index].laneId
|
||
}
|
||
list.push(item)
|
||
}
|
||
form.value.dataList = list
|
||
//dataJson数据
|
||
form.value.dataJson = JSON.stringify(form.value.dataList)
|
||
} else if (form.value.type === 3) {
|
||
//设备
|
||
form.value.dataObj.positionMapId = props.positionMapId
|
||
form.value.dataObj.locationWide = form.value.locationWide
|
||
form.value.dataObj.locationDeep = form.value.locationDeep
|
||
form.value.dataObj.direction = form.value.direction
|
||
form.value.dataObj.inDirection = form.value.inDirection
|
||
form.value.dataObj.outDirection = form.value.outDirection
|
||
form.value.dataObj.deviceType = deviceInfo.value.deviceType //设备类型
|
||
} else {
|
||
//类型为路径点位 区域变更点 等待点 值为对象
|
||
form.value.dataObj.positionMapId = props.positionMapId
|
||
form.value.dataObj.locationWide = form.value.locationWide
|
||
form.value.dataObj.locationDeep = form.value.locationDeep
|
||
form.value.dataObj.direction = form.value.direction
|
||
form.value.dataObj.inDirection = form.value.inDirection
|
||
form.value.dataObj.outDirection = form.value.outDirection
|
||
//dataJson数据
|
||
form.value.dataJson = JSON.stringify(form.value.dataObj)
|
||
}
|
||
emit('submitNodeSuccess', form.value)
|
||
dialogFormVisible.value = false
|
||
})
|
||
}
|
||
|
||
//层数改变
|
||
const layersNumberChange = (e) => {}
|
||
|
||
const open = (item) => {
|
||
console.log(item)
|
||
form.value = item
|
||
form.value.layersNumber = item.dataList.length || ''
|
||
form.value.positionMapId = props.positionMapId
|
||
dialogFormVisible.value = true
|
||
}
|
||
|
||
//类型改变
|
||
const typeChange = () => {
|
||
if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
|
||
form.value.layersNumber = undefined
|
||
form.value.dataJson = ''
|
||
}
|
||
|
||
if (form.value.type !== 2 && form.value.type !== 4) {
|
||
form.value.direction = undefined
|
||
form.value.inDirection = undefined
|
||
form.value.outDirection = undefined
|
||
}
|
||
}
|
||
//方向改变
|
||
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>
|