165 lines
4.1 KiB
Vue
165 lines
4.1 KiB
Vue
<template>
|
||
<el-dialog
|
||
draggable
|
||
class='cn-operate-dialog'
|
||
v-model='dialogVisible'
|
||
:title='title'
|
||
style='max-width: 450px; height: 320px'
|
||
top='30vh'
|
||
>
|
||
<el-scrollbar>
|
||
<el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
|
||
|
||
<el-form-item label='采取的措施：' prop='takeStep'>
|
||
<el-input
|
||
v-model='formData.takeStep'
|
||
autocomplete='off'
|
||
placeholder='请输入采取的措施'
|
||
type='textarea'
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label='反馈报告：' prop='reportPath'>
|
||
<el-upload
|
||
ref='uploadRef'
|
||
action=''
|
||
accept='.doc,.docx,.xlsx,.xls,.pdf'
|
||
:limit='1'
|
||
:on-exceed='handleExceed'
|
||
:on-change='choose'
|
||
:auto-upload='false'
|
||
:on-progress="uploadFileName('reportPath')"
|
||
>
|
||
<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='dialogVisible = false'>取消</el-button>
|
||
<el-button type='primary' @click='submit'>确认</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 { uploadFile } from '@/api/system-boot/file'
|
||
import { addFeedback } from '@/api/supervision-boot/leaflet'
|
||
|
||
//下拉数据源
|
||
const title = ref('')
|
||
const tableStore = inject('tableStore') as TableStore
|
||
const formRef = ref()
|
||
// 上传报告
|
||
const uploadRef = ref()
|
||
const dialogVisible = ref(false)
|
||
// 注意不要和表单ref的命名冲突
|
||
const formData = reactive({
|
||
id: '',
|
||
status: '',
|
||
takeStep: '',
|
||
reportPath: ''
|
||
})
|
||
|
||
//处理成效报告
|
||
const reportPath = ref('')
|
||
|
||
//form表单校验规则
|
||
const rules = {
|
||
takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }]
|
||
}
|
||
const resetForm = () => {
|
||
if (formRef.value) {
|
||
formRef.value.resetFields()
|
||
}
|
||
}
|
||
|
||
const open = async (text: string, id: string, status: any, takeStep?: string, reportPath?: string) => {
|
||
title.value = text
|
||
resetForm()
|
||
if (takeStep) {
|
||
formData.takeStep = takeStep
|
||
}
|
||
uploadRef.value?.clearFiles()
|
||
if (reportPath) {
|
||
formData.reportPath = reportPath
|
||
}
|
||
formData.id = id
|
||
formData.status = status
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
/**
|
||
* 提交用户表单数据
|
||
*/
|
||
const submit = () => {
|
||
formRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
if (!reportPath.value) {
|
||
return ElMessage({
|
||
message: '请上传处理成效报告',
|
||
type: 'warning'
|
||
})
|
||
}
|
||
if (formData.status == '3') {
|
||
// await quitRunningDeviceUpdate(formData)
|
||
ElMessage.success('重新发起成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
} else {
|
||
//此时该告警单处于待反馈状态
|
||
await addFeedback(formData)
|
||
//查询进线数据，避免一直处于loading状态
|
||
ElMessage.success('申请成功')
|
||
tableStore.index()
|
||
dialogVisible.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
defineExpose({ open })
|
||
|
||
|
||
let uploadName = ref('')
|
||
const choose = (e: any) => {
|
||
uploadFile(e.raw, '/supervision/').then(res => {
|
||
reportPath.value = res.data.name
|
||
formData.reportPath = res.data.name
|
||
})
|
||
}
|
||
|
||
|
||
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;
|
||
}
|
||
|
||
|
||
</style>
|