station-test-ui/src/views/device/storage_equipment/wrenchCheckDetail.vue

<template>
    <el-dialog :modal="false" title="校验记录详情" :visible.sync="drowDetailVisible">
        <el-row>
          <div style="margin-bottom: 30px; margin-left: 50px ">
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">扳手编号:</pre>
                <span class="item">{{ record.wrenchNumber}}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">外观检查：</pre>
                <span class="item">{{ record.inspectionVisual==1?'合格':'不合格' }}</span>
              </div>
             
              <div class="detail-item">
                <span>检测结果：</span>
                <span class="item">{{ record.preload_three_results==1?'合格':'不合格' }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
             style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
               <div class="detail-item">
                <pre style="display: inline">校准人：</pre>
                <span class="item">{{ record.CalibratorName }}</span>
              </div>
              <div class="detail-item">
                <span>校验人：</span>
                <span class="item">{{ record.CheckName}}</span>
              </div>
              <div class="detail-item">
                <span>签发人: </span>
                <span class="item">{{ record.IssueName }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">校准日期：</pre>
                <span class="item">{{ record.CalibratorDate}}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">校验日期：</pre>
                <span class="item">{{ record.CheckDate }}</span>
              </div>
              <div class="detail-item">
                <span>签发日期：</span>
                <span class="item">{{ record.IssueDate }}</span>
              </div>
              
            </el-col>
            <el-col :span="6"></el-col>
          </div>
        </el-row>

        <el-table :data="gridData" style="width: 100%">
            <el-table-column property="stress" label="压力" ></el-table-column>
            <el-table-column property="torque" label="扭矩" ></el-table-column>
        </el-table>
        
    </el-dialog>
</template>
<script>

  export default {
    props: ["checkDetailVisible", "record"],
    data() {
      return {
        gridData:[],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '160px'
      };
    },
    computed:{
        drowDetailVisible:{
            set(val) {
                this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
            },
            get() {
               this.$http.get("wrenchCheckRecordData?id="+this.record.id).then((response) => {
                  this.gridData = response.data;
                });
                return this.checkDetailVisible; // 表示获取父组件的值
            }
        }
        
    },


  };
</script>
<style scoped>
.table {
  margin: 0 auto;
}
.detail-item {
  width: 100%;
  padding: 15px 0px;
  list-style-type: none;
}
.item {
  font-size: 14px;
  color: black;
  margin-top: 5px;
}
.el-table .warning-row {
  background: oldlace !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}
.pagination-container{
  padding-left:25px;
  padding-right:25px;
}
</style>