Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
417318921c | ||
|
|
f7ef29a928 | ||
|
|
f7ee862e0f | ||
|
|
8ac1427015 |
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "shrimp-admin",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.4",
|
||||
"private": true,
|
||||
"description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -123,11 +123,19 @@ export class VueAdmin extends ShrimpClient {
|
||||
userName = ''
|
||||
config: ShrimpAdminConfig
|
||||
langList: { lang: string; name: string }[]
|
||||
/** 已注册成功的模块路由(moduleKey → IRouteInfo),供 relation 跳转/单项查看解析路由 */
|
||||
moduleRoutes = new Map<string, IRouteInfo>()
|
||||
|
||||
getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
|
||||
return fieldRegistry.get(type) || fieldRegistry.get('string')!
|
||||
}
|
||||
|
||||
/** 目标模块能否作为「单项查看」跳转目标:已按权限注册路由 且 非子模块。返回其路由信息或 undefined(不可跳) */
|
||||
routeForModule(moduleKey: string): IRouteInfo | undefined {
|
||||
if (this.moduleInfo.find(m => m.moduleKey === moduleKey)?.parent) return undefined
|
||||
return this.moduleRoutes.get(moduleKey)
|
||||
}
|
||||
|
||||
state = reactive({ isMobile: false })
|
||||
|
||||
private _token: string | null = null
|
||||
@@ -256,6 +264,7 @@ export class VueAdmin extends ShrimpClient {
|
||||
props: { moduleKey: info.moduleKey, events: info.events },
|
||||
meta: { title: info.label }
|
||||
})
|
||||
this.moduleRoutes.set(info.moduleKey, info)
|
||||
}
|
||||
|
||||
initRouter() {
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<slot :name="`column-${field.key}`" :row="row" :field="field">
|
||||
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
|
||||
:model-value="row[field.key]" mode="display"
|
||||
v-bind="field.type === 'relation' || field.type === 'textarea' ? { displayLabel: row[field.key + '_label'] } : {}" />
|
||||
v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -78,7 +78,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, useSlots, onMounted, type Component } from 'vue'
|
||||
import { ref, computed, useSlots, onMounted, provide, type Component } from 'vue'
|
||||
import { ITableCrudProto, IFieldConfig, IModuleInfo, IPageQuery } from '../IShrimpType'
|
||||
import { vueAdmin } from '../VueAdmin'
|
||||
import { Plus, Delete as DeleteIcon, Download, Upload, Edit, VideoPlay, VideoPause, Operation } from '@element-plus/icons-vue'
|
||||
@@ -214,6 +214,9 @@ const filterSlotNames = computed(() => Object.keys(slots).filter(name => name.st
|
||||
const data = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
// relation 显示名字典 { moduleKey: { id: 名 } },由 list 响应带回,provide 给表格里的字段组件查名
|
||||
const refs = ref<Record<string, Record<string, any>>>({})
|
||||
provide('shrimpRefs', refs)
|
||||
|
||||
// ---- 对话框状态 ----
|
||||
|
||||
@@ -501,6 +504,7 @@ async function refresh(query?: Record<string, any>) {
|
||||
Object.assign(pageQuery, query)
|
||||
const res = await api.list(pageQuery)
|
||||
data.value = res.list || []
|
||||
refs.value = res.refs || {}
|
||||
total.value = res.total
|
||||
currentPage.value = res.page
|
||||
currentPageSize.value = res.pageSize
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<template v-if="mode === 'display'">
|
||||
<template v-if="field.multiple && Array.isArray(displayLabel)">{{ displayLabel.filter(Boolean).join(', ') || '-' }}</template>
|
||||
<template v-else>{{ displayLabel || modelValue || '-' }}</template>
|
||||
<template v-if="field.multiple">
|
||||
<span v-if="!displayItems.length">-</span>
|
||||
<template v-for="(it, i) in displayItems" :key="i"><a v-if="jumpable" class="rel-link" @click.stop="goto(it.id)">{{ it.name }}</a><span v-else>{{ it.name }}</span><span v-if="i < displayItems.length - 1">、</span></template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a v-if="jumpable && modelValue != null" class="rel-link" @click.stop="goto(modelValue)">{{ displayName }}</a>
|
||||
<span v-else>{{ displayName || '-' }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<el-select
|
||||
v-else-if="mode === 'filter'"
|
||||
@@ -18,7 +24,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, inject, onMounted, computed, type Ref } from 'vue'
|
||||
import { vueAdmin } from '../../VueAdmin'
|
||||
import { ITableCrudProto } from '../../IShrimpType'
|
||||
|
||||
@@ -27,7 +33,6 @@ const props = defineProps<{
|
||||
modelValue: any
|
||||
mode: 'display' | 'edit' | 'filter'
|
||||
disabled?: boolean
|
||||
displayLabel?: string | string[]
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
@@ -37,6 +42,30 @@ defineEmits<{
|
||||
const options = ref<{ label: string; value: string }[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 显示用:从 ShrimpTable provide 的 refs 字典按 id 查名(替代旧的 _label)
|
||||
const refs = inject<Ref<Record<string, Record<string, any>>>>('shrimpRefs', ref<Record<string, Record<string, any>>>({}))
|
||||
const dict = computed(() => refs.value?.[props.field.relation?.moduleKey] ?? {})
|
||||
const displayName = computed(() => {
|
||||
const id = props.modelValue
|
||||
if (id == null) return ''
|
||||
return dict.value[String(id)] ?? String(id)
|
||||
})
|
||||
const displayItems = computed(() =>
|
||||
(Array.isArray(props.modelValue) ? props.modelValue : [])
|
||||
.filter((id: any) => id != null)
|
||||
.map((id: any) => ({ id, name: dict.value[String(id)] ?? String(id) }))
|
||||
)
|
||||
|
||||
// 单项查看跳转:目标模块可达(已注册路由)且非子模块时,名字可点 → 跳目标模块并过滤到该 _id(单行)
|
||||
const jumpable = computed(() =>
|
||||
props.mode === 'display' && !!props.field.relation && !!vueAdmin.routeForModule(props.field.relation.moduleKey)
|
||||
)
|
||||
function goto(id: any) {
|
||||
const r = props.field.relation && vueAdmin.routeForModule(props.field.relation.moduleKey)
|
||||
if (!r || id == null) return
|
||||
vueAdmin.router.push({ name: r.name, query: { filter: JSON.stringify({ _id: String(id) }) } })
|
||||
}
|
||||
|
||||
/** 统一转为字符串值,解决 ObjectId 与 el-select 的匹配问题 */
|
||||
const stringValue = computed(() => {
|
||||
// filter 模式强制 multiple,始终返回数组
|
||||
@@ -92,3 +121,13 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rel-link {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.rel-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<template v-if="mode === 'display'">
|
||||
<span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
|
||||
<!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 -->
|
||||
<el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top">
|
||||
<span class="tab-display">{{ displayLabel }}</span>
|
||||
</el-tooltip>
|
||||
<span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span>
|
||||
<el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top">
|
||||
<span class="tab-display">{{ displayText }}</span>
|
||||
</el-tooltip>
|
||||
@@ -35,6 +39,7 @@ const props = defineProps<{
|
||||
modelValue: any
|
||||
mode: 'display' | 'edit' | 'filter'
|
||||
disabled?: boolean
|
||||
displayLabel?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<div v-if="!vueAdmin.state.isMobile && nextMenu.length > 0" class="aminui-side">
|
||||
<div class="adminui-side-scroll">
|
||||
<el-scrollbar>
|
||||
<el-menu :default-active="$route.fullPath" router>
|
||||
<el-menu :default-active="$route.path" router>
|
||||
<navMenu :navMenus="nextMenu"></navMenu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<el-main>
|
||||
<el-scrollbar>
|
||||
<el-menu
|
||||
:default-active="$route.fullPath"
|
||||
:default-active="$route.path"
|
||||
@select="select"
|
||||
router
|
||||
background-color="#212d3d"
|
||||
|
||||
Reference in New Issue
Block a user