148 lines
4.3 KiB
Vue
148 lines
4.3 KiB
Vue
<!-- 设备控制配置组件 -->
|
||
<!-- TODO @puhui999：貌似没生效~~~ -->
|
||
<template>
|
||
<div class="flex flex-col gap-16px">
|
||
<!-- 产品和设备选择 -->
|
||
<ProductDeviceSelector
|
||
v-model:product-id="action.productId"
|
||
v-model:device-id="action.deviceId"
|
||
@change="handleDeviceChange"
|
||
/>
|
||
|
||
<!-- 控制参数配置 -->
|
||
<div v-if="action.productId && action.deviceId" class="space-y-16px">
|
||
<el-form-item label="控制参数" required>
|
||
<el-input
|
||
v-model="paramsJson"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请输入JSON格式的控制参数"
|
||
@input="handleParamsChange"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 参数示例 -->
|
||
<div class="mt-12px">
|
||
<el-alert title="参数格式示例" type="info" :closable="false" show-icon>
|
||
<template #default>
|
||
<div class="space-y-8px">
|
||
<p class="m-0 text-14px text-[var(--el-text-color-primary)]">属性设置示例：</p>
|
||
<pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "temperature": 25, "power": true }</code></pre>
|
||
<p class="m-0 text-14px text-[var(--el-text-color-primary)]">服务调用示例：</p>
|
||
<pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "method": "restart", "params": { "delay": 5 } }</code></pre>
|
||
</div>
|
||
</template>
|
||
</el-alert>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 验证结果 -->
|
||
<div v-if="validationMessage" class="mt-16px">
|
||
<el-alert
|
||
:title="validationMessage"
|
||
:type="isValid ? 'success' : 'error'"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useVModel } from '@vueuse/core'
|
||
import ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
|
||
import { ActionFormData } from '@/api/iot/rule/scene/scene.types'
|
||
|
||
/** 设备控制配置组件 */
|
||
defineOptions({ name: 'DeviceControlConfig' })
|
||
|
||
interface Props {
|
||
modelValue: ActionFormData
|
||
}
|
||
|
||
interface Emits {
|
||
(e: 'update:modelValue', value: ActionFormData): void
|
||
(e: 'validate', result: { valid: boolean; message: string }): void
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const emit = defineEmits<Emits>()
|
||
|
||
const action = useVModel(props, 'modelValue', emit)
|
||
|
||
// 状态
|
||
const paramsJson = ref('')
|
||
const validationMessage = ref('')
|
||
const isValid = ref(true)
|
||
|
||
// 事件处理
|
||
const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
|
||
action.value.productId = productId
|
||
action.value.deviceId = deviceId
|
||
updateValidationResult()
|
||
}
|
||
|
||
const handleParamsChange = () => {
|
||
try {
|
||
if (paramsJson.value.trim()) {
|
||
action.value.params = JSON.parse(paramsJson.value)
|
||
} else {
|
||
action.value.params = {}
|
||
}
|
||
updateValidationResult()
|
||
} catch (error) {
|
||
isValid.value = false
|
||
validationMessage.value = 'JSON格式错误'
|
||
emit('validate', { valid: false, message: validationMessage.value })
|
||
}
|
||
}
|
||
|
||
const updateValidationResult = () => {
|
||
// 基础验证
|
||
if (!action.value.productId || !action.value.deviceId) {
|
||
isValid.value = false
|
||
validationMessage.value = '请选择产品和设备'
|
||
emit('validate', { valid: false, message: validationMessage.value })
|
||
return
|
||
}
|
||
|
||
if (!action.value.params || Object.keys(action.value.params).length === 0) {
|
||
isValid.value = false
|
||
validationMessage.value = '请配置控制参数'
|
||
emit('validate', { valid: false, message: validationMessage.value })
|
||
return
|
||
}
|
||
|
||
// 验证通过
|
||
isValid.value = true
|
||
validationMessage.value = '设备控制配置验证通过'
|
||
emit('validate', { valid: true, message: validationMessage.value })
|
||
}
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
if (action.value.params) {
|
||
paramsJson.value = JSON.stringify(action.value.params, null, 2)
|
||
}
|
||
updateValidationResult()
|
||
})
|
||
|
||
// 监听参数变化
|
||
watch(
|
||
() => action.value.params,
|
||
(newParams) => {
|
||
if (newParams && typeof newParams === 'object') {
|
||
paramsJson.value = JSON.stringify(newParams, null, 2)
|
||
}
|
||
},
|
||
{ deep: true }
|
||
)
|
||
</script>
|
||
|
||
<style scoped>
|
||
:deep(.example-content code) {
|
||
font-family: 'Courier New', monospace;
|
||
color: var(--el-color-primary);
|
||
}
|
||
</style>
|