measure/src/views/debit-pay/start-work/order.vue

<template>
    <hc-new-card>
        <template #header>
            <div class="w-40">
                <el-select v-model="searchForm.meterPeriodId" placeholder="选择计量期" filterable clearable block @change="searchKey1Click">
                    <el-option v-for="item in key1Data" :key="item.id" :label="item.periodName" :value="item.id" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" :disabled="approveStatus !== 0" @click="addModalClick">
                <HcIcon name="add" />
                <span>新增</span>
            </el-button>
            <el-button hc-btn type="primary" :disabled="approveStatus !== 0" @click="reportClick">
                <HcIcon name="send-plane-2" />
                <span>上报</span>
            </el-button>
        </template>
        <div class="relative h-full flex">
            <div class="flex-1">
                <hc-card-item>
                    <hc-table
                        :column="tableColumn" :datas="tableData" :loading="tableLoading"
                        is-new is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
                        is-current-row @selection-change="tableCheckChange" @row-click="hanleRow"
                    >
                        <template #action="{ row }">
                            <el-link type="success" :disabled="approveStatus !== 0" @click="rowEditClick(row)">修改</el-link>
                            <el-link type="danger" :disabled="approveStatus !== 0" @click="delRowClick(row)">删除</el-link>
                        </template>
                    </hc-table>
                    <template #action>
                        <hc-pages :pages="searchForm" @change="pageChange" />
                    </template>
                </hc-card-item>
            </div>
            <div class="ml-3 w-[600px]">
                <hc-card-item title="详情信息" scrollbar>
                    <hc-info-table>
                        <tr>
                            <hc-info-table-td center is-title>计量期：</hc-info-table-td>
                            <hc-info-table-td width="120px">{{ infoData?.periodNumber }}</hc-info-table-td>
                            <hc-info-table-td center is-title>业务日期：</hc-info-table-td>
                            <hc-info-table-td width="120px">{{ infoData?.businessDate }}</hc-info-table-td>
                        </tr>
                        <tr>
                            <hc-info-table-td center is-title>计量金额：</hc-info-table-td>
                            <hc-info-table-td width="120px">{{ infoData?.meterMoney }}</hc-info-table-td>
                            <hc-info-table-td center is-title>开工预付款总额：</hc-info-table-td>
                            <hc-info-table-td width="120px">{{ infoData?.startPayAmount }}</hc-info-table-td>
                        </tr>
                        <tr>
                            <hc-info-table-td center is-title>申请依据：</hc-info-table-td>
                            <hc-info-table-td width="auto" colspan="3">{{ infoData?.applyCause }}</hc-info-table-td>
                        </tr>
                    </hc-info-table>
                    <div class="mt-5">附件列表</div>
                    <div class="mt-3">
                        <template v-if="infoData?.fileList?.length > 0">
                            <el-check-tag v-for="item in infoData?.fileList" :key="item.id" checked class="mr-2" @click="viewFile(item)">{{ item.fileName }}</el-check-tag>
                        </template>

                        <HcNoData v-else />
                    </div>
                </hc-card-item>
            </div>
        </div>
        <!-- 新增/修改 -->
        <HcDataModal v-model="isDataModal" :info-data="infoData" :ids="editId" @close="finishData" />

        <!-- 上报弹窗 -->
        <hc-report-dialog v-model="isReport" :info="reportInfo" @finish="reportFinish" />
    </hc-new-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { useAppStore } from '~src/store'
import HcDataModal from './components/order/dataModal.vue'
import { getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/debit-pay/start-work/order.js'
import periodApi from '~api/debit-pay/material/periods.js'
import { HcDelMsg } from 'hc-vue3-ui'
import { toPdfPage } from '~uti/btn-auth'

const useAppState = useAppStore()
const contractId = ref(useAppState.getContractId)

defineOptions({
    name: 'DebitPayStartWorkOrder',
})

//渲染完成
onActivated(async () => {
    await getKey1Data()
    getTableData().then()
})

onActivated(() => {
    getKey1Data()
})

//计量期
const key1Data = ref([])
const approveStatus = ref(0)
const getKey1Data = async ()=>{
    const { error, code, data } = await periodApi.allPeriod({
       contractId:contractId.value,
       type:2,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        let newArr = getArrValue(data), info = getObjValue(newArr[newArr.length - 1])
        searchForm.value.meterPeriodId = info.id
        approveStatus.value = info.approveStatus
        key1Data.value = newArr
    } else {
        key1Data.value = []
    }
}
//搜索表单
const searchForm = ref({
    meterPeriodId: null, current: 1, size: 20, total: 0,
})

//计量期
const searchKey1Click = () => {
    let info = getObjValue(key1Data.value.find((item) => item.id === searchForm.value.meterPeriodId))
    approveStatus.value = info.approveStatus
    searchForm.value.current = 1
    getTableData()
}

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

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'periodName', name: '计量期' },
    { key: 'businessDate', name: '业务日期' },
    { key: 'meterMoney', name: '计量金额' },
    { key: 'approveStatusName', name: '审批状态' },
    { key: 'action', name: '操作', width: 94 },
])
const tableData = ref([
])
const getTableData = async () => {
    tableLoading.value = true
    console.log(searchForm.value, 'searchForm.value')
    const { error, code, data } = await mainApi.getPage({
       ...searchForm.value,
       contractId:contractId.value,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total']
        if (tableData.value.length > 0) {
            getDetail(tableData.value[0].id)
        } else {
            infoData.value = {}
        }
    } else {
        tableData.value = []
        searchForm.value.total = 0

    }
}
//获取详情
const infoData = ref({})
const getDetail = async (id)=>{
    const { error, code, data } = await mainApi.detail({
       id,
    })
    if (!error && code === 200) {
        infoData.value = getObjValue(data)

    } else {
        infoData.value = {}
    }
}
//查看附件
const viewFile = (item)=>{
    toPdfPage(item.filePdfUrl)
}
//表格选择
const tableCheckChange = () => {

}
const hanleRow = ({ row })=>{
    getDetail(row.id)
}
//新增
const isDataModal = ref(false)
const addModalClick = () => {
    isDataModal.value = true
    editId.value = ''
}
const editId = ref('')
//修改
const rowEditClick = (row) => {
    isDataModal.value = true
    editId.value = row.id
}
const delRowClick = (row)=>{
    HcDelMsg( async ( resolve) => {
            await removeProPay(row.id)
            resolve() //关闭弹窗的回调
     })
    
}
const removeProPay = async (id) => {
    const { error, code, msg } = await mainApi.remove({
        ids: id,
    })
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
       getTableData()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
const finishData = ()=>{
    isDataModal.value = false
    getTableData()
}

//是否上报
const isReport = ref(false)
const reportInfo = ref({})
const reportClick = () => {
    reportInfo.value = {
        type: 3,
        periodId: searchForm.value.meterPeriodId,
    }
    nextTick(() => {
        isReport.value = true
    })
}

//上报完成
const reportFinish = () => {
    window.location.reload()
}
</script>

<style scoped lang="scss">

</style>