ExtJS学习(一)Ext自定义类实现

工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了。以后回忆起来也方便。
首先下载extjs官网地址:http://extjs.org.cn/
下载以后的目录结构:
ext目录结构

先写一个入门的程序吧自定义类实现

  1. 新建web项目。
  2. 导入js文件。
  3. 项目中引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js"></script> 
<script src="d1.js"></script> 
</head>
<body>
<h1>ExtJS4.2学习</h1>  
<hr />  
作者:springok  
<h2>ExtJS 中自定义类</h2>  
</body>
</html>

d1.js:

Ext.define('springok.Demo',{  
    name:'springok',  
    hello:function(){  
        return 'Hello'+this.name;  
    }  
});  


Ext.onReady(function(){
	alert(new springok.Demo().hello());
	
});

测试:
测试1
很简单的主要就是类的实例化和调用。
测试一下类的实例化和调用的过程oo思想的体现:
d1.js修改为:

Ext.define('springok.Demo',{  
    name:'ThinkDiary',  
    hello:function(){  
        return 'Hello'+this.name;  
    }  
}); 


Ext.define('springok.Window',{  
    extends:'Ext.Window',  
    title:'springok',  
    initComponent:function(){ //初始化  先执行initComponent 再执行自定义初始化构造函数
    	document.write( "initComponent执行......." );
        Ext.apply(this,{//将一批属性复制给当前对象  
            items:[{  
                html:'11111'  
            },{  
                html:'2222222'  
            }]  
        });  
        this.callParent();//快捷调用父类函数  
    },  
    mixins:['springok.Demo'], //多重继承  
    config:{ //辅助功能属性  
        title:'demo'  
    },  
    statics:{ //定义类静态成员  
        TYPE_DEFAULT:1  
    },  
    constructor:function(){ //自定义初始化构造函数,先执行此再执行initComponet  
        //do something init  
    	document.write( "constructor执行......." );
    }  ,
    layout : 'fit'
}); 

new springok.Window();
Ext.onReady(function(){
	//new springok.DemoWindow();
	
});

**

接下来看下面向对象如何实现:

**

Ext.define("springok.Person", {  
    Name: '',  
    Age: 0,  
    //普通的方法
    Say: function (msg) {  
        Ext.Msg.alert(this.Name + " Says:", msg);  
    },  
    //构造器
    constructor: function (name, age) {  
        this.Name = name;  
        this.Age = age;  
    }  
});

Ext.onReady(function(){
//实例化类调用方法
	new springok.Person('springok.Person',18).Say("springok");
	
});

测试:
实例化对象并调用
3、系统流水号工具
近期有个系统流水号的使用场景,比如按照指定配置的规则生成序列号。规则如下:
{yyyy}{MM}{dd}{NO}

{yyyy}:表示年份

{MM} :表示月份,如果月份小于10,则加零补齐,如1月份表示为01。

{mm} :表示月份,月份不补齐,如1月份表示为1。

{DD} :表示日,如果小于10号,则加零补齐,如1号表示为01。

{dd} :表示日,日期不补齐,如1号表示为1。

{NO} :表示流水号,前面补零。

{no} :表示流水号,后面补零。
流水号生成规则:

1.每天生成。每天从初始值开始计数。

2.递增,流水号一直增加。
这个长度表示当前流水号的长度数,只包括流水号部分{NO},如果长度为5,当前流水号为5,则在流水号前补4个0,表示为00005。

{no}如果长度为5,当前流水号为501,则在流水号后面补5个0,表示为50100000,如果长度为1,则流水号一直递增。

这个初始值表示流水号部分{NO}的初始值。如 2020102800001,初始值为1,则流水号部分的初始值为00001

流水号每次递加的数字,默认步长为1。比如步长为2,则每次获取流水号则在原来的基础上加2。

4、表设计
DROP TABLE IF EXISTS `sys_serialno`;
CREATE TABLE `sys_serialno` (
  `ID_` varchar(255)  NOT NULL COMMENT '主键',
  `NAME_` varchar(255)   COMMENT '名称',
  `ALIAS_` varchar(255)   COMMENT '别名',
  `regulation_` varchar(255)   COMMENT '流水号规则',
  `gen_type_` decimal(10,0)  COMMENT '生成类型',
  `no_length_` decimal(10,0)  COMMENT '流水号长度',
  `cur_date_` varchar(255)   COMMENT '执行实例id',
  `init_value_` decimal(10,0)  COMMENT '初始值',
  `cur_value_` decimal(10,0)  COMMENT '是否成功',
  `step_` decimal(10,0)  COMMENT '步长',
  `DELETED` tinyint(1)  COMMENT '是否直接删除',
  PRIMARY KEY (`ID_`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='流水号';

-- ----------------------------
-- Records of sys_serialno
-- ----------------------------
BEGIN;
INSERT INTO `sys_serialno` VALUES ('1', '每天使用一组流水号', 'dayNo', '{yyyy}{MM}{DD}{NO}', 1, 5, NULL, 1, 0, 2, 0);

后端成代码:

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>流水号</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/admin/font.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/admin/xadmin.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/common.css">
    <script type="text/javascript" src="${request.contextPath}/statics/js/xadmin.js"></script>

    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css?v=5">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/hplus/css/style.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/layui/css/blue/layui.css">

    <style>
        .label-primary,
        .badge-primary {
            background-color: #1ab394;
            color: #FFFFFF;
        }
        .label-success,
        .badge-success {
            background-color: #1c84c6;
            color: #FFFFFF;
        }
        .label-warning,
        .badge-warning {
            background-color: #f8ac59;
            color: #FFFFFF;
        }
        .label-warning-light,
        .badge-warning-light {
            background-color: #f8ac59;
            color: #ffffff;
        }
        .label-danger,
        .badge-danger {
            background-color: #ed5565;
            color: #FFFFFF;
        }
        .label-info,
        .badge-info {
            background-color: #23c6c8;
            color: #FFFFFF;
        }
        .badge {
            display: inline-block;
            min-width: 10px;
            padding: 3px 7px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            border-radius: 10px;
        }
        .btn-info {
            background-color: #23c6c8;
            border-color: #23c6c8;
            color: #FFFFFF;
        }
        .btn {
            border-radius: 3px;
        }
        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
        ::-webkit-scrollbar{display: none;}
    </style>

</head>
<body>

<div class="x-nav">
          <span class="layui-breadcrumb" style="visibility: visible;">
            <a href="">首页</a>
			  <span lay-separator="">/</span>
            <a href="">数据分类</a>
			  <span lay-separator="">/</span>
            <a>
              <cite>流水号</cite></a>
          </span>
    <a class="layui-btn layui-btn-normal layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<div class="layui-fluid uc_org_job_list">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-bottom:8px;margin-bottom:20px;box-shadow: 0px 0px 15px rgba(0,0,0,0.3);">
                    <div class="searchDiv1">
                        名称:
                        <div class="layui-inline" style="width: 100px">
                            <input class="layui-input" placeholder="" name="name" >
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
                        别名:
                        <div class="layui-inline" style="width: 100px">
                            <input class="layui-input" placeholder="" name="alias" >
                        </div>
                        <button class="btn btn-success" data-type="reload" onclick="search()">查询</button>
                    </div>


                </div>

                <div class="layui-card-body uc_org_job_list" style="box-shadow: 0px 0px 15px rgba(0,0,0,0.3);" >
                    <div class="layui-card-header">
                        <button class="btn btn-success btn-sm" onclick="openAdd()"><li class='fa fa-plus'></li>&nbsp;添加</button>
                        <button class="btn btn-success btn-sm" onclick="delAll()">
                            <i class="fa fa-trash"></i>删除</button>
                    </div>
                    <table id="instanceListTable"  class="layui-table layui-form" lay-filter="test">

                    </table>


                </div>
            </div>
        </div>
    </div>


</div>

<!--add div-->
<div class="layui-fluid" id="add" style="display: none;">
    <form class="layui-row layui-form" id="approvalForm" lay-filter="approvalForm" >
    <div class="layui-form-item" style="background-color: #f6f9fc;padding: 10px;margin-bottom: 0px">
        <div class="layui-footer">
            <button type="reset" class="btn btn-success" onclick="back()">
                <i class="fa fa-mail-reply" aria-hidden="true"></i>&nbsp;&nbsp;返回</button>
            <button class="btn btn-success"   lay-submit lay-filter="add">
                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;保存
            </button>

        </div>
    </div>

        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span  class="x-red">*</span>流水号名称:</label>
            <div class="layui-input-block">
                <input  id="name" lay-filter="name"  name="name"   lay-verify="required"  autocomplete="off" class="layui-input">
                <input  type="hidden" id="id" lay-filter="name"  name="id"    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span>流水号别名:</label>
            <div class="layui-input-block">
                <input  id="code" lay-filter="alias"  name="alias"   lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span>流水号规则:</label>
            <div class="layui-input-block">
                <input  id="regulation" lay-filter="regulation"  name="regulation"   autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-block">
                {yyyy}{MM}{dd}{NO}<br>
                {yyyy}:表示年份<br>
                {MM} :表示月份,如果月份小于10,则加零补齐,如1月份表示为01。<br>
                {mm} :表示月份,月份不补齐,如1月份表示为1。<br>
                {DD} :表示日,如果小于10号,则加零补齐,如1号表示为01。<br>
                {dd} :表示日,日期不补齐,如1号表示为1。<br>
                {NO} :表示流水号,前面补零。<br>
                {no} :表示流水号,后面补零。
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span>生成类型:</label>
            <div class="layui-input-block">
                <input type="radio" name="genType" value="1" title="每天生成" checked="">
                <input type="radio" name="genType" value="2" title="递增">
            </div>
            <div class="layui-input-block">
                流水号生成规则:<br>
                1.每天生成。每天从初始值开始计数。<br>
                2.递增,流水号一直增加。
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span>流水号长度:</label>
            <div class="layui-input-block">
                <input  id="noLength" lay-filter="noLength"  name="noLength"   lay-verify="required|number" autocomplete="off" class="layui-input">

            </div>
            <div class="layui-input-block">
                这个长度表示当前流水号的长度数,只包括流水号部分{NO},如果长度为5,当前流水号为5,则在流水号前补4个0,表示为00005。<br>
                {no}如果长度为5,当前流水号为501,则在流水号后面补5个0,表示为50100000,如果长度为1,则流水号一直递增。<br>
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span> <span class="x-red"></span>初始值:</label>
            <div class="layui-input-block">
                <input  id="initValue" lay-filter="initValue"  name="initValue"  lay-verify="required|number" autocomplete="off" class="layui-input">

            </div>
            <div class="layui-input-block">
                这个初始值表示流水号部分{NO}的初始值。如 2020102800001,初始值为1,则流水号部分的初始值为00001<br>
            </div>
        </div>
        <div class="layui-form-item"  >
            <label for="name" class="layui-form-label" style="width: 100px">
                <span class="x-red">*</span> <span class="x-red"></span>步长:</label>
            <div class="layui-input-block">
                <input  id="step" lay-filter="step"  name="step"  lay-verify="required|number" autocomplete="off" class="layui-input">

            </div>
            <div class="layui-input-block">
                流水号每次递加的数字,默认步长为1。比如步长为2,则每次获取流水号则在原来的基础上加2。
            </div>
        </div>

    </form>
</div>

<#include "/footer.html">



</body>
<script>
    //判断数据是否为Null或者undefined或者为空字符串
    function checkIsNullOrEmpty(value) {
        //正则表达式用于判斷字符串是否全部由空格或换行符组成
        var reg = /^\s*$/
        //返回值为true表示不是空字符串
        return (value != null && value != undefined && !reg.test(value))
    }

    function search() {
      var div=$(".searchDiv1");
      var name=div.find("input[name='name']").val();
      var alias=div.find("input[name='alias']").val();
        renderTable(name,alias)
    }
$(function () {
    renderTable()
})
    $("#category").on("input",function(e){
        //获取input输入的值 e.delegateTarget.value
      var optionValue=  e.delegateTarget.value;
        // option.value 为要选中的option的value值
        var select = 'dd[lay-value=' + optionValue + ']';
       var dls= $('#statusSelect').siblings("div.layui-form-select").find('dl').find("dd");
        for (d in dls){
           var dl=  dls[d].innerHTML
            if (dl) {
                if (dl==optionValue) {
                    dls[d].click()
                }
            }

        }

    });



    function  renderSelect(categoryId) {
        var url="${request.contextPath}/a1bpmn/api/runtime/runtime/scriptType/v1/list";
        var result=ajaxGet(url);
        var result=result.data;
        if (result && result.length>0){
            $("#statusSelect").empty();
            var html='';
            if (categoryId){
                for (r in result)
                {
                    if (result[r].id==categoryId){
                        html+='<option mode="text/x-groovy"  value='+result[r].id+' class="ng-binding ng-scope" selected>'+result[r].category+'</option>'

                    } else{
                        html+='<option mode="text/x-groovy"  value='+result[r].id+' class="ng-binding ng-scope">'+result[r].category+'</option>'

                    }
                }
            } else{
                for (r in result)
                {

                    html+='<option mode="text/x-groovy"  value='+result[r].id+' class="ng-binding ng-scope">'+result[r].category+'</option>'
                }
            }

            $("#statusSelect").empty().html(html)
        }


    }
layui.use('form', function(){
    var form = layui.form;

    form.on('submit(add)', function(data){

        var res = ajaxPostJson('${request.contextPath}/sys/serialNo/save', JSON.stringify(data.field))
        if (res.code == 0) {

        }else{
            alertError(res.msg)
            return false;
        }
    });

});
layui.use('table', function () {
    var table = layui.table;
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        var id=data.id;
        var layEvent = obj.event;
         if (layEvent === 'edit') {
             $("#approvalForm")[0].reset();
             var url="${request.contextPath}/sys/serialNo/get/"+id;
             var result=ajaxGet(url);
             var result=result.data;
             form.val('approvalForm', {
                 "name": result.name,
                 "alias": result.alias,
                 "regulation": result.regulation,
                 "genType": result.genType,
                 "noLength": result.noLength,
                 "curDate": result.curDate,
                 "initValue": result.initValue,
                 "curValue": result.curValue,
                 "step": result.step,
                 "id": result.id,
             });
             $("input[name='genType'][value='" + result.genType + "']").attr("checked", "checked");
             form.render();
             $("#add").css("display","block");
             $(".uc_org_job_list").css("display","none");


        }else if (layEvent === 'jobDialog') {
        }
        else if (layEvent === 'remove') {
             var ids=[]
             ids.push(id)
           var res=  ajaxPost('${request.contextPath}/sys/serialNo/remove',ids)
             if (res){
                 if (res.code==0){
                     alertSuccess('删除成功', {icon: 1});
                     renderTable()
                 }else{
                     alertError(res.msg)
                 }
             }
        } else if (layEvent === 'preview') {
             var ids=[]
             ids.push(id)
             var result=ajaxGet('${request.contextPath}/sys/serialNo/previewIden/'+data.alias);
             var data=result.data;
             var html='';
             data.forEach((item,index,array)=>{
                 html+=item.curIdenValue+'<br/>'
                 //执行代码
             })
             layer.alert(html, {
               title:'执行结果',
             });
        }
    });
});
    function ajaxPost(url, data) {
        var backData;
        $.ajax({
            type: 'POST',  // 请求方式
            url: url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            async: false,
            success: function (data) {
                console.log(data)
            }
        }).done(
            function (response) {
                backData = response;
            });
        return backData;
        ;
    }
    function reset(){
        $("#approvalForm")[0].reset();
        $("#id").val("")
    }
    function back(){
        reset();
        $("#add").css("display","none");
        $(".uc_org_job_list").css("display","block");

    }


function openAdd(){
    $("#approvalForm")[0].reset();
    $("#code").removeAttr("disabled").css("cursor", "").css("background", "");
    $("#add").css("display","block");
    $(".uc_org_job_list").css("display","none");
     // xadmin.openWinForDiv('添加职务','add',600,400);
    }
    function get(id){

        clear()


        var url="${request.contextPath}/a1bpmn/api/runtime/runtime/script/v1/get/"+id;
        var result=ajaxGet(url);
        var result=result.result;
        form.val('approvalForm', {
            "name": result.name,
            "id": result.id,
            "script": result.script,
            "category": result.category,
            "memo": result.memo
        });
        renderSelect(result.categoryId);
        form.render();
        xadmin.openWinForDiv('编辑常用脚本','add',600,400);
    }
    function openDetail(id){
        var url="${request.contextPath}/a1bpmn/api/runtime/runtime/script/v1/get/"+id;
        var result=ajaxGet(url);
        $("#name").attr('disabled',true).attr("readonly",true)
        $("#script").attr('disabled',true).attr("readonly",true)
        $("#category").attr('disabled',true).attr("readonly",true)
        $("#memo").attr('disabled',true).attr("readonly",true)
        $("#status").hide()
        $("#formBtn").hide()
        var result=result.result;
        form.val('approvalForm', {
            "name": result.name,
            "id": result.id,
            "script": result.script,
            "category": result.category,
            "memo": result.memo
        });
        form.render();
        xadmin.openWinForDiv('查看常用脚本','add',600,400);
    }

    var table2;

    function getInstanceList() {
       var nameOrCategory=  $("input[name='nameOrCategory']").val();
        renderTable(nameOrCategory)
    }


var form;

    function renderTable(name,alias) {
        layui.use('table', function () {
            var table = layui.table;
           form=  layui.form;
            table2=table.render({
                id: 'typeTreelistReload',
                elem: '#instanceListTable'
                , limit: 10,
                height:500,
                method: 'post'
                , url: '${request.contextPath}/sys/serialNo/listJson'
                , page: {
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']//自定义分页布局
                    , limits: [10, 20, 30]
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }, request: {
                    pageName: 'page' //页码的参数名称,默认:page
                    , limitName: 'limit', //每页数据量的参数名,默认:limit
                },where :{
                    "name":name,
                    "alias":alias,
                },
                cols: [[
                    {type: 'checkbox'}
                    , {field: 'name', title: '名称'}
                    , {field: 'alias', title: '别名'}
                    , {field: 'regulation', title: '规则'}
                    , {field: 'genType', title: '生成类型',
                        templet: function (rec) {
                            var html = "" ;
                            if (rec.genType==1){
                                html='<span class="el-tag" ng-switch-when="NORMAL">每天生成</span>';
                            } else{
                                html='<span class="el-tag" ng-switch-when="NORMAL">递增</span>';
                            }
                            return html;
                        }}
                    , {field: 'noLength', title: '流水号长度'}
                    , {
                        title: '操作', fixed: 'right', width: '30%',
                templet: function (rec) {
                            var html = "" ;
                            html+="<button type=\"button\" class=\"btn btn-outline btn-success btn-xs\" lay-event=\"edit\"><li class='fa fa-edit'></li>&nbsp;修改</button>\n";
                            html+="<button type=\"button\" class=\"btn btn-outline btn-primary btn-xs\" lay-event=\"remove\"><li class='fa fa-remove'></li>&nbsp;删除</button>\n";
                            html+="<button type=\"button\" class=\"btn btn-outline btn-primary btn-xs\" lay-event=\"preview\"><li class='fa fa-eye'></li>&nbsp;预览</button>\n";
                            return html;
                        }
                    }
                ]],
            })
        });
    }




    function detailsInstance(obj){
        var data_id=  $(obj).attr('data-id');
        window.location.href='${request.contextPath}/a1bpmn/api/runtime/instance/v1/detailsInstance?id='+data_id;
    }
    function forbiddenInstance(obj) {
        var proc_id=   $(obj).attr("proc_id");
        var result=  ajaxGet('${request.contextPath}/a1bpmn/api/runtime/instance/v1/forbiddenInstance?instId='+proc_id)
        if (result.code==0){
            table2.reload({
                page: {
                    curr: $(".layui-laypage-em").next().html()
                }
                , where: {

                }
            });
        }
    }
    function unForbiddenInstance(obj) {
        var proc_id=   $(obj).attr("proc_id");
        var result=  ajaxGet('${request.contextPath}/a1bpmn/api/runtime/instance/v1/unForbiddenInstance?instId='+proc_id)
        if (result.code==0){
            table2.reload({
                page: {
                    curr: $(".layui-laypage-em").next().html()
                }
                , where: {

                }
            });
        }
    }
    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗?',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }

    function delAll (argument) {
        layui.use(['laydate','form'], function(){
            var table = layui.table;
            var data = table.checkStatus("typeTreelistReload")
            if (data && data.data.length>0) {
                layer.confirm('确认要删除吗?',function(index){
                    var ids=[];
                    $.each(data.data,function(index,value){
                        ids.push(value.id)
                    });
                    var res=  ajaxPost('${request.contextPath}/sys/serialNo/remove',ids)
                    if (res){
                        if (res.code==0){
                            alertSuccess('删除成功', {icon: 1});
                            layer.close(index)
                            renderTable()
                        }else{
                            alertError(res.msg)
                        }
                    }
                });
            }else{
                alertError('请选择要删除的数据!')
            }
        });
    }
</script>
</html>

后端代码:

/**
 * 流水号生成管理
 */
@RestController
@RequestMapping("/sys/serialNo/")
public class SysSerialNoController extends AbstractController {

    @Resource
    SerialNoManager serialNoManager;
    @Value("${pangu.delete}")
    private Boolean panguDelete;

    @PostMapping(value = "/listJson")
    @SysLog("流水号生成列表(分页条件查询)数据")
    @ResponseBody
    public R listJson(@ApiIgnore @RequestParam Map<String, Object> params, SerialNoQuery serialNoQuery) {
        return serialNoManager.listJson(params, serialNoQuery);
    }

    @PostMapping(value = "/save")
    @ResponseBody
    @SysLog("保存流水号")
    public R save(@RequestBody SerialNo serialNo) {
        boolean exist = serialNoManager.isAliasExisted(serialNo.getId(), serialNo.getAlias());
        if (!exist) {
            if (StringUtils.isNotEmpty(serialNo.getId())) {
                serialNo.setCreateTime(DateUtils.getCurrentDate());
                serialNo.setUpdateTime(DateUtils.getCurrentDate());
                serialNoManager.update(serialNo);
            } else {
                serialNo.setUpdateTime(DateUtils.getCurrentDate());
                serialNo.setId(SnowflakeIdWorkerUtils.getNextId());
                serialNoManager.save(serialNo);
            }

        } else {
            return R.error("添加流水号失败,别名【" + serialNo.getAlias() + "】在系统中已存在,不能重复");
        }
        return R.ok();
    }

    @SysLog("删除流水号")
    @PostMapping("/remove")
    @ResponseBody
    public R delete(@RequestBody String[] ids) {
        if (org.springframework.util.StringUtils.isEmpty(ids)) {
            return R.error("没有选中数据");
        }
        if (panguDelete) {
            serialNoManager.batchRemove(Arrays.asList(ids));
            return R.ok();
        } else {
            return R.error("演示模式下无法执行该操作");
        }

    }

    /**
     * V2.6.2 版本新增
     *
     * @param jsonParam
     * @return
     */
    @PostMapping(value = "/v2/remove")
    @SysLog("批量删除")
    @ResponseBody
    public R removeByIds(@RequestBody JSONObject jsonParam) {
        List list = jsonParam.getJSONArray("ids");
        if (list.isEmpty()) {
            return R.error("没有选中数据");
        }
        if (panguDelete) {
            serialNoManager.batchRemove(list);
            return R.ok();
        } else {
            return R.error("演示模式下无法执行该操作");
        }

    }


    @GetMapping(value = "/get/{id}")
    @SysLog("查询流水号")
    @ResponseBody
    public R get(@PathVariable("id") String id) {
        return serialNoManager.getCurById(id);
    }

    @GetMapping(value = "/previewIden/{alias}")
    @SysLog("执行流水号")
    @ResponseBody
    public R previewIden(@PathVariable("alias") String alias) {
        List<SerialNo> previewIden = serialNoManager.getPreviewIden(alias);
        return R.ok().put("data", previewIden);
    }


}
public interface SerialNoManager {

    /**
     * 判读流水号别名是否已经存在
     *
     * @param id
     *     id为null 表明是新增的流水号,否则为更新流水号
     * @param alias
     * @return
     */
    boolean isAliasExisted(String id, String alias);

    /**
     * 根据别名获取当前流水号
     *
     * @param alias
     * @return
     */
    public String getCurIdByAlias(String alias);

    /**
     * 根据别名获取下一个流水号
     *
     * @param alias
     * @return
     */
    public String nextId(String alias);

    /**
     * 根据别名预览前十条流水号
     *
     * @param alias
     * @return
     */
    public List<SerialNo> getPreviewIden(String alias);


    R listJson(Map<String, Object> params, SerialNoQuery serialNoQuery);

    void save(SerialNo serialNo);

    void batchRemove(List<String> list);

    R getCurById(String id);


    void update(SerialNo serialNo);
}
@Service("serialNoManager")
public class SerialNoManagerImpl implements SerialNoManager {

    @Autowired
    SerialNoDao serialNoDao;
    @Override
    public boolean isAliasExisted(String id, String alias) {
        return serialNoDao.isAliasExisted(id, alias)>0;
    }
    /**
     * 根据流程规则别名获取得当前流水号。
     *
     * @param alias 流水号规则别名。
     * @return
     */
    @Override
    public String getCurIdByAlias(String alias) {
        SerialNo serialNoDaoByAlias = this.serialNoDao.getByAlias(alias);
        Integer curValue = serialNoDaoByAlias.getCurValue();
        if (curValue == null) {
            curValue = serialNoDaoByAlias.getInitValue();
        }
        return getByRule(serialNoDaoByAlias.getRegulation(), serialNoDaoByAlias.getNoLength(), curValue);
    }

    /**
     * 根据规则返回需要显示的流水号。
     *
     * @param rule     流水号规则。
     * @param length   流水号的长度。
     * @param curValue 流水号的当前值。
     * @return
     */
    private String getByRule(String rule, int length, int curValue) {
        Calendar now = Calendar.getInstance();
        int month = now.get(Calendar.MONTH) + 1;
        int day = now .get(Calendar.DAY_OF_MONTH);

        StringBuilder serialNo = new StringBuilder();
        int fillLength = length - String.valueOf(curValue).length();
        for (int i = 0; i < fillLength; i++) {
            serialNo.append("0");
        }
        serialNo.append(curValue);

        return rule.replace("{yyyy}",String.valueOf(now.get(Calendar.YEAR)))
            .replace("{MM}", String.valueOf((month < 10) ? "0" + month : "" + month))
            .replace("{mm}", String.valueOf(month))
            .replace("{DD}", String.valueOf((day < 10) ? "0" + day : "" + day))
            .replace("{dd}", String.valueOf(day))
            .replace("{NO}", serialNo.toString())
            .replace("{no}", String.valueOf(curValue));


    }


    /**
     * 根据流程规则别名获取得下一个流水号。
     *
     * @param alias 流水号规则别名。
     * @return
     */
    @Override
    public synchronized String nextId(String alias) {
        SerialNo serialNoDaoByAlias = serialNoDao.getByAlias(alias);
        if (serialNoDaoByAlias == null) {
            throw new BusinessException("流水号【" + alias + "】缺失!请联系系统管理员!");
        }

        Result result = genResult(serialNoDaoByAlias);

        int tryTimes = 0;
        while (result.getRtn() == 0) {
            tryTimes++; // 防止在使用中修改步长,导致死循环
            if (tryTimes > 100) {
                throw new BusinessException("获取流水号失败! " + serialNoDaoByAlias.getAlias());
            }


            serialNoDaoByAlias.setCurValue(result.getCurValue());
            result = genResult(serialNoDaoByAlias);
        }
        return result.getIdNo();
    }



    public Result genResult(SerialNo serialNo) {
        String rule = serialNo.getRegulation();
        int step = serialNo.getStep();
        int genEveryDay = serialNo.getGenType();

        //如果失败过一次、使用失败的当前值。没有失败
        Integer curValue = serialNo.getCurValue();

        if (curValue == 0) {
            curValue = serialNo.getInitValue();
        }


        // 每天都生成
        if (genEveryDay == 1) {
            String curDate = getCurDate();
            String oldDate = serialNo.getCurDate();
            if (!curDate.equals(oldDate)) {
                serialNo.setCurDate(curDate);
                curValue = serialNo.getInitValue();
            } else {
                curValue = curValue + step;
            }
        } else {
            curValue = curValue + step;
        }
        serialNo.setNewCurValue(curValue);
        int i = 0;
        i = serialNoDao.updByAlias(serialNo);
        Result result = new Result(0, "", curValue);
        if (i > 0) {
            String rtn = getByRule(rule, serialNo.getNoLength(), curValue);
            result.setIdNo(rtn);
            result.setRtn(1);
        }
        return result;
    }

    /**
     * 返回当前日期。格式为 年月日。
     *
     * @return
     */
    public String getCurDate() {
        Date date = new Date();
        return DateUtil.format(date, "yyyyMMdd");

    }

    /**
     * 预览时,获取前十个流水号
     *
     * @param alias
     * @return
     */
    @Override
    public List<SerialNo> getPreviewIden(String alias) {
        int genNum = 10;
        SerialNo byAlias = serialNoDao.getByAlias(alias);
        String rule = byAlias.getRegulation();
        int step = byAlias.getStep();
        Integer curValue = byAlias.getCurValue();
        if (curValue == null) {
            curValue = byAlias.getInitValue();
        }
        List<SerialNo> tempList = new ArrayList<>();
        for (int i = 0; i < genNum; i++) {
            SerialNo serialNo = new SerialNo();
            if (i > 0) {
                curValue += step;
            }
            String rtn = getByRule(rule, byAlias.getNoLength(), curValue);
            serialNo.setId(curValue.toString());
            serialNo.setCurIdenValue(rtn);
            tempList.add(serialNo);
        }
        return tempList;
    }
    @Override
    public R listJson(Map<String, Object> params, SerialNoQuery serialNoQuery) {
        IPage<SerialNo> page = new Query<SerialNo>().getPage(params);
        IPage<SerialNo> ucRolesList = serialNoDao.getAllPage(page,params,serialNoQuery);

        return R.ok().put(Constants.COUNT, ucRolesList.getTotal()).put(Constants.DATA, ucRolesList.getRecords());
    }
    @Override
    public void save(SerialNo serialNo) {
        serialNoDao.save(serialNo);
    }
    @Override
    public void batchRemove(List<String> list) {
        serialNoDao.batchRemove(list);
    }
    @Override
    public R getCurById(String id) {
        SerialNo serialNo=  serialNoDao.getById(id);
        return R.ok().put(Constants.DATA,serialNo);
    }
    @Override
    public void update(SerialNo serialNo) {
        serialNoDao.update(serialNo);
    }

    public class Result {

        private int rtn = 0;
        private String idNo = "";
        private int curValue = 0;

        public Result(int rtn, String idNo, int curValue) {
            this.rtn = rtn;
            this.idNo = idNo;
            this.setCurValue(curValue);
        }


        public int getRtn() {
            return rtn;
        }

        public void setRtn(int rtn) {
            this.rtn = rtn;
        }

        public String getIdNo() {
            return idNo;
        }

        public void setIdNo(String idNo) {
            this.idNo = idNo;
        }

        public int getCurValue() {
            return curValue;
        }

        public void setCurValue(int curValue) {
            this.curValue = curValue;
        }


    }


}
public interface SerialNoDao {

    /**
     * 判读流水号别名是否已经存在
     *
     * @param id
     *     id为null 表明是新增的流水号,否则为更新流水号
     * @param alias
     * @return
     */
    Integer isAliasExisted(@Param("id") String id, @Param("alias") String alias);

    /**
     * 根据别名获取流水号数据(数据库锁定了对应的行数据)
     *
     * @param alias
     * @return
     */
    SerialNo getByAlias(String alias);

    /**
     * 根据流程别名 。
     *
     * @param SerialNo
     *     void
     */
    int updByAlias(SerialNo serialNo);

    /**
     *
     * @param page
     * @param params
     * @param serialNoQuery
     * @return
     */
    IPage<SerialNo> getAllPage(IPage<SerialNo> page, @Param("params") Map<String, Object> params, @Param("serialNoQuery")  SerialNoQuery serialNoQuery);

    void save(SerialNo serialNo);

    void batchRemove(@Param("list")List<String> list);

    SerialNo getById(String id);

    void update(SerialNo serialNo);
}
<mapper namespace="com.pangubpm.modules.data.dao.SerialNoDao">
    <resultMap id="SerialNo" type="com.pangubpm.modules.data.entity.SerialNo">
        <id property="id" column="id_" jdbcType="VARCHAR"/>
        <result property="name" column="name_" jdbcType="VARCHAR"/>
        <result property="alias" column="alias_" jdbcType="VARCHAR"/>
        <result property="regulation" column="regulation_" jdbcType="VARCHAR"/>
        <result property="genType" column="gen_type_" jdbcType="NUMERIC"/>
        <result property="noLength" column="no_length_" jdbcType="NUMERIC"/>
        <result property="curDate" column="cur_date_" jdbcType="VARCHAR"/>
        <result property="initValue" column="init_value_" jdbcType="NUMERIC"/>
        <result property="curValue" column="cur_value_" jdbcType="NUMERIC"/>
        <result property="step" column="step_" jdbcType="NUMERIC"/>
        <result column="DELETED" jdbcType="BOOLEAN" property="deleted" />
    </resultMap>

    <sql id="columns">
		id_,name_,alias_,regulation_,gen_type_,no_length_,cur_date_,init_value_,cur_value_,step_
	</sql>



    <update id="batchRemove"  parameterType="java.util.List">


        update sys_serialno
        set
        deleted=1
        where id_ in
        <foreach collection="list" index="index" item="item"
                 separator="," open="(" close=")">
            #{item}
        </foreach>
    </update>



    <select id="getAllPage" parameterType="Map" resultMap="SerialNo">
		SELECT * FROM sys_serialno
		WHERE
		DELETED=0



        <if test="serialNoQuery.name!=null  and serialNoQuery.name!='' ">
            and  name_  like CONCAT('%', #{serialNoQuery.name,jdbcType=VARCHAR},'%')
        </if>
        <if test="serialNoQuery.alias!=null  and serialNoQuery.alias!='' ">
            and  alias_  like CONCAT('%', #{serialNoQuery.alias,jdbcType=VARCHAR},'%')
        </if>
        order by UPDATE_TIME desc

	</select>


    <update id="update" parameterType="com.pangubpm.modules.data.entity.SerialNo">
		UPDATE sys_serialno SET
		name_=#{name,jdbcType=VARCHAR},
		alias_=#{alias,jdbcType=VARCHAR},
		regulation_=#{regulation,jdbcType=VARCHAR},
		gen_type_=#{genType,jdbcType=NUMERIC},
		no_length_=#{noLength,jdbcType=NUMERIC},
		cur_date_=#{curDate,jdbcType=VARCHAR},
		init_value_=#{initValue,jdbcType=NUMERIC},
		cur_value_=#{curValue,jdbcType=NUMERIC},
		step_=#{step,jdbcType=NUMERIC},
		UPDATE_TIME=#{updateTime,jdbcType=TIMESTAMP}
		WHERE
		id_=#{id}
	</update>

    <update id="updByAlias" parameterType="com.pangubpm.modules.data.entity.SerialNo">
		UPDATE sys_serialno SET
		cur_date_=#{curDate,jdbcType=VARCHAR},
		cur_value_=#{newCurValue,jdbcType=NUMERIC},
		UPDATE_TIME=#{updateTime,jdbcType=TIMESTAMP}

		WHERE alias_=#{alias,jdbcType=VARCHAR}
		and cur_value_=#{curValue,jdbcType=NUMERIC}
	</update>



    <select id="isAliasExisted" resultType="java.lang.Integer">
        select count(*) from sys_serialno where alias_=#{alias}
        <if test="id!=null">AND id_ !=#{id}</if>
    </select>

    <select id="getByAlias" parameterType="String" resultMap="SerialNo">
        SELECT
        <include refid="columns"/>
        FROM sys_serialno
        WHERE
        alias_=#{alias}
    </select>
    <select id="getById" parameterType="String" resultMap="SerialNo">
        SELECT
        <include refid="columns"/>
        FROM sys_serialno
        WHERE
        id_=#{id}
    </select>

    <insert id="save" parameterType="com.pangubpm.modules.data.entity.SerialNo">
        insert into sys_serialno
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                ID_,
            </if>
            <if test="name != null">
                NAME_,
            </if>
            <if test="alias != null">
                ALIAS_,
            </if>
            <if test="regulation != null">
                regulation_,
            </if>
            <if test="genType != null">
                gen_type_,
            </if>
            <if test="noLength != null">
                no_length_,
            </if>
            <if test="curDate != null">
                cur_date_,
            </if>
            <if test="initValue != null">
                init_value_,
            </if>
            <if test="curValue != null">
                cur_value_,
            </if>
            <if test="step != null">
                step_,
            </if>
            <if test="deleted != null">
                DELETED,
            </if>
            <if test="updateTime != null">
                UPDATE_TIME ,
            </if>
            <if test="createTime!= null">
                CREATE_TIME ,
            </if>

        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id,jdbcType=VARCHAR},
            </if>
            <if test="name != null">
                #{name,jdbcType=VARCHAR},
            </if>
            <if test="alias != null">
                #{alias,jdbcType=VARCHAR},
            </if>
            <if test="regulation != null">
                #{regulation,jdbcType=VARCHAR},
            </if>
            <if test="genType != null">
                #{genType,jdbcType=DECIMAL},
            </if>
            <if test="noLength != null">
                #{noLength,jdbcType=NUMERIC},
            </if>
            <if test="curDate != null">
                #{curDate,jdbcType=VARCHAR},
            </if>
            <if test="initValue != null">
                #{initValue,jdbcType=NUMERIC},
            </if>
            <if test="curValue != null">
                #{curValue,jdbcType=NUMERIC},
            </if>
            <if test="step != null">
                #{step,jdbcType=NUMERIC},
            </if>
            <if test="deleted != null">
                #{deleted,jdbcType=BOOLEAN},
            </if>
            <if test="updateTime != null">
                #{updateTime,jdbcType=TIMESTAMP},
            </if>
            <if test="createTime!= null">
                #{createTime,jdbcType=TIMESTAMP},
            </if>

        </trim>


    </insert>

</mapper>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值