<template>
|
<div class="system-add-menu-container">
|
<el-dialog v-model="ifShowApproveRuleDialog" :title="title" :close-on-click-modal="false" @close="clearFile()">
|
<el-form v-if="disabled" :model="jsaForm" label-width="170px" ref="jsaFormRef" :rules="jsaFormRules">
|
<el-row :gutter="20">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="jsa风险研判结论" prop="judgeRecord">
|
<el-input
|
v-model="jsaForm.judgeRecord"
|
:autosize="{ minRows: 3 }"
|
type="textarea"
|
placeholder="请输入jsa风险研判结论"
|
/>
|
</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/*" :auto-upload="true" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='imgLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :before-remove="beforeRemove" :before-upload="getUploadUrl">
|
<el-icon><Plus /></el-icon>
|
<template #tip>
|
<div class="el-upload__tip">上传jpg/png图片尺寸小于5M，最多可上传3张</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div v-show="disabled" class="dialog-footer">
|
<el-button type="warning" @click="ifShowApproveRuleDialog = false" size="default" plain>取消</el-button>
|
<el-button type="primary" @click="submitApproveRule()" size="default">确认</el-button>
|
</div>
|
</template>
|
<div class="d-container" v-if="!disabled">
|
<div class="d-row">
|
<div class="d-tit">jsa风险研判结论</div><div class="d-cont">{{detail.judgeRecord}}</div>
|
</div>
|
<div class="d-row">
|
<div class="d-tit">风险研判报告记录附件</div>
|
<div class="d-cont">
|
<el-image v-for="item in detail.judgePicturePath?.split(',')" :preview-src-list="[item]" style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item" fit="cover" />
|
</div>
|
</div>
|
<div class="d-row">
|
<div class="d-tit">研判人</div><div class="d-cont">{{detail.judgeUname}}</div>
|
</div>
|
<div class="d-row">
|
<div class="d-tit">研判时间</div><div class="d-cont">{{detail.judgeTime}}</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, ref } from 'vue';
|
import { ElMessage } from 'element-plus/es';
|
import { approveRuleApi } from '/@/api/specialWorkSystem/approveRule';
|
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
|
import {ElMessageBox, UploadProps} from "element-plus";
|
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
|
import axios from "axios";
|
interface dataState {
|
title: string;
|
disabled: boolean;
|
ifShowApproveRuleDialog: boolean;
|
jsaForm: {
|
workApplyId: number | null;
|
judgeRecord: string
|
judgePicturePath: Array<string>
|
};
|
jsaFormRules: {};
|
fileList: Array<file>,
|
uploadUrl: string,
|
dialogVisible: Boolean,
|
dialogImageUrl: string | null,
|
imgLimit: number,
|
detail:{}
|
}
|
interface file {
|
url: string
|
}
|
export default {
|
name: 'jsaReportDialog',
|
components: { Plus },
|
setup(props: any, context: any) {
|
const jsaFormRef = ref();
|
const approveLevelDialogRef = ref();
|
const state = reactive<dataState>({
|
title: '',
|
disabled: true,
|
ifShowApproveRuleDialog: false,
|
jsaForm: {
|
workApplyId: null,
|
judgeRecord: '',
|
judgePicturePath: []
|
},
|
jsaFormRules: {
|
judgeRecord: [{ required: true, message: '请填写jsa风险研判结论', trigger: 'blur' }]
|
},
|
fileList: [],
|
imgLimit: 3,
|
uploadUrl: '',
|
dialogVisible: false,
|
dialogImageUrl: null,
|
detail: {}
|
});
|
|
const showReportDialog = (type: string, value: {}) => {
|
state.ifShowApproveRuleDialog = true;
|
if (type === '上传') {
|
state.disabled = true;
|
state.title = '上传风险研判报告';
|
console.log(value.id,'id')
|
state.jsaForm = {
|
workApplyId: value.id,
|
judgeRecord: '',
|
judgePicturePath: []
|
};
|
} else {
|
state.disabled = false;
|
state.title = '查看风险研判报告';
|
getReport(value.id.toString())
|
}
|
};
|
|
const getReport = async(id:string) => {
|
let res = await workApplyApi().viewJsaReport({id:id});
|
if (res.data.code === '200') {
|
state.detail = res.data.data
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const submitApproveRule = () => {
|
jsaFormRef.value.validate(async (valid: Boolean) => {
|
if (valid) {
|
state.jsaForm.judgePicturePath = state.jsaForm.judgePicturePath.join(',')
|
let res = await workApplyApi().uploadJsaReport(state.jsaForm);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '研判报告上传成功',
|
duration: 2000
|
});
|
state.ifShowApproveRuleDialog = false;
|
state.jsaForm.judgePicturePath = []
|
state.fileList = []
|
context.emit('refresh');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
state.jsaForm.judgePicturePath = state.jsaForm.judgePicturePath.split(',')
|
}
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息'
|
});
|
}
|
});
|
};
|
|
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 fileSize = rawFile.size / 1024 / 1024 < 5 ? '1' : '0'
|
if(rawFile.size / 1024 / 1024 > 5){
|
ElMessage({
|
type: 'warning',
|
message: '文件大小不能超过5M。'
|
});
|
return Promise.reject(false)
|
}else{
|
const res = await workApplyApi().getUpload9Url(rawFile.name);
|
state.jsaForm.judgePicturePath.push(res.data.data.fileName)
|
state.uploadUrl = res.data.data.uploadUrl;
|
}
|
};
|
|
const upload = async (params: any) => {
|
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.jsaForm.judgePicturePath,'judgePicturePath')
|
});
|
};
|
};
|
|
const beforeRemove = (file: {}, fileList: []) => {
|
if (file && file.status === "success") {
|
const result = new Promise((resolve, reject) => {
|
ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
const list = JSON.parse(JSON.stringify(state.jsaForm.judgePicturePath))
|
fileList.map((item, index) => {
|
if (item.uid === file.uid) {
|
fileList.splice(index, 1)
|
state.jsaForm.judgePicturePath.splice(index, 1)
|
// 请求删除接口
|
deletePic(list[index])
|
}
|
})
|
})
|
.catch(() => {
|
reject(false);
|
});
|
});
|
return result;
|
}
|
};
|
|
// 删除图片接口
|
const deletePic = async(fileName:string)=>{
|
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 clearFile = ()=>{
|
state.fileList = []
|
}
|
|
return {
|
...toRefs(state),
|
Plus,
|
jsaFormRef,
|
approveLevelDialogRef,
|
getReport,
|
submitApproveRule,
|
showReportDialog,
|
handlePreview,
|
getUploadUrl,
|
upload,
|
showTip,
|
handlePictureCardPreview,
|
beforeRemove,
|
clearFile
|
};
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
|
.main-card {
|
width: 100%;
|
height: 100%;
|
.cardTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.mainCardBtn {
|
margin: 0;
|
}
|
}
|
.pageBtn {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
|
.demo-pagination-block + .demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
&:last-of-type {
|
height: calc(100% - 100px);
|
}
|
}
|
.el-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.grid-content {
|
align-items: center;
|
min-height: 36px;
|
}
|
|
.topInfo {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-weight: bold;
|
|
& > div {
|
white-space: nowrap;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
|
.d-container{
|
width: 100%;
|
.d-row{
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
.d-tit{
|
width: 150px;
|
text-align: right;
|
padding-right: 12px;
|
}
|
.d-cont{
|
width: calc(100% - 150px);
|
border: 1px solid #dcdfe6;
|
margin-bottom: 22px;
|
border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
|
padding: 5px 11px;
|
}
|
}
|
}
|
|
:deep(.el-date-editor) {
|
width: 100%;
|
}
|
</style>
|
