/***********************************************/
|
//vue 常用组件封装
|
//CREATE:zh 2018-6-1
|
/***********************************************/
|
|
//mixin 键盘扫描公共事件
|
var documentKeyMixin = {
|
data: function () {
|
return {
|
focus: "", //当前扫码码值
|
workPlatform: "", //当前分拣台
|
}
|
},
|
methods: {
|
//键盘回车工厂事件，可在外部vue的methods中重写
|
keyDownFactory: function () {
|
var $this = this;
|
console.log($this.focus);
|
},
|
documentKeyDown: function (e) {
|
var $this = this;
|
var keyArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", ".", "+", "-", "*", "/", "_"];
|
var _focus = $("#txtFocus");
|
if (_focus.length > 0) _focus.focus();
|
var _key = e.key.toUpperCase();
|
if ($.inArray(_key, keyArray) > -1) {
|
$this.focus += _key;
|
}
|
if (e.keyCode == 8) {
|
if (window.event.srcElement.tagName.toUpperCase() != "INPUT"
|
&& window.event.srcElement.tagName.toUpperCase() != "TEXTAREA"
|
&& window.event.srcElement.tagName.toUpperCase() != "TEXT") {
|
e.keyCode = 0;
|
e.returnValue = false;
|
e.preventDefault();
|
}
|
else {
|
if ($this.focus) {
|
$this.focus = $this.focus.substr(0, $this.focus.length - 1);
|
e.preventDefault();
|
}
|
}
|
}
|
if (e.keyCode == 13 && $this.focus) {
|
$this.keyDownFactory();
|
}
|
},
|
alert: function (msg) {
|
var $this = this;
|
document.onkeydown = function (e) {
|
return false;
|
}
|
layer.alert(msg, {
|
icon: 0,
|
yes: function (index, layero) {
|
document.onkeydown = $this.documentKeyDown;
|
layer.close(index);
|
},
|
cancel: function (index, layero) {
|
document.onkeydown = $this.documentKeyDown;
|
}
|
});
|
},
|
notifyAlert: function (type, msg) {
|
var $this = this;
|
if (type == "success" || type == "warning") {
|
var title = type == "success" ? "成功" : "警告";
|
$this.$notify({
|
title: title,
|
message: msg,
|
type: type
|
});
|
} else {
|
$this.$notify.error({
|
title: '错误',
|
message: msg
|
});
|
}
|
},
|
setCookie: function (name, value) {//设置cookie，时间30天
|
var days = 30;
|
var expires = new Date();
|
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
document.cookie = name + "=" + escape(value) + ";expires=" + expires.toGMTString();
|
}
|
},
|
mounted: function () {
|
document.onkeydown = this.documentKeyDown;
|
if ($('#txtFocus')) {
|
$('#txtFocus').focus();
|
}
|
//初始化条码前缀
|
GetNumRule();
|
}
|
};
|
|
//带标题text
|
Vue.component('input-text', {
|
props: ['title', 'id', 'value', 'width', 'readonly', 'expandstyle', 'disabled'],
|
data: function () {
|
return {
|
w: this.width || 160,
|
s: this.expandstyle || '',
|
defaultTitle: this.title ? this.title + "：" : ""
|
};
|
},
|
template: '<div class="conLi" :style="s"><label>{{defaultTitle}}</label><input :id="id" type="text" :readonly="readonly" :disabled="disabled" class="inputText" :style="\'margin-right:5px; width:\'+w+\'px;\'" :value="value" @input="inputChange"/></div>',
|
methods: {
|
inputChange: function ($event) {
|
this.$emit('input', $event.target.value);
|
}
|
}
|
});
|
|
Vue.component('input-number', {
|
props: ['title', 'id', 'value', 'width', 'readonly', 'expandstyle'],
|
data: function () {
|
return {
|
w: this.width || 160,
|
s: this.expandstyle || ''
|
};
|
},
|
template: '<div class="conLi" :style="s"><label>{{title}}：</label><input :id="id" onpaste="return false;" type="text" :readonly="readonly" class="inputText" @afterpaste="keyEvent" @keyup="keyEvent" :style="\'margin-right:5px; width:\'+w+\'px;\'" :value="value" @input="inputChange"/></div>',
|
methods: {
|
inputChange: function ($event) {
|
this.$emit('input', $event.target.value);
|
},
|
keyEvent: function ($event) {
|
if ($event.target.value.length == 1) {
|
var reg = /[^1-9]/g;
|
//return reg.test($event.target.value);
|
$event.target.value = $event.target.value.replace(/[^1-9]/g, '');
|
} else {
|
var reg = /\D/g;
|
//return reg.test($event.target.value);
|
$event.target.value = $event.target.value.replace(/\D/g, '');
|
}
|
}
|
}
|
});
|
|
//带标题下拉框dropbox
|
Vue.component('input-drowdownbox', {
|
props: ['title', 'id', 'width', 'name', 'datalist', 'val', 'defaultvalue'],
|
data: function () {
|
return {
|
w: this.width || 140,
|
dataList: this.datalist,
|
defaultValue: this.defaultvalue || '全部',
|
defaultVal: this.val || '全部',
|
defaultTitle: this.title ? this.title + "：" : ""
|
}
|
},
|
template: '<div class="conLi">'
|
+ '<label>{{defaultTitle}}</label>'
|
+ '<div class="drowdownBox" :name="name">'
|
+ '<span class="drowdownInput" name="magic">'
|
+ '<input :id="\'txt\'+id" type="text" :value="defaultVal" class="inputText" :style="\'width:\'+w+\'px;\'" readonly="readonly" />'
|
+ '<a :id="\'a\'+id" href="javascript:void(0)" class="downIcon"></a>'
|
+ '</span>'
|
+ '<div :id="\'ddl\'+id" class="drowdownList" name="magic" style="display:none; max-height:200px;overflow-y:scroll">'
|
+ '<div type="dictionbox" @click="itemclick(defaultValue)">{{defaultValue}}</div>'
|
+ '<div type="dictionbox" v-for="d in dataList" @click="itemclick(d)">{{d}}</div>'
|
+ '</div>'
|
+ '</div>'
|
+ '</div>',
|
methods: {
|
itemclick: function (val) {
|
this.$emit('getvalue', val);
|
}
|
},
|
watch: {
|
datalist: function (val) {
|
this.dataList = val;
|
},
|
val: function (newValue) {
|
this.defaultVal = newValue;
|
}
|
}
|
});
|
|
//配置属性列表
|
Vue.component('input-config', {
|
props: ['configlist'],
|
template: '<div class="conLi" style="float:right;">'
|
+ '<div class="drowdownInput" style="width: 90px; background: #eee; cursor: pointer; float: right">'
|
+ '<span id="sConfigSet" style=" cursor:pointer; padding:0 12px; height:26px; line-height:26px;display:inline-block;">配置</span>'
|
+ '<a id="aConfigSet" href="javascript:void(0)" class="downIcon" style="border-left:1px solid #ddd;"></a>'
|
+ '</div>'
|
+ '<div id="ddlConfigSet" class="drowdownList" style="display:none; right:auto;width:200px;background:#fff;">'
|
+ '<div v-for="c in configlist" style="border-bottom:1px dashed #ddd;"><input type="checkbox" :checked="c.value" @change="itemchangechecked(c)"/>{{c.text}}</div>'
|
+ '</div></div>',
|
methods: {
|
itemchangechecked: function (c) {
|
c.value = !c.value;
|
this.$emit('changechecked', c);
|
}
|
}
|
});
|
|
//单列div button
|
Vue.component('div-button', {
|
props: ['title', 'classname'],
|
data: function () {
|
return {
|
class_name: this.classname || 'button'
|
}
|
},
|
template: '<div class="conLi">'
|
+ '<a href="javascript:void(0)" :class="class_name" @click="childclick">{{title}}</a>'
|
+ '</div>',
|
methods: {
|
childclick: function () {
|
this.$emit('btnclick');
|
}
|
}
|
});
|
|
|
Vue.component('a-button', {
|
props: ['title', 'classname'],
|
data: function () {
|
return {
|
class_name: this.classname || 'button'
|
}
|
},
|
template: '<span>'
|
+ '<a href="javascript:void(0)" :class="class_name" @click="childclick">{{title}}</a>'
|
+ '</span>',
|
methods: {
|
childclick: function () {
|
this.$emit('btnclick');
|
}
|
}
|
});
|
|
Vue.component('datagrid', {
|
props: ['data', 'fields'],
|
data: function () {
|
return {
|
options: []
|
}
|
},
|
template: '<table id="dg" class="easyui-datagrid" data-options="fitColumns:true,fit:true,pagination:false">'
|
+ '<thead>'
|
+ '<tr>'
|
+ '<th v-for="f in options" v-bind:data-options="f.option">{{f.field}}</th>'
|
+ '</tr>'
|
+ '</thead>'
|
+ '<tbody>'
|
+ '<tr v-for="d in data"><td>{{d.A}}</td><td>{{d.B}}</td><td>{{d.C}}</td></tr>'
|
+ '</tbody>'
|
+ '</table>',
|
mounted: function () {
|
this.options = [];
|
for (var i = 0; i < this.fields.length; i++) {
|
this.options.push({ field: this.fields[i], option: "field:'" + this.fields[i] + "',width:100,align:'center'" });
|
}
|
},
|
watch: {
|
data: function (val) {
|
$("#dg").datagrid('loadData', val);
|
}
|
}
|
});
|
|
//datagrid 封装 to do...
|
Vue.component('easyui-datagrid', {
|
props: ['id', 'options', 'jsondata'],
|
data: function () {
|
return {
|
propJsonData: [],
|
jsonData: [],
|
fields: [],
|
dataOptions: []
|
}
|
},
|
template: '<table class="easyui-datagrid" :id="id" data-options="fitColumns:true,fit:true,pagination:false">'
|
+ '<thead>'
|
+ '<tr>'
|
+ '<th data-options="field:\'ck\',checkbox:true"></th>'
|
+ '<th v-for="f in dataOptions" :data-options="f.opt">{{f.name}}</th>'
|
+ '</tr>'
|
+ '</thead>'
|
+ '<tbody>'
|
+ '<tr v-for="item in jsonData"><td></td><td v-for="f in item">{{f}}</td></tr>'
|
+ '</tbody>'
|
+ '</table>',
|
mounted: function () {
|
var $this = this;
|
//将field 跟数据列对应
|
for (var f in $this.options.fields) {
|
var isField = 0;
|
var dataOpt = [];
|
var dataOptObj = {};
|
for (_f in $this.options.fields[f]) {
|
var _v = $this.options.fields[f][_f];
|
if (isField > 0) {
|
switch (_f) {
|
case "width":
|
dataOpt.push("width:" + _v);
|
break;
|
case "formatter":
|
dataOpt.push("formatter:" + _v);
|
break;
|
}
|
} else {
|
dataOpt.push("field:'" + _f + "'");
|
dataOpt.push("align:'center'");
|
var field = {};
|
eval("field." + _f + "='" + _v + "'");
|
$this.fields.push(field);
|
dataOptObj.name = _v;
|
}
|
isField++;
|
}
|
dataOptObj.opt = dataOpt.join(',');
|
$this.dataOptions.push(dataOptObj);
|
}
|
},
|
watch: {
|
jsondata: function (val) {
|
console.log('val:');
|
console.log(val);
|
|
var $this = this;
|
$this.jsonData = [];
|
$this.propJsonData = val;
|
//将field 跟数据列对应
|
for (var d in $this.propJsonData) {
|
var row = {};
|
for (var f in $this.fields) {
|
for (var _f in $this.fields[f]) {
|
for (var _d in $this.propJsonData[d]) {
|
if (_f == _d) {
|
eval("row." + _f + "='" + $this.propJsonData[d][_d] + "'");
|
}
|
}
|
}
|
}
|
$this.jsonData.push(row);
|
}
|
console.log($this.jsonData);
|
}
|
}
|
});
|
|
//下拉框(饿了么)
|
Vue.component('hh-select', {
|
props: ['options', 'defaultdata', 'multiple', 'title', 'width'],
|
data: function () {
|
return {
|
defaultValue: {
|
value: '',
|
label: '全部'
|
},
|
modelTitle: this.title ? this.title + "：" : '',
|
modelValue: this.defaultdata || '',
|
elOptions: this.options || [],
|
isMultiple: this.multiple == "true" ? true : false,
|
selectWidth: this.width || 130
|
}
|
},
|
template: '<span style="margin:0px 5px;">{{modelTitle}}<el-select v-bind:style="\'width:\'+selectWidth+\'px\'" v-model="modelValue" placeholder="请选择" size="small" v-bind:clearable="false" @input="inputChange" v-bind:multiple="isMultiple" v-bind:collapse-tags="isMultiple">'
|
+ '<el-option v-for="item in optionsData"'
|
+ 'v-bind:key="item.value"'
|
+ 'v-bind:label="item.label"'
|
+ 'v-bind:value="item.value">'
|
+ '</el-option>'
|
+ '</el-select></span>',
|
methods: {
|
inputChange: function ($event) {
|
this.modelValue = $event;
|
this.$emit('input', $event);
|
},
|
},
|
computed: {
|
optionsData: function () {
|
var $this = this;
|
var tempOptions = this.elOptions;
|
if (!$this.multiple)
|
tempOptions.unshift(this.defaultValue);
|
return tempOptions;
|
}
|
},
|
watch: {
|
options: function (val) {
|
this.elOptions = val;
|
}
|
}
|
});
|
|
|
Vue.component('hh-select-url', {
|
props: ['url', 'defaultdata', 'multiple', 'title', 'valuefield', 'textfield', 'datafield', 'ajaxtype', 'postdata', 'iseval', 'width', 'disabled'],
|
data: function () {
|
return {
|
defaultValue: {
|
value: '',
|
label: '全部'
|
},
|
modelTitle: this.title ? this.title + "：" : '',
|
modelValue: this.defaultdata || '',
|
isMultiple: this.multiple == "true" ? true : false,
|
ajaxType: this.ajaxtype || "GET",
|
selectWidth: this.width || 130,
|
isDisabled: this.disabled || false
|
}
|
},
|
template: '<span style="margin:0px 5px;">{{modelTitle}}<el-select v-model="modelValue" v-bind:style="\'width:\'+selectWidth+\'px\'" placeholder="请选择" size="small" @input="inputChange" v-bind:clearable="false" v-bind:multiple="isMultiple" v-bind:collapse-tags="isMultiple" v-bind:disabled="isDisabled">'
|
+ '<el-option v-for="item in optionsData"'
|
+ 'v-bind:key="item.value"'
|
+ 'v-bind:label="item.label"'
|
+ 'v-bind:value="item.value">'
|
+ '</el-option>'
|
+ '</el-select></span>',
|
methods: {
|
inputChange: function ($event) {
|
this.modelValue = $event;
|
this.$emit('input', $event);
|
},
|
},
|
computed: {
|
optionsData: function () {
|
var $this = this;
|
var _url = $this.url;
|
var tempOptions = [];
|
$.ajax({
|
type: $this.ajaxType,
|
url: _url,
|
data: $this.postdata,
|
dataType: "json",
|
async: false,
|
success: function (data) {
|
if (data) {
|
if ($this.iseval) {
|
data = eval("(" + data + ")");
|
}
|
var rows = data;
|
if ($this.datafield) {
|
rows = eval("rows." + $this.datafield);
|
}
|
if (!$this.multiple)
|
tempOptions.push($this.defaultValue);
|
rows.forEach(function (n) {
|
tempOptions.push({
|
value: eval("n." + $this.valuefield),
|
label: eval("n." + $this.textfield)
|
});
|
});
|
}
|
}
|
});
|
return tempOptions;
|
}
|
},
|
watch: {
|
disabled: function (val) {
|
this.isDisabled = val;
|
},
|
defaultdata: function (val) {
|
this.modelValue = val;
|
}
|
}
|
});
|
|
Vue.component('hh-input', {
|
props: ['defaultdata', 'title', 'width'],
|
data: function () {
|
return {
|
defaultValue: {
|
value: '',
|
label: '全部'
|
},
|
modelTitle: this.title ? this.title + "：" : '',
|
modelValue: this.defaultdata || '',
|
inputWidth: this.width || 130
|
}
|
},
|
methods: {
|
inputChange: function ($event) {
|
this.modelValue = $event;
|
this.$emit('input', $event);
|
},
|
},
|
template: '<span style="margin:0px 5px;">{{modelTitle}}<el-input placeholder="请输入内容" v-model="modelValue" v-bind:style="\'width:\'+inputWidth+\'px\'" @input="inputChange" size="small" clearable> </el-input>'
|
+ '</span>'
|
});
|
|
Vue.component('location-state', {
|
template: '<div class="colorDiv"><ul><li><div><label class="spaceState white"></label><span>空货位</span></div></li><li><div><label class="spaceState cyan"></label><span>满货位</span></div></li><li><div><label class="spaceState purple"></label><span>预入库锁定</span></div></li><li> <div><label class="spaceState orange"></label><span>预出库锁定</span></div></li></ul><slot></slot></div>'
|
});
|
