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