1.工艺路线：esop基础。2.上传组件。

.env.development

@@ -7,12 +7,12 @@ VITE_APP_PORT = 3005
 # 代理前缀
 VITE_APP_BASE_API = '/dev-api'
 
-# 线上接口地址
-# VITE_APP_API_URL = http://vapi.youlai.tech
+# 上传文件接口地址
+VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 开发接口地址
 # VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://192.168.101.188:8078'
-# VITE_APP_API_URL = 'http://192.168.101.30:8078'  //lup
+#VITE_APP_API_URL = 'http://192.168.101.188:8078'
+ VITE_APP_API_URL = 'http://192.168.101.30:8078'  #lup
 #VITE_APP_API_URL = 'http://192.168.101.64:8078'  #hetao
 
 # 是否启用 Mock 服务

.env.production

@@ -1,6 +1,8 @@
 ## 生产环境
 NODE_ENV='production'
 
+# 上传文件接口地址
+VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 代理前缀
 VITE_APP_BASE_API = '/mes-server'
 

src/api/file/index.ts

@@ -11,7 +11,7 @@ export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
   const formData = new FormData();
   formData.append("file", file);
   return request({
-    url: "/api/v1/files",
+    url: "/api/v1/base/upload",
     method: "post",
     data: formData,
     headers: {

src/components/Upload/SingleUpload.vue

@@ -14,8 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import { UploadRawFile, UploadRequestOptions } from "element-plus";
-import { uploadFileApi } from "@/api/file";
+import { uploadFileApi, deleteFileApi } from "@/api/file";
+import {
+  UploadRawFile,
+  UploadRequestOptions,
+  UploadUserFile,
+  UploadFile,
+  UploadProps,
+} from "element-plus";
 
 const props = defineProps({
   modelValue: {
@@ -33,8 +39,8 @@ const imgUrl = useVModel(props, "modelValue", emit);
  * @param options
  */
 async function uploadFile(options: UploadRequestOptions): Promise<any> {
-  const { data: fileInfo } = await uploadFileApi(options.file);
-  imgUrl.value = fileInfo.url;
+  const res = await uploadFileApi(options.file);
+  imgUrl.value = import.meta.env.VITE_APP_UPLOAD_URL + res.data;
 }
 
 /**
@@ -53,6 +59,7 @@ function handleBeforeUpload(file: UploadRawFile) {
 .single-uploader {
   overflow: hidden;
   cursor: pointer;
+  display: inline-block;
   border: 1px var(--el-border-color) solid;
   border-radius: 6px;
 

src/views/base/craftManagement/route/components/configs.ts

@@ -164,6 +164,21 @@ export const getTableConfig = (id: string) => {
         },
       ],
     },
+    ESOP: {
+      url: "/api/v1/op/esop",
+      column: [
+        {
+          label: "工序id",
+          prop: "operationId",
+          display: false,
+          hide: true,
+          value: id,
+        },
+        { label: "内容", prop: "content" },
+        { label: "标题", prop: "title" },
+        { label: "文件", prop: "imgUrl" },
+      ],
+    },
   };
 };
 

src/views/demo/hooksDemo.vue

@@ -27,6 +27,10 @@
       @current-change="dataList"
       @selection-change="selectionChange"
     >
+      <template #fileUrl-form="scope">
+        <single-upload v-model="form.fileUrl" />
+        {{ form }}
+      </template>
       <template #menu-left="{ size }">
         <el-button
           :disabled="toDeleteIds.length < 1"
@@ -76,6 +80,7 @@ import { useCrud } from "@/hooks/userCrud";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
 import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
+import SingleUpload from "@/components/Upload/SingleUpload.vue";
 
 // 数据字典相关
 const { dicts } = useDictionaryStoreHook();
@@ -196,6 +201,12 @@ option.value = Object.assign(option.value, {
       ],
       value: 0,
     },
+    {
+      label: "附件上传",
+      prop: "fileUrl",
+      span: 24,
+      slot: true,
+    },
   ],
 });
 </script>

src/views/demo/upload.vue

@@ -3,9 +3,7 @@
 import SingleUpload from "@/components/Upload/SingleUpload.vue";
 import MultiUpload from "@/components/Upload/MultiUpload.vue";
 
-const singlePicUrl = ref(
-  "https://oss.youlai.tech/youlai-boot/2023/05/20/2b6d8b49fa1047348a0a41cef5aaf69e.gif"
-);
+const singlePicUrl = ref("https://s2.loli.net/2023/05/24/ZPiGbcpR91WqInB.jpg");
 // 这里放外链图片，防止被删
 const multiPicUrls = ref([
   "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
@@ -30,7 +28,7 @@ const multiPicUrls = ref([
         <single-upload v-model="singlePicUrl" />
       </el-form-item>
       <el-form-item label="多图上传">
-        <multi-upload v-model="multiPicUrls" />
+        <multi-upload :limit="1" v-model="multiPicUrls" />
       </el-form-item>
     </el-form>
   </div>