强制交接查询，简单的查询功能。从数据库中查询数据然后渲染到前台就可以了。第一次做前后端一起的项目，有点生疏。
后端接口：
/**
* 强制交接查询
*
* @param tBBankPackageNodeEntity
* @param pageNo
* @param pageSize
* @param req
* @return
*/
@ApiOperation(value="-分页列表查询", notes="-分页列表查询")
@GetMapping(value = "/CTransitionList")
public Result<?> CompulsoryTransitionList(TBBankPackageNodeEntity tBBankPackageNodeEntity,
@RequestParam(name="pageNo", defaultValue="1") Integer pageNo,
@RequestParam(name="pageSize", defaultValue="10") Integer pageSize,
HttpServletRequest req) {
QueryWrapper<TBBankPackageNodeEntity> queryWrapper = QueryGenerator.initQueryWrapper(tBBankPackageNodeEntity, req.getParameterMap());
Page<TBBankPackageNodeEntity> page = new Page<TBBankPackageNodeEntity>(pageNo, pageSize);
IPage<TBBankPackageNodeEntity> pageList = tBBankPackageNodeService.page(page,queryWrapper);
// 转换，添加字段
/*IPage<TBBankPackageNodeVO> pageList2 = pageList.convert(tbBankPackageNodeEntity -> {
//将entity转成vo并赋值
TBBankPackageNodeVO vo = BeanUtil.copyProperties(tbBankPackageNodeEntity, TBBankPackageNodeVO.class);
log.info("属性复制：{}", vo.toString());
//获取operatorUser的名字
String operatorUser = tbBankPackageNodeEntity.getOperatorUser();
if(StringUtils.isNotBlank(operatorUser)){
//用username从数据表查询获取realname
String operatorUserRealname = iSysUserService.getUserByName(operatorUser).getRealname();
//给vo赋值operatorUserRealname
vo.setOperatorUserRealname(operatorUserRealname);
}
//处理realUserRealname
String realUser = tbBankPackageNodeEntity.getRealUser();
if(StringUtils.isNotBlank(realUser)){
String realUserRealname = iSysUserService.getUserByName(realUser).getRealname();
vo.setRealUserRealname(realUserRealname);
}
//operatorStationNmae
String operatorStationCode = vo.getOperatorStationCode();
log.info("operatorStationCode: {}", operatorStationCode);
if(StringUtils.isNotBlank(operatorStationCode)){
SysDepart depart = sysDepartService.getOne(
new LambdaQueryWrapper<SysDepart>()
.eq(SysDepart::getOrgCategory, "4")
.eq(SysDepart::getOrgNo, operatorStationCode)
);
if(depart == null){
throw new CustomException("数据异常");
}
vo.setOperatorStationNmae(depart.getDepartName());
}
//operatorLineNmae
// String operatorLineCode = vo.getOperatorLineCode();
// log.info("operatorStationCode: {}", operatorLineCode);
// if(StringUtils.isNotBlank(operatorLineCode)){
// SysDepart line = sysDepartService.getOne(
// new LambdaQueryWrapper<SysDepart>()
// .eq(SysDepart::getOrgCategory,"5")
// .eq(SysDepart::getOrgNo,operatorLineCode)
// );
// if(line == null){
// throw new CustomException("数据异常+++");
// }
// vo.setOperatorLineNmae(line.getDepartName());
// }
return vo;
});*/
return Result.ok(pageList);
}
- 注释部分是通过实现表中存储数字的字段和其他表的字段对应，现在对于我来说过于复杂，使用数据字典dict也可以解决。但需要理清数据表内的的关系。
前端界面：
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :span="4">
<a-form-item label="工作日期">
<a-date-picker placeholder="请输入工作日期" format='YYYY-MM-DD' valueFormat="YYYY-MM-DD" v-model="queryParam.workdate"></a-date-picker>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="场次">
<a-select allow-clear v-model="queryParam.round">
<a-select-option v-for="item in roundList" :key="item.code" :value="item.code">{
{
item.name}}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="是否强制">
<a-select allow-clear v-model="queryParam.forceSign">
<a-select-option v-for="item in forceSignList" :key="item.code" :value="item.code">{
{
item.name}}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="包编号">
<a-input placeholder="请输入包编号" v-model="queryParam.packageNo"></a-input>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="短交换号">
<a-input placeholder="请输入短交换号" v-model="queryParam.shortBankNo"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- table区域-begin -->
<div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:scroll="{ x: 1000}"
@change="handleTableChange"
>
</a-table>
</div>
<!-- table区域-end -->
</a-card>
</template>
<script>
import {
CuplyListMixin } from '@/mixins/CuplyListMixin'
export default {
name: "BankPackageList",
mixins:[CuplyListMixin],
components: {
},
data () {
return {
description: 'bankSignList',
lineList: [],
roundList:[{
code:'1',name:'晚场'},{
code:'2',name:'午场'}],
forceSignList:[{
code:'0',name:'正常'},{
code:'1',name:'强制'}],
// queryParam: {status: '',round:'',workdate:'',forceSign:''},
workdateNew:'',
disableMixinCreated:true,
// 表头
columns: [
{
title: '序号', dataIndex: '', key:'rowIndex', width:60, align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;} },
{
title: '工作日期', align:"center", dataIndex: 'workdate',width: 100 },
{
title: '场次', align:"center", dataIndex: 'round_dictText',
// customRender: function(text) {
// return text + '场'
// },
width: 100 },
{
title: '包编号', align:"center", dataIndex: 'packageNo',width: 150 },
{
title: '机构编号', align:"center", dataIndex: 'bankId_dictText' ,width: 150},
{
title: '短交换号', align:"center", dataIndex: 'shortBankNo',width: 100 },
{
title: '所属站', align:"center", dataIndex: 'operatorStation_dictText',width: 100 },
{
title: '所属线路', align:"center", dataIndex: 'operatorLine_dictText',width: 100 },
{
title: '责任人', align:"center", dataIndex: 'operatorUser_dictText',width: 100 },
{
title: '实际交接人', align:"center", dataIndex: 'realUser_dictText',width: 100 },
{
title: '交接时间', align:"center", dataIndex: 'realTime',width: 100 },
],
tempDate:'',
url: {
list: "business/tbbankpackagenode/CTransitionList",
},
}
},
computed: {
importExcelUrl: function(){
return `${
window._CONFIG['domianURL']}/${
this.url.importExcelUrl}`;
}
},
created(){
this.searchQuery()
},
methods: {
onChange(date, dateString) {
this.queryParam.workdate = dateString;
},
//实现方法
formatterDate (date) {
let result = new Date(date);
return result;
},
}
}
</script>
<style>
.error {
background-color: red;
}
.type {
font-size: 14px;
width:100px;
height: 15px;
display: block;
}
</style>
- 大部分方法都是从CuplyListMixin中提取出来的。
- 多看官方文档，了解代码结构。
- 我的分页无法点击，因为没有添加@change属性，此处看官方文档就可以解决。
- 查询数据查不出来，先看一下数据库中是否有数据，然后检查一下前端查询条件的代码。此处一开始查不出来就因为设置的status：‘0’，表中数据全部为1或者2 。
- 多看看其他人写的代码