预告警问题详情查看

src/views/pqs/supervise/technology/feedbackPopup.vue

@@ -1,58 +1,76 @@
 <template>
-  <el-dialog
-      draggable
-      class='cn-operate-dialog'
-      v-model='dialogVisible'
-      :title='title'
-     width="450px"
-      top='30vh'
-  >
-    <el-scrollbar>
-      <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
+    <el-dialog
+        draggable
+        class='cn-operate-dialog'
+        v-model='dialogVisible'
+        :title='title'
+        width='450px'
+        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='问题详情：'>
+                    <el-input
+                        v-model='formData.issueDetail'
+                        autocomplete='off'
+                        type='textarea'
+                        :autosize='{minRows:2,maxRows:6}'
+                        readonly
+                    />
+                </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-item label='问题附件：' v-if='showFile'>
+                    <el-icon>
+                        <Link />
+                    </el-icon>
+                    <a :href='problemDetail.problemPath' target='_blank'>{{ problemDetail.problemName }}</a>
+                </el-form-item>
 
-      </el-form>
-    </el-scrollbar>
+                <el-form-item label='采取的措施：' prop='takeStep'>
+                    <el-input
+                        v-model='formData.takeStep'
+                        autocomplete='off'
+                        placeholder='请输入采取的措施'
+                        type='textarea'
+                    />
+                </el-form-item>
 
-    <template #footer>
+                <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>
+    </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 { getFileNameAndFilePath, uploadFile } from '@/api/system-boot/file'
 import { addFeedback } from '@/api/supervision-boot/leaflet'
+import { Link } from '@element-plus/icons-vue'
 
 //下拉数据源
 const title = ref('')
@@ -63,10 +81,18 @@ const uploadRef = ref()
 const dialogVisible = ref(false)
 // 注意不要和表单ref的命名冲突
 const formData = reactive({
-  id: '',
-  status: '',
-  takeStep: '',
-  reportPath: ''
+    id: '',
+    status: '',
+    issueDetail: '',
+    takeStep: '',
+    reportPath: ''
+})
+//附件是否显示
+const showFile = ref(false)
+
+const problemDetail = reactive({
+    problemPath: '',
+    problemName: ''
 })
 
 //处理成效报告
@@ -74,56 +100,69 @@ const reportPath = ref('')
 
 //form表单校验规则
 const rules = {
-  takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }]
+    takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }]
 }
 const resetForm = () => {
-  if (formRef.value) {
-    formRef.value.resetFields()
-  }
+    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 open = async (text: string, id: string, status: any, issueDetail: string, problemPath?: string, 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
+    formData.issueDetail = issueDetail
+    //判断附件是否存在，如果存在则回显出让用户可以点击下载
+    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
+    }
+
+    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
-      }
-    }
-  })
+    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 })
@@ -131,33 +170,33 @@ 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
-  })
+    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)
+    uploadRef.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadRef.value!.handleStart(file)
 }
 
 //上传报告改变
 const uploadFileName = val => {
-  uploadName.value = val
+    uploadName.value = val
 }
 </script>
 
 <style scoped lang='scss'>
 .el-upload-list__item {
-  transition: none !important;
+    transition: none !important;
 }
 
 .el-select {
-  min-width: 180px;
+    min-width: 180px;
 }