质检：附件上传

zouyu

2024-03-11 7e807f771796a68e799826ae4a5598ddb2eec0d8

 src/views/quality/packageinspect/packageInspect-form.vue

@@ -3,10 +3,10 @@
    <div class="page-header">
      <div class="header-left">
        <a @click="$router.go(-1)"><i class="icon-btn-back"></i></a>
        <h2>编辑-包装检验</h2>
        <h2 v-if="resultVal=='' || resultVal==null">编辑-包装检验</h2>
        <h2 v-else>查看-包装检验</h2>
      </div>
      <div class="btn-group header-right">
        <el-button @click="save()" type="primary">保存</el-button>
      </div>
    </div>
    <div class="page-main">
@@ -62,69 +62,165 @@
            </el-row>
        </el-form>
      </div>
      <div class="packageInspect-detail">
        <el-row style="width:100%;z-index: 10;height:50px;">
            <el-col :span="22">检验项目</el-col>
            <el-col :span="2">
              <el-button style="width:100%" size="small" @click="clickAddLine()">添加检验项目</el-button>
            </el-col>
        </el-row>
        <el-row style="width:100%;">
            <el-col :span="24">
                <el-table
                :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
                :cell-style="{textAlign:'center'}"
                ref="table"
                :data="list"
                border
                style="width: 100%;"
                height="400"
                row-key="randomId" class="l-mes"
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column type="index" label="序号" width="60">
                  </el-table-column>
                  <el-table-column prop="name" label="项目" width="260">
      <div>
        <el-tabs class="packageInspect-detail" @tab-click="tabsClick">
            <el-tab-pane label="检验项目">
                <el-row>
                    <el-col :span="24" style="text-align: right;">
                        <el-dropdown @command="handleCommand" v-if="isShow && (resultVal==null || resultVal=='')">
                            <el-button size="mini" style="margin-right: 10px;" type="primary" >
                                切换检验项模板<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :key="index" v-for="(item,index) in inspectMoulds" :command="item.father">{{item.father}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    <el-button v-if="resultVal=='' || resultVal==null" size="mini" @click="clickAddLine()">添加检验项目</el-button>
                    <el-button v-if="resultVal=='' || resultVal==null" type="primary" size="mini"
                    @click="savePackIns()">保存</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-table
                        :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
                        :cell-style="{textAlign:'center'}"
                        ref="table"
                        :data="list"
                        border
                        style="width: 100%;"
                        height="400"
                        row-key="randomId" class="l-mes"
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column type="index" prop="parentIndex" label="序号" width="60">
                            <template scope="scope">
                                <span v-if="scope.row.isIndex">{{scope.row.parentIndex}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="项目" min-width="160">
                            <template slot-scope="scope">
                                <el-input :readonly="resultVal!=null || !scope.row.isEdit" v-if="scope.row.children" class="inline-input" style="width:80%;" v-model="scope.row.name"
                                placeholder="请输入项目名称"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="required" label="要求" min-width="160">
                            <template slot-scope="scope">
                            <div v-if="!scope.row.children">
                                <el-tooltip :content="scope.row.required">
                                    <el-input :readonly="resultVal!=null || !scope.row.isEdit"
                                    v-model="scope.row.required"
                                    placeholder="请输入要求"></el-input>
                                </el-tooltip>
                            </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="note" label="检验描述" min-width="160">
                            <template slot-scope="scope">
                            <div v-if="!scope.row.children">
                                <el-input :readonly="resultVal!=null" v-model="scope.row.note" placeholder="检验描述"></el-input>
                            </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="testState" label="结论" min-width="150">
                            <template slot-scope="scope">
                                <el-select style="width:100%" :disabled="resultVal!=null" @change="changeResult" v-model="scope.row.result" v-if="!scope.row.children">
                                    <el-option label="合格" value="合格"></el-option>
                                    <el-option label="不合格" value="不合格"></el-option>
                                    <el-option label="不适用" value="不适用"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="resultVal=='' || resultVal==null" fixed="right" style="background-color: white;" label="操作" width="200">
                            <template slot-scope="scope">
                            <el-button v-if="scope.row.children && scope.row.isEdit" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">添加行</el-button>
                            <el-button v-if="!scope.row.children && scope.row.isEdit" icon="el-icon-circle-close" type="text"
                            @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">取消</el-button>
                            <el-button v-if="scope.row.children && scope.row.isEdit" icon="el-icon-circle-close" type="text"
                            @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">删除项目</el-button>

                            </template>
                        </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="附件上传" type="card">
                <div style="display: flex;justify-content:flex-end;">
                    <div></div>
                </div>
                <div
                v-loading="progrecessFileLoading"
                element-loading-text="请稍等，文件上传中"
                >
                <el-upload
                    drag
                    ref="upload"
                    action="/mes/attachment/upload"
                    :auto-upload="true"
                    :headers="headers"
                    :before-upload="submitUpload"
                    :on-success="uploadSuccess"
                    :data="paramData"
                    :with-credentials="true"
                    :show-file-list="false"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                    </div>
                </el-upload>
                </div>
                <el-table :data="processConfigFileTableData" height="260px">
                <el-table-column
                    prop="rawInsNo"
                    align="center"
                    width="120"
                    label="原材料检验编号"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="originalFileName"
                    align="center"
                    label="原文件名"
                    width="200"
                ></el-table-column>
                <el-table-column prop="fileName" align="center" label="文件后缀"></el-table-column>
                <el-table-column prop="createUser" align="center" label="上传人"></el-table-column>
                <el-table-column
                    prop="createTime"
                    align="center"
                    label="上传时间"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="updateUser" align="center" label="更新人">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    align="center"
                    label="更新时间"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.children" class="inline-input" style="width:90%;" v-model="scope.row.name"
                          placeholder="请输入项目名称"></el-input>
                    <el-button
                        @click="delProcessConfigFile(scope.row)"
                        type="text"
                        size="small"
                        :disabled="(resultVal!=null && resultVal!='')"
                        >删除</el-button
                    >
                    <el-button
                        @click="downloadProcessConfigFile(scope.row)"
                        type="text"
                        size="small"
                        >下载</el-button
                    >
                    </template>
                  </el-table-column>
                  <el-table-column prop="required" label="要求" width="260">
                    <template slot-scope="scope">
                      <div>
                      <el-input v-model="scope.row.required"
                        placeholder="请输入要求"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="note" label="检验描述" width="260" >
                    <template slot-scope="scope">
                      <div>
                        <el-input v-model="scope.row.note" placeholder="检验描述"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="testState" label="结论" min-width="150">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.result">
                            <el-option label="合格" value="合格"></el-option>
                            <el-option label="不合格" value="不合格"></el-option>
                        </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" style="background-color: white;" label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button icon="el-icon-circle-check" type="text" @click="savePackIns(scope.row,scope.$index)">保存</el-button>
                      <el-button v-if="scope.row.children" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">添加行</el-button>
                      <el-button v-if="!scope.row.children || scope.row.children.length==0" 
                      icon="el-icon-circle-close" type="text" 
                      @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">取消</el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
                </el-table>
            </el-col>
        </el-row>
            </el-tab-pane>
        </el-tabs>
      </div>
      <div class="packageInspect-result">
        <el-row>
@@ -132,21 +228,22 @@
        </el-row>
        <el-row style="width:100%">
          <el-col :span="24">
            <el-table border height="90" :data="conclusionTable" ref="conclusion" v-model="conclusion"
            <el-table class="l-mes" border height="90" :data="conclusionTable" ref="conclusion" v-model="conclusion"
            :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
            :cell-style="{textAlign:'center'}">
                <el-table-column prop="packageNo" label="包装编号"></el-table-column>
                <el-table-column prop="name" label="物料名称"></el-table-column>
                <el-table-column prop="userName" label="检验员"></el-table-column>
                <el-table-column prop="judgeState" label="检验结论">
                <el-table-column prop="packageNo" label="包装编号" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userName" label="检验员" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="result" label="检验结论">
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.testState == '1'">合格</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.testState == '0'">不合格</el-tag>
                    <el-select :disabled="resultVal!=null" style="width:100%" v-model="scope.row.result">
                        <el-option label="合格" value="合格"></el-option>
                        <el-option label="不合格" value="不合格"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template>
                        <el-button type="text" :disabled="resultVal!=null && dataForm.id!=null" @click="showDialog()" size="small">上报</el-button>
                        <el-button type="text" :disabled="resultVal!=null" @click="submitSave()" size="small">上报</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -155,18 +252,17 @@
      </div>
    </div>
    <el-dialog
      title="上报"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%" class="l-mes">
      <el-row>
        <el-col>
          <span>不合格数量:</span>
          <el-input type="number" v-model="unqualifiedNum" placeholder="请输入不合格数量"/>
        </el-col>
      </el-row>
      width="30%">
      <el-form :model="submitData" ref="form" label-width="100px" >
        <el-form-item label="请输入行号" prop="lineNo" :rules="{required:true,message:'行号不能为空',trigger:'blur'}">
          <el-input v-model="submitData.lineNo" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSave()">确 定</el-button>
        <el-button type="primary" @click="confirmSubmit(submitData,false)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
@@ -176,23 +272,43 @@
import {
  fetchListById,
  updatePackageInsProduct,
  updatePackageInspectById,
  getCustomer,
} from '@/api/quality/packageInspect'
import {
    getProcessConfigFiles,
    deleteProcessConfigFile,
    downloadProcessConfigFile
 } from '@/api/quality/attachment'
import {getAllTemplateByEnable} from '@/api/quality/packageInspectTemp'
import { getStore } from '@/util/store'
export default {
    computed:{},
    computed:{
    },
    components:{
    },
    data(){
        return{
            progrecessFileLoading: false,
            processConfigFileTableData: [],
            headers: {
              Authorization: 'Bearer ' + getStore({ name: 'access_token' })
            },
            paramData: {
              rawInsNo: '',
              lineNumber: '',
              type: 4
            },
            inspectMoulds: [],
            isShow: true,
            submitData: {
              id:null,
              result: null,
              lineNo: null,
            },
            dialogVisible: false,
            loading: false,
            unqualifiedNum: null,
            dialogVisible:false,
            resultVal: null,
            projectList: [],
            // 添加列
            empiricalValueAdd: 1,
            // 编辑时存储最长的列数字，做删除判断
            empiricalValueAddMaxNumber: 0,
            columnList: [],
            dataForm:{
                id: null,
                packInsNo: null,
@@ -215,9 +331,8 @@
            conclusion: null,
            conclusionTable: [{
              packageNo: '',
              name: '',
              userName: '',
              testState: ''
              result: ''
            }],
            dataRule: {},
        }
@@ -229,84 +344,191 @@
    },
    created(){
      this.dataForm.id = this.$route.query.id
      this.resultVal = this.$route.params.resultVal
      if(!this.resultVal){
        let val = sessionStorage.getItem("packIns-resultVal-"+this.dataForm.id)
        if(val){
          this.resultVal=val
        }
      }
      this.getAllInspect()
      this.init()

    },
    watch:{
      dialogVisible(newVal){
        if(newVal){
          this.unqualifiedNum = null
        if(!newVal){
          this.$refs.form.resetFields();
        }
      },
      }
    },
    methods:{
      checkTestState(){
          let resultVal = '1'
          this.list.forEach(item=>{
              if(item.children){
                item.children.forEach(ele=>{
                  if(ele.testState == 0){
                      resultVal = '0'
                  }
                })
              }
      delProcessConfigFile(row) {
          this.$confirm('是否删除该附件', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false
          }).then(function() {
            return deleteProcessConfigFile(row.id)
          }).then((data) => {
            this.getConfigFiles()
          })
          this.resultVal = resultVal
          this.conclusionTable[0].testState = resultVal
          sessionStorage.setItem("raw-resultVal-"+this.dataForm.id,resultVal)
      },
      showDialog(){
        let size = 0 //不合格项目数量
        this.list.forEach(item=>{
          if(item.children){
            let num = item.children.filter(e=>{
              return e.testState == 0
            }).length
            size+=num
          }
        })
        if (size > 0) {
          this.dialogVisible = true
        }else{
          this.submitSave()
      getConfigFiles() {
        const param = {
          no: this.dataForm.packInsNo,
          lineNumber: this.dataForm.id,
          type: 4
        }
        getProcessConfigFiles(param).then((res) => {
          this.processConfigFileTableData = res.data.data
        })
      },
      downloadProcessConfigFile(row) {
        downloadProcessConfigFile({
            bucket: row.bucketName,
            fileName: row.fileName,
            originalFileName: row.originalFileName
        })
      },
      submitUpload() {
        this.paramData.no = this.dataForm.packInsNo
        this.paramData.lineNumber = this.dataForm.id
        this.progrecessFileLoading = true
      },
      uploadSuccess() {
        this.progrecessFileLoading = false
        this.getConfigFiles()
      },
      tabsClick(tab,even){
        if(tab.index == 1){
            this.getConfigFiles();
        }
      },
      checkShowState(){
        let num = 0
        this.list.forEach(ele=>{
            if(ele.children){
                ele.children.forEach(c=>{
                    if(c.pid){
                        num+=1
                    }
                })
            }
        })
        this.isShow = num==0
      },
      getAllInspect(){
        getAllTemplateByEnable().then(res=>{
            if(res.status===200){
                this.inspectMoulds = res.data.data
            }
        }).catch(error=>{
            console.error(error)
        })
      },
      handleCommand(command) {
        this.inspectMoulds.forEach(ele=>{
            if(ele.father==command){
                this.init(ele.children)
            }
        })
      },
      changeResult(){
        let result = ''
        let data = this.list
        let passNum = 0
        let unPassNum = 0
        if(data){
          data.forEach(item=>{
            if(item.children){
              item.children.forEach(ele=>{
                if(ele.result=='不合格'){
                  unPassNum+=1
                }
                if(ele.result=='合格'){
                  passNum+=1
                }
              })
            }
          })
        }
        result = (passNum+unPassNum)>0 ? unPassNum>0 ? '不合格' :'合格' : ''
        this.conclusionTable[0].result = result
      },
      //上报
      submitSave(){
        let data = {
          id: this.dataForm.id,
          number: this.unqualifiedNum,
        const _than = this
        this.$confirm('上报前，请确认检验项目是否已保存!', '提示', {
          confirmButtonText: '确认上报',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _than.submitData.id = _than.dataForm.id,
          _than.submitData.result = _than.conclusionTable[0].result,
          getCustomer(_than.dataForm.id).then(res=>{
            if(res.status===200){
              _than.confirmSubmit(_than.submitData,true)
            }
          }).catch(error=>{
            _than.dialogVisible = true
          })

        }).catch(() => {})
      },
      confirmSubmit(data,isOtc){
        const _than = this
        let isSubmit = false
        if(isOtc){
          isSubmit = true
        }else{
          _than.$refs.form.validate(valid=>{
            if(valid){
              isSubmit = true
              _than.dialogVisible = false
            }
          })
        }
        updateRawInspectsById(data).then(res => {
          if(res.data.code == 0 && (res.data.data=='1'|| res.data.data=='0')){
            sessionStorage.setItem("raw-resultVal-"+this.dataForm.id,res.data.data)
            this.$message.success("上报成功");
          }else{
            this.$message.error("上报失败，",res.data.data);
          }
          this.dialogVisible = false
          this.checkTestState()
        });
        if(isSubmit){
          updatePackageInspectById(data).then(res => {
            if(res.data.code === 0){
              _than.resultVal = res.data.data
              sessionStorage.setItem("packIns-resultVal-"+_than.dataForm.id,res.data.data)
              _than.$message.success("上报成功");
            }else{
              _than.$message.error("上报失败",res.data.data);
            }
          })
        }
      },
      // 添加行
      clickAddLine(row) {
      clickAddLine() {
          this.list.push({
            pId: '',
            name: '',
            note: '',
            required: '',
            result: '',
            isIndex : true,
            parentIndex : this.list.length + 1,
            randomId: Math.random(),
            children: []
            isEdit: true,
            children: [{
              name: '',
              note: '',
              required: '',
              result: '',
              randomId: Math.random(),
              isEdit: true,
            }]
          })
      },
      //添加子级
      clickAddChildren(row,index){
        console.log(row,index);
        row.children.push({
            name: row.name,
            note: '',
            required: '',
            result: '',
            randomId: Math.random(),
            isEdit: true,
        })
      },
      // 删除行
@@ -325,80 +547,127 @@
          })
          this.list[i].children.splice(childrenIndex,1)
        }
        this.changeResult()
      },
      //保存检查项
      savePackIns(row,index){
        if(row){
          let obj = {
            name: row.anme,
            note: row.note,
            packageInspectId: row.packageInspectId,
            required: row.required,
            result: row.result,
          }
          updatePackageInsProduct(obj).then(res=>{
            console.log(res);
      savePackIns(){
        if(this.list.length==0){
          this.$message.error("检验项目为空!")
          return
        }else{
          let dataList = []
          this.list.forEach(item=>{
            if(item.children){
              item.children.forEach(ele=>{
                let obj = {
                  id: ele.pid || null,
                  name: item.name,
                  note: ele.note,
                  packageInspectId: this.dataForm.id,
                  required: ele.required,
                  result: ele.result,
                }
                dataList.push(obj)
              })
            }
          })
          updatePackageInsProduct(dataList).then(res=>{
            if(res.status===200){
              this.$message.success("保存成功")
              this.init()
            }
          }).catch(error=>{
            console.log(error);
            this.$message.error("保存失败")
          })
        }
      },
      init(){
        if(this.dataForm.id){
          fetchListById(this.dataForm.id).then(res=>{
      init(dataList){
        const _than = this
        if(_than.dataForm.id){
          fetchListById(_than.dataForm.id).then(res=>{
            let data = res.data.data
            this.dataForm.packInsNo = data.packInsNo
            this.dataForm.packageNo = data.packageNo
            this.dataForm.contractNo = data.contractNo
            this.dataForm.customerName = data.customerName
            this.dataForm.projectName = data.projectName
            this.dataForm.createTime = data.createTime
            this.dataForm.createUser = data.createUser
            this.list = data.packageInsProductS
            _than.dataForm.packInsNo = data.packInsNo
            _than.dataForm.packageNo = data.packageNo
            _than.dataForm.contractNo = data.contractNo
            _than.dataForm.customerName = data.customerName
            _than.dataForm.projectName = data.projectName
            _than.dataForm.createTime = data.createTime
            _than.dataForm.createUser = data.createUser
            _than.list = []
            let userNameList = []
            if(dataList){
                let tempList = []
                dataList.forEach((ele,index)=>{
                    let obj = {
                        randomId: Math.random(),
                        name: ele.inspectName,
                        isIndex: true,
                        parentIndex: index+1,
                        children: []
                    }
                    if(ele.children){
                        ele.children.forEach(e=>{
                            obj.children.push({
                                required: e.inspectRequired,
                                randomId: Math.random(),
                                isEdit: false,
                                note: '',
                                result: ''
                            })
                        })
                    }
                    tempList.push(obj)
                })
                _than.list = tempList
            }
            data.packageInsProductS.forEach((item,index) => {
              if (item.children) {
                    let ele = {
                      isIndex: true,
                      parentIndex: index+1,
                      isEdit: true,
                      randomId: Math.random(),
                      name: null,
                      children: []
                    }
                    ele.name = item.name
                    item.children.forEach(obj => {
                      if(obj.userName){
                        userNameList.push(obj.userName)
                      }
                      let o = {
                        name: item.name,
                        randomId: Math.random(),
                        isEdit: true,
                        required: obj.required,
                        pid: obj.pid,
                        note: obj.note?obj.note:'',
                        result: obj.presult
                      }
                      ele.children.push(o)
                    })
                    _than.list.push(ele)
                }
              })

              _than.conclusionTable = [{
                packageNo: data.packageNo,
                userName: Array.from(new Set(userNameList)).join(','),
                result: null
              }]
              _than.$nextTick(()=>{
                if(_than.list.length>0){
                    _than.changeResult()
                    _than.checkShowState()
                }
              })
          }).catch(error=>{
            this.$message.error("获取失败",error)
            _than.$message.error("获取失败",error)
          })
        }else{
          this.conclusionTable = []
            _than.conclusionTable = []
        }
      },
      changeState(row, index) {
          if (row.rpId != null && row.rpId != '') {
            let val = row.testValueList.join(",")
            if (val === undefined || val === '' || val === null) {
                return
            }
            let obj = {
              deviceId: row.deviceId,
              rpId: row.rpId,
              testValue: val,
              note: row.note
            }
            updateRawInsProduct(obj).then(res => {
                if (res.data.code == 0) {
                    this.$message.success("更新成功")
                } else {
                    this.$message.error("更新失败")
                }
                this.init()
            })
          }
      },
      save(){
        let data = this.dataForm
        this.list.forEach(item=>{
          item.children.forEach(c=>{
            c.testValue=c.testValueList.join(",")
          })
        })
        data.packageInsProductS = this.list
        addRawInspects(data).then(res=>{
            this.$message.success("保存成功")
            this.$router.go(-1)
        }).catch(error=>{
          this.$message.error(error)
        })
      },
    },
}
@@ -407,14 +676,14 @@
<style>
.packageInspect-detail {
  width: 100%;
  height: 490px;
  height: 520px;
  padding: 10px 20px;
  display: flex;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
  /* display: flex;
  flex-wrap: wrap; */
}

.packageInspect-result {