From 3333422b5b672c9c02a993cba43e272fd3bcf44b Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期五, 26 八月 2022 12:13:20 +0800
Subject: [PATCH] Default Changelist

---
 src/views/specialWorkSystem/workTicket/workApply/components/broken.vue |  135 +++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 129 insertions(+), 6 deletions(-)

diff --git a/src/views/specialWorkSystem/workTicket/workApply/components/broken.vue b/src/views/specialWorkSystem/workTicket/workApply/components/broken.vue
index 6880a48..08eda8b 100644
--- a/src/views/specialWorkSystem/workTicket/workApply/components/broken.vue
+++ b/src/views/specialWorkSystem/workTicket/workApply/components/broken.vue
@@ -97,12 +97,27 @@
 					</el-form-item>
 				</el-col>
 			</el-row>
+			<el-row>
+				<el-col :span="24">
+					<el-form-item label="图片上传" prop="workDetail.bcPath">
+						<el-upload accept="image/*" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
+							<el-icon><Plus /></el-icon>
+							<template #tip>
+								<div class="el-upload__tip">上传jpg/png图片尺寸小于500KB,最多可上传5张</div>
+							</template>
+						</el-upload>
+					</el-form-item>
+				</el-col>
+			</el-row>
 			</div>
 		</el-form>
 		<div class="applyBtn">
 			<el-button type="primary" size="large" plain @click="submitForm(ruleFormRef)">发起申请</el-button>
 		</div>
 	</div>
+	<el-dialog v-model="dialogVisible">
+		<img w-full :src="dialogImageUrl" alt="Preview Image" />
+	</el-dialog>
 	</div>
 </template>
 
@@ -113,15 +128,23 @@
 	import {useUserInfo} from "/@/stores/userInfo";
 	import { Session } from '/@/utils/storage';
 	import { Search } from '@element-plus/icons-vue'
-	import { ElMessage } from 'element-plus'
-	import type { FormInstance, FormRules } from 'element-plus'
+	import { ElMessage, ElMessageBox } from 'element-plus'
+	import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
 	import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
-
+	import axios from 'axios';
 
 	interface stateType {
 		form: Object,
 		csDepList: Array<any>,
+		fileList: Array<file>,
+		uploadUrl: string,
+		dialogVisible: Boolean,
+		dialogImageUrl: string | null,
+		imgLimit: number,
 		casProps: {}
+	}
+	interface file {
+		url: string;
 	}
 	export default defineComponent({
 		name: 'brokenForm',
@@ -141,13 +164,18 @@
 						operationDepId: null,
 						bcReason: '',
 						bcExplain: '',
-						bcPath: '',
+						bcPath: [],
 						involvedDepIds: []
 					},
 					workTimeLine: [],
 					expStartTime: '',
 					expEndTime: ''
 				},
+				fileList: [],
+				imgLimit: 5,
+				uploadUrl: '',
+				dialogVisible: false,
+				dialogImageUrl: null,
 				csDepList: [
 					{
 						label: "单位一",
@@ -191,7 +219,7 @@
 				"workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
 				"workDetail.bcReason": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
 				"workDetail.bcExplain": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
-				"workDetail.otherSpecialWork": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
+				"workDetail.bcPath": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
 			});
 			const submitForm = async (formEl: FormInstance | undefined) => {
 				if (!formEl) return
@@ -201,7 +229,7 @@
 						state.form.expEndTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[1]
 						let { workTimeLine, ...data } = JSON.parse(JSON.stringify(state.form))
 						data.workDetail.involvedDepIds = data.workDetail.involvedDepIds.join(',')
-						console.log(data,'data')
+						data.workDetail.bcPath = data.workDetail.bcPath.join(',')
 						const res = await workApplyApi().postBrokenApply(data)
 						if (res.data.code === '200') {
 								ElMessage({
@@ -209,6 +237,8 @@
 									message: '提交成功!'
 								});
 								formEl.resetFields()
+								state.form.workDetail.bcPath = []
+								state.fileList = []
 						} else {
 							ElMessage({
 								type: 'warning',
@@ -220,6 +250,93 @@
 					}
 				})
 			}
+
+			const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+				console.log(uploadFile);
+			};
+
+			const handlePictureCardPreview = (uploadFile: { url: string }) => {
+				state.dialogImageUrl = uploadFile.url!;
+				state.dialogVisible = true;
+			};
+
+			const getUploadUrl = async (rawFile: any) => {
+				const res = await workApplyApi().getUploadUrl(rawFile.name);
+				state.form.workDetail.bcPath.push(res.data.data.fileName)
+				state.uploadUrl = res.data.data.uploadUrl;
+				console.log(res.data.data.fileName,'name')
+			};
+
+			const upload = async (params: any) => {
+				// const formData = new FormData();
+				// formData.append('file', state.fileList[0].raw);
+				let reader = new FileReader();
+				reader.readAsArrayBuffer(params.file);
+				reader.onload = async () => {
+					axios
+							.put(state.uploadUrl, reader.result, {
+								header: { 'Content-Type': 'multipart/form-data' }
+							})
+							.then(() => {
+								// if (state.fileList.length === 2) {
+								// 	state.fileList.splice(0, 1);
+								// }
+								// console.log(state.form.workDetail.bcPath,'bcPath')
+							});
+				};
+			};
+
+			const beforeRemove = (file: {}, fileList: []) => {
+				const result = new Promise((resolve, reject) => {
+					ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning'
+					})
+							.then(() => {
+								// console.log(state.workDetail.bcPath,'path')
+								const list = JSON.parse(JSON.stringify(state.form.workDetail.bcPath))
+								fileList.map((item,index)=>{
+									if(item.uid === file.uid){
+										fileList.splice(index,1)
+										state.form.workDetail.bcPath.splice(index,1)
+										deletePic(list[index])
+									}
+								})
+								// 请求删除接口
+							})
+							.catch(() => {
+								reject(false);
+							});
+				});
+				return result;
+			};
+
+
+			// 删除图片接口
+			const deletePic = async(fileName)=>{
+				console.log(fileName,'fileName')
+				const res = await workApplyApi().deleteFile({fileName: fileName})
+				if (res.data.code === '200') {
+					ElMessage({
+						type: 'success',
+						message: '删除成功!'
+					});
+				} else {
+					ElMessage({
+						type: 'warning',
+						message: res.data.msg
+					});
+				}
+			}
+
+			const showTip =()=>{
+				ElMessage({
+					type: 'warning',
+					message: '超出文件上传数量'
+				});
+			}
+
 			// 折线图
 			const renderMenu = async (value: string) => {
 				Session.set('projectId',value)
@@ -231,7 +348,13 @@
 				Search,
 				ruleFormRef,
 				applyRules,
+				handlePreview,
+				getUploadUrl,
+				beforeRemove,
+				upload,
+				showTip,
 				submitForm,
+				handlePictureCardPreview,
 				...toRefs(state),
 			};
 		},

--
Gitblit v1.9.2