From bd19a941293d124d7c58c6d351e7e86c1fa15559 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 26 十一月 2024 11:18:50 +0800 Subject: [PATCH] 新增数据上报修改 --- src/views/dataUpload/saftyBaseInfo/cardInfo/components/addReport.vue | 121 ++++++++++++++++++++++++++++++++++++++-- 1 files changed, 115 insertions(+), 6 deletions(-) diff --git a/src/views/dataUpload/saftyBaseInfo/cardInfo/components/addReport.vue b/src/views/dataUpload/saftyBaseInfo/cardInfo/components/addReport.vue index b9e18f9..f925199 100644 --- a/src/views/dataUpload/saftyBaseInfo/cardInfo/components/addReport.vue +++ b/src/views/dataUpload/saftyBaseInfo/cardInfo/components/addReport.vue @@ -9,8 +9,20 @@ </el-form-item> </el-col> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-form-item label="分类名称" prop="cateName"> + <el-form-item label="分类名称"> <el-input v-model.trim="form.cateName" placeholder="分类名称" clearable></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="分类标识" prop="cateType"> + <el-select v-model="form.cateType" style="width: 100%"> + <el-option + v-for="item in typeList" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> @@ -38,6 +50,24 @@ <el-input v-model.trim="form.notifyUser" placeholder="提醒人" clearable></el-input> </el-form-item> </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="附件"> + <el-upload accept="image/*" multiple list-type="picture-card" :action="uploadUrl" :headers="header" method="post" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" :limit='2' v-model:file-list="fileList" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove"> + <el-icon><Plus /></el-icon> + <template #tip> + <div class="el-upload__tip">上传图片尺寸小于2M,最多可上传2张</div> + </template> + </el-upload> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="title == '新增上报'? false : true"> + <el-form-item label="删除状态" prop="deleted"> + <el-radio-group v-model="form.deleted"> + <el-radio :label="0">未删除</el-radio> + <el-radio :label="1">已删除</el-radio> + </el-radio-group> + </el-form-item> + </el-col> </el-row> </el-form> <template #footer> @@ -56,6 +86,7 @@ import axios from "axios"; import {workApplyApi} from "/@/api/specialWorkSystem/workApply"; import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport"; +import Cookies from "js-cookie"; // 定义接口来定义对象的类型 interface DataState { @@ -70,8 +101,17 @@ effectiveTime: string dueTime: string notifyUser: string + cateType: string + deleted: number | null + files: string } rules:{} + typeList: Array<any> + fileList: [], + uploadUrl: string, + header: {}, + imgDialog: boolean, + imageUrl: string } export default defineComponent({ @@ -89,14 +129,26 @@ pusTime: '', effectiveTime: '', dueTime: '', - notifyUser: '' + notifyUser: '', + cateType: '', + deleted: 0, + files: '' }, + typeList:[], rules:{ name: [{ required: true, message: '请填写证书名称', trigger: 'blur' }], - cateName: [{ required: true, message: '请填写分类名称', trigger: 'blur' }], + cateType: [{ required: true, message: '请选择分类标识', trigger: 'blur' }], orgName: [{ required: true, message: '请填写发证机构', trigger: 'blur' }], notifyUser: [{ required: true, message: '请填写提醒人', trigger: 'blur' }] - } + }, + fileList: [], + uploadUrl: import.meta.env.VITE_API_URL + '/account/file/upload', + header: { + uid: Cookies.get('uid'), + Authorization: Cookies.get('token') + }, + imgDialog: false, + imageUrl: '' }) // 页面加载时 @@ -104,8 +156,9 @@ }) // 打开弹窗 - const open = (type: string, data: object) => { + const open = (type: string, data: object,cateTypeList: Array<any>) => { state.isShowDialog = true; + state.typeList = cateTypeList if (type === 'add') { state.title = '新增上报'; state.form = { @@ -116,7 +169,10 @@ pusTime: '', effectiveTime: '', dueTime: '', - notifyUser: '' + notifyUser: '', + cateType: '', + deleted: 0, + files: '' } }else{ state.title = '重新上报' @@ -125,6 +181,16 @@ state.form[key] = JSON.parse(JSON.stringify(data))[key]; } }) + if(data.files !== ''){ + state.fileList = data.files.split(',').map((i,index) => { + return { + url: i, + name: i + } + }) + }else{ + state.fileList=[] + } // state.form = { // uuid: data.uuid, // name: '', @@ -142,6 +208,7 @@ const onSubmit = async () => { formRef.value.validate(async (valid:Boolean) => { if(valid){ + state.form.files = state.fileList.map(i=>i.name).join(',') const res = await judgeReportApi().addCard([state.form]) if(res.data.code == 200){ ElMessage({ @@ -165,9 +232,51 @@ }) } + // 图片上传 + const showTip =()=>{ + ElMessage({ + type: 'warning', + message: '超出文件上传数量' + }); + } + + const picSize = async(rawFile: any) => { + if(rawFile.size / 1024 / 1024 > 2){ + ElMessage({ + type: 'warning', + message: '文件大小不能超过2M' + }); + return false + } + } + + const handleAvatarSuccess = (res:any, uploadFile: any) => { + if(res){ + uploadFile.name = res + }else{ + ElMessage({ + type: 'warning', + message: '文件上传失败' + }) + } + } + + const handlePictureCardPreview = (uploadFile) => { + state.imageUrl = uploadFile.url + state.imgDialog = true; + } + + const handleRemove = (file, uploadFiles,type) => { + state.fileList = uploadFiles + } return { formRef, + showTip, + picSize, + handleAvatarSuccess, + handlePictureCardPreview, + handleRemove, open, onSubmit, ...toRefs(state) -- Gitblit v1.9.2