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" clearable>
                        <div class="search-form-contract-period-id hc-flex">
                            <el-tag :color="(item.approveStatus !== 0 || item.id === -1) ? '#e6a23c' : '#67c23a'" class="mr-8px" size="small" />
                            <span>{{ item.periodName }}</span>
                        </div>
                    </el-option>
                </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 v-if="approveStatus === 0" hc-btn type="primary" @click="reportClick">
                <HcIcon name="send-plane-2" />
                <span>上报</span>
            </el-button>
            <el-button v-if="approveStatus !== 0" :loading="undoLoading" hc-btn color="#FF7D43" class="text-white" @click="undoReportClick">撤销上报</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 #approveStatusName="{ row }">
                            <el-link v-if="row.approveStatusName !== '未上报' && row.approveStatusName !== '审批失败'" type="primary" @click="rowTableClick(row)">{{ row.approveStatusName }}</el-link>
                            <span v-else>{{ row.approveStatusName }}</span>
                        </template>
                        <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>
                    <template v-if="infoData.fileNames">
                        <div class="mt-5">附件名称</div>
                        <div class="hc-file-names mt-3">
                            {{ infoData.fileNames }}
                        </div>
                    </template>
                    <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>
                        <hc-empty v-else />
                    </div>
                </hc-card-item>
            </div>
        </div>
        <!-- 新增/修改 -->
        <HcDataModal v-model="isDataModal" :info-data="newInfoData" :ids="editId" :period-id="searchForm.meterPeriodId" @finish="finishData" />

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

        <!-- 任务流程 -->
        <HcTaskModal v-model="isTaskModal" :ids="taskDataId" @close="taskDataId = ''" />
    </hc-new-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { backMeterTask } from '~api/other'
import { useAppStore } from '~src/store'
import HcDataModal from './components/order/dataModal.vue'
import HcTaskModal from '~src/components/task-modal/task-modal.vue'
import { deepClone, getArrValue, getObjValue, isNullES } 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
    const { error, code, data } = await mainApi.getPage({
        ...searchForm.value,
        contractId: contractId.value,
    })
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total']
        if (tableData.value.length > 0) {
            await getDetail(tableData.value[0].id)
        } else {
            infoData.value = {}
        }
        tableLoading.value = false
    } else {
        tableData.value = []
        searchForm.value.total = 0
        tableLoading.value = false
    }
}
//获取详情
const infoData = ref({})
const getDetail = async (id) => {
    const { data } = await mainApi.detail({ id })
    const res = getObjValue(data)
    infoData.value = res
    newInfoData.value = res
}
//查看附件
const viewFile = (item) => {
    toPdfPage(item.filePdfUrl)
}
//表格选择
const tableCheckChange = () => {

}
const hanleRow = ({ row }) => {
    getDetail(row.id)
}
//新增
const isDataModal = ref(false)
const addModalClick = () => {
    editId.value = ''
    newInfoData.value = {}
    nextTick(()=> {
        isDataModal.value = true
    })
}
const editId = ref('')
const newInfoData = ref({})
//修改
const rowEditClick = (row) => {
    editId.value = row.id
    newInfoData.value = deepClone(row)
    nextTick(()=> {
        isDataModal.value = true
    })
}
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().then()
    } 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()
}

//审批状态
const isTaskModal = ref(false)
const taskDataId = ref('')
const rowTableClick = ({ taskId }) => {
    if (isNullES(taskId)) {
        window.$message.warning('暂无审批数据')
        return
    }
    taskDataId.value = taskId
    setTimeout(()=> {
        isTaskModal.value = true
    }, 200)
}

//撤销上报
const undoLoading = ref(false)
const undoReportClick = async () => {
    undoLoading.value = true
    const { meterPeriodId } = searchForm.value
    const { isRes } = await backMeterTask({
        periodId: meterPeriodId,
        type: 2,
    })
    undoLoading.value = false
    if (!isRes) return
    window.$message.success('撤回成功')
    reportFinish()
}
</script>

<style scoped lang="scss">
.hc-file-names {
    position: relative;
    background: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}
</style>