aiot-app/pages/pda/components/workCard.vue

<template>
  <view class="card_box" @click="handleDetail">
    <!-- 卡片头部：单号 + 状态标签 -->
    <view class="card-header">
      <view class="header-left">
        <view class="round" v-if="item.index">{{ item.index }}</view>
        <view class="orderId" v-if="item.workOrderType != 2">{{
          item.code
        }}</view>
        <view class="orderId" v-if="item.workOrderType == 2">{{
          item.outsourceCode
        }}</view>
      </view>
      <view class="status-tag" :class="'status-' + item.status">
        {{ statusList[item.status] }}
      </view>
    </view>

    <!-- 委外信息（仅委外工单显示） -->
    <view class="outsource-section" v-if="item.workOrderType == 2">
      <view class="info-row">
        <text class="info-label">委外名称</text>
        <text class="info-value">{{ item.outsourceName }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">工单来源</text>
        <text class="info-value">{{ item.code }}</text>
      </view>
    </view>

    <!-- 卡片内容区域 -->
    <view class="card-body">
      <view class="info-grid">
        <view class="info-row half">
          <text class="info-label">产品编码</text>
          <text class="info-value text-ellipsis">{{ item.productCode }}</text>
        </view>
        <view class="info-row half">
          <text class="info-label">产品名称</text>
          <text class="info-value text-ellipsis">{{ item.productName }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row half">
          <text class="info-label">牌号</text>
          <text class="info-value text-ellipsis">{{ item.brandNo }}</text>
        </view>
        <view class="info-row half">
          <text class="info-label">批次号</text>
          <text class="info-value highlight text-ellipsis">{{
            item.batchNo
          }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row half">
          <text class="info-label">型号</text>
          <text class="info-value text-ellipsis">{{ item.model }}</text>
        </view>
        <view class="info-row half">
          <text class="info-label">规格</text>
          <text class="info-value highlight text-ellipsis">{{
            item.specification
          }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row half">
          <text class="info-label">生产数量</text>
          <text class="info-value text-ellipsis"
            >{{ item.formingNum }} {{ item.unit }}</text
          >
        </view>
        <view class="info-row half">
          <text class="info-label">生产重量</text>
          <text class="info-value text-ellipsis"
            >{{ item.formingWeight }} {{ item.weightUnit }}</text
          >
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row half">
          <text class="info-label">报工类型</text>
          <text class="info-value highlight text-ellipsis">{{
            item.singleReport == 1 ? "单个报工" : "批量报工"
          }}</text>
        </view>
        <view class="info-row half">
          <text class="info-label">当前工序</text>
          <text class="info-value highlight text-ellipsis">{{
            item.taskName
          }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row full">
          <text class="info-label">工艺路线</text>
          <text class="info-value highlight text-ellipsis">{{
            item.produceRoutingName
          }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-row full">
          <text class="info-label">计划编号</text>
          <text class="info-value highlight text-ellipsis">{{
            item.productionPlanCode
          }}</text>
        </view>
      </view>
    </view>

    <!-- 底部箭头提示 -->
    <view class="card-footer">
      <text class="footer-tip">查看详情</text>
      <image
        class="arrow-icon"
        src="/static/pda/arrow_right2.svg"
        mode="aspectFit"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      statusList: {
        4: "待生产",
        5: "生产中",
        6: "已完成",
        7: "已延期",
        8: "待下达",
      },
    };
  },
  methods: {
    handleDetail() {
      console.log("this.item", this.item);
      this.$emit("handleDetail", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.card_box {
  width: calc(100% - 48rpx);
  margin: 20rpx 24rpx 0;
  padding: 0;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 28rpx;
    background: linear-gradient(
      135deg,
      rgba(21, 122, 44, 0.06) 0%,
      rgba(21, 122, 44, 0.02) 100%
    );
    border-bottom: 1rpx solid #f0f0f0;

    .header-left {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }

    .round {
      width: 48rpx;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      flex-shrink: 0;
    }

    .orderId {
      color: $uni-text-color;
      font-size: 34rpx;
      font-weight: 600;
      margin-left: 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .status-tag {
      flex-shrink: 0;
      margin-left: 16rpx;
      padding: 6rpx 20rpx;
      border-radius: 20rpx;
      font-size: 26rpx;
      font-weight: 500;
      white-space: nowrap;
    }

    .status-4 {
      color: $uni-color-warning;
      background: $uni-color-warning-opacity;
    }
    .status-5 {
      color: $uni-color-primary;
      background: $uni-color-primary-opacity;
    }
    .status-6 {
      color: $uni-color-success;
      background: $uni-color-success-opacity;
    }
    .status-7 {
      color: $uni-color-error;
      background: $uni-color-error-opacity;
    }
    .status-8 {
      color: $uni-color-info;
      background: rgba(144, 144, 144, 0.15);
    }
  }

  .outsource-section {
    padding: 16rpx 28rpx;
    background: rgba(64, 158, 255, 0.04);
    border-bottom: 1rpx solid #f0f0f0;

    .info-row {
      display: flex;
      align-items: center;
      padding: 8rpx 0;
      overflow: hidden;
    }

    .info-label {
      color: $uni-text-color-grey;
      font-size: 28rpx;
      flex-shrink: 0;
      white-space: nowrap;

      &::after {
        content: "：";
      }
    }

    .info-value {
      color: $uni-text-color;
      font-size: 28rpx;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .card-body {
    padding: 16rpx 28rpx 8rpx;

    .info-grid {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 4rpx;
    }

    .info-row {
      display: flex;
      align-items: center;
      padding: 12rpx 0;
      box-sizing: border-box;
      overflow: hidden;

      &.half {
        width: 50%;

        &:nth-child(odd) {
          padding-right: 16rpx;
        }
        &:nth-child(even) {
          padding-left: 16rpx;
        }
      }

      &.full {
        width: 100%;
      }
    }

    .info-label {
      color: $uni-text-color-grey;
      font-size: 28rpx;
      flex-shrink: 0;
      margin-right: 8rpx;
      line-height: 40rpx;
      white-space: nowrap;

      &::after {
        content: "：";
      }
    }

    .info-value {
      color: $uni-text-color;
      font-size: 28rpx;
      flex: 1;
      line-height: 40rpx;
      min-width: 0;

      &.highlight {
        color: $theme-color;
      }
    }

    .text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 18rpx 28rpx;
    border-top: 1rpx solid #f5f5f5;

    .footer-tip {
      color: $uni-text-color-grey;
      font-size: 24rpx;
    }

    .arrow-icon {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
  }
}
</style>