aiot-app/pages/pda/nonconforming/components/itemCard.vue

<template>
  <view class="card_box" @click="handleDetail">
    <view class="item_box rx-bc">
      <view class="item_one perce100 rx-sc">
        <view class="lable">编码：</view>
        <view>{{ item.unqualifiedProductsCode }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce100 rx-sc">
        <view class="lable">来源编码：</view>
        <view>{{ item.sourceCode }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce100 rx-sc">
        <view class="lable">物品编码：</view>
        <view>{{ item.categoryCode }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce100 rx-sc">
        <view class="lable">物品名称：</view>
        <view>{{ item.categoryName }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getByCode } from "@/api/pda/common.js";
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      qualityList: [],
      disposeList: [],
    };
  },

  created() {
    this.getDisposeList("dispose_status");
    this.getQualityList("inspection_plan_type");
  },

  methods: {
    handleDetail() {},

    async getDisposeList(code) {
      let res = await getByCode(code);
      if (res?.code == 0) {
        let list = res.data.map((item) => {
          let key = Object.keys(item)[0];
          return { value: Number(key), label: item[key] };
        });
        this.disposeList = list;
      }
    },
    async getQualityList(code) {
      let res = await getByCode(code);
      if (res?.code == 0) {
        let list = res.data.map((item) => {
          let key = Object.keys(item)[0];
          return { value: Number(key), label: item[key] };
        });
        this.qualityList = list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card_box {
  width: 750rpx;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e1e1e1;

  .item_box {
    margin-top: 10rpx;

    .round {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 20rpx;
    }

    .orderId {
      color: #000;
      font-family: PingFang HK;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      margin-left: 16rpx;
    }

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 38rpx;
      word-wrap: break-word;
    }

    .item-right {
      flex: 1;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }

    .perce100 {
      width: 100%;
    }
  }
}
</style>