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

<template>
    <div class="relative h-full">
        <hc-new-card title="中期支付证书列表">
            <template #extra>
                <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" is-new :index-style="{ width: 60 }">
                <template #action="{ row }">
                    <el-link type="primary" @click="isReportDrawer = true">查看报表</el-link>
                    <el-link type="success" @click="rowEditClick(row)">修改</el-link>
                    <el-link type="danger" @click="rowDelClick(row)">删除</el-link>
                    <el-link>重新计算</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" />
    </div>
</template>

<script setup>
import { getArrValue } from 'js-fast-way'
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { delMessage } from '~uti/tools'
import HcAddModal from './components/certificate/addModal.vue'
import HcEditModal from './components/certificate/editModal.vue'
import mainApi from '~api/debit-pay/admin/certificate'

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

defineOptions({
    name: 'DebitPayAdminCertificate',
})

//渲染完成
onMounted(() => {
    getTableData()
})

const isReportDrawer = ref(false)

//搜索表单
const searchForm = ref({ current: 1, size: 10, 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: 280 },
])
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 editModalShow = ref(false)
const editModalIds = ref('')
const rowEditClick = (row) => {
    editModalIds.value = row.id
    editModalShow.value = true
}
const editModalFinish = () => {
    getTableData()
}

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

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

<style scoped lang="scss">

</style>