完成样品模板回显为table功能

licp

2024-03-25 f75c4df0ca8cdee5c15f0ecd4288825f35b19bf1

 src/components/do/b1-inspect-order-plan/Inspection.vue

@@ -43,6 +43,48 @@
  .el-drawer__header{
    color: #303133;
  }
  .center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .tables{
    width: 800px;
  }
  .tables td{
    height: 40px;
    width: 100px;
    text-align: center;
    font-size: 14px;
  }
  .content{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: left;
    padding: 2px;
    box-sizing: border-box;
  }
  .content-h-0{
    justify-content: center;
  }
  .content-h-1{
    justify-content: start;
  }
  .content-h-2{
    justify-content: end;
  }
  .content-v-0{
    align-items: center;
  }
  .content-v-1{
    align-items: start;
  }
  .content-v-2{
    align-items: end;
  }
</style>
<template>
   <div>
@@ -83,6 +125,22 @@
         </el-form>
      </div>
      <div class="center">
      <table border="1" class="tables" cellpadding="10" v-for="(item,index) in tableList" :key="index">
          <tbody>
              <tr v-for="(m,i) in item.arr" :key="i">
                <td
                v-for="(n,j) in m"
                :key="j"
                :colspan="n.v.mc&&n.v.mc.cs?n.v.mc.cs:1"
                :rowspan="n.v.mc&&n.v.mc.rs?n.v.mc.rs:1"
                :style="`background:${n.v.bg};font-family:${n.v.ff};color:${n.v.fc};font-size:${n.v.fs}px;width:${item.style.columnlen['0']}px;height:${item.style.rowlen[i]}px;font-wight:${n.v.bl?'bold':''};`">
                <div class="content" :class="`content-h-${n.v.ht} content-v-${n.v.vt}`">
                  <span>{{ n.v.v}}</span>
                </div>
                </td>
              </tr>
            </tbody>
        </table>
      </div>
    <el-drawer
      title="样品切换"
@@ -169,6 +227,7 @@
        typeList:[],
        urgentList:[],
        currentSample:{},//当前样品信息
        tableList:[],
         }
      },
      created() {
@@ -192,12 +251,14 @@
          })
               this.sampleProduct = res.data.sampleProduct
          this.currentSample = this.sampleProduct[0]
          this.handleTableData()
            })
         }
      },
      methods: {
      handleChangeSample(row, column, event){
        this.currentSample = row;
        this.handleTableData()
        this.sampleVisible = false;
      },
      handleChangeTask(row){
@@ -243,6 +304,54 @@
         },
      tableRowClassName({ row, rowIndex }){
        row.index = rowIndex + 1;
      },
      handleTableData(){
        const mySet1 = new Set();
        this.tableList = JSON.parse(JSON.stringify(this.currentSample.insProduct)).filter(m=>{
          let num0 = mySet1.size;
          mySet1.add(JSON.stringify({
            inspectionItem:m.inspectionItem,
            templateId:m.templateId
          }))
          let num1 = mySet1.size;
          if(num1>num0){
            return m
          }
        })
        this.tableList.map(item=>{
          const mySet0 = new Set();
          let arr = [];
          let arrItem = [];
          item.template.forEach((m,i)=>{
            let num0 = mySet0.size;
            mySet0.add(m.r)
            let num1 = mySet0.size;
            if(num0<num1){
              if(arrItem.length>0){
                arr.push(arrItem)
                arrItem = []
              }
              if(m.v.mc){
                if(m.v.mc.rs||m.v.mc.cs){
                  arrItem.push(m)
                }
              }else{
                arrItem.push(m)
              }
            }else{
              if(m.v.mc){
                if(m.v.mc.rs||m.v.mc.cs){
                  arrItem.push(m)
                }
              }else{
                arrItem.push(m)
              }
            }
          })
          arr.push(arrItem)
          item.arr = arr;
          return item
        })
      }
      }
   }