admin-sjzx/src/views/pqs/supervise/technology/feedbackPopup.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>