feat(work/edit): 申请表单附件上传提交

api/work.js

@@ -1,4 +1,5 @@
-import request from '@/utils/request.js'
+import request from '@/utils/request'
+import upload from '@/utils/upload'
 
 const preUrl = '/clientServices.do?iscrypt=1'
 
@@ -86,4 +87,12 @@ export function submitProcessForm(user, process, fileIds) {
 			}
 		}
 	})
+}
+
+export function uploadFiles(data) {
+	return upload({
+    url: '/MiniAppUploadFileAction.do',
+    name: data.name,
+    files: data.files
+  })
 }

pages/work/edit/index.vue

@@ -33,8 +33,19 @@
 				</uni-forms-item>
 			</uni-forms>
 		</uni-card>
-		<uni-card title="上传附件" :extra="`${fileList.length}/5`" margin="10px" spacing="0">
-			<uni-file-picker v-model="fileList" :autoUpload="false" mode="list" limit="5" file-mediatype="all" @select="handleSelect" @progress="handleProgress" @delete="handleDelete"></uni-file-picker>
+		<uni-card title="上传附件" :extra="`${fileList.length}/15`" margin="10px" spacing="0">
+			<uni-file-picker 
+				ref="filePicker" 
+				:value="fileList" 
+				:auto-upload="true" 
+				mode="list" limit="10" 
+				file-mediatype="all"
+				@select="handleFileSelect" 
+				@progress="handleFileProgress" 
+				@success="handleFileSuccess" 
+				@fail="handleFileFail" 
+				@delete="handleFileDelete"
+			/>
 			<button :loading="!button_state" type="default" class="submit_button" @click="submitProcess">提交</button>
 		</uni-card>
 	</view>
@@ -46,7 +57,7 @@ import { onLoad } from '@dcloudio/uni-app'
 import { useUserStore } from '@/store/user.js'
 import $modal from '@/plugins/modal.js'
 import $tab from '@/plugins/tab.js'
-import { getProcessInfo, getProcessForm, submitProcessForm } from '@/api/work.js'
+import { getProcessInfo, getProcessForm, submitProcessForm, uploadFiles } from '@/api/work.js'
 
 let processInfo = reactive({
 	modelName: '流程申请',
@@ -141,19 +152,49 @@ function setTimeRange(e) {
 	}
 }
 
-let fileList = ref([]) // 文件列表
-function handleSelect(e) { // 新增文件
-	console.log('handleSelect', e)
-	for (const file of e.tempFiles) {
-		fileList.value.push(file)
+const uploadFileConfig = ref({
+	maxCount: 10,
+	uploadType: "file",
+	hostUrl: "",
+	autoUpload: false
+})
+const fileList = ref([]) // 文件列表
+const fileSeqs = ref([]) // 文件上传返回 seq 列表
+const filePicker = ref(null)
+function handleFileSelect(file) { // 新增文件
+	console.log('handleFileSelect', file)
+	console.log('handleFileProgress', file)
+	const data = {
+		name: file.tempFiles[0].name,
+		files: file.tempFiles[0].file.path,
 	}
+	uploadFiles(data)
+	.then(res => {
+		fileSeqs.value.push(res.returnParams)
+		let newFile = file.tempFiles[0]
+		newFile.seq = res.returnParams
+		fileList.value.push(newFile)
+	})
+	.catch(err => {
+		if (err == -20201) {
+			console.log('文件上传失败 返回值不是JSON字符串');
+		}
+	})
 }
-function handleProgress(e) { // 文件上传
-	console.log('handleProgress', e)
+function handleFileProgress(file, progress) {
+	console.log('handleFileProgress', file, progress);
+	
 }
-function handleDelete(e) { // 移除文件
-	console.log('handleDelete', e)
-	fileList.value.splice(fileList.value.indexOf(e.tempFiles), 1)
+function handleFileSuccess(file, res) {
+	console.log('handleFileSuccess', file, res);
+}
+function handleFileFail(file, err) {
+	console.log('handleFileFail', file, err);
+}
+function handleFileDelete(file, index) { // 移除文件
+	console.log('handleDelete', file)
+	fileList.value.splice(fileList.value.indexOf(file.tempFiles), 1)
+	fileSeqs.value.splice(index, 1)
 }
 
 const button_state = ref(true)
@@ -165,19 +206,22 @@ function submitProcess() { // 提交表单
 		return { name: tableField, value: defaultValue }
 	})
 	console.log('submitProcessForm', processInfo.form);
+	console.log('fileList', fileList.value);
+	console.log('fileSeqs', fileSeqs.value);
+	console.log('filePicker', filePicker.value);
 	button_state.value = true
-	// submitProcessForm(userStore.user, processInfo, fileList.value).then(res => {
-	// 	console.log('submitProcessForm', res);
-	// 	if (res.returnMsg.includes('提交失败')) {
-	// 		// 启用提交按钮
-	// 		button_state.value = true
-	// 		$modal.msgError(res.returnMsg)
-	// 	} else {
-	// 		$modal.msgSuccess(res.returnMsg)
-	// 		// 返回上一页
-	// 		$tab.navigateBack();
-	// 	}
-	// })
+	submitProcessForm(userStore.user, processInfo, fileSeqs.value).then(res => {
+		console.log('submitProcessForm', res);
+		if (res.returnMsg.includes('提交失败')) {
+			// 启用提交按钮
+			button_state.value = true
+			$modal.msgError(res.returnMsg)
+		} else {
+			$modal.msgSuccess(res.returnMsg)
+			// 返回上一页
+			$tab.navigateBack();
+		}
+	})
 }
 </script>
 

pages/work/index.vue

@@ -171,7 +171,7 @@ function initProcessList() {
 }
 // 点击流程宫格
 function changeProcessGrid(e) { 
-	console.log('changeProcessGrid', e);
+	// console.log('changeProcessGrid', e);
 	const { modelName, modelId, control } = processList.value.fList[e.detail.index]
 	// 跳转流程申请页面
 	$tab.navigateTo('/pages/work/edit/index?modelName=' + modelName + '&modelId=' + modelId + '&control=' + control)

utils/upload.js

@@ -1,39 +1,50 @@
-// import { useUserStore } from '@/store/user.js'
+// import store from '@/store'
 import config from '@/config'
-import { getToken } from '@/utils/auth'
+// import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { toast, showConfirm, tansParams } from '@/utils/common'
 
-let timeout = 10000
+let timeout = config.timeout
 const baseUrl = config.baseUrl
 
 const upload = config => {
   // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
+  // const isToken = (config.headers || {}).isToken === false
   config.header = config.header || {}
-  if (getToken() && !isToken) {
-    config.header['Authorization'] = 'Bearer ' + getToken()
-  }
+  // if (getToken() && !isToken) {
+  //   config.header['Authorization'] = 'Bearer ' + getToken()
+  // }
   // get请求映射params参数
   if (config.params) {
     let url = config.url + '?' + tansParams(config.params)
     url = url.slice(0, -1)
     config.url = url
   }
+  console.log('upload.config', config);
   return new Promise((resolve, reject) => {
     uni.uploadFile({
       timeout: config.timeout || timeout,
       url: baseUrl + config.url,
-      filePath: config.filePath,
+      // files: config.files,
+      filePath: config.files,
       name: config.name || 'file',
       header: config.header,
       formData: config.formData,
-      success: (res) => {
-        const { statusCode, data } = res
-        let result = JSON.parse(data)
+      success: (response) => {
+				console.log('upload.response', response);
+        const { statusCode, data } = response
+				try {
+					const result = JSON.parse(data)
+				} catch (e) {
+          toast('上传失败， 请重试')
+          reject(-201)
+          return
+				}
+        const result = JSON.parse(data)
+				const returnCode = result.returnCode
         const code = statusCode || 200
         const msg = errorCode[code] || result.returnMsg || errorCode['default']
-        if (returnCode == -201) {
+        if (returnCode == -20201) {
           toast(msg)
           reject(returnCode)
           return
@@ -41,9 +52,9 @@ const upload = config => {
         if (code === 200) {
           resolve(result)
           // } else if (code == 401) {
-          //   showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
-          //     if (res.confirm) {
-          //       store.dispatch('LogOut').then(res => {
+          //   showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(response => {
+          //     if (response.confirm) {
+          //       store.dispatch('LogOut').then(response => {
           //         uni.reLaunch({ url: '/pages/login' })
           //       })
           //     }