yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/reportArchivingPipe/index.vue

<!--
 * @Author: zhuMingXi
 * @Date: 2025/11/21 11:44:10
 * @LastEditors: zhuMingXi
 * @LastEditTime: 2025/11/21 11:44:10
 * @Description: 报告管理
 * @FilePath:  FilePath
 -->

<template>
  <SmartTable
    ref="smartTableRef"
    v-model:pageNo="pageNo"
    v-model:pageSize="pageSize"
    v-model:total="total"
    v-model:columns="columns"
    :showSettingTools="false"
    :data="tableData"
    :buttons="[]"
    :show-refresh="false"
    :page-sizes="[20, 30, 50, 100]"
    :height="calcTableHeight"
    @on-page-no-change="() => getListPageFn()"
    @on-page-size-change="() => getListPageFn()"
    @on-reset="() => getListPageFn()"
    @on-search="() => getListPageFn()"
    @refresh="() => getListPageFn()"
    @expand-change="getCalcHeight"
  />

<!--  <PreviewPdfDialog-->
<!--    v-if="showDocPdfDialog"-->
<!--    v-model:visible="showDocPdfDialog"-->
<!--    :docPdfUrls="docPdfUrls"-->
<!--  />-->

  <!-- PDF预览弹窗 -->
  <PdfPreviewDialog
    v-model="pdfPreviewVisible"
    :pdfBlob="currentPdfBlob"
    @close="handlePdfPreviewClose"
  />
</template>
<script lang="tsx" setup>
defineOptions({ name: 'reportArchivingPipe' })
import SmartTable from '@/components/SmartTable/SmartTable'
import FetchApis from './index.api'
import { cloneDeep } from 'lodash-es'
import { SmartInstanceExpose, SmartTableColumn } from '@/types/table'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import { PressurePipeCheckTypeList } from '@/utils/constants'
import { formatDate } from '@/utils/formatTime'
import { isEmpty } from '@/utils/is'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import {PipeTaskOrderApi} from "@/api/pressure2/pipetaskorder";
import PdfPreviewDialog from "@/views/pressure2/pipetaskorder/PdfPreviewDialog.vue";

const { loadDone, loadStart } = usePageLoading()
const router = useRouter()

const issueReportTypeList = [
  {
    label: '电子报告、实体报告',
    value: 0
  },
  {
    label: '实体报告',
    value: 1
  },
  {
    label: '电子报告',
    value: 2
  }
]
const issueMethodList = [
  {
    label: '小程序推送、邮箱',
    value: 0
  },
  {
    label: '小程序推送',
    value: 1
  },
  {
    label: '邮箱',
    value: 2
  },
  {
    label: '快递邮寄',
    value: 3
  },
  {
    label: '业务员送达',
    value: 4
  },
  {
    label: '线下领取',
    value: 5
  },
  {
    label: '其他',
    value: 6
  }
]

const smartTableRef = ref<SmartInstanceExpose>()

const columns = ref<SmartTableColumn[]>([
  {
    label: '序号',
    fieldProps: {
      type: 'index',
      align: 'center',
      width: 80,
      fixed: 'left'
    }
  },
  {
    label: '操作',
    fieldProps: {
      align: 'center',
      minWidth: 150,
      fixed: 'left'
    },
    render: (row) => {
      return (
        <>
          <el-button type="primary" link onClick={() => handleDetail(row)}>
            详情
          </el-button>
          <el-button type="primary" link onClick={() => handlePreviewReport(row)}>
            查看报告
          </el-button>
        </>
      )
    }
  },
  {
    label: '当前状态',
    fieldProps: {
      align: 'center',
      minWidth: 100
    },
    render: (_row) => {
      return (
        <el-tag type="success" effect="dark">
          已归档
        </el-tag>
      )
    }
  },
  {
    label: '任务单号',
    prop: 'orderNo',
    search: {
      type: 'input',
      fieldProps: {
        placeholder: '请输入任务单号'
      },
      sort: 1
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '报告编号',
    prop: 'reportNo',
    search: {
      type: 'input',
      fieldProps: {
        placeholder: '请输入报告编号'
      },
      sort: 6
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '工程名称',
    prop: 'equipName',
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '工程号',
    prop: 'equipCode',
    search: {
      type: 'input',
      fieldProps: {
        placeholder: '请输入工程号'
      },
      sort: 2
    },
    fieldProps: {
      align: 'center',
      minWidth: 185,
      showOverflowTooltip: true
    }
  },
  // {
  //   label: '产品编号',
  //   prop: 'productNo',
  //   search: {
  //     type: 'input',
  //     fieldProps: {
  //       placeholder: '请输入产品编号'
  //     },
  //     sort: 5
  //   },
  //   fieldProps: {
  //     align: 'center',
  //     minWidth: 150,
  //     showOverflowTooltip: true
  //   }
  // },
  {
    label: '使用登记证编号',
    prop: 'useRegisterNo',
    search: {
      type: 'input',
      // label: '使用证编号',
      fieldProps: {
        placeholder: '请输入使用登记证编号'
      },
      sort: 4
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '主检人',
    prop: 'mainCheckerUser',
    search: {
      type: 'selectUserModal',
      prop: 'mainCheckerIds',
      fieldProps: {
        multiple: false,
        placeholder: '请选择主检人'
      },
      sort: 3
    },
    fieldProps: {
      align: 'center',
      minWidth: 120,
      showOverflowTooltip: true
    },
    render: (_row, value) => {
      return _row?.mainCheckerUser ? _row?.mainCheckerUser?.nickname : '-'
    }
  },
  {
    label: '使用单位',
    prop: 'useUnitName',
    search: {
      type: 'input',
      fieldProps: {
        placeholder: '请输入使用单位'
      },
      sort: 3
    },
    fieldProps: {
      align: 'center',
      minWidth: 200,
      showOverflowTooltip: true
    }
  },
  {
    label: '审批日期',
    prop: 'ratifyTime',
    search: {
      type: 'daterange',
      sort: 7
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    },
    render: (_row, value) => {
      return formatDate(value, 'YYYY-MM-DD')
    }
  },
  {
    label: '审批人',
    prop: 'ratifyName',
    search: {
      type: 'selectUserModal',
      prop: 'ratifyId',
      fieldProps: {
        placeholder: '请输入审批人',
        multiple: false
      },
      sort: 11
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '检验性质',
    prop: 'checkType',
    search: {
      type: 'select',
      options: PressurePipeCheckTypeList,
      fieldProps: {
        placeholder: '请选择检验性质'
      },
      sort: 9
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    },
    render: (_row, value) => {
      return PressurePipeCheckTypeList.find((item) => item.value === value)?.label || ''
    }
  },
  {
    label: '受理日期',
    prop: 'schedulingTime',
    search: {
      type: 'daterange',
      sort: 8
    },
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    },
    render: (_row, value) => {
      return formatDate(value, 'YYYY-MM-DD')
    }
  },
  {
    label: '报告类型',
    prop: 'issueReportType',
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    },
    render: (_row, value) => {
      return issueReportTypeList.find((item) => item.value === value)?.label || ''
    }
  },
  {
    label: '报告发放次数',
    prop: 'issueReportNum',
    fieldProps: {
      align: 'center',
      minWidth: 150,
      showOverflowTooltip: true
    }
  },
  {
    label: '是否发放',
    prop: 'isIssue',
    fieldProps: {
      align: 'center',
      minWidth: 150
    },
    render: (_row, value) => {
      return value === 1 ? '是' : '否'
    }
  },
  {
    label: '发放方式',
    prop: 'issueMethod',
    fieldProps: {
      align: 'center',
      minWidth: 150
    },
    render: (_row, value) => {
      return issueMethodList.find((item) => item.value === value)?.label || ''
    }
  },
  {
    label: '发放日期',
    prop: 'issueTime',
    fieldProps: {
      align: 'center',
      minWidth: 150
    },
    render: (_row, value) => {
      return formatDate(value, 'YYYY-MM-DD')
    }
  },
  {
    label: '部门',
    prop: 'deptName',
    search: {
      prop: 'deptId',
      type: 'DeptSelect',
      fieldProps: {
        placeholder: '请选择部门',
        class: '!w-full'
      },
      sort: 10
    },
    fieldProps: {
      align: 'center',
      minWidth: 150
    }
  }
])
const tableData = ref<Recordable[]>([])

const pageNo = ref(1)
const pageSize = ref(20)
const total = ref(0)

const getPageParams = () => {
  if (!smartTableRef.value) return {}
  const result = cloneDeep(smartTableRef.value.getSearchForm())
  const arrFields = ['ratifyTime', 'schedulingTime', 'issueTime']
  for (const key in result) {
    if (isEmpty(result[key])) {
      delete result[key]
      continue
    }
    if (Array.isArray(result[key]) && result[key].length === 2 && arrFields.includes(key)) {
      result[key + 'Start'] = dayjs(result[key][0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      result[key + 'End'] = dayjs(result[key][1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      delete result[key]
    }
  }
  return result
}

const calcTableHeight = ref('calc(100vh - 300px)')
const getCalcHeight = () => {
  setTimeout(() => {
    nextTick(() => {
      const top = smartTableRef.value?.getTableRef()?.$el?.getBoundingClientRect()?.top || 350
      const h = top + 125
      calcTableHeight.value = `calc(100vh - ${h}px)`
    })
  }, 300)
}
// 获取业务受理列表数据
const getListPageFn = async () => {
  loadStart()
  let params = {
    ...getPageParams(),
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }
  FetchApis.archivePage(params)
    .then((result) => {
      tableData.value = result?.list || []
      total.value = result?.total || 0
    })
    .finally(() => {
      loadDone()
    })
}

const handleDetail = (row) => {
  router.push({
    name: 'ReportArchivingPipeDetail',
    query: {
      id: row.id
    }
  })
}

const showDocPdfDialog = ref(false)
const docPdfUrls = ref<string[]>([])
// PDF预览相关
const pdfPreviewVisible = ref(false)
const currentPdfBlob = ref<Blob | null>(null)
// 查看报告
const handlePreviewReport = async(row: any) => {
  if (!row.orderId) return

  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: '正在生成...'
  })
  try {
    // 获取PDF字节流
    const response = await PipeTaskOrderApi.generateReportPdf({
      orderId: row.orderId
    }, { responseType: 'blob' }) // 确保以blob格式接收响应

    // 创建Blob对象
    const blob = new Blob([response], { type: 'application/pdf' })

    // 设置当前PDF blob并显示预览弹窗
    currentPdfBlob.value = blob
    pdfPreviewVisible.value = true

  } catch (error) {
    console.error('预览PDF失败:', error)
    ElMessage.error('预览PDF失败')
  } finally {
    // 关闭 Loading
    loadingInstance.close()
  }

}

// PDF预览关闭处理
const handlePdfPreviewClose = () => {
  currentPdfBlob.value = null
}

onMounted(() => {
  getCalcHeight()
  getListPageFn()
})
</script>
<style scoped lang="scss">
:deep(.el-table) {
  .el-table__row {
    cursor: pointer;
  }
}
</style>