测试问题优化

sgzb-ui/src/views/repairTest/repair/dialogThreeForm.vue

@@ -1,6 +1,13 @@
 <template>
-  <el-dialog v-dialogDrag v-loading.fullscreen.lock="fullscreenLoading" :before-close="cancel" :title="dialogTitle"
+  <el-dialog
-    :visible.sync="dialogShowFlag" append-to-body width="600px">
+    v-dialogDrag
+    v-loading.fullscreen.lock="fullscreenLoading"
+    :before-close="cancel"
+    :title="dialogTitle"
+    :visible.sync="dialogShowFlag"
+    append-to-body
+    width="600px"
+  >
     <div class="form_box_one" v-if="!isShow">
       <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" class="demo-dynamic" label-width="90px">
         <div class="bor_box">
@@ -8,8 +15,13 @@
           <div class="form_box_line"></div>
           <div class="form_box_item">
             <el-form-item label="报废原因：">
-              <el-input v-model="dynamicValidateForm.scrapReason" placeholder="请输入" size="small" maxlength="50"
+              <el-input
-                style="width: 350px"></el-input>
+                v-model="dynamicValidateForm.scrapReason"
+                placeholder="请输入"
+                size="small"
+                maxlength="50"
+                style="width: 350px"
+              ></el-input>
             </el-form-item>
             <el-form-item label="损坏原因：">
               <el-radio-group style="width: 350px" v-model="dynamicValidateForm.scrapType">
@@ -27,10 +39,25 @@
                 :isShowTip="isShowTip"
                 @fileListChange="fileListChange"
               ></uploadImage> -->
-              <upload style="width: 350px" :file-list="fileList" :action-url="actionUrl" :limit="3" :multiple="true"
+              <upload
-                @remove="handleRemove" @preview="handlePreview" @before-remove="beforeRemove"
+                style="width: 350px"
-                @success="handleSuccess">
+                :file-list="fileList"
-                <el-button size="small" type="primary">点击上传</el-button>
+                :action-url="actionUrl"
+                :limit="3"
+                :multiple="true"
+                @remove="handleRemove"
+                @preview="handlePreview"
+                @before-remove="beforeRemove"
+                @success="handleSuccess"
+              >
+                <template>
+                  <el-row class="upload-tip">
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-row>
+                  <el-row class="upload-tip">
+                    <span class="tip-text">请上传jpg、jpeg、png格式的图片，单张图片大小不可超过5M，最多可上传3张</span>
+                  </el-row>
+                </template>
               </upload>
             </el-form-item>
           </div>
@@ -46,17 +73,31 @@
         <p class="form_box_title">数量管理设备</p>
         <div class="form_box_line"></div>
         <div class="form_box_item">
-          <el-form-item label="报废数量：" prop="scrapNum" :rules="{
+          <el-form-item
-            required: true,
+            label="报废数量："
-            validator: numberIntegerValidator,
+            prop="scrapNum"
-            trigger: 'blur',
+            :rules="{
-          }">
+              required: true,
-            <el-input v-model="dynamicValidateFormTwo.scrapNum" placeholder="请输入" size="small" maxlength="10"
+              validator: numberIntegerValidator,
-              style="width: 350px"></el-input>
+              trigger: 'blur',
+            }"
+          >
+            <el-input
+              v-model="dynamicValidateFormTwo.scrapNum"
+              placeholder="请输入"
+              size="small"
+              maxlength="10"
+              style="width: 350px"
+            ></el-input>
           </el-form-item>
           <el-form-item label="报废原因：">
-            <el-input v-model="dynamicValidateFormTwo.scrapReason" placeholder="请输入" size="small" maxlength="50"
+            <el-input
-              style="width: 350px"></el-input>
+              v-model="dynamicValidateFormTwo.scrapReason"
+              placeholder="请输入"
+              size="small"
+              maxlength="50"
+              style="width: 350px"
+            ></el-input>
           </el-form-item>
           <el-form-item label="损坏原因：">
             <el-radio-group style="width: 350px" v-model="dynamicValidateFormTwo.scrapType">
@@ -75,10 +116,25 @@
               :isShowTip="isShowTip"
               @fileListChange="fileListChange"
             ></uploadImage> -->
-            <upload style="width: 350px" :file-list="fileList" :action-url="actionUrl" :limit="3" :multiple="true"
+            <upload
-              @remove="handleRemove" @preview="handlePreview" @before-remove="beforeRemove"
+              style="width: 350px"
-              @success="handleSuccess">
+              :file-list="fileList"
-              <el-button size="small" type="primary">点击上传</el-button>
+              :action-url="actionUrl"
+              :limit="3"
+              :multiple="true"
+              @remove="handleRemove"
+              @preview="handlePreview"
+              @before-remove="beforeRemove"
+              @success="handleSuccess"
+            >
+              <template>
+                <el-row class="upload-tip">
+                  <el-button size="small" type="primary">点击上传</el-button>
+                </el-row>
+                <el-row class="upload-tip">
+                  <span class="tip-text">请上传jpg、jpeg、png格式的图片，单张图片大小不可超过5M，最多可上传3张</span>
+                </el-row>
+              </template>
             </upload>
           </el-form-item>
         </div>
@@ -414,4 +470,14 @@ export default {
   justify-content: flex-end;
   align-items: center;
 }
+
+.upload-tip {
+  text-align: left;
+
+  .tip-text {
+    font-size: 13px;
+    color: red;
+    letter-spacing: 1px;
+  }
+}
 </style>

sgzb-ui/src/views/repairTest/repair/upload.vue

@@ -1,7 +1,19 @@
 <template>
-  <el-upload class="upload-demo" :action="actionUrl" :on-preview="handlePreview" :on-remove="handleRemove"
+  <el-upload
-    :before-remove="beforeRemove" :multiple="multiple" :limit="limit" :on-exceed="handleExceed" :file-list="fileList"
+    class="upload-demo"
-    :headers="headers" :on-success="handleSuccess" :data="uploadData" :before-upload="beforeUpload">
+    :action="actionUrl"
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+    :before-remove="beforeRemove"
+    :multiple="multiple"
+    :limit="limit"
+    :on-exceed="handleExceed"
+    :file-list="fileList"
+    :headers="headers"
+    :on-success="handleSuccess"
+    :data="uploadData"
+    :before-upload="beforeUpload"
+  >
     <slot name="default">
       <el-button size="small" type="primary">点击上传</el-button>
     </slot>
@@ -65,21 +77,21 @@ export default {
       this.$emit('exceed', files, fileList)
     },
     beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name} ？`)
+      // return this.$confirm(`确定移除 ${file.name} ？`)
-        .then(() => {
+      //   .then(() => {
-          this.$emit('before-remove', file, fileList)
+      //     this.$emit('before-remove', file, fileList)
-        })
+      //   })
-        .catch(() => {})
+      //   .catch(() => {})
     },
     beforeUpload(file) {
       console.log('file', file)
       const isJPGorPNG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg'
-      const isLt5M = file.size / 1024 / 1024 < 2 // 小于2MB
+      const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
       if (!isJPGorPNG) {
-        this.$message.error('只能上传 JPG/PNG/jpeg 格式的图片')
+        this.$message.error('只能上传 jpg、jpeg、png  格式的图片')
       }
       if (!isLt5M) {
-        this.$message.error('上传图片大小不能超过 2MB')
+        this.$message.error('上传图片大小不能超过 5MB')
       }
       return isJPGorPNG && isLt5M
     },