jsh_erp_app/pages/inventory-inquiry/components/good-item.vue

<template>
  <view>
    <view class="good-item" @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">
          <view class="item-label">库位</view>
          <view class="item-value">{{ item.position || "-" }}</view>
        </view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  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);
    },
  },
};
</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;
      }
    }
  }
}
</style>