20260820223837

code/fms/fms-vue/src/components/fms-file/FmsFileModal.vue

@@ -0,0 +1,85 @@
+<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:has(.ff-container) {
+  max-width: 1440px; /* 超宽屏封顶，避免三栏被拉得过宽 */
+  min-width: 960px; /* 极小屏保底，三栏不挤 */
+}
+
+.fms-modal-body:has(.ff-container) {
+  padding: 0;
+  height: calc(70vh - 60px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 520px; /* 矮屏保底高度 */
+}
+</style>