qmx_page_admin/src/views/create-order/components/order-detail-submodule/PaymentPlanModule.vue

<template>
  <div class="payment-plan-module">
    <TableCard
      :tableData="paymentPlanList"
      :columns="[
        {label: '序号', prop: 'code', width: '280'},
        {label: '预计回款时间', prop: 'time'},
        {label: '预计回款金额', prop: 'money'}
      ]"
      :width="'1108px'"
      :cellClass="'payment-plan-content-table'"
    >
      <template v-slot:money="{row}">
        <span>￥{{ formatNumber(row.row.money) }}</span>
      </template>
    </TableCard>
  </div>
</template>
<script>
import TableCard from '../../ui/TableCard.vue'
import { mapState } from 'vuex'
export default {
  name: 'PaymentPlanModule',
  components: {
    TableCard
  },
  data() {
    return {
      paymentPlanList: [
        {"code":1,"money":999,"time":"2025-04-22"},
        {"code":2,"money":7000,"time":"2025-04-23"},
        {"code":"合计","money":7999,"time":"-"}
      ],
      returnMoneyPlant: {}
    } 
  },
  mounted() {
    this.getPaymentPlanList()
  },
  computed: {
    ...mapState({
      orderDetail: state => state.order.orderDetail
    })
  },
  methods: {
    getPaymentPlanList() {
      this.returnMoneyPlant = this.orderDetail?.returnMoneyPlant || {};
      const listMap = this.orderDetail?.returnMoneyPlant?.list || {};

      let plantList = listMap.plantList;

      if (!plantList) {
        this.paymentPlanList = [];
        return;
      }

      try {
        plantList = JSON.parse(plantList);
      } catch (error) {
        console.error('Failed to parse plantList JSON:', error);
        plantList = [];
      }

      this.paymentPlanList = Array.isArray(plantList) ? plantList : [];
    },
    setState(state) {
      this.paymentPlanList = state;
    },
    formatNumber(num, x = 2) {
      return (num / 100).toFixed(x)
    }
  }
}
</script>