klp-oa/klp-ui/src/views/wms/purchasePlan/panels/clac.vue

<template>
  <div class="purchase-plan-transfer">
    <!-- 推荐采购计划（自动推荐，无按钮） -->
    <recommend-purchase-panel :order-id="orderId" :show-button="false" @recommend="onRecommend" />

    <!-- 创建采购计划表单及明细 -->
    <create-purchase-panel
      :order-id="orderId"
      :recommend-data="recommendData"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import RecommendPurchasePanel from './RecommendPurchasePanel.vue'
import CreatePurchasePanel from './CreatePurchasePanel.vue'
import { updatePurchasePlan } from '@/api/wms/purchasePlan'
import { EOrderStatus } from '@/api/wms/order'

export default {
  name: 'PurchasePlanClac',
  components: {
    RecommendPurchasePanel,
    CreatePurchasePanel
  },
  props: {
    orderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      recommendData: {}
    }
  },
  methods: {
    onRecommend(data) {
      this.recommendData = data
    },
    onConfirm(submitData) {
      updatePurchasePlan({
        orderId: this.orderId,
        orderStatus: EOrderStatus.PRODUCTIONING,
      }).then(response => {
        this.$emit('confirm', submitData)
      })
      
    }
  }
}
</script>

<style scoped>
.purchase-plan-transfer {
  display: flex;
  flex-direction: column;
}
.section-card {
  margin-bottom: 20px;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}
.transfer-content {
  display: flex;
  align-items: flex-start;
}
.left-table {
  width: 30%;
}
.right-table {
  width: 60%;
}
.transfer-actions {
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.transfer-actions .el-button {
  margin: 10px 0;
}
.global-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  border-radius: 4px;
}
.global-loading-overlay p {
  margin-top: 10px;
  color: #409EFF;
  font-size: 14px;
}
.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>