shanxia2.0/web-admin/src/components/business/pl-plan-view-dialog/index.vue

<!-- 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-view-dialog"
    modal-class="order-module-dialog-mask"
    style="backdrop-filter: none"
    @closed="handleClosed"
    @opened="handleOpened"
  >
    <div v-if="$slots['hero-actions'] || showArrangeActions" class="pl-plan-view-hero-actions">
      <template v-if="showArrangeActions">
        <el-button @click="copyPlanSummary()">
          <el-icon><CopyDocument /></el-icon>复制给司机
        </el-button>
        <el-button v-if="hasSiteInventoryRecords" @click="copySiteSummary()">
          <el-icon><CopyDocument /></el-icon>复制给现场
        </el-button>
        <el-button v-if="hasDibangInventoryRecords" @click="copyPoundSlipQrcode()">
          <el-icon><CopyDocument /></el-icon>复制磅单二维码
        </el-button>
      </template>
      <slot name="hero-actions" />
    </div>

    <PlPlanViewTabs
      v-if="planId"
      ref="tabsRef"
      :plan-id="planId"
      :show-arrange-links="showArrangeActions"
      :arrange-driver-url="driverUrl"
      :arrange-site-records="siteRecords"
      :show-archive-io-fields="showArchiveIoFields"
      :show-inbound-outbound-qty="showInboundOutboundQty"
    />

    <DbPoundSlipQrcodeDialog
      v-model:visible="qrcodeVisible"
      :inventory-id="selectedInventoryId"
      :quantity-unit="selectedInventoryUnit"
      ref="qrcodeDialogRef"
    />

    <PlPlanPoundQrcodePickDialog
      v-model:visible="poundQrcodePickVisible"
      :records="poundQrcodePickRecords"
      :plan="arrangeActionPlan"
      @copy="handlePoundQrcodePickCopy"
      @preview="handlePoundQrcodePickPreview"
    />
  </el-dialog>
</template>

<script setup lang="ts">
  import { CopyDocument } from '@element-plus/icons-vue'
  import { planApi } from '@/api/pl'
  import DbPoundSlipQrcodeDialog from '@/components/business/db/DbPoundSlipQrcodeDialog.vue'
  import PlPlanPoundQrcodePickDialog from '@/components/business/pl-plan-pound-qrcode-pick-dialog/index.vue'
  import PlPlanViewTabs from '@/components/business/pl-plan-view-tabs/index.vue'
  import { usePlPlanArrangeActions } from '@/composables/usePlPlanArrangeActions'

  const props = defineProps<{
    visible: boolean
    planId?: string
    /** 仅运输计划归档：展示入库/出库单价与金额 */
    showArchiveIoFields?: boolean
    /** 计划概况产品表：展示入库/出库数量（不含单价与金额） */
    showInboundOutboundQty?: boolean
  }>()

  const emit = defineEmits<{
    'update:visible': [value: boolean]
  }>()

  const innerVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  })

  const tabsRef = ref<InstanceType<typeof PlPlanViewTabs> | null>(null)
  const planNo = ref('')

  const {
    plan: arrangeActionPlan,
    showArrangeActions,
    hasSiteInventoryRecords,
    hasDibangInventoryRecords,
    driverUrl,
    siteRecords,
    qrcodeVisible,
    selectedInventoryId,
    selectedInventoryUnit,
    qrcodeDialogRef,
    poundQrcodePickVisible,
    poundQrcodePickRecords,
    resetArrangeActions,
    loadArrangeActions,
    copySiteSummary,
    copyPlanSummary,
    copyPoundSlipQrcode,
    handlePoundQrcodePickCopy,
    handlePoundQrcodePickPreview
  } = usePlPlanArrangeActions()

  const dialogTitle = computed(() =>
    planNo.value ? `查看运输计划 · ${planNo.value}` : '查看运输计划'
  )

  async function handleOpened() {
    if (!props.planId) return
    try {
      const res = await planApi.get(props.planId)
      const data = res.data ?? res
      planNo.value = data?.planNo || ''
      await loadArrangeActions(props.planId)
    } catch {
      innerVisible.value = false
      ElMessage.error('加载运输计划详情失败')
    }
  }

  function handleClosed() {
    planNo.value = ''
    resetArrangeActions()
  }

  async function reload() {
    if (!props.visible || !props.planId) return
    try {
      const res = await planApi.get(props.planId)
      const data = res.data ?? res
      planNo.value = data?.planNo || ''
      await loadArrangeActions(props.planId)
      await tabsRef.value?.reload()
    } catch {
      /* 查看弹窗仍打开时静默失败，避免打断用户 */
    }
  }

  defineExpose({ reload })
</script>

<style scoped lang="scss">
  .pl-plan-view-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }

  .pl-plan-view-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
  }
</style>

<style lang="scss">
  .el-dialog.pl-plan-view-dialog.dialog-form-layout {
    width: min(2000px, calc(100vw - 48px)) !important;
    max-width: min(2000px, calc(100vw - 48px));
    height: var(--dialog-max-height, calc(100vh - 40px));
    max-height: var(--dialog-max-height, calc(100vh - 40px));
  }

  .el-dialog.pl-plan-view-dialog.dialog-form-layout .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .el-dialog.pl-plan-view-dialog.dialog-form-layout .pl-plan-view-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .el-dialog.pl-plan-view-dialog.dialog-form-layout .pl-plan-view-body {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
</style>