JG-CLIENT-TEMP/src/views/repair/components/info.vue

<template>
  <div class="commonTitle">故障详情</div>
  <el-scrollbar class="barHeight">
    <div class="textItem" v-for="(item, index) in infoTopData" :key="index">
      <div class="left describeText">{{ item.bond }}</div>
      <div class="right describeText">
        {{ showInfoValue(item.value) ? showInfoValue(item.value) : "-" }}
      </div>
    </div>
    <el-divider />
    <div class="textItem" v-for="(item, index) in infoBottomData" :key="index">
      <div class="left describeText">{{ item.bond }}</div>
      <div class="right describeText">
        {{ showInfoValue(item.value) ? showInfoValue(item.value) : "-" }}
      </div>
    </div>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import { getEscalationFaultById } from "@/api/repair";
const ordersDataArray = inject("ordersDataArray");
const selectOrderIndex = inject("selectOrderIndex");
const infoData = ref({  });
const showInfoValue = (value: string) => {
  return infoData.value[value];
};
const getInfoData = async (id: any) => {
  const { data } = await getEscalationFaultById(id);
  infoData.value = data;
};
const infoTopData = [
  {
    bond: "产品名称",
    value: "materialName",
  },
  {
    bond: "型号",
    value: "spec",
  },
  {
    bond: "产品图号",
    value: "faultNumber",
  },
  {
    bond: "产品代号",
    value: "materialCode",
  },
  {
    bond: "阶段",
    value: "stageDictValue",
  },
];
const infoBottomData = [
  {
    bond: "单据编号",
    value: "",
  },
  {
    bond: "归档编号",
    value: "archiveNumber",
  },
  {
    bond: "工作令号",
    value: "workOrderNumber",
  },
  {
    bond: "批次",
    value: "",
  },
  {
    bond: "跟踪卡号",
    value: "",
  },
  {
    bond: "日期",
    value: "created",
  },
  {
    bond: "生产数量",
    value: "planNum",
  },
  {
    bond: "不合格品数量",
    value: "unqualifiedNum",
  },
  {
    bond: "不合格品分布情况及工序",
    value: "processes",
  },
  {
    bond: "不合格原因分类",
    value: "reason",
  },
  {
    bond: "责任/经办者",
    value: "personResponsible",
  },
  {
    bond: "检验员",
    value: "userName",
  },
  {
    bond: "是否首检",
    value: "firstInspection",
  },
  {
    bond: "特征和程度",
    value: "",
  },
  {
    bond: "处置措施",
    value: "disposalMeasures",
  },
];

watch(selectOrderIndex, () => {
  getInfoData(ordersDataArray[selectOrderIndex].id);
});
</script>

<style lang="scss" scoped>
.describeText {
  line-height: 30px;
}

.barHeight {
  height: calc(100vh - 184px);
}

.textItem {
  width: 100%;
  display: flex;

  .left {
    width: 220px;
    display: inline-block;
    text-align: right;
  }

  .right {
    flex: 1;
    margin-left: $p10;
    color: black;
  }
}
</style>