InteSecurePlatform.git

			@@ -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),
			};
			},