Merge branch 'master' of http://111.30.93.211:10101/r/supipe

李旭东

2023-12-08 7efc6ed86025b610cab109a2e9f83362740d8ed4

 web/src/views/MixingInfo/components/List.vue

对比新文件
@@ -0,0 +1,91 @@
<template>
  <div class="list">
    <div class="item" v-for="item in fieldMap" :key="item.name">
      <span class="name">{{ item.name }}:</span>
      <template v-if="item.formatter">
        <span class="value" :class="item.class(data)">{{ item.formatter(data) }}</span>
      </template>
      <template v-else>
        <span class="value">{{ data && data[item.type] || '' }}</span>
      </template>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  beforeCreate() {
    // 字段映射表
    this.fieldMap = [
      {name: '规格型号', type: 'spec'},
      {name: '产地名称', type: 'producer'},
      {name: '炉(批)号', type: 'stove'},
      {name: '进场数量', type: 'inNum'},
      {name: '进场日期', type: 'inDate'},
      {name: '检验日期', type: 'inspectDate'},
      {
        name: '检验状态', class(row) {
          let state = row && row.inspectState
          return {1: 'style1', 2: 'style2', 3: 'style3'}[state] || ''
        }, formatter(row) {
          let state = row && row.inspectState || ''
          return {1: '合格', 2: '不合格', 3: '待检测'}[state] || ''
        }
      },
      {name: '报告编号', type: 'reportNumber'},
    ]
  },
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  height: 100%;

  .item {
    display: flex;
    flex: 1;
    margin-top: 4px;

    .name {
      margin-right: 4px;
      text-indent: 6px;
      white-space: nowrap;
    }

    .value {
      color: #03F1FF;

      &.style1 {
        font-size: 1.5rem;
        line-height: 1.2rem;
        color: #16F849;
      }

      &.style2 {
        font-size: 1.5rem;
        line-height: 1.2rem;
        color: red;
      }

      &.style3 {
        font-size: 1.5rem;
        line-height: 1.2rem;
        color: #FF6600;
      }
    }

  }
}
</style>