feat: 出行卡前端页面

yanderong

2026-06-18 f31587540395b202e27d815bcea78c7780452183

feat: 出行卡前端页面

 ManagementYKDTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/controller/general/TTravelCardController.java

@@ -12,6 +12,7 @@
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
@@ -47,11 +48,23 @@
    /**
     * 跳转到添加页面
     */
    @RequestMapping("/tTravelCardAdd")
    public String showAddCarInsurance(){
        return PREFIX + "tTravelCardAdd.html";
    @RequestMapping("/add")
    public String showAdd(){
        return PREFIX + "tTravelCard_add.html";
    }

    /**
     * 跳转到添加页面
     */
    @RequestMapping("/detail/{packageId}")
    public String showDetail(@PathVariable Integer packageId, Model model) {
        TravelCardPackage travelCardPackage = travelCardPackageService.selectById(packageId);
        Integer packageCount = travelCardService.countByPackageId(packageId);
        model.addAttribute("packageId", packageId);
        model.addAttribute("packageName", travelCardPackage.getName());
        model.addAttribute("packageCount", packageCount);
        return PREFIX + "tTravelCard_detail.html";
    }

    /**
     * 获取出行卡包，管理列表
@@ -80,7 +93,7 @@
     */
    @RequestMapping(value = "/detailList")
    @ResponseBody
    public Object detailList(String packageId, String cardNo, String rechargeUserPhone, Integer status) {
    public Object detailList(Integer packageId, String cardNo, String rechargeUserPhone, Integer status) {
        Page<Map<String, Object>> page = new PageFactory<Map<String, Object>>().defaultPage();
        page.setRecords(travelCardService.getTravelCardList(page, packageId, cardNo, rechargeUserPhone, status));
        return super.packForBT(page);
@@ -89,8 +102,8 @@
    /**
     *  导出出行卡信息
     */
    @RequestMapping(value = "/outTravelCard")
    public void outTravelCard(HttpServletRequest request, HttpServletResponse response, Integer packageId) {
    @RequestMapping(value = "/outTravelCard/{packageId}")
    public void outTravelCard(HttpServletRequest request, HttpServletResponse response, @PathVariable Integer packageId) {
        List<Map<String, Object>> listMap = travelCardService.getTravelCardByPackageId(packageId);

        // 表格数据【封装】
@@ -131,7 +144,7 @@
        }
        try {
            // 调用工具类进行导出
            ExcelExportUtil.easySheet("出行卡信息导出记录"+DateUtil.formatDate(new Date(), "YYYYMMddHHmmss"), "=出行卡信息导出记录", dataList,request, response);
            ExcelExportUtil.easySheet("出行卡信息导出记录"+DateUtil.formatDate(new Date(), "YYYYMMddHHmmss"), "出行卡信息导出记录", dataList,request, response);
        } catch (Exception e) {
            log.error("出行卡导出异常：", e);
        }

 ManagementYKDTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/dao/TravelCardMapper.java

@@ -16,7 +16,7 @@
    List<Map<String, Object>> getTravelCardByPackageId(@Param("packageId") Integer packageId);

    List<Map<String, Object>> getTravelCardList(@Param("page") Page<Map<String, Object>> page,
                                                @Param("packageId") String packageId,
                                                @Param("packageId") Integer packageId,
                                                @Param("cardNo") String cardNo,
                                                @Param("rechargeUserPhone") String rechargeUserPhone,
                                                @Param("status") Integer status);

 ManagementYKDTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/service/ITravelCardService.java

@@ -43,7 +43,7 @@
     * @param status 状态
     * @return 列表数据
     */
    List<Map<String, Object>> getTravelCardList(Page<Map<String, Object>> page, String packageId, String cardNo, String rechargeUserPhone, Integer status);
    List<Map<String, Object>> getTravelCardList(Page<Map<String, Object>> page, Integer packageId, String cardNo, String rechargeUserPhone, Integer status);

    /**
     * 查询已充值数量
@@ -52,4 +52,12 @@
     * @return 充值数量
     */
    Integer rechargeCount(Integer packageId);

    /**
     * 查询卡包下所有出行卡数量
     *
     * @param packageId 包ID
     * @return 出行卡数量
     */
    Integer countByPackageId(Integer packageId);
}

 ManagementYKDTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/service/impl/TravelCardPackageServiceImpl.java

@@ -1,5 +1,6 @@
package com.stylefeng.guns.modular.system.service.impl;

import com.aliyun.oss.ServiceException;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.stylefeng.guns.modular.system.dao.TravelCardPackageMapper;
@@ -59,6 +60,9 @@
        // 生成出行卡
        boolean flag = travelCardService.generateTravelCard(travelCardPackage.getId(), travelCardPackage.getAmount(), travelCardPackage.getTotal());
        log.info("出行卡包保存，生成出行卡结果：{}", flag);
        if(!flag) {
            throw new ServiceException("生成出行卡异常");
        }
        return travelCardPackage.getId();
    }
}

 ManagementYKDTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/service/impl/TravelCardServiceImpl.java

@@ -8,8 +8,10 @@
import com.stylefeng.guns.modular.system.service.ITravelCardService;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.math.BigDecimal;
import java.security.SecureRandom;
@@ -38,6 +40,7 @@
     * @param amount 卡金额
     * @param total 卡数量
     */
    @Transactional
    public boolean generateTravelCard(Integer packageId, BigDecimal amount, Integer total) {
        if(Objects.isNull(packageId)) {
            log.error("生成出行卡-卡包ID为空，则不执行生成逻辑！");
@@ -69,6 +72,9 @@
            card.setStatus(TravelCardStatusEnum.UN_RECHARGE.getCode());   // 未充值
            card.setInsertTime(now);
            dataList.add(card);
        }
        if(CollectionUtils.isNotEmpty(dataList)) {
            insertBatch(dataList);
        }
        return true;
    }
@@ -104,7 +110,7 @@
     * @param status 状态
     * @return 列表数据
     */
    public List<Map<String, Object>> getTravelCardList(Page<Map<String, Object>> page, String packageId, String cardNo, String rechargeUserPhone, Integer status) {
    public List<Map<String, Object>> getTravelCardList(Page<Map<String, Object>> page, Integer packageId, String cardNo, String rechargeUserPhone, Integer status) {

        return this.baseMapper.getTravelCardList(page, packageId, cardNo, rechargeUserPhone, status);
    }
@@ -118,4 +124,15 @@
    public Integer rechargeCount(Integer packageId) {
        return this.baseMapper.rechargeCount(packageId, TravelCardStatusEnum.RECHARGED.getCode());
    }

    /**
     * 查询卡包下所有出行卡数量
     *
     * @param packageId 包ID
     * @return 出行卡数量
     */
    public Integer countByPackageId(Integer packageId) {
        return this.baseMapper.rechargeCount(packageId, null);
    }

}

 ManagementYKDTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tTravelCard/tTravelCard.html

New file
@@ -0,0 +1,38 @@
@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>出行卡管理</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <#NameCon id="name" name="卡包名称" />
                            </div>
                            <div class="col-sm-3">
                                <#button name="搜索" icon="fa-search" clickFun="TTravelCard.search()"/>
                                <#button name="重置" icon="fa-trash" clickFun="TTravelCard.resetSearch()" space="true"/>
                            </div>
                        </div>
                        <div class="hidden-xs" id="TTravelCardTableToolbar" role="group">
                            @if(shiro.hasPermission("/travelCard/add")){
                            <#button name="新增" icon="fa-plus" clickFun="TTravelCard.add()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/travelCard/detail")){
                                <#button name="卡包详情" icon="fa-search" clickFun="TTravelCard.detail()"/>
                            @}
                        </div>
                        <#table id="TravelCardTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/system/tTravelCard/tTravelCard.js"></script>
<script>
</script>
@}

 ManagementYKDTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tTravelCard/tTravelCard_add.html

New file
@@ -0,0 +1,25 @@
@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal" id="travelCardInfoForm">

            <div class="row">
                <div class="col-sm-6 b-r">
                    <#input id="name" name="卡包名称" underline="true"/>
                    <#input id="amount" name="金额" underline="true"/>
                    <#input id="total" name="数量" underline="true"/>
                </div>
            </div>

            <div class="row btn-group-m-t">
                <div class="col-sm-10">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TTravelCardInfoDlg.addSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TTravelCardInfoDlg.close()"/>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${ctxPath}/static/modular/system/tTravelCard/tTravelCard_info.js"></script>
@}

 ManagementYKDTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tTravelCard/tTravelCard_detail.html

New file
@@ -0,0 +1,52 @@
@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>出行卡管理</h5>
            </div>
            <div class="ibox-content">
                <input type="hidden" id="packageId" name="packageId" value="${packageId}">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                            <h5>${packageName} &nbsp;&nbsp;出行卡&nbsp;${packageCount}&nbsp;张 &nbsp;&nbsp;&nbsp; <#button name="下载" icon="fa-download" clickFun="TTravelCardDetail.outTravelCard()"/></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <#NameCon id="cardNo" name="卡号" />
                            </div>
                            <div class="col-sm-3">
                                <#NameCon id="rechargeUserPhone" name="用户手机号" />
                            </div>
                            <div class="col-sm-3">
                                <#SelectCon id="status" name="充值状态" >
                                <option value="">全部</option>
                                <option value="1">未充值</option>
                                <option value="2">已充值</option>
                            </#SelectCon>
                        </div>
                            <div class="col-sm-3">
                                <#button name="搜索" icon="fa-search" clickFun="TTravelCardDetail.search()"/>
                                <#button name="重置" icon="fa-trash" clickFun="TTravelCardDetail.resetSearch()" space="true"/>
                            </div>
                        </div>

                        <#table id="TravelCardDetailTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/system/tTravelCard/tTravelCard_detail.js"></script>
<script>

</script>
@}

 ManagementYKDTravel/guns-admin/src/main/webapp/static/modular/system/tTravelCard/tTravelCard.js

New file
@@ -0,0 +1,136 @@
/**
 * 用户管理管理初始化
 */
var TTravelCard = {
    id: "TravelCardTable",    //表格id
    seItem: null,        //选中的条目
    table: null,
    layerIndex: -1
};

/**
 * 鼠标悬停提示框 class .toolTip 为无效样式，作用于个别选择器使用
 */
TTravelCard.tooltip = function(){
    $(".toolTip").tooltip();
};

/**
 * 初始化表格的列
 */
TTravelCard.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},
        {title: '编号', field: 'id', visible: true, align: 'center', valign: 'middle',width:'10%'},
        {title: '卡包名称', field: 'name', visible: true, align: 'center', valign: 'middle',width:'30%',
            formatter: function (value, row) {
                var btn = "";
                if(row.name != '' && row.name != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.name + '" onfocus="TTravelCard.tooltip()">' + row.name + '</p>']
                }
                return btn;
            }
        },
        {title: '卡包金额', field: 'amount', visible: true, align: 'center', valign: 'middle',width:'20%',
            formatter: function (value, row) {
                var btn = "";
                if(row.amount != '' && row.amount != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.amount + '" onfocus="TTravelCard.tooltip()">' + row.amount + '</p>']
                }
                return btn;
            }
        },
        {title: '总数量', field: 'total', visible: true, align: 'center', valign: 'middle',width:'15%',
            formatter: function (value, row) {
                var btn = "";
                if(row.total != '' && row.total != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.total + '" onfocus="TTravelCard.tooltip()">' + row.total + '</p>']
                }else {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="0" onfocus="TTravelCard.tooltip()">0</p>']
                }
                return btn;
            }
        },
        {title: '已充值数量', field: 'rechargeCount', visible: true, align: 'center', valign: 'middle',width:'15%',
            formatter: function (value, row) {
                var btn = "";
                if(row.rechargeCount != '' && row.rechargeCount != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.rechargeCount + '" onfocus="TTravelCard.tooltip()">' + row.rechargeCount + '</p>']
                }else {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="0" onfocus="TTravelCard.tooltip()">0</p>']
                }
                return btn;
            }
        }
    ];
};

/**
 * 检查是否选中
 */
TTravelCard.check = function () {
    var selected = $('#' + this.id).bootstrapTable('getSelections');
    if(selected.length == 0){
        Feng.info("请先选中表格中的某一记录！");
        return false;
    }else{
        TTravelCard.seItem = selected[0];
        return true;
    }
};

/**
 * 新增出行卡
 */
TTravelCard.add = function () {
        var index = layer.open({
            type: 2,
            title: '新增出行卡',
            area: ['100%', '100%'], //宽高
            fix: false, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/travelCard/add'
        });
        this.layerIndex = index;
};

/**
 * 打开查看用户管理详情
 */
TTravelCard.detail = function () {
    if (this.check()) {
        var index = layer.open({
            type: 2,
            title: '用户详情',
            area: ['100%', '100%'], //宽高
            fix: false, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/travelCard/detail/' + TTravelCard.seItem.id
        });
        this.layerIndex = index;
    }
};


/**
 * 查询用户管理列表
 */
TTravelCard.search = function () {
    var queryData = {};
    queryData['name'] = $("#name").val();
    TTravelCard.table.refresh({query: queryData});
};
TTravelCard.resetSearch = function () {
    $("#name").val("");
    TTravelCard.search();
};

$(function () {
    var defaultColunms = TTravelCard.initColumn();
    var table = new BSTable(TTravelCard.id, "/travelCard/list", defaultColunms);
    // 设置物理分页server（逻辑分页client）
    table.setPaginationType("server");
    TTravelCard.table = table.init();
});



 ManagementYKDTravel/guns-admin/src/main/webapp/static/modular/system/tTravelCard/tTravelCard_detail.js

New file
@@ -0,0 +1,109 @@
/**
 * 用户管理管理初始化
 */
var TTravelCardDetail = {
    id: "TravelCardDetailTable",    //表格id
    seItem: null,        //选中的条目
    table: null,
    layerIndex: -1
};

/**
 * 鼠标悬停提示框 class .toolTip 为无效样式，作用于个别选择器使用
 */
TTravelCardDetail.tooltip = function(){
    $(".toolTip").tooltip();
};

/**
 * 初始化表格的列
 */
TTravelCardDetail.initColumn = function () {
    return [
        {field: 'selectItem', radio: true},
        {title: '编号', field: 'id', visible: true, align: 'center', valign: 'middle',width:'10%'},
        {title: '卡号', field: 'cardNo', visible: true, align: 'center', valign: 'middle',width:'25%',
            formatter: function (value, row) {
                var btn = "";
                if(row.cardNo != '' && row.cardNo != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.cardNo + '" onfocus="TTravelCardDetail.tooltip()">' + row.cardNo + '</p>']
                }
                return btn;
            }
        },
        {title: '卡密码', field: 'total', visible: true, align: 'center', valign: 'middle',width:'20%',
            formatter: function (value, row) {
                var btn = "";
                if(row.cardPassword != '' && row.cardPassword != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.cardPassword + '" onfocus="TTravelCardDetail.tooltip()">' + row.cardPassword + '</p>']
                }
                return btn;
            }
        },
        {title: '充值状态', field: 'status', visible: true, align: 'center', valign: 'middle',width:'20%',
            formatter: function (value, row) {
                var btn = "";
                if(row.status != '' && row.status != null) {
                    if (row.status == 1){
                        btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color: #0d8ddb;" title="未充值" onfocus="TTravelCardDetail.tooltip()">未充值</p>']
                    } else if (row.status == 2){
                        btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color: red;" title="已充值" onfocus="TTravelCardDetail.tooltip()">已充值</p>']
                    }
                }
                return btn;
            }
        },
        {title: '充值用户手机号', field: 'rechargeUserPhone', visible: true, align: 'center', valign: 'middle',width:'20%',
            formatter: function (value, row) {
                var btn = "";
                if(row.rechargeUserPhone != '' && row.rechargeUserPhone != null) {
                    btn = ['<p class="toolTip" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" title="' + row.rechargeUserPhone + '" onfocus="TTravelCardDetail.tooltip()">' + row.rechargeUserPhone + '</p>']
                }
                return btn;
            }
        }
    ];
};




/**
 * 查询用户管理列表
 */
TTravelCardDetail.search = function () {
    var queryData = {};
    queryData['packageId'] = $("#packageId").val();
    queryData['cardNo'] = $("#cardNo").val();
    queryData['rechargeUserPhone'] = $("#rechargeUserPhone").val();
    queryData['status'] = $("#status").val();
    TTravelCardDetail.table.refresh({query: queryData});
};
TTravelCardDetail.resetSearch = function () {
    $("#cardNo").val("");
    $("#rechargeUserPhone").val("");
    $("#status").val("");
    TTravelCardDetail.search();
};

$(function () {
    var defaultColunms = TTravelCardDetail.initColumn();
    var table = new BSTable(TTravelCardDetail.id, "/travelCard/detailList", defaultColunms);
    // 设置物理分页server（逻辑分页client）
    table.setPaginationType("server");
    var queryData = {};
    queryData['packageId'] = $("#packageId").val();
    table.setQueryParams(queryData);
    TTravelCardDetail.table = table.init();
});


/**
 * 导出出行卡操作
 */
TTravelCardDetail.outTravelCard = function () {
    var operation = function() {
        window.location.href = Feng.ctxPath + "/travelCard/outTravelCard/"+$("#packageId").val();
    };
    Feng.confirm("是否确认导出出行卡信息?", operation);
}

 ManagementYKDTravel/guns-admin/src/main/webapp/static/modular/system/tTravelCard/tTravelCard_info.js

New file
@@ -0,0 +1,121 @@
/**
 * 初始化用户管理详情对话框
 */
var TTravelCardInfoDlg = {
    tTravelCardInfoData : {},
    validateFields: {
        name: {
            validators: {
                notEmpty: {
                    message: '卡包名称不能为空'
                }
            }
        },
        amount: {
            validators: {
                notEmpty: {
                    message: '金额不能为空'
                },
                regexp: {
                    regexp: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,
                    message: '金额不正确'
                }
            }
        },
        total: {
            validators: {
                notEmpty: {
                    message: '数量不能为空'
                },
                regexp: {
                    regexp: /^[1-9]\d*$/,
                    message: '数量只能为整数'
                }
            }
        }
    }
};

/**
 * 验证数据是否为空
 */
TTravelCardInfoDlg.validate = function () {
    $('#travelCardInfoForm').data("bootstrapValidator").resetForm();
    $('#travelCardInfoForm').bootstrapValidator('validate');
    return $("#travelCardInfoForm").data('bootstrapValidator').isValid();
};

/**
 * 清除数据
 */
TTravelCardInfoDlg.clearData = function() {
    this.tTravelCardInfoData = {};
}

/**
 * 设置对话框中的数据
 *
 * @param key 数据的名称
 * @param val 数据的具体值
 */
TTravelCardInfoDlg.set = function(key, val) {
    this.tTravelCardInfoData[key] = (typeof val == "undefined") ? $("#" + key).val() : val;
    return this;
}

/**
 * 设置对话框中的数据
 *
 * @param key 数据的名称
 * @param val 数据的具体值
 */
TTravelCardInfoDlg.get = function(key) {
    return $("#" + key).val();
}

/**
 * 关闭此对话框
 */
TTravelCardInfoDlg.close = function() {
    parent.layer.close(window.parent.TTravelCard.layerIndex);
}

/**
 * 收集数据
 */
TTravelCardInfoDlg.collectData = function() {
    this
    .set('name')
    .set('amount')
    .set('total');
}



/**
 * 操作提交
 */
TTravelCardInfoDlg.addSubmit = function() {

    this.clearData();
    this.collectData();
    if(!this.validate()){
        return ;
    }
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/travelCard/saveTravelCard", function(data){
        Feng.success("新增成功!");
        window.parent.TTravelCard.table.refresh();
        TTravelCardInfoDlg.close();
    },function(data){
        Feng.error("新增失败!" + data.responseJSON.message + "!");
    });
    ajax.set("name",$("#name").val());
    ajax.set("amount",$("#amount").val());
    ajax.set("total",$("#total").val());
    ajax.start();
}

$(function() {
    Feng.initValidator("travelCardInfoForm", TTravelCardInfoDlg.validateFields);
});