From bc7a1c225acc0a8ffdf439c03d692547c89ec25e Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Mon, 14 Sep 2026 16:47:05 +0800
Subject: [PATCH] feat(web-admin): reuse plan form as a full-page webview
 variant.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../business/pl-plan-form-dialog/index.vue    | 146 ++++++++++++++++--
 web-admin/src/layouts/MpWebviewShell.vue      |   1 +
 web-admin/src/styles/mp-webview.scss          |  23 +++
 web-admin/src/views/m/pl/plan/form.vue        |  55 +++++--
 4 files changed, 199 insertions(+), 26 deletions(-)

diff --git a/web-admin/src/components/business/pl-plan-form-dialog/index.vue b/web-admin/src/components/business/pl-plan-form-dialog/index.vue
index 8ddc0fec9..f49bb1530 100644
--- a/web-admin/src/components/business/pl-plan-form-dialog/index.vue
+++ b/web-admin/src/components/business/pl-plan-form-dialog/index.vue
@@ -1,19 +1,13 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <template>
-  <el-dialog
-    v-model="innerVisible"
-    :title="dialogTitle"
-    width="100%"
-    align-center
-    destroy-on-close
-    append-to-body
-    class="dialog-form-layout pl-plan-form-dialog"
-    modal-class="order-module-dialog-mask"
-    :close-on-click-modal="false"
-    style="backdrop-filter: none"
+  <component
+    :is="isPageVariant ? 'div' : ElDialog"
+    v-bind="formShellBind"
     @closed="handleClosed"
     @opened="handleOpened"
+    @update:model-value="onFormShellVisible"
   >
+    <h2 v-if="isPageVariant" class="mp-plan-form-title">{{ dialogTitle }}</h2>
     <div class="pl-plan-form-body">
       <section class="pl-plan-form-section">
         <h3 class="pl-plan-form-section-title">基础信息</h3>
@@ -21,7 +15,7 @@
           ref="basicFormRef"
           :model="formData"
           :rules="basicRules"
-          label-position="right"
+          :label-position="formLabelPosition"
           label-width="100px"
           class="pl-dialog-form"
         >
@@ -76,7 +70,7 @@
         <h3 class="pl-plan-form-section-title">运输信息</h3>
         <el-form
           :model="formData"
-          label-position="right"
+          :label-position="formLabelPosition"
           label-width="100px"
           class="pl-dialog-form"
         >
@@ -198,7 +192,7 @@
 
       <section class="pl-plan-form-section">
         <h3 class="pl-plan-form-section-title">装送货信息</h3>
-        <el-form label-position="right" label-width="100px" class="pl-dialog-form">
+        <el-form :label-position="formLabelPosition" label-width="100px" class="pl-dialog-form">
           <PlPlanStopsSplitShell
             :plan-total-qty="planTotalQty"
             :load-total-qty="loadTotalQty"
@@ -273,9 +267,9 @@
       </section>
     </div>
 
-    <template #footer>
+    <template v-if="!isPageVariant" #footer>
       <div class="dialog-footer">
-        <el-button @click="innerVisible = false">
+        <el-button @click="handleCancel">
           <el-icon><Close /></el-icon>取消
         </el-button>
         <el-button
@@ -312,6 +306,39 @@
         </el-button>
       </div>
     </template>
+    <div v-else class="mp-plan-form-footer dialog-footer">
+      <el-button @click="handleCancel">
+        <el-icon><Close /></el-icon>取消
+      </el-button>
+      <el-button v-if="showDraftButton" :loading="submitLoading" @click="handleSubmit('draft')">
+        <el-icon><Document /></el-icon>暂存
+      </el-button>
+      <el-button
+        v-if="showSaveButton"
+        :type="showSaveAndArrangeButton ? 'default' : 'primary'"
+        :class="showSaveAndArrangeButton ? 'btn-ghost' : undefined"
+        :loading="submitLoading"
+        @click="handleSubmit('save')"
+      >
+        <el-icon><Check /></el-icon>{{ saveButtonLabel }}
+      </el-button>
+      <el-button
+        v-if="showSaveAndArrangeButton"
+        type="primary"
+        :loading="submitLoading"
+        @click="handleSubmit('saveAndArrange')"
+      >
+        <el-icon><Van /></el-icon>{{ saveAndArrangeButtonLabel }}
+      </el-button>
+      <el-button
+        v-if="showRearrangeButton"
+        type="primary"
+        :loading="submitLoading"
+        @click="handleSubmit('rearrange')"
+      >
+        <el-icon><Van /></el-icon>调整运输
+      </el-button>
+    </div>
 
     <CustomerSelector
       :visible="customerSelectorVisible"
@@ -342,10 +369,11 @@
       mode="vehicle-bundle"
       @done="handlePasteRecognizeDone"
     />
-  </el-dialog>
+  </component>
 </template>
 
 <script setup lang="ts">
+  import { ElDialog } from 'element-plus'
   import {
     Bottom,
     Check,
@@ -460,11 +488,14 @@
     openForArrange?: boolean
     /** 归档等场景：仅保存计划，不展示暂存/安排运输（已安排计划也显示「保存」） */
     planEditOnly?: boolean
+    /** 小程序 WebView 全屏页：不使用桌面弹窗遮罩 */
+    variant?: 'dialog' | 'page'
   }>()
 
   const emit = defineEmits<{
     'update:visible': [value: boolean]
     success: [payload?: { planId: string; arranged?: boolean }]
+    close: []
   }>()
 
   const userStore = useUserStore()
@@ -512,6 +543,8 @@
 
   const isEdit = computed(() => !!props.planId)
   const isCopy = computed(() => !props.planId && !!props.copyFromPlanId)
+  const isPageVariant = computed(() => props.variant === 'page')
+  const formLabelPosition = computed(() => (isPageVariant.value ? 'top' : 'right'))
   const dialogTitle = computed(() => (isEdit.value ? '编辑运输计划' : '新增运输计划'))
 
   const innerVisible = computed({
@@ -519,6 +552,28 @@
     set: (value) => emit('update:visible', value)
   })
 
+  function onFormShellVisible(value: boolean) {
+    innerVisible.value = value
+  }
+
+  const formShellBind = computed(() => {
+    if (isPageVariant.value) {
+      return { class: 'mp-plan-form-page pl-plan-form-dialog' }
+    }
+    return {
+      modelValue: innerVisible.value,
+      title: dialogTitle.value,
+      width: '100%',
+      alignCenter: true,
+      destroyOnClose: true,
+      appendToBody: true,
+      class: 'dialog-form-layout pl-plan-form-dialog',
+      modalClass: 'order-module-dialog-mask',
+      closeOnClickModal: false,
+      style: 'backdrop-filter: none'
+    }
+  })
+
   const submitLoading = ref(false)
   const detailLoading = ref(false)
   /** 加载详情 / 重置时禁止计划产品 → 段产品自动对齐 */
@@ -1793,6 +1848,18 @@
     })
   }
 
+  function handleCancel() {
+    if (isPageVariant.value) {
+      emit('close')
+      return
+    }
+    innerVisible.value = false
+  }
+
+  onMounted(() => {
+    if (isPageVariant.value) handleOpened()
+  })
+
   async function loadPlanForEdit(planId: string) {
     detailLoading.value = true
     suppressAddressMutex.value = true
@@ -2348,6 +2415,51 @@
 </script>
 
 <style scoped lang="scss">
+  .mp-plan-form-title {
+    margin: 0 0 12px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #087f57;
+  }
+
+  .mp-plan-form-page {
+    :deep(.form-grid-5),
+    :deep(.form-grid-4),
+    :deep(.form-grid-3),
+    :deep(.form-grid-2) {
+      grid-template-columns: 1fr;
+    }
+
+    .pl-plan-transport-row--two,
+    .pl-plan-transport-row--three,
+    .pl-plan-transport-row--four,
+    .pl-plan-kv-grid-party {
+      grid-template-columns: 1fr;
+    }
+
+    .pl-plan-transport-row__vehicle,
+    .pl-plan-transport-row__driver,
+    .pl-plan-transport-row__escort {
+      width: auto;
+      max-width: none;
+    }
+
+    .pl-plan-freight-form {
+      min-height: 0;
+    }
+  }
+
+  .mp-plan-form-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 12px 0 calc(8px + env(safe-area-inset-bottom));
+    background: #f5f8f7;
+  }
+
   .pl-plan-transport-row {
     align-items: start;
 
diff --git a/web-admin/src/layouts/MpWebviewShell.vue b/web-admin/src/layouts/MpWebviewShell.vue
index f69a1bf51..76ce94c27 100644
--- a/web-admin/src/layouts/MpWebviewShell.vue
+++ b/web-admin/src/layouts/MpWebviewShell.vue
@@ -73,6 +73,7 @@
 <style scoped lang="scss">
   .mp-wv-root {
     --brand: #0a9f6d;
+    --el-color-primary: #0a9f6d;
     box-sizing: border-box;
     min-height: 100vh;
     max-width: 480px;
diff --git a/web-admin/src/styles/mp-webview.scss b/web-admin/src/styles/mp-webview.scss
index 5d1419317..dd57b4b1e 100644
--- a/web-admin/src/styles/mp-webview.scss
+++ b/web-admin/src/styles/mp-webview.scss
@@ -138,3 +138,26 @@
   border-color: #0a9f6d;
   font-weight: 600;
 }
+
+.mp-plan-form-page .form-grid-5,
+.mp-plan-form-page .form-grid-4,
+.mp-plan-form-page .form-grid-3,
+.mp-plan-form-page .form-grid-2 {
+  grid-template-columns: 1fr;
+}
+
+.mp-print-hint {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #6b7b74;
+  line-height: 1.5;
+}
+
+.mp-print-preview {
+  overflow: auto;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #dcebe4;
+  border-radius: 12px;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/web-admin/src/views/m/pl/plan/form.vue b/web-admin/src/views/m/pl/plan/form.vue
index ac305e5f3..0a56ef8ae 100644
--- a/web-admin/src/views/m/pl/plan/form.vue
+++ b/web-admin/src/views/m/pl/plan/form.vue
@@ -1,18 +1,55 @@
 <template>
   <MpWebviewShell>
-    <p class="mp-wv-placeholder">计划表单加载中…</p>
+    <PlPlanFormDialog
+      :key="formKey"
+      variant="page"
+      :visible="true"
+      :plan-id="planId"
+      :copy-from-plan-id="copyFrom"
+      :open-for-arrange="openForArrange"
+      @success="onSuccess"
+      @close="onClose"
+    />
   </MpWebviewShell>
 </template>
 
 <script setup lang="ts">
+  import { computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
   import MpWebviewShell from '@/layouts/MpWebviewShell.vue'
-</script>
+  import PlPlanFormDialog from '@/components/business/pl-plan-form-dialog/index.vue'
+  import '@/styles/mp-webview.scss'
 
-<style scoped>
-  .mp-wv-placeholder {
-    margin: 24px 0 0;
-    font-size: 14px;
-    color: #6b7b74;
-    text-align: center;
+  const route = useRoute()
+  const router = useRouter()
+
+  const planId = computed(() => {
+    if (route.name === 'MpPlPlanNew') return undefined
+    const id = String(route.params.id || '').trim()
+    return id || undefined
+  })
+  const copyFrom = computed(() => {
+    const id = String(route.query.copyFrom || '').trim()
+    return id || undefined
+  })
+  const openForArrange = computed(() => route.name === 'MpPlPlanArrange')
+  const formKey = computed(
+    () => `${String(route.name || '')}-${planId.value || ''}-${copyFrom.value || ''}`
+  )
+
+  function onSuccess(payload?: { planId: string; arranged?: boolean }) {
+    if (payload?.planId) {
+      void router.replace(`/m/pl/plan/${payload.planId}`)
+      return
+    }
+    void router.replace('/m/pl/plan')
   }
-</style>
+
+  function onClose() {
+    if (window.history.length > 1) {
+      router.back()
+      return
+    }
+    void router.replace('/m/pl/plan')
+  }
+</script>