流程附件功能

src/views/index.vue

@@ -90,7 +90,7 @@
 				</ul>
 			</div>
 		</div>
-		<byTableDemo></byTableDemo>
+		<!-- <byTableDemo></byTableDemo> -->
 		<!-- <el-input type="number" v-model='aaa' v-mousewheel></el-input> -->
 		<!-- 111112132131211 -->
 	</div>

src/views/process/processApproval/index.vue

@@ -41,6 +41,18 @@
           <el-form-item prop="remark" label-width="0px" label="">
             <el-input type="textarea" placeholder="请输入" v-model="flowForm.remark"> </el-input>
           </el-form-item>
+          <el-form-item prop="remark" label-width="80px" label="附件上传">
+            <el-upload
+              v-model:fileList="flowForm.fileList"
+              action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+              :data="uploadData"
+              multiple
+              :before-upload="uploadFile"
+              :on-success="handleSuccess"
+              :on-preview="onPreviewFile">
+              <el-button>选择</el-button>
+            </el-upload>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" v-if="approvalRecordData.buttonInfoList.length == 0" @click="handleSubmit" :loading="btnLoading">提交</el-button>
             <el-button type="primary" v-else v-for="i in approvalRecordData.buttonInfoList" :key="i.type" :loading="btnLoading" @click="handleSubmit(i.type)">{{ i.name }}</el-button>
@@ -169,7 +181,10 @@ const flowForm = reactive({
   handleUserId: "",
   remark: "",
   data: {},
+  fileList:[],
 });
+
+const uploadData = ref({});
 const flowRules = reactive({
   // remark: [{ required: true, message: "请输入处理意见", trigger: "blur" }],
 });
@@ -196,6 +211,24 @@ const handleResult = (res) => {
     nextHandleUser.value = res.userList;
   }
 };
+
+
+const uploadFile = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadData.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  file.uploadState = true;
+  return true;
+};
+const handleSuccess = (any, UploadFile) => {
+  UploadFile.raw.uploadState = false;
+};
+const onPreviewFile = (file) => {
+  window.open(file.raw.fileUrl, "_blank");
+};
+
 // 提交逻辑
 const handleSubmit = async (_type) => {
   try {
@@ -341,6 +374,12 @@ const handleSubmit = async (_type) => {
               };
             });
           }
+          flowForm.fileList = flowForm.fileList.map((item) => {
+            return {
+              ...item,
+              ...item.raw
+            };
+          });
           if (route.query.processType == 10 || route.query.processType == 30) {
             if (_type && _type == 1) {
               proxy
@@ -510,8 +549,23 @@ onMounted(async () => {
   getRecords(route.query.id);
 });
 </script>
+<style>
+.el-upload-list{
+  float: left;
+  margin: 0!important;
+  
+}
+.el-upload-list li{
+  width:100px;
+  margin-left: 10px;
+}
+.el-upload--text{
+  float: left;
+}
 
+</style>
 <style lang="scss" scoped>
+
 .processApproval {
   display: flex;
   justify-content: space-between;
@@ -538,7 +592,7 @@ onMounted(async () => {
     }
     .bottom {
       margin-top: 10px;
-      height: 170px;
+      height: 220px;
       background: #fff;
       padding: 20px 20px 0px 20px;
     }