125 lines
2.5 KiB
Vue
125 lines
2.5 KiB
Vue
<template>
|
||
<a-modal
|
||
v-model:visible="visible"
|
||
title="设备属性设置"
|
||
:width="500"
|
||
:footer="null"
|
||
@cancel="handleClose"
|
||
>
|
||
<a-form layout="vertical">
|
||
<a-form-item label="设备ID">
|
||
<a-input :value="device.id" disabled />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="设备名称">
|
||
<a-input :value="device.name" @change="handleUpdate('name', $event.target.value)" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="设备类型">
|
||
<a-input :value="device.type" disabled />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="X坐标">
|
||
<a-input-number
|
||
:value="device.x"
|
||
:min="0"
|
||
style="width: 100%"
|
||
@change="handleUpdate('x', $event)"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="Y坐标">
|
||
<a-input-number
|
||
:value="device.y"
|
||
:min="0"
|
||
style="width: 100%"
|
||
@change="handleUpdate('y', $event)"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="旋转角度 (度)">
|
||
<a-input-number
|
||
:value="device.angle || 0"
|
||
:min="0"
|
||
:max="360"
|
||
:step="1"
|
||
style="width: 100%"
|
||
@change="handleUpdate('angle', $event)"
|
||
/>
|
||
<div class="form-hint">0-360度，0度为正东方向，顺时针旋转</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="设备大小 (像素)">
|
||
<a-input-number
|
||
:value="device.size || 50"
|
||
:min="10"
|
||
:step="1"
|
||
style="width: 100%"
|
||
@change="handleUpdate('size', $event)"
|
||
/>
|
||
<div class="form-hint">最小10px，无上限</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-button type="primary" danger block @click="handleDelete">
|
||
删除设备
|
||
</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { Modal } from 'ant-design-vue'
|
||
|
||
const props = defineProps({
|
||
device: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['close', 'update', 'delete'])
|
||
|
||
const visible = ref(true)
|
||
|
||
watch(
|
||
() => props.device,
|
||
() => {
|
||
visible.value = true
|
||
}
|
||
)
|
||
|
||
const handleClose = () => {
|
||
visible.value = false
|
||
emit('close')
|
||
}
|
||
|
||
const handleUpdate = (property, value) => {
|
||
emit('update', props.device.id, property, value)
|
||
}
|
||
|
||
const handleDelete = () => {
|
||
Modal.confirm({
|
||
title: '确定要删除这个设备吗？',
|
||
content: `设备名称: ${props.device.name}`,
|
||
okText: '确定',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk() {
|
||
emit('delete', props.device.id)
|
||
handleClose()
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.form-hint {
|
||
font-size: 12px;
|
||
color: #8b95a5;
|
||
margin-top: 5px;
|
||
}
|
||
</style>
|