<template>
|
<view class="sales-account">
|
<PageHeader title="借款管理" @back="goBack" />
|
<view class="search-section">
|
<view class="search-bar">
|
<view class="search-input">
|
<up-input v-model="filters.borrowerName" placeholder="借款人姓名" clearable />
|
</view>
|
<view class="search-input">
|
<uni-datetime-picker type="daterange" v-model="filters.borrowDate" @change="onDateChange" />
|
</view>
|
<view class="search-input">
|
<up-picker :columns="[statusOptions]" key-name="label" v-model="statusIndex" @confirm="onStatusConfirm">
|
<up-input readonly :value="statusLabel" placeholder="借款状态" />
|
</up-picker>
|
</view>
|
<view class="filter-button" @click="getList">
|
<up-icon name="search" size="24" color="#999" />
|
</view>
|
</view>
|
<view class="actions">
|
<u-button type="primary" size="small" @click="goAdd">新增</u-button>
|
</view>
|
</view>
|
<view class="ledger-list" v-if="list.length>0">
|
<view class="ledger-item" v-for="item in list" :key="item.id">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon"><up-icon name="file-text" color="#fff" size="16" /></view>
|
<text class="item-id">{{ item.borrowerName || '--' }}</text>
|
</view>
|
<view class="item-tag">
|
<u-tag :type="statusType(item.status)">{{ statusText(item.status) }}</u-tag>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
<view class="item-details">
|
<view class="detail-row"><text class="detail-label">借款金额(元)</text><text class="detail-value highlight">{{ fmtAmount(item.borrowAmount) }}</text></view>
|
<view class="detail-row"><text class="detail-label">借款利率(%)</text><text class="detail-value">{{ fmtRate(item.interestRate) }}</text></view>
|
<view class="detail-row"><text class="detail-label">借款日期</text><text class="detail-value">{{ item.borrowDate || '--' }}</text></view>
|
<view class="detail-row"><text class="detail-label">实际还款日期</text><text class="detail-value">{{ item.repayDate || '--' }}</text></view>
|
<view class="detail-row"><text class="detail-label">备注</text><text class="detail-value">{{ item.remark || '--' }}</text></view>
|
</view>
|
<view class="card-actions">
|
<u-button size="small" @click="goEdit(item)">编辑</u-button>
|
<u-button size="small" type="warning" @click="goRepay(item)" :disabled="item.status!==1">还款</u-button>
|
<u-button size="small" type="error" @click="confirmDelete(item)">删除</u-button>
|
</view>
|
</view>
|
</view>
|
<view class="no-data" v-else><text>暂无数据</text></view>
|
|
<up-popup :show="formShow" mode="bottom" @close="closeForm">
|
<view class="popup">
|
<view class="popup-header">{{ formMode==='add'?'新增借款': formMode==='repay'?'还款':'编辑借款' }}</view>
|
<up-form :model="form" :rules="rules" ref="formRef">
|
<up-form-item label="借款人姓名" prop="borrowerName">
|
<up-input v-model="form.borrowerName" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="借款金额" prop="borrowAmount">
|
<up-input type="number" v-model="form.borrowAmount" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="借款利率(%)" prop="interestRate">
|
<up-input type="number" v-model="form.interestRate" placeholder="例如 5.85" />
|
</up-form-item>
|
<up-form-item label="借款日期" prop="borrowDate">
|
<uni-datetime-picker type="date" v-model="form.borrowDate" />
|
</up-form-item>
|
<up-form-item v-if="formMode==='repay'" label="实际还款日期" prop="repayDate">
|
<uni-datetime-picker type="date" v-model="form.repayDate" />
|
</up-form-item>
|
<up-form-item label="备注" prop="remark">
|
<up-textarea v-model="form.remark" autoHeight />
|
</up-form-item>
|
</up-form>
|
<view class="popup-actions">
|
<u-button @click="closeForm">取消</u-button>
|
<u-button type="primary" @click="submitForm">保存</u-button>
|
</view>
|
</view>
|
</up-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import { listPage, delAccountLoan } from "@/api/financialManagement/loanManagement";
|
|
const list = ref([]);
|
const filters = reactive({ borrowerName: "", borrowDate: null, entryDateStart: undefined, entryDateEnd: undefined, status: undefined });
|
const statusOptions = ref([{ label: "全部", value: undefined }, { label: "待还款", value: 1 }, { label: "已还款", value: 2 }]);
|
const statusIndex = ref([0]);
|
const statusLabel = ref("");
|
|
const formShow = ref(false);
|
const formMode = ref("add");
|
const formRef = ref();
|
const form = reactive({
|
id: undefined,
|
borrowerName: "",
|
borrowAmount: undefined,
|
interestRate: undefined,
|
borrowDate: undefined,
|
repayDate: undefined,
|
remark: "",
|
status: undefined,
|
});
|
const rules = {
|
borrowerName: [{ required: true, message: "请输入", trigger: "blur" }],
|
borrowAmount: [{ required: true, message: "请输入", trigger: "blur" }],
|
interestRate: [{ required: true, message: "请输入", trigger: "blur" }],
|
borrowDate: [{ required: true, message: "请选择", trigger: "change" }],
|
repayDate: [{ validator: (_r, v, cb)=>{ if (formMode.value==='repay' && !v) return cb(new Error('请选择')); cb(); }, trigger: "change" }],
|
};
|
|
const getList = () => {
|
const extra = {};
|
if (filters.entryDateStart && filters.entryDateEnd) {
|
extra.entryDateStart = filters.entryDateStart;
|
extra.entryDateEnd = filters.entryDateEnd;
|
}
|
if (filters.status) extra.status = filters.status;
|
listPage({ borrowerName: filters.borrowerName, ...extra, current: 1, size: 100 })
|
.then(res => {
|
const records = res?.data?.records ?? res?.records ?? [];
|
list.value = records;
|
});
|
};
|
|
const onDateChange = (val) => {
|
if (val && val.length === 2) {
|
filters.entryDateStart = val[0];
|
filters.entryDateEnd = val[1];
|
} else {
|
filters.entryDateStart = undefined;
|
filters.entryDateEnd = undefined;
|
}
|
};
|
|
const statusText = (s) => s===1?'待还款': s===2?'已还款':'';
|
const statusType = (s) => s===1?'error': s===2?'success':'primary';
|
const fmtAmount = (v) => {
|
const n = parseFloat(v || 0);
|
return n.toFixed(2);
|
};
|
const fmtRate = (v) => {
|
if (v===undefined || v===null || v==='') return '-';
|
const n = parseFloat(v);
|
return n.toFixed(2) + '%';
|
};
|
|
const goAdd = () => {
|
uni.navigateTo({ url: "/pages/financialManagement/loanManagement/edit?type=add" });
|
};
|
const goEdit = (row) => {
|
uni.navigateTo({ url: `/pages/financialManagement/loanManagement/edit?type=edit&id=${row.id}` });
|
};
|
const goRepay = (row) => {
|
uni.navigateTo({ url: `/pages/financialManagement/loanManagement/edit?type=repay&id=${row.id}` });
|
};
|
const confirmDelete = (row) => {
|
uni.showModal({
|
title: "提示",
|
content: "确认删除该记录？",
|
success: async (r) => {
|
if (r.confirm) {
|
const ids = Array.isArray(row) ? row.map(i=>i.id) : [row.id];
|
const res = await delAccountLoan(ids);
|
if (res?.code === 200) getList();
|
}
|
},
|
});
|
};
|
|
const onStatusConfirm = (e) => {
|
const item = statusOptions.value[e.value[0]];
|
if (item) {
|
filters.status = item.value;
|
statusLabel.value = item.label || "";
|
}
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
onShow(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/styles/sales-common.scss";
|
.actions { margin-top: 8px; }
|
</style>
|
