Newer
Older
xc-metering-front / src / views / tested / MeasurementBusiness / review / components / edit.vue
liyaguang on 27 Sep 2023 2 KB feat(*): 文件流预览打印功能
<!-- 要求、委托书及合同评审表-详情 -->
<script lang="ts" setup name="ReviewDetail">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import fileView from './fileView.vue'
import approvalDialog from './ApprovalDialog.vue'
import { printPage } from '@/api/eqpt/MeasurementBusiness/review'
import { printContent } from '@/utils/exportUtils'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
// 显示标题
const textMap: { [key: string]: string } = {
  approve: '审批',
  detail: '详情',
}
// 对话框类型:create,update
const dialogStatus = ref('detail')
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  // if ($route.params.type !== 'create') {
  //   const data = JSON.parse($route.query.row as string)
  //   ruleForm.value = data
  // }
}
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, data.id)
}
// 打印
const print = () => {
  printPage({ id: $route.query.id, pdf: true }).then((res) => {
    // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    printContent(res.data)
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page :title="`要求、委托书及合同评审表-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="$route.path.includes('detail')" type="primary" @click="print">
          打印
        </el-button>
        <el-button v-if="$route.path.includes('approve')" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="$route.path.includes('approve')" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button type="info" @click="close()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <file-view :id="$route.query.id as string" />
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>