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/ground.vue |  185 ++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 171 insertions(+), 14 deletions(-)

diff --git a/src/views/specialWorkSystem/workTicket/workApply/components/ground.vue b/src/views/specialWorkSystem/workTicket/workApply/components/ground.vue
index 9871118..a65e6f5 100644
--- a/src/views/specialWorkSystem/workTicket/workApply/components/ground.vue
+++ b/src/views/specialWorkSystem/workTicket/workApply/components/ground.vue
@@ -8,10 +8,10 @@
 					<el-form-item label="作业人" prop="operatorUids">
 						<el-select v-model="form.operatorUids" multiple>
 							<el-option
-									v-for="item in workerList"
-									:key="item.uid"
-									:label="item.username"
-									:value="item.uid"
+								v-for="item in workerList"
+								:key="item.uid"
+								:label="item.username"
+								:value="item.uid"
 							/>
 						</el-select>
 					</el-form-item>
@@ -97,12 +97,27 @@
 					</el-form-item>
 				</el-col>
 			</el-row>
+			<el-row>
+				<el-col :span="24">
+					<el-form-item label="图片上传" prop="workDetail.gbPath">
+						<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>
 
@@ -112,22 +127,31 @@
 	import { initBackEndControlRoutes } from '/@/router/backEnd';
 	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 { Search,Plus } from '@element-plus/icons-vue'
+	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>,
-		otherWorkList: Array<any>
+		otherWorkList: Array<any>,
+		fileList: Array<file>,
+		uploadUrl: string,
+		dialogVisible: Boolean,
+		dialogImageUrl: string | null,
+		imgLimit: number
 	}
-	export default defineComponent({
+	interface file {
+		url: string;
+	}
+	export default {
 		name: 'groundForm',
 		components: {},
 		props:['workerList'],
-		setup() {
+		setup(props: any, context: any) {
 			const userInfo = useUserInfo()
 			const { userInfos } = storeToRefs(userInfo);
 			const state  = reactive<stateType>({
@@ -141,13 +165,18 @@
 						operationDepId: null,
 						gbScope: '',
 						gbMethod: '',
-						gbPath: '',
+						gbPath: [],
 						otherSpecialWork: []
 					},
 					workTimeLine: [],
 					expStartTime: '',
 					expEndTime: ''
 				},
+				fileList: [],
+				imgLimit: 5,
+				uploadUrl: '',
+				dialogVisible: false,
+				dialogImageUrl: null,
 				csDepList: [
 					{
 						label: "单位一",
@@ -218,7 +247,8 @@
 				workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
 				"workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
 				"workDetail.gbScope": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
-				"workDetail.gbMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
+				"workDetail.gbMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+				"workDetail.gbPath": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
 			});
 			const submitForm = async (formEl: FormInstance | undefined) => {
 				if (!formEl) return
@@ -228,7 +258,7 @@
 						state.form.expEndTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[1]
 						let { workTimeLine, ...data } = JSON.parse(JSON.stringify(state.form))
 						data.workDetail.otherSpecialWork = data.workDetail.otherSpecialWork.join(',')
-						console.log(data,'data')
+						data.workDetail.gbPath = data.workDetail.gbPath.join(',')
 						const res = await workApplyApi().postGroundApply(data)
 						if (res.data.code === '200') {
 								ElMessage({
@@ -236,6 +266,8 @@
 									message: '提交成功!'
 								});
 								formEl.resetFields()
+								state.form.workDetail.gbPath = []
+								state.fileList = []
 						} else {
 							ElMessage({
 								type: 'warning',
@@ -247,6 +279,97 @@
 					}
 				})
 			}
+
+			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.gbPath.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.gbPath,'gbpath')
+							});
+				};
+			};
+
+			const beforeRemove = (file: {}, fileList: []) => {
+				const result = new Promise((resolve, reject) => {
+					ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning'
+					})
+							.then(() => {
+								// console.log(state.workDetail.gbPath,'path')
+								const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath))
+								fileList.map((item,index)=>{
+									if(item.uid === file.uid){
+										fileList.splice(index,1)
+										state.form.workDetail.gbPath.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 handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+			// 	console.log('2111111111111')
+			// };
+
 			// 折线图
 			const renderMenu = async (value: string) => {
 				Session.set('projectId',value)
@@ -256,16 +379,28 @@
 			return {
 				renderMenu,
 				Search,
+				Plus,
 				ruleFormRef,
 				applyRules,
+				handlePreview,
+				getUploadUrl,
+				beforeRemove,
+				upload,
+				showTip,
 				submitForm,
+				handlePictureCardPreview,
 				...toRefs(state),
 			};
 		},
-	});
+	};
 </script>
 
 <style scoped lang="scss">
+	.avatar-uploader .avatar {
+		width: 178px;
+		height: 178px;
+		display: block;
+	}
 	.home-container {
 		height: 100%;
 		overflow: hidden;
@@ -308,3 +443,25 @@
 		}
 	}
 </style>
+<style>
+	.avatar-uploader .el-upload {
+		border: 1px dashed var(--el-border-color);
+		border-radius: 6px;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+		transition: var(--el-transition-duration-fast);
+	}
+
+	.avatar-uploader .el-upload:hover {
+		border-color: var(--el-color-primary);
+	}
+
+	.el-icon.avatar-uploader-icon {
+		font-size: 28px;
+		color: #8c939d;
+		width: 178px;
+		height: 178px;
+		text-align: center;
+	}
+</style>

--
Gitblit v1.9.2