aiot-app/pages/production/execute/picking/components/card.vue

<template>
  <view class="marginTop">
    <view
      v-for="(item, index) in list"
      class="kd-row"
      :key="item.id"
      @click="goDetail(item)"
      v-show="list.length !== 0"
    >
      <view class="kd-col">
        <text class="title">生产工单号：{{ item.dialNumber }}</text>
        <text
          class="status"
          :class="
            statusList[item.auditStatus] && statusList[item.auditStatus].class
          "
          >{{
            statusList[item.auditStatus] && statusList[item.auditStatus].label
          }}</text>
      </view>
      <view class="kd-col">
        <text class="warehouse" > 生产版本：X01 挤压</text>
        <text>产品名称：木工刀</text>
      </view>
      <view class="kd-col">
        <text class="warehouse" > 牌号|型号：牌号|型号</text>
        <text>要求成型数量：10000PCS</text>
      </view>
	  <view class="kd-col">
	    <text class="warehouse" > 要求成型重量：1000KG</text>
	    <text>要求成型日期：2023/6/20</text>
	  </view>
	  <view class="kd-col">
	    <text class="warehouse" > 工单发布时间：2023/08/10  02:00:00</text>
	  </view>
	  <view class="kd-col">
	    <text class="warehouse" > 计划开始时间：2023/08/10  02:00:00</text>
	  </view>
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data" textSize="22"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      statusList: {
        4: { class: '', label: '草稿' },
        1: { class: '', label: '待审核' },
        0: { class: 'text-danger', label: '已驳回' },
        2: { class: 'text-primary', label: '已完成' }
      }
    }
  },
  methods: {
    goDetail ({ id, auditStatus }) {
      uni.navigateTo({
        url: `/pages/production/execute/extrusion/detail?&id=${id}`
          // auditStatus === 4
          //   ? `/pages/warehouse/inventoryAllocation/edit?&id=${id}`
          //   : `/pages/warehouse/inventoryAllocation/detail?&id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginTop {
  border-top: 20rpx solid $page-bg;

  .kd-row {
    font-size: 28rpx;
    padding: 14rpx 12rpx 6rpx;
    border-bottom: 1rpx solid $page-bg;
    .kd-col {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rpx;
      color: #aaaaaa;

      .status {
        background-color: $page-bg;
        display: inline-block;
        padding: 4rpx 10rpx;
        border-radius: 18rpx;
      }
    }
    .title {
      font-weight: bold;
      color: #333333;
    }
  }

  .center {
    text-align: center;
    margin-bottom: 10rpx;
    color: #999;
  }
  .no_data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 28rpx;
  }
}

.warehouse {
  display: flex;
  align-items: center;
}

.arrow {
  display: inline-block;
  position: relative;
  width: 50rpx;
  height: 10rpx;
  margin: 0 20rpx;
  &::after,
  &::before {
    content: '';
    position: absolute;
  }
  &::after {
    border-top: 4rpx solid #aaaaaa;
    border-right: 4rpx solid #aaaaaa;
    width: 12rpx;
    height: 12rpx;
    right: 0rpx;
    top: -6rpx;
    transform: rotate(45deg);
  }
  &::before {
    height: 4rpx;
    background-color: #aaaaaa;
    width: 50rpx;
  }
}
</style>