更新采购申请

src/views/purchase/purchasingrequisition/implementForm.vue

@@ -2,66 +2,73 @@
   <el-dialog
     v-model="visible"
     title="实施采购"
-    width="50%"
+    width="800px"
     :close-on-click-modal="false"
     destroy-on-close
-    class="implement-iframe-dialog"
     @close="handleClose"
   >
-    <div class="implement-iframe-content">
-      <iframe
-        ref="iframeRef"
-        :src="iframeSrc"
-        frameborder="0"
-        class="implement-iframe"
-      />
-    </div>
+    <ImplementContent
+      ref="implementContentRef"
+      @close="handleContentClose"
+      @saved="handleContentSaved"
+    />
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" :loading="confirming" @click="handleConfirm">确定</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts" name="ImplementForm">
-import { ref, computed, watch } from 'vue'
+import { ref, nextTick } from 'vue'
+import ImplementContent from './implement.vue'
 
 const emit = defineEmits<{
   (e: 'refresh'): void
 }>()
 
 const visible = ref(false)
-const iframeRef = ref<HTMLIFrameElement>()
-const applyId = ref<string | number>('')
-
-const iframeSrc = computed(() => {
-  const baseUrl = window.location.origin + window.location.pathname
-  return `${baseUrl}#/purchase/purchasingrequisition/implement?id=${applyId.value}`
-})
+const implementContentRef = ref<InstanceType<typeof ImplementContent>>()
+const confirming = ref(false)
+const pendingRow = ref<{ id: string | number } | null>(null)
 
 const handleClose = () => {
   visible.value = false
-  window.removeEventListener('message', handleMessage)
 }
 
-const handleMessage = (event: MessageEvent) => {
-  if (event.data?.type === 'purchasingimplement:submitSuccess') {
-    handleClose()
-    emit('refresh')
-  } else if (event.data?.type === 'purchasingimplement:close') {
-    handleClose()
-  } else if (event.data?.type === 'purchasingimplement:saved') {
+const handleContentClose = () => {
+  visible.value = false
+  emit('refresh')
+}
+
+const handleContentSaved = () => {
+  emit('refresh')
+}
+
+const handleConfirm = async () => {
+  confirming.value = true
+  try {
+    await implementContentRef.value?.handleConfirm()
+    visible.value = false
     emit('refresh')
+  } finally {
+    confirming.value = false
   }
 }
 
-const openDialog = (row: { id: string | number }) => {
-  applyId.value = row?.id ?? ''
+const openDialog = async (row: { id: string | number }) => {
+  pendingRow.value = row
   visible.value = true
-  window.addEventListener('message', handleMessage)
-}
-
-watch(visible, (val) => {
-  if (!val) {
-    window.removeEventListener('message', handleMessage)
+  // 等待 dialog 及内部组件挂载完成后再调用 open
+  await nextTick()
+  if (pendingRow.value) {
+    implementContentRef.value?.open(pendingRow.value)
+    pendingRow.value = null
   }
-})
+}
 
 defineExpose({
   openDialog,
@@ -69,27 +76,9 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.implement-iframe-content {
-  width: 100%;
-  height: 65vh;
-  min-height: 480px;
-  max-height: calc(100vh - 180px);
-  position: relative;
-  overflow: hidden;
-
-  .implement-iframe {
-    width: 100%;
-    height: 100%;
-    min-height: 480px;
-    border: none;
-    display: block;
-  }
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
-</style>
-
-<style>
-.implement-iframe-dialog .el-dialog__body {
-  padding: 16px;
-  overflow: hidden;
-}
-</style>
+</style>