fix: 功能优化完善，分期待还相关。

src/views/invest/creditInstallmentAnalysis/index.vue

@@ -148,17 +148,26 @@
       <div class="content-con">
         <div v-show="radioVal === '柱状图'" class="chart" id="chartBar"></div>
         <div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryDetailList">
+        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="reversedTableData">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="还款日期" align="center" prop="time" />
+          <el-table-column label="还款日期" align="center" prop="time" width="200" />
           <el-table-column label="待还款金额" align="center" prop="value" />
-          <el-table-column prop="detail" label="待还款明细" width="700" v-if="queryParams.type === 1">
+          <el-table-column prop="detail" label="待还款明细" width="900" v-if="queryParams.type === 1">
             <template #default="scope">
-              <span v-html="formatMultiLineData(scope.row.detail)"></span>
+              <div v-if="scope.row.detailList && scope.row.detailList.length > 0">
+                <div
+                  v-for="(item, index) in scope.row.detailList"
+                  :key="index"
+                  style="padding: 6px 8px; margin-bottom: 4px; background: #f5f7fa; border-radius: 4px"
+                >
+                  {{ item.bankCardLendName }}(本金:{{ item.principal }}元,利息:{{ item.interest }}元,合计:{{ item.currentAmount }}元)
+                </div>
+              </div>
+              <span v-else v-html="formatMultiLineData(scope.row.detail)"></span>
             </template>
           </el-table-column>
         </el-table>
@@ -293,7 +302,8 @@ const historyObj = ref({
   dueDetail: '',
   repaidDetail: '',
   leftDetail: '',
-  historyDetailList: []
+  historyDetailList: [],
+  tableHistoryDetailList: []
 })
 
 const chartData = ref({
@@ -301,6 +311,14 @@ const chartData = ref({
   value1: []
 })
 
+// 计算属性：倒序后的表格数据
+const reversedTableData = computed(() => {
+  if (historyObj.value.tableHistoryDetailList && historyObj.value.tableHistoryDetailList.length > 0) {
+    return [...historyObj.value.tableHistoryDetailList].reverse()
+  }
+  return []
+})
+
 function getList() {
   loading.value = true
   chartData.value = { name: [], value1: [] }

src/views/invest/onlineLendAnalysis/index.vue

@@ -148,22 +148,86 @@
       <div class="content-con">
         <div v-show="radioVal === '柱状图'" class="chart" id="chartBar"></div>
         <div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryDetailList">
+        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="reversedTableData">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="还款日期" align="center" prop="time" />
+          <el-table-column label="还款日期" align="center" prop="time" width="200" />
           <el-table-column label="待还款金额" align="center" prop="value" />
-          <el-table-column prop="detail" label="待还款明细" width="700" v-if="queryParams.type === 1">
+          <el-table-column prop="detail" label="待还款明细" width="900" v-if="queryParams.type === 1">
             <template #default="scope">
-              <span v-html="formatMultiLineData(scope.row.detail)"></span>
+              <div v-if="scope.row.detailList && scope.row.detailList.length > 0">
+                <div
+                  v-for="(item, index) in scope.row.detailList"
+                  :key="index"
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 6px 8px;
+                    margin-bottom: 4px;
+                    background: #f5f7fa;
+                    border-radius: 4px;
+                  "
+                >
+                  <span style="flex: 1"
+                    >{{ item.bankCardLendName }}(本金:{{ item.principal }}元,利息:{{ item.interest }}元,合计:{{ item.currentAmount }}元)</span
+                  >
+                  <el-button size="small" type="primary" icon="Coin" @click="handleRepayment(item)">还款</el-button>
+                </div>
+              </div>
+              <span v-else v-html="formatMultiLineData(scope.row.detail)"></span>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </div>
+
+    <!-- 还款对话框 -->
+    <el-dialog title="贷款还款" v-model="repaymentOpen" width="500px" append-to-body>
+      <el-form ref="repaymentFormRef" :model="repaymentForm" :rules="repaymentRules" label-width="120px">
+        <el-form-item label="贷款机构">
+          <el-input v-model="repaymentForm.bankCardLendName" disabled />
+        </el-form-item>
+        <el-form-item label="还款日期" prop="repaymentDate">
+          <el-date-picker
+            clearable
+            v-model="repaymentForm.repaymentDate"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择还款日期"
+            style="width: 100%"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="应还本金" prop="principal">
+          <el-input v-model="repaymentForm.principal" type="number" @input="calculateTotalAmount" placeholder="请输入应还本金" />
+        </el-form-item>
+        <el-form-item label="应还利息" prop="interest">
+          <el-input v-model="repaymentForm.interest" type="number" @input="calculateTotalAmount" placeholder="请输入应还利息" />
+        </el-form-item>
+        <el-form-item label="合计金额">
+          <el-input v-model="repaymentForm.currentAmount" disabled />
+        </el-form-item>
+        <el-form-item label="还款状态" prop="postingState">
+          <el-select v-model="repaymentForm.postingState" placeholder="请选择还款状态" style="width: 100%">
+            <el-option label="已还款" value="1"></el-option>
+            <el-option label="未还款" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="repaymentForm.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitRepayment">确 定</el-button>
+          <el-button @click="repaymentOpen = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -196,6 +260,7 @@ const dates = [
 const loading = ref(true)
 const total = ref(0)
 const radioVal = ref('柱状图')
+const repaymentOpen = ref(false)
 
 const creditCardList = ref([])
 const dateValidate = (rules, value, callback) => {
@@ -231,10 +296,26 @@ const data = reactive({
   },
   rules: {
     time: [{ validator: dateValidate, dateType: 'months', num: 35, dateRange: '月', message: '时间跨度不能大于36个月，默认选择开始日期的36个月' }]
+  },
+  repaymentForm: {
+    id: null,
+    bankCardLendName: '',
+    repaymentDate: '',
+    principal: 0,
+    interest: 0,
+    currentAmount: 0,
+    postingState: '1',
+    remark: ''
+  },
+  repaymentRules: {
+    repaymentDate: [{ required: true, message: '还款日期不能为空', trigger: 'blur' }],
+    principal: [{ required: true, message: '应还本金不能为空', trigger: 'blur' }],
+    interest: [{ required: true, message: '应还利息不能为空', trigger: 'blur' }],
+    postingState: [{ required: true, message: '还款状态不能为空', trigger: 'change' }]
   }
 })
 
-const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+const { queryParams, queryCreditCardParams, rules, repaymentForm, repaymentRules } = toRefs(data)
 const handleCreditChange = (id) => {
   queryParams.value.id = id
   getList()
@@ -294,7 +375,8 @@ const historyObj = ref({
   dueDetail: '',
   repaidDetail: '',
   leftDetail: '',
-  historyDetailList: []
+  historyDetailList: [],
+  tableHistoryDetailList: []
 })
 
 const chartData = ref({
@@ -302,6 +384,14 @@ const chartData = ref({
   value1: []
 })
 
+// 计算属性：倒序后的表格数据
+const reversedTableData = computed(() => {
+  if (historyObj.value.tableHistoryDetailList && historyObj.value.tableHistoryDetailList.length > 0) {
+    return [...historyObj.value.tableHistoryDetailList].reverse()
+  }
+  return []
+})
+
 function getList() {
   loading.value = true
   chartData.value = { name: [], value1: [] }
@@ -537,6 +627,47 @@ const handleRadioChange = (type) => {
       break
   }
 }
+
+/** 还款按钮操作 */
+function handleRepayment(item) {
+  repaymentForm.value = {
+    id: item.id,
+    bankCardLendName: item.bankCardLendName,
+    repaymentDate: dayjs(new Date().getTime()).format('YYYY-MM-DD'),
+    principal: item.principal,
+    interest: item.interest,
+    currentAmount: item.currentAmount,
+    postingState: '1',
+    remark: ''
+  }
+  repaymentOpen.value = true
+}
+
+/** 计算合计金额 */
+function calculateTotalAmount() {
+  const principal = parseFloat(repaymentForm.value.principal) || 0
+  const interest = parseFloat(repaymentForm.value.interest) || 0
+  repaymentForm.value.currentAmount = (principal + interest).toFixed(2)
+}
+
+/** 提交还款 */
+function submitRepayment() {
+  proxy.$refs.repaymentFormRef.validate((valid) => {
+    if (valid) {
+      proxy.$modal
+        .confirm('是否确认已还款？')
+        .then(function () {
+          // TODO: 这里需要调用后端接口更新还款状态
+          // 示例: return updateInstallmentDetail(repaymentForm.value)
+          proxy.$modal.msgSuccess('还款成功')
+          repaymentOpen.value = false
+          getList() // 刷新列表
+        })
+        .catch(() => {})
+    }
+  })
+}
+
 getCreditCardList()
 getList()
 </script>

src/views/invest/onlineLendHistory/index.vue

@@ -227,6 +227,9 @@
                       </el-tooltip>
                     </template>
                     <template v-else>
+                      <el-tooltip class="item" effect="dark" content="还款" placement="top">
+                        <el-button icon="Coin" v-hasPermi="['invest:installmentHistory:edit']" circle @click="handleRepayment(scope.row)"></el-button>
+                      </el-tooltip>
                       <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
                         <el-button :icon="item.icon" v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
                       </el-tooltip>
@@ -594,6 +597,22 @@ function handleUpdateDetail(row) {
   })
 }
 
+/** 还款按钮操作 */
+function handleRepayment(row) {
+  resetDetail()
+  getInstallmentDetail(row.id).then((response) => {
+    formDetail.value = response.data
+    // 默认设置还款状态为已还款
+    formDetail.value.postingState = '1'
+    // 设置还款日期为当前日期
+    if (!formDetail.value.repaymentDate) {
+      formDetail.value.repaymentDate = dayjs(new Date().getTime()).format('YYYY-MM-DD')
+    }
+    openDetail.value = true
+    titleDetail.value = '贷款还款'
+  })
+}
+
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs.installmentHistoryRef.validate((valid) => {