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