Fix Vue 3 warning: non-props attributes inheritance in LocalAiNodeListActions
This commit is contained in:
parent
964f65dc1d
commit
535072b87b
@ -2,25 +2,24 @@
|
|||||||
<!-- 根据视图模式决定容器类名,组件自包含所有样式 -->
|
<!-- 根据视图模式决定容器类名,组件自包含所有样式 -->
|
||||||
<div :class="containerClass">
|
<div :class="containerClass">
|
||||||
<!-- 默认操作按钮 -->
|
<!-- 默认操作按钮 -->
|
||||||
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
|
<button class="action-btn" @click.stop="handleView" :title="t('View')">
|
||||||
<i class="fa fa-eye"></i>
|
<i class="fa fa-eye"></i>
|
||||||
</button>
|
</button>
|
||||||
<button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
|
<button class="action-btn" @click.stop="handleEdit" :title="t('Edit')">
|
||||||
<i class="fa fa-edit"></i>
|
<i class="fa fa-edit"></i>
|
||||||
</button>
|
</button>
|
||||||
<!-- Schema 编辑按钮 -->
|
<!-- Schema 编辑按钮 -->
|
||||||
<button
|
<button
|
||||||
class="action-btn schema-btn"
|
class="action-btn schema-btn"
|
||||||
@click.stop="handleOpenSchemaEditor"
|
@click.stop="handleOpenSchemaEditor"
|
||||||
:title="context.t('Edit Schema')"
|
:title="t('Edit Schema')"
|
||||||
:disabled="!canEditSchema"
|
:disabled="!canEditSchema"
|
||||||
>
|
>
|
||||||
<i class="fa fa-table"></i>
|
<i class="fa fa-table"></i>
|
||||||
</button>
|
</button>
|
||||||
<button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
|
<button class="action-btn delete-btn" @click.stop="handleDelete" :title="t('Delete')">
|
||||||
<i class="fa fa-trash"></i>
|
<i class="fa fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Schema 编辑器模态框 - 使用 Teleport 渲染到 body,避免事件冒泡问题 -->
|
<!-- Schema 编辑器模态框 - 使用 Teleport 渲染到 body,避免事件冒泡问题 -->
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
@ -33,6 +32,7 @@
|
|||||||
@close="showSchemaEditor = false"
|
@close="showSchemaEditor = false"
|
||||||
/>
|
/>
|
||||||
</Teleport>
|
</Teleport>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -41,10 +41,12 @@ import { Teleport } from 'vue'
|
|||||||
import { useMessage } from 'naive-ui'
|
import { useMessage } from 'naive-ui'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { get_session_api_headers } from '@/shared/api/auth'
|
import { get_session_api_headers } from '@/shared/api/auth'
|
||||||
|
import { t } from '@/shared/i18n'
|
||||||
import SchemaEditorModal from '@/core/components/SchemaEditorModal.vue'
|
import SchemaEditorModal from '@/core/components/SchemaEditorModal.vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
interface Props {
|
||||||
context: {
|
// 支持两种接口:context 或直接 props
|
||||||
|
context?: {
|
||||||
row: any
|
row: any
|
||||||
entity: string
|
entity: string
|
||||||
openDetail: (name: string) => void
|
openDetail: (name: string) => void
|
||||||
@ -54,21 +56,37 @@ const props = defineProps<{
|
|||||||
t: (key: string) => string
|
t: (key: string) => string
|
||||||
viewMode?: 'card' | 'list'
|
viewMode?: 'card' | 'list'
|
||||||
}
|
}
|
||||||
}>()
|
row?: any
|
||||||
|
entity?: string
|
||||||
|
viewMode?: 'card' | 'list'
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'view', row: any): void
|
||||||
|
(e: 'edit', row: any): void
|
||||||
|
(e: 'delete', row: any): void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
|
// 兼容两种接口:优先使用直接 props,如果没有则使用 context
|
||||||
|
const row = computed(() => props.row || props.context?.row)
|
||||||
|
const entity = computed(() => props.entity || props.context?.entity)
|
||||||
|
const viewMode = computed(() => props.viewMode || props.context?.viewMode || 'list')
|
||||||
|
|
||||||
// 根据视图模式决定容器类名,组件自包含所有样式
|
// 根据视图模式决定容器类名,组件自包含所有样式
|
||||||
const containerClass = computed(() => {
|
const containerClass = computed(() => {
|
||||||
const viewMode = props.context.viewMode || 'list'
|
return viewMode.value === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
|
||||||
return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
const showSchemaEditor = ref(false)
|
const showSchemaEditor = ref(false)
|
||||||
|
|
||||||
const nodeName = computed(() => props.context.row.name || '')
|
const nodeName = computed(() => row.value?.name || '')
|
||||||
const nodeType = computed(() => props.context.row.node_type || '')
|
const nodeType = computed(() => row.value?.node_type || '')
|
||||||
const initialSchema = computed(() => {
|
const initialSchema = computed(() => {
|
||||||
const schema = props.context.row.node_schema
|
const schema = row.value?.node_schema
|
||||||
if (!schema) return {}
|
if (!schema) return {}
|
||||||
if (typeof schema === 'string') {
|
if (typeof schema === 'string') {
|
||||||
try {
|
try {
|
||||||
@ -84,17 +102,42 @@ const canEditSchema = computed(() => {
|
|||||||
return !!nodeType.value
|
return !!nodeType.value
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 事件处理函数
|
||||||
|
function handleView() {
|
||||||
|
if (props.context?.openDetail) {
|
||||||
|
props.context.openDetail(row.value.name)
|
||||||
|
} else {
|
||||||
|
emit('view', row.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit() {
|
||||||
|
if (props.context?.editRecord) {
|
||||||
|
props.context.editRecord(row.value)
|
||||||
|
} else {
|
||||||
|
emit('edit', row.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete() {
|
||||||
|
if (props.context?.deleteRecord) {
|
||||||
|
props.context.deleteRecord(row.value.name)
|
||||||
|
} else {
|
||||||
|
emit('delete', row.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function handleOpenSchemaEditor() {
|
async function handleOpenSchemaEditor() {
|
||||||
if (!canEditSchema.value) {
|
if (!canEditSchema.value) {
|
||||||
message.warning(props.context.t('Please select node type first'))
|
message.warning(t('Please select node type first'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果列表数据中没有完整的 node_schema,需要从API获取完整记录
|
// 如果列表数据中没有完整的 node_schema,需要从API获取完整记录
|
||||||
if (!props.context.row.node_schema) {
|
if (!row.value?.node_schema) {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(
|
const response = await axios.get(
|
||||||
`/api/data/${encodeURIComponent(props.context.entity)}/${encodeURIComponent(nodeName.value)}`,
|
`/api/data/${encodeURIComponent(entity.value)}/${encodeURIComponent(nodeName.value)}`,
|
||||||
{
|
{
|
||||||
headers: get_session_api_headers(),
|
headers: get_session_api_headers(),
|
||||||
withCredentials: true
|
withCredentials: true
|
||||||
@ -103,12 +146,12 @@ async function handleOpenSchemaEditor() {
|
|||||||
|
|
||||||
const record = response.data?.data || {}
|
const record = response.data?.data || {}
|
||||||
// 更新 row 数据以便后续使用
|
// 更新 row 数据以便后续使用
|
||||||
if (record.node_schema) {
|
if (record.node_schema && row.value) {
|
||||||
props.context.row.node_schema = record.node_schema
|
row.value.node_schema = record.node_schema
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取节点数据失败:', error)
|
console.error('获取节点数据失败:', error)
|
||||||
message.error(props.context.t('Failed to load node data'))
|
message.error(t('Failed to load node data'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -120,7 +163,7 @@ async function handleSchemaSave(schemaData: any) {
|
|||||||
try {
|
try {
|
||||||
// 保存 Schema 数据到后端
|
// 保存 Schema 数据到后端
|
||||||
const response = await axios.put(
|
const response = await axios.put(
|
||||||
`/api/data/${encodeURIComponent(props.context.entity)}/${encodeURIComponent(nodeName.value)}`,
|
`/api/data/${encodeURIComponent(entity.value)}/${encodeURIComponent(nodeName.value)}`,
|
||||||
{
|
{
|
||||||
node_schema: schemaData
|
node_schema: schemaData
|
||||||
},
|
},
|
||||||
@ -132,15 +175,17 @@ async function handleSchemaSave(schemaData: any) {
|
|||||||
|
|
||||||
if (response.data?.success !== false) {
|
if (response.data?.success !== false) {
|
||||||
// 更新本地 row 数据
|
// 更新本地 row 数据
|
||||||
props.context.row.node_schema = schemaData
|
if (row.value) {
|
||||||
message.success(props.context.t('Schema saved successfully'))
|
row.value.node_schema = schemaData
|
||||||
|
}
|
||||||
|
message.success(t('Schema saved successfully'))
|
||||||
showSchemaEditor.value = false
|
showSchemaEditor.value = false
|
||||||
} else {
|
} else {
|
||||||
throw new Error(response.data?.message || props.context.t('Save failed'))
|
throw new Error(response.data?.message || t('Save failed'))
|
||||||
}
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error('保存 Schema 失败:', error)
|
console.error('保存 Schema 失败:', error)
|
||||||
message.error(error?.response?.data?.message || error?.message || props.context.t('Save failed, please check permission and server logs'))
|
message.error(error?.response?.data?.message || error?.message || t('Save failed, please check permission and server logs'))
|
||||||
throw error // 让组件处理错误显示
|
throw error // 让组件处理错误显示
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user