Ploymer 开发笔记

客户端

客制化Grid参考:  http://helpme.emro.co.kr/projects/grid/api/cn/index

基本结构

快速生成是输入:pe   (polymer elements)

查询文件快捷键:ctrl+p

<dom-module id="文件名">

    <template>

        <style>          

            :host {

                display: block;

                @apply(--layout-vertical);

                @apply(--layout-flex);

            } 

            //样式         

        </style>   

        //控件

    </template>

    <script>

        //业务逻辑

        Polymer({

            is: '文件名',           

            // Behavior依赖

            behaviors: [

                Things.ResourceMenuContentBehavior

            ],

            // 事件监听

            listeners: {            

            },

            // 变量定义

            properties: {

            },

            // 变量值监听

            observers : {

            },          

            // lifecycle函数(ready、attached等)

            ready : function() {

            },

            //自定义方法

            showInfo(){

            }

        });

    </script>

</dom-module>

 

控件Style配置

@apply(--layout-vertical);    //垂直布局

@apply(--layout-horizontal);  //水平布局

@apply(--layout-flex);        //表示根据内容填充

 

[[变量名]]  控件没法改值,只读权限,看成常量

{{变量名}}  控件可以改值,可读可写权限

获取grid勾中的数据

 

var rows = this.$['myGrid'].getGridObject().getCheckedRows();

var selectedRows = [];

for (var one of rows) {

selectedRows.push(one.getRowObject());

}

获取grid点击或者双击时的数据

var grid = event.detail.grid;

var rowObj = grid.focusedDataRow().getRowObject();

插入一条数据在grid的第一行,创建状态

grid.dataSet.insertRow(0,json);

添加一下样式

.subtitle:before {

      content: "";

      @apply(--things-subtitle-icon);

}

.subtitle {

      @apply(--things-tight-padding);

      @apply(--things-subtitle);

}

 

<div class="subtitle">

      <things-i18n-msg msgid="label.out_shelf"></things-i18n-msg>

</div>

 

跳转页面(从A页面跳转到B页面,并且传参数)

A页面代码 (url填的是B页面的路径)

 

    _show: function(e){

        var url = '/qcm_ipqc_orders';               

        var state = {

            id:event.detail.ipqc_order_id                   

        };

        page(url,state);

    }

 

B页面代码

attached: function() {

    //监听跳转到这个界面的事件

    document.addEventListener('things-routing-changed-qcm_ipqc_orders', function(e) {

        // initialParams变量里可以获取到从From界面里传过来的数据

        this.orderId = e.detail.initialParams['id'];                   

      

        // 第一次界面跳转时,form因为没有加载完,所以需要先判断是否form已加载完成

        if (form.$.form.isFormConfigured()) {

            // 第二次跳转开始跑此逻辑

            this._findAll();                        

        }

       

    }.bind(this));

},

 

调用ajax请求

js中调用things-ajax控件发送请求用 generateRequest方法

js中调用things-search-form控件发送请求用 submitMyForm方法

 

显示文件(PDF、MP4、PNG等)

在当前页面的首部先添加两个控件

 

<link rel="import" href="../../../bower_components/things-base-libs/common/things-common-video-player.html">

<link rel="import" href="../../../bower_components/things-base-libs/common/things-common-object-viewer.html">

 

Grid里面的数据必需有的三个参数

文件id    attachment_id 

文件类型  attachment_type

文件保存路径  attachment_url

 

         /**           

         * Fullscreen 全屏

             */

            _fullscreenChangedHandler: function() {

                this._setFullscreen(this._isFullscreenToggled());

                if (this.fullscreen) {

                    this.$.objectViewer.removeAttribute('hidden');

                } else {

                    this.$.objectViewer.setAttribute('hidden', !this.fullscreen);

                }

            },

 

            /**

            * 选择对应的附件

            */

            _attachSelected:function(event) {

                var attachment = event.detail;

                attachment.attachment_type = attachment.attachment_type.toLowerCase();

 

                if (this.selectedItemId == attachment.attachment_id && attachment.attachment_type == 'mp4') return;

 

                if (this.selectedItemId != attachment.attachment_id) {

                    this.selectedItemId = attachment.attachment_id;

                }

 

                if (attachment.attachment_type == 'mp4') {

                    this.showGuideByMovie(attachment);

 

                } else if (attachment.attachment_type == 'pdf' || attachment.attachment_type == 'xlsx') {

                    var mediaType = 'application/' + attachment.attachment_type

                    this.showPDFGuide(attachment, mediaType);

 

                } else if (attachment.attachment_type == 'png' ||

                    attachment.attachment_type == 'gif' ||

                    attachment.attachment_type == 'jpeg' ||

                    attachment.attachment_type == 'jpg' ||

                    attachment.attachment_type == 'tiff') {

                    var mediaType = null;

                    if (attachment.attachment_type == 'gif') {

                        mediaType = 'image/jls'

 

                    } else if (attachment.attachment_type == 'jpeg') {

                        mediaType = 'image/jpm'

 

                    } else {

                        mediaType = 'image/' + attachment.attachment_type

                    }

 

                    this.showGuide(attachment, mediaType);

                }

            },

 

            /**

             * 音频(MP4)显示

             */

            showGuideByMovie: function(attachment) {

                // var baseUrl = this.fileDownloadBaseUrl;

                var videoUrl = this.globals.baseUrl + '/download/' + attachment.attachment_id;

                var videoView = document.createElement('things-common-video-player');

                videoView.title = attachment.name;

                videoView.videoUrl = videoUrl;

                this.openPopupView(videoView, true);

            },

 

            /**

             * 图片显示

             */

            showGuide: function(attachment, mediaType) {

                // var pdfUrl = this.fileDownloadBaseUrl + attachment.path;

                var objectViewer = document.createElement('things-common-object-viewer');

                objectViewer.mediaType = mediaType;

                objectViewer.file = this.globals.baseUrl + '/download/' + attachment.attachment_id;

                objectViewer.setAttribute('class', 'flex');

                this.$.objectViewer.innerHTML = '';

                this.$.objectViewer.appendChild(objectViewer);

                this.target = this.$.objectViewer

                this.toggleFullscreen();

            },

            /**

             * PDF xlsx显示

             */

            showPDFGuide: function(attachment, mediaType) {

                var pdfUrl = this.fileDownloadBaseUrl +'/'+ attachment.attachment_url;

                var objectViewer = document.createElement('things-common-object-viewer');

                objectViewer.mediaType = mediaType;

                objectViewer.file = pdfUrl;

                objectViewer.setAttribute('class', 'flex');

                this.$.objectViewer.innerHTML = '';

                this.$.objectViewer.appendChild(objectViewer);

                this.target = this.$.objectViewer

                this.toggleFullscreen();

            }

Thing-resource-grid 属性

<things-resource-grid

    id="myGrid"

    config="[[gridConfig]]"

    model="[[gridModel]]"

    columns="[[gridColumns]]"

    data="[[items]]"

    total-count="[[itemCount]]"

    current-page="{{page}}"

    limit="{{limit}}"

    fixed-column-count="[[menuInfo.fixed_columns]]"

    grid-save-action="exam_item/update_multiple"

    buttons="[[buttons]]"

    show-paginator=true

    paginatable=true                              

    !enable-detail-column>

</things-resource-grid>

 

Grid默认不显示分页,如果需要分页添加上以下两个属性即可

show-paginator = true

paginatable = true

 

Grid默认显示详情按钮,如果想隐藏详情按钮,请添加一下属性

!enable-detail-column

 

如果你想自定义接口服务,可以用下面的属性

grid-save-action=’url’

 

给Form赋值

this.$[‘form’].setFormData(data);

提交Form数据

this.$[‘form’].submitMyForm();

把Form数据序列化成json对象

this.$[‘form’].serializeMyForm();

判断Form是否渲染成功

this.$[‘form’].$.form.isFormConfigured();

获取登录用户信息(包含角色信息)

this.globals.user

给Form里面的resource-selector控件一个监听事件

var myForm = this.$['diy_form'];               

    for (var i in myForm.getFormElements()) {

        var element = myForm.getFormElements()[i];                  

        if (element['name'] == 'work_order') {                       

             element.addEventListener('things-open-popup-view', function(e) {

                      e.detail.view.addEventListener('things-dialog-close', this.方法名.bind(this));

          }.bind(this));

        } 

    }

将Form里面的值清空

this.$[‘form’].resetMyForm();

给Form的控件设置成只读

var list = this.$['diy_form'].getFormElements();               

    for (var ele of list) {

           if(ele.name=='work_order'){ //things-resource-seletor用readOnly属性

                ele.readOnly = true;

           }else if(ele.name == 'sample_qty'){

                ele.readonly = true;

              }                  

    }

 

让Grid的值是修改的值而不是之前的值

如果是things-diy-based-grid

用this.$['grid'].getGrid().getGridObject().commit();

如果是things-resource-grid

用this.$['grid'].getGridObject().commit();

隐藏文件上传的清单(针对things-attached-file控件)

hiddenFileList: function() {

       this.querySelector('#attachments').querySelector('#fileList').style.display = 'none';

},

 

提示框

showMsg: function (text) {

         this.openInfoMsg({

                  title: Things.DataGlobal.t('title.info'),

                  text: text,

                  type: 'info',

                  timer: 10000

         });

}

根据某些条件让Grid某些列更换背景颜色

listeners: {

      'myGrid.things-grid-configured': 'setStyle' 

},

 

setStyle: function(){

    this.$['myGrid'].grid.loadStyles({

        body: {

            cellDynamic: [{

                expression: "values['order_status'] == 2",//判断条件

                styles: {

                    "background": "#76EE00"  //背景颜色                             

                }                       

            }]

        }

    });

},

 

Expression表达式写法:参照表达式规则

让Grid某一列文字换行,然后点击该行时,行高根据内容自动扩展

listeners: {

'grid1.things-grid-configured': '_onGridConfigured',

    'grid1.things-grid-cell-data-select': '_setOptions'

                 

},

 

_onGridConfigured: function(e) {

    var gridConfig = e.detail;

    //文字换行

    gridConfig.loadStyles({

        body: {

            cellDynamic: [{

                expression: "field == 10 or field == 11 or field == 12",

                styles: {

                    "textWrap": "normal"                               

                }

            }]

        }

    });

},

 

_setOptions: function(e){ 

    var columnName = e.detail.cell.column._dataFieldName;

    var row = e.detail.cell.rowIndex;

    if(columnName== 'technical_requirements' || columnName=='exam_item_method'){

        this.$['grid1'].grid.grid.fitRowHeight(row);               

    }else{

        this.$['grid1'].grid.grid.setRowHeight(row, undefined);

    }              

}

 

前端让Grid删除所选择的列

var myGrid = this.$['lot_no_grid'].getGridObject();

myGrid.deleteCheckedRows(true);

 

输入框回车后获取值

在输入框加入属性 on-keypress="方法名 "

如:

<things-input-field

value="{{phone}}"

label="[[labelPhone]]"

on-keypress="方法名 ">

</things-input-field>

 

方法名: function (e) {

     if (e.code.toUpperCase() != 'ENTER') {

         return

     }

     var lotNo = e.target.value;

}

服务端

方法参数注解

三者的区别:

url: /rest/info/{id}

@PathVariable (“id”)

获取url上 {id}的值

 

@RequestBody

获取请求的body实体

 

url: /rest/info?id=XXX

@RequestParam(id)

获取url上id的值

工具类

克隆排除(id,domainId,创建时间,创建人,修改人,修改时间)

ValueUtil.populateExceptDefaultField(from, to);

 

获取之前生成实例(同单例模式),不需要重新new一个新的空间

BeanUtil.get(类名.class).方法名();

 

传Lot 的name 获取Lot的id(详细操作自行看方法说明)

LotUtil.getWipLinkLot(in.getLotName(), null, false, false);

 

数据库

数据库发生死锁的时候,紧急处理方法

杀死进程,不过请慎重考虑该操作可能造成的数据丢失

方法一:通过toad软件进行操作

  1. Database ==》 Monitor ==》 Session Browser

Ploymer 开发笔记

  1. Locks ==》 Show All

Ploymer 开发笔记

 

  1. 选择死锁的那一行,然后点击

Ploymer 开发笔记

  1. Kill session

Ploymer 开发笔记

方法二:通过Sql语句进行操作

 

 

去除重复数据

//创建一个临时表

create table temp_table as select * from old_table;

//清除原先表的数据 (truncate与delete的区别:前者速度快,但是删除后,没法回滚,没法触发触发器)

truncate table old_table;

//重复数据只显示第一条数据,把处理过后,数据唯一的数据插入到原先表里面

insert into old_table(id,字段1,字段2) (select min(id),字段1,字段2 from temp_table group by 字段1,字段2);

//删除临时表

drop table temp_table;