预告警单工作流基础版本

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

@@ -0,0 +1,163 @@
+<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='请输入采取的措施'
+          />
+        </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>