优化

src/view/yunyin/shengchanguanli/gongdanziliao.vue

@@ -8,7 +8,7 @@
             <el-form-item>
               <el-input v-model="searchInfo"  placeholder="搜索订单编号" style="width: 180px;" @keyup.enter="onSubmit()"></el-input>
               <el-button type="primary" icon="search" @click="onSubmit" title="搜索"  ></el-button>
-              <el-button type="primary" class="bt" icon="edit"  @click="jsfjClick">技术附件</el-button>
+              <el-button type="primary" class="bt" icon="edit"  @click="jsfjClick">附件上传</el-button>
               <el-button type="primary" icon="edit"   @click="addgd_onclick"   class="bt"   title="新增工单资料">新增订单资料</el-button>
               <el-button type="primary" icon="edit"   @click="addgdyj_onclick"   class="bt" title="新增颜色资料">新增颜色资料</el-button>
               <el-button type="primary" icon="edit"   @click="addgdgy_onclick"   class="bt" title="新增工序资料" >新增工序资料</el-button>
@@ -627,31 +627,29 @@
 
 
           <!-- http://20.0.16.128:8082/index.php/api/common/upload -->
-          <!-- <el-row class="form-row" style="width: 30%; margin-left: 200px; position: relative;">  
+          <el-row class="form-row" style="width: 50%; margin-left: 200px; position: relative;">  
             <el-upload  
             ref="uploadRef"  
             class="upload-demo"  
-            drag  
             list-type="picture"  
-            action=" http://20.0.16.128:8082/index.php/api/common/upload"  
+             action="https://jsonplaceholder.typicode.com/posts/"
             :on-preview="handlePreview"  
             :on-remove="handleRemove"  
-            :file-list="fileList"  
             :before-upload="beforeUpload"  
-            :auto-upload="false"  
+            :auto-upload="true"  
             :on-success="handleSuccess"  >  
             <i class="el-icon-upload"></i>
               <el-button size="small" type="primary">点击上传</el-button>  
               <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>  
             </el-upload>  
-          </el-row>  -->
+          </el-row> 
 
-          <el-row class="form-row" style="width: 30%; margin-left: 200px; position: relative;">  
+          <!-- <el-row class="form-row" style="width: 30%; margin-left: 200px; position: relative;">  
     <form ref="uploadForm" enctype="multipart/form-data">
       <input type="file" ref="imageInput" />
       <input type="button" value="上传" @click="uploadFile" />
     </form>
-  </el-row>
+  </el-row> -->
   
 
         </el-form>
@@ -1386,7 +1384,30 @@ const add_gdyjenterDialog =  async  () => {
 
     // 图片:previewFiles['value']['0']['name']
 	};
-
+  // try {  
+  //   // 检查 fileList 是否有文件需要上传  
+  //   if (fileList.length > 0) {  
+  //     // 手动触发上传  
+  //     await new Promise((resolve, reject) => {  
+  //       // 假设 submitUpload 返回一个 Promise，我们可以直接等待它  
+  //       // 如果 submitUpload 不返回 Promise，则需要对其进行修改以支持异步操作  
+  //       submitUpload().then(() => {  
+  //         // 上传成功后继续执行  
+  //         resolve();  
+  //       }).catch((error) => {  
+  //         // 上传失败，可以根据需要处理错误  
+  //         ElMessage.error('图片上传失败，请重试！');  
+  //         reject(error);  
+  //       });  
+  //     });  
+  //   } else {  
+  //     // 如果没有文件需要上传，则直接继续执行  
+  //     console.log('没有文件需要上传');  
+  //   }  
+  // } catch (error) {  
+  //   // 处理上传过程中的错误，可以阻止后续的新增逻辑  
+  //   return; // 或者根据需求进行其他错误处理  
+  // }   
 
   const printDetailAdds = await printDetailAdd(addyszltable);
   if (printDetailAdds.code === 0) {
@@ -1400,37 +1421,76 @@ const add_gdyjenterDialog =  async  () => {
           sizeDatas.splice(0,PrintListDatas.data.型号.length,...PrintListDatas.data.型号);//型号数据
           ystableData.splice(0,PrintListDatas.data.列表.length,...PrintListDatas.data.列表);//表格数据
         }
+  
 }  
 
-const imageInput = ref(null);  // 通过 ref 获取文件输入 DOM
-
-const uploadFile = () => {
-  console.log('按钮被点击');
+const fileList = reactive([]); // 存储已选择的文件列表  
+const uploadRef = ref(null); // 上传组件的引用  
   
-  const file = imageInput.value.files[0];  // 获取选中的文件
-  if (!file) {
-    console.error('未选择文件');
-    return;
-  }
-  let data  = new FormData()
-  data.append('image',file)
-  for (let [key, value] of data.entries()) { 
-  console.log(key, value); 
-}
-
-  fetch('http://20.0.16.128:8082/index.php/api/work_order/ImgUpload', {  // 使用 fetch 发送文件
-    method: 'POST',
-    body: data,  // 直接将文件对象作为请求体
+// 方法定义  
+const handlePreview = (file) => {  
+  console.log('预览文件:', file);  
+  // 预览逻辑  
+};  
+  
+const handleRemove = (file, fileList) => {  
+  console.log('移除文件:', file, '剩余文件:', fileList);  
+  // 由于 Element Plus/UI 会自动处理 fileList 的更新，这里通常不需要额外操作  
+};  
+  
+const beforeUpload = (file) => {  
+  const isImage = file.type.startsWith('image/');  
+  const isLt500K = file.size / 1024 / 1024 < 0.5;  
+  if (!isImage) {  
+    ElMessage.error('上传文件只能是图片格式!');  
+    return false;  
+  }  
+  if (!isLt500K) {  
+    ElMessage.error('上传图片大小不能超过 500KB!');  
+    return false;  
+  }  
+  return true; // 允许上传  
+};  
+  
+const handleSuccess = (response, file, fileList) => {  
+  console.log('上传成功:', response, file, fileList);  
+  // 上传成功后的逻辑  
+};  
+  
+// const submitUpload = () => {  
+//   uploadRef.value.submit(); // 手动触发上传  
+// };  
+// const imageInput = ref(null);  // 通过 ref 获取文件输入 DOM
 
-  })
-  .then(response => response.json())
-  .then(data => {
-    console.log('上传成功:', data);
-  })
-  .catch(error => {
-    console.error('上传失败:', error);
-  });
-};
+// const uploadFile = () => {
+//   console.log('按钮被点击');
+  
+//   const file = imageInput.value.files[0];  // 获取选中的文件
+//   if (!file) {
+//     console.error('未选择文件');
+//     return;
+//   }
+//   let data  = new FormData()
+//   data.append('image',file)
+//   for (let [key, value] of data.entries()) { 
+//   console.log(key, value); 
+// }
+
+//   fetch('http://20.0.16.128:8082/index.php/api/work_order/ImgUpload', {  // 使用 fetch 发送文件
+//     method: 'POST',
+//     body: data,  // 直接将文件对象作为请求体
+//     headers: {  
+//     'x-token': userStore.token  // 添加自定义的 x-token 请求头  
+//   },  
+//   })
+//   .then(response => response.json())
+//   .then(data => {
+//     console.log('上传成功:', data);
+//   })
+//   .catch(error => {
+//     console.error('上传失败:', error);
+//   });
+// };