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

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >
      <el-row :gutter="20" class="flex-wrap" style="margin-right: 0">
        <el-form-item label="工程号" prop="projectNo">
          <el-input
            v-model="queryParams.projectNo"
            placeholder="请输入工程号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="使用单位名称" prop="unitName">
          <el-input
            v-model="queryParams.unitName"
            placeholder="请输入使用单位名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="使用登记证编号" prop="certificateNo">
          <el-input
            v-model="queryParams.certificateNo"
            placeholder="请输入使用登记证编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="报告编号" prop="reportNo">
          <el-input
            v-model="queryParams.reportNo"
            placeholder="请输入报告编号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
      </el-row>

      <el-row :gutter="20" class="flex-wrap" style="margin-right: 0">
        <el-form-item label="审核状态" prop="status">
          <el-select
            multiple
            v-model="queryParams.status"
            placeholder="请选择审核状态"
            clearable
            class="!w-240px"
          >
            <el-option label="审核中" value="100" />
            <el-option label="已通过" value="200" />
            <el-option label="已拒绝" value="300" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <DeptSelect
            v-model="queryParams.deptId"
            placeholder="请选择部门"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="是否办证" prop="hasCertificateNo">
          <el-select
            v-model="queryParams.hasCertificateNo"
            placeholder="请选择是否办证"
            clearable
            class="!w-240px"
          >
            <el-option label="已办证" value="1" />
            <el-option label="未办证" value="0" />
          </el-select>
        </el-form-item>

      </el-row>

      <el-row class="flex justify-end mt-2">
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
            type="primary"
            plain
            @click="handleExport"
            :loading="exportLoading"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
<!--          <el-button-->
<!--            type="primary"-->
<!--            plain-->
<!--            @click="generateTest()"-->
<!--          >-->
<!--            <Icon icon="ep:plus" class="mr-5px" /> 新增-->
<!--          </el-button>-->

        </el-form-item>
      </el-row>

    </el-form>

  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border @selection-change="handleSelectionChange">

      <el-table-column type="selection" align="center" width="40" />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="工程号" align="center" prop="projectNo" min-width="180px"/>
      <el-table-column label="使用单位名称" align="center" prop="unitName" min-width="270px"/>
      <el-table-column label="报告编号" align="center" prop="reportNo" min-width="180px"/>
<!--      <el-table-column label="使用登记证编号" align="center" prop="certificateNo" min-width="200px"/>-->
      <el-table-column
        label="申请日期"
        align="center"
        prop="submitTime"
        :formatter="dateFormatter"
        width="160px"
      >
        <template #default="{ row }">
          <div>{{ formatDate(row.submitTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="审核日期"
        align="center"
        prop="approvalTime"
        :formatter="dateFormatter"
        width="160px"
      >
        <template #default="{ row }">
          {{ formatDate(row.approvalTime) }}
        </template>
      </el-table-column>
<!--      <el-table-column label="审核人" align="center" prop="approvalName" min-width="100px">-->
<!--        <template #default="{ row }">-->
<!--          <div>{{ row.approvalName || '-' }}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="提交人" align="center" prop="submitName" min-width="100px">-->
<!--        <template #default="{ row }">-->
<!--          <div>{{ row.submitName || '-' }}</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="备注" align="center" prop="remark" min-width="150px"/>
      <el-table-column label="部门" align="center" prop="deptName" min-width="150px"/>
      <el-table-column label="审核状态" align="center" prop="status" min-width="100px">
        <template #default="{ row }">
          <el-tag v-if="row.status === 100" type="warning">审核中</el-tag>
          <el-tag v-else-if="row.status === 200" type="success">已通过</el-tag>
          <el-tag v-else-if="row.status === 300" type="danger">已拒绝</el-tag>
          <div v-else>{{ '-' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="240px" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="handleViewPdf(scope.row)">查看</el-button>
          <el-button link type="primary" @click="handlePrint(scope.row)" v-if="scope.row.status === 200"> 打印 </el-button>
          <el-button link type="primary" @click="handleAudit(scope.row)" v-if="scope.row.status == null">提交审核</el-button>
          <el-button link type="primary" @click="handleApprove(scope.row)" v-if="scope.row.status === 100">通过</el-button>
          <el-button link type="danger" @click="handleReject(scope.row)" v-if="scope.row.status === 100">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- PDF预览弹窗 -->
  <PdfPreviewDialog
    v-model="pdfPreviewVisible"
    :pdfBlob="currentPdfBlob"
    @close="handlePdfPreviewClose"
  />

</template>

<script setup lang="ts">
import {dateFormatter, formatArrayDate, formatDate} from '@/utils/formatTime'
import download from '@/utils/download'
import { PipeUseRegistrationReportApi, PipeUseRegistrationReportVO } from '@/api/pressure2/pipeuseregistrationreport'
import DeptSelect from "@/views/pressure2/pipescheduling/components/DeptSelect.vue";
import {PipeInputApi} from "@/api/pressure2/pipeInput";
import PdfPreviewDialog from "@/views/pressure2/boilertaskorder/PdfPreviewDialog.vue";
import 'https://printjs-4de6.kxcdn.com/print.min.js'

/** 管道使用登记 列表 */
defineOptions({ name: 'pipeUseRegistrationReport' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<PipeUseRegistrationReportVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
// 状态筛选
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  taskOrderId: undefined,
  templateId: undefined,
  createTime: [],
  reportNo: undefined,
  status: undefined,
  remark: undefined,
  reportName: undefined,
  approvalId: undefined,
  approvalTime: [],
  approvalName: undefined,
  submitId: undefined,
  submitTime: [],
  submitName: undefined,
  projectNo: undefined,
  unitName: undefined,
  certificateNo: undefined,
  deptId: undefined,
  hasCertificateNo: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const selectedRows = ref<PipeUseRegistrationReportVO[]>([]) // 勾选的行

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await PipeUseRegistrationReportApi.getPipeUseRegistrationReportPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 勾选变化 */
const handleSelectionChange = (rows: PipeUseRegistrationReportVO[]) => {
  selectedRows.value = rows
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PipeUseRegistrationReportApi.deletePipeUseRegistrationReport(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

// const generateTest = async () => {
//
//   const params = {
//     taskOrderId: '65fd02581d5eb08852500502217b405a'
//   }
//   await PipeUseRegistrationReportApi.generatePipeUseRegistrationReport(params)
//
// }

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    exportLoading.value = true
    // 有勾选时导出勾选的数据，否则导出全部
    const params: any = { ...queryParams }
    if (selectedRows.value.length > 0) {
      params.ids = selectedRows.value.map(row => row.id).join(',')
    }
    const data = await PipeUseRegistrationReportApi.exportPipeUseRegistrationReport(params)
    download.excel(data, '管道使用登记.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

// PDF预览相关
const pdfPreviewVisible = ref(false)
const currentPdfBlob = ref<Blob | null>(null)
const handleViewPdf = async (row) => {

  let data: any[] = []
  data.push({
    taskStatus: 100,
    resultTemplateId: '',
    templateId: row.templateId,
    id: row.id,
  })

  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: '正在生成...'
  })

  try {
    // 调用 API 获取 ZIP blob
    const pdfBlob = await PipeInputApi.handlePrint(data)

    if (pdfBlob) {

      currentPdfBlob.value = pdfBlob
      pdfPreviewVisible.value = true

    } else {
      ElMessage.error('获取文件失败')
    }
  } catch (error) {
    console.error('预览失败:', error)
    ElMessage.error('预览失败')
  } finally {
    loadingInstance.close()
  }

}

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

// 打印
const printRow = ref<any>({})
const handlePrint = async (row) => {

  let data: any[] = []
  data.push({
    taskStatus: 100,
    resultTemplateId: '',
    templateId: row.templateId,
    id: row.id,
  })

  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: '正在打印...'
  })

  try {

    const pdfBlob = await PipeInputApi.handlePrint(data)

    if (pdfBlob) {
      // 创建临时 URL
      const pdfUrl = URL.createObjectURL(pdfBlob)

      // 使用 printJS 打印
      printJS({
        printable: pdfUrl,
        type: 'pdf',
        showModal: false,
        onPrintDialogClose: () => {
          // 打印对话框关闭后释放 URL
          URL.revokeObjectURL(pdfUrl)
        },
      })
    } else {
      ElMessage.error('获取打印文件失败')
    }
  } catch (error) {
    console.error('打印失败:', error)
    ElMessage.error('打印失败')
  }finally {
    loadingInstance.close()
  }

}

/** 提交审核 */
const handleAudit = async (row) => {
  try {
    await message.confirm('确定提交审核吗？')
    await PipeUseRegistrationReportApi.auditPipeUseRegistrationReport({ id: row.id })
    message.success('提交审核成功')
    await getList()
  } catch {}
}

/** 审核通过 */
const handleApprove = async (row) => {
  try {
    await message.confirm('确定通过该审核吗？')
    await PipeUseRegistrationReportApi.approvePipeUseRegistrationReport({ id: row.id, status: 200 })
    message.success('审核通过成功')
    await getList()
  } catch {}
}

/** 审核拒绝 */
const handleReject = async (row) => {
  try {
    await message.confirm('确定拒绝该审核吗？')
    await PipeUseRegistrationReportApi.approvePipeUseRegistrationReport({ id: row.id, status: 300 })
    message.success('已拒绝该审核')
    await getList()
  } catch {}
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>