20260802220544

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

@@ -0,0 +1,88 @@
+<script setup>
+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>
+  <!-- 声明式用法 -->
+  <a-modal
+    v-if="open"
+    :open="open"
+    title="附件管理"
+    :width="'80%'"
+    :body-style="{ padding: 0, height: 'calc(70vh - 55px)' }"
+    wrap-class-name="ff-modal"
+    :destroy-on-close="true"
+    :footer="null"
+    @cancel="onClose"
+  >
+    <FmsFile
+      :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)"
+    />
+  </a-modal>
+
+  <!-- 命令式用法 -->
+  <a-modal
+    v-if="state.open"
+    :open="state.open"
+    title="附件管理"
+    :width="'80%'"
+    :body-style="{ padding: 0, height: 'calc(70vh - 55px)' }"
+    wrap-class-name="ff-modal"
+    :destroy-on-close="true"
+    :footer="null"
+    @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)"
+    />
+  </a-modal>
+</template>
+
+<style lang="scss">
+.ff-modal {
+  .ant-modal {
+    max-width: 1440px; /* 超宽屏封顶，避免三栏被拉得过宽 */
+    min-width: 960px; /* 极小屏保底，三栏不挤 */
+  }
+
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 520px; /* 矮屏保底高度 */
+  }
+}
+</style>