入厂检验单：详情界面

package.json

@@ -14,7 +14,7 @@
     "build": "gulp"
   },
   "dependencies": {
-    "axios": "0.17.1",
+    "axios": "^0.24.0",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",
     "element-ui": "^2.15.6",
@@ -26,7 +26,7 @@
     "html2canvas": "^1.3.2",
     "jspdf": "^2.4.0",
     "less-loader": "^5.0.0",
-    "lodash": "4.17.5",
+    "lodash": "^4.17.21",
     "node-sass": "4.12.0",
     "npm": "^6.9.0",
     "svg-pathdata": "5.0.5",

src/views/modules/check/ibc-detail.vue

@@ -1,13 +1,60 @@
 <template>
     <el-dialog
       title="详情"
-      width="70%"
+      width="80%"
       :close-on-click-modal="false"
       :visible.sync="visible">
-      <div>
-        <el-descriptions title="测试">
-          <el-descriptions-item label="用户名">chris</el-descriptions-item>
-        </el-descriptions>
+      <div style="margin-left: 20px;margin-right: 20px">
+        <e-desc title="基本信息">
+          <e-desc-item label="检验单编码">{{dataForm.inspectionCode}}</e-desc-item>
+          <e-desc-item label="物品名称">{{dataForm.materialName}}</e-desc-item>
+          <e-desc-item label="批次号">{{dataForm.batchNumber}}</e-desc-item>
+          <e-desc-item label="规格/图号">{{dataForm.specifications}}</e-desc-item>
+          <e-desc-item label="类别">{{dataForm.materialTypeName}}</e-desc-item>
+          <e-desc-item label="来源">{{dataForm.source}}</e-desc-item>
+          <e-desc-item label="来料类型">{{dataForm.inspectionType}}</e-desc-item>
+          <e-desc-item label="检验依据">{{dataForm.inspectionBasis}}</e-desc-item>
+          <e-desc-item label="合格证编码"></e-desc-item>
+          <e-desc-item label="检测设备" span="3" style="min-height: 80px">{{dataForm.detectionEquipment}}</e-desc-item>
+          <e-desc-item label="检验结论" span="3" style="min-height: 80px">{{dataForm.conclusion}}</e-desc-item>
+          <e-desc-item label="备注说明" span="3" style="min-height: 80px">{{dataForm.notes}}</e-desc-item>
+        </e-desc>
+        <e-desc title="检验项目">
+          <el-table
+            :data="checkList">
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              width="50"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="-"
+              header-align="center"
+              align="center"
+              label="检验项目">
+            </el-table-column>
+            <el-table-column
+              prop="-"
+              header-align="center"
+              align="center"
+              label="技术指标">
+            </el-table-column>
+            <el-table-column
+              prop="-"
+              header-align="center"
+              align="center"
+              label="实测记录">
+            </el-table-column>
+            <el-table-column
+              prop="-"
+              header-align="center"
+              align="center"
+              label="备注">
+            </el-table-column>
+          </el-table>
+        </e-desc>
       </div><span slot="footer" class="dialog-footer">
         <el-button @click="visible = false">取消</el-button>
       </span>
@@ -16,16 +63,32 @@
 </template>
 
 <script>
+  import EDesc from '../common/e-desc'
+  import EDescItem from '../common/e-desc-item'
+  import { getIncomingInspectionDetail } from '@/api/check'
   export default {
     name: 'ibc-detail',
+    components: {
+      EDesc, EDescItem
+    },
     data () {
       return {
-        visible: false
+        visible: false,
+        dataForm: {},
+        checkList: []
       }
     },
     methods: {
       async init (id) {
         this.visible = true
+        await getIncomingInspectionDetail(id).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataForm = data.data
+            if (data.data.qualityInspectionItemsList) {
+              this.checkList = data.data.qualityInspectionItemsList
+            }
+          }
+        })
       }
     }
   }

src/views/modules/common/e-desc-item.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-col :span="computedSpan" class="desc-item">
+    <div class="desc-item-content" :class="size">
+      <label class="desc-item-label" :style="{width: labelWidth}" v-html="label"></label>
+      <div class="desc-item-value" v-if="$slots">
+        <slot/>
+      </div>
+    </div>
+  </el-col>
+</template>
+
+<script>
+  export default {
+    name: 'EDescItem',
+    inject: ['labelWidth', 'column', 'size'],
+    props: {
+      span: {
+        type: [Number, String],
+        required: false,
+        default: 0
+      },
+      label: {
+        type: String,
+        required: false,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        // 子组件自己的span
+        selfSpan: 0
+      }
+    },
+    computed: {
+      computedSpan () {
+        // 子组件自己的span，用于父组件计算修改span
+        if (this.selfSpan) {
+          return 24 / this.column * this.selfSpan
+        } else if (this.span) {
+          // props传递的span
+          return 24 / this.column * this.span
+        } else {
+          // 未传递span时，取column
+          return 24 / this.column
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .desc-item {
+    border-right: 1px solid #EBEEF5;
+    border-bottom: 1px solid #EBEEF5;
+    .desc-item-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      color: rgba(0,0,0,.65);
+      font-size: 14px;
+      line-height: 1.5;
+      width: 100%;
+      background-color: #fafafa;
+      height: 100%;
+      .desc-item-label{
+        border-right: 1px solid #EBEEF5;
+        display: inline-block;
+        padding: 12px 16px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        color: rgba(0, 0, 0, 0.6);
+        /*font-weight: 400;*/
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 1.5;
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+      .desc-item-value{
+        background: #fff;
+        padding: 12px 16px;
+        flex-grow: 1;
+        overflow: hidden;
+        word-break: break-all;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: #444;
+        span{
+          color: #aaa;
+        }
+        // 空数据时展示的内容
+        &:empty::after {
+          content: '';
+        }
+      }
+      &.small {
+        .desc-item-label,
+        .desc-item-value {
+          padding: 10px 14px;
+        }
+      }
+    }
+  }
+</style>

src/views/modules/common/e-desc.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="desc" :style="{margin}">
+    <!-- 标题 -->
+    <h1 v-if="title" class="desc-title" v-html="title"></h1>
+    <el-row class="desc-row" ref='elRow'>
+      <slot/>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'EDesc',
+    // 通过provide提供给子组件
+    provide () {
+      return {
+        labelWidth: this.labelWidth,
+        column: this.column,
+        size: this.size
+      }
+    },
+    props: {
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 边距
+      margin: {
+        type: String,
+        default: '0'
+      },
+      // label宽度
+      labelWidth: {
+        type: String,
+        default: '120px'
+      },
+      column: {
+        // 每行显示的项目个数
+        type: [Number, String],
+        default: 3
+      },
+      size: {
+        // 大小
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        // 监听插槽变化
+        observe: new MutationObserver(this.computedSpan)
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.computedSpan()
+        this.observe.observe(this.$refs.elRow.$el, { childList: true })
+      })
+    },
+    methods: {
+      computedSpan () {
+        // 筛选出子组件e-desc-item
+        const dataSource = this.$slots.default
+        const dataList = []
+        dataSource.forEach(item => {
+          if (item.componentOptions && item.componentOptions.tag === 'e-desc-item') {
+            dataList.push(item.componentInstance)
+          }
+        })
+        // 剩余span
+        let leftSpan = this.column
+        const len = dataList.length
+        dataList.forEach((item, index) => {
+          // 处理column与span之间的关系
+          // 剩余的列数小于设置的span数
+          const hasLeft = leftSpan <= (item.span || 1)
+          // 当前列的下一列大于了剩余span
+          const nextColumnSpan = (index < (len - 1)) && (dataList[index + 1].span >= leftSpan)
+          // 是最后一行的最后一列
+          const isLast = index === (len - 1)
+          if (hasLeft || nextColumnSpan || isLast) {
+            // 满足以上条件，需要自动补全span，避免最后一列出现残缺的情况
+            item.selfSpan = leftSpan
+            leftSpan = this.column
+          } else {
+            leftSpan -= item.span || 1
+          }
+        })
+      }
+    },
+    beforeDestroy () {
+      this.observer.disconnect()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .desc{
+    .desc-title {
+      margin-bottom: 10px;
+      color: #333;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 1.5715;
+    }
+    .desc-row{
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: 2px;
+      border: 1px solid #EBEEF5;
+      border-bottom: 0;
+      border-right: 0;
+      width: 100%;
+    }
+  }
+</style>