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

<template>
  <view class="card_box" @click="handleDetail">
    <!-- 头部编号 + 单号 -->
    <view class="header rx-sc">
      <view class="round">{{ index + 1 }}</view>
      <view class="orderId">{{ item.code }}</view>
    </view>

    <!-- 主要信息区 -->
    <view class="info_box">
      <view class="row"
        ><text class="label">委外名称：</text
        ><text class="value">{{ item.name }}</text></view
      >
      <view class="row"
        ><text class="label">委外单编码：</text
        ><text class="value">{{ item.code }}</text></view
      >
      <view class="row"
        ><text class="label">工单编码：</text
        ><text class="value">{{ item.workOrderCode }}</text></view
      >
      <view class="row"
        ><text class="label">型号 ：</text
        ><text class="value">{{ item.modelType }} </text></view
      >

      <view class="row"
        ><text class="label"> 规格：</text
        ><text class="value"> {{ item.specification }}</text></view
      >

      <view class="row"
        ><text class="label">委外工序：</text
        ><text class="value highlight">{{ item.taskNames }}</text></view
      >

      <view class="row"
        ><text class="label">数量：</text
        ><text class="value"
          >{{ item.totalCount }}{{ item.measuringUnit }}</text
        ></view
      >
      <view class="row"
        ><text class="label">重量：</text
        ><text class="value">{{
          item.totalWeight ? item.totalWeight + item.weightUnit : "无"
        }}</text></view
      >

      <view class="row"
        ><text class="label">类型：</text
        ><text class="value">{{
          item.type == 4 ? "带料委外" : "不带料委外"
        }}</text></view
      >
      <view class="row"
        ><text class="label">批次号：</text
        ><text class="value">{{ item.batchNo }}</text></view
      >
      <view class="row"
        ><text class="label">委外单位：</text
        ><text class="value">{{ item.supplierName }}</text></view
      >

      <view class="row"
        ><text class="label">状态：</text
        ><text class="value highlight">
          {{
            item.status == 0 ? "未提交" : item.status == 1 ? "已提交" : "已发布"
          }}
        </text></view
      >
      <view class="row"
        ><text class="label">委外状态：</text>
        <text class="value">{{
          item.purchaseStatus == 0 || !item.purchaseStatus
            ? "未入库"
            : item.purchaseStatus == 1
            ? "原料入库"
            : item.purchaseStatus == 3
            ? "委外完成"
            : ""
        }}</text>
      </view>
      <view class="row"
        ><text class="label">审核状态：</text>
        <text class="value">{{
          ["未提交", "审核中", "审核通过", "审核不通过"][item.approvalStatus]
        }}</text>
      </view>

      <view class="row"
        ><text class="label">申请人：</text
        ><text class="value">{{ item.createUserName }}</text></view
      >
      <view class="row"
        ><text class="label">创建时间：</text
        ><text class="value">{{ item.createTime }}</text></view
      >
      <view class="row"
        ><text class="label">预计到货：</text
        ><text class="value">{{ item.requireDeliveryTime }}</text></view
      >
    </view>
  </view>
</template>

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

    index: {
      type: Number,
      default: 0,
    },
  },

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

<!-- <style lang="scss" scoped>
.card_box {
  width: 750rpx;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e1e1e1;

  .item_box {
    margin-top: 10rpx;

    .round {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 20rpx;
    }

    .orderId {
      color: #000;
      font-family: PingFang HK;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      margin-left: 16rpx;
    }

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 38rpx;
      word-wrap: break-word;
    }

    .item-right {
      flex: 1;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }
  }
}
</style> -->

<style lang="scss" scoped>
.card_box {
  width: 710rpx;
  margin: 20rpx auto;
  padding: 22rpx 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;

  &:active {
    transform: scale(0.98);
  }

  .header {
    margin-bottom: 18rpx;
    .round {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 22rpx;
    }
    .orderId {
      margin-left: 14rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .info_box {
    .row {
      display: flex;
      font-size: 24rpx;
      padding: 8rpx 0;
      line-height: 32rpx;

      .label {
        width: 180rpx;
        color: #666;
      }
      .value {
        flex: 1;
        text-align: right;
        color: #333;
        word-break: break-all;
      }
      .highlight {
        color: $theme-color;
        font-weight: 500;
      }
    }
  }
}
</style>