开发工具与关键技术：制作注销结算单页面

开发工具与关键技术：制作注销结算单页面
作者：冉启东  年级：1804
撰写时间：2019年06月25日                
本技术文献起止时间 2019年 06月18日～ 2019年06月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
导入link href="~/Content/assets/css/BillOfSettlementQuery.css" rel="stylesheet" /代码如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625210718542.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)
导入 link href="~/Plugins/layui/css/layui.css" rel="stylesheet" /
script src="~/Plugins/layui/layui.js"/script
script src="~/Plugins/layui/layui.all.js"/script实现表格，
导入script src="~/Plugins/laydate/laydate.js"/script实现日期选择，
body class="Bill" div class="KPRQ" p class="p-0"  开单日期：input type="text" class="demo-input" id="test1" 至  input type="text" class="demo-input" id="test1" /p p class="p-1" 开单员ID：input type="text" class="form-control" id="txtSearch" 车号： input type="text" class="form-control" id="txtSearch"  button class="btn btn-outline-secondary" id="Delete" 查询 /button /p /div div class="JSDCX" p class="p-2"
结算单号： input type="text" class="form-control" id="txtSearch"  状态input type="text" class="form-control" id="txtSearch" /p p class="p-3"
类型： input type="text" class="form-control" id="txtSearch" 车属单位： input type="text" class="form-control" id="txtSearch" button class="btn btn-outline-secondary" id="Delete" 打印/button button class="btn btn-outline-secondary" onclick="window.location.href='/Main/Main'" 退出/button
/p/div div class="NRK-A"div class="navbar mb-3"/div div class="row mt-1"
div class="col" table id="tabUserType" lay-filter="tabUserType"/table div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="tabUserType" style=""div class="layui-table-box" div class="layui-table-header" table cellspacing="0" cellpadding="0" border="0" class="layui-table" thead tr th data-field="0" data-keyboard="1-0-0" data-unresize="true" class=" layui-table-col-special" div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-numbers" span结算单号/span/div/thth data-field="UserType" data-key="1-0-1" class="" div class="layui-table-cell laytable-cell-1-0-1" align="center"span车辆编号/span/div/thth data-field="UserType" data-key="1-0-2" class="" div class="layui-table-cell laytable-cell-1-0-2" align="center" span车牌/span
/div/th/tr/thead/table/div输入需要的内容输入完成后如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625210737887.PNG)
div class="layui-table-body layui-table-main" table cellspacing="0" cellpadding="0" border="0" class="layui-table" tbody tr data-index="0" class=""td data-field="0" data-key="1-0-0" class="layui-table-col-special"
div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-numbers"7111/div/td td data-field="0" data-key="1-0-1" class="layui-table-col-special" div class="layui-table-cell laytable-cell-1-0-1 laytable-cell-numbers"36720/div/tdtd data-field="0" data-key="1-0-2" class="layui-table-col-special"div class="layui-table-cell laytable-cell-1-0-2 laytable-cell-numbers"36720/div/td td data-field="0" data-key="1-0-3" class="layui-table-col-special"div class="layui-table-cell laytable-cell-1-0-3 laytable-cell-numbers"开原客运站.../div/td td data-field="0" data-key="1-0-4" class="layui-table-col-special" div class="layui-table-cell laytable-cell-1-0-4 laytable-cell-numbers"中高级32/div/td td data-field="0" data-key="1-0-5" class="layui-table-col-special" div class="layui-table-cell laytable-cell-1-0-5 laytable-cell-numbers"ly1/div /td td data-field="0" data-key="1-0-6" class="layui-table-col-special"
div class="layui-table-cell laytable-cell-1-0-6 laytable-cell-numbers"开原-辽源/div/td/td/tr/tbody/table/div/div/div/div/div/div输入需要的内容输入完成后如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625210746858.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)
div class="NRK-B" div class="navbar mb-3"/div div class="row mt-1"div class="col" table id="tabUserType" lay-filter="tabUserType"/table div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="tabUserType" style=""div class="layui-table-box"div class="layui-table-header" table cellspacing="0" cellpadding="0" border="0" class="layui-table" thead tr th data-field="0" data-keyboard="1-0-0" data-unresize="true" class=" layui-table-col-special" div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-numbers" span结算单号/span/div/th th data-field="UserType" data-key="1-0-1" class=""div class="layui-table-cell laytable-cell-1-0-1" align="center"span到达站ID/span/div/th th data-field="UserType" data-key="1-0-2" class=""div class="layui-table-cell laytable-cell-1-0-2" align="center"span到达站/span
/div/th th data-field="UserType" data-key="1-0-3" class=""divclass="layui-table-cell laytable-cell-1-0-3" align="center"span票型/span/div/thth data-field="UserType" data-key="1-0-4" class=""div class="layui-table-cell laytable-cell-1-0-4" align="center"span售价/span/div/th/div/th/tr/thead
/table/div输入需要的内容输入完成后如图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625210759167.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)
Script lay'#version'.html'-V' + laydate.v;//执行一个laydate实例
laydate.render elem: '#test1' //指定元素/script/body设置日期装卸。
全局效果如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625210808994.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY3Mg==,size_16,color_FFFFFF,t_70)