Newer
Older
xc-business-system / src / views / resource / customer / contract / detail.vue
<!-- 合同执行变更登记表 -->
<script name="ResourceCustomerContractDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { getStream, handleCustomerAdvice, sendTo } from '@/api/resource/contract'
import FilterCustomerStaff from '@/views/resource/common/filterCustomerStaff.vue'
import filePreview from '@/components/filePreview/filePreview.vue'
import { getBase64, getObjectURL } from '@/utils/download'
import { exportFile } from '@/utils/exportUtils'
import { printPdf } from '@/utils/printUtils'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const printFileName = ref('') // 文件名
const $route = useRoute()
const $router = useRouter()
const fromPage = ref('') // 来源页面
const pdfUrl = ref('') // pdfurl
const pdfStream = ref() as any // pdf流
const customerName = ref('') // 委托方
// --------------------------------------路由参数----------------------------------------------
// 从路由中获取页面类型参数
if ($route.params) {
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// -----------------------------------------按钮--------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
// 导出word
const exportWord = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: infoId.value, pdf: false }).then((res) => {
    exportFile(res.data, '合同执行变更登记表.doc')
    loading.close()
  })
}

// 导出pdf
const exportPdf = () => {
  exportFile(pdfStream.value, '合同执行变更登记表.pdf')
}

// 打印
const print = () => {
  const blobUrl = URL.createObjectURL(pdfStream.value)
  printPdf(blobUrl)
}
// -----------------------------------------------------------------------------------------------
/**
 * 初始化
 */
function init() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: infoId.value, pdf: true }).then((res) => {
    pdfStream.value = new Blob([res.data])
    getBase64(res.data).then((res) => {
      pdfUrl.value = res as string
    })
    loading.close()
  })
}
// ----------------------------------------------发送给委托方-----------------------------------------
const refCustomerStaffFilter = ref()
// 点击 发送 按钮
const sendToCustomer = () => {
  refCustomerStaffFilter.value.showOrHideFilterDialog(true, customerName.value, true)
}

const sysUserSelectedHandler = (row: any) => {
  refCustomerStaffFilter.value.showOrHideFilterDialog(false)

  if (row.id !== '') {
    sendTo({ id: infoId.value, noticeUserId: row.id, noticeUserName: row.name }).then((res) => {
      if (res.code === 200) {
        // 提示保存成功
        ElMessage.success(`通知单发送到送检单位 ${row.customerName} 的 ${row.name} 成功`)
      }
      else {
        // 提示失败信息
        ElMessage.error(`通知单发送至送检单位失败:${res.message}`)
      }
    })
  }
  else {
    ElMessage.error('发送给委托方人员不能为空,请重新选择')
  }
}

// 处理受检系统委托方的意见,暂时提供给测试使用, 正式部署需要删除
const handleCustomer = (type: 'agree' | 'refuse') => {
  const title = type === 'agree' ? '同意' : '拒绝'
  const params = {
    customerAdvice: type === 'agree' ? '同意' : '拒绝',
    customerAdviceTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    id: infoId.value,
  }
  handleCustomerAdvice(params).then(() => {
    ElMessage.success(`已${title}`)
  })
}
// -----------------------------------------钩子--------------------------------------------------
onMounted(() => {
  customerName.value = $route.query.customerName as string
  console.log('委托方名称', customerName.value)

  init()
})
</script>

<template>
  <div class="certManage-apply">
    <app-container>
      <detail-page v-loading="loading" title="合同执行变更登记表">
        <template #btns>
          <el-button v-if="fromPage !== 'equipment'" type="success" @click="handleCustomer('agree')">
            同意(模拟受检操作,提供测试使用,之后删除)
          </el-button>
          <el-button v-if="fromPage !== 'equipment'" type="danger" @click="handleCustomer('refuse')">
            拒绝(模拟受检操作,提供测试使用,之后删除)
          </el-button>
          <el-button v-if="fromPage !== 'equipment'" type="primary" @click="sendToCustomer">
            发送给委托方
          </el-button>
          <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportWord">
            导出word
          </el-button>
          <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportPdf">
            导出pdf
          </el-button>
          <el-button v-if="fromPage !== 'equipment'" type="primary" @click="print">
            打印
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
      </detail-page>
      <filter-customer-staff ref="refCustomerStaffFilter" title="请选择委托方" @record-selected="sysUserSelectedHandler" />
      <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;">
        <file-preview :pdf-url="pdfUrl" style="width: 70%;" />
      </div>
    </app-container>
  </div>
</template>

<style lang="scss">
.certManage-apply {
  .el-radio__label {
    display: block !important;
  }
}
</style>