jsh_erp_app/pages/picking-task/components/task-item.vue

<template>
  <view class="task-item">
    <view @click="detailClick">
      <view class="task-head">
        <view class="sn-box">单据编号：{{ item.number }}</view>
        <view v-if="type == 'caigou'">
          <view class="tips tips-red" v-if="item.status == 1">待入库</view>
          <view class="tips tips-greed" v-if="item.status == 2">已入库</view>
          <view class="tips tips-yellow" v-if="item.status == 4">入库中</view>
        </view>
        <view v-else>
          <view class="tips tips-red" v-if="item.status == 1">待拣货</view>
          <view class="tips tips-greed" v-if="item.status == 2">已拣货</view>
          <view class="tips tips-yellow" v-if="item.status == 4">拣货中</view>
        </view>
      </view>
      <view class="task-line" v-if="type == 'caigou'">
        <view>供应商：</view>
        <view>{{ item.supplierName }}</view>
      </view>
      <view class="task-line" v-else>
        <view>客户名称：</view>
        <view>{{ item.supplierName }}</view>
      </view>
      <view class="task-line">
        <view>单据日期：</view>
        <view>{{ item.operTime }}</view>
      </view>
      <view class="task-line">
        <view class="task-line2">
          <view>货物总数：</view>
          <view class="task-num">{{ item.goodsQuantity }}件</view>
        </view>
        <view class="task-line2">
          <view>货物种类：</view>
          <view class="task-num">{{ item.goodsTypeCount || 0 }}种</view>
        </view>
      </view>
    </view>
    <view class="task-bottom">
      <view v-if="type == 'caigou'">
        <view
          class="btn btn-1"
          v-if="item.status == 1 || item.status == 4"
          @click="toStorage"
          >去入库</view
        >
        <view class="btn btn-2" v-else @click="toDetail">详情</view>
      </view>
      <view v-else>
        <view
          class="btn btn-1"
          v-if="item.status == 1 || item.status == 4"
          @click="toStorage"
          >去出库</view
        >
        <view class="btn btn-2" v-else @click="toDetail">详情</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    toStorage() {
      this.$emit("toStorage", this.item);
    },
    toDetail() {
      this.$emit("toDetail", this.item);
    },
    detailClick() {
      if (this.item.status == 1 || this.item.status == 4) {
        this.toStorage();
      } else {
        this.toDetail();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.task-item {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0;
  margin-bottom: 24rpx;
  .task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sn-box {
      color: #333;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 500;
    }
    .tips {
      font-family: "PingFang SC";
      font-size: 22rpx;
      font-weight: 400;
      width: 120rpx;
      height: 44rpx;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips-red {
      color: #ff3b1d;
      background: rgba(255, 59, 29, 0.2);
    }
    .tips-greed {
      color: #00b97b;
      background: rgba(0, 185, 123, 0.2);
    }
    .tips-yellow {
      color: #f57701;
      background: rgba(245, 151, 1, 0.2);
    }
  }

  .task-line {
    display: flex;
    align-items: center;
    color: #666;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 16rpx;
  }
  .task-line2 {
    width: 50%;
    display: flex;
    align-items: center;
    .task-num {
      color: #0256ff;
    }
  }

  .task-bottom {
    border-top: 1px solid #f0f0f0;
    margin-top: 32rpx;
    height: 104rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 144rpx;
      height: 56rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "PingFang SC";
    }
    .btn-1 {
      background: #0256ff;
      color: #fff;
    }
    .btn-2 {
      border: 1px solid #0256ff;
      background: rgba(2, 86, 255, 0.2);
      color: #0256ff;
    }
  }
}
</style>