jsh_erp_app/components/good-item/good-item.vue

<template>
  <view>
    <view class="good-item">
      <view class="" @click="toDetail">
        <view class="good-msg">
          <u-image
            :src="item.imgNameArr[0] || ''"
            width="128rpx"
            height="128rpx"
          ></u-image>
          <view class="ss-m-l-16">
            <view class="good-msg-name">{{ item.materialName }}</view>
            <view class="good-msg-txm">条形码：{{ item.barCode }}</view>
          </view>
        </view>
        <view class="good-cont">
          <view class="good-cont-item">
            <view class="item-label">规格</view>
            <view class="item-value">{{ item.materialStandard || "-" }}</view>
          </view>
          <view class="good-cont-item" @click.stop="calendarClick">
            <view class="item-label">生产日期</view>
            <view class="item-value">{{
              item.productionDate
                ? $u.timeFormat(item.productionDate, "yyyy-mm-dd")
                : "-"
            }}</view>
          </view>
          <view class="good-cont-item">
            <view class="item-label">库存</view>
            <view class="item-value"
              >{{ item.inventory ? (item.inventory * 1).toFixed(0) : "0"
              }}{{ item.commodityUnit || "" }}</view
            >
          </view>
          <view
            class="good-cont-item"
            @click.stop="handleClickField('position')"
          >
            <view class="item-label">库位</view>
            <view class="item-value">{{ item.position || "-" }}</view>
          </view>
          <view class="good-cont-item">
            <view class="item-label">订单数量</view>
            <view class="item-value"
              >{{ item.operNumber || "0" }}{{ item.materialUnit || "" }}</view
            >
          </view>
        </view>
      </view>
      <slot></slot>
      <view class="action-btn-box" v-if="showPrint">
        <view class="print-btn" @click="clickPrint"> 打印条码 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    showPrint: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      calendarShow: false,
      value1: Number(new Date()),
      maxDate: Number(new Date()),
    };
  },
  methods: {
    toDetail() {
      this.$emit("toDetail", this.item);
    },
    calendarClick() {
      this.$emit("calendarClick", this.item);
    },
    handleClickField(field) {
      this.$emit("handleClickField", field, { ...this.item });
    },
    clickPrint() {
      this.$emit("print", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.good-item {
  padding: 24rpx 0;
  border-bottom: 4rpx solid #f0f6fb;
  .good-msg {
    display: flex;
    align-items: center;
    padding: 0 24rpx;

    &-name {
      color: #333;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 500;
      margin-bottom: 16rpx;
    }
    &-txm {
      color: #999;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .good-cont {
    display: grid;
    grid-template-columns: 25% 45% 30%;
    margin-top: 16rpx;
    padding: 0 24rpx;
    &-item {
      font-family: "PingFang SC";
      font-weight: 400;
      margin-bottom: 24rpx;
      .item-label {
        color: #999;
        font-size: 24rpx;
        margin-bottom: 16rpx;
      }
      .item-value {
        color: #000;
        font-size: 28rpx;
      }
    }
  }
}
.action-btn-box {
  text-align: right;
  padding: 30rpx 48rpx 0 26rpx;

  .print-btn {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #0256ff;
  }
}
</style>