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" @click="addModalClick">
                <HcIcon name="add" />
                <span>新增</span>
            </el-button>
            <el-button hc-btn type="primary" @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 }"
                        @selection-change="tableCheckChange"
                    >
                        <template #action="{ row }">
                            <el-link type="success" @click="rowEditClick(row)">修改</el-link>
                            <el-link type="danger" @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">{{ 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" />
    </hc-new-card>
</template>

<script setup>
import { onActivated, onMounted, ref } from 'vue'
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 { useAppStore } from '~src/store'
import { delMessageV2 } from '~com/message/index.js'
const useAppState = useAppStore()
const contractId = ref(useAppState.getContractId)

defineOptions({
    name: 'DebitPayStartWorkOrder',
})

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

onActivated(() => {
    getKey1Data()
})
//计量期
const key1Data = ref([])
const getKey1Data = async ()=>{
    const { error, code, data } = await periodApi.allPeriod({
       contractId:contractId.value,
       type:2,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        key1Data.value = getArrValue(data)
    } else {
        key1Data.value = []
    }
}
//搜索表单
const searchForm = ref({
    key1: null, current: 1, size: 10, total: 0,
})

//计量期

const searchKey1Click = () => {
    getTableData()
}

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

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'periodNumber', 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'])
        if (tableData.value.length > 0) {
            getDetail(tableData.value[0].id)
        } else {
            infoData.value = {}
        }
    } else {
        tableData.value = []
       
    }
}
//获取详情
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 tableCheckChange = () => {

}

//新增
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 = async (row)=>{
    delMessageV2(async (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                removeProPay(row.id)
                instance.confirmButtonLoading = false
                done()
            } else {
                done()
            }
    })
}
const removeProPay = async (id) => {
    const { error, code } = await mainApi.remove({
        ids: id, 
    })
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
       getTableData()
     
    }
}
const finishData = ()=>{
    isDataModal.value = false
    getTableData()
}
//是否上报
const isReport = ref(false)
const reportClick = () => {
    isReport.value = true
}
</script>

<style scoped lang="scss">

</style>