中间支付申请

src/views/debit-pay/admin/components/middlepay/detailsModal.vue

@@ -3,7 +3,7 @@
         <hc-table ref="tableRef" is-new is-expand :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading">
             <template #table-expand="{ row, index: index1 }">
                 <div class="relative p-2">
-                    <hc-table is-new :is-index="false" :column="tableColumn1" :datas="tableData1">
+                    <hc-table is-new :is-index="false" :column="tableColumn1" :datas="row.detail">
                         <template #index-key="{ index: index2 }">
                             {{ index1 + 1 }}-{{ index2 + 1 }}
                         </template>
@@ -20,9 +20,19 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import { getArrValue } from 'js-fast-way'
+import mainApi from '~api/debit-pay/admin/middlepay'
 
 const props = defineProps({
-    ids: {
+    projectId: {
+        type: [String, Number],
+        default: '',
+    },
+    contractId: {
+        type: [String, Number],
+        default: '',
+    },
+    periodId: {
         type: [String, Number],
         default: '',
     },
@@ -31,6 +41,9 @@ const props = defineProps({
 //事件
 const emit = defineEmits(['close'])
 const tableRef = ref(null)
+const period_id = ref(props.periodId)
+const pid = ref(props.projectId)
+const cid = ref(props.contractId)
 
 //双向绑定
 // eslint-disable-next-line no-undef
@@ -40,31 +53,48 @@ const isShow = defineModel('modelValue', {
 
 //监听
 watch(() => [
-    props.ids,
-], ([ids]) => {
-    console.log('ids', ids)
-}, { immediate: true })
+    props.projectId,
+    props.contractId,
+    props.periodId,
+], ([projectId, contractId, periodId]) => {
+    pid.value = projectId
+    cid.value = contractId
+    period_id.value = periodId
+}, { deep: true })
 
 //监听
 watch(isShow, (val) => {
-    if (val) {}
+    if (val) {
+        getTableData()
+    } else {
+        tableData.value = []
+    }
 })
 
 //表格数据
 const tableLoading = ref(false)
 const tableColumn = [
     { key: 'action', name: '操作', width: 130, align: 'center' },
-    { key: 'key1', name: '清单编号', width: 120, align: 'center' },
-    { key: 'key2', name: '清单名称' },
-    { key: 'key3', name: '变更后数量', width: 120, align: 'center' },
-    { key: 'key4', name: '计量数量', width: 120, align: 'center' },
-    { key: 'key5', name: '单价', width: 120, align: 'center' },
-    { key: 'key6', name: '完成金额', width: 120, align: 'center' },
+    { key: 'formNumber', name: '清单编号', width: 120, align: 'center' },
+    { key: 'formName', name: '清单名称' },
+    { key: 'changeTotal', name: '变更后数量', width: 120, align: 'center' },
+    { key: 'allMeterTotal', name: '计量数量', width: 120, align: 'center' },
+    { key: 'currentPrice', name: '单价', width: 120, align: 'center' },
+    { key: 'allMeterMoney', name: '完成金额', width: 120, align: 'center' },
 ]
-const tableData = ref([
-    { id: '1', key1: '1111' }, { id: '2', key1: '2222' }, { id: '3', key1: '3333' },
-])
+const tableData = ref([])
 
+//获取明细数据
+const getTableData = async () => {
+    tableLoading.value = true
+    const { data } = await mainApi.getFormDetail({
+        projectId: pid.value,
+        contractId: cid.value,
+        contractPeriodId: period_id.value,
+    })
+    tableData.value = getArrValue(data)
+    tableLoading.value = false
+}
 
 //展开
 const unfoldClick = (row) => {
@@ -80,23 +110,16 @@ const awayClick = (row) => {
 
 const tableColumn1 = [
     { key: 'index-key', name: '序号', width: 90, align: 'center' },
-    { key: 'key1', name: '凭证编号', width: 100, align: 'center' },
-    { key: 'key2', name: '计量期', width: 100, align: 'center' },
-    { key: 'key3', name: '工程部位' },
-    { key: 'key4', name: '审核状态', width: 120, align: 'center' },
-    { key: 'key5', name: '本期计量数量', width: 120, align: 'center' },
-    { key: 'key6', name: '计量总金额', width: 120, align: 'center' },
+    { key: 'key1', name: '凭证编号(暂无此字段)', width: 100, align: 'center' },
+    { key: 'meterPeriodName', name: '计量期', width: 100, align: 'center' },
+    { key: 'engineerDivide', name: '工程部位' },
+    { key: 'approveStatusName', name: '审核状态', width: 120, align: 'center' },
+    { key: 'currentMeterTotal', name: '本期计量数量', width: 120, align: 'center' },
+    { key: 'currentMeterMoney', name: '计量总金额', width: 120, align: 'center' },
 ]
-const tableData1 = ref([
-    { key1: '1111' }, { key1: '2222' }, { key1: '3333' },
-])
 
 const modalClose = () => {
     isShow.value = false
     emit('close')
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/views/debit-pay/admin/middlepay.vue

@@ -48,7 +48,7 @@
         <HcAddModal v-model="addModalShow" :ids="addModalIds" :project-id="projectId" :contract-id="contractId" :type="isAddModalType" :all-periods="key1Data" :period-id="searchForm.contractPeriodId" @finish="addModalFinish" />
 
         <!-- 清单明细 -->
-        <HcDetailsModal v-model="detailsModalShow" />
+        <HcDetailsModal v-model="detailsModalShow" :project-id="projectId" :contract-id="contractId" :period-id="searchForm.contractPeriodId" />
 
         <!-- 上报弹窗 -->
         <hc-report-dialog v-model="isReport" />