// 兼容所有浏览器关闭页面方法
function ClosePage() {     
    if (navigator.userAgent.indexOf("MSIE") > 0) {     
        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {     
            window.opener = null; 
            window.close();
        }     
        else {     
            window.open('', '_top'); 
            window.top.close();     
        }
    }     
    else if (navigator.userAgent.indexOf("Firefox") > 0) {     
        window.location.href = 'about:blank '; //火狐默认状态非window.open的页面window.close是无效的    
        //window.history.go(-2);     
    }     
    else {     
        window.opener = null;      
        window.open('', '_self', '');     
        window.close();     
    }     
};

//指定数组，根据指定条件筛选，返回符合条件的数组
function h_query(datalist, filterobj) {
	let result = [];
	result = datalist.filter(item => {
		let bo = true;
		for(var k in filterobj) {
			let k_val = filterobj[k];
			let bo_ = item[k].toLowerCase().indexOf(k_val.toLowerCase()) > -1;
			if (!bo_) {
				return false;
			}
		}
		return bo;
	});
	return result;
};

//拼接 GetUrl
function SplicingGetUrlToStr(url_, param) {
	var urlstr = "";
	if (url_.indexOf("?") != -1 ) {
		for (p in param) {
			url_ += "&" + p + "=" + encodeURI(param[p]);
		}
	}
	else {
		var url_param = "";
		for (p in param) {
			if (!url_param) {
				url_param = p + "=" + encodeURI(param[p]);
			}
			else {
				url_param += "&" + p + "=" + encodeURI(param[p]);
			}
		}
		url_ += "?" + url_param;
	}
	
	urlstr = url_;
	return urlstr;
}

function setpageHeight(table_el, array_el) {
	var tableHeight_ = 0;
	let clientHeight = document.documentElement.clientHeight;
	let title_height = document.getElementsByClassName('topbar').length ? document.getElementsByClassName('topbar')[0].offsetHeight : 0;
	let tabs_height = document.getElementsByClassName('el-tabs').length ? document.getElementsByClassName('el-tabs')[0].offsetHeight : 0;
	let footer_height = document.getElementsByClassName('el-dialog__footer').length ? document.getElementsByClassName('el-dialog__footer')[0].offsetHeight : 0;
	let header_height = document.getElementsByClassName('el-dialog__header').length ? document.getElementsByClassName('el-dialog__header')[0].offsetHeight : 0;

	let pagination_height = 0;
	if (table_el.getElementsByClassName('z_table_pagination').length) {
		pagination_height = table_el.getElementsByClassName('z_table_pagination')[0].offsetHeight;
	}
	tableHeight_ = clientHeight - title_height - tabs_height - pagination_height - footer_height - header_height - 10;
	
	if(array_el && array_el.length) {
		array_el.map(el=>{
			let el_height = el.offsetHeight;
			tableHeight_ -= el_height;
		})
	}
	return tableHeight_;
};
//
function settableHeight(root_el, pagesize) {
	let tableHeight2_ = 0;
	let header_height = root_el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
	var row_height_ = 40;
	if (root_el.getElementsByClassName('el-table__row')[0] && root_el.getElementsByClassName('el-table__row')[0].offsetHeight) {
		row_height_ = root_el.getElementsByClassName('el-table__row')[0].offsetHeight + 0.5;
	}
	let row_height = row_height_;
	let body_width = root_el.getElementsByClassName('el-table__body')[0].offsetWidth;
	let body_wrapper_width = root_el.getElementsByClassName('el-table__body-wrapper')[0].offsetWidth;
	
	tableHeight2_ = header_height + (row_height * pagesize) + pagesize/4.5;
	if ((body_width - body_wrapper_width)>5){
		tableHeight2_ += 20;
	}
	
	return tableHeight2_;
};

function createCode (code) {
	var code_ = "";
	//日期转为单号
	var day = new Date();
	var Year = 0;
	var Month = 0;
	var Day = 0;
	Year = day.getFullYear(); 
	Month = day.getMonth() + 1;
	Day = day.getDate();
	code_ += Year;
	if (Month >= 10) {
	code_ += Month;
	}
	else {
	code_ += "0" + Month;
	}
	if (Day >= 10) {
	code_ += Day;
	}
	else {
	code_ += "0" + Day;
	}
	var random  = 0;
	do
	random = Math.floor(Math.random()*10000);
	while( random < 1000 );
	
	if (code) {
		code_ = code + code_+ random;
	}
	return code_;
}

function createDate () {
	var aDate = new Date();
	var date_ = dateFormat(aDate,"yyyy-MM-dd");
	return date_;
}

function createDatetime () {
	var aDate = new Date();
	var date_ = dateFormat(aDate,"yyyy-MM-dd hh:mm:ss");
	return date_;
}

function createYearByYear () {
	var aDate = new Date();
	var date_ = dateFormat(aDate,"yyyy") * 1;
	var month_ = dateFormat(aDate,"MM") * 1;
	var year = "";
	if (month_ > 11 ) {
		year = date_ + 1 
	}
	else {
		year = date_
	}
	return year;
}

function createYearByQuarter () {
	var aDate = new Date();
	var date_ = dateFormat(aDate,"yyyy") * 1;
	var month_ = dateFormat(aDate,"MM") * 1;
	var year = "";
	if (month_ > 9 ) {
		year = date_ + 1 
	}
	else {
		year = date_
	}
	return year;
}

function createQuarter () {
	var aDate = new Date();
	var date_ = dateFormat(aDate,"MM") * 1;
	var quarter = "";
	if (date_ < 4) {
		quarter = 2
	}
	else if (date_ < 7) {
		quarter = 3
	}
	else if (date_ < 10) {
		quarter = 4
	}
	else {
		quarter = 1
	}
	return quarter;
}

function createMonth () {
	var aDate = new Date();	
	var date_ = dateFormat(aDate,"MM") * 1;
	var month = "";
	if(date_ > 11) {
		month = 1
	}else {
		month = date_ + 1
	}
	return month;
}

/*********** default setting ************/
function getElementDefault(el) {
	var defaultObj = {};
	
	// 通用设置
	if (el.ztypename) {
		let ztypename = el.ztypename;
		if (currencyDefault[ztypename]) {
			let currencyDefaultObj = currencyDefault[ztypename];
			for (var key in currencyDefaultObj) {
				defaultObj[key] = currencyDefaultObj[key];
			}
		}
	}
	
	//自定义模板设置
	if (el.zdefault) {
		let zdefault = el.zdefault;
		if (ElementDefault[zdefault]) {
			let ElementDefaultObj = ElementDefault[zdefault];
			for (var key in ElementDefaultObj) {
				defaultObj[key] = ElementDefaultObj[key];
			}
		}
	}
	
	return defaultObj;
};


var ElTypes = {//可配置项
	button: {//按键
		ztypename: String,
		zdefault: String,
		small: String,
		type: String,//default, primary, success
		size: String,
		icon: String,
		nativeType: String,
		loading: Boolean,
		disabled: Boolean,
		plain: Boolean,
		autofocus: Boolean,
		round: Boolean,
		circle: Boolean,
	},
};

//组件通用设置
var currencyDefault = {
	ElButton: {
		size: "mini",
		type: "primary",//default
	},
	ElInput: {
		size: "mini",
	},
	ElCascader: {
		size: "mini",
	},
	ElSelect: {
		size: "mini",
	},
	ElDatePicker: {
		size: "mini",
	},
	ElInputNumber: {
		size: "mini",
	},
	ElAutocomplete: {
		size: "mini",
	},
	ElAutocompleteSuggestions: {
		size: "mini",
	},
};

//自定义模板设置
var ElementDefault = {
	buttonmould_refresh: {
		type: "success",
		icon: "el-icon-refresh"
	},
	buttonmould1: {
		size: "mini",
		type: "success",
	},
	buttonmould2: {
		size: "small",
		type: "success",
	},
	buttonmould3: {
		size: "medium",
		type: "success",
	}
};

//组件的格式化
formatter_json = window.top.formatter_json;
dateFormat = window.top.dateFormat;

formatter_money = window.top.formatter_money;
formatter_TF1 = window.top.formatter_TF1;
formatter_TF2 = window.top.formatter_TF2;
formatter_Target = window.top.formatter_Target;
formatter_CommitState = window.top.formatter_CommitState;
formatter_OrderState = window.top.formatter_OrderState;
formatter_Grade = window.top.formatter_Grade;
formatter_date = window.top.formatter_date;
formatter_isreconciliation = window.top.formatter_isreconciliation;
formatter_businessline = window.top.formatter_businessline;
formatter_matchstatus = window.top.formatter_matchstatus;
formatter_OTCorCF = window.top.formatter_OTCorCF;
formatter_saletype = window.top.formatter_saletype;
formatter_salesBusinessType = window.top.formatter_salesBusinessType;
formatter_pass = window.top.formatter_pass;
formatter_deliverySended = window.top.formatter_deliverySended;
formatter_deliveryStatus = window.top.formatter_deliveryStatus;
formatter_invoiceStatus = window.top.formatter_invoiceStatus;
formatter_returnType = window.top.formatter_returnType;
formatter_businessType = window.top.formatter_businessType;
formatter_agreeStatus = window.top.formatter_agreeStatus;
formatter_businessStatus = window.top.formatter_businessStatus;
formatter_demandProductState = window.top.formatter_demandProductState;
formatter_sourceType = window.top.formatter_sourceType;
formatter_invoiceType = window.top.formatter_invoiceType;
formatter_licenceType = window.top.formatter_licenceType;
formatter_produceType = window.top.formatter_produceType;
formatter_needType = window.top.formatter_needType;
formatter_TagPriceType = window.top.formatter_TagPriceType;
formatter_CashType = window.top.formatter_CashType;
formatter_RebateType = window.top.formatter_RebateType;
formatter_ControlType = window.top.formatter_ControlType;
formatter_transType = window.top.formatter_transType;
formatter_percentage = window.top.formatter_percentage;
formatter_settleType = window.top.formatter_settleType;
formatter_gender = window.top.formatter_gender;
formatter_rate = window.top.formatter_rate;
formatter_Receipt = window.top.formatter_Receipt;
formatter_productStatus = window.top.formatter_productStatus;
function formatter_Splicing(row, column, cellValue, index) {
	return row.sku = row.name + row.spec;
};

/*********** h-select ************/

Vue.component("h-select", {
	template: [
		'<el-popover v-model="visible" >',
			'<div class="popover-body">',
				'<el-row v-for="(itm, k) in datalist" :key="k" :gutter="2">',
					'<el-button class="popover-item" type="default" @click="fireitemselect(itm)">{{itm.label}}',
					'</el-button>',
				'</el-row>',
			'</div>',
			'<el-button slot="reference" type="default" icon="el-icon-caret-bottom" class="popover-btn"></el-button>',
		'</el-popover>'].join(""),
	props: {
		datalist: Array
	},
	data() {
		return {
			visible: false,
			selected: null
		}
	},
	methods: {
		fireitemselect(v) {
			this.selected  = v;
			this.visible = false;
			this.$emit('itemselect', v);
		}
	}
});

/*********** h-iconselect ************/
Vue.component("h-iconselect", {//图标点击下拉组件
	template: '<el-popover v-model="visible" >'+
		'<div class="popover-body">'+
			'<el-row v-for="(itm, k) in datalist" :key="k" :gutter="2">'+
				'<el-button class="popover-item" type="default" @click="fireitemselect(itm)">{{itm.label}}'+
				'</el-button>'+
			'</el-row>'+
		'</div>'+
		'<el-button slot="reference" type="default" :icon="icon" class="popover-btn"></el-button>'+
	'</el-popover>',
	props: {
		datalist: Array,
		icon: String
	},
	data() {
		return {
			visible: false,
		}
	},
	
	methods: {
		fireitemselect(v) {
			this.visible = false;
			this.$emit('itemselect', v);
		},
	}
});

/*********** h-table ************/
Vue.component("h-table", {//列表组件1
	template: 
		'<div class="h_table"><el-table :data="tableData" v-show="isShowTable" size="small" border :height="tableHeight" '+// 
			':ref= "href"' +
			'@row-click="rowClick" '+
			'@row-dblclick="rowDblclick" '+
			'@cell-click="cellClick" '+
			'@selection-change="handleSelectionChange" '+
			'v-loading="tableloading" '+
			':row-class-name="tableRowClassName" '+
			':cell-class-name="cellClass" '+
			':show-summary="tableAttr.showSummary || showSummary" '+
			':summary-method="getSummaries" '+
			':highlight-current-row="tableAttr.isHighlightRow || isHighlightRow" '+
			':header-cell-style="headerCellStyle"> '+
			'<el-table-column v-if="isEditTableData" label="操作" align="center" width="100"> '+
			  '<template slot-scope="scope"> '+
			  '<el-row> '+
					'<el-tooltip class="item" effect="dark" :content="editTableButton.edit.txt" placement="top"> '+
						'<el-button v-if="editTableButton.edit.isshow && !scope.row.isWithinEdit" type="success" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-edit" @click.native.prevent="editDataRow(\'edit\', scope)"></el-button> '+
					'</el-tooltip> '+
					'<el-tooltip v-if="editTableButton.save.isshow && scope.row.isWithinEdit" class="item" effect="dark" :content="editTableButton.save.txt" placement="top"> '+
						'<el-button type="primary" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-check" @click.native.prevent="editDataRow(\'edit\', scope)"></el-button> '+
					'</el-tooltip> '+
					'<el-tooltip class="item" effect="dark" :content="editTableButton.del.txt" placement="top"> '+
						'<el-button v-if="editTableButton.del.isshow" type="danger" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-delete" @click.native.prevent="editDataRow(\'delete\', scope)"></el-button> '+
					'</el-tooltip> '+
				'</el-row> '+
			  '</template> '+
			'</el-table-column> '+
			// ':header-cell-style="{background:\'#FAFAFA\',color:\'black\',\'text-align\':\'center\'}"> '+
				'<el-table-column v-if="tableAttr.isSelection || isSelection" type="selection" width="55"> </el-table-column> '+
				'<el-table-column v-if="tableAttr.isShowIndex || isShowIndex" label="序号" type="index" align="center" width="50"> </el-table-column> '+
				'<template v-for="(tableField,k) in doTableFields"> '+
					
					'<el-table-column v-if="tableField.formatter_f && tableField.isshow == \'T\'" '+
					 ' :align="tableField.align ? tableField.align : \'center\'" '+
					 ' :show-overflow-tooltip="(tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' ) ? false : true" '+
					 ' :width="tableField.width > 20 ? tableField.width : \'auto\'" '+
					 //' :formatter= "function(row, column, cellValue, index){return tableField.formatter(row, column, cellValue, index)}" '+
					 ' :formatter= "function(row, column, cellValue, index){return tableField.formatter_f(row, column, cellValue, index)}" '+
					 ' :prop="tableField.field" '+
					 ' :label="tableField.name" > '+
						//////////////////
						' <template slot-scope="scope" > '+
							' <template v-if="scope.row.isWithinEdit"> '+
								' <el-checkbox v-if="tableField.type == \'checkbox\'" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || !scope.row.isWithinEdit || !isWithinEditTableData"  @change="cellInputChange(scope)"></el-checkbox> '+
								' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'input\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope)"></el-input> '+
								' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'textarea\'" type="textarea" :rows="2" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-input> '+
								' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'date\'" type="date" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+ 
								' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'month\'" type="month" placeholder="选择月" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+
								' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && !tableField.isrefresh" :filterable="tableField.filterable" :multiple="tableField.ismultiple" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" placeholder="请选择" style="width: 100%;"> '+
									'<el-option '+
										'v-for="(item,k) in tableField.options" '+
										':key="k" '+
										':label="tableField.props ? item[tableField.props.label] : item.label" '+
										':value="tableField.props ? item[tableField.props.value] : item.value"> '+
									'</el-option> '+
								' </el-select> '+
								'<el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && tableField.isrefresh" :multiple="tableField.ismultiple" @visible-change="visibleChange($event, tableField)" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" placeholder="请选择" style="width: 100%;"> '+
									'<el-option '+
										'v-for="(item,k1) in tableField.options" '+
										':key="k1" '+
										':label="tableField.props ? item[tableField.props.label] : item.label" '+
										':value="tableField.props ? item[tableField.props.value] : item.value"> '+
									'</el-option> '+
								'</el-select> '+
								' <el-button v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'button\'" @click.native.prevent="cellButtonClick(scope)" type="text">{{ scope.row[tableField.field] }}</el-button> '+
								' <template v-else-if="tableField.type == \'pdf\'"> '+
									'<div style="height: 20px;">'+
									' <a v-if="scope.row[tableField.field]" :href="scope.row[tableField.field]" download> '+
										' <img style="width: 20px; height: 20px" src="../../../img/pdf.png"></img> '+
									' </a> '+
									' </div> '+
								' </template> '+
								
								' <template v-else-if="tableField.type == \'rise\'"> '+
									' <template v-if="scope.row[tableField.field] * 1 > 0"> '+
										' <span class="h_up">{{scope.row[tableField.field]}}</span> '+
										' <span v-if="!tableField.notsymbol" class="h_up">%</span> '+
										' <i class="iconfont icon-up3 h_up"></i> '+
									' </template> '+
									' <template v-else-if="scope.row[tableField.field] * 1 < 0"> '+
										' <span class="h_down">{{scope.row[tableField.field]}}</span> '+
										' <span v-if="!tableField.notsymbol" class="h_down">%</span> '+
										' <i class="iconfont icon-down3 h_down"></i> '+
									' </template> '+
									' <span v-else>0</span> '+
								' </template> '+
								
								' <template v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'popup\'"> '+
									'<table>'+
										'<tr>'+
											'<td align="left" style="width: 100%; text-align:center; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" ><span>{{scope.row[tableField.field]}}</span></td> '+
											'<td style= "padding: 0px">'+
												'<el-button v-if="(isWithinEditTableData || scope.row.isWithinEdit)" type="primary" icon="el-icon-share" style="padding: 5px;" @click="showpopup(scope)"></el-button> '+
											'</td>'+
										'</tr>'+
									'</table>'+
								' </template> '+
								
								' <template v-else-if="tableField.defaultval && tableField.defaultval_isclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])"> '+
									' <span v-if="scope.row[tableField.field]" :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{scope.row[tableField.field]}}</span> '+
									' <span v-else class="h_cellclick">{{tableField.defaultval}}</span> '+
								' </template> '+
								
								' <span v-else :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{scope.row[tableField.field] || (scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field]) ? scope.row[tableField.field] : tableField.defaultval}}</span> '+
							' </template> '+
							' <template v-else> '+
								' <span :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{tableField.formatter_f(scope.row, null, scope.row[tableField.field], null)}}</span> '+
							' </template> '+
						' </template> '+
						
						////////////////////
					'</el-table-column> '+
					
					
					'<el-table-column '+
					 ' v-else-if="tableField.isshow == \'T\'" '+
					 ' :align="tableField.align ? tableField.align : \'center\'" '+
					 ' :show-overflow-tooltip="(tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' ) ? false : true" '+
					 ' :width="tableField.width > 20 ? tableField.width : \'auto\'" '+
					 ' :prop="tableField.field" '+
					 ' :label="tableField.name"> '+
						' <template slot-scope="scope"> '+
							' <el-checkbox v-if="tableField.type == \'checkbox\'" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || !scope.row.isWithinEdit || !isWithinEditTableData"  @change="cellInputChange(scope)"></el-checkbox> '+
							' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'input\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope)"></el-input> '+
							' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'textarea\'" type="textarea" :rows="2" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-input> '+
							
							' <el-autocomplete  '+
								' v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'autocomplete\'" '+
								' class="inline-input"  '+
								' v-model="scope.row[tableField.field]" '+
							    ' :fetch-suggestions="((queryString,cb)=>{querySearch(queryString,cb, scope, tableField)})" '+
								' @select="cellInputChange(scope)" '+
							' ></el-autocomplete> '+
							
							' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'date\'" type="date" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+ 
							' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'month\'" type="month" placeholder="选择月" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+
							' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && !tableField.isrefresh" :filterable="tableField.filterable" :multiple="tableField.ismultiple" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" placeholder="请选择" style="width: 100%;"> '+
								'<el-option '+
									'v-for="(item,k) in tableField.options" '+
									':key="k" '+
									':label="tableField.props ? item[tableField.props.label] : item.label" '+
									':value="tableField.props ? item[tableField.props.value] : item.value"> '+
								'</el-option> '+
							' </el-select> '+
							'<el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && tableField.isrefresh" :multiple="tableField.ismultiple" @visible-change="visibleChange($event, tableField)" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" placeholder="请选择" style="width: 100%;"> '+
								'<el-option '+
									'v-for="(item,k1) in tableField.options" '+
									':key="k1" '+
									':label="tableField.props ? item[tableField.props.label] : item.label" '+
									':value="tableField.props ? item[tableField.props.value] : item.value"> '+
								'</el-option> '+
							'</el-select> '+
							' <el-button v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'button\'" @click.native.prevent="cellButtonClick(scope)" type="text">{{ scope.row[tableField.field] }}</el-button> '+
							' <template v-else-if="tableField.type == \'pdf\'"> '+
								'<div style="height: 20px;">'+
								' <a v-if="scope.row[tableField.field]" :href="scope.row[tableField.field]" download> '+
									' <img style="width: 20px; height: 20px" src="../../../img/pdf.png"></img> '+
								' </a> '+
								' </div> '+
							' </template> '+
							
							' <template v-else-if="tableField.type == \'rise\'"> '+
								' <template v-if="scope.row[tableField.field] * 1 > 0"> '+
									' <span class="h_up">{{scope.row[tableField.field]}}</span> '+
									' <span v-if="!tableField.notsymbol" class="h_up">%</span> '+
									' <i class="iconfont icon-up3 h_up"></i> '+
								' </template> '+
								' <template v-else-if="scope.row[tableField.field] * 1 < 0"> '+
									' <span class="h_down">{{scope.row[tableField.field]}}</span> '+
									' <span v-if="!tableField.notsymbol" class="h_down">%</span> '+
									' <i class="iconfont icon-down3 h_down"></i> '+
								' </template> '+
								' <span v-else>0</span> '+
							' </template> '+
							
							' <template v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'popup\'"> '+
								'<table>'+
									'<tr>'+
										'<td align="left" style="width: 100%; text-align:center; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" ><span>{{scope.row[tableField.field]}}</span></td> '+
										'<td style= "padding: 0px">'+
											'<el-button v-if="(isWithinEditTableData || scope.row.isWithinEdit)" type="primary" icon="el-icon-share" style="padding: 5px;" @click="showpopup(scope)"></el-button> '+
										'</td>'+
									'</tr>'+
								'</table>'+
							' </template> '+
							
							' <template v-else-if="tableField.defaultval && tableField.defaultval_isclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])"> '+
								' <span v-if="scope.row[tableField.field]" :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{scope.row[tableField.field]}}</span> '+
								' <span v-else class="h_cellclick">{{tableField.defaultval}}</span> '+
							' </template> '+
							
							' <span v-else :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{scope.row[tableField.field] || (scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field]) ? scope.row[tableField.field] : tableField.defaultval}}</span> '+
						' </template> '+
					'</el-table-column> '+
				' </template> '+
				/* '<el-table-column v-if="isEditTableData" property="operate" label="数据状态" align="center" :formatter= "operate_"></el-table-column> '+
				'<el-table-column v-if="isEditTableData" property="status" label="审批状态" align="center" :formatter= "status_"></el-table-column> '+ */
				
			'</el-table> '+
			'<div ref="ref_notTableData" style="width: 0px; height: 0px; overflow: hidden; box-sizing: border-box;" align="center"> '+
				'<div v-show="!isShowTable" style="height: 215px; width: 220px;"> '+
					'<img v-if="url_img2"  :src="url_img2" style="height: 120px;"> '+
					'<div style="margin-top: 24px;"> '+
						'<span style="font-size: 14px; font-weight: bold; color: #999;">请添加数据</span> '+
					'</div> '+
				'</div> '+
			'</div> '+
		
			'<div v-if="isPagination" class="z_table_pagination"> '+
			  '<el-pagination background '+
				' @size-change="handleSizeChange" '+
				' @current-change="handleCurrentChange" '+
				' :current-page="pagenum" '+
				' :pager-count="5" '+
				' :page-sizes="[10, 20, 30, 40]" '+
				' :page-size="pagesize" '+
				' :layout="layout" '+ //
				' :total="total" '+
			  '></el-pagination> '+
			'</div> '+
		'</div>',
	props: {
		tableAttr: {
			type: Object,
			default: function(){
				return {};
			}
		},
		isOldContrast: {//是否对比差异isOldContrast//tableDataOld
			type: Boolean,
			default: false
		},
		tableDataOld: {//对比差异的历史数据
			type: Object,
			default: function(){
				return {};
			}
		},
		"layout": {//无数据的图片
			type: String,
			default: "total, sizes, prev, pager, next, jumper"
		},
		
		"tableFields": Array,//字段
		"tableData": Array,//数据
		"selectTableData": {//选中的数据
			type: Array,
			default: function(){
				return [];
			}
		},
		"url_img2": {//无数据的图片
			type: String,
			default: ""
		},
		"href": {//无数据的图片
			type: String,
			default: "table1"
		},
		"showSummary": {//是否在表尾显示合计行tableAttr
			type: Boolean,
			default: false
		},
		"tableloading": {//多选tableAttr
			type: Boolean,
			default: false
		},
		"isSelection": {//多选tableAttr
			type: Boolean,
			default: false
		},
		"isShowIndex": {//序号tableAttr
			type: Boolean,
			default: false
		},
		"isWithinEditTableData": {//表内编辑
			type: Boolean,
			default: false
		},
		"isEditTableData": {//编辑/删除按键
			type: Boolean,
			default: false
		},
		"isHighlightRow": {//选中高亮tableAttr
			type: Boolean,
			default: false
		},
		"isPagination": {//是否显示分页
			type: Boolean,
			default: true
		},
		"editTableButton": {//编辑界面行按键（编辑，删除）
			type: Object,
			default: function(){
				return {
					edit: {
						isshow:true,
						txt:"编辑"
					},
					del: {
						isshow:true,
						txt:"删除"
					},
					save: {
						isshow:true,
						txt:"保存"
					},
				}
			}
		},
		tableHeight: {
			type: Number,
			default: 100
		},
		pagesize: {
			type: Number,
			default: 10
		},
		pagenum: {
			type: Number,
			default: 1
		},
		total: {
			type: Number,
			default: 0
		},
	},
	
	data() {
		return {
			zpagesize: this.pagesize,
			zpagenum: this.pagenum,
			summaries: []
		}
	},
	
	computed: {
		isShowTable() {
			if (this.$refs.ref_notTableData) {
				this.setNotTableData();
			}
			return this.tableData.length > 0 ? true : true; //false;
		},
		doTableFields() {
			this.tableFields.map(e=>{
				if (e.formatterjson) {
					e.formatter_f = function(a,b,c,d) {
						var json_ = e.formatterjson;
						return formatter_json(a,b,c,d, json_)
					}
				}
				else if (e.formatter) {
					if (e.formatter == "formatter_money") {
						e.formatter_f = function(a,b,c,d) {return formatter_money(a,b,c,d)}
					}
					else if (e.formatter == "formatter_TF1") {
						e.formatter_f = function(a,b,c,d) {return formatter_TF1(a,b,c,d)}
					}
					else if (e.formatter == "formatter_TF2") {
						e.formatter_f = function(a,b,c,d) {return formatter_TF2(a,b,c,d)}
					}
					else if (e.formatter == "formatter_Target") {
						e.formatter_f = function(a,b,c,d) {return formatter_Target(a,b,c,d)}
					}
					else if(e.formatter == "formatter_CommitState") {
						e.formatter_f = function(a,b,c,d) {return formatter_CommitState(a,b,c,d)}
					}
					else if(e.formatter == "formatter_OrderState") {
						e.formatter_f = function(a,b,c,d) {return formatter_OrderState(a,b,c,d)}
					}
					else if(e.formatter == "formatter_Grade") {
						e.formatter_f = function(a,b,c,d) {return formatter_Grade(a,b,c,d)}
					}
					else if(e.formatter == "formatter_date") {
						e.formatter_f = function(a,b,c,d) {return formatter_date(a,b,c,d)}
					}
					else if(e.formatter == "formatter_Splicing") {
						e.formatter_f = function(a,b,c,d) {return formatter_Splicing(a,b,c,d)}
					}
					else if(e.formatter == "formatter_isreconciliation") {
						e.formatter_f = function(a,b,c,d) {return formatter_isreconciliation(a,b,c,d)}
					}
					else if(e.formatter == "formatter_businessline") {
						e.formatter_f = function(a,b,c,d) {return formatter_businessline(a,b,c,d)}
					}
					else if(e.formatter == "formatter_matchstatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_matchstatus(a,b,c,d)}
					}
					else if(e.formatter == "formatter_OTCorCF") {
						e.formatter_f = function(a,b,c,d) {return formatter_OTCorCF(a,b,c,d)}
					}
					else if(e.formatter == "formatter_saletype") {
						e.formatter_f = function(a,b,c,d) {return formatter_saletype(a,b,c,d)}
					}
					else if(e.formatter == "formatter_salesBusinessType") {
						e.formatter_f = function(a,b,c,d) {return formatter_salesBusinessType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_pass") {
						e.formatter_f = function(a,b,c,d) {return formatter_pass(a,b,c,d)}
					}
					else if(e.formatter == "formatter_deliverySended") {
						e.formatter_f = function(a,b,c,d) {return formatter_deliverySended(a,b,c,d)}
					}
					else if(e.formatter == "formatter_deliveryStatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_deliveryStatus(a,b,c,d)}
					}
					else if(e.formatter == "formatter_invoiceStatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_invoiceStatus(a,b,c,d)}
					}
					else if(e.formatter == "formatter_returnType") {
						e.formatter_f = function(a,b,c,d) {return formatter_returnType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_businessType") {
						e.formatter_f = function(a,b,c,d) {return formatter_businessType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_agreeStatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_agreeStatus(a,b,c,d)}
					}
					else if(e.formatter == "formatter_businessStatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_businessStatus(a,b,c,d)}
					}
					else if(e.formatter == "formatter_gender") {
						e.formatter_f = function(a,b,c,d) {return formatter_gender(a,b,c,d)}
					}
					else if(e.formatter == "formatter_rate") {
						e.formatter_f = function(a,b,c,d) {return formatter_rate(a,b,c,d)}
					}
					else if(e.formatter == "formatter_demandProductState") {
						e.formatter_f = function(a,b,c,d) {return formatter_demandProductState(a,b,c,d)}
					}
					else if(e.formatter == "formatter_sourceType") {
						e.formatter_f = function(a,b,c,d) {return formatter_sourceType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_invoiceType") {
						e.formatter_f = function(a,b,c,d) {return formatter_invoiceType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_licenceType") {
						e.formatter_f = function(a,b,c,d) {return formatter_licenceType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_produceType") {
						e.formatter_f = function(a,b,c,d) {return formatter_produceType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_needType") {
						e.formatter_f = function(a,b,c,d) {return formatter_needType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_TagPriceType") {
						e.formatter_f = function(a,b,c,d) {return formatter_TagPriceType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_CashType") {
						e.formatter_f = function(a,b,c,d) {return formatter_CashType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_RebateType") {
						e.formatter_f = function(a,b,c,d) {return formatter_RebateType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_ControlType") {
						e.formatter_f = function(a,b,c,d) {return formatter_ControlType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_transType") {
						e.formatter_f = function(a,b,c,d) {return formatter_transType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_percentage") {
						e.formatter_f = function(a,b,c,d) {return formatter_percentage(a,b,c,d)}
					}
					else if(e.formatter == "formatter_settleType") {
						e.formatter_f = function(a,b,c,d) {return formatter_settleType(a,b,c,d)}
					}
					else if(e.formatter == "formatter_Receipt") {
						e.formatter_f = function(a,b,c,d) {return formatter_Receipt(a,b,c,d)}
					}
					else if(e.formatter == "formatter_productStatus") {
						e.formatter_f = function(a,b,c,d) {return formatter_productStatus(a,b,c,d)}
					}
				}
			})
			
			return this.tableFields;
		}
	},
	mounted() {
		this.setNotTableData();
	},
	watch: {
		selectTableData(newVal, oldVal){
	        if (this.selectTableData && this.selectTableData.length) {
	        	this.toggleSelection(this.selectTableData);
	        }
	        else {
	        	this.toggleSelection();
	        }
	    },
	},
	
	methods: {
		tableRowClassName({row, rowIndex}) {
			if (row.h_classname) {
				return row.h_classname;
			}
			return '';
		},
		
		cellClass(obj) {
			let field = obj.column.property;
			let row_ = this.doTableFields.filter(item => {
				return item.field == field;
			});
			
			let class_ = "";
			//业务上的样式，如：可点击，存在上下限等
			
			if(row_.length > 0 && row_[0].iscellclick) {
				class_ = "h_cellclick";
			}
			
			if(row_.length > 0 && (row_[0].maxval || row_[0].minval)) {
				if((row_[0].maxval && obj.row[field] * 1 > row_[0].maxval * 1) || (row_[0].minval && obj.row[field] * 1 < row_[0].minval * 1))  {
					class_ += " h_overflowval";
				}
				else class_ += " h_notoverflowval";
			}
			
			if(row_.length > 0 && row_[0].formatter == "formatter_TF2") {
				if(obj.row[field] == "T") {
					class_ += " h_stamp";
				}
			}
			
			if (row_.length > 0 && row_[0].iscellclick && !row_[0].isclick) {
				if(!obj.row[field] ||  obj.row[field] == "") {
					class_ += " h_notclick";
				}
				
				//notclick_val: ["input", "aaa"]
				if (row_[0].notclick_val && row_[0].notclick_val.length) {
					var bo_ = false;
					var val_ = obj.row[field];
					row_[0].notclick_val.map(v=>{
						if (val_ == v) {
							bo_ = true;
						}
					});
					
					if (bo_) {
						class_ += " h_notclick";
					}
				}
				
				//notclick_bindfield: [{field: "folw_id", val: null},{}]
				if (row_[0].notclick_bindfield && row_[0].notclick_bindfield.length) {
					var bo_ = false;
					
					row_[0].notclick_bindfield.map(b=>{
						var val_ = obj.row[b.field];
						
						if (val_ == b.val) {
							bo_ = true;
						}
					});
					
					if (bo_) {
						class_ += " h_notclick";
					}
					
				}
				
			}		
				
			//如果存在自定义的class
			if(row_.length > 0 && row_[0].cssname) {
				class_ += " " + row_[0].cssname;
			}
			
			
			//如果存在差异则背景高亮isOldContrast//tableDataOld
			if(this.isOldContrast) {
				var row_n = obj.row;
				if (this.tableDataOld[row_n.id]) {//如果存在历史数据
					var row_o = this.tableDataOld[row_n.id];
					if (row_n[field] != row_o[field]) {
						class_ += "z_contrast_tablecall";
					}
				}
			}
			
			return class_;
		},
		setNotTableData() {
			var me = this;
			if (this.tableData.length == 0) {
				//this.$refs.ref_notTableData.style['height'] = this.tableHeight + "px";
				//this.$refs.ref_notTableData.style['min-height'] = this.tableHeight + "px";
				
				//this.$refs.ref_notTableData.style['padding-top'] = (this.tableHeight * 0.3)+"px";
				this.$refs.ref_notTableData.style['width'] = "100%";
			}
			else {
				//设置默认值
				this.tableData.map(d=>{
					me.tableFields.map(f=>{
						//isassignment: 是否默认值替换原值 ，如果有保存会被替换
						if (!d[f.field] && f.defaultval && f.isassignment) {
							
							//defaultval_filter： 默认值的条件第一层数组的元素是or, 里面的数组元素是and
							//type: 是条件，如果没有则是等于val值时可替换， "isnull"为空时，"isnotnull" 不为空时
							if (f.defaultval_filter) {//:[[{field: "", val: ""},{field: "", val: ""}], [{}]]
								var defaultval_filter_ = f.defaultval_filter;
								if (f.defaultval_filter instanceof String) {
									defaultval_filter_ =  JSON.parse(f.defaultval_filter);
								}
								
								defaultval_filter_.map(m=>{
									var bo_m = true;
									m.map(mf=>{
										if (!mf.type) {
											if (d[mf.field] != mf.val) {
												bo_m = false
											}
										}
										else if (mf.type == "isnull") {
											if (d[mf.field]) {
												bo_m = false
											}
										}
										else if (mf.type == "isnotnull") {
											if (!d[mf.field]) {
												bo_m = false
											}
										}
										
									});
									if (bo_m) {
										d[f.field] = f.defaultval
									}
									else {
										//单条设置不显示默认值的字段
										if (!d.z_h_notdefaultval) {
											d.z_h_notdefaultval = {};
										}
										d.z_h_notdefaultval[f.field] = true;
									}
								})
							}
							else {
								d[f.field] = f.defaultval
							}
						}
					})
				});
				
				this.$refs.ref_notTableData.style['height'] = "0px";
				this.$refs.ref_notTableData.style['min-height'] = "0px";
				this.$refs.ref_notTableData.style['padding-top'] = "0px";
				this.$refs.ref_notTableData.style['width'] = "0px";
			}
		},
		rowClick(row, column, event) {
			let obj = {
				row: row,
				column: column,
				event: event
			}
			this.$emit('row-click', obj);
		},
		
		headerCellStyle(obj) {
			var aa = obj;
			var style_ = {
				'background':'#FAFAFA',
				'color':'black',
				'text-align':'center'
			}
			let field = obj.column.property;
			let row_ = this.doTableFields.filter(item => {
				return item.field == field;
			});
			
			if (row_.length && row_[0].headercolor) {
			    style_.background = row_[0].headercolor;
			   }
			return style_;
		},
		rowDblclick(row, column, event) {
			let obj = {
				row: row,
				column: column,
				event: event
			}
			this.$emit('row-dblclick', obj);
		},
		cellClick(row, column, cell, event) {
			let obj = {
				row: row,
				column: column,
				cell: cell,
				event: event
			}
			this.$emit('cell-click', obj);
		},
		handleSelectionChange(selection) {
			this.$emit('selection-change', selection);
		},
		editDataRow(code, scope){
			if (code == "edit") {
				this.$emit('edit-data', scope);
			}
			else if (code == "delete") {
				this.$emit('del-data', scope);
			}
		},
		
		cellInputChange(scope) {//row, column, $index 和 store（table 内部的状态管理）
			let field = scope.column.property;
			this.$emit('cell-input-change', scope);
		},
		cellSelectChange(scope) {
			let field = scope.column.property;
			this.$emit('cell-select-change', scope);
		},
		cellButtonClick(scope) {
			let field = scope.column.property;
			this.$emit('cell-button-click', scope);
		},
		
		querySearch(queryString, cb, scope, tableField) {
			let field = scope.column.property;
			var obj = {
				queryString: queryString,
				cb: cb,
				scope: scope
			}
			var inputoptions = tableField.inputoptions;
			var results = queryString ? inputoptions.filter(this.createFilter(queryString)) : inputoptions;
			cb(results);
			this.$emit('cell-query-search', obj);
		},
		createFilter(queryString) {
			return (restaurant) => {
			  return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},
		
		showpopup(scope) {
			let field = scope.column.property;
			this.$emit('cell-show-popup', scope);
		},
		
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			var sumfields = {};
			var issumfields = false;
			this.tableFields.map(e=>{
				if (e.istablesum) {
					sumfields[e.field] = e;
					issumfields = true;
				}
		    });
		    
			if (issumfields) {
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '汇总';
						return;
					}
					if (sumfields[column.property]) {
						const values = data.map(item => Number(item[column.property]));
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									return prev + curr;
								}
								else {
									return prev;
								}
							}, 0);
							
							var field = sumfields[column.property];
							if (field.formatter && field.formatter=="formatter_money") {
								sums[index] = formatter_money(null, null, sums[index]);
							}
							else {
								sums[index] += '';
							}
						}
						else {
							sums[index] = '';
						}
					}
					else sums[index] = '';
				});
			}
			return sums;
		},
		visibleChange(isshow, obj) {//下拉展开事件
			if (isshow) {
				this.$emit("visible-change", obj); 
			}
		},
		/* remoteMethod(query, obj) {
			if (query !== '') {
			  this.loading_filterable = true;
			  setTimeout(() => {
				this.loading_filterable = false;
				this.options = this.list.filter(item => {
				  return item.label.toLowerCase()
					.indexOf(query.toLowerCase()) > -1;
				});
			  }, 200);
			} else {
			  this.options = [];
			}
		}, */
		
		operate_(row, column, cellValue, index) {
		  if(cellValue === "create") {
			return "新增数据";
		  }
		  else if(cellValue === "delete") {
			return "删除数据";
		  }
		  else if(cellValue === "update") {
			return "修改数据";
		  }
		  else return "";
		},
		
		status_(row, column, cellValue, index) {
		  if (cellValue == "working"){
			return "正在审批";
		  }
		  else if(cellValue == "refuse") {
			return "待修改";
		  }
		  else if(cellValue == "open") {
			return "申请成功";
		  }
		  else if(cellValue == "close") {
			return "撤销申请";
		  }
		  return "";
		},
		toggleSelection(array, iscancelselect) {
			var ref = this.href;
			if (iscancelselect && array) {
				array.forEach(id_ => {
					this.tableData.map(e=>{
						if(id_ == e.id) {
							this.$refs[ref].toggleRowSelection(e,false);
						}
					});
				});
			}
			else if (array) {
			  array.forEach(id_ => {
				  this.tableData.map(e=>{
					  if(id_ == e.id) {
						  this.$refs[ref].toggleRowSelection(e,true);
					  }
				  });
			  });
			} else {
			  this.$refs[ref].clearSelection();
			}
			
		},
		toggleSelectionByRow(row) {
			var ref = this.href;
			this.$refs[ref].toggleRowSelection(row,true);
		},
		/* 每页条数变更事件 */
		handleSizeChange(val) {
			this.zpagesize = val;
			let page = {
				pagesize: this.zpagesize,
				pagenum: this.zpagenum
			}
			this.$emit('get-data', page);
		},
		/* 页码变更事件*/
		handleCurrentChange(val) {
			this.zpagenum = val;
			let page = {
				pagesize: this.zpagesize,
				pagenum: this.zpagenum
			}
			this.$emit('get-data', page);
		},
	}
});
/*********** h-form ************/
Vue.component("h-form", {//表单组件1
	/* template: 
		'<div class="z_form" v-if="isRefresh"> '+
			'<div v-if="formAttr.istitle && formAttr.title" style="font-size: 14px; font-weight: bold;">{{formAttr.title}}</div> '+
			'<el-form :model="formData" :show-message="false" status-icon '+
			':label-width="formAttr.labelwidth"  '+
			':disabled="disabled || formAttr.disabled"  '+
			':label-position="formAttr.labelposition" '+
			':size="formAttr.size? formAttr.size : \'medium\'"  '+
			':style="{width: width, \'overflow-y\':\'auto\'}"> '+
				'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-right\': formAttr.border, \'border-bottom\': formAttr.border}"> '+
					'<tr v-for="(tableField, k) in tableFieldsFormat" :key="k" style="max-height: 30px;"> '+
						'<td v-for="(fieldObj, kf) in tableField.children" :key="kf"  '+
						':colspan="fieldObj.colspan ? fieldObj.colspan : 1"  '+
						':style="{\'border-left\': formAttr.border, \'border-top\': formAttr.border}"> '+
							'<el-form-item  :label="fieldObj.name +\'：\'" :prop="fieldObj.field" style="width: 100%; overflow: hidden;" '+
							':rules="fieldObj.rules" > '+
							
							'<table style="width: 100%; height: 100%; border-spacing: 0px"> '+
								'<tr>'+
									'<td v-if="fieldObj.ischeckbox">'+
									'<el-checkbox  v-model="formData[fieldObj.ischeckbox]" @change="ischeckboxchange($event, fieldObj)"></el-checkbox> '+
									'</td>'+
									    
									'<td v-if="fieldObj.isstamp && formData[fieldObj.isstamp]">'+
									'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formData[fieldObj.isstamp]}}</div></div>'+
									'</td>'+
									
									'<td v-if="fieldObj.type!=\'popup\'">'+
									'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formData[fieldObj.field]" :disabled="tableField.disabled"  @change="formchange($event, fieldObj)"></el-checkbox> '+
									'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
									'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" :rows="2" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
									'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+ 
									'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" v-model="formData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
									'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
									'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple"  @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									'<el-select v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" @change="formchange($event, fieldObj)"></el-cascader>'+
									'</td>'+
									
									'<td v-if="fieldObj.type==\'popup\'" align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content"><span>{{formData[fieldObj.field]}}</span></td> '+
									//'<td>'+
									
									//'</td>'+
									'<td v-if="fieldObj.type==\'popup\'">'+
									'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
									'</td>'+
								'</tr>'+
							'</table>'+
							'</el-form-item> '+
						'</td> '+
					'</tr> '+
				'</table> '+
			'</el-form> '+
		'</div>', */
		
	template:
		'<div class="z_form" v-if="isRefresh"> '+
			'<div v-if="formAttr.istitle && formAttr.title" style="font-size: 14px; font-weight: bold;">{{formAttr.title}}</div> '+
			'<el-form :model="formDataData" :show-message="false" status-icon '+
			':ref= "href"' +
			':label-width="formAttr.labelwidth"  '+
			':disabled="disabled || formAttr.disabled"  '+
			':label-position="formAttr.labelposition" '+
			':size="formAttr.size? formAttr.size : \'medium\'"  '+
			':style="{width: width, \'overflow-y\':\'auto\'}"> '+
				'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-right\': formAttr.border, \'border-bottom\': formAttr.border}"> '+
					'<tr v-for="(tableField, k) in tableFieldsFormat" :key="k" style="max-height: 30px;"> '+
						'<td v-for="(fieldObj, kf) in tableField.children" :key="kf"  '+
						':colspan="fieldObj.colspan ? fieldObj.colspan : 1"  '+
						//isOldContrast formDataOld
						':class="[(isOldContrast && formDataOld.id && formDataOld[fieldObj.field] != formDataData[fieldObj.field]) ? \'z_contrast_form\' : \'\']" '+
						
						':style="{\'border-left\': formAttr.border, \'border-top\': formAttr.border}"> '+
							'<el-form-item :label="fieldObj.name" :prop="fieldObj.field" :label-width="fieldObj.labelwidth" style="width: 100%; overflow: hidden;" '+
							':rules="fieldObj.rules" > '+
							'<table style="width: 100%; height: 100%; border-spacing: 0px"> '+
								'<tr v-if="!fromFieldObj[fieldObj.field].isEdit" @click="cellFaceClick(fieldObj)">'+
									'<td v-if="fieldObj.ischeckbox">'+
									'<el-checkbox  v-model="formDataData[fieldObj.ischeckbox]"  @change="ischeckboxchangeToEdit($event, fieldObj)"></el-checkbox> '+
									'</td>'+
									
									'<td v-if="fieldObj.isstamp && formDataFace[fieldObj.isstamp]">'+
									'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formDataFace[fieldObj.isstamp]}}</div></div>'+
									'</td>'+
									
									'<td align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content"> '+
									
									'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formDataData[fieldObj.field]" disabled ></el-checkbox> '+
									'<el-radio-group v-else-if="fieldObj.type == \'radio\'" v-model="formDataData[fieldObj.field]" disabled @change="formchange($event, fieldObj)"> '+
									    '<el-radio v-for="(r, k) in fieldObj.options" :key="k" :label="r.code">{{r.name}}</el-radio> '+
									'</el-radio-group> '+
									
									'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple"  @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									'<el-select v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isfilterable" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									
									'<span v-else>&nbsp;{{formDataFace[fieldObj.field]}}</span>'+
									//'<el-input disabled class="from_popup_input" v-model="formDataFace[fieldObj.field]"></el-input> '+
									'</td> '+
								'</tr>'+
								'<tr v-else>'+
									'<td v-if="fieldObj.ischeckbox">'+
									'<el-checkbox v-model="formDataData[fieldObj.ischeckbox]"  :checked="formDataData[fieldObj.ischeckbox]" @change="isformcheckboxchange($event, fieldObj)">{{fieldObj.checkbox_text}}</el-checkbox> '+
									'</td>'+
									'<td v-if="fieldObj.isstamp && formDataFace[fieldObj.isstamp]">'+
									'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formDataFace[fieldObj.isstamp]}}</div></div>'+
									'</td>'+
									'<td v-if="fieldObj.type!=\'popup\' && fieldObj.type!=\'upload\'" style="width: 100%;">'+
									'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formDataData[fieldObj.field]" :disabled="tableField.disabled"  @change="formchange($event, fieldObj)"></el-checkbox> '+
									'<el-input-number v-if="fieldObj.type == \'number\'" v-model="formDataData[fieldObj.field]" controls-position="right" :disabled="tableField.disabled" style="width: 100%;" @change="formchange($event, fieldObj)" :min="fieldObj.minval" :max="fieldObj.maxval"></el-input-number> '+
									'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)"></el-input> '+
									'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" :rows="fieldObj.textarearows ? fieldObj.textarearows : 2" :maxlength="fieldObj.maxlength ? fieldObj.maxlength : 50" show-word-limit v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
									'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" :clearable="fieldObj.isnotclearable ? false : true" :picker-options="fieldObj.pickerOptions" v-model="formDataData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+ 
									'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" v-model="formDataData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
									'<el-date-picker v-else-if="fieldObj.type==\'year\'" type="year" placeholder="选择年" v-model="formData[fieldObj.field]" value-format="yyyy" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
									'<el-date-picker v-else-if="fieldObj.type==\'daterange\'" type="daterange" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
									'<div v-else-if="fieldObj.type==\'span\'" style="width: 100%; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
									'<span  v-if="fieldObj.isclick" class="h_cellclick" @click="formCallClickBySpan(fieldObj)">{{formDataData[fieldObj.field]}}</span>'+
									'<span  v-else>{{formDataData[fieldObj.field]}}</span>'+
									'</div> '+
									'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple"  @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									'<el-select v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isfilterable" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
										'<el-option '+
											'v-for="(item,k1) in fieldObj.options" '+
											':key="k1" '+
											':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
											':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
										'</el-option> '+
									'</el-select> '+
									'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formDataData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" @change="formchange($event, fieldObj)"></el-cascader>'+
									'<el-switch v-else-if="fieldObj.type==\'switch\'" v-model="formDataData[fieldObj.field]" :inactive-text="fieldObj.switch_false" :active-text="fieldObj.switch_true"> </el-switch> '+
									
									'</td>'+
									
									'<td v-if="fieldObj.type==\'popup\'" align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" :class="[\'el-form-item__content\', fieldObj.disabled ? \'is-disabled\': \'\']"><span>{{formDataData[fieldObj.field]}}</span></td> '+
									//'<td>'+
									
									//'</td>'+
									'<td v-if="fieldObj.type==\'popup\'">'+
									'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
									'</td>'+
									
									'<td v-if="fieldObj.type==\'upload\'" align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;"><span  class="h_cellclick" @click="formCallClick(fieldObj)">{{formDataData[fieldObj.field]}}</span></td> '+
									//'<td>'+
									
									//'</td>'+
									'<td v-if="fieldObj.type==\'upload\'">'+
									'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
									'</td>'+
									
									'<td v-if="fieldObj.buttonname">'+
									'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" :disabled="fieldObj.disabled" style="padding: 5px;" @click="buttonClick(fieldObj)">{{fieldObj.buttonname}}</el-button> '+
									'</td>'+
									'<template v-if="fieldObj.buttonarrayname && fieldObj.buttonarrayname.length>0">'+
									'<td v-for="(buttonobj, index) in fieldObj.buttonarrayname" :key="index">'+
										'<el-button v-if="buttonobj.notdisabled" type="primary" :disabled="!buttonobj.notdisabled" style="padding: 5px;" @click="buttonClick(buttonobj)">{{buttonobj.buttonname}}</el-button> '+
										'<el-button v-else-if="!disabled || !fieldObj.disabled" type="primary" :disabled="fieldObj.disabled" style="padding: 5px;" @click="buttonClick(buttonobj)">{{buttonobj.buttonname}}</el-button> '+
									'</td>'+
									'</template>'+
									'<div v-if="fieldObj.ischeckbox && fieldObj.ischeckbox == \'isuserebate\'" style="min-width: 100px !important; margin: 0 auto; text-align: left;">可用返利 :'+
									'<el-input v-if="fieldObj.ischeckbox && fieldObj.ischeckbox == \'isuserebate\'" v-model="rebate_available" :disabled="true" style="width: 70px;"></el-input> </div>'+
								'</tr>'+
							'</table>'+
							'</el-form-item> '+
						'</td> '+
					'</tr> '+
				'</table> '+
			'</el-form> '+
		'</div>', 
	props: {
		formAttr: Object,
		tableFields: Array,
		isOldContrast: {//是否对比差异
			type: Boolean,
			default: false
		},
		formDataOld: {//对比差异的历史数据
			type: Object,
			default: function(){
				return {};
			}
		},
		
		isEndColspan: {//是否最后一行自动铺满
			type: Boolean,
			default: true
		},
		
		formData: Object,
		"href": {//无数据的图片
			type: String,
			default: "form1"
		},
		disabled: {
			type: Boolean,
			default: false
		},
		width: {
			type: String,
			default: "100%"
		},
		
	},
	
	data() {
		return {
			isRefresh: true,
			tableFieldsFormat: [],
			fromFieldObj: {},
			
			formFieldsObj: {},
			record: null,
			formDataData: {},
			formDataFace: {},
		}
	},
	computed: {
		tableFields2() {
			if(this.formAttr && this.tableFields.length > 0) {
				this.formLayout();
			}
		}
	},
	watch: {
		tableFields() {
			if(this.formAttr && this.tableFields.length > 0) {
				this.formLayout();
			}
		},
		formData() {
			if(this.formData) {
				this.formDataRecord();
			}
		}
		
	},
	mounted() {
		if(this.formAttr && this.tableFields.length > 0) {
			this.formLayout();
		}
	},
	methods: {
		formLayout() {
			//表单布局设置
			let columnnumber_ = this.formAttr.columnnumber;
			let tableFieldsFormat_ = [];
			
			let rowObj_ = {};
			let children_ = [];
			let i = 0;
			let field_i = 0;
			let tableFields_ = clone(this.tableFields);
			let formFieldsObj_ = {};
			for (var r=0; r<tableFields_.length; r++) {
				let field_ = tableFields_[r];
				this.formFieldsObj[field_.field] = field_;
				this.fromFieldObj[field_.field] = {
					isEdit: true
				};
				
				if(!field_.type || field_.type == "") {
					field_.type = "input";
				}
				if (field_.isshow != "T") {
					continue;
				};
				field_.rules = [];
				if (field_.required) {//是否必填
					let required_ = {
						required: true,
						message: "请输入"+field_.name, 
						trigger: "blur" 
					};
					field_.rules.push(required_);
				}
				if (field_.pattern) {//填写规则，正则表达式
					let required_ = {
							pattern: field_.pattern, 
							message: "请填写正确的"+field_.name, 
							trigger: "blur"
						};
					field_.rules.push(required_);
				}
				
				if (field_.colspan > 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 {
						if (this.isEndColspan) {
							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_;
			
			this.formDataRecord();
		},
		
		formDataRecord() {
			/* if (this.formAttr && this.formAttr.formatter && this.formData) {
				this.formAttr.formatter(this.formData, this.tableFields);
			} */
			let me = this;
			if (this.formData) {
				this.record = new Record(me);
				this.record.setData(this.formData);
				
				this.formDataData = this.formData;//this.record.getData();
				this.rebate_available = this.formData.rebate_available;
				this.formDataFace = this.record.getFace();
			}
		},
		
		cellFaceClick(fieldObj) {
			var fromFieldObj_ = clone(this.fromFieldObj);
			if (fromFieldObj_[fieldObj.field].isEdit){
				return;
			}
			this.record.setEditData(this.formDataData);
			this.record.apply();
			this.formDataFace = this.record.getFace();
			
			for (var field in fromFieldObj_) {
				fromFieldObj_[field].isEdit = false;
			}
			
			if (!fieldObj.disabled && !this.disabled && !this.formAttr.disabled) {
				fromFieldObj_[fieldObj.field].isEdit = true;
			}
			
			this.fromFieldObj = fromFieldObj_;
		},
		
		refresh() {
			this.isRefresh = false;
			this.isRefresh = true;
		},
		showpopup(obj) {//弹窗弹出事件
			let val = this.formDataData[obj.field];
			let popupObj = {
				obj: obj,
				val: val
			};
			this.$emit('show-popup', popupObj);
		},
		
		formCallClick(obj) {//指定属性值点击事件
			let val = this.formDataData[obj.field];
			let popupObj = {
				obj: obj,
				val: val
			};
			this.$emit('formcall-click', popupObj);
		},
		
		formCallClickBySpan(obj) {//指定属性值点击事件
			let val = this.formDataData[obj.field];
			let popupObj = {
				obj: obj,
				val: val
			};
			this.$emit('formcallspan-click', popupObj);
		},
		
		buttonClick(obj) {//按键点击事件
			let val = this.formDataData[obj.field];
			let popupObj = {
				obj: obj,
				val: val
			};
			this.$emit('button-click', popupObj);
		},
		setFormValByField(field, val) {
			this.formDataData[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) {
				//let val = this.formDataData[obj.field];
				//let url = obj.dataurl;
				
				this.$emit("visible-change", obj); 
				
				//根据url请求重新获取选择项
				/* obj.options = [
					{label: "选项1", value:"code1"},
					{label: "选项2", value:"code2"},
					{label: "选项3", value:"code3"},
					{label: "选项4", value:"code4"}
				]; */
				
				/* let data = this.formData;
				let options = url.split("?");
				let parendfield = options[1].split("=");
				let optionslist = dataRoot.database[options[0]];
				let result = clone(optionslist);
				if (obj.selectparent) {
					let parentval = data[obj.selectparent];
					result = optionslist.filter(item => {
						if (!parentval) {
							return false;
						}
						return item[parendfield[1]].toLowerCase().indexOf(parentval.toLowerCase()) > -1;
					});
				}
				obj.options = result; */
				
				/* var obj_ = {
					fieldobj: obj,
					data: this.formData
				}
				this.$emit('visible-change', obj_); */ //obj.options = 
			}
		},
		formchange(val, obj) {
			if (typeof(val) == "string") {
				//去除两端的空格
				this.formData[obj.field] = val = val.replace(/(^\s*)|(\s*$)/g, "");
				
				//去除中间的回车换行
				//this.formData[obj.field] = val = val.replace(/[\r\n]/g,"");
			}
			var obj_ = {
				fieldobj: obj,
				data: this.formData
			}
			this.$emit("form-change", obj_); 
		},
		isformcheckboxchange(val, obj) {
			var obj_ = {
				fieldobj: obj,
				data: this.formData
			}
			this.$emit("form-checkbox-change", obj_);
		},
		ischeckboxchange(val, obj) {
			obj.disabled = !val;
		},
		ischeckboxchangeToEdit(val, obj) {
			obj.disabled = !val;
			this.cellFaceClick(obj);
		},
		
		selectChange(val, obj) {
			this.formDataData[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.formDataData[e] = [];
								}
								else {
									me.formDataData[e] = "";
								}
							}
						});
					});
				});
			}
			var obj_ = {
				fieldobj: obj,
				data: this.formData
			}
			this.$emit("select-change", obj_); 
			
			this.isRefresh = false;
			this.isRefresh = true;
		},
		
		checkForm() {
			var ref = this.href;
			var bo_ = true;
			this.$refs[ref].validate((valid) => {
			  if (valid) {
			  } else {
				bo_ = false;
			  }
			});
			
			return bo_;
		},
		
	}
});

/*********** h-form-filter ************/
Vue.component("h-form-filter", {//表单组件2(查询)
	template: 
		'<div class="z_form" v-if="isRefresh"> '+
			'<el-form :model="formData" status-icon '+
			':ref= "href"' +
			':label-width="formAttr.labelwidth"  '+
			':label-position="formAttr.labelposition" '+
			':size="formAttr.size? formAttr.size : \'medium\'" '+
			':style="{width: width, \'overflow-y\':\'auto\'}"> '+
				'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-right\': formAttr.border, \'border-bottom\': formAttr.border}"> '+
					'<tr v-for="(tableField, k) in tableFieldsFormat" :key="k" style="max-height: 30px;"> '+
						'<td v-for="(fieldObj, kf) in tableField.children" :key="kf"  '+
						':colspan="fieldObj.colspan ? fieldObj.colspan : 1"  '+
						':style="{\'border-left\': formAttr.border, \'border-top\': formAttr.border}"> '+
							'<template v-if="k == tableFieldsFormat.length-1 && kf == tableField.children.length -1">' +//
								'<div style="width: 100%; text-align: right;"> '+
									'<el-button-group>' +
										'<el-button v-if="isbuttonquery" :loading="buttonloading" icon="iconfont icon-productclassification" @click="h_onQuery"></el-button>' +
										'<el-button :loading="buttonloading" icon="iconfont icon-brand" @click="h_onInitQuery"></el-button>' +
										/* '<el-button icon="iconfont icon-liebiao" @click="h_onEditQuery"></el-button>' + */
									'</el-button-group>' +
									
									'<el-button-group v-if="isReduce">' +
										'<el-button type="text" @click="formOpenReduce"> '+
											'<span v-if="z_isformOpen"> <i class="el-icon-arrow-up"></i>收起 </span>'+
											'<span v-else> <i class="el-icon-arrow-down"></i>展开 </span>'+
										'</el-button>' +
										/* '<el-button icon="iconfont icon-liebiao" @click="h_onEditQuery"></el-button>' + */
									'</el-button-group>' +
								'</div> '+
							'</template>' +
							
							'<template v-else>' +//
								'<el-form-item  :label="fieldObj.name +\'：\'" :prop="fieldObj.field" :label-width="fieldObj.labelwidth" style="width: 100%; overflow: hidden;" '+
								':rules="fieldObj.rules" > '+
								
								'<table style="width: 100%; height: 100%; border-spacing: 0px"> '+
									'<tr>'+
										'<td v-if="fieldObj.ischeckbox">'+
										'<el-checkbox  v-model="formData[fieldObj.ischeckbox]" @change="ischeckboxchange($event, fieldObj)"></el-checkbox> '+
										'</td>'+
											
										'<td v-if="fieldObj.isstamp && formData[fieldObj.isstamp]">'+
										'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formData[fieldObj.isstamp]}}</div></div>'+
										'</td>'+
										
										'<td v-if="fieldObj.type!=\'popup\'">'+
										'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formData[fieldObj.field]" :disabled="tableField.disabled"  @change="formchange($event, fieldObj)"></el-checkbox> '+
										'<el-input v-else-if="fieldObj.type==\'input\'" v-model.trim="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
										'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" :rows="2" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
										'<el-date-picker v-else-if="fieldObj.type==\'daterange\'" type="daterange" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
										'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+ 
										'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" v-model="formData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
										'<el-date-picker v-else-if="fieldObj.type==\'year\'" type="year" placeholder="选择年" v-model="formData[fieldObj.field]" value-format="yyyy" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
										'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
										'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple"  @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
											'<el-option '+
												'v-for="(item,k1) in fieldObj.options" '+
												':key="k1" '+
												':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
												':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
											'</el-option> '+
										'</el-select> '+
										'<el-select v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 100%;"> '+
											'<el-option '+
												'v-for="(item,k1) in fieldObj.options" '+
												':key="k1" '+
												':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
												':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
											'</el-option> '+
										'</el-select> '+
										'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" @change="formchange($event, fieldObj)"></el-cascader>'+
										'</td>'+
										
										'<td v-if="fieldObj.type==\'popup\'" align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content">'+
										' <span v-if="fieldObj.popupvaltype && fieldObj.popupvaltype == \'span\'" class="h_down">{{formData[fieldObj.field]}}</span> '+
										'<el-input v-else class="from_popup_input" v-model="formData[fieldObj.field]"></el-input>'+
										'</td> '+ //{{formData[fieldObj.field]}}
										/* '<td>'+
										
										'</td>'+ */
										'<td v-if="fieldObj.type==\'popup\'">'+
										'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
										
										'</td>'+
									'</tr>'+
								'</table>'+
								'</el-form-item> '+
							'</template>' +
						'</td> '+
					'</tr> '+
				'</table> '+
			'</el-form> '+
		'</div>',
	props: {
		formAttr: Object,
		tableFields: Array,
		formData: Object,
		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%"
		},
		"href": {//无数据的图片
			type: String,
			default: "form1"
		},
	},
	
	data() {
		return {
			isRefresh: true,
			tableFieldsFormat: [],
			z_isformOpen: true,//是否展开
		}
	},
	computed: {
		tableFields2() {
			if(this.formAttr && this.tableFields.length > 0) {
				this.formLayout();
			}
		}
	},
	watch: {
		tableFields() {
			if(this.formAttr && this.tableFields.length > 0) {
				this.formLayout();
			}
		}
	},
	mounted() {
		this.z_isformOpen = this.isFormOpen;
		if(this.formAttr && this.tableFields.length > 0) {
			this.formLayout();
		}
	},
	methods: {
		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) {
			//表单布局设置
			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"};
			if(tableFields_) {
				tableFields_.push(button_);
			}
			
			for (var r=0; r<tableFields_.length; r++) {
				let field_ = tableFields_[r];
				if(!field_.type || field_.type == "") {
					field_.type = "input";
				}
				if (field_.isshow != "T") {
					continue;
				}
				
				field_.rules = [];
				if (field_.required) {//是否必填
					let required_ = {
						required: true,
						message: "请输入"+field_.name, 
						trigger: "blur" 
					};
					field_.rules.push(required_);
				}
				if (field_.pattern) {//填写规则，正则表达式
					let required_ = {
							pattern: field_.pattern, 
							message: "请填写正确的"+field_.name, 
							trigger: "blur"
						};
					field_.rules.push(required_);
				}
				
				if (field_.colspan > 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"); 
		},
		refresh() {
			this.isRefresh = false;
			this.isRefresh = true;
		},
		showpopup(obj) {//弹窗弹出事件
			let val = this.formData[obj.field];
			let popupObj = {
				obj: obj,
				val: val
			};
			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) {
				//let val = this.formData[obj.field];
				//let url = obj.dataurl;
				
				this.$emit("visible-change", obj); 
				
				//根据url请求重新获取选择项
				/* obj.options = [
					{label: "选项1", value:"code1"},
					{label: "选项2", value:"code2"},
					{label: "选项3", value:"code3"},
					{label: "选项4", value:"code4"}
				]; */
				
				/* let data = this.formData;
				let options = url.split("?");
				let parendfield = options[1].split("=");
				let optionslist = dataRoot.database[options[0]];
				let result = clone(optionslist);
				if (obj.selectparent) {
					let parentval = data[obj.selectparent];
					result = optionslist.filter(item => {
						if (!parentval) {
							return false;
						}
						return item[parendfield[1]].toLowerCase().indexOf(parentval.toLowerCase()) > -1;
					});
				}
				obj.options = result; */
				
				/* var obj_ = {
					fieldobj: obj,
					data: this.formData
				}
				this.$emit('visible-change', obj_); */ //obj.options = 
			}
		},
		formchange(val, obj) {
			var obj_ = {
				fieldobj: obj,
				data: this.formData
			}
			//this.$emit("form-change", obj_); 
			this.$emit("on-formchange", obj_); 
		},
		ischeckboxchange(val, obj) {
			obj.disabled = !val;
		},
		
		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
			}
			//this.$emit("select-change", obj_); 
			this.$emit("on-formchange", obj_); 
			this.isRefresh = false;
			this.isRefresh = true;
		},
		
		checkForm() {
			var ref = this.href;
			var bo_ = true;
			this.$refs[ref].validate((valid) => {
			  if (valid) {
			  } else {
				bo_ = false;
			  }
			});
			
			return bo_;
		},
		
	}
});
/* ********** */
Root = window.top.Root;
RootRole = window.top.RootRole;
dataRoot = window.top.dataRoot;
dataRootFields = window.top.dataRootFields;
Server = window.top.Server;

//dataRoot_lxc = window.top.dataRoot_lxc;
//dataRoot_wxy = window.top.dataRoot_wxy;

function getSetting(pageName) {
	var roleCode = Root.role.code;
	var result = { page: {}, buttons: {} };
	
	if (!setting) {
		return result;
	}
	
	var pageSetting = setting[pageName];
	
	if (!pageSetting) {
		return result;
	}
	
	result.page = pageSetting.page;
	
	var btnOptions = pageSetting.buttons;
	var buttons = result.buttons;
	
	for (var i = 0; i < btnOptions.length; i++) {
		var option = btnOptions[i];
		
		if (option.isVisible && !arrayContains(option.isVisible, roleCode)) {
			continue;
		}
		
		var button = buttons[option.code] = {};
		button.disabled = !option.isActive || !arrayContains(option.isActive, roleCode);
	}
	
	return result;	
}

function arrayContains(array, value) {
	if (!array || !value) {
		return false;
	}
	var bo_ = false;
	for (var i = 0; i < array.length; i++) {
		value.map(e=>{
			if (e == array[i]) {
				bo_ = true;
			}
		});
	}
	return bo_;
}