From 91ccfa3ebdc7a68b6f632c3e59757ec03b15ac1f Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期五, 02 九月 2022 15:15:01 +0800 Subject: [PATCH] lct --- src/views/specialWorkManage/workTicket/workApply/components/broken.vue | 242 +++++++++++++++++++++++++++++++++++------------- 1 files changed, 177 insertions(+), 65 deletions(-) diff --git a/src/views/specialWorkManage/workTicket/workApply/components/broken.vue b/src/views/specialWorkManage/workTicket/workApply/components/broken.vue index 18f134c..009f34f 100644 --- a/src/views/specialWorkManage/workTicket/workApply/components/broken.vue +++ b/src/views/specialWorkManage/workTicket/workApply/components/broken.vue @@ -9,21 +9,30 @@ <el-select v-model="form.operatorUids" multiple> <el-option v-for="item in workerList" - :key="item.uid" - :label="item.username" - :value="item.uid" + :key="item.id" + :label="item.realname" + :value="item.id" /> </el-select> </el-form-item> </el-col> + <el-col :span="12"> + <el-form-item label="作业内容" prop="workContent"> + <el-input + v-model="form.workContent" + autosize + type="textarea" + placeholder="请输入作业内容" + /> + </el-form-item> + </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="作业时间" prop="workTimeLine"> <el-date-picker v-model="form.workTimeLine" - format="YYYY-MM-DD HH:mm" - value-format="YYYY-MM-DD HH:mm:00" + value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始时间" @@ -31,28 +40,16 @@ /> </el-form-item> </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item label="作业内容" prop="workContent"> - <el-input - v-model="form.workContent" - autosize - type="textarea" - placeholder="请输入作业内容" - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="作业地址" prop="workLocation"> - <el-input - v-model="form.workLocation" - autosize - type="textarea" - placeholder="请输入作业地址" - /> - </el-form-item> - </el-col> + <el-col :span="12"> + <el-form-item label="作业地址" prop="workLocation"> + <el-input + v-model="form.workLocation" + autosize + type="textarea" + placeholder="请输入作业地址" + /> + </el-form-item> + </el-col> </el-row> @@ -61,10 +58,10 @@ <el-form-item label="作业单位" prop="workDetail.operationDepId"> <el-select v-model="form.workDetail.operationDepId"> <el-option - v-for="item in csDepList" - :key="item.value" - :label="item.label" - :value="item.value" + v-for="item in departList" + :key="item.id" + :label="item.department" + :value="item.id" /> </el-select> </el-form-item> @@ -91,24 +88,75 @@ /> </el-form-item> </el-col> - <el-col :span="12"> - <el-form-item label="涉及相关部门" prop="workDetail.involvedDepIds"> - <el-cascader v-model="form.workDetail.involvedDepIds" :options="departList" :props="casProps" :show-all-levels="false" @change="handleChange" /> - </el-form-item> - </el-col> + <el-col :span="12"> + <el-form-item label="危险辨识" prop="hazardIdentification"> + <el-input + v-model="form.hazardIdentification" + autosize + type="textarea" + placeholder="请输入危险辨识" + /> + </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> + <el-row> + <el-col :span="12"> + <el-form-item label="涉及相关部门" prop="workDetail.involvedDepIds"> + <el-select v-model="form.workDetail.involvedDepIds"> + <el-option + v-for="item in departList" + :key="item.id" + :label="item.department" + :value="item.id" + /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"> + <el-form-item label="隐患上报图" prop="img"> + <el-upload + accept=".pdf,.jpg,.png" + :action="fileRoad" + class="upload-demo" + ref="upload" + :headers="header" + :data="uploadForm" + list-type="picture-card" + :file-list="fileList" + v-model="form.workDetail.gbPath" + :on-change="handleChangeFile" + :on-success="onFileSuccess" + :multiple="false" + :auto-upload="true"> + <i slot="default" class="el-icon-plus"></i> + <div slot="file" slot-scope="{file}"> + <img + class="el-upload-list__item-thumbnail" + :src="file.url" alt="" + > + <span class="el-upload-list__item-actions"> + <span + class="el-upload-list__item-preview" + @click="handleFile(file)" + > + <i class="el-icon-zoom-in"></i> + </span> + <span + v-if="!disabled" + class="el-upload-list__item-delete" + @click="handleRemove(file,file.$index)" + > + <i class="el-icon-delete"></i> + </span> + </span> + </div> + </el-upload> + </el-form-item> + </el-col> + </el-row> </div> </el-form> <div class="applyBtn"> @@ -122,12 +170,21 @@ </template> <script> - export default{ + import {workApplyApi} from "../../../../../api/workApply"; + import Cookies from "_js-cookie@2.2.0@js-cookie"; + + export default{ name: 'brokenForm', components: {}, props:['workerList','departList'], data(){ return{ + fileRoad:process.env.BASE_API + '/task/web/upload', + uploadForm:{ + }, + header:{Authorization:''}, + fileList:[], + disabled:false, form: { operatorUids: [], workType: 5, @@ -143,9 +200,9 @@ }, workTimeLine: [], expStartTime: '', + hazardIdentification: '', expEndTime: '' }, - fileList: [], imgLimit: 5, uploadUrl: '', dialogVisible: false, @@ -183,10 +240,11 @@ multiple: true }, applyRules:{ - operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'change' }], workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], "workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], "workDetail.bcReason": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], @@ -196,26 +254,42 @@ } }, methods:{ - async submitForm(formEl) { - if (!formEl) return - await formEl.validate(async (valid, fields) => { + submitForm(formEl) { + this.$refs["ruleFormRef"].validate(async (valid, fields) => { if (valid) { - state.form.expStartTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[0] - 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(',') - data.workDetail.bcPath = data.workDetail.bcPath.join(',') + this.form.expStartTime = JSON.parse(JSON.stringify(this.form.workTimeLine))[0] + this.form.expEndTime = JSON.parse(JSON.stringify(this.form.workTimeLine))[1] + let { workTimeLine, ...data } = JSON.parse(JSON.stringify(this.form)) + data.workDetail.involvedDepIds = data.workDetail.involvedDepIds.toString() + data.workDetail.bcPath = JSON.stringify(this.fileList.map(item => { return item.url.substring(process.env.IMG_API.length) })) const res = await workApplyApi().postBrokenApply(data) if (res.data.code === '200') { - ElMessage({ + this.$message({ type: 'success', message: '提交成功!' }); - formEl.resetFields() - state.form.workDetail.bcPath = [] - state.fileList = [] + this.$refs["ruleFormRef"].clearValidate() + this.form = { + operatorUids: [], + workType: 5, + workLevel: 0, + workContent: '', + workLocation: '', + workDetail:{ + operationDepId: null, + bcReason: '', + bcExplain: '', + bcPath: [], + involvedDepIds: [] + }, + workTimeLine: [], + expStartTime: '', + hazardIdentification: '', + expEndTime: '' + } + this.fileList = [] } else { - ElMessage({ + this.$message({ type: 'warning', message: res.data.msg }); @@ -224,8 +298,46 @@ console.log('error submit!', fields) } }) - } + }, + + + handleChangeFile(){ + this.header.Authorization = Cookies.get('token') + }, + onFileSuccess(response){ + if(response.code === '200'){ + this.fileList.push({url:process.env.IMG_API + response.result.path}) + this.$notify({ + type:'success', + duration:2000, + message:'上传成功', + title:'成功', + }) + }else{ + this.$message({ + message:res.data.message, + type:'warning' + }) + } + }, + handleFile(file){ + this.dialogImageUrl = file.url; + this.dialogVisible = true; + }, + showImg(file){ + window.open(file, '_blank') + }, + handleRemove(file,value){ + return this.$confirm(`确定移除 ${ file.uid }?`,'提示',{ + confirmButtonText:'确定', + cancelButtonText:'取消', + type:'warning', + }).then(()=> { + this.fileList.splice(value,1) + }) + }, }, + }; </script> -- Gitblit v1.9.2