feat(flow): 优化设备执行流程配置功能
- 将设备ID参数从输入框改为选择框,并设置为必填项 - 添加设备绑定工具栏显示执行设备选择信息 - 集成机器人设备选择对话框功能 - 实现机器人列表加载和设备选项动态获取 - 添加设备选择表单验证和确认逻辑 - 支持自动选择唯一在线设备并锁定 - 优化键盘事件处理,区分编辑状态和流程操作 - 添加相关的API接口调用和工具函数 - 增加相应的样式定义和用户提示信息
This commit is contained in:
parent
61e07866bd
commit
65d219062e
@ -16,6 +16,15 @@
|
|||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<div class="form__container">
|
<div class="form__container">
|
||||||
|
<div class="device-binding-toolbar">
|
||||||
|
<div>
|
||||||
|
<div class="device-binding-toolbar__title">执行设备</div>
|
||||||
|
<div class="device-binding-toolbar__desc">从机器人当前上报的全部在线设备中选择</div>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" plain size="small" @click="openDeviceDialog">
|
||||||
|
选择机器人设备
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
@ -79,6 +88,8 @@
|
|||||||
v-model="property.input"
|
v-model="property.input"
|
||||||
class="param-value"
|
class="param-value"
|
||||||
v-else-if="property.componentType === 'select'"
|
v-else-if="property.componentType === 'select'"
|
||||||
|
:disabled="property.deviceLocked"
|
||||||
|
no-data-text="请先选择机器人设备"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in property.selectOptions"
|
v-for="item in property.selectOptions"
|
||||||
@ -187,6 +198,41 @@
|
|||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
|
|
||||||
|
<el-dialog v-model="deviceDialogVisible" title="选择通用指令执行设备" width="520" append-to-body>
|
||||||
|
<div class="device-dialog-tip">通用指令不限制设备类型,设备列表来自机器人最近一次 QUIC 在线上报。</div>
|
||||||
|
<el-form ref="deviceFormRef" :model="deviceForm" :rules="deviceFormRules" label-width="86px">
|
||||||
|
<el-form-item label="机器人" prop="robotId">
|
||||||
|
<el-select
|
||||||
|
v-model="deviceForm.robotId"
|
||||||
|
filterable
|
||||||
|
:loading="robotLoading"
|
||||||
|
placeholder="请选择在线机器人"
|
||||||
|
style="width: 100%"
|
||||||
|
@change="loadRobotDevices"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in robotOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="执行设备" prop="deviceId">
|
||||||
|
<el-select
|
||||||
|
v-model="deviceForm.deviceId"
|
||||||
|
filterable
|
||||||
|
:loading="deviceLoading"
|
||||||
|
:disabled="!deviceForm.robotId || deviceOptions.length === 1"
|
||||||
|
placeholder="请选择该机器人上的设备"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
<div v-if="deviceOptions.length === 1" class="device-auto-hint">仅有一个在线设备,已自动选择并锁定</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="deviceDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirmDevice">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -196,6 +242,9 @@ import FormItemRecursive from '../FormItemRecursive.vue'
|
|||||||
import * as monaco from 'monaco-editor';
|
import * as monaco from 'monaco-editor';
|
||||||
import { getInput } from '@/utils/flow'
|
import { getInput } from '@/utils/flow'
|
||||||
import { useQuote } from './useQuote.js'
|
import { useQuote } from './useQuote.js'
|
||||||
|
import { getRobotList, getRobotDevicesByRobotId } from '@/api/inspection/robot'
|
||||||
|
import { toDeviceOptions } from '@/utils/robotDevice'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: Object
|
data: Object
|
||||||
@ -280,6 +329,70 @@ const dynamicFormRef = ref()
|
|||||||
const outputFormRef = ref()
|
const outputFormRef = ref()
|
||||||
const activeNames = ref(['1', '2'])
|
const activeNames = ref(['1', '2'])
|
||||||
|
|
||||||
|
const deviceDialogVisible = ref(false)
|
||||||
|
const deviceFormRef = ref()
|
||||||
|
const robotLoading = ref(false)
|
||||||
|
const deviceLoading = ref(false)
|
||||||
|
const robotOptions = ref([])
|
||||||
|
const deviceOptions = ref([])
|
||||||
|
const deviceForm = reactive({ robotId: '', deviceId: '' })
|
||||||
|
const deviceFormRules = {
|
||||||
|
robotId: [{ required: true, message: '请选择机器人', trigger: 'change' }],
|
||||||
|
deviceId: [{ required: true, message: '请选择执行设备', trigger: 'change' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadRobotOptions = async () => {
|
||||||
|
robotLoading.value = true
|
||||||
|
try {
|
||||||
|
const response = await getRobotList({ pageNum: 1, pageSize: 1000, connectStatus: '1' })
|
||||||
|
robotOptions.value = (response.rows || []).map(robot => ({
|
||||||
|
value: robot.robotId,
|
||||||
|
label: `${robot.robotName || robot.robotId} (${robot.robotId})`
|
||||||
|
}))
|
||||||
|
} finally {
|
||||||
|
robotLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadRobotDevices = async (robotId) => {
|
||||||
|
deviceForm.deviceId = ''
|
||||||
|
deviceOptions.value = []
|
||||||
|
if (!robotId) return
|
||||||
|
deviceLoading.value = true
|
||||||
|
try {
|
||||||
|
const response = await getRobotDevicesByRobotId(robotId)
|
||||||
|
const devices = Array.isArray(response.data) ? response.data : []
|
||||||
|
deviceOptions.value = toDeviceOptions(devices)
|
||||||
|
if (devices.length) deviceForm.deviceId = devices[0].deviceId
|
||||||
|
if (!devices.length) ElMessage.warning('当前机器人没有在线设备')
|
||||||
|
} finally {
|
||||||
|
deviceLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openDeviceDialog = async () => {
|
||||||
|
deviceDialogVisible.value = true
|
||||||
|
deviceForm.robotId = ''
|
||||||
|
deviceForm.deviceId = ''
|
||||||
|
deviceOptions.value = []
|
||||||
|
await loadRobotOptions()
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmDevice = async () => {
|
||||||
|
const valid = await deviceFormRef.value?.validate().catch(() => false)
|
||||||
|
if (!valid) return
|
||||||
|
const deviceParam = formData.nodeParams.find(item => item.name === 'deviceId')
|
||||||
|
if (!deviceParam) return
|
||||||
|
deviceParam.type = 'input'
|
||||||
|
deviceParam.input = deviceForm.deviceId
|
||||||
|
deviceParam.componentType = 'select'
|
||||||
|
deviceParam.selectOptions = [...deviceOptions.value]
|
||||||
|
deviceParam.required = true
|
||||||
|
deviceParam.deviceLocked = deviceOptions.value.length === 1
|
||||||
|
deviceDialogVisible.value = false
|
||||||
|
ElMessage.success('执行设备已选择')
|
||||||
|
}
|
||||||
|
|
||||||
// 使用共享的 quote 逻辑
|
// 使用共享的 quote 逻辑
|
||||||
const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
|
const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
|
||||||
|
|
||||||
@ -452,6 +565,45 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.device-binding-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid #d9e5f4;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f6f9fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-binding-toolbar__title {
|
||||||
|
color: #26364a;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-binding-toolbar__desc,
|
||||||
|
.device-dialog-tip,
|
||||||
|
.device-auto-hint {
|
||||||
|
color: #6b7a90;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-dialog-tip {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-auto-hint {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: var(--el-color-success);
|
||||||
|
}
|
||||||
|
|
||||||
.code__container {
|
.code__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -460,4 +612,4 @@ onBeforeUnmount(() => {
|
|||||||
height: 300px;
|
height: 300px;
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -326,7 +326,7 @@ function handler(params) {
|
|||||||
action: 'DEVICE_EXECUTE_JSON_COMMAND',
|
action: 'DEVICE_EXECUTE_JSON_COMMAND',
|
||||||
nodeType: 'EDGE',
|
nodeType: 'EDGE',
|
||||||
nodeParams: [
|
nodeParams: [
|
||||||
{ name: "deviceId", type: "input", input: "", required: false, disabled: true },
|
{ name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: [], required: true, disabled: true },
|
||||||
{ name: "requestJson", type: "input", input: `{
|
{ name: "requestJson", type: "input", input: `{
|
||||||
"a":123
|
"a":123
|
||||||
}`, required: false, disabled: true },
|
}`, required: false, disabled: true },
|
||||||
|
|||||||
@ -1061,10 +1061,29 @@ const NON_COPYABLE_NODE_TYPES = new Set(["start", "end", "selectArea"]);
|
|||||||
let copiedNodes = [];
|
let copiedNodes = [];
|
||||||
let pasteCount = 0;
|
let pasteCount = 0;
|
||||||
|
|
||||||
|
const EDITABLE_SELECTOR = [
|
||||||
|
"input",
|
||||||
|
"textarea",
|
||||||
|
"select",
|
||||||
|
"[contenteditable]:not([contenteditable='false'])",
|
||||||
|
".monaco-editor",
|
||||||
|
".el-input",
|
||||||
|
".el-textarea",
|
||||||
|
".el-select",
|
||||||
|
".el-cascader",
|
||||||
|
".el-input-number",
|
||||||
|
"[role='dialog']",
|
||||||
|
].join(",");
|
||||||
|
|
||||||
|
const isEditableElement = (element) => (
|
||||||
|
element instanceof Element && Boolean(element.closest(EDITABLE_SELECTOR))
|
||||||
|
);
|
||||||
|
|
||||||
const isTextEditing = (event) => {
|
const isTextEditing = (event) => {
|
||||||
const element = event.target || document.activeElement;
|
const eventPath = typeof event.composedPath === "function" ? event.composedPath() : [];
|
||||||
return ["INPUT", "TEXTAREA", "SELECT"].includes(element?.tagName)
|
if (eventPath.some(isEditableElement)) return true;
|
||||||
|| element?.isContentEditable;
|
if (isEditableElement(event.target) || isEditableElement(document.activeElement)) return true;
|
||||||
|
return Boolean(window.getSelection()?.toString());
|
||||||
};
|
};
|
||||||
|
|
||||||
const copySelectedNodes = (event) => {
|
const copySelectedNodes = (event) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user