82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<Dialog v-model="dialogVisible" :title="dialogTitle" :appendToBody="true" v-loading="loading">
|
|||
|
|
<div class="flex h-600px">
|
|||
|
|
<!-- 左侧物模型属性（view模式） -->
|
|||
|
|
<div class="w-1/2 border-r border-gray-200 pr-2 overflow-auto">
|
|||
|
|
<JsonEditor :model-value="thingModel" mode="view" height="600px" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧JSON编辑器（code模式） -->
|
|||
|
|
<div class="w-1/2 pl-2 overflow-auto">
|
|||
|
|
<JsonEditor v-model="editableModelTSL" mode="code" height="600px" @error="handleError" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="handleSave" :disabled="hasJsonError">保存</el-button>
|
|||
|
|
</template>
|
|||
|
|
</Dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { isEmpty } from '@/utils/is'
|
|||
|
|
|
|||
|
|
defineOptions({ name: 'ThingModelDualView' })
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
modelValue: any // 物模型的值
|
|||
|
|
thingModel: any[] // 物模型
|
|||
|
|
}>()
|
|||
|
|
const emits = defineEmits(['update:modelValue', 'change'])
|
|||
|
|
|
|||
|
|
const message = useMessage()
|
|||
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|||
|
|
const dialogTitle = ref('物模型编辑器') // 弹窗的标题
|
|||
|
|
const editableModelTSL = ref([
|
|||
|
|
{
|
|||
|
|
identifier: '对应左侧 identifier 属性值',
|
|||
|
|
value: '如果 identifier 是 int 类型则输入数字，具体查看产品物模型定义'
|
|||
|
|
}
|
|||
|
|
]) // 物模型数据
|
|||
|
|
const hasJsonError = ref(false) // 是否有 JSON 格式错误
|
|||
|
|
const loading = ref(false) // 加载状态
|
|||
|
|
|
|||
|
|
/** 打开弹窗 */
|
|||
|
|
const open = () => {
|
|||
|
|
try {
|
|||
|
|
// 数据回显
|
|||
|
|
if (props.modelValue) {
|
|||
|
|
editableModelTSL.value = JSON.parse(props.modelValue)
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
message.error('物模型编辑器参数')
|
|||
|
|
console.error(e)
|
|||
|
|
} finally {
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
// 重置状态
|
|||
|
|
hasJsonError.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
defineExpose({ open }) // 暴露方法供父组件调用
|
|||
|
|
|
|||
|
|
/** 保存修改 */
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
try {
|
|||
|
|
await message.confirm('确定要保存物模型参数吗？')
|
|||
|
|
emits('update:modelValue', JSON.stringify(editableModelTSL.value))
|
|||
|
|
message.success('保存成功')
|
|||
|
|
dialogVisible.value = false
|
|||
|
|
} catch {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 处理 JSON 编辑器错误的函数 */
|
|||
|
|
const handleError = (errors: any) => {
|
|||
|
|
if (isEmpty(errors)) {
|
|||
|
|
hasJsonError.value = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
hasJsonError.value = true
|
|||
|
|
}
|
|||
|
|
</script>
|