294 lines
9.0 KiB
Vue
294 lines
9.0 KiB
Vue
<template>
|
||
<Dialog v-model="dialogVisible" :title="title" width="545" style="padding: 0">
|
||
<el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
|
||
<el-form-item label="设备类型" prop="deviceType">
|
||
<el-select
|
||
v-model="formData.deviceType"
|
||
clearable
|
||
placeholder="请选择设备类型"
|
||
@change="deviceTypeChange"
|
||
>
|
||
<el-option
|
||
v-for="dict in getDictOptions(DICT_TYPE.DEVICE_TYPE)"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="Number(dict.value)"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备编号" prop="deviceNo">
|
||
<el-input
|
||
v-model="formData.deviceNo"
|
||
:disabled="false"
|
||
placeholder="请输入设备编号(25字以内)"
|
||
maxlength="25"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="Mac地址" prop="macAddress">
|
||
<el-input
|
||
v-model="formData.macAddress"
|
||
:disabled="false"
|
||
placeholder="请输入Mac地址"
|
||
maxlength="25"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="设备IP">
|
||
<el-input v-model="formData.deviceIp" :disabled="false" placeholder="请输入设备ip" />
|
||
</el-form-item>
|
||
<el-form-item label="端口">
|
||
<el-input v-model="formData.devicePort" :disabled="false" placeholder="请输入端口" />
|
||
</el-form-item>
|
||
<el-form-item label="充电桩类型" prop="deviceAttribute" v-if="formData.deviceType == 1">
|
||
<el-select v-model="formData.deviceAttribute" clearable placeholder="请选择设备类型">
|
||
<el-option :label="'自动充电'" :value="1" />
|
||
<el-option :label="'手动充电'" :value="0" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="是否启用" prop="deviceEnable">
|
||
<el-select v-model="formData.deviceEnable" clearable placeholder="请选择是否启用">
|
||
<el-option :label="'禁用'" :value="0" />
|
||
<el-option :label="'启用'" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备图标">
|
||
<UploadImg v-model="formData.mapImageUrl" :limit="1" />
|
||
</el-form-item>
|
||
<el-form-item label="设备图配置" prop="pictureConfig">
|
||
<el-radio-group v-model="formData.pictureConfig">
|
||
<el-radio :label="1">默认图片</el-radio>
|
||
<el-radio :label="2">上传图片</el-radio>
|
||
<el-radio :label="3">不显示图片</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="设备图片" prop="mapImageUrl" v-if="formData.pictureConfig === 2">
|
||
<UploadImg v-model="formData.url" :limit="1" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<div style="padding: 0 10px 10px 0">
|
||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
import * as MapTaskAPi from '@/api/map/mapTask'
|
||
import * as DeviceApi from '@/api/device/index'
|
||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
const title = ref('新建') // form表单
|
||
const formData = ref({
|
||
deviceType: undefined, //设备类型
|
||
deviceNo: undefined, //AGV编号
|
||
macAddress: undefined, //mac地址
|
||
mapImageUrl: undefined, //设备在地图上图标
|
||
pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片）
|
||
url: undefined, //上传图片附件
|
||
deviceAttribute: undefined,
|
||
deviceEnable: undefined, //设备启用禁用 设备启用禁用（0：禁用、1：启用）
|
||
devicePort: undefined, //端口
|
||
deviceIp: undefined //设备IP
|
||
})
|
||
|
||
const formRules = reactive({
|
||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
|
||
deviceNo: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
|
||
macAddress: [{ required: true, message: 'Mac地址不能为空', trigger: 'blur' }],
|
||
mapImageUrl: [{ required: true, message: '设备图标不能为空', trigger: 'blur' }],
|
||
pictureConfig: [{ required: true, message: '设备图配置不能为空', trigger: 'blur' }],
|
||
url: [{ required: true, message: '设备图片不能为空', trigger: 'blur' }],
|
||
deviceAttribute: [{ required: true, message: '充电类型不能为空', trigger: 'blur' }],
|
||
deviceEnable: [{ required: true, message: '是否启用不能为空', trigger: 'blur' }]
|
||
})
|
||
const formRef = ref() // 表单 Ref
|
||
|
||
/** 打开弹窗 */
|
||
const open = async (type, id) => {
|
||
// console.log(getDictOptions(DICT_TYPE.DEVICE_TYPE))
|
||
dialogVisible.value = true
|
||
resetForm()
|
||
if (id) {
|
||
title.value = '编辑'
|
||
const data = await DeviceApi.deviceInformationGet({ id })
|
||
formData.value = data
|
||
if (!formData.value.mapImageUrl) {
|
||
DeviceApi.getMapDeviceImageUrl({
|
||
deviceType: formData.value.deviceType
|
||
}).then((res) => {
|
||
// console.log(res)
|
||
formData.value.mapImageUrl = res ? res : undefined
|
||
})
|
||
}
|
||
console.log(data)
|
||
} else {
|
||
title.value = '新建'
|
||
}
|
||
// getCanUseRobotList()
|
||
// getTaskNo()
|
||
}
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
|
||
/** 提交表单 */
|
||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||
const submitForm = async () => {
|
||
// 校验表单
|
||
if (!formRef) return
|
||
const valid = await formRef.value.validate()
|
||
if (!valid) return
|
||
|
||
// 提交请求
|
||
formLoading.value = true
|
||
try {
|
||
if (formData.value.id) {
|
||
await DeviceApi.deviceInformationUpdate(formData.value)
|
||
message.success(t('common.updateSuccess'))
|
||
dialogVisible.value = false
|
||
emit('success')
|
||
} else {
|
||
await DeviceApi.deviceInformationCreate(formData.value)
|
||
message.success(t('common.createSuccess'))
|
||
dialogVisible.value = false
|
||
emit('success')
|
||
}
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
// 设备类型切换
|
||
const deviceTypeChange = (e) => {
|
||
DeviceApi.getMapDeviceImageUrl({
|
||
deviceType: e
|
||
}).then((res) => {
|
||
// console.log(res)
|
||
formData.value.mapImageUrl = res ? res : undefined
|
||
})
|
||
}
|
||
//前往任务管理页面
|
||
const { push } = useRouter()
|
||
const taskManagement = () => {
|
||
push({ name: 'taskManagementCreateTask' })
|
||
}
|
||
|
||
//查询能用的车辆
|
||
const robotList = ref([])
|
||
const getCanUseRobotList = async () => {
|
||
robotList.value = await MapTaskAPi.getCanUseRobot()
|
||
}
|
||
|
||
//获取任务号
|
||
const getTaskNo = async () => {
|
||
formData.value.taskNo = await MapTaskAPi.getTaskNo()
|
||
}
|
||
|
||
//获取取货位置可选的列表
|
||
const getLocationList = async (type, locationNo) => {
|
||
return await MapTaskAPi.getLocationByName({
|
||
type, // 放货类型（1：库位、2：线库、 3：区域）
|
||
locationNo
|
||
})
|
||
}
|
||
//放货的选择列表
|
||
const loading = ref(false)
|
||
const releaseRemoteMethod = async (query, item) => {
|
||
if (query) {
|
||
loading.value = true
|
||
item.releaseList = await getLocationList(item.releaseType, query)
|
||
loading.value = false
|
||
} else {
|
||
item.releaseList = []
|
||
}
|
||
}
|
||
//取货的选择列表
|
||
const takeRemoteMethod = async (query, item) => {
|
||
if (query) {
|
||
item.takeList = await getLocationList(item.takeType, query)
|
||
} else {
|
||
item.takeList = []
|
||
}
|
||
}
|
||
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
deviceType: undefined, //车辆类型id
|
||
deviceNo: undefined, //AGV编号
|
||
macAddress: undefined, //mac地址
|
||
mapImageUrl: undefined, //设备在地图上图标
|
||
pictureConfig: undefined, // 图片设置（1：默认图片、2：上传图片、 3：不显示图片）
|
||
url: undefined, //上传图片附件
|
||
deviceAttribute: undefined
|
||
}
|
||
|
||
formRef.value?.resetFields()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep .el-dialog {
|
||
padding: 0 !important;
|
||
}
|
||
::v-deep .el-dialog__header {
|
||
border-bottom: 1px solid #e8e8e8 !important;
|
||
}
|
||
|
||
.task-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.el-select-dropdown__loading {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.circular {
|
||
display: inline;
|
||
height: 30px;
|
||
width: 30px;
|
||
animation: loading-rotate 2s linear infinite;
|
||
}
|
||
.path {
|
||
animation: loading-dash 1.5s ease-in-out infinite;
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: 0;
|
||
stroke-width: 2;
|
||
stroke: var(--el-color-primary);
|
||
stroke-linecap: round;
|
||
}
|
||
|
||
@keyframes loading-rotate {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
@keyframes loading-dash {
|
||
0% {
|
||
stroke-dasharray: 1, 200;
|
||
stroke-dashoffset: 0;
|
||
}
|
||
50% {
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: -40px;
|
||
}
|
||
100% {
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: -120px;
|
||
}
|
||
}
|
||
@keyframes custom-spin-move {
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|