jsh_erp_app/pages/inventory-task/components/check-item.vue

<template>
  <view class="check-item">
    <view class="header-box">
      <view class="header-box-l">
        <view class="header-box-name">{{ info.taskName }}</view>
        <view>盘点单号：{{ info.number }}</view>
      </view>
      <view>
        <view :class="['tips-box', curTaskStatusInfo.className]">{{
          curTaskStatusInfo.name
        }}</view>
        <!-- <view class="tips-box tips-green">已盘点</view>
				<view class="tips-box tips-hui">已取消</view>
				<view class="tips-box tips-yellow">盘点中</view> -->
      </view>
    </view>
    <view class="cont-box">
      <view class="cont-item">
        <view class="item-label">盘点仓库</view>
        <view class="item-val">{{ info.depotName }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">创建人</view>
        <view class="item-val">{{ info.createByName }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">盘点负责人</view>
        <view class="item-val">{{ info.creatorName }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">货物种类</view>
        <view class="item-val">{{ info.categoryCount }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">货物总量</view>
        <view class="item-val">{{ info.materialCount }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">库位范围</view>
        <view class="item-val">{{ info.positionRange }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">创建时间</view>
        <view class="item-val">{{ info.createTime }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">盘点时间</view>
        <view class="item-val">{{ info.operTime }}</view>
      </view>
      <view class="cont-item">
        <view class="item-label">盘点人</view>
        <view class="item-val">{{ info.operName }}</view>
      </view>
    </view>

    <view class="btn-box">
      <u-button
        class="detail-btn"
        type="primary"
        text="详情"
        :customStyle="customBtnStyle"
        @click="handleCick('详情')"
        v-if="status === 3 || status === 4"
      ></u-button>
      <u-button
        class="detail-btn"
        type="primary"
        text="去盘点"
        :customStyle="customBtnStyle"
        @click="handleCick('去盘点')"
        v-if="status === 1 || status === 2"
      ></u-button>
      <u-button
        class="detail-btn"
        type="primary"
        text="去提交"
        :customStyle="customBtnStyle"
        @click="handleCick('去提交')"
        v-if="status === 2"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { getTaskStatusInfoByVal } from "../../inventory-task/utils/index.js";

export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    status() {
      return this.info.taskStatus;
    },
    curTaskStatusInfo() {
      return getTaskStatusInfoByVal(this.info.taskStatus);
    },
  },
  data() {
    return {
      customBtnStyle: {
        width: "144rpx",
        height: "56rpx",
        borderRadius: "28rpx",
        background: "#0256ff",
        fontSize: "32rpx",
        borderRadius: "8rpx",
      },
    };
  },
  methods: {
    handleCick(btnName) {
      const params = {
        ...this.info,
        btnName,
      };
      this.$emit("btnClick", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.check-item {
  padding: 24rpx 24rpx 0 24rpx;
  // border-radius: 16px;
  background: #fff;
  border-bottom: 4rpx solid #f0f6fb;
  .header-box {
    display: flex;
    justify-content: space-between;
    .header-box-l {
      color: #999;
      font-size: 28rpx;
      font-weight: 400;
      .header-box-name {
        color: #333;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
    .tips-box {
      width: 120rpx;
      height: 44rpx;
      font-size: 22rpx;
      text-align: center;
      line-height: 44rpx;
      border-radius: 8rpx;
    }
    .tips-red {
      color: #ff3b1d;
      background: rgba(255, 59, 29, 0.2);
    }
    .tips-green {
      color: #00b97b;
      background: rgba(0, 185, 123, 0.2);
    }
    .tips-hui {
      color: #bfc8db;
      background: rgba(173, 181, 189, 0.26);
    }
    .tips-yellow {
      color: #f59701;
      background: rgba(245, 151, 1, 0.2);
    }
  }
  .cont-box {
    border-radius: 16rpx;
    background: #f6f8fa;
    margin-top: 16rpx;
    padding: 24rpx;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    .cont-item {
      margin-bottom: 20rpx;
      .item-label {
        color: #999;
        font-size: 24rpx;
        font-weight: 400;
        margin-bottom: 6rpx;
      }
      .item-val {
        color: #000;
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16rpx 0 24rpx;
    .detail-btn {
      width: 144rpx;
      height: 56rpx;
      border-radius: 28rpx;
      background: #0256ff;
      font-size: 32rpx;
      border-radius: 8rpx;
    }
  }
}
</style>