feat: 6月15日任务完90%

曹睿

昨天 4b1304917b0b16b09dd50191fab59d96933c0cf3

 src/views/salesManagement/receiptPaymentLedger/index.vue

@@ -11,151 +11,237 @@
            clearable
            prefix-icon="Search"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
          >搜索</el-button
        >
      </div>
    </div>
    <div style="display: flex">
      <div class="table_list">
        <el-table :data="tableData" border v-loading="tableLoading"
                  :row-key="row => row.id"
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          :row-key="(row) => row.id"
                  show-summary
                  :summary-method="summarizeMainTable"
                  @row-click = "rowClickMethod"
                  height="calc(100vh - 18.5em)">
          <el-table-column align="center" label="序号" type="index" width="60" />
          <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip/>
          <el-table-column label="开票金额(元)" prop="invoiceTotal" show-overflow-tooltip :formatter="formattedNumber"/>
          <el-table-column label="回款金额(元)" prop="receiptPaymentAmount" show-overflow-tooltip :formatter="formattedNumber"/>
          <el-table-column label="未回款金额(元)" prop="unReceiptPaymentAmount" show-overflow-tooltip :formatter="formattedNumber"/>
          height="calc(100vh - 18.5em)"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="60"
          />
          <el-table-column
            label="客户名称"
            prop="customerName"
            show-overflow-tooltip
          />
          <el-table-column
            label="开票金额(元)"
            prop="invoiceTotal"
            show-overflow-tooltip
            :formatter="formattedNumber"
          />
          <el-table-column
            label="回款金额(元)"
            prop="receiptPaymentAmount"
            show-overflow-tooltip
            :formatter="formattedNumber"
          />
          <el-table-column
            label="应收金额(元)"
            prop="unReceiptPaymentAmount"
            show-overflow-tooltip
          >
            <template #default="{ row, column }">
              <el-text type="danger">
                {{ formattedNumber(row, column, row.unReceiptPaymentAmount) }}
              </el-text>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current"
                    :limit="page.size" @pagination="paginationChange" />
        <pagination
          v-show="total > 0"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :page="page.current"
          :limit="page.size"
          @pagination="paginationChange"
        />
      </div>
      <div class="table_list">
        <el-table :data="receiptRecord" border
                  :row-key="row => row.id"
        <el-table
          :data="receiptRecord"
          border
          :row-key="(row) => row.id"
                  show-summary
                  :summary-method="summarizeMainTable1"
                  height="calc(100vh - 18.5em)">
          <el-table-column align="center" label="序号" type="index" width="60" />
          <el-table-column label="发生日期" prop="happenTime" show-overflow-tooltip/>
          <el-table-column label="开票金额(元)" prop="invoiceAmount" show-overflow-tooltip :formatter="formattedNumber"/>
          <el-table-column label="回款金额(元)" prop="receiptAmount" show-overflow-tooltip :formatter="formattedNumber"/>
          <el-table-column label="应收金额(元)" prop="unReceiptAmount" show-overflow-tooltip :formatter="formattedNumber"/>
          height="calc(100vh - 18.5em)"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="60"
          />
          <el-table-column
            label="发生日期"
            prop="happenTime"
            show-overflow-tooltip
          />
          <el-table-column
            label="开票金额(元)"
            prop="invoiceAmount"
            show-overflow-tooltip
            :formatter="formattedNumber"
          />
          <el-table-column
            label="回款金额(元)"
            prop="receiptAmount"
            show-overflow-tooltip
            :formatter="formattedNumber"
          />
          <el-table-column
            label="应收金额(元)"
            prop="unReceiptAmount"
            show-overflow-tooltip
          >
            <template #default="{ row, column }">
              <el-text type="danger">
                {{ formattedNumber(row, column, row.unReceiptAmount) }}
              </el-text>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="recordTotal > 0" :total="recordTotal" layout="total, sizes, prev, pager, next, jumper" :page="recordPage.current"
                    :limit="recordPage.size" @pagination="recordPaginationChange" />
        <pagination
          v-show="recordTotal > 0"
          :total="recordTotal"
          layout="total, sizes, prev, pager, next, jumper"
          :page="recordPage.current"
          :limit="recordPage.size"
          @pagination="recordPaginationChange"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  invoiceLedgerSalesAccount,
} from "../../../api/salesManagement/invoiceLedger.js";
import {
  customerInteractions
} from "../../../api/salesManagement/receiptPayment.js";
import { ref } from "vue";
import { invoiceLedgerSalesAccount } from "../../../api/salesManagement/invoiceLedger.js";
import { customerInteractions } from "../../../api/salesManagement/receiptPayment.js";
import Pagination from "../../../components/PIMTable/Pagination.vue";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const receiptRecord = ref([])
const tableLoading = ref(false)
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const receiptRecord = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
})
});
const recordPage = reactive({
  current: 1,
  size: 100,
})
const total = ref(0)
const recordTotal = ref(0)
});
const total = ref(0);
const recordTotal = ref(0);
const data = reactive({
  searchForm: {
    searchText: '',
    invoiceDate:''
  }
})
const customerId = ref('')
const { searchForm } = toRefs(data)
const originReceiptRecord = ref([])
    searchText: "",
    invoiceDate: "",
  },
});
const customerId = ref("");
const { searchForm } = toRefs(data);
const originReceiptRecord = ref([]);
// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
  page.current = 1;
  getList();
};
const paginationChange = (obj) => {
  console.log('paginationChange', current,limit)
  console.log("paginationChange", current, limit);
  page.current = obj.page;
  page.size = obj.limit;
  getList()
}
  getList();
};
const getList = () => {
  tableLoading.value = true
  invoiceLedgerSalesAccount({...searchForm.value, ...page}).then(res => {
    tableLoading.value = false
  tableLoading.value = true;
  invoiceLedgerSalesAccount({ ...searchForm.value, ...page }).then((res) => {
    tableLoading.value = false;
    tableData.value = res.data.records;
    total.value = res.data.total;
    if(tableData.value.length > 0) {
      recordPage.current = 1
      customerId.value = tableData.value[0].id
      recordPage.current = 1;
      customerId.value = tableData.value[0].id;
      receiptPaymentList(customerId.value);
    }
  })
}
  });
};
const formattedNumber = (row, column, cellValue) => {
  return parseFloat(cellValue).toFixed(2);
};
// 主表合计方法
const summarizeMainTable = (param) => {
  return proxy.summarizeTable(param, ['invoiceTotal', 'receiptPaymentAmount', 'unReceiptPaymentAmount'], {
  return proxy.summarizeTable(
    param,
    ["invoiceTotal", "receiptPaymentAmount", "unReceiptPaymentAmount"],
    {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });
    }
  );
};
// 子表合计方法
const summarizeMainTable1 = (param) => {
  var summarizeTable = proxy.summarizeTable(param, ['invoiceAmount', 'receiptAmount'], {
  var summarizeTable = proxy.summarizeTable(
    param,
    ["invoiceAmount", "receiptAmount"],
    {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });
  console.log('summarizeTable',summarizeTable)
  // 取最后一行数据
  if(receiptRecord.value?.length > 0) {
    summarizeTable[summarizeTable.length - 1] = receiptRecord.value[receiptRecord.value.length - 1].unReceiptAmount.toFixed(2);
  }else {
    summarizeTable[summarizeTable.length - 1] = 0.00
  }

  return summarizeTable
  );
  // 取最后一行数据;
  if (receiptRecord.value?.length > 0) {
    const index = tableData.value.findIndex(
      (item) => item.id == customerId.value
    );
    summarizeTable[summarizeTable.length - 1] =
      tableData.value[index].unReceiptPaymentAmount.toFixed(2);
  } else {
    summarizeTable[summarizeTable.length - 1] = 0.0;
  }
  // const sb = tableData.findIndex((item) => item.id == customerId.value);
  // console.log(sb);
  return summarizeTable;
};

const receiptPaymentList = (id) => {
  const param = {
    customerId:id
  }
  console.log('param', param)
  customerInteractions(param).then(res => {
    customerId: id,
  };
  console.log("param", param);
  customerInteractions(param).then((res) => {
    originReceiptRecord.value = res.data;
    handlePagination({ page: 1, limit: recordPage.size });
    recordTotal.value = res.data.length;
  })
}
  });
};

// 汇款记录列表分页
const recordPaginationChange = (pagination) => {
  handlePagination(pagination);
}
};

const rowClickMethod = (row) => {
  customerId.value = row.id;
  receiptPaymentList(customerId.value);
}
};

const handlePagination = ({ page, limit }) => {
  recordPage.current = page;
@@ -165,16 +251,13 @@
  const end = start + limit;

  receiptRecord.value = originReceiptRecord.value.slice(start, end);
}
};


getList()
getList();
</script>

<style scoped lang="scss">

.table_list {
  width: 50%;
}

</style>