All files / src/components/fms-file FmsFileModal.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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>