jsh_erp_app/components/good-card/good-card.vue

<template>
  <view class="good-card">
    <view @click="clickItem">
      <view class="good-base">
        <u-image
          :src="goodImg"
          width="128rpx"
          height="128rpx"
          class="good-img"
        ></u-image>
        <view class="ss-m-l-16">
          <view class="good-base-name-box">
            <view
              :class="['good-base-name', { 'has-status': $slots.status }]"
              >{{ goodName }}</view
            >
            <view class="good-status" v-if="$slots.status">
              <slot name="status"></slot>
            </view>
          </view>
          <view class="good-base-txm"
            >{{ goodDesTitle }}：{{ goodDesValue }}</view
          >
        </view>
      </view>
      <gridForm
        :columns="columns"
        :formData="item"
        @handleClickField="handleClickField"
      ></gridForm>
    </view>

    <slot></slot>
    <u-divider></u-divider>
    <slot name="action"></slot>
  </view>
</template>

<script>
import gridForm from "@/components/grid-form/grid-form.vue";

export default {
  components: {
    gridForm,
  },
  props: {
    // 货物图片
    goodImg: {
      type: String,
      default: "",
    },
    // 货物名称
    goodName: {
      type: String,
      default: "",
    },
    goodDesTitle: {
      type: String,
      default: "条形码",
    },
    // 货物额外信息
    goodDesValue: {
      type: String,
      default: "",
    },
    // 货物信息
    item: {
      type: Object,
      default: () => {},
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClickField(key, formData) {
      this.$emit("handleClickField", key, formData);
    },
    clickItem() {
      this.$emit("clickItem", { ...this.item });
    },
  },
};
</script>

<style lang="scss" scoped>
.good-card {
  .good-base {
    display: flex;
    align-items: center;
    padding: 0 24rpx;

    &-name-box {
      display: flex;
    }
    &-name {
      width: 520rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #333;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 500;
      margin-bottom: 16rpx;

      &.has-status {
        width: 400rpx;
      }
    }
    &-txm {
      color: #999;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
    }
    .good-status {
      width: 120rpx;
      height: 44rpx;
      border-radius: 8rpx;
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 22rpx;
      line-height: 44rpx;
      text-align: center;
    }
  }
}
</style>