点击蒙版关闭预览图片

src/icons/svg/shangchuan.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12C22 11.4477 21.5523 11 21 11C20.4477 11 20 11.4477 20 12H22ZM12 4C12.5523 4 13 3.55229 13 3C13 2.44771 12.5523 2 12 2V4ZM19.5 20H4.5V22H19.5V20ZM4 19.5V4.5H2V19.5H4ZM20 12V19.5H22V12H20ZM4.5 4H12V2H4.5V4ZM4.5 20C4.22386 20 4 19.7761 4 19.5H2C2 20.8807 3.11928 22 4.5 22V20ZM19.5 22C20.8807 22 22 20.8807 22 19.5H20C20 19.7761 19.7761 20 19.5 20V22ZM4 4.5C4 4.22386 4.22385 4 4.5 4V2C3.11929 2 2 3.11928 2 4.5H4Z" fill="#0057FF"/>
+<path d="M3 17.5L8.34655 12.599C8.71945 12.2572 9.28895 12.2477 9.67305 12.5769L16 18" stroke="#0057FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 15.4999L16.3867 13.1132C16.7386 12.7613 17.2957 12.7217 17.6938 13.0203L21 15.4999" stroke="#0057FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 9V3" stroke="#0057FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 5.5L18.5 3L21 5.5" stroke="#0057FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/utils/commonField.js

+/** 公共字段*/
+const commonField = {
+  typeParent: 'text',
+  typePrimary: 'primary',
+  typeSuccess: 'success',
+  typeWarning: 'warning',
+  queryClass: 'queryBtn', // 查询按钮class
+  resetClass: 'resetBtn', // 重置按钮class
+  addClass: 'addBtn', // 新增按钮class
+  updateClass: 'updateBtn', // 修改按钮class
+  delClass: 'delBtn', // 删除按钮class
+  importClass: 'importBtn', // 导入按钮class
+  exportClass: 'exportBtn', // 导出按钮class
+  addClassText: 'addBtnText', // 文字类型的新增按钮class
+  resetPasClass: 'resetBtnText', // 文字类型的重置按钮class
+  queryName: '查询',
+  resetName: '重置',
+  addName: '新增',
+  updateName: '修改',
+  deleteName: '删除',
+  dataPower: '数据权限',
+  resetPassword: '重置密码',
+  exportName: '导出',
+  importName: '导入',
+  cleanName: '清空',
+  viewName: '查看',
+  size: 'mini',
+  smallSize: 'small',
+  queryIcon: 'el-icon-search',
+  resetIcon: 'el-icon-refresh',
+  addIcon: 'el-icon-plus',
+  delIcon: 'el-icon-delete',
+  importIcon: 'el-icon-upload',
+  exportIcon: 'el-icon-download',
+  deleteTypePrimary: 'danger',
+  deleteSize: 'small',
+  deleteDisabled: 'ids.length === 0',
+  cleanTypePrimary: 'danger',
+  cleanSize: 'small',
+  miniSize: 'mini',
+  exportTypePrimary: 'success',
+  exportSize: 'small',
+  typeText: 'text'
+}
+
+export default commonField

src/views/check/oneTbale.vue

+<template>
+  <div class="oneCheckTbale">
+    <div class="search" style="border-bottom: 14px solid #f4f4f4">
+      <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+        <el-form-item label="厂家" prop="value1">
+          <el-input
+            v-model="queryParams.value1"
+            placeholder="请输入厂家"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <!--          //查询按钮-->
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQuery"
+          >{{ commonField.queryName }}</el-button>
+          <!--          //重置按钮-->
+          <el-button
+            :class="commonField.resetClass"
+            :icon="commonField.resetIcon"
+            :size="commonField.smallSize"
+            @click="resetQuery"
+          >{{ commonField.resetName }}</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table" style="padding:5px 10px">
+      <div class="tableTitle">检查表列表</div>
+      <el-table v-loading="loading" border :data="roleList">
+        <el-table-column type="index" label="序号" width="90" />
+        <el-table-column label="名称" prop="value1" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.value1 || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="权限字符" prop="value2">
+          <template slot-scope="scope">
+            {{ scope.row.value2 || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="显示顺序" prop="value3">
+          <template slot-scope="scope">
+            {{ scope.row.value3 || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" :show-overflow-tooltip="true" align="center" prop="createTime">
+          <template slot-scope="scope">
+            <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
+          <template slot-scope="scope">
+            <!--              审核-->
+            <el-button
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleUpdate(scope.row)"
+            >审核</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import commonField from '@/utils/commonField'
+
+export default {
+  name: 'OneTbale',
+  data() {
+    return {
+      loading: false,
+      roleList: [
+        {
+          value1: '1',
+          value2: '2',
+          value3: '3',
+          createDate: '2023-01-23 09:33'
+        }
+      ],
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 10,
+        value1: '',
+        value2: '',
+        value3: ''
+      }
+    }
+  },
+  computed: {
+    commonField() {
+      return commonField
+    }
+  },
+  methods: {
+    handleUpdate() {
+      this.$router.push({
+        path: '/checkList'
+      })
+    },
+    handleQuery() {
+
+    },
+    resetQuery() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.oneCheckTbale{
+   .tableTitle{
+     margin: 20px 0;
+     color: #333333;
+     font-size: 14px;
+     font-family: Microsoft YaHei, Microsoft YaHei-700;
+     font-weight: 700;
+     text-align: LEFT;
+   }
+}
+</style>

src/views/checkList.vue

@@ -14,7 +14,8 @@
           <div class="formLabel">
             <div class="left">
               <el-form-item label="厂家:">
-                <el-input v-model="oneForm.manufacturer" class="normalInput" />
+                <el-input v-model="oneForm.manufacturer" class="scanInput" />
+                <el-button class="scanCode" type="primary" @click="scanCodes">扫码</el-button>
               </el-form-item>
               <el-form-item label="ODE:">
                 <el-input v-model="oneForm.ODE" class="normalInput" />
@@ -52,6 +53,9 @@
         </el-form>
       </div>
       <hr class="oneHr">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="标签一" name="first">
+          <div class="OneTable">
             <div class="twoCheck">
               <!--   检查记录1    -->
               <div class="recordOne">
@@ -106,12 +110,86 @@
                 <div class="standardTest">合格</div>
               </div>
             </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="标签二" name="second">
+          <div class="twoTable">
+            <el-form :model="twoForm">
+              <div class="oneRegion">
+                <div class="leftRegion">
+                  <el-form-item label="XX:">
+                    <el-input v-model="twoForm.oneValue" />
+                  </el-form-item>
+                  <el-form-item label="XXX:">
+                    <el-input v-model="twoForm.oneValue" />
+                  </el-form-item>
+                  <el-form-item label="XXXX:">
+                    <el-input v-model="twoForm.oneValue" />
+                  </el-form-item>
+                </div>
+                <div class="rightRegion">
+                  <el-form-item label="XX:">
+                    <el-input v-model="twoForm.oneValue" class="tableInput" />
+                  </el-form-item>
+                  <el-form-item label="XXX:">
+                    <el-input v-model="twoForm.oneValue" class="tableInput" />
+                  </el-form-item>
+                  <el-form-item label="XXXX:">
+                    <el-input v-model="twoForm.oneValue" class="tableInput" />
+                  </el-form-item>
+                  <!--                <el-input class="tableInput" />-->
+                </div>
+              </div>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
       <hr class="twoHr">
       <!--      附件-->
       <div class="attachments">
         <div class="uploadLabel">附件:</div>
         <div class="uploadImg">
           <div class="peviewImg">
+            <div id="imageOne" class="OneImg">
+              <el-image
+                class="OneElImg"
+                :src="url"
+                fit="full"
+                :preview-src-list="srcList"
+                @click.stop="handleClickStop('imageOne')"
+              />
+            </div>
+            <el-upload
+              class="oneUploadButton"
+              :action="upload.url + '?updateSupport=' + upload.updateSupport"
+              list-type="picture-card"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemoveImg"
+              :on-success="uploadSuccess"
+              :file-list="imgFileList"
+            >
+              <div class="uploadIcon">
+                <i class="el-icon-plus" />
+                <div class="imgText">点击下载</div>
+              </div>
+            </el-upload>
+            <!--            <div id="imageTwo" class="twoImg">-->
+            <!--              <el-image-->
+            <!--                class="twoElImg"-->
+            <!--                :src="url1"-->
+            <!--                fit="full"-->
+            <!--                :preview-src-list="srcList1"-->
+            <!--                @click.stop="handleClickStop('imageTwo')"-->
+            <!--              />-->
+            <!--            </div>-->
+            <!--            <div class="uploadButton">-->
+            <!--              <div class="uploadContent">-->
+            <!--                <div class="imgContainer">-->
+            <!--                  <img class="img" src="@/assets/image/shangchuan.png">-->
+            <!--                </div>-->
+            <!--                <div class="imgText">点击下载</div>-->
+            <!--              </div>-->
+            <!--            </div>-->
             <!--            -->
             <!--            <div v-if="showImgViewer" id="imageOne" class="OneImg">-->
             <!--              <el-image-->
@@ -132,32 +210,32 @@
             <!--              :file-list="imgFileList"-->
             <!--            >-->
             <!--            </el-upload>-->
-            <div id="imageOne" class="OneImg">
-              <el-image
-                class="OneElImg"
-                :src="url"
-                fit="full"
-                :preview-src-list="srcList"
-                @click.stop="handleClickStop('imageOne')"
-              />
-            </div>
-            <div id="imageTwo" class="twoImg">
-              <el-image
-                class="twoElImg"
-                :src="url1"
-                fit="full"
-                :preview-src-list="srcList1"
-                @click.stop="handleClickStop('imageTwo')"
-              />
-            </div>
-            <div class="uploadButton">
-              <div class="uploadContent">
-                <div class="imgContainer">
-                  <img class="img" src="@/assets/image/shangchuan.png">
-                </div>
-                <div class="imgText">点击下载</div>
-              </div>
-            </div>
+            <!--            <div id="imageOne" class="OneImg">-->
+            <!--              <el-image-->
+            <!--                class="OneElImg"-->
+            <!--                :src="url"-->
+            <!--                fit="full"-->
+            <!--                :preview-src-list="srcList"-->
+            <!--                @click.stop="handleClickStop('imageOne')"-->
+            <!--              />-->
+            <!--            </div>-->
+            <!--            <div id="imageTwo" class="twoImg">-->
+            <!--              <el-image-->
+            <!--                class="twoElImg"-->
+            <!--                :src="url1"-->
+            <!--                fit="full"-->
+            <!--                :preview-src-list="srcList1"-->
+            <!--                @click.stop="handleClickStop('imageTwo')"-->
+            <!--              />-->
+            <!--            </div>-->
+            <!--            <div class="uploadButton">-->
+            <!--              <div class="uploadContent">-->
+            <!--                <div class="imgContainer">-->
+            <!--                  <img class="img" src="@/assets/image/shangchuan.png">-->
+            <!--                </div>-->
+            <!--                <div class="imgText">点击下载</div>-->
+            <!--              </div>-->
+            <!--            </div>-->
           </div>
         </div>
       </div>
@@ -194,6 +272,7 @@ export default {
   name: 'CheckList',
   data() {
     return {
+      activeName: 'first',
       initialImgPreviewIndex: 0, // 预览打开看到的图片下标
       showImgViewer: false,
       imgFileList: [],
@@ -237,6 +316,15 @@ export default {
         project: 'XXX',
         result: '0.175'
       },
+      // 表达二
+      twoForm: {
+        oneValue: 'XX',
+        twoValue: 'XX',
+        threeValue: 'XX',
+        fourValue: 'XX',
+        fiveValue: 'XX',
+        sixValue: 'XX'
+      },
       // 检查记录1
       recode1: [
         {
@@ -336,6 +424,53 @@ export default {
     }
   },
   methods: {
+    /**
+     * @description: 处理从二维码得到的数据
+     * @author: gaoyu
+     * @param:
+     * @return:
+     **/
+    processCode(list) {
+      console.log('list', list.length)
+      switch (list.length) {
+        case 1:
+          this.oneForm.manufacturer = list[0]
+          break
+        case 2:
+          this.oneForm.manufacturer = list[0]
+          this.oneForm.ODE = list[1]
+          break
+        case 3:
+          this.oneForm.manufacturer = list[0]
+          this.oneForm.ODE = list[1]
+          this.oneForm.LOT = list[2]
+          break
+        case 4:
+          this.oneForm.manufacturer = list[0]
+          this.oneForm.ODE = list[1]
+          this.oneForm.LOT = list[2]
+          this.oneForm.quantity = list[3]
+          break
+      }
+    },
+    /**
+     * @description: 扫码 将获取
+     * @author: gaoyu
+     * @param:
+     * @return:
+     **/
+    scanCodes() {
+      var s = 'a,b,c,d'
+      let list = []
+      list = s.split(',')
+      if (list && list.length > 0) {
+        console.log('list', list)
+        this.processCode(list)
+      }
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
     handlePictureCardPreview(file) {
       const index = this.imagePreviewUrls.indexOf(file.url)
       if (index >= 0) {
@@ -411,7 +546,14 @@ export default {
   .el-dialog__wrapper {
     background-color: rgba(0, 0, 0, 0.5);
   }
-
+  ::v-deep .el-tabs__nav-wrap::after{
+    background-color: unset;
+  }
+  ::v-deep .el-tabs__header{
+    width: 80% !important;
+    margin-left: 13% !important;
+    margin-bottom: 20px !important;
+  }
   ::v-deep .el-form-item__content {
     margin-left: 45px !important;
   }
@@ -426,7 +568,7 @@ export default {
 
   ::v-deep .el-upload-list {
     display: flex;
-    margin-top: -39px;
+    margin-top: 1px;
   }
 
   ::v-deep .el-upload-list--picture .el-upload-list__item {
@@ -439,7 +581,23 @@ export default {
       width: 70%;
       //width: 176px;
     }
-
+    .tableInput{
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+    }
+    .scanInput{
+      width: 67%;
+      height: 32px;
+      background: #ffffff;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+    }
+    .scanCode {
+      margin-left: 1%;
+      width: 30%;
+      background: #0057ff;
+      border-radius: 4px;
+    }
     .normalInput {
       //width: 496px;
       height: 32px;
@@ -449,6 +607,7 @@ export default {
     }
 
     .oneCheck {
+      //margin-left: 10%;
       .oneCheckHeader {
         padding-top: 15.15px;
         //margin-left: 350.09px;
@@ -457,13 +616,17 @@ export default {
         justify-content: center;
         align-items: center;
 
+        .scanCode{
+          width:42px;
+          height: 22px;
+        }
+
         .oneHeader {
-          width: 120px;
           height: 22px;
           font-size: 20px;
           font-family: Microsoft YaHei, Microsoft YaHei-700;
           font-weight: 700;
-          text-align: LEFT;
+          text-align: center;
           color: #606266;
           line-height: 22px;
         }
@@ -562,9 +725,9 @@ export default {
     .oneHr {
       border: 2px dashed #eeeeee;
       margin-top: 12px;
-      margin-bottom: 40px;
+      margin-top: 12px;
     }
-
+    .OneTable{
       .twoCheck {
         display: flex;
         width: 100%;
@@ -760,6 +923,59 @@ export default {
           }
         }
       }
+    }
+    .twoTable{
+      margin-left: 10%;
+      width: 77%;
+      .oneRegion{
+        display: flex;
+        justify-content: space-between;
+        .leftRegion{
+          width: 47%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+        .rightRegion{
+          width: 47%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+      }
+      .twoRegion{
+        display: flex;
+        justify-content: space-between;
+        .leftRegion{
+          width: 44.5%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+        .rightRegion{
+          width: 44.5%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+      }
+      .threeRegion{
+        display: flex;
+        justify-content: space-between;
+        .leftRegion{
+          width: 44.5%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+        .rightRegion{
+          width: 44.5%;
+          //height: 100%;
+          //border: 1px solid #d9d9d9;
+          //border-radius: 4px;
+        }
+      }
+    }
 
     .twoHr {
       border: 2px dashed #eeeeee;
@@ -794,6 +1010,32 @@ export default {
               border-radius: 4px;
             }
           }
+          .oneUploadButton{
+             ::v-deep .el-upload--picture-card{
+               margin-left: 16px;
+               width: 112px;
+               line-height: unset;
+               height: 112px;
+               background: #ffffff;
+               border: 1px dashed #d9d9d9;
+               border-radius: 4px;
+               justify-content: center;
+               align-items: center;
+               display: flex;
+             }
+            .uploadIcon{
+              .imgText{
+                margin-top: 8px;
+                width: 72px;
+                height: 16px;
+                font-size: 12px;
+                font-family: Microsoft YaHei, Microsoft YaHei-400;
+                font-weight: 400;
+                color: #0057ff;
+                line-height: 14px;
+              }
+            }
+          }
         }
       }