288 lines
9.8 KiB
Vue
288 lines
9.8 KiB
Vue
<template>
|
||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="450px" top="30vh">
|
||
<el-scrollbar>
|
||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||
<el-form-item label="问题详情：">
|
||
<el-input v-model="form.issueDetail" disabled autocomplete="off" type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 6 }" readonly />
|
||
</el-form-item>
|
||
<el-form-item label="整改意见：">
|
||
<el-input v-model="form.reformAdvice" autocomplete="off" disabled type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 6 }" readonly />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="技术监督报告：" v-if="showFile1">
|
||
<el-icon class="elView" v-if="supervisionReportDetail?.supervisionReportName">
|
||
<View @click="openFile(supervisionReportDetail?.supervisionReportName)" />
|
||
</el-icon>
|
||
<a :href="supervisionReportDetail.supervisionReportPath" target="_blank">
|
||
{{ supervisionReportDetail.supervisionReportName }}
|
||
</a>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="问题附件：" v-if="showFile">
|
||
<el-icon class="elView" v-if="problemDetail?.problemName">
|
||
<View @click="openFile(problemDetail?.problemName)" />
|
||
</el-icon>
|
||
<a :href="problemDetail.problemPath" target="_blank">{{ problemDetail.problemName }}</a>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="采取的措施：" prop="takeStep">
|
||
<el-input v-model="form.takeStep" autocomplete="off" placeholder="请输入采取的措施" type="textarea" />
|
||
</el-form-item>
|
||
<el-form-item label="反馈报告：" class="uploadFile" prop="reportPath">
|
||
<el-upload v-model:file-list="form.reportPath" ref="uploadRef" action="" :accept="acceptType"
|
||
:limit="1" :on-exceed="handleExceed" :on-change="choose" :auto-upload="false"
|
||
:on-progress="uploadFileName('reportPath')" :on-remove="removeFile">
|
||
<template #trigger>
|
||
<el-button type="primary">上传文件</el-button>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-scrollbar>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="close">取消</el-button>
|
||
<!-- <el-button type="primary" @click="submit">确认</el-button> -->
|
||
<el-button type="primary" @click="submit(true)" :loading="loading">保存</el-button>
|
||
<el-button type="primary" @click="submit(false)" :loading="loading">提交审批</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, inject, reactive, nextTick } from 'vue'
|
||
import { ElMessage, genFileId, UploadProps, UploadRawFile } from 'element-plus'
|
||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||
import { getFileNameAndFilePath, uploadFile } from '@/api/system-boot/file'
|
||
import { addFeedback, updateFeedback } from '@/api/supervision-boot/leaflet'
|
||
import { Link, View } from '@element-plus/icons-vue'
|
||
const openFile = (name: any) => {
|
||
window.open(window.location.origin + '/#/previewFile?/supervision/' + name)
|
||
}
|
||
//.doc,.docx,.xlsx,.xls,.pdf
|
||
const acceptType = ref('')
|
||
//下拉数据源
|
||
const title = ref('')
|
||
const loading = ref(false)
|
||
const tableStore = inject('tableStore') as TableStore
|
||
const formRef = ref()
|
||
// 上传报告
|
||
const uploadRef = ref()
|
||
const dialogVisible = ref(false)
|
||
// 注意不要和表单ref的命名冲突
|
||
const form = ref({
|
||
id: '',
|
||
status: '',
|
||
issueDetail: '',
|
||
reformAdvice: '',
|
||
takeStep: '',
|
||
reportPath: []
|
||
})
|
||
//附件是否显示
|
||
const showFile = ref(false)
|
||
const showFile1 = ref(false)
|
||
|
||
const problemDetail = reactive({
|
||
problemPath: '',
|
||
problemName: ''
|
||
})
|
||
const supervisionReportDetail = reactive({
|
||
supervisionReportPath: '',
|
||
supervisionReportName: ''
|
||
})
|
||
|
||
//处理成效报告
|
||
const reportFilePath: any = ref('')
|
||
|
||
//form表单校验规则
|
||
const rules = {
|
||
takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }],
|
||
reportPath: [{ required: true, message: '请上传处理成效报告', trigger: 'blur' }]
|
||
}
|
||
const resetForm = () => {
|
||
if (formRef.value) {
|
||
formRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
const open = async (
|
||
text: string,
|
||
id: string,
|
||
status: any,
|
||
issueDetail: string,
|
||
problemPath?: string,
|
||
supervisionReport?: string,
|
||
reformAdvice?: string,
|
||
takeStep?: string,
|
||
reportPath?: string
|
||
) => {
|
||
title.value = text
|
||
resetForm()
|
||
if (takeStep) {
|
||
form.value.takeStep = takeStep
|
||
}
|
||
// uploadRef.value?.clearFiles()
|
||
if (reportPath) {
|
||
form.value.reportPath = JSON.parse(
|
||
JSON.stringify([
|
||
{
|
||
name: reportPath?.split('/')[2]
|
||
}
|
||
])
|
||
)
|
||
}
|
||
form.value.id = id
|
||
form.value.status = status
|
||
form.value.issueDetail = issueDetail || ''
|
||
form.value.reformAdvice = reformAdvice || ''
|
||
reportFilePath.value = reportPath
|
||
//判断附件是否存在，如果存在则回显出让用户可以点击下载
|
||
if (problemPath) {
|
||
let arrPath = problemPath.split(',')
|
||
await getFileNameAndFilePath({ filePath: arrPath[0] }).then(res => {
|
||
problemDetail.problemPath = res.data.url
|
||
problemDetail.problemName = res.data.fileName
|
||
})
|
||
showFile.value = true
|
||
} else {
|
||
showFile.value = false
|
||
}
|
||
if (supervisionReport) {
|
||
let arrPath = supervisionReport.split(',')
|
||
|
||
await getFileNameAndFilePath({ filePath: arrPath[0] }).then(res => {
|
||
supervisionReportDetail.supervisionReportPath = res.data.url
|
||
supervisionReportDetail.supervisionReportName = res.data.fileName
|
||
})
|
||
showFile1.value = true
|
||
} else {
|
||
showFile1.value = false
|
||
}
|
||
|
||
dialogVisible.value = true
|
||
}
|
||
//移除文件上传
|
||
const removeFile = (file: any, uploadFiles: any) => {
|
||
console.log(file, uploadFiles)
|
||
}
|
||
const close = () => {
|
||
dialogVisible.value = false
|
||
form.value = {
|
||
id: '',
|
||
status: '',
|
||
issueDetail: '',
|
||
reformAdvice: '',
|
||
takeStep: '',
|
||
reportPath: []
|
||
}
|
||
resetForm()
|
||
}
|
||
/**
|
||
* 提交用户表单数据
|
||
*/
|
||
const submit = async (flag: boolean) => {
|
||
loading.value = true
|
||
if (flag) {
|
||
let subForm = JSON.parse(JSON.stringify(form.value))
|
||
subForm = {
|
||
...subForm,
|
||
reportPath: form.value.reportPath.length > 0 ? reportFilePath.value : null
|
||
}
|
||
subForm.saveOrCheckflag = '1'
|
||
//此时该告警单处于待反馈状态
|
||
await addFeedback(subForm).then(res => {
|
||
//查询进线数据，避免一直处于loading状态
|
||
ElMessage.success('保存成功！')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
})
|
||
} else {
|
||
formRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
let subForm = JSON.parse(JSON.stringify(form.value))
|
||
subForm = {
|
||
...subForm,
|
||
reportPath: form.value.reportPath.length > 0 ? reportFilePath.value : null
|
||
}
|
||
if (!reportFilePath.value) {
|
||
return ElMessage({
|
||
message: '请上传处理成效报告',
|
||
type: 'warning'
|
||
})
|
||
}
|
||
subForm.saveOrCheckflag = '2'
|
||
if (form.value.status == '3') {
|
||
await updateFeedback(subForm).then(res => {
|
||
ElMessage.success('重新发起成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
}).catch(() => { loading.value = false })
|
||
} else {
|
||
//此时该告警单处于待反馈状态
|
||
await addFeedback(subForm).then(res => {
|
||
//查询进线数据，避免一直处于loading状态
|
||
ElMessage.success('申请成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
}).catch(() => { loading.value = false })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
await setTimeout(() => {
|
||
loading.value = false
|
||
}, 0)
|
||
}
|
||
|
||
defineExpose({ open })
|
||
|
||
let uploadName = ref('')
|
||
const choose = (e: any) => {
|
||
const fileExtension = e.name.split('.')[1];
|
||
if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'pdf') {
|
||
// 文件类型不符合要求，提示用户
|
||
uploadFile(e.raw, '/supervision/').then(res => {
|
||
reportFilePath.value = res.data.name
|
||
ElMessage.success('上传成功！');
|
||
// form.value.reportPath = res.data.name
|
||
})
|
||
} else {
|
||
uploadRef.value!.clearFiles()
|
||
ElMessage.error('请选择 .doc 或 .docx 或 .pdf 格式的文件!');
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
const handleExceed: UploadProps['onExceed'] = files => {
|
||
uploadRef.value!.clearFiles()
|
||
const file = files[0] as UploadRawFile
|
||
file.uid = genFileId()
|
||
uploadRef.value!.handleStart(file)
|
||
}
|
||
|
||
//上传报告改变
|
||
const uploadFileName = val => {
|
||
uploadName.value = val
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.el-upload-list__item {
|
||
transition: none !important;
|
||
}
|
||
|
||
.el-select {
|
||
min-width: 180px;
|
||
}
|
||
|
||
.elView {
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|