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软件进行操作
- Database ==》 Monitor ==》 Session Browser
- Locks ==》 Show All
- 选择死锁的那一行,然后点击
- Kill session
方法二:通过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;