feat: 更新批量编辑模态框，添加编辑模式切换功能，支持属性编辑和机器人绑定，优化相关逻辑和界面
This commit is contained in:
parent
d3b2bba880
commit
1f87271ebc
@ -3,11 +3,18 @@
|
||||
v-model:open="modalVisible"
|
||||
title="批量编辑"
|
||||
width="500px"
|
||||
:ok-button-props="{ disabled: !hasChanges }"
|
||||
:ok-button-props="{ disabled: !hasChanges && editMode === 'property' }"
|
||||
@ok="handleConfirm"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="batch-edit-content">
|
||||
<a-radio-group v-model:value="editMode" button-style="solid" style="margin-bottom: 16px">
|
||||
<a-radio-button value="property">属性编辑</a-radio-button>
|
||||
<a-radio-button value="binding">机器人绑定</a-radio-button>
|
||||
</a-radio-group>
|
||||
|
||||
<!-- 属性编辑 -->
|
||||
<div v-if="editMode === 'property'">
|
||||
<!-- 选中元素统计 -->
|
||||
<div class="selection-info">
|
||||
<a-alert
|
||||
@ -23,17 +30,8 @@
|
||||
<h4>点位编辑 ({{ pointItems.length }} 个)</h4>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="点位类型">
|
||||
<a-select
|
||||
v-model:value="pointType"
|
||||
placeholder="选择点位类型"
|
||||
allow-clear
|
||||
@change="markChanged"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="[key, value] in MAP_POINT_TYPES"
|
||||
:key="value"
|
||||
:value="value"
|
||||
>
|
||||
<a-select v-model:value="pointType" placeholder="选择点位类型" allow-clear @change="markChanged">
|
||||
<a-select-option v-for="[key, value] in MAP_POINT_TYPES" :key="value" :value="value">
|
||||
{{ key }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
@ -46,17 +44,8 @@
|
||||
<h4>路线编辑 ({{ lineItems.length }} 个)</h4>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="通行类型">
|
||||
<a-select
|
||||
v-model:value="routePassType"
|
||||
placeholder="选择通行类型"
|
||||
allow-clear
|
||||
@change="markChanged"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="[key, value] in MAP_ROUTE_PASS_TYPES"
|
||||
:key="value"
|
||||
:value="value"
|
||||
>
|
||||
<a-select v-model:value="routePassType" placeholder="选择通行类型" allow-clear @change="markChanged">
|
||||
<a-select-option v-for="[key, value] in MAP_ROUTE_PASS_TYPES" :key="value" :value="value">
|
||||
{{ key }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
@ -68,11 +57,7 @@
|
||||
<div v-if="hasChanges" class="preview-section">
|
||||
<h4>预览更改</h4>
|
||||
<div class="preview-list">
|
||||
<div
|
||||
v-for="item in selectedItems"
|
||||
:key="item.id"
|
||||
class="preview-item"
|
||||
>
|
||||
<div v-for="item in selectedItems" :key="item.id" class="preview-item">
|
||||
<span class="item-name">{{ getItemName(item) }}</span>
|
||||
<span class="item-type">{{ getItemType(item) }}</span>
|
||||
<div class="changes">
|
||||
@ -87,20 +72,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 机器人绑定 -->
|
||||
<div v-if="editMode === 'binding'">
|
||||
<div class="selection-info">
|
||||
<a-alert :message="`已选择 ${pointItems.length} 个点位`" type="info" show-icon />
|
||||
</div>
|
||||
<div v-if="chargingPoints.length > 0" class="edit-section">
|
||||
<h4>充电点 ({{ chargingPoints.length }} 个)</h4>
|
||||
<a-button type="primary" @click="handleBatchBind(chargingPoints)">批量绑定机器人</a-button>
|
||||
</div>
|
||||
<div v-if="parkingPoints.length > 0" class="edit-section">
|
||||
<h4>停靠点 ({{ parkingPoints.length }} 个)</h4>
|
||||
<a-button type="primary" @click="handleBatchBind(parkingPoints)">批量绑定机器人</a-button>
|
||||
</div>
|
||||
<div
|
||||
v-if="chargingPoints.length === 0 && parkingPoints.length === 0 && pointItems.length > 0"
|
||||
class="edit-section"
|
||||
>
|
||||
<h4>无符合条件的点位</h4>
|
||||
<p>仅充电点和停靠点支持批量绑定机器人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<robot-bind-modal :token="editorToken" ref="robotBindModalRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { computed, type InjectionKey, nextTick, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';
|
||||
|
||||
import type { MapPen } from '../../apis/map';
|
||||
import {
|
||||
MAP_POINT_TYPES,
|
||||
MAP_ROUTE_PASS_TYPES,
|
||||
MapPointType,
|
||||
MapRoutePassType
|
||||
} from '../../apis/map';
|
||||
import { MAP_POINT_TYPES, MAP_ROUTE_PASS_TYPES, MapPointType, MapRoutePassType } from '../../apis/map';
|
||||
import type { EditorService } from '../../services/editor.service';
|
||||
import type { RobotBindModalRef } from './robot-bind-modal.vue';
|
||||
import RobotBindModal from './robot-bind-modal.vue';
|
||||
|
||||
// 点位类型对应的尺寸和图像配置
|
||||
const getPointTypeConfig = (type: MapPointType, editor: EditorService) => {
|
||||
@ -133,17 +139,29 @@ const emit = defineEmits<Emits>();
|
||||
|
||||
const modalVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value) => emit('update:visible', value)
|
||||
set: (value) => emit('update:visible', value),
|
||||
});
|
||||
|
||||
// 分离点位和路线
|
||||
const pointItems = computed(() =>
|
||||
props.selectedItems.filter(item => item.name === 'point')
|
||||
);
|
||||
const pointItems = computed(() => props.selectedItems.filter((item) => item.name === 'point'));
|
||||
|
||||
const lineItems = computed(() =>
|
||||
props.selectedItems.filter(item => item.name === 'line')
|
||||
);
|
||||
const lineItems = computed(() => props.selectedItems.filter((item) => item.name === 'line'));
|
||||
|
||||
// 编辑模式
|
||||
const editMode = ref<'property' | 'binding'>('property');
|
||||
|
||||
// 机器人绑定相关
|
||||
const robotBindModalRef = ref<RobotBindModalRef>();
|
||||
const editorToken: InjectionKey<ShallowRef<EditorService>> = Symbol('editor');
|
||||
provide(editorToken, shallowRef(props.editor));
|
||||
|
||||
const chargingPoints = computed(() => pointItems.value.filter((item) => item.point?.type === MapPointType.充电点));
|
||||
|
||||
const parkingPoints = computed(() => pointItems.value.filter((item) => item.point?.type === MapPointType.停靠点));
|
||||
|
||||
const handleBatchBind = (pens: MapPen[]) => {
|
||||
robotBindModalRef.value?.open(pens);
|
||||
};
|
||||
|
||||
// 编辑状态
|
||||
const pointType = ref<MapPointType>();
|
||||
@ -161,14 +179,18 @@ const resetForm = () => {
|
||||
pointType.value = undefined;
|
||||
routePassType.value = undefined;
|
||||
hasChanges.value = false;
|
||||
editMode.value = 'property';
|
||||
};
|
||||
|
||||
// 监听模态框显示状态
|
||||
watch(() => props.visible, (visible) => {
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// 选中元素描述
|
||||
const selectionDescription = computed(() => {
|
||||
@ -192,7 +214,7 @@ const getItemName = (item: MapPen) => {
|
||||
const getItemType = (item: MapPen) => {
|
||||
if (item.name === 'point') {
|
||||
const pointTypeName = Object.keys(MapPointType).find(
|
||||
key => MapPointType[key as keyof typeof MapPointType] === item.point?.type
|
||||
(key) => MapPointType[key as keyof typeof MapPointType] === item.point?.type,
|
||||
);
|
||||
return `点位-${pointTypeName || '未知'}`;
|
||||
} else if (item.name === 'line') {
|
||||
@ -209,10 +231,10 @@ const getPointChanges = (item: MapPen) => {
|
||||
if (currentType === pointType.value) return [];
|
||||
|
||||
const currentTypeName = Object.keys(MapPointType).find(
|
||||
key => MapPointType[key as keyof typeof MapPointType] === currentType
|
||||
(key) => MapPointType[key as keyof typeof MapPointType] === currentType,
|
||||
);
|
||||
const newTypeName = Object.keys(MapPointType).find(
|
||||
key => MapPointType[key as keyof typeof MapPointType] === pointType.value
|
||||
(key) => MapPointType[key as keyof typeof MapPointType] === pointType.value,
|
||||
);
|
||||
|
||||
return [`类型: ${currentTypeName || '未知'} → ${newTypeName}`];
|
||||
@ -226,10 +248,10 @@ const getRouteChanges = (item: MapPen) => {
|
||||
|
||||
if (routePassType.value !== undefined && item.route?.pass !== routePassType.value) {
|
||||
const currentPassName = Object.keys(MapRoutePassType).find(
|
||||
key => MapRoutePassType[key as keyof typeof MapRoutePassType] === item.route?.pass
|
||||
(key) => MapRoutePassType[key as keyof typeof MapRoutePassType] === item.route?.pass,
|
||||
);
|
||||
const newPassName = Object.keys(MapRoutePassType).find(
|
||||
key => MapRoutePassType[key as keyof typeof MapRoutePassType] === routePassType.value
|
||||
(key) => MapRoutePassType[key as keyof typeof MapRoutePassType] === routePassType.value,
|
||||
);
|
||||
changes.push(`通行: ${currentPassName || '未知'} → ${newPassName}`);
|
||||
}
|
||||
@ -239,10 +261,14 @@ const getRouteChanges = (item: MapPen) => {
|
||||
|
||||
// 确认更改
|
||||
const handleConfirm = () => {
|
||||
if (editMode.value !== 'property') {
|
||||
modalVisible.value = false;
|
||||
return;
|
||||
}
|
||||
const updates: Array<{ id: string; updates: Partial<MapPen> }> = [];
|
||||
|
||||
// 处理点位更新
|
||||
pointItems.value.forEach(item => {
|
||||
pointItems.value.forEach((item) => {
|
||||
if (pointType.value) {
|
||||
const pointConfig = getPointTypeConfig(pointType.value, props.editor);
|
||||
const rect = props.editor.getPointRect(item);
|
||||
@ -253,32 +279,31 @@ const handleConfirm = () => {
|
||||
// 更新点位类型
|
||||
point: {
|
||||
...item.point,
|
||||
type: pointType.value
|
||||
type: pointType.value,
|
||||
},
|
||||
// 更新点位尺寸和图像
|
||||
...pointConfig,
|
||||
// 调整位置以保持中心点不变
|
||||
x: rect ? rect.x - pointConfig.width / 2 : item.x,
|
||||
y: rect ? rect.y - pointConfig.height / 2 : item.y,
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 处理路线更新
|
||||
lineItems.value.forEach(item => {
|
||||
lineItems.value.forEach((item) => {
|
||||
if (item.route && routePassType.value !== undefined) {
|
||||
const routeUpdates: Partial<MapPen> = {
|
||||
route: {
|
||||
...item.route,
|
||||
pass: routePassType.value
|
||||
}
|
||||
pass: routePassType.value,
|
||||
},
|
||||
};
|
||||
|
||||
updates.push({
|
||||
id: item.id!,
|
||||
updates: routeUpdates
|
||||
updates: routeUpdates,
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -304,7 +329,7 @@ const handleCancel = () => {
|
||||
};
|
||||
|
||||
defineOptions({
|
||||
name: 'BatchEditModal'
|
||||
name: 'BatchEditModal',
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -12,13 +12,23 @@ const editor = inject(props.token)!;
|
||||
|
||||
export type RobotBindModalRef = Ref;
|
||||
type Ref = {
|
||||
open: (pen: MapPen) => void;
|
||||
open: (pen: MapPen | MapPen[]) => void;
|
||||
};
|
||||
const targetPens = ref<MapPen[]>([]);
|
||||
const open: Ref['open'] = (pen) => {
|
||||
if (!pen?.id) return;
|
||||
if (!pen) return;
|
||||
const pens = Array.isArray(pen) ? pen : [pen];
|
||||
if (pens.length === 0) return;
|
||||
|
||||
keyword.value = '';
|
||||
id.value = pen.id;
|
||||
selected.value = pen.point?.robots ?? [];
|
||||
targetPens.value = pens;
|
||||
|
||||
if (pens.length === 1) {
|
||||
selected.value = pens[0].point?.robots ?? [];
|
||||
} else {
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
show.value = true;
|
||||
};
|
||||
defineExpose<Ref>({ open });
|
||||
@ -28,11 +38,15 @@ const keyword = ref<string>('');
|
||||
|
||||
const robots = computed<RobotInfo[]>(() => editor.value.robots.filter(({ label }) => label.includes(keyword.value)));
|
||||
|
||||
const id = ref<string>('');
|
||||
const selected = ref<string[]>([]);
|
||||
|
||||
const submit = () => {
|
||||
editor.value.updatePoint(id.value, { robots: toRaw(selected.value) });
|
||||
const robotIds = toRaw(selected.value);
|
||||
targetPens.value.forEach((pen) => {
|
||||
if (pen.id) {
|
||||
editor.value.updatePoint(pen.id, { robots: robotIds });
|
||||
}
|
||||
});
|
||||
show.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user