kh-one-ui 2.0.0

package/packages/one-form/src/index.js

@@ -0,0 +1,1226 @@
+import OneStorage from '../../../src/lib/onestorage.js';
+import OneUrl from '../../../src/lib/oneurl.js';
+import OneDate from '../../../src/lib/onedate.js';
+import OneTool from '../../../src/lib/onetool.js';
+import OneEncrypt from '../../../src/lib/oneencrypt.js';
+import OneRequest from '../../../src/lib/onerequest.js';
+import OneFormRules from '../../../src/lib/oneformrules.js';
+
+import OneFormInput from './form-input/index.vue';
+import OneFormPassword from './form-password/index.vue';
+import OneFormTextarea from './form-textarea/index.vue';
+import OneFormInputNumber from './form-inputNumber/index.vue';
+import OneFormInputSelect from './form-inputSelect/index.vue';
+import OneFormDate from './form-date/index.vue';
+import OneFormMonth from './form-month/index.vue';
+import OneFormTime from './form-time/index.vue';
+import OneFormDatetime from './form-datetime/index.vue';
+import OneFormRadio from './form-radio/index.vue';
+import OneFormCheckbox from './form-checkbox/index.vue';
+import OneFormSelect from './form-select/index.vue';
+import OneFormTable from './form-table/index.vue';
+import OneFormImage from './form-image/index.vue';
+import OneFormBase64Image from './form-base64Img/index.vue';
+import OneFormFile from './form-file/index.vue';
+import OneFormSelectTree from './form-selectTree/index.vue';
+import OneFormCascader from './form-cascader/index.vue';
+import OneFormCascaderOne from './form-cascader-one/index.vue';
+import OneFormVueQuillEditor from './form-vue-quill-editor/index.vue';
+import OneFormTree from './form-tree/index.vue';
+import OneFormRepeatCard from './form-repeat-card/index.vue';
+import OneFormVideo from './form-video/index.vue';
+import OneFormColor from './form-color/index.vue';
+import OneFormRate from './form-rate/index.vue';
+import OneFormSwitch from './form-switch/index.vue';
+
+export default {
+	name: 'OneForm',
+	components: {
+		//文本框
+		OneFormInput,
+		//密码框
+		OneFormPassword,
+		//文本域
+		OneFormTextarea,
+		//计数器
+		OneFormInputNumber,
+		//文本+选择
+		OneFormInputSelect,
+		//日期
+		OneFormDate,
+		//时间
+		OneFormTime,
+		//日期时间
+		OneFormDatetime,
+		//单选
+		OneFormRadio,
+		//复选
+		OneFormCheckbox,
+		//下拉
+		OneFormSelect,
+		//表格
+		OneFormTable,
+		//图片
+		OneFormImage,
+		//base64图片
+		OneFormBase64Image,
+		//文件
+		OneFormFile,
+		//下拉树
+		OneFormSelectTree,
+		//级联
+		OneFormCascader,
+		//级联（铺开）
+		OneFormCascaderOne,
+		//VUE富文本
+		OneFormVueQuillEditor,
+		//属性结构
+		OneFormTree,
+		//重复卡片
+		OneFormRepeatCard,
+		//视频
+		OneFormVideo,
+		//颜色选择
+		OneFormColor,
+		//评分选择
+		OneFormRate,
+		//Switch开关
+		OneFormSwitch
+	},
+	data() {
+		return {
+			OneStorage: OneStorage,
+			OneUrl: OneUrl,
+			OneDate: OneDate,
+			OneTool: OneTool,
+			OneEncrypt: OneEncrypt,
+			OneRequest: OneRequest,
+			fileHeaders: {
+				token: OneStorage.getToken(),
+				version: '1.0.0'
+			},
+			//选中的文件, key为文件域的field
+			selectFiles: {},
+			distList: [],
+			self: this,
+			cardActiveId: null,
+			fieldActiveId: null
+		}
+	},
+	props: {
+		formName: {
+			type: String,
+			default: 'refOneForm'
+		},
+		//表单全局配置
+		globalConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		//字段配置
+		fieldConfig: {
+			type: Array,
+			default: () => ([]),
+		},
+		//动态数据配置
+		dynamicConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		//表单数据
+		model: {
+			type: Object,
+			default: () => ({}),
+		},
+		//不显示字段
+		noVisileField: {
+			type: Array,
+			default: () => ([]),
+		},
+		//通用函数, 参数为：type, item，...
+		customEvent: {
+			type: Function,
+			default: null
+		}
+	},
+	created() {},
+	mounted() {
+		//获取级联数据，级联数据需要从第一个开始获取以后的层级
+		for (let i in this.fieldConfig) {
+			let item = this.fieldConfig[i];
+
+			if (item.widget == 'cascader' && this.model[item.field] && Array.isArray(this.model[item.field])) {
+				for (let k = 1; k < this.model[item.field].length - 1; k++) {
+					let val = this.model[item.field].splice(0, k);
+					this.handleCascaderItemChange(item.field, val);
+				}
+			}
+		}
+	},
+	computed: {
+		//获取字段校验规则
+		getItemRules() {
+			return function(item) {
+				if (!item || !item.rules || item.rules.length <= 0) {
+					return [];
+				}
+				let rules = [];
+
+				item.rules.forEach(ruleItem => {
+					if (ruleItem.validatorName && (typeof ruleItem.validatorName == 'string')) {
+						ruleItem.validator = OneFormRules[ruleItem.validatorName];
+					}
+					switch (ruleItem.typeName) {
+						case 'required': //必填
+							ruleItem.message = ruleItem.message || '该项为必填项';
+							break;
+						case 'minMax': //字数限制
+							if (ruleItem.min && ruleItem.max) {
+								ruleItem.message = ruleItem.message || ('字符长度在' + ruleItem.min + '至' +
+									ruleItem.max + '之间!');
+							} else if (ruleItem.max) {
+								ruleItem.message = ruleItem.message || ('最多输入' + ruleItem.max + '个字符!');
+							} else if (ruleItem.min) {
+								ruleItem.message = ruleItem.message || ('至少输入' + ruleItem.min + '个字符!');
+							}
+							break;
+						case 'email': //邮箱校验
+							ruleItem.message = ruleItem.message || '格式错误';
+							break;
+						case 'number':
+							ruleItem.message = ruleItem.message || '请输入数字';
+							break;
+						case 'integer':
+							ruleItem.message = ruleItem.message || '请输入整数';
+							break;
+						case 'date':
+							ruleItem.message = ruleItem.message || '请输入日期';
+							break;
+						case 'url':
+							ruleItem.message = ruleItem.message || '格式错误';
+							break;
+						case 'idcard':
+							ruleItem.message = ruleItem.message || '格式错误';
+							break;
+						case 'mobile':
+							ruleItem.message = ruleItem.message || '格式错误';
+							break;
+						case 'isRange':
+							ruleItem.message = ruleItem.message || '请检查输入泛微';
+							break;
+						case 'sensitivewords': //敏感词校验
+							ruleItem.message = ruleItem.message || '包含敏感词';
+							break;
+					}
+					rules.push(ruleItem);
+				})
+
+				return rules;
+			}
+		},
+		//动态选项
+		getDynamicConfig() {
+			return function(name, defVal) {
+				return this.dynamicConfig[name] || defVal;
+			}
+		},
+		//获取卡片样式
+		cardStyle(cardItem) {
+			return function(cardItem) {
+				let hasWidth = false;
+				let hasFloat = false;
+				let hasMargin = false;
+
+				let outCss = [];
+
+				if (cardItem.style) {
+					//拆分样式
+					let cssArr = cardItem.style.split(';');
+
+					cssArr.forEach(item => {
+						if (item && item.trim()) {
+							item = item.trim().toLowerCase();
+							outCss.push(item);
+
+							if (item.indexOf('float') == 0) {
+								hasFloat = true;
+							} else if (item.indexOf('margin-bottom') == 0) {
+								hasMargin = true;
+							} else if (item.indexOf('width') == 0) {
+								hasWidth = true;
+							}
+						}
+
+					})
+
+				}
+				if (!hasFloat) {
+					outCss.push('float:left');
+				}
+				if (!hasMargin) {
+					outCss.push('margin-bottom: 10px');
+				}
+				if (!hasWidth) {
+					outCss.push('width:' + this.getCardWidth(cardItem.width));
+				}
+				let res = outCss.join(';');
+				res += ";";
+
+				return res;
+			}
+		},
+		//单元格样式
+		itemStyle() {
+			return function(item) {
+				let outCssArr = [];
+				let styleNameList = [];
+
+				if (item.style) {
+					let cssArr = item.style.split(';');
+
+					cssArr.forEach(item => {
+						if (item && item.trim()) {
+							let tmpArr = item.trim().toLowerCase().split(':');
+
+							if (tmpArr.length > 0) {
+								styleNameList.push(tmpArr[0].trim());
+							}
+							outCssArr.push(item);
+						}
+					})
+				}
+
+				if (styleNameList.indexOf('width') < 0) {
+					if (this.getConfigValue('inline', false)) {
+						let labelWidth = this.getValue(item, 'labelWidth', this.getConfigValue('labelWidth', 120));
+
+						if (item.contentWidth && item.contentWidth > 0) {
+							labelWidth += item.contentWidth;
+						} else {
+							labelWidth += 200;
+						}
+						let colNum = this.getConfigValue('colNum', null);
+
+						if (!colNum) {
+							let globalConfig = OneStorage.getOptsValue('FORM_GLOBAL_CONFIG') || {};
+							colNum = globalConfig.colNum || 2;
+						}
+						colNum = colNum <= 1 ? 1 : colNum;
+						let tmpWidth = 100 / colNum;
+						outCssArr.push('width: calc(' + tmpWidth + '% - 20px)')
+						outCssArr.push('min-width: ' + labelWidth + 'px');
+					} else {
+						outCssArr.push('width: calc(100% - 20px)')
+					}
+				}
+				if ((styleNameList.indexOf('margin-bottom') < 0 && styleNameList.indexOf('margin') < 0) && this
+					.fieldIsReadonly(
+						item)) {
+					outCssArr.push('margin-bottom: 0');
+				}
+				if ((styleNameList.indexOf('padding-right') < 0 && styleNameList.indexOf('margin') < 0) && this
+					.fieldIsReadonly(
+						item)) {
+					outCssArr.push('padding-right: 20px');
+				}
+				if (styleNameList.indexOf('display') < 0) {
+					outCssArr.push('display: inline-block');
+				}
+				if (styleNameList.indexOf('vertical-align') < 0) {
+					outCssArr.push('vertical-align: top');
+				}
+
+				return outCssArr.join(';');
+			}
+		},
+		//获取itemclass
+		itemClass(item) {
+			return function(item) {
+				let outClass = 'one-form-item--' + item.widget;
+
+				switch (item.widget) {
+					case 'input': //文本框
+						break;
+					case 'password': //密码框
+						break;
+					case 'inputNumber': //数字文本框
+						break;
+					case 'textarea': //	文本域
+						break;
+					case 'inputSelect': //输入选择组合框
+						break;
+					case 'image': //	图片上传
+						break;
+					case 'base64Img': //	图片,Base64编码
+						break;
+					case 'file': //	文件上传
+						break;
+					case 'date': //	日期选择
+					case 'time': //	时间选择
+					case 'datetime': //	日期时间选择
+						if (item.range) {
+							outClass += ' one-form-item--range';
+						}
+						break;
+					case 'radio': //	单选框
+						break;
+					case 'checkbox': //	复选框
+						break;
+					case 'select': //	下拉选择
+						break;
+					case 'selectTree': //	树形下拉选择
+						break;
+					case 'cascader': //	级联选择框
+						break;
+					case 'ueditor': //	富文本
+						break;
+					case 'tree': //	树形
+						break;
+				}
+				outClass += ' one-form-item' + (this.getConfigValue('inline', false) ? '--mini ' : ' ');
+				outClass += ' one-form-item' + (this.fieldIsReadonly(item) ? '--readonly ' : ' ');
+				outClass += ' ' + this.getValue(item, 'class', '');
+
+				return outClass;
+			}
+		},
+		//获取显示label
+		itemLabel(item) {
+			return function(item) {
+				if (this.fieldIsReadonly(item)) {
+					//只读
+					if (!item.displayName || item.displayName.trim() === '') {
+						return " ";
+					} else {
+						let readonlyLableAfter = this.getConfigValue('slitFlag', true) ? "：" : "";
+
+						if (this.globalConfig && this.globalConfig.readonlyLableAfter != undefined) {
+							readonlyLableAfter = this.globalConfig.readonlyLableAfter;
+						}
+
+						return item.displayName + readonlyLableAfter;
+					}
+				}
+
+				return item.displayName;
+			}
+		},
+		//内容样式
+		// contentStyle() {
+		// 	return function(item, isRange) {
+
+		// 		let outCssArr = [];
+		// 		let styleNameList = [];
+
+		// 		if (item.contenStyle) {
+		// 			//拆分
+		// 			let cssArr = item.contenStyle.split(';');
+
+		// 			cssArr.forEach(cssItem => {
+		// 				if (cssItem && cssItem.trim()) {
+		// 					let tmpArr = cssItem.trim().toLowerCase().split(':');
+
+		// 					if (tmpArr.length > 0) {
+		// 						styleNameList.push(tmpArr[0].trim());
+
+		// 						if (tmpArr[0].trim() == 'width') {
+		// 							outCssArr.push(cssItem);
+		// 						} else {
+		// 							outCssArr.push(cssItem);
+		// 						}
+		// 					}
+		// 				}
+		// 			})
+		// 		}
+
+		// 		if (styleNameList.indexOf('width') < 0) {
+		// 			if (isRange) {
+		// 				outCssArr.push('width: calc(50% - 12px)')
+		// 			} else {
+		// 				outCssArr.push('width: calc(100%)')
+		// 			}
+		// 		}
+		// 		if (styleNameList.indexOf('display') < 0) {
+		// 			outCssArr.push('display: inline-block')
+		// 		}
+		// 		if (styleNameList.indexOf('vertical-align') < 0) {
+		// 			outCssArr.push('vertical-align: top')
+		// 		}
+
+		// 		return outCssArr.join(';')
+		// 	}
+		// },
+		//获取item的宽度
+		// getItemWidth() {
+		// 	return function(item, isRange) {
+		// 		let labelWidth = this.getValue(item, 'labelWidth', this.getConfigValue('labelWidth', 120));
+
+		// 		if (isRange) {
+		// 			return 'calc(50% - 12px)'
+		// 		} else {
+		// 			return 'calc(100%)'
+		// 		}
+		// 	}
+		// },
+	},
+	methods: {
+		//设置选中
+		updateSelected(cardId, fieldId) {
+			this.cardActiveId = cardId;
+			this.fieldActiveId = fieldId;
+		},
+		//获取值
+		getValue(item, key, defVal) {
+
+			if (item == null || item == undefined) {
+				return defVal;
+			}
+
+			if (item[key] == null || item[key] === '' || item[key] === undefined) {
+				return defVal;
+			}
+
+			return item[key];
+		},
+		//获取全局配置
+		getConfigValue(key, defaultVal) {
+			return this.getValue(this.globalConfig, key, defaultVal);
+		},
+		// //文件上传地址
+		// getFormFileUploadUrl() {
+		//   return OneUrl.getFileUploadUrl(this.getConfigValue('baseServerKey'));
+		// },
+		// //文件阅读地址
+		// getFormFileReadBaseUrl() {
+		//   return OneUrl.getFileReadBaseUrl(this.getConfigValue('baseServerKey'))
+		// },
+		//卡片按钮点击事件
+		handleCardHeaderBtnClick(item) {
+			this.$emit('cardHeaderBtnClick', item);
+		},
+		//获取卡片宽度
+		getCardWidth(width) {
+
+			if (!width) {
+				return '100%';
+			}
+			if (isNaN(width)) {
+				return width;
+			}
+
+			return width + 'px';
+		},
+		//判断card是否显示
+		cardShow(cardId, show) {
+
+			if (cardId) {
+				let cardNoShowIdList = this.getConfigValue('cardNoShowIdList', []);
+
+				if (cardNoShowIdList && Array.isArray(cardNoShowIdList)) {
+					if (cardNoShowIdList.indexOf(cardId) >= 0) {
+						return false;
+					}
+				}
+			}
+
+			if (show == undefined) {
+				return true;
+			}
+
+			if (show == false) {
+				return false;
+			}
+
+			return true;
+		},
+		//判断是否不显示
+		fieldIsNoVisible(item) {
+
+			if (item.noVisile != undefined && item.noVisile != null) {
+				return item.noVisile;
+			}
+
+			let noVisileField = this.getConfigValue('noVisileField', []);
+
+			if (noVisileField && Array.isArray(noVisileField)) {
+				if (noVisileField.indexOf(item.field) >= 0) {
+					return true;
+				}
+			}
+
+			if (this.noVisileField && this.noVisileField.indexOf(item.field) >= 0) {
+				return true;
+			}
+
+			return false;
+		},
+		// //判断是否禁用
+		// fieldIsDisabled(item) {
+
+		//   if (item.disabled != undefined && item.disabled != null) {
+		//     return item.disabled;
+		//   }
+
+		//   let formDisabled = this.getConfigValue('disabled', false);
+
+		//   if (formDisabled === true) {
+		//     return true;
+		//   }
+
+		//   let disabledField = this.getConfigValue('disabledField', []);
+
+		//   if (disabledField && Array.isArray(disabledField)) {
+		//     if (disabledField.indexOf(item.field) >= 0) {
+		//       return true;
+		//     }
+		//   }
+
+		//   return false;
+		// },
+		//判断是否只读
+		fieldIsReadonly(item) {
+
+			if (item.readonly != undefined && item.readonly != null) {
+				return item.readonly;
+			}
+			let formReadonly = this.getConfigValue('readonly', false);
+
+			if (formReadonly === true) {
+				return true;
+			}
+
+			let globalReadonlyField = this.getConfigValue('readonlyField', []);
+
+			if (globalReadonlyField && Array.isArray(globalReadonlyField)) {
+				if (globalReadonlyField.indexOf(item.field) >= 0) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+		/********************************************************************************/
+		//级联选择事件
+		handleCascaderItemChange(field, val) {
+			this.$emit('cascader', field, val)
+		},
+		/***********************************表格************************************/
+		// //表格按钮区域点击事件
+		// tableButtonAreaClick(item, id) {
+
+		//   if (item && item.table && item.table.buttonAreaClick && typeof item.table.buttonAreaClick == 'function') {
+		//     item.table.buttonAreaClick(item, id)
+		//   }
+		//   this.$emit('tableButtonAreaClick', item, id)
+
+		//   if (this.customEvent && typeof this.customEvent == 'function') {
+		//     return this.customEvent('tableButtonAreaClick', item, id)
+		//   }
+		// },
+		// //表格格式化事件
+		// tableAreaConfigTableFormatter(item, row, column, cellValue, index) {
+
+		//   if (item && item.table && item.table.tableAreaConfigTableFormatter && typeof item.table.tableAreaConfigTableFormatter ==
+		//     'function') {
+		//     return item.table.tableAreaConfigTableFormatter(item, row, column, cellValue, index)
+		//   }
+		//   if (this.customEvent && typeof this.customEvent == 'function') {
+		//     return this.customEvent('tableAreaConfigTableFormatter', item, row, column, cellValue, index)
+		//   }
+
+		//   return cellValue;
+		// },
+		// //表格操作栏点击事件
+		// tableAreaConfigOptClick(item, optId, row, index) {
+
+		//   if (item && item.table && item.table.tableAreaConfigOptClick && typeof item.table.tableAreaConfigOptClick ==
+		//     'function') {
+		//     item.table.tableAreaConfigOptClick(item, optId, row, index);
+		//   }
+		//   this.$emit('tableAreaConfigOptClick', item, optId, row, index)
+
+		//   if (this.customEvent && typeof this.customEvent == 'function') {
+		//     this.customEvent('tableAreaConfigOptClick', item, optId, row, index)
+		//   }
+		// },
+		// //表格禁止事件(编辑框禁用)
+		// tableAreaConfigTableCellDisabled(item, row, column, cellValue, index) {
+
+		//   if (item && item.table && item.table.tableAreaConfigTableCellDisabled && typeof item.table.tableAreaConfigTableCellDisabled ==
+		//     'function') {
+		//     return item.table.tableAreaConfigTableCellDisabled(item, row, column, cellValue, index)
+		//   }
+
+		//   if (this.customEvent && typeof this.customEvent == 'function') {
+		//     return this.customEvent('tableAreaConfigTableCellDisabled', item, row, column, cellValue, index)
+		//   }
+
+		//   return false;
+		// },
+		// //加载列表数据
+		// tableLoadPage(field) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.loadPage();
+		// },
+		// //重置表格数据，不包含筛选数据，仅分页、排序、表格内容的数据
+		// tableResetTable(field) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.resetTable();
+		// },
+		// //获取选中行的数据
+		// tableGetSelectData(field, minRowNum, maxRowNum) {
+
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+
+		//   return table.getSelectData(minRowNum, maxRowNum);
+		// },
+		// //获取选中行的主键值
+		// tableGetSelectId(field, minRowNum, maxRowNum) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   return table.getSelectId(minRowNum, maxRowNum);
+		// },
+		// //设置排序字段和方式
+		// tableSetSort(field, sortField, sortOrder) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.setSort(sortField, sortOrder);
+		// },
+		// //设置分页信息
+		// tableSetStartSize(field, start, size) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.setStartSize(start, size);
+		// },
+		// //设置列表数据
+		// tableSetListData(field, list) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.setListData(list);
+		// },
+		// //添加一行
+		// tableAddRow(field, row) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.addRow(row);
+		// },
+		// //删除一行
+		// tableDeleteRow(field, row) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.deleteRow(row);
+		// },
+		// //更新一行
+		// tableUpdateRow(field, row) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.updateRow(row);
+		// },
+		// //获取列表数据
+		// tableGetAllRow(field) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   return table.getAllRow();
+		// },
+		// //用于多选表格，清空用户的选择
+		// tableClearSelection(field) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.clearSelection();
+		// },
+		// //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+		// tableToggleRowSelection(field, row, selected) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.toggleRowSelection(row, selected);
+		// },
+		// //用于多选表格，切换所有行的选中状态
+		// tableToggleAllSelection(field) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.toggleAllSelection();
+		// },
+		// //用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
+		// tableToggleRowExpansion(field, row, expanded) {
+		//   let refs = this.$refs['oneTableComponents_' + field];
+
+		//   if (Array.isArray(refs)) {
+		//     if (refs.length > 0) {
+		//       refs = refs[0];
+		//     } else {
+		//       refs = null;
+		//     }
+		//   } else if (!refs) {
+		//     refs = null;
+		//   }
+		//   if (refs == null) {
+		//     return null;
+		//   }
+		//   let table = refs.$refs.oneTableComponents;
+
+		//   if (Array.isArray(table)) {
+		//     table = table[0];
+		//   } else if (!table) {
+		//     table = null;
+		//   }
+
+		//   if (table == null) {
+		//     return null;
+		//   }
+		//   table.toggleRowExpansion(row, expanded);
+		// },
+
+		/**
+		 * 事件
+		 */
+		handleEvent(widget, type, item, event) {
+			this.$emit('onEvent', widget, type, item, event);
+		},
+		//文本输入框点击事件
+		inputClick(item) {
+			if (item) {
+				if (typeof item.click === 'function') {
+					item.click(item.field);
+				} else if (item.click) {
+					this.handleEvent('input', 'click', item);
+				}
+			}
+		},
+		//文本框清空事件
+		inputClear(item) {
+			if (item) {
+				if (typeof item.clear === 'function') {
+					item.clear(item.field);
+				} else if (item.clear) {
+					this.handleEvent('input', 'clear', item);
+				}
+			}
+		},
+		//规则校验
+		validate(callback) {
+			this.$refs[this.formName].validate(callback);
+		},
+		//规则校验
+		validateField(props, callback) {
+			this.$refs[this.formName].validateField(props, callback);
+		},
+		//移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+		clearValidate(props) {
+			if (props == undefined || !props) {
+				this.$refs[this.formName].clearValidate();
+			} else {
+				this.$refs[this.formName].clearValidate(props);
+			}
+		},
+		//对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+		resetFields() {
+			this.$refs[this.formName].resetFields();
+		},
+		//获取card样式
+		getCardClass(item) {
+
+			if (!item) {
+				return '';
+			}
+			let cardClass = this.getValue(item, 'cardClass', '');
+
+			if (this.getValue(item, 'cardBorder', 'show') == 'none') {
+				cardClass += ' one-no-border ';
+			}
+
+			return cardClass;
+		},
+		// 失去焦点事件
+		vueQuillEditorOnEditorBlur(item, event) {
+			this.handleEvent('vueQuillEditor', 'blur', item, event);
+		},
+		// 获得焦点事件
+		vueQuillEditorOnEditorFocus(item, event) {
+			this.handleEvent('vueQuillEditor', 'focus', item, event);
+		},
+		// 内容改变事件
+		vueQuillEditorOnEditorChange(item, event) {
+			this.handleEvent('vueQuillEditor', 'change', item, event);
+		},
+		//draggable add
+		handleWidgetAdd(evt, type, fieldItem, fieldIndex) {
+			this.$emit('draggable', 'add', evt, type, fieldItem, fieldIndex)
+		},
+		//draggable choose
+		handleChoose(evt, type, fieldItem, fieldIndex) {
+			return this.$emit('draggable', 'choose', evt, type, fieldItem, fieldIndex)
+		},
+		/**
+		 * 单元格数据变化
+		 * @param {Object} item
+		 */
+		handleFieldChange(item, val) {
+			this.$emit('field-change', item);
+		},
+		/**
+		 * 更新动态数据
+		 * @param {Object} name
+		 * @param {Object} value
+		 */
+		handleUpdateDynamicConfig(name, value) {
+			this.$set(this.dynamicConfig, name, value);
+		},
+		/**
+		 * 获取字段选项
+		 * @param {Object} field
+		 */
+		getOptions(field) {
+			let ref = this.$refs['refFormItem' + field];
+
+			if (ref) {
+				ref = Array.isArray(ref) ? ref[0] : ref;
+
+				return ref.getOptions();
+			}
+
+			return [];
+		},
+		/**
+		 * 获取选中名称
+		 * @param {Object} field
+		 */
+		getSelectName(field) {
+			let ref = this.$refs['refFormItem' + field];
+
+			if (ref) {
+				ref = Array.isArray(ref) ? ref[0] : ref;
+
+				return ref.getSelectName();
+			}
+
+			return [];
+		},
+
+	},
+}