measure/src/views/debit-pay/admin/certificate.vue

<template>
    <div class="relative h-full">
        <hc-new-card title="中期支付证书列表">
            <template #extra>
                <hc-tooltip keys="debit_pay_admin_certificate_recalculate_btn">
                    <el-button
                        :disabled="tableCheckedKeys.length <= 0"
                        hc-btn
                        type="warning"
                        :loading="recalculateLoading"
                        @click="recalculateClick"
                    >
                        重新计算
                    </el-button>
                </hc-tooltip>
                <el-button hc-btn type="primary" @click="addModalClick">
                    <hc-icon name="add" />
                    <span>新增</span>
                </el-button>
            </template>
            <hc-table
                :column="tableColumn"
                :datas="tableData"
                :loading="tableLoading"
                :index-style="{ width: 60 }"
                is-check
                :check-style="{ width: 29 }"
                @selection-change="tableSelectionChange"
            >
                <template #action="{ row }">
                    <el-link
                        v-loading="row.rowViewLoading"
                        type="primary"
                        :disabled="!row.rawUrl"
                        @click="rowViewRawPdf(row)"
                    >
                        查看电签报表
                    </el-link>
                    <el-link type="primary" @click="rowViewPdf(row)">
                        查看报表
                    </el-link>
                    <el-link
                        type="primary"
                        :disabled="row.approveStatus === 0"
                        @click="eVisaRowClick(row)"
                    >
                        查看电签流程
                    </el-link>
                    <el-link
                        type="success"
                        :disabled="row.isLock === 1"
                        @click="rowEditClick(row)"
                    >
                        修改
                    </el-link>
                    <el-link
                        type="danger"
                        :disabled="row.isLock === 1 || row.approveStatus === 2"
                        @click="rowDelClick(row)"
                    >
                        删除
                    </el-link>
                    <el-link
                        v-loading="row?.recalculateLoading"
                        :disabled="row.isLock === 1 || row.approveStatus !== 0"
                        @click="rowRecalculateClick(row)"
                    >
                        重新计算
                    </el-link>
                    <el-link type="warning" @click="rowLockingClick(row)">
                        {{
                            row.isLock === 1 ? "取消锁定" : "锁定"
                        }}
                    </el-link>
                </template>
            </hc-table>
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-new-card>

        <!-- 中间计量新增 -->
        <HcAddModal v-model="addModalShow" @finish="addModalFinish" />

        <!-- 中间计量编辑 -->
        <HcEditModal
            v-model="editModalShow"
            :ids="editModalIds"
            @finish="editModalFinish"
        />

        <!-- 查看报表 -->
        <hc-view-report v-model="isReportDrawer" :datas="pdfList" />
        <!-- 任务流程 -->
        <HcTaskModal
            v-model="isTaskModal"
            :ids="taskDataId"
            @close="taskDataId = ''"
        />
    </div>
</template>

<script setup>
import { onActivated, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { delMessage } from '~uti/tools'
import { getArrValue, isNullES } from 'js-fast-way'
import HcAddModal from './components/certificate/addModal.vue'
import HcEditModal from './components/certificate/editModal.vue'
import HcTaskModal from '~src/components/task-modal/task-modal.vue'
import mainApi from '~api/debit-pay/admin/certificate'
import taskApi from '~api/tasks/hc-data'
import { toPdfPage } from '~uti/btn-auth'
import { useRoute } from 'vue-router'

const useAppState = useAppStore()
const useRoutes = useRoute()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')

defineOptions({
    name: 'DebitPayAdminCertificate',
})

//渲染完成
onActivated(() => {
    getTableData()
})
const isReportDrawer = ref(false)
watch(
    () => useRoutes,
    (val) => {
        if (val) {
            isReportDrawer.value = false
        }
    },
    { immediate: true, deep: true },
)

//搜索表单
const searchForm = ref({ current: 1, size: 20, total: 0 })

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'periodNumber', name: '期号' },
    { key: 'certificateNumber', name: '证书编号' },
    { key: 'startDate', name: '开始日期' },
    { key: 'endDate', name: '结束日期' },
    { key: 'printDate', name: '打印日期' },
    { key: 'calculateDate', name: '重新计算时间' },
    // { key: 'payMoney', name: '支付金额' },
    { key: 'action', name: '操作', width: 440, align: 'center' },
])
const tableData = ref([])
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { data } = await mainApi.getPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    tableData.value = getArrValue(data['records'])
    searchForm.value.total = data.total || 0
    tableLoading.value = false
}

//新增
const addModalShow = ref(false)
const addModalClick = () => {
    addModalShow.value = true
}
const addModalFinish = () => {
    getTableData()
}

//多选
const tableCheckedKeys = ref([])
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}

//修改
const editModalShow = ref(false)
const editModalIds = ref('')
const rowEditClick = (row) => {
    editModalIds.value = row.id
    editModalShow.value = true
}
const editModalFinish = () => {
    getTableData()
    editModalIds.value = false
}

//删除
const rowDelClick = (row) => {
    delMessage(async () => {
        const { error, code, msg } = await mainApi.remove({ ids: row.id })
        if (!error && code === 200) {
            window.$message.success('删除成功')
            getTableData().then()
        } else {
            window.$message.error(msg ?? '删除失败')
        }
    })
}

//锁定还是解锁
const rowLockingClick = async (row) => {
    //isLock,是否锁定：0未锁定，1锁定
    const { error, code, msg } = await mainApi.setLocking({
        id: row.id,
        isLock: row.isLock,
    })
    if (!error && code === 200) {
        window.$message.success('操作成功')
        getTableData().then()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}

//重新计算
const recalculateLoading = ref(false)
const recalculateClick = async () => {
    const rows = tableCheckedKeys.value
    if (rows.length <= 0) {
        window.$message.warning('请先勾选一条数据')
        return
    }
    if (rows.length > 1) {
        window.$message.warning('目前仅支持选择一条数据')
        return
    }
    recalculateLoading.value = true
    const isRes = await postRecalculateApi(rows[0])
    recalculateLoading.value = false
    if (isRes) {
        editModalIds.value = false
        getTableData().then()
    }
}

//重新计算报表
const rowRecalculateClick = async (row) => {
    row.recalculateLoading = true
    const isRes = await postRecalculateApi(row)
    row.recalculateLoading = false
    if (isRes) {
        editModalIds.value = false
        getTableData().then()
    }
}

//发起重新计算请求
const postRecalculateApi = async ({ id }) => {
    const { error, code, msg } = await mainApi.recalculate({
        reportId: id,
        type: 0,
        taskType: 1,
    })
    if (!error && code === 200) {
        window.$message.success('操作成功')
        return true
    } else {
        window.$message.error(msg ?? '操作失败')
        return false
    }
}

//查看报表
const pdfList = ref([])
const rowViewPdf = (row) => {
    pdfList.value = []
    if (getArrValue(row?.urlListData).length > 0) {
        pdfList.value = getArrValue(row?.urlListData)
        console.log(pdfList.value, 'pdfList.value')
        isReportDrawer.value = true
    } else {
        window.$message.warning('暂无报表数据')
    }
}
const rowViewRawPdf = (row) => {
const { status } = row
 if (status === 1) {
     viewPdf(row)
 } else {
     toPdfPage(row?.rawUrl)
 }

   
}

//查看报表
const rowViewLoading = ref(false)
const viewPdf = async (row) => {
    const { id, taskId } = row
    row.rowViewLoading = true
    const { code, msg, data } = await taskApi.taskMeterPdfInfo({
        reportId: id,
        type: 0,
        taskType: 10,
        taskId: taskId,
    })
    row.rowViewLoading = false
    if (code === 200 && !isNullES(data)) {
        window.$message.success('操作成功')
        toPdfPage(data)
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}

//查看电签流程
const isTaskModal = ref(false)
const taskDataId = ref('')
const eVisaRowClick = ({ taskId }) => {
    if (isNullES(taskId)) {
        window.$message.warning('暂无电签数据')
        return
    }
    taskDataId.value = taskId
    setTimeout(() => {
        isTaskModal.value = true
    }, 200)
}
</script>

<style scoped lang="scss"></style>