' +
'| ' +
'' +
' | ' +
'' +
' '+
' '+
' '+
' '+
//最后的按键栏
'' +//
' '+
' ' +
'{{formlanguage_map[formlanguage].add}}' +
'{{formlanguage_map[formlanguage].import}}' +
'{{formlanguage_map[formlanguage].export}}' +
'{{formlanguage_map[formlanguage].sendGSP}}' +
'{{formlanguage_map[formlanguage].query}}' +
'{{formlanguage_map[formlanguage].empty}}' +
/* '' +
'' + */
/* '' + */
'' +
' ' +
' '+
' 收起 '+
' 展开 '+
'' +
/* '' + */
'' +
' '+
''+
//' '+
' '+
' '+
' '+
''+
'| '+
' '+
' | '+
''+
'{{formData[fieldObj.isstamp]}} | '+
''+
' '+
' '+
'{{r.value}} '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
//数字
''+
' '+
'{{formData[fieldObj.field]}} '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
//可新增的下拉选择器
' '+
' '+
''+
' '+
'新 增'+
' '+
' '+
'{{ item.label }}'+
// '{{ item.value }}'+
' '+
' '+
'{{ item.label }}'+
// '{{ item.value }}'+
' '+
' '+
' '+
''+
''+
''+
// '{{ data.label }}'+
''+
'新 增'+
' '+
// ''+
// '新 增'+
// ''+
''+
''+
'{{ data.label }}'+
' ({{ data.children.length }}) '+
''+
''+
''+
''+
' | '+
' '+
//' '+
' '+
'{{formData[fieldObj.field]}} '+
' | '+
//{{formData[fieldObj.field]}}
/* ''+
' | '+ */
''+
' '+
' | '+
' '+
' '+
' '+
'' +
' '+
' '+
' '+
' '+
' | '+
' '+
' '+
'',
props: {
formAttr: Object,
tableFields: Array,
formData: Object,
tableFieldClick: {//字段对应的点击事件
type: Object,
default: function(){
return {};
}
},
identificationfield: {//属性数据标识字段
type: String,
default: "field"
},
orderlabelfield: {//
type: String,
default: "name"
},
orderisselect: {//显示和隐藏的字段及对应值
type: Object,
default: function(){
return {
field: "isshow",
show: "T",
hide: "F"
};
}
},
isiconquery: {//首行是否存在图标
type: Boolean,
default: true
},
isdraggableorder: {//是否允许编辑字段顺序
type: Boolean,
default: false
},
isReduce: {//是否允许展开
type: Boolean,
default: false
},
isFormOpen: {//是否展开
type: Boolean,
default: true
},
isbuttonquery: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
buttonloading: {//按键的转圈圈
type: Boolean,
default: false
},
width: {
type: String,
default: "100%"
},
"formlanguage": {//表格语言
type: String,
default: "zh"
},
"formButton": {//筛选表单的功能按键
type: Object,
default: function(){
return {
query: true,//查询
empty: true,//重置
add: false,//添加
import: false,//导入
export: false,//导出
}
}
},
},
data() {
return {
isRefresh: true,
tableFieldsFormat: [],
formFieldsObj: {},
z_isformOpen: true,//是否展开
formlanguage_map: {
zh: {
query: "查询",
empty: "重置",
add: "新增",
import: "导入",
export: "导出",
sendGSP: "同步至GSP",
select: "请选择",
begin: "开始日期",
end: "结束日期",
to: "至"
},
en: {
query: "Search",
empty: "Clean",
add: "Add",
import: "Import",
export: "Export",
sendGSP: "SendGSP",
select: "Select",
begin: "begin",
end: "end",
to: "to"
},
},
showTableFields: [],
}
},
computed: {
tableFields2() {
if(this.formAttr && this.tableFields.length > 0) {
this.formLayout();
}
}
},
watch: {
// formData:{
// handler(newd, oldd) {
// this.h_onQuery();
// },
// deep: true,
// },
tableFields() {
if(this.formAttr && this.tableFields.length > 0) {
this.tableFields.map(e=>{
if (e.inputtypefilter && !e.type) {
e.type = e.inputtypefilter.toLowerCase();
}
else if (!e.type) {
e.type = "input";
}
//设置下拉选项的（根据字典数据设置）
if (e.type == "select" || e.type == "selectmultiple" || e.type == "cascader") {
if (!e.props) {
var props_ = {value: "code", label: "value"};
e.props = clone(props_);
}
if (e.optionsgroup) {
//:options="fieldObj.options" :props="fieldObj.props"
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
var list_ = newDictionary.getList(e.optionsgroup);
e.options = clone(list_);
}
else if(!e.options) {
e.options = []
}
if (e.type == "select") {
if (!e.options || e.options.filter(s => s.value == "请选择").length == 0) {
var null_ = {}
null_[e.props.value] = ""
null_[e.props.label] = "请选择"
e.options.unshift(null_);
}
}
}
if (e.type == "radio" || e.type == "checkboxobj") {
if (e.optionsgroup) {
//:options="fieldObj.options" :props="fieldObj.props" ;//{value: "code", label: "value"};
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
var list_ = newDictionary.getList(e.optionsgroup);
e.options = clone(list_);
}
else if(!e.options) {
e.options = []
}
}
//国际化设置，目前仅支持中/英
if (h_language && h_language=="en" && e.labelenglish) {
if (!e.labelchinese) {
e.labelchinese = clone(e.name);
}
e.name = clone(e.labelenglish);
}
else {
if (e.labelchinese) {
e.name = clone(e.labelchinese);
}
}
});
this.formLayout();
}
}
},
mounted() {
this.z_isformOpen = this.isFormOpen;
if(this.formAttr && this.tableFields && this.tableFields.length > 0) {
this.formLayout();
}
},
methods: {
saveOrder(v) {
// var obj = {
// select_datalist: select_datalist_,
// data_list: this.data_list
// }
this.$emit('order-fields', v);
},
formLayout() {
if (this.isReduce) {
this.doFormOpenReduce();
}
else {
var tableFields_open_ = clone(this.tableFields);
this.doFormLayout(tableFields_open_);
}
},
formOpenReduce() {
this.z_isformOpen = !this.z_isformOpen;
this.doFormOpenReduce();
},
doFormOpenReduce() {
var me = this;
if (this.z_isformOpen) {//展开
//获取全部字段
var tableFields_open_ = clone(this.tableFields);
//表单布局设置
this.doFormLayout(tableFields_open_, function() {
//如果有表格则表格高度设置
me.$emit("on-formlayout-after");
});
}
else {//收起
//获取收起后字段
var tableFields_open_ = [];
this.tableFields.map(t=>{
if (t.isopenshow) {
tableFields_open_.push(t);
}
});
if (tableFields_open_.length == 0 && this.tableFields.length > 0) {
tableFields_open_.push(this.tableFields[0]);
}
//表单布局设置
this.doFormLayout(tableFields_open_, function() {
//如果有表格则表格高度设置
me.$emit("on-formlayout-after");
});
}
},
doFormLayout(tableFields, callback) {
var me = this;
//表单布局设置
let columnnumber_ = this.formAttr.columnnumber;
let tableFieldsFormat_ = [];
let rowObj_ = {};
let children_ = [];
let i = 0;
let field_i = 0;
let tableFields_ = clone(tableFields);
let button_ = {isshow: "T", field: "id_filter_button_"};
if(tableFields_) {
tableFields_.push(button_);
}
me.showTableFields = [];
for (var r=0; r columnnumber_) {//如果合并列大于表单设置列数
field_.colspan = columnnumber_;
}
field_i += field_.colspan ? field_.colspan : 1;//如果有合并列数, 默认为1
if (field_i == columnnumber_) {//列数满一行
children_.push(field_);
i = columnnumber_;
}
else {//不满一行, 看是否存在下一属性，
//若有则看已有列数加下一合并列数是否超过设置列数，若超了则自动调整该属性的合并列，使下一属性换行。
//若没有下一属性，则调整该属性合并列
let nxt_r = r + 1;
let field_nxt = {};
if(nxt_r < tableFields_.length) {
for (var nxt_j = nxt_r; nxt_j < tableFields_.length; nxt_j++) {
let field_nxtj = tableFields_[nxt_j];
if(field_nxtj.isshow!="T") {
continue;
}
else {
field_nxt = field_nxtj;
break
}
}
}
if (field_nxt.field) {
//let field_nxt = tableFields_[nxt_r];
if(field_nxt.colspan) {
let field_i_nxt = field_i + field_nxt.colspan;
if (field_i_nxt > columnnumber_) {
field_.colspan = columnnumber_ - i;
children_.push(field_);
i = columnnumber_;
}
else {
children_.push(field_);
i++;
}
}
else {
children_.push(field_);
i++;
}
}
else {
field_.colspan = columnnumber_ - i;
children_.push(field_);
i = columnnumber_;
}
}
if (i == columnnumber_) {//列数满一行，保留该行属性，新建下一空行
rowObj_.children = children_;
tableFieldsFormat_.push(rowObj_);
rowObj_ = {};
children_ = [];
i = 0;
field_i = 0;
}
}
this.tableFieldsFormat = tableFieldsFormat_;
if (callback) {
this.$nextTick(function(){
callback();
})
}
},
h_onQuery() {
this.$emit("on-query");
},
h_onInitQuery() {
this.$emit("on-init-query");
},
h_onEditQuery() {
this.$emit("on-edit-query");
},
h_sendGSP() {
this.$emit("on-form-button", 'sendGSP');
},
h_onAdd() {
this.$emit("on-form-button", 'add');
},
h_onImport() {
this.$emit("on-form-button", 'import');
},
h_onExport() {
this.$emit("on-form-button", 'export');
},
refresh() {
this.isRefresh = false;
this.isRefresh = true;
},
showpopup(obj) {//弹窗弹出事件
let val = this.formData[obj.field];
let popupObj = {
obj: obj,
val: val
};
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onclick) {
this.tableFieldClick[obj.field].popup.onclick(popupObj);
}
// this.$emit('show-popup', popupObj);
},
setFormValByField(field, val) {
this.formData[field] = val;
this.isRefresh = false;
this.isRefresh = true;
},
setFormOptionsByField(fieldobj, result) {
let tableFieldsFormat_ = this.tableFieldsFormat;
tableFieldsFormat_.map(item => {
item.children.map(item2 => {
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
item2.options = result;
}
});
});
this.tableFieldsFormat = tableFieldsFormat_;
},
visibleChange(isshow, obj) {//下拉展开事件
if (isshow) {
// (tableFieldClick[obj.field] && tableFieldClick[obj.field].visible && tableFieldClick[obj.field].visible.onchange)
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].visible && this.tableFieldClick[obj.field].visible.onchange) {
this.tableFieldClick[obj.field].visible.onchange(obj, function(obj_) {
obj.options = obj_.options;
});
}
// this.$emit("visible-change", obj);
}
},
formchange(val, obj) {
var obj_ = {
fieldobj: obj,
data: this.formData
}
//this.$emit("form-change", obj_);
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].input && this.tableFieldClick[obj.field].input.onchange) {
this.tableFieldClick[obj.field].input.onchange(obj_);
}
// this.$emit("on-formchange", obj_);
},
ischeckboxchange(val, obj) {
obj.disabled = !val;
},
remoteMethod(query, fieldObj) {
var fromFieldsObj_ = clone(this.formFieldsObj);
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
var obj = {
query: query,
fieldObj: fieldObj
}
if (query !== '') {
this.$emit('remote-method', obj);
} else {
fieldObj.options = [];
}
},
selectChange(val, obj) {
this.formData[obj.field] = val;
let me = this;
if (obj.selectchildren) {
obj.selectchildren.map(e=>{
let tableFieldsFormat_ = me.tableFieldsFormat;
tableFieldsFormat_.map(item => {
item.children.map(item2 => {
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
if(item2.ismultiple) {
me.formData[e] = [];
}
else {
me.formData[e] = "";
}
}
});
});
});
}
var obj_ = {
fieldobj: obj,
data: this.formData
}
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].select && this.tableFieldClick[obj.field].select.onchange) {
this.tableFieldClick[obj.field].select.onchange(obj_, function() {
//选择后自动查询数据
me.h_onQuery()
});
}
else {
//选择后自动查询数据
this.h_onQuery()
}
// this.$emit("select-change", obj_);
this.isRefresh = false;
this.isRefresh = true;
},
selectoptionoperate(type, obj) {
var obj_ = {
type: type,
fieldobj: obj
}
this.$emit("select-option-operate", obj_);
},
}
});
/*********** 拖拽表单 ************/
Vue.component("h-form-draggable", {//拖拽表单
template:
'',
props: {
formAttr: Object,
tableFields: Array,
formData: Object,
tableFieldClick: {//字段对应的点击事件
type: Object,
default: function(){
return {};
}
},
identificationfield: {//属性数据标识字段
type: String,
default: "field"
},
orderlabelfield: {//
type: String,
default: "name"
},
orderisselect: {//显示和隐藏的字段及对应值
type: Object,
default: function(){
return {
field: "isshow",
show: "T",
hide: "F"
};
}
},
isiconquery: {//首行是否存在图标
type: Boolean,
default: true
},
isdraggableorder: {//是否允许编辑字段顺序
type: Boolean,
default: false
},
isReduce: {//是否允许展开
type: Boolean,
default: false
},
isFormOpen: {//是否展开
type: Boolean,
default: true
},
isbuttonquery: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
buttonloading: {//按键的转圈圈
type: Boolean,
default: false
},
width: {
type: String,
default: "100%"
},
"formlanguage": {//表格语言
type: String,
default: "zh"
},
"formButton": {//筛选表单的功能按键
type: Object,
default: function(){
return {
query: true,//查询
empty: true,//重置
add: false,//添加
import: false,//导入
export: false,//导出
}
}
},
},
data() {
return {
isRefresh: true,
tableFieldsFormat: [],
formFieldsObj: {},
z_isformOpen: true,//是否展开
formlanguage_map: {
zh: {
query: "查询",
empty: "重置",
add: "新增",
import: "导入",
export: "导出",
sendGSP: "同步至GSP",
select: "请选择",
begin: "开始日期",
end: "结束日期",
to: "至"
},
en: {
query: "Search",
empty: "Clean",
add: "Add",
import: "Import",
export: "Export",
sendGSP: "SendGSP",
select: "Select",
begin: "begin",
end: "end",
to: "to"
},
},
showTableFields: [],
}
},
computed: {
tableFields2() {
if(this.formAttr && this.tableFields.length > 0) {
this.formLayout();
}
}
},
watch: {
tableFields() {
if(this.formAttr && this.tableFields.length > 0) {
this.tableFields.map(e=>{
if (e.inputtypefilter && !e.type) {
e.type = e.inputtypefilter.toLowerCase();
}
else if (!e.type) {
e.type = "input";
}
//设置下拉选项的（根据字典数据设置）
if (e.type == "select" || e.type == "cascader") {
if (e.optionsgroup) {
var props_ = {value: "code", label: "value"};
//:options="fieldObj.options" :props="fieldObj.props"
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
var list_ = newDictionary.getList(e.optionsgroup);
e.props = clone(props_);
e.options = clone(list_);
}
else if(!e.options) {
e.options = []
}
}
//国际化设置，目前仅支持中/英
if (h_language && h_language=="en" && e.labelenglish) {
if (!e.labelchinese) {
e.labelchinese = clone(e.name);
}
e.name = clone(e.labelenglish);
}
else {
if (e.labelchinese) {
e.name = clone(e.labelchinese);
}
}
});
this.formLayout();
}
}
},
mounted() {
this.z_isformOpen = this.isFormOpen;
if(this.formAttr && this.tableFields && this.tableFields.length > 0) {
this.formLayout();
}
},
methods: {
saveOrder(v) {
// var obj = {
// select_datalist: select_datalist_,
// data_list: this.data_list
// }
this.$emit('order-fields', v);
},
formLayout() {
if (this.isReduce) {
this.doFormOpenReduce();
}
else {
var tableFields_open_ = clone(this.tableFields);
this.doFormLayout(tableFields_open_);
}
},
formOpenReduce() {
this.z_isformOpen = !this.z_isformOpen;
this.doFormOpenReduce();
},
doFormOpenReduce() {
var me = this;
if (this.z_isformOpen) {//展开
//获取全部字段
var tableFields_open_ = clone(this.tableFields);
//表单布局设置
this.doFormLayout(tableFields_open_, function() {
//如果有表格则表格高度设置
me.$emit("on-formlayout-after");
});
}
else {//收起
//获取收起后字段
var tableFields_open_ = [];
this.tableFields.map(t=>{
if (t.isopenshow) {
tableFields_open_.push(t);
}
});
if (tableFields_open_.length == 0 && this.tableFields.length > 0) {
tableFields_open_.push(this.tableFields[0]);
}
//表单布局设置
this.doFormLayout(tableFields_open_, function() {
//如果有表格则表格高度设置
me.$emit("on-formlayout-after");
});
}
},
doFormLayout(tableFields, callback) {
var me = this;
//表单布局设置
let columnnumber_ = this.formAttr.columnnumber;
let tableFieldsFormat_ = [];
let rowObj_ = {};
let children_ = [];
let i = 0;
let field_i = 0;
let tableFields_ = clone(tableFields);
let button_ = {isshow: "T", field: "id_filter_button_"};
if(tableFields_) {
tableFields_.push(button_);
}
me.showTableFields = [];
for (var r=0; r columnnumber_) {//如果合并列大于表单设置列数
field_.colspan = columnnumber_;
}
field_i += field_.colspan ? field_.colspan : 1;//如果有合并列数, 默认为1
if (field_i == columnnumber_) {//列数满一行
children_.push(field_);
i = columnnumber_;
}
else {//不满一行, 看是否存在下一属性，
//若有则看已有列数加下一合并列数是否超过设置列数，若超了则自动调整该属性的合并列，使下一属性换行。
//若没有下一属性，则调整该属性合并列
let nxt_r = r + 1;
let field_nxt = {};
if(nxt_r < tableFields_.length) {
for (var nxt_j = nxt_r; nxt_j < tableFields_.length; nxt_j++) {
let field_nxtj = tableFields_[nxt_j];
if(field_nxtj.isshow!="T") {
continue;
}
else {
field_nxt = field_nxtj;
break
}
}
}
if (field_nxt.field) {
//let field_nxt = tableFields_[nxt_r];
if(field_nxt.colspan) {
let field_i_nxt = field_i + field_nxt.colspan;
if (field_i_nxt > columnnumber_) {
field_.colspan = columnnumber_ - i;
children_.push(field_);
i = columnnumber_;
}
else {
children_.push(field_);
i++;
}
}
else {
children_.push(field_);
i++;
}
}
else {
field_.colspan = columnnumber_ - i;
children_.push(field_);
i = columnnumber_;
}
}
if (i == columnnumber_) {//列数满一行，保留该行属性，新建下一空行
rowObj_.children = children_;
tableFieldsFormat_.push(rowObj_);
rowObj_ = {};
children_ = [];
i = 0;
field_i = 0;
}
}
this.tableFieldsFormat = tableFieldsFormat_;
if (callback) {
this.$nextTick(function(){
callback();
})
}
},
h_onQuery() {
this.$emit("on-query");
},
h_onInitQuery() {
this.$emit("on-init-query");
},
h_onEditQuery() {
this.$emit("on-edit-query");
},
h_sendGSP() {
this.$emit("on-form-button", 'sendGSP');
},
h_onAdd() {
this.$emit("on-form-button", 'add');
},
h_onImport() {
this.$emit("on-form-button", 'import');
},
h_onExport() {
this.$emit("on-form-button", 'export');
},
refresh() {
this.isRefresh = false;
this.isRefresh = true;
},
showpopup(obj) {//弹窗弹出事件
let val = this.formData[obj.field];
let popupObj = {
obj: obj,
val: val
};
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onclick) {
this.tableFieldClick[obj.field].popup.onclick(popupObj);
}
// this.$emit('show-popup', popupObj);
},
setFormValByField(field, val) {
this.formData[field] = val;
this.isRefresh = false;
this.isRefresh = true;
},
setFormOptionsByField(fieldobj, result) {
let tableFieldsFormat_ = this.tableFieldsFormat;
tableFieldsFormat_.map(item => {
item.children.map(item2 => {
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
item2.options = result;
}
});
});
this.tableFieldsFormat = tableFieldsFormat_;
},
visibleChange(isshow, obj) {//下拉展开事件
if (isshow) {
// (tableFieldClick[obj.field] && tableFieldClick[obj.field].visible && tableFieldClick[obj.field].visible.onchange)
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].visible && this.tableFieldClick[obj.field].visible.onchange) {
this.tableFieldClick[obj.field].visible.onchange(obj);
}
// this.$emit("visible-change", obj);
}
},
formchange(val, obj) {
var obj_ = {
fieldobj: obj,
data: this.formData
}
//this.$emit("form-change", obj_);
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].input && this.tableFieldClick[obj.field].input.onchange) {
this.tableFieldClick[obj.field].input.onchange(obj_);
}
// this.$emit("on-formchange", obj_);
},
ischeckboxchange(val, obj) {
obj.disabled = !val;
},
remoteMethod(query, fieldObj) {
var fromFieldsObj_ = clone(this.formFieldsObj);
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
var obj = {
query: query,
fieldObj: fieldObj
}
if (query !== '') {
this.$emit('remote-method', obj);
} else {
fieldObj.options = [];
}
},
selectChange(val, obj) {
this.formData[obj.field] = val;
let me = this;
if (obj.selectchildren) {
obj.selectchildren.map(e=>{
let tableFieldsFormat_ = me.tableFieldsFormat;
tableFieldsFormat_.map(item => {
item.children.map(item2 => {
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
if(item2.ismultiple) {
me.formData[e] = [];
}
else {
me.formData[e] = "";
}
}
});
});
});
}
var obj_ = {
fieldobj: obj,
data: this.formData
}
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].select && this.tableFieldClick[obj.field].select.onchange) {
this.tableFieldClick[obj.field].select.onchange(obj_);
}
// this.$emit("select-change", obj_);
this.isRefresh = false;
this.isRefresh = true;
},
selectoptionoperate(type, obj) {
var obj_ = {
type: type,
fieldobj: obj
}
this.$emit("select-option-operate", obj_);
},
}
});
//**************h-tree*******************
Vue.component("h-tree", {
template: [
'',
' ',
'',
' ',
' ',
'',
'',
' |
'+
' '+
'