Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3b0887b126 | ||
|
|
bba08dadcc | ||
|
|
701ed957ef | ||
|
|
0b75f8c6f2 | ||
|
|
417318921c | ||
|
|
f7ef29a928 |
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "shrimp-admin",
|
"name": "shrimp-admin",
|
||||||
"version": "0.3.2",
|
"version": "0.3.8",
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
|
"description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
|
||||||
"main": "src/index.ts",
|
"main": "src/index.ts",
|
||||||
|
|||||||
@@ -123,11 +123,19 @@ export class VueAdmin extends ShrimpClient {
|
|||||||
userName = ''
|
userName = ''
|
||||||
config: ShrimpAdminConfig
|
config: ShrimpAdminConfig
|
||||||
langList: { lang: string; name: string }[]
|
langList: { lang: string; name: string }[]
|
||||||
|
/** 已注册成功的模块路由(moduleKey → IRouteInfo),供 relation 跳转/单项查看解析路由 */
|
||||||
|
moduleRoutes = new Map<string, IRouteInfo>()
|
||||||
|
|
||||||
getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
|
getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
|
||||||
return fieldRegistry.get(type) || fieldRegistry.get('string')!
|
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 })
|
state = reactive({ isMobile: false })
|
||||||
|
|
||||||
private _token: string | null = null
|
private _token: string | null = null
|
||||||
@@ -256,6 +264,7 @@ export class VueAdmin extends ShrimpClient {
|
|||||||
props: { moduleKey: info.moduleKey, events: info.events },
|
props: { moduleKey: info.moduleKey, events: info.events },
|
||||||
meta: { title: info.label }
|
meta: { title: info.label }
|
||||||
})
|
})
|
||||||
|
this.moduleRoutes.set(info.moduleKey, info)
|
||||||
}
|
}
|
||||||
|
|
||||||
initRouter() {
|
initRouter() {
|
||||||
|
|||||||
@@ -132,8 +132,18 @@ const {
|
|||||||
|
|
||||||
const searchVisible = ref(false)
|
const searchVisible = ref(false)
|
||||||
|
|
||||||
|
// relation 跳转用 ?filter={_id} 锁定单条;_id 是隐形 pin(不在筛选抽屉里),
|
||||||
|
// 用户一旦搜索/改筛选就清掉它,避免被看不见的 _id 一直 AND 着导致结果莫名为空
|
||||||
|
function stripJumpPin() {
|
||||||
|
if ('_id' in filterData.value) {
|
||||||
|
const { _id, ...rest } = filterData.value
|
||||||
|
filterData.value = rest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onSearch() {
|
function onSearch() {
|
||||||
searchKeyword.value = keyword.value
|
searchKeyword.value = keyword.value
|
||||||
|
stripJumpPin()
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
refresh()
|
refresh()
|
||||||
}
|
}
|
||||||
@@ -151,7 +161,8 @@ const hasFilter = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
async function handleFilterConfirm(newFilterData: Record<string, any>) {
|
async function handleFilterConfirm(newFilterData: Record<string, any>) {
|
||||||
filterData.value = newFilterData
|
const { _id, ...rest } = newFilterData // 确认筛选 → 丢弃跳转 pin
|
||||||
|
filterData.value = rest
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
await refresh()
|
await refresh()
|
||||||
}
|
}
|
||||||
@@ -323,8 +334,10 @@ async function handleSave() {
|
|||||||
formFields.value.forEach(field => {
|
formFields.value.forEach(field => {
|
||||||
if (field.editable === 'readonly') return
|
if (field.editable === 'readonly') return
|
||||||
if (field.editable === 'addOnly') return
|
if (field.editable === 'addOnly') return
|
||||||
const newValue = formData.value[field.key]
|
// 清空字段值为 undefined 时,JSON.stringify 会丢键 → 后端收不到、看似"提交无效"。
|
||||||
const oldValue = originalData.value[field.key]
|
// 归一成 null:既保证清空能提交(后端置空),又让"两边都空"不误判为有改动。
|
||||||
|
const newValue = formData.value[field.key] ?? null
|
||||||
|
const oldValue = originalData.value[field.key] ?? null
|
||||||
if (newValue === oldValue) return
|
if (newValue === oldValue) return
|
||||||
submitData[field.key] = newValue
|
submitData[field.key] = newValue
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
<el-date-picker v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled"
|
<el-date-picker v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled"
|
||||||
type="datetime" style="width: 100%" />
|
type="datetime" :clearable="!field.required" style="width: 100%" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
@@ -1,7 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<template v-if="mode === 'display'">
|
<template v-if="mode === 'display'">
|
||||||
<template v-if="field.multiple">{{ displayNames.join('、') || '-' }}</template>
|
<template v-if="field.multiple">
|
||||||
<template v-else>{{ displayName || '-' }}</template>
|
<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>
|
</template>
|
||||||
<el-select
|
<el-select
|
||||||
v-else-if="mode === 'filter'"
|
v-else-if="mode === 'filter'"
|
||||||
@@ -12,7 +18,7 @@
|
|||||||
>
|
>
|
||||||
<el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
|
<el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-select v-else :model-value="stringValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :multiple="field.multiple" filterable remote :remote-method="onSearch" :loading="loading" style="width: 100%">
|
<el-select v-else :model-value="stringValue" @update:model-value="onEdit" :disabled="disabled" :multiple="field.multiple" :clearable="!field.required" filterable remote :remote-method="onSearch" :loading="loading" style="width: 100%">
|
||||||
<el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
|
<el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
@@ -29,10 +35,16 @@ const props = defineProps<{
|
|||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineEmits<{
|
const emit = defineEmits<{
|
||||||
'update:modelValue': [value: any]
|
'update:modelValue': [value: any]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
// 编辑态清空:el-select 单选清空发 '' 或 undefined,relation 是 ObjectId、且 undefined 会被
|
||||||
|
// JSON.stringify 丢键 → 都归一成 null(取消关联)。多选清空是 [],原样。
|
||||||
|
function onEdit(v: any) {
|
||||||
|
emit('update:modelValue', v === '' || v == null ? (props.field.multiple ? [] : null) : v)
|
||||||
|
}
|
||||||
|
|
||||||
const options = ref<{ label: string; value: string }[]>([])
|
const options = ref<{ label: string; value: string }[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
@@ -44,12 +56,22 @@ const displayName = computed(() => {
|
|||||||
if (id == null) return ''
|
if (id == null) return ''
|
||||||
return dict.value[String(id)] ?? String(id)
|
return dict.value[String(id)] ?? String(id)
|
||||||
})
|
})
|
||||||
const displayNames = computed(() =>
|
const displayItems = computed(() =>
|
||||||
(Array.isArray(props.modelValue) ? props.modelValue : [])
|
(Array.isArray(props.modelValue) ? props.modelValue : [])
|
||||||
.map((id: any) => dict.value[String(id)] ?? String(id))
|
.filter((id: any) => id != null)
|
||||||
.filter(Boolean)
|
.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 的匹配问题 */
|
/** 统一转为字符串值,解决 ObjectId 与 el-select 的匹配问题 */
|
||||||
const stringValue = computed(() => {
|
const stringValue = computed(() => {
|
||||||
// filter 模式强制 multiple,始终返回数组
|
// filter 模式强制 multiple,始终返回数组
|
||||||
@@ -105,3 +127,13 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.rel-link {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.rel-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
@update:model-value="$emit('update:modelValue', $event)"
|
@update:model-value="$emit('update:modelValue', $event)"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:multiple="field.multiple"
|
:multiple="field.multiple"
|
||||||
|
:clearable="!field.required"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-option v-for="opt in resolvedOptions" :key="opt.value" :label="vueAdmin.t(opt.label)" :value="opt.value" />
|
<el-option v-for="opt in resolvedOptions" :key="opt.value" :label="vueAdmin.t(opt.label)" :value="opt.value" />
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
</el-tag>
|
</el-tag>
|
||||||
<el-input v-model="inputValue" @keyup.enter="addTag" @blur="addTag" :placeholder="$t('base.pressEnter')" />
|
<el-input v-model="inputValue" @keyup.enter="addTag" @blur="addTag" :placeholder="$t('base.pressEnter')" />
|
||||||
</div>
|
</div>
|
||||||
<el-input v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" clearable />
|
<el-input v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :clearable="!field.required" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
:model-value="modelValue"
|
:model-value="modelValue"
|
||||||
@update:model-value="$emit('update:modelValue', $event)"
|
@update:model-value="$emit('update:modelValue', $event)"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
clearable
|
:clearable="!field.required"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
<div v-if="!vueAdmin.state.isMobile && nextMenu.length > 0" class="aminui-side">
|
<div v-if="!vueAdmin.state.isMobile && nextMenu.length > 0" class="aminui-side">
|
||||||
<div class="adminui-side-scroll">
|
<div class="adminui-side-scroll">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-menu :default-active="$route.fullPath" router>
|
<el-menu :default-active="$route.path" router>
|
||||||
<navMenu :navMenus="nextMenu"></navMenu>
|
<navMenu :navMenus="nextMenu"></navMenu>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<el-main>
|
<el-main>
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="$route.fullPath"
|
:default-active="$route.path"
|
||||||
@select="select"
|
@select="select"
|
||||||
router
|
router
|
||||||
background-color="#212d3d"
|
background-color="#212d3d"
|
||||||
|
|||||||
+17
-1
@@ -50,6 +50,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
import { vueAdmin } from '../VueAdmin'
|
import { vueAdmin } from '../VueAdmin'
|
||||||
import { IRole, IRoleProto, WithId, ILabel } from '../IShrimpType'
|
import { IRole, IRoleProto, WithId, ILabel } from '../IShrimpType'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
@@ -61,12 +62,24 @@ interface IPowerItem {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
moduleKey: string
|
moduleKey: string
|
||||||
events?: string[]
|
events?: string[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
// relation 跳转落到 role 页时带 ?filter={"_id":...}。role 是自定义 master-detail 页(非 ShrimpTable、
|
||||||
|
// 不做服务端过滤),全量加载后按这个 _id 在列表里选中那条;解析不出就走默认(选第一个)。
|
||||||
|
function jumpTargetId(): string {
|
||||||
|
try {
|
||||||
|
const f = route.query.filter ? JSON.parse(String(route.query.filter)) : null
|
||||||
|
return f && typeof f === 'object' ? String(f._id || '') : ''
|
||||||
|
} catch {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const roleApi = vueAdmin.getModule<IRoleProto>('role')
|
const roleApi = vueAdmin.getModule<IRoleProto>('role')
|
||||||
|
|
||||||
const roleList = ref<WithId<IRole>[]>([])
|
const roleList = ref<WithId<IRole>[]>([])
|
||||||
@@ -138,7 +151,10 @@ async function handleDelete() {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
allPowers.value = await roleApi.allPower()
|
allPowers.value = await roleApi.allPower()
|
||||||
await loadRoles()
|
await loadRoles()
|
||||||
if (roleList.value.length > 0) {
|
const jumpId = jumpTargetId()
|
||||||
|
if (jumpId && roleList.value.some(r => r._id === jumpId)) {
|
||||||
|
onSelect(jumpId)
|
||||||
|
} else if (roleList.value.length > 0) {
|
||||||
onSelect(roleList.value[0]._id)
|
onSelect(roleList.value[0]._id)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user