xgy-oa/klp-ui/src/views/wms/order/components/RecommendationArea.vue

<template>
  <div class="recommendation-area">
    <el-row :gutter="20" v-if="mode === 'normal'">
      <!-- 订单维度推荐 -->
      <el-col :span="12">
        <el-card shadow="hover" class="recommendation-card">
          <div slot="header" class="card-header">
            <span>订单维度推荐</span>
          </div>
          <div class="table-container">
            <KLPTable :data="orderRecommendations" size="small" height="320" v-loading="!orderRecommendations.length">
              <el-table-column prop="orderCode" label="订单编号" width="120" />
              <el-table-column prop="customerName" label="客户名称" width="100" />
              <el-table-column prop="orderStatus" label="订单状态" width="80" />
              <el-table-column prop="priority" label="优先级" width="60">
                <template slot-scope="scope">
                  <el-tag :type="getPriorityType(scope.row.priority)" size="mini">
                    {{ scope.row.priority }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
              <el-table-column prop="suggestedAction" label="建议操作" width="100" />
              <el-table-column prop="estimatedCompletionTime" label="预计完成时间" width="120" />
            </KLPTable>
            <div v-if="!orderRecommendations.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无推荐数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 原料维度推荐 -->
      <el-col :span="12">
        <el-card shadow="hover" class="recommendation-card">
          <div slot="header" class="card-header">
            <span>原料维度推荐</span>
          </div>
          <div class="table-container">
            <KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
              <el-table-column prop="materialName" label="原料名称" width="120" />
              <el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
              <el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
              <el-table-column prop="urgencyLevel" label="紧急程度" width="80">
                <template slot-scope="scope">
                  <el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
                    {{ scope.row.urgencyLevel }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
              <el-table-column prop="suggestedAction" label="建议操作" width="100" />
              <el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
            </KLPTable>
            <div v-if="!materialRecommendations.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无推荐数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="recommendation-area-mini" v-else>
      <el-card shadow="hover" class="recommendation-card">
          <div class="table-container">
            <KLPTable :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
              <el-table-column prop="materialName" label="原料名称" width="120" />
              <el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
              <el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
              <el-table-column prop="urgencyLevel" label="紧急程度" width="80">
                <template slot-scope="scope">
                  <el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
                    {{ scope.row.urgencyLevel }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
              <el-table-column prop="suggestedAction" label="建议操作" width="100" />
              <el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
            </KLPTable>
            <div v-if="!materialRecommendations.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无推荐数据</p>
            </div>
          </div>
        </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecommendationArea',
  props: {
    recommendationArea: {
      type: Object,
      required: true,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    orderRecommendations() {
      return this.recommendationArea.orderRecommendations || []
    },
    materialRecommendations() {
      return this.recommendationArea.materialRecommendations || []
    }
  },
  methods: {
    getPriorityType(priority) {
      switch (priority) {
        case '高':
          return 'danger'
        case '中':
          return 'warning'
        case '低':
          return 'success'
        default:
          return 'info'
      }
    },
    getUrgencyType(urgency) {
      switch (urgency) {
        case '紧急':
          return 'danger'
        case '一般':
          return 'warning'
        case '低':
          return 'success'
        default:
          return 'info'
      }
    }
  }
}
</script>

<style scoped>
.recommendation-area {
  margin-bottom: 20px;
}

.recommendation-card {
  height: 400px;
}

.card-header {
  font-weight: bold;
  color: #303133;
}

.table-container {
  height: 320px;
  overflow: hidden;
  position: relative;
}

.empty-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #909399;
}

.empty-data i {
  font-size: 48px;
  margin-bottom: 10px;
}

.empty-data p {
  margin: 0;
  font-size: 14px;
}
</style>