报告模版

2025-03-24 08:56:08 +08:00
parent 403ddbfb6e
commit 834230b26a
6 changed files with 441 additions and 61 deletions
--- a/frontend/src/views/system/template/components/reportPopup.vue
+++ b/frontend/src/views/system/template/components/reportPopup.vue
@@ -0,0 +1,280 @@
+<template>
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogSmall">
+        <el-form ref="dialogFormRef" :model="formContent" :rules="rules">
+            <el-form-item label="名称" prop="name">
+                <el-input v-model="formContent.name" placeholder="请输入报告名称" />
+            </el-form-item>
+            <el-form-item label="版本号" prop="version">
+                <el-input v-model="formContent.version" placeholder="请输入版本号" />
+            </el-form-item>
+            <el-form-item label="基础模板文件" prop="baseFile">
+                <el-upload
+                    action="#"
+                    :limit="1"
+                    :on-change='BaseHandleChange'
+                    :auto-upload="false"
+                    :file-list="baseFileList"
+                    :on-exceed="BaseHandleExceed"
+                    :on-remove="BaseHandleRemove"
+                    class="upload-container"
+                >
+                    <el-button type="primary">选择文件</el-button>
+                  
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="检测项模版文件" prop="detailFile">
+                <el-upload
+                    action="#"
+                    :limit="1"
+                    :on-change='DataHandleChange'
+                    :auto-upload="false"
+                    :file-list="detailFileList"
+                    :on-exceed="DataHandleExceed"
+                     :on-remove="DataHandleRemove"
+                     class="upload-container"
+                >
+                    <el-button type="primary">选择文件</el-button>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="描述信息" prop="description">
+                <el-input v-model="formContent.description" type="textarea" placeholder="请输入描述信息" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div>
+                <el-button @click="close()">取 消</el-button>
+                <el-button type="primary" @click="save()">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {  dialogSmall } from '@/utils/elementBind'
+import { type PqReport } from '@/api/device/interface/report'
+import { ElMessage,  UploadFile } from 'element-plus'
+import { updatePqReport, addPqReport, getPqReportById } from '@/api/device/report'
+import { computed, reactive, ref } from 'vue'
+
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+let excelFormData = new FormData()
+
+const baseFileName = ref('')
+const baseFileUrl = ref('')
+const detailFileName = ref('')
+const detailFileUrl = ref('')
+
+const baseFileList = computed(() => {
+    if (baseFileName.value && baseFileUrl.value) {
+        return [{ name: baseFileName.value, url: baseFileUrl.value }];
+    }
+    return [];
+});
+
+const detailFileList = computed(() => {
+    if (detailFileName.value && detailFileUrl.value) {
+        return [{ name: detailFileName.value, url: detailFileUrl.value }];
+    }
+    return [];
+});
+
+function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const titleType = ref('add')
+    const formContent = ref<PqReport.ResReport>({
+        id: '',
+        name: '',
+        version: '', // 版本号
+        description: '', // 描述信息
+        detailFile:'',//检测项模版文件路径
+        baseFile:'',
+        state: 1,
+    })
+    return { dialogVisible, titleType, formContent }
+}
+
+const { dialogVisible, titleType, formContent } = useMetaInfo()
+
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+        id: '',
+        name: '',
+        version: '', // 版本号
+        description: '', // 描述信息
+        detailFile:'',//检测项模版文件路径
+        baseFile:'',
+        state: 1,
+    }
+
+}
+
+let dialogTitle = computed(() => {
+    return titleType.value === 'add' ? '新增报告模版' : '编辑报告模版'
+})
+
+// 关闭弹窗
+const close = () => {
+    excelFormData = new FormData()
+    dialogVisible.value = false
+    resetFormContent()
+    dialogFormRef.value?.resetFields()
+}
+
+// 表单验证规则
+const rules = reactive({
+    name: [{ required: true, message: '请输入报告名称', trigger: 'blur' }],
+    version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
+    baseFile: [{ required: true, message: '请上传基础模板文件', trigger: 'change' }],
+    detailFile: [{ required: true, message: '请上传检测项模版文件', trigger: 'change' }],
+})
+
+// 保存数据
+const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+            if (valid) {
+                // 清空 excelFormData
+                excelFormData.delete('id')
+                excelFormData.delete('name')
+                excelFormData.delete('version')
+                excelFormData.delete('description')
+
+                excelFormData.append('name', formContent.value.name)
+                excelFormData.append('version', formContent.value.version)
+                excelFormData.append('description', formContent.value.description)
+                if (formContent.value.id) {
+                    
+                    excelFormData.append('id', formContent.value.id)
+                    await updatePqReport(excelFormData);
+                    ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                    } else {  
+                    await addPqReport(excelFormData);
+                    ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                    
+                }
+            
+                close()
+                // 刷新表格
+                await props.refreshTable!()
+            }
+            
+        })
+    } catch (err) {
+        console.error('验证过程中出现错误', err)
+    }
+}
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open = async (sign: string, data?: PqReport.ResReport) => {
+    titleType.value = sign
+    dialogVisible.value = true
+    if (data?.id) {
+        await getPqReportById(data).then((res) => {
+            formContent.value.id = res.data.id
+            formContent.value.name = res.data.name
+            formContent.value.version = res.data.version
+            formContent.value.description = res.data.description
+            
+           
+             // 处理文件信息
+             if (res.data.baseFileVO) {
+                baseFileName.value= res.data.baseFileVO.name;
+                baseFileUrl.value= res.data.baseFileVO.url;
+
+                formContent.value.baseFile = res.data.baseFileVO.name
+            }
+            if (res.data.detailFileVO) {
+                detailFileName.value= res.data.detailFileVO.name;
+                detailFileUrl.value= res.data.detailFileVO.url;
+
+                formContent.value.detailFile = res.data.detailFileVO.name
+            }
+
+     
+        })
+    } else {
+        baseFileName.value =''
+        baseFileUrl.value = ''
+        detailFileName.value = ''
+        detailFileUrl.value = ''
+        resetFormContent();
+        dialogFormRef.value?.resetFields()
+         // 清空 excelFormData
+         excelFormData = new FormData();
+         
+    }
+   
+}
+
+const DataHandleRemove = () => {
+    excelFormData.delete('detailFile');  
+    formContent.value.detailFile = ''
+};
+
+const BaseHandleRemove = () => {
+    excelFormData.delete('baseFile');
+    formContent.value.baseFile = ''
+};
+
+const BaseHandleExceed = (files: File[]) => {
+    // 移除旧文件
+    excelFormData.delete('baseFile');
+    // 添加新文件
+    if (files.length > 0) {
+        const newFile = files[0] as unknown as UploadFile;
+        baseFileName.value = newFile.name;
+        excelFormData.append('baseFile', newFile as Blob, newFile.name);
+
+         formContent.value.detailFile = newFile.name
+    }
+   
+};
+
+const DataHandleExceed = (files: File[]) => {
+    // 移除旧文件
+    excelFormData.delete('detailFile');
+
+      // 添加新文件
+      if (files.length > 0) {
+        const newFile = files[0] as UploadFile;
+        detailFileName.value = newFile.name;
+        excelFormData.append('detailFile', newFile as Blob, newFile.name);
+
+         formContent.value.detailFile = newFile.name
+    }
+  
+};
+
+const BaseHandleChange = async(param : UploadFile) => {
+    baseFileName.value = param.name;
+    baseFileUrl.value = URL.createObjectURL(param.raw as Blob);
+    excelFormData.append('baseFile', param.raw as Blob, param.name);
+   
+    formContent.value.baseFile = param.name;
+};
+
+const DataHandleChange = async(param: UploadFile) => {
+    detailFileName.value = param.name;
+    detailFileUrl.value = URL.createObjectURL(param.raw as Blob);
+    excelFormData.append('detailFile', param.raw as Blob, param.name);
+    
+    formContent.value.detailFile = param.name;
+};
+
+
+
+// 对外映射
+defineExpose({ open })
+const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined
+}>()
+</script>
+<style scoped>
+.upload-container {
+    display: flex;
+    align-items: center;
+}
+
+</style>
--- a/frontend/src/views/system/template/index.vue
+++ b/frontend/src/views/system/template/index.vue
@@ -9,13 +9,6 @@
        <!-- 表格 header 按钮 -->
        <template #tableHeader='scope'>
          <el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
-          <el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
-          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('')"
-                     v-if='modeStore.currentMode != "比对式"'>导入
-          </el-button>
-          <el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile('比对式')"
-                     v-if='modeStore.currentMode === "比对式"'>导入
-          </el-button>
          <el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                     @click='batchDelete(scope.selectedListIds)'>
            删除
@@ -32,42 +25,29 @@
  
      </ProTable>
    </div>
-    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
-    <ImportExcel ref='deviceImportExcel'/>
+    <ReportPopup :refresh-table='proTable?.getTableList' ref='reportPopup'/>
+
  </template>
  
  <script setup lang='tsx' name='useRole'>
-  import TimeControl from '@/components/TimeControl/index.vue'
  import {type PqReport} from '@/api/device/interface/report.ts'
  import {useHandleData} from '@/hooks/useHandleData'
  import {useDownload} from '@/hooks/useDownload'
  import ProTable from '@/components/ProTable/index.vue'
-  import ImportExcel from '@/components/ImportExcel/index.vue'
  import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
-  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
+  import ReportPopup from '@/views/system/template/components/reportPopup.vue'
  import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
  import {useDictStore} from '@/stores/modules/dict'
-  import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev} from '@/api/device/device/index.ts'
-  import {ElMessageBox} from 'element-plus'
-  import {onBeforeMount, reactive, ref} from 'vue'
-  import {useAppSceneStore, useModeStore} from '@/stores/modules/mode'
-  
-  // defineOptions({
-  //   name: 'device',
-  // })
-  const modeStore = useModeStore()
-  const dictStore = useDictStore()
-  const appSceneStore = useAppSceneStore()
+  import {getPqReportList,deletePqReport} from '@/api/device/report/index.ts'
+  import {reactive, ref} from 'vue'
+
  // ProTable 实例
  const proTable = ref<ProTableInstance>()
-  const devicePopup = ref()
+  const reportPopup = ref()

-  
  const getTableList = async (params: any) => {
-    // let newParams = JSON.parse(JSON.stringify(params))
-    // const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
-    // newParams.pattern = patternId
-    // return getPqDevList(newParams)
+     let newParams = JSON.parse(JSON.stringify(params))
+     return  getPqReportList(newParams)
  }
  
  
@@ -89,16 +69,20 @@
  
    },
    {
-      prop: 'basePath',
+      prop: 'baseFile',
      label: '基础模板文件路径',
      minWidth: 150,
-  
+      render: scope => {
+        return scope.row.baseFileVO.url
+      }
    },
    {
-      prop: 'detailPath',
+      prop: 'detailFile',
      label: '检测项模版文件路径',
      minWidth: 150,
-  
+      render: scope => {
+          return scope.row.detailFileVO.url
+      }
    },
    {
    prop: 'createTime',
@@ -122,25 +106,27 @@
    {prop: 'operation', label: '操作', fixed: 'right', width: 200},
  ])
  
-  
- 
+
  // 打开 drawer(新增、编辑)
  const openDialog = (titleType: string, row: Partial<PqReport.ResReport> = {}) => {
-    
+      reportPopup.value.open(titleType, row)
  }
  
  
  // 批量删除报告模版
  const batchDelete = async (id: string[]) => {
-  
+    await useHandleData(deletePqReport, id, '删除所选报告模版')
+
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
  }
  
  // 删除报告模版
  const handleDelete = async (params:PqReport.ResReport) => {
-    
+    await useHandleData(deletePqReport,  [params.id], `删除【${params.name}】报告模版`)
+    proTable.value?.getTableList()
  
  }
  
-
  </script>