perf:【IoT 物联网】场景联动目录结构优化
This commit is contained in:
@ -1,5 +1,4 @@
|
|||||||
<!-- IoT场景联动规则表单 - 主表单组件 -->
|
<!-- IoT场景联动规则表单 - 主表单组件 -->
|
||||||
<!-- TODO @puhui999:要不搞个 form 目录,不用 components;保持和别的模块风格一致哈; -->
|
|
||||||
<template>
|
<template>
|
||||||
<el-drawer
|
<el-drawer
|
||||||
v-model="drawerVisible"
|
v-model="drawerVisible"
|
||||||
@ -37,21 +36,9 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 抽屉底部操作栏 -->
|
|
||||||
<!-- TODO @puhui999:这个按钮逻辑,和别的模块一致 -->
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="absolute bottom-0 left-0 right-0 flex justify-end gap-16px p-16px px-20px bg-[var(--el-bg-color)] border-t border-[var(--el-border-color-light)] shadow-[0_-2px_8px_rgba(0,0,0,0.1)]">
|
<el-button :disabled="submitLoading" type="primary" @click="handleSubmit">确 定</el-button>
|
||||||
<el-button @click="handleClose" size="large">取消</el-button>
|
<el-button @click="handleClose">取 消</el-button>
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="handleSubmit"
|
|
||||||
:loading="submitLoading"
|
|
||||||
:disabled="!canSubmit"
|
|
||||||
size="large"
|
|
||||||
>
|
|
||||||
{{ isEdit ? '更新' : '创建' }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
@ -65,7 +52,7 @@ import PreviewSection from './sections/PreviewSection.vue'
|
|||||||
import { RuleSceneFormData, IotRuleScene } from '@/api/iot/rule/scene/scene.types'
|
import { RuleSceneFormData, IotRuleScene } from '@/api/iot/rule/scene/scene.types'
|
||||||
import { getBaseValidationRules } from '../utils/validation'
|
import { getBaseValidationRules } from '../utils/validation'
|
||||||
import { transformFormToApi, transformApiToForm, createDefaultFormData } from '../utils/transform'
|
import { transformFormToApi, transformApiToForm, createDefaultFormData } from '../utils/transform'
|
||||||
import { handleValidationError, showSuccess, withErrorHandling } from '../utils/errorHandler'
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
/** IoT 场景联动规则表单 - 主表单组件 */
|
/** IoT 场景联动规则表单 - 主表单组件 */
|
||||||
defineOptions({ name: 'RuleSceneForm' })
|
defineOptions({ name: 'RuleSceneForm' })
|
||||||
@ -98,7 +85,7 @@ const actionValidation = ref({ valid: true, message: '' })
|
|||||||
|
|
||||||
// 计算属性
|
// 计算属性
|
||||||
const isEdit = computed(() => !!props.ruleScene?.id)
|
const isEdit = computed(() => !!props.ruleScene?.id)
|
||||||
const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则')) // TODO @puhui999:这个风格,和别的模块一致;
|
const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则'))
|
||||||
|
|
||||||
const canSubmit = computed(() => {
|
const canSubmit = computed(() => {
|
||||||
return (
|
return (
|
||||||
@ -132,26 +119,35 @@ const handleValidate = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
validationResult.value = { valid: true, message: '验证通过' }
|
validationResult.value = { valid: true, message: '验证通过' }
|
||||||
showSuccess('规则验证通过')
|
ElMessage.success('规则验证通过')
|
||||||
return true
|
return true
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
const message = error.message || '表单验证失败'
|
const message = error.message || '表单验证失败'
|
||||||
validationResult.value = { valid: false, message }
|
validationResult.value = { valid: false, message }
|
||||||
await handleValidationError(message, 'rule-scene-form')
|
ElMessage.error(message)
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO @puhui999:参考下别的模块,不用这么复杂哈;
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
const result = await withErrorHandling(
|
// 校验表单
|
||||||
async () => {
|
if (!formRef.value) return
|
||||||
// 验证表单
|
const valid = await formRef.value.validate()
|
||||||
const isValid = await handleValidate()
|
if (!valid) return
|
||||||
if (!isValid) {
|
|
||||||
throw new Error('表单验证失败')
|
// 验证触发器和执行器
|
||||||
|
if (!triggerValidation.value.valid) {
|
||||||
|
ElMessage.error(triggerValidation.value.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!actionValidation.value.valid) {
|
||||||
|
ElMessage.error(actionValidation.value.message)
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 提交请求
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
// 转换数据格式
|
// 转换数据格式
|
||||||
const apiData = transformFormToApi(formData.value)
|
const apiData = transformFormToApi(formData.value)
|
||||||
|
|
||||||
@ -161,20 +157,11 @@ const handleSubmit = async () => {
|
|||||||
// 模拟API调用
|
// 模拟API调用
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
return apiData
|
ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
|
||||||
},
|
drawerVisible.value = false
|
||||||
{
|
|
||||||
loadingKey: 'rule-scene-submit',
|
|
||||||
loadingText: isEdit.value ? '更新中...' : '创建中...',
|
|
||||||
context: 'rule-scene-form',
|
|
||||||
showSuccess: true,
|
|
||||||
successMessage: isEdit.value ? '更新成功' : '创建成功'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
emit('success')
|
emit('success')
|
||||||
handleClose()
|
} finally {
|
||||||
|
submitLoading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -248,7 +248,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ContentWrap } from '@/components/ContentWrap'
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
import RuleSceneForm from './components/RuleSceneForm.vue'
|
import RuleSceneForm from './form/RuleSceneForm.vue'
|
||||||
import { IotRuleScene } from '@/api/iot/rule/scene/scene.types'
|
import { IotRuleScene } from '@/api/iot/rule/scene/scene.types'
|
||||||
import { getRuleSceneSummary } from './utils/transform'
|
import { getRuleSceneSummary } from './utils/transform'
|
||||||
import { formatDate } from '@/utils/formatTime'
|
import { formatDate } from '@/utils/formatTime'
|
||||||
|
|||||||
Reference in New Issue
Block a user