会员卡管理系统技术解析（八）添加会员卡挂失

5.1.2 添加会员卡挂失记录

添加会员卡挂失记录的界面效果图如下：

 

5.1.2（图1）

从界面上看到的控件有：

文本框（easyui-textbox）

第一要设置每个控件的id；复选框不一定要设置id，也可以设置name;第二设置大小不设置也有默认；第三（data-options）是数据操作:可以设置控件的一些属性和事件，也可以通过CSS代码来控制

下拉框（easyui-combobox）

日期控件（easyui-datebox）

复选框(checkbox)

按钮（easyui-linkbutton）

 

第一步：数据库

添加会员卡挂失记录时，查询符合条件的卡：

5.1.2（图2）

 

表1：发放明细表（Pw_MembershipCardIssuedDetails）

    主要包含如下字段信息：

列名

数据类型

主键/外键

说明

MembershipCardIssuedDetailsID

int

主键

发放明细ID

MembershipCardIssuedID

int

外键

发放记录ID

MembershipCardRecipientsDetailsID

int

外键

领卡明细ID

MemberProfileID

int

外键

会员档案ID

CardType

int

外键

会员卡类型ID

WindowStateID

int

外键

启动状态ID

StateOfTheMembershipCardID

int

外键

会员卡状态ID

ChangeTheMembershipCardID

int

外键

会员卡变更状态ID

FormerRecipientsDetailsID

int

外键

原领卡明细ID

Money

money

　

金额

Integral

nchar(20)

　

积分

SingleKakaFee

money

　

单卡卡费

ActualStartComputingTime

date

　

实际开始时间

ActualEndTime

date

　

实际结束时间

Summary

nchar(50)

　

摘要

Invalid

bit

　

作废否

AllowedToReportTheLossOf

bit

　

挂失否

InternalIssue

bit

　

内部发放否

 

表2：领卡明细表（Pw_MembershipCardRecipientsDetails）

主要包含如下字段信息：

列名

数据类型

主键/外键

说明

MembershipCardRecipientsDetailsID

int

主键

领卡明细ID

MembershipCardRecipientsID

int

外键

领卡记录ID

MembershipCardDetailsID

int

外键

建卡明细ID

ChangeTheMembershipCardID

int

外键

变更会员卡状态ID

RecipientsWhoID

int

外键

领用人ID

 

表3： 建卡明细表（Pw_MembershipCardDetails）

主要包含如下字段信息：

列名

数据类型

主键/外键

说明

MembershipCardDetailsID

int

主键

建卡明细ID

MembershipCardID

int

外键

建卡记录ID

MembershipCardTypeID

int

外键

会员卡种类ID

MembershipCardStorageLocationID

int

外键

保管地点ID

StateOfTheMembershipCardID

int

外键

会员卡状态ID

ChangeTheMembershipCardID

int

外键

变更会员卡状态ID

UpdateRankID

int

外键

会员卡级别ID

KeeperID

int

外键

保管人ID

Remarks

nchar(200)

　

备注

MembershipCardCardNumber

nchar(50)

　

会员卡卡号

SpecifyTheValidityTime

date

　

有效期指定时间

ValidityTime

date

　

有效期时间

WriteCardStatus

nchar(10)

　

写卡状态

WriteTime

date

　

写卡时间

NominalAmount

money

　

面值金额

 

表4：会员卡类型（Sys_ MembershipCardType）

主要包含如下字段信息：

列名

数据类型

主键/外键

说明

MembershipCardTypeID

int

主键

会员卡类型ID

MembersKakaKindID

int

外键

会员卡卡种ID

MembershipCardLevelID

int

外键

会员卡级别ID

MembershipCardIssuanceID

int

外键

会员卡发行方式ID

UseObjectID

int

外键

使用对象ID

DailyManagementFormID

int

外键

日常管理形式ID

TrackMediumID

int

外键

磁道介质ID

PreferentialWayID

int

外键

优惠方式ID

CardValidityPeriodSpecifiedID

int

外键

卡有效期指定方式ID

HairpinWithFaceValue

bit

　

发卡时有面值否

StoredValueCoupons

bit

　

储值优惠券标记否

ParticipateInTheScore

bit

　

参与消费积分否

leadCode

nchar(10)

　

前导码

PostpositionCode

nchar(10)

　

后置码

RequireTheSystemToMakeCard

bit

　

需要系统制卡否

NeedCompulsoryInspectionCard

bit

　

需要强制验卡否

LengthOfThePeriodOfValidity

nchar(10)

　

有效期长度

TrackContentEncryption

bit

　

磁道内容加密否

Invalid

bit

　

作废否

MembershipCardTypeCode

nchar(10)

　

会员卡类型代码

MembershipCardTypeName

nchar(30)

　

会员卡类型名称

KeepRecordsOfConsumption

bit

　

保存消费记录否

TotalLengthCardNumber

int

　

卡号总长度

OpenTheCouponAccount

bit

　

开通优惠券账户否

 

表5：会员卡卡种表（Sys_MembersKakaKind）

主要包含如下字段信息：

列名

数据类型

主键/外键

说明

MembersKakaKindID

int

主键

会员卡卡种ID

MembersKakaCode

nchar(10)

　

会员卡卡种代码

MembersKakaKindsOfNames

nchar(30)

　

会员卡卡种名称

Invalid

bit

　

作废否

 

控件的使用方法：

1、文本框（easyui-textbox）

作用：用于数据的存放

 

普通文本框截图：

            5.1.2（图3）

 

普通文本框界面代码：

<td><input id="txtLingYongRen" style="color:Blue"/></td>

 

  获取界面控件值的代码：

  $('#txtLingYongRen').val();

 

2、下拉框（easyui-combobox）

作用：用于绑定数据，便于选择

 

下拉框截图：

                 5.1.2（图4）

 

下拉框界面代码：

<td><input class="easyui-combobox" id="cboHuiYuanKaZhongLei"                  name="cboHuiYuanKaZhongLei"                  data-options="valueField:'HuiYuanKaKaZhongID',textField:'HuiYuanKaKaZhongMC'"                  />            </td>

 

获取界面控件值的代码：

$('#cboHuiYuanKaZhongLei').combobox('getValue');

 

3、日期控件（easyui-datebox）

   作用：显示分别获取填写登记人、审核人的时间

  

   日期控件截图：

                 5.1.2（图5）

 

日期控件界面代码：

<td><input class="easyui-datebox" id="dtDengJiShiJian"                  style="color:Blue"                  data-options="formatter:myformatter" />              </td> 

获取界面控件值的代码：

$('#dtDengJiShiJian').datebox('getValue');

 

转换时间格式：

function myformatter(date) {       var y = date.getFullYear();       var m = date.getMonth() + 1;       var d = date.getDate();       return y + '-' + (m < 10 ? ('0' + m) : m) + '-'              + (d < 10 ? ('0' + d) : d);   }

 

4、复选框(checkbox)

   作用：便于对数据的选择

 

    复选框截图：

            5.1.2（图6）

 

复选框界面代码：

<td align="right"><input type="checkbox"id="ckShenHeFou" name="ShenHeFou" value="true" style="width:30px;" /><span class="redXing" style=" margin-left:-10px;">开启审核</span>              </td>

 

获取复选框的值的界面代码：

document.getElementById("ckShenHeFou").checked;

第二步：服务层接口（IService）

5.1.2（图7）

public List QueryHuiYuanKaGuaShi(int leixingId);//添加挂失时，查询符合条件的卡publicintQueryMembershipCardLossInsert(PwMembershipCardLoss entity);//新增会员卡挂失信息

第三步：服务层（Service）

5.1.2（图8）

//新增会员卡挂失    @Override    public intQueryMembershipCardLossInsert(PwMembershipCardLossentity){       try {//尝试运行代码           return dao.addAndGetId4Integer(entity);       }catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/           return 0;       }    }

//挂失时，查询符合条件的会员卡信息    @Override    public ListQueryHuiYuanKaGuaShi(intleixingId) {       try {/*尝试运行代码*/           StringBufferqueryString = new StringBuffer();/*实例化StringBuffer*/           queryString.append("SELECTfafangmingxi.membershipCardIssuedDetailsId,jiankamingxi.membershipCardCardNumber," +                             "fafangmingxi.money,huiyuandangan.menberName,fafangmingxi.integral");//拼接需要查询的字段           queryString.append("FROMPwMembershipCardDetails AS jiankamingxi,PwMembershipCardRecipientsDetails ASlingyongmingxi," +                             "PwMembershipCardIssuedDetailsAS fafangmingxi,SysMemberProfile AS huiyuandangan," +                             "SysMembershipCardTypeAS leixing,SysDailyManagementForm AS richang,PwMembershipCardIssued AS fafang");/*实例化表*/           queryString.append("WHEREjiankamingxi.membershipCardDetailsId = lingyongmingxi.membershipCardDetailsId" +                             "ANDlingyongmingxi.membershipCardRecipientsDetailsId =fafangmingxi.membershipCardRecipientsDetailsId " +                             "ANDfafangmingxi.memberProfileId = huiyuandangan.memberProfileId " +                             "ANDjiankamingxi.membershipCardTypeId = leixing.membershipCardTypeId " +                             "ANDleixing.dailyManagementFormId = richang.dailyManagementFormId " +                             "ANDfafangmingxi.membershipCardIssuedId = fafang.membershipCardIssuedId " +                             "ANDfafang.isVerify = true " +                             "ANDfafangmingxi.invalid = false " +                             "ANDfafangmingxi.allowedToReportTheLossOf = false " +                             "ANDrichang.allowedToReportTheLossOf = true " +                             "ANDjiankamingxi.membershipCardTypeId = ? " +                             "AND(fafangmingxi.changeTheMembershipCardId BETWEEN 18 AND 20 ORfafangmingxi.changeTheMembershipCardId = 61)");/*满足条件*/           return dao.findByHql(queryString.toString(),new Object[]{leixingId});       }catch (Exception e) {/*尝试运行代码出现错误，执行异常处理*/           return null;       }    }

 

第四步：方法层（Action）

5.1.2（图9）

//添加会员卡挂失信息时，查询符合条件的卡     public StringgetHuiYuanXinXiSelect(){        JSONArrayjsArr = new JSONArray();/*实例化一个Object数组*/        JSONObjectjsObj = new JSONObject();/*实例化一个Array数组*/        intHuiYuanKaLeiXing = Integer.parseInt(this.getRequest().getParameter("HuiYuanKaLeiXing"));/*视图层传来的参数*/        List lsGuaShi = this.guaShiYuZuoFeiService.QueryHuiYuanKaGuaShi(HuiYuanKaLeiXing);/*调用服务层方法*/        for (int i =0; i < lsGuaShi.size(); i++) {/*循环遍历服务层返回的结果集*/           Object[]obj = (Object[])lsGuaShi.get(i);           jsObj.clear();/*清空jsObj数组*/           jsObj.put("HuiYuanKaFaFangMingXiID",obj[0]);           jsObj.put("HuiYuanKaHao",obj[1].toString());           jsObj.put("JinE",obj[2]);           jsObj.put("HuiYuanXingMing",obj[3].toString());           jsObj.put("JiFen",obj[4]);           jsArr.add(jsObj);       }        HashMap<String, Object>jsMap = new HashMap<String, Object>();/*实例化一个哈希表*/        jsMap.put("rows",jsArr);/*将jsArr数组写入到jsMap中*/        JSObj=JSONObject.fromObject(jsMap);/*转换数组类型，并返回数组*/        return SUCCESS;/*返回*/     }

<pre name="code" class="java">//添加会员卡挂失信息     public String getMembershipCardLossInsert(){       Stringparam = encodingFunction.getMethodEncoding(this.getRequest().getParameter("param"));/*视图层传来的参数*/       String[]params = param.split("<<");/*把视图层传来的参数转换成数组*/       PwMembershipCardLosslsGuaShi = new PwMembershipCardLoss();/*实例化挂失表*/              lsGuaShi.setMembershipCardIssuedDetailsId(Integer.parseInt(params[0].trim()));       lsGuaShi.setRecordNumber(params[1].trim());       lsGuaShi.setSummary(params[2].trim());       lsGuaShi.setBookerId(Integer.parseInt(params[3].trim()));       lsGuaShi.setBookTime(params[4].trim());       lsGuaShi.setVerifyTime(params[5].trim());       lsGuaShi.setVerifier(params[6].trim());       lsGuaShi.setIsVerify(Boolean.parseBoolean(params[7].trim()));       MSG = this.guaShiYuZuoFeiService.QueryMembershipCardLossInsert(lsGuaShi)+""; /*调用服务层方法*/       return SUCCESS;    }

第五步：配置struts

5.1.2（图10）

<action name="getMembershipCardLossInsert" class="GuaShiYuZuoFeiAction"           method="getMembershipCardLossInsert">           <result type="json">              <param name="root">MSG</param>//返回的数据类型           </result>       </action><action name="getHuiYuanXinXiSelect" class="GuaShiYuZuoFeiAction"           method="getHuiYuanXinXiSelect">           <result type="json">              <param name="root">JSObj</param>//返回的数据类型           </result>       </action>

第六步：视图层JSP

Javascript代码：

<pre name="code" class="javascript">//改造年月日顺序    function myformatter(date){          var y = date.getFullYear();//获取年份          var m = date.getMonth()+1;//获取月份          var d = date.getDate();//获取天          return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);//拼接日期       }

 

//根据选择的会员卡类型查询相对应的卡片    functionHuiYuanXinXiSelect(){        var HuiYuanKaLeiXing = $('#cboHuiYuanKaLeiXing').combobox('getValue');        if(HuiYuanKaLeiXing != ""){           $('#FromHuiYuanKaXinXi').show();//弹窗           $.getJSON("getHuiYuanXinXiSelect?KaZhuangTai=61&HuiYuanKaLeiXing="+HuiYuanKaLeiXing,function(result){              $('#dgHuiYuanKaXinXi').datagrid('loadData',result);           });        } else {          alert("请您先输入会员卡类型");        }    }

 

弹窗效果图如下：

 

5.1.2（图11）

HTML代码：

<div class="SeYuanGongXinXi"id="FromHuiYuanKaXinXi" >       <div class="XiaoBiaoti">会员卡信息<span class="GuanBiAnNiuclass" onClick="btnGuanBi()">关闭</span></div>          <table id="dgHuiYuanKaXinXi" class="easyui-datagrid"           data-options="singleSelect:true,rownumbers:true,loadMsg:'加载中,请稍后...',idField:'HuiYuanKaFaFangMingXiID',onDblClickRow: DblHuiYuanKaXinXi">            <thead>               <tr>                 <th data-options="field:'HuiYuanKaFaFangMingXiID',width:120,hidden:true,align:'center'">会员卡发放明细ID</th>                  <th data-options="field:'HuiYuanKaHao',width:120,align:'center'">会员卡号</th>                    <th data-options="field:'HuiYuanXingMing',width:110,align:'center'">会员姓名</th>                    <th data-options="field:'JiFen',width:55,align:'center'">积分</th>                    <th data-options="field:'JinE',width:80,align:'center'">金额</th>                </tr>            </thead>        </table>   </div>

 

Javascript代码：

<pre name="code" class="javascript">//会员卡信息双击事件     var HuiYuanKaFaFangMingXiID    function DblHuiYuanKaXinXi(){       var row = $('#dgHuiYuanKaXinXi').datagrid('getSelected');       if(row){          //获取数据          HuiYuanKaFaFangMingXiID =row.HuiYuanKaFaFangMingXiID;          $('#txtHuiYuanKaHao').val(row.HuiYuanKaHao);          $('#txtHuiYuanXingMing').val(row.HuiYuanXingMing);          $('#txtJiFen').val(row.JiFen);          $('#txtJinE').val(row.JinE);          $('#FromHuiYuanKaXinXi').hide();       }    }      //判断是否开启审核    var shenhe = "";        function ShenHeZhuangTai(){             var shenhe = $("input:checkbox[name='ShenHeFou']:checked").val();//获取复选框的值        if(shenhe == "true"){//判断是否审核           $("#txtShenHeRen").attr("disabled",false);           $("#dtShenHeShiJian").datebox("enable");       }else{           $("#txtShenHeRen").attr("disabled","disabled");           $("#dtShenHeShiJian").datebox("disable");       }         }        // 添加挂失          functionTianJia(){       var JiLuBianHao ="";       $.getJSON("getJiLuBianHao?NAME=GuaShi&d"+new Date(),function(result){           //获取数据           JiLuBianHao=result;           var HuiYuanKaFaFangMingXi =HuiYuanKaFaFangMingXiID;           var ZhaiYao = $('#txtZhaiYao').val();           var DengJiRen = DengJiRenID;           var DengJiShiJian = $('#dtDengJiShiJian').datebox('getValue');           var ShenHeShiJian = $('#dtShenHeShiJian').datebox('getValue');           var ShenHeRen = $('#txtShenHeRen').val();           var ckShenHeFou =document.getElementById("ckShenHeFou");           var ShenHeFou = ckShenHeFou.checked;          param = HuiYuanKaFaFangMingXi+"<<"+JiLuBianHao+"<<"+ZhaiYao+"<<"+DengJiRen+"<<"                  +DengJiShiJian+"<<"+ShenHeShiJian+"<<"+ShenHeRen+"<<"+ShenHeFou;//获取字符串          $.getJSON("getMembershipCardLossInsert?param="+param,function(result){              if(result){//判断返回值是否为空               $.getJSON("getGuaShiEdit?HuiYuanKaGuaShiID="+result+"&PaiXu="+0,function(result){                   alert("新增成功!记录编号为【"+JiLuBianHao.trim()+"】");                   window.location.href="GuaShiYuZuoFei/HuiYuanKaGuaShiInsert.jsp";               });              }           });        });    }

该资料仅供学习使用，禁止用于商业用途