81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup>
|
||
import Modal from '@/components/ui/modal/modal.vue'
|
||
import { useFileModal } from './useFileModal'
|
||
import FmsFile from './FmsFile.vue'
|
||
|
||
const props = defineProps({
|
||
open: { type: Boolean, default: false },
|
||
moduleCode: { type: [String, Number], required: true },
|
||
father: { type: [String, Number], required: true },
|
||
showTree: { type: Boolean, default: true },
|
||
readonly: { type: Boolean, default: false },
|
||
initialCateId: { type: String, default: '' },
|
||
})
|
||
|
||
const emit = defineEmits(['update:open', 'uploaded', 'deleted', 'selected'])
|
||
|
||
function onClose() {
|
||
emit('update:open', false)
|
||
}
|
||
|
||
const { state } = useFileModal()
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 声明式用法 -->
|
||
<Modal
|
||
:open="open"
|
||
title="附件管理"
|
||
:width="'80%'"
|
||
:footer="false"
|
||
@cancel="onClose"
|
||
>
|
||
<FmsFile
|
||
:key="`${moduleCode}-${father}`"
|
||
:module-code="moduleCode"
|
||
:father="father"
|
||
:show-tree="showTree"
|
||
:readonly="readonly"
|
||
:initial-cate-id="initialCateId"
|
||
@uploaded="emit('uploaded')"
|
||
@deleted="emit('deleted')"
|
||
@selected="(f) => emit('selected', f)"
|
||
/>
|
||
</Modal>
|
||
|
||
<!-- 命令式用法 -->
|
||
<Modal
|
||
:open="state.open"
|
||
title="附件管理"
|
||
:width="'80%'"
|
||
:footer="false"
|
||
@cancel="state.open = false"
|
||
>
|
||
<FmsFile
|
||
:key="state.key"
|
||
:module-code="state.moduleCode"
|
||
:father="state.father"
|
||
:show-tree="state.showTree"
|
||
:readonly="state.readonly"
|
||
:initial-cate-id="state.initialCateId"
|
||
@uploaded="state.onUploaded?.()"
|
||
@deleted="state.onDeleted?.()"
|
||
@selected="(f) => state.onSelected?.(f)"
|
||
/>
|
||
</Modal>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
/* Modal 根节点是 Teleport，class 无法透传（Vue 会告警且不生效），
|
||
因此通过内容锚点 .ff-container（FmsFile 根元素）用 :has() 定位附件弹窗。
|
||
打开中的附件弹窗体内必然渲染 .ff-container，其他弹窗不受影响。 */
|
||
|
||
.fms-modal-body:has(.ff-container) {
|
||
padding: 0;
|
||
height: calc(70vh - 60px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 520px; /* 矮屏保底高度 */
|
||
}
|
||
</style> |