目录
一、借款信息列表展示
(一)需求
(二)后端
(三)前端
二、借款详情
(一)需求
(二)后端
(三)前端
三、借款审批
(一)需求
(二)后端
(三)前端
一、借款信息列表展示
(一)需求
(二)后端
扩展实体对象
列表的结果需要关联查询,数据字典的数据也需要展示对应的文本内容而不是值,除了定义VO的方式,我们也可以使用扩展原有实体类的方式
在BorrowInfo类中扩展以下字段
//扩展字段
@ApiModelProperty(value = "姓名")
@TableField(exist = false)
private String name;
@ApiModelProperty(value = "手机")
@TableField(exist = false)
private String mobile;
@ApiModelProperty(value = "其他参数")
@TableField(exist = false)
private Map<String,Object> param = new HashMap<>();
controller
添加 AdminBorrowInfoController
@Api(tags = "借款管理")
@RestController
@RequestMapping("/admin/core/borrowInfo")
@Slf4j
public class AdminBorrowInfoController {
@Resource
private BorrowInfoService borrowInfoService;
@ApiOperation("借款信息列表")
@GetMapping("/list")
public R list() {
List<BorrowInfo> borrowInfoList = borrowInfoService.selectList();
return R.ok().data("list", borrowInfoList);
}
}
service
接口:BorrowInfoService
List<BorrowInfo> selectList();
实现:BorrowInfoServiceImpl
@Resource
private DictService dictService;
@Override
public List<BorrowInfo> selectList() {
List<BorrowInfo> borrowInfoList = baseMapper.selectBorrowInfoList();
borrowInfoList.forEach(borrowInfo -> {
String returnMethod = dictService.getNameByParentDictCodeAndValue("returnMethod", borrowInfo.getReturnMethod());
String moneyUse = dictService.getNameByParentDictCodeAndValue("moneyUse", borrowInfo.getMoneyUse());
String status = BorrowInfoStatusEnum.getMsgByStatus(borrowInfo.getStatus());
borrowInfo.getParam().put("returnMethod", returnMethod);
borrowInfo.getParam().put("moneyUse", moneyUse);
borrowInfo.getParam().put("status", status);
});
return borrowInfoList;
}
mapper
接口:BorrowInfoMapper
List<BorrowInfo> selectBorrowInfoList();
xml:BorrowInfoMapper.xml
<select id="selectBorrowInfoList" resultType="com.atguigu.srb.core.pojo.entity.BorrowInfo">
SELECT
bi.*,
b.name,
b.mobile
FROM
borrow_info AS bi
LEFT JOIN borrower AS b ON bi.user_id = b.user_id
WHERE bi.is_deleted = 0
</select>
(三)前端
创建页面组件src/views/core/borrow-info/list.vue
<template>
<div class="app-container">
<!-- 列表 -->
<el-table :data="list" stripe>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="借款人姓名" width="90" />
<el-table-column prop="mobile" label="手机" />
<el-table-column prop="amount" label="借款金额" />
<el-table-column label="借款期限" width="90">
<template slot-scope="scope">{{ scope.row.period }}个月</template>
</el-table-column>
<el-table-column prop="param.returnMethod" label="还款方式" width="150" />
<el-table-column prop="param.moneyUse" label="资金用途" width="100" />
<el-table-column label="年化利率" width="90">
<template slot-scope="scope">
{{ scope.row.borrowYearRate * 100 }}%
</template>
</el-table-column>
<el-table-column prop="param.status" label="状态" width="100" />
<el-table-column prop="createTime" label="申请时间" width="150" />
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini">
<router-link :to="'/core/borrower/info-detail/' + scope.row.id">
查看
</router-link>
</el-button>
<el-button
v-if="scope.row.status === 1"
type="warning"
size="mini"
@click="approvalShow(scope.row)"
>
审批
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import borrowInfoApi from '@/api/core/borrow-info'
export default {
data() {
return {
list: null // 列表
}
},
created() {
this.fetchData()
},
methods: {
// 加载列表数据
fetchData() {
borrowInfoApi.getList().then(response => {
this.list = response.data.list
})
}
}
}
</script>
配置路由
src/router/index.js
在“借款管理”下添加子路由
{
path: 'info-list',
name: 'coreBorrowInfoList',
component: () => import('@/views/core/borrow-info/list'),
meta: { title: '借款列表' }
},
{
path: 'info-detail/:id',
name: 'coreBorrowInfoDetail',
component: () => import('@/views/core/borrow-info/detail'),
meta: { title: '借款详情' },
hidden: true
}
定义api
创建 src/api/core/borrow-info.js
import request from '@/utils/request'
export default {
getList() {
return request({
url: `/admin/core/borrowInfo/list`,
method: 'get'
})
}
}
二、借款详情
(一)需求
借款详情展示借款信息与借款人信息
(二)后端
controller
AdminBorrowInfoController
@ApiOperation("获取借款信息")
@GetMapping("/show/{id}")
public R show(
@ApiParam(value = "借款id", required = true)
@PathVariable Long id) {
Map<String, Object> borrowInfoDetail = borrowInfoService.getBorrowInfoDetail(id);
return R.ok().data("borrowInfoDetail", borrowInfoDetail);
}
service
接口:BorrowInfoService
Map<String, Object> getBorrowInfoDetail(Long id);
实现:BorrowInfoServiceImpl
@Resource
private BorrowerMapper borrowerMapper;
@Resource
private BorrowerService borrowerService;
@Override
public Map<String, Object> getBorrowInfoDetail(Long id) {
//查询借款对象
BorrowInfo borrowInfo = baseMapper.selectById(id);
//组装数据
String returnMethod = dictService.getNameByParentDictCodeAndValue("returnMethod", borrowInfo.getReturnMethod());
String moneyUse = dictService.getNameByParentDictCodeAndValue("moneyUse", borrowInfo.getMoneyUse());
String status = BorrowInfoStatusEnum.getMsgByStatus(borrowInfo.getStatus());
borrowInfo.getParam().put("returnMethod", returnMethod);
borrowInfo.getParam().put("moneyUse", moneyUse);
borrowInfo.getParam().put("status", status);
//根据user_id获取借款人对象
QueryWrapper<Borrower> borrowerQueryWrapper = new QueryWrapper<Borrower>();
borrowerQueryWrapper.eq("user_id", borrowInfo.getUserId());
Borrower borrower = borrowerMapper.selectOne(borrowerQueryWrapper);
//组装借款人对象
BorrowerDetailVO borrowerDetailVO = borrowerService.getBorrowerDetailVOById(borrower.getId());
//组装数据
Map<String, Object> result = new HashMap<>();
result.put("borrowInfo", borrowInfo);
result.put("borrower", borrowerDetailVO);
return result;
}
(三)前端
定义api
show(id) {
return request({
url: `/admin/core/borrowInfo/show/${id}`,
method: 'get'
})
}
页面模板及脚本
src/views/core/borrow-info/detail.vue
<template>
<div class="app-container">
<h4>借款信息</h4>
<table
class="table table-striped table-condenseda table-bordered"
width="100%"
>
<tbody>
<tr>
<th width="15%">借款金额</th>
<td width="35%">{{ borrowInfoDetail.borrower.amount }}元</td>
<th width="15%">借款期限</th>
<td width="35%">{{ borrowInfoDetail.borrower.period }}个月</td>
</tr>
<tr>
<th>年化利率</th>
<td>{{ borrowInfoDetail.borrower.borrowYearRate * 100 }}%</td>
<th>还款方式</th>
<td>{{ borrowInfoDetail.borrower.returnMethod }}</td>
</tr>
<tr>
<th>资金用途</th>
<td>{{ borrowInfoDetail.borrower.moneyUse }}</td>
<th>状态</th>
<td>{{ borrowInfoDetail.borrower.status }}</td>
</tr>
<tr>
<th>创建时间</th>
<td>{{ borrowInfoDetail.borrower.createTime }}</td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
<h4>借款人信息</h4>
<table
class="table table-striped table-condenseda table-bordered"
width="100%"
>
<tbody>
<tr>
<th width="15%">借款人</th>
<td width="35%">
<b>{{ borrowInfoDetail.borrower.name }}</b>
</td>
<th width="15%">手机</th>
<td width="35%">{{ borrowInfoDetail.borrower.mobile }}</td>
</tr>
<tr>
<th>身份证</th>
<td>{{ borrowInfoDetail.borrowInfo.idCard }}</td>
<th>性别</th>
<td>{{ borrowInfoDetail.borrowInfo.sex }}</td>
</tr>
<tr>
<th>年龄</th>
<td>{{ borrowInfoDetail.borrowInfo.age }}</td>
<th>是否结婚</th>
<td>{{ borrowInfoDetail.borrowInfo.marry }}</td>
</tr>
<tr>
<th>学历</th>
<td>{{ borrowInfoDetail.borrowInfo.education }}</td>
<th>行业</th>
<td>{{ borrowInfoDetail.borrowInfo.industry }}</td>
</tr>
<tr>
<th>月收入</th>
<td>{{ borrowInfoDetail.borrowInfo.income }}</td>
<th>还款来源</th>
<td>{{ borrowInfoDetail.borrowInfo.returnSource }}</td>
</tr>
<tr>
<th>创建时间</th>
<td>{{ borrowInfoDetail.borrowInfo.createTime }}</td>
<th>状态</th>
<td>{{ borrowInfoDetail.borrowInfo.status }}</td>
</tr>
</tbody>
</table>
<el-row style="text-align: center; margin-top: 40px">
<el-button @click="back">返回</el-button>
</el-row>
</div>
</template>
<script>
import borrowInfoApi from '@/api/core/borrow-info'
import '@/styles/show.css'
export default {
data() {
return {
borrowInfoDetail: {
borrowInfo: {},
borrower: {},
},
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
borrowInfoApi.show(this.$route.params.id).then((response) => {
this.borrowInfoDetail = response.data.borrowInfoDetail
})
},
back() {
this.$router.push({ path: '/core/borrower/info-list' })
},
},
}
</script>
三、借款审批
(一)需求
管理平台借款审批,审批通过后产生标的,审批前我们需要跟借款人进行电话沟通,确定借款年化和平台服务费率(平台收益),借款年化可能根据实际情况调高或调低;起息日通常我们把它确定为募集结束时间(或放款时间)
(二)后端
定义VO对象
@Data
@ApiModel(description = "借款信息审批")
public class BorrowInfoApprovalVO {
@ApiModelProperty(value = "id")
private Long id;
@ApiModelProperty(value = "状态")
private Integer status;
@ApiModelProperty(value = "审批内容")
private String content;
@ApiModelProperty(value = "标题")
private String title;
@ApiModelProperty(value = "年化利率")
private BigDecimal lendYearRate;
@ApiModelProperty(value = "平台服务费率")
private BigDecimal serviceRate;
@ApiModelProperty(value = "开始日期")
private String lendStartDate;
@ApiModelProperty(value = "描述信息")
private String lendInfo;
}
controller
AdminBorrowInfoController
@ApiOperation("审批借款信息")
@PostMapping("/approval")
public R approval(@RequestBody BorrowInfoApprovalVO borrowInfoApprovalVO) {
borrowInfoService.approval(borrowInfoApprovalVO);
return R.ok().message("审批完成");
}
service
接口:BorrowInfoService
void approval(BorrowInfoApprovalVO borrowInfoApprovalVO);
实现:BorrowInfoServiceImpl
(三)前端
定义api
src/api/core/borrow-info.js
approval(borrowInfoApproval) {
return request({
url: '/admin/core/borrowInfo/approval',
method: 'post',
data: borrowInfoApproval
})
}
页面模板及脚本
src/views/core/borrow-info/list.vue
<template>
<div class="app-container">
<!-- 列表 -->
<el-table :data="list" stripe>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="借款人姓名" width="90" />
<el-table-column prop="mobile" label="手机" />
<el-table-column prop="amount" label="借款金额" />
<el-table-column label="借款期限" width="90">
<template slot-scope="scope">{{ scope.row.period }}个月</template>
</el-table-column>
<el-table-column prop="returnMethod" label="还款方式" width="150" />
<el-table-column prop="moneyUse" label="资金用途" width="100" />
<el-table-column label="年化利率" width="90">
<template slot-scope="scope">
{{ scope.row.borrowYearRate * 100 }}%
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100" />
<el-table-column prop="createTime" label="申请时间" width="150" />
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini">
<router-link :to="'/core/borrower/info-detail/' + scope.row.id">
查看
</router-link>
</el-button>
<el-button
v-if="scope.row.status === '审核中'"
type="warning"
size="mini"
@click="approvalShow(scope.row)"
>
审批
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 审批对话框 -->
<el-dialog title="审批" :visible.sync="dialogVisible" width="490px">
<el-form label-position="right" label-width="100px">
<el-form-item label="是否通过">
<el-radio-group v-model="borrowInfoApproval.status">
<el-radio :label="2">通过</el-radio>
<el-radio :label="-1">不通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="borrowInfoApproval.status == 2" label="标的名称">
<el-input v-model="borrowInfoApproval.title" />
</el-form-item>
<el-form-item v-if="borrowInfoApproval.status == 2" label="起息日">
<el-date-picker
v-model="borrowInfoApproval.lendStartDate"
type="date"
placeholder="选择开始时间"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item v-if="borrowInfoApproval.status == 2" label="年化收益率">
<el-input v-model="borrowInfoApproval.lendYearRate">
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item v-if="borrowInfoApproval.status == 2" label="服务费率">
<el-input v-model="borrowInfoApproval.serviceRate">
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item v-if="borrowInfoApproval.status == 2" label="标的描述">
<el-input v-model="borrowInfoApproval.lendInfo" type="textarea" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="approvalSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import borrowInfoApi from '@/api/core/borrow-info'
export default {
data() {
return {
list: [],
dialogVisible: false, //审批对话框
borrowInfoApproval: {
status: 2,
serviceRate: 5,
lendYearRate: 0, //初始化,解决表单中数据修改时无法及时渲染的问题
}, //审批对象
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
borrowInfoApi.getList().then((response) => {
this.list = response.data.borrowInfoVOList
})
},
approvalShow(row) {
this.dialogVisible = true
this.borrowInfoApproval.id = row.id
this.borrowInfoApproval.lendYearRate = row.borrowYearRate * 100
},
approvalSubmit() {
borrowInfoApi.approval(this.borrowInfoApproval).then((response) => {
this.dialogVisible = false
this.$message.success(response.message)
this.fetchData()
})
},
},
}
</script>