Compare commits

..
3 Commits
Author SHA1 Message Date
wc24 c44f2a159e feat(export): 前端生成 xlsx 前把对象/数组单元格 JSON 序列化
后端 export 改为只发原始对象后,前端在 json_to_sheet 前通用地 stringify 非标量单元格
(覆盖 tab 等),避免 [object Object];import 时由后端 reqFilter 还原。
2026-06-29 21:47:10 +08:00
wc24 35abfd831c feat(tab): 显示搬前端,递归渲染子字段组件(替代后端 _label 串)
FieldTab.display 不再吃 displayLabel 字符串,改为渲染选中分支的子字段(各自 display 组件):
relation 子→查 refs 出可点名、number→数字、嵌套 tab→再递归。配 shrimp-server v0.6.9
的 refs 下钻,嵌套关联名自动有。ShrimpTable displayLabel 绑定去掉 tab。
2026-06-29 21:30:48 +08:00
wc24 3b0887b126 fix(edit): 清空字段能真正提交(undefined→null,避免 JSON 丢键)
清空 relation/select 时 el-* 常 emit undefined,进 submitData 后 JSON.stringify 丢键 →
后端收不到、看似'提交无效'。修:
- handleSave 编辑 diff 把值归一成 null(??null),清空 → null → 提交 → 后端置空
- FieldRelation 清空归一成 null(单)/[](多),避免 ObjectId 存 '' cast 报错
2026-06-29 21:17:38 +08:00
4 changed files with 52 additions and 26 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "shrimp-admin", "name": "shrimp-admin",
"version": "0.3.7", "version": "0.3.10",
"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",
+15 -4
View File
@@ -29,7 +29,7 @@
<slot :name="`column-${field.key}`" :row="row" :field="field"> <slot :name="`column-${field.key}`" :row="row" :field="field">
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field" <component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
:model-value="row[field.key]" mode="display" :model-value="row[field.key]" mode="display"
v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" /> v-bind="field.type === 'textarea' ? { displayLabel: row[field.key + '_label'] } : {}" />
</slot> </slot>
</template> </template>
</el-table-column> </el-table-column>
@@ -334,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
}) })
@@ -440,7 +442,16 @@ async function handleExport() {
} }
if (ownerId.value) query.ownerId = ownerId.value if (ownerId.value) query.ownerId = ownerId.value
const list = await api.export(query) const list = await api.export(query)
const ws = XLSX.utils.json_to_sheet(list) // 后端只发原始对象;xlsx 单元格放不下对象/数组(会变 [object Object]),这里通用地 JSON 序列化
// (覆盖 tab 等结构化字段)。import 时这些字符串由后端各类型 reqFilter 还原。
const rows = list.map((row: Record<string, any>) => {
const out: Record<string, any> = {}
for (const [k, v] of Object.entries(row)) {
out[k] = (v !== null && typeof v === 'object') ? JSON.stringify(v) : v
}
return out
})
const ws = XLSX.utils.json_to_sheet(rows)
const wb = XLSX.utils.book_new() const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, props.moduleKey) XLSX.utils.book_append_sheet(wb, ws, props.moduleKey)
XLSX.writeFile(wb, `${props.moduleKey}_export_${Date.now()}.xlsx`) XLSX.writeFile(wb, `${props.moduleKey}_export_${Date.now()}.xlsx`)
+3 -2
View File
@@ -39,9 +39,10 @@ const emit = defineEmits<{
'update:modelValue': [value: any] 'update:modelValue': [value: any]
}>() }>()
// 编辑态清空:el-select 单选清空发 '',但 relation 是 ObjectId,存 '' 会 cast 报错 → 归一成 null(取消关联) // 编辑态清空:el-select 单选清空发 '' 或 undefined,relation 是 ObjectId、且 undefined 会被
// JSON.stringify 丢键 → 都归一成 null(取消关联)。多选清空是 [],原样。
function onEdit(v: any) { function onEdit(v: any) {
emit('update:modelValue', v === '' ? null : v) 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 }[]>([])
+33 -19
View File
@@ -1,13 +1,15 @@
<template> <template>
<template v-if="mode === 'display'"> <template v-if="mode === 'display'">
<!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 --> <!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
<el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top"> <span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
<span class="tab-display">{{ displayLabel }}</span> <span v-else class="tab-display">
</el-tooltip> <span class="tab-branch">{{ branchLabel }}</span>
<span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span> <span v-for="childField in selectedTab?.fields || []" :key="childField.key" class="tab-child">
<el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top"> <span class="tab-child-label">{{ vueAdmin.t(childField.label) }}:</span>
<span class="tab-display">{{ displayText }}</span> <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
</el-tooltip> :field="childField" :model-value="innerValue[childField.key]" mode="display" />
</span>
</span>
</template> </template>
<div v-else class="field-tab"> <div v-else class="field-tab">
<el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required"> <el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
@@ -39,7 +41,6 @@ const props = defineProps<{
modelValue: any modelValue: any
mode: 'display' | 'edit' | 'filter' mode: 'display' | 'edit' | 'filter'
disabled?: boolean disabled?: boolean
displayLabel?: string
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
@@ -48,11 +49,9 @@ const emit = defineEmits<{
const moduleKey = inject('shrimpModuleKey', '') const moduleKey = inject('shrimpModuleKey', '')
const displayText = computed(() => { const branchLabel = computed(() => {
if (!props.modelValue || typeof props.modelValue !== 'object') return '-' const tab = selectedTab.value
const type = props.modelValue.type return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
const tab = props.field.tabs?.find((t: any) => t.key === type)
return tab ? vueAdmin.t(tab.label) : String(type)
}) })
const selectedTab = computed(() => { const selectedTab = computed(() => {
@@ -105,11 +104,26 @@ onMounted(() => {
<style scoped> <style scoped>
.tab-display { .tab-display {
display: inline-block; display: inline-flex;
max-width: 200px; flex-wrap: wrap;
overflow: hidden; align-items: center;
text-overflow: ellipsis; gap: 4px 10px;
white-space: nowrap; }
.tab-branch {
font-weight: 600;
color: var(--el-color-primary);
}
.tab-child {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tab-child-label {
color: var(--el-text-color-secondary);
font-size: 12px;
} }
.field-tab { .field-tab {