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

@@ -1,13 +1,6 @@
 <template>
-  <el-dialog
+  <el-dialog v-dialogDrag v-loading.fullscreen.lock="fullscreenLoading" :before-close="cancel" :title="dialogTitle"
-    v-dialogDrag
+    :visible.sync="dialogShowFlag" append-to-body width="600px">
-    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">
@@ -15,13 +8,8 @@
           <div class="form_box_line"></div>
           <div class="form_box_item">
             <el-form-item label="报废原因：">
-              <el-input
+              <el-input v-model="dynamicValidateForm.scrapReason" placeholder="请输入" size="small" maxlength="50"
-                v-model="dynamicValidateForm.scrapReason"
+                style="width: 350px"></el-input>
-                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">
@@ -39,25 +27,10 @@
                 :isShowTip="isShowTip"
                 @fileListChange="fileListChange"
               ></uploadImage> -->
-              <upload
+              <upload style="width: 350px" :file-list="fileList" :action-url="actionUrl" :limit="3" :multiple="true"
-                style="width: 350px"
+                @remove="handleRemove" @preview="handlePreview" @before-remove="beforeRemove"
-                :file-list="fileList"
+                @success="handleSuccess">
-                :action-url="actionUrl"
+                <el-button size="small" type="primary">点击上传</el-button>
-                :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>
@@ -73,31 +46,17 @@
         <p class="form_box_title">数量管理设备</p>
         <div class="form_box_line"></div>
         <div class="form_box_item">
-          <el-form-item
+          <el-form-item label="报废数量：" prop="scrapNum" :rules="{
-            label="报废数量："
+            required: true,
-            prop="scrapNum"
+            validator: numberIntegerValidator,
-            :rules="{
+            trigger: 'blur',
-              required: true,
+          }">
-              validator: numberIntegerValidator,
+            <el-input v-model="dynamicValidateFormTwo.scrapNum" placeholder="请输入" size="small" maxlength="10"
-              trigger: 'blur',
+              style="width: 350px"></el-input>
-            }"
-          >
-            <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
+            <el-input v-model="dynamicValidateFormTwo.scrapReason" placeholder="请输入" size="small" maxlength="50"
-              v-model="dynamicValidateFormTwo.scrapReason"
+              style="width: 350px"></el-input>
-              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">
@@ -116,25 +75,10 @@
               :isShowTip="isShowTip"
               @fileListChange="fileListChange"
             ></uploadImage> -->
-            <upload
+            <upload style="width: 350px" :file-list="fileList" :action-url="actionUrl" :limit="3" :multiple="true"
-              style="width: 350px"
+              @remove="handleRemove" @preview="handlePreview" @before-remove="beforeRemove"
-              :file-list="fileList"
+              @success="handleSuccess">
-              :action-url="actionUrl"
+              <el-button size="small" type="primary">点击上传</el-button>
-              :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>
@@ -470,14 +414,4 @@ 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,19 +1,7 @@
 <template>
-  <el-upload
+  <el-upload class="upload-demo" :action="actionUrl" :on-preview="handlePreview" :on-remove="handleRemove"
-    class="upload-demo"
+    :before-remove="beforeRemove" :multiple="multiple" :limit="limit" :on-exceed="handleExceed" :file-list="fileList"
-    :action="actionUrl"
+    :headers="headers" :on-success="handleSuccess" :data="uploadData" :before-upload="beforeUpload">
-    :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>
@@ -77,21 +65,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 < 5 // 小于 5MB
+      const isLt5M = file.size / 1024 / 1024 < 2 // 小于2MB
       if (!isJPGorPNG) {
-        this.$message.error('只能上传 jpg、jpeg、png  格式的图片')
+        this.$message.error('只能上传 JPG/PNG/jpeg 格式的图片')
       }
       if (!isLt5M) {
-        this.$message.error('上传图片大小不能超过 5MB')
+        this.$message.error('上传图片大小不能超过 2MB')
       }
       return isJPGorPNG && isLt5M
     },