kh-one-ui 2.0.0

package/packages/one-ui-form/form-designer/index.vue

@@ -0,0 +1,492 @@
+<template>
+	<el-container class="one-form-designer-main-container full-height">
+		<el-container>
+			<el-aside class="side-panel">
+				<widget-panel :designer="designer" :formTemplates="formTemplates" />
+			</el-aside>
+			<el-container class="center-layout-container">
+				<el-header class="toolbar-header">
+					<toolbar-panel :designer="designer" ref="toolbarRef">
+						<template v-for="(idx, slotName) in $slots" #[slotName]>
+							<slot :name="slotName"></slot>
+						</template>
+					</toolbar-panel>
+				</el-header>
+				<el-main class="form-widget-main">
+					<el-scrollbar class="container-scroll-bar" :style="{height: scrollerHeight}">
+						<o-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef">
+						</o-form-widget>
+					</el-scrollbar>
+				</el-main>
+			</el-container>
+			<el-aside>
+				<setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
+					:form-config="designer.formConfig" />
+			</el-aside>
+		</el-container>
+	</el-container>
+</template>
+
+<script>
+	import WidgetPanel from './widget-panel/index.vue'
+	import ToolbarPanel from './toolbar-panel/index.vue'
+	import SettingPanel from './setting-panel/index.vue'
+	import OFormWidget from './form-widget/index.vue'
+	import {
+		createDesigner
+	} from "./designer"
+	import {
+		addWindowResizeHandler,
+		deepClone,
+		getAllContainerWidgets,
+		getAllFieldWidgets,
+		getQueryParam,
+		traverseAllWidgets
+	} from "../utils/util"
+	import {
+		MOCK_CASE_URL,
+		ONE_UI_FORM_VERSION
+	} from "../utils/config"
+	import i18n, {
+		changeLocale
+	} from "../utils/i18n"
+	import axios from "axios"
+
+	export default {
+		name: "OFormDesigner",
+		componentName: "OFormDesigner",
+		mixins: [i18n],
+		components: {
+			WidgetPanel,
+			ToolbarPanel,
+			SettingPanel,
+			OFormWidget,
+		},
+		props: {
+			/* 模板 */
+			formTemplates: {
+				type: Array,
+				default: () => []
+			},
+			/* 后端字段列表API */
+			fieldListApi: {
+				type: Object,
+				default: null,
+			},
+			/* 禁止显示的组件名称数组 */
+			bannedWidgets: {
+				type: Array,
+				default: () => []
+			},
+			designerConfig: {
+				type: Object,
+				default: () => {
+					return {
+						languageMenu: true, //是否显示语言切换菜单
+						externalLink: true, //是否显示GitHub、文档等外部链接
+						formTemplates: true, //是否显示表单模板
+						eventCollapse: true, //是否显示组件事件属性折叠面板
+						widgetNameReadonly: false, //禁止修改组件名称
+
+						clearDesignerButton: true, //是否显示清空设计器按钮
+						previewFormButton: true, //是否显示预览表单按钮
+						importJsonButton: true, //是否显示导入JSON按钮
+						exportJsonButton: true, //是否显示导出JSON器按钮
+						exportCodeButton: true, //是否显示导出代码按钮
+						generateSFCButton: false, //是否显示生成SFC按钮
+						toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
+						toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
+
+						presetCssCode: '', //设计器预设CSS样式代码
+
+						resetFormJson: false, //是否在设计器初始化时将表单内容重置为空
+					}
+				}
+			},
+
+		},
+		data() {
+			return {
+				vFormVersion: ONE_UI_FORM_VERSION,
+				curLangName: '',
+
+				vsCodeFlag: false,
+				caseName: '',
+
+				scrollerHeight: 0,
+
+				designer: createDesigner(this),
+
+				fieldList: []
+			}
+		},
+		provide() {
+			return {
+				serverFieldList: this.fieldList,
+				getDesignerConfig: () => this.designerConfig,
+				getBannedWidgets: () => this.bannedWidgets,
+			}
+		},
+		created() {
+			this.vsCodeFlag = getQueryParam('vscode') == 1
+			this.caseName = getQueryParam('case')
+		},
+		mounted() {
+			this.initLocale()
+
+			this.scrollerHeight = window.innerHeight - 56 - 36 + 'px'
+			addWindowResizeHandler(() => {
+				this.$nextTick(() => {
+					this.scrollerHeight = window.innerHeight - 56 - 36 + 'px'
+				})
+			})
+
+			this.loadCase()
+
+			this.loadFieldListFromServer()
+		},
+		methods: {
+			/**
+			 * @param {Object} configName
+			 */
+			showLink(configName) {
+				if (this.designerConfig[configName] === undefined) {
+					return true
+				}
+
+				return !!this.designerConfig[configName]
+			},
+			// openUrl(event, url) {
+			// 	if (!!this.vsCodeFlag) {
+			// 		const msgObj = {
+			// 			cmd: 'openUrl',
+			// 			data: {
+			// 				url
+			// 			}
+			// 		}
+			// 		window.parent.postMessage(msgObj, '*')
+			// 	} else {
+			// 		let aDom = event.currentTarget
+			// 		aDom.href = url
+			// 		//window.open(url, '_blank') //直接打开新窗口，会被浏览器拦截
+			// 	}
+			// },
+			/**
+			 * 
+			 */
+			loadCase() {
+				if (!this.caseName) {
+					return
+				}
+
+				axios.get(MOCK_CASE_URL + this.caseName + '.txt').then(res => {
+					if (!!res.data.code) {
+						this.$message.error(this.i18nt('designer.hint.sampleLoadedFail'))
+						return
+					}
+
+					this.setFormJson(res.data)
+					this.$message.success(this.i18nt('designer.hint.sampleLoadedSuccess'))
+				}).catch(error => {
+					this.$message.error(this.i18nt('designer.hint.sampleLoadedFail') + ':' + error)
+				})
+			},
+			/**
+			 * 
+			 */
+			initLocale() {
+				let curLocale = localStorage.getItem('v_form_locale')
+				if (!!this.vsCodeFlag) {
+					curLocale = curLocale || 'en-US'
+				} else {
+					curLocale = curLocale || 'zh-CN'
+				}
+				this.curLangName = this.i18nt('application.' + curLocale)
+				this.changeLanguage(curLocale)
+			},
+			/**
+			 * 
+			 */
+			loadFieldListFromServer() {
+				if (!this.fieldListApi) {
+					return
+				}
+
+				if (this.fieldListApi.URL) {
+					let headers = this.fieldListApi.headers || {}
+					let params = this.fieldListApi.params || {}
+					let method = this.fieldListApi.method || 'POST';
+					this.$oneRequest({
+						url: this.fieldListApi.URL,
+						method: method,
+						showLoading: true,
+						showNotice: true,
+						data: params,
+						customHeaders: this.fieldListApi.headers || {}
+					}).then(body => {
+						let labelKey = this.fieldListApi.labelKey || 'label'
+						let nameKey = this.fieldListApi.nameKey || 'name'
+
+						this.fieldList.splice(0, this.fieldList.length) //清空已有
+						body.forEach(fieldItem => {
+							this.fieldList.push({
+								label: fieldItem[labelKey],
+								name: fieldItem[nameKey]
+							})
+						})
+					})
+				} else if (this.fieldListApi.func && typeof this.fieldListApi.func == 'function') {
+					let data = this.fieldListApi.func() || [];
+
+					let labelKey = this.fieldListApi.labelKey || 'label'
+					let nameKey = this.fieldListApi.nameKey || 'name'
+
+					this.fieldList.splice(0, this.fieldList.length) //清空已有
+					data.forEach(fieldItem => {
+						this.fieldList.push({
+							label: fieldItem[labelKey],
+							name: fieldItem[nameKey]
+						})
+					})
+				}
+			},
+			/**
+			 * @param {Object} command
+			 */
+			handleLanguageChanged(command) {
+				this.changeLanguage(command)
+				this.curLangName = this.i18nt('application.' + command)
+			},
+			/**
+			 * @param {Object} langName
+			 */
+			changeLanguage(langName) {
+				changeLocale(langName)
+			},
+			/**
+			 * @param {Object} formJson
+			 */
+			setFormJson(formJson) {
+				let modifiedFlag = false
+				if (!!formJson) {
+					if (typeof formJson === 'string') {
+						modifiedFlag = this.designer.loadFormJson(JSON.parse(formJson))
+					} else if (formJson.constructor === Object) {
+						modifiedFlag = this.designer.loadFormJson(formJson)
+					}
+
+					if (modifiedFlag) {
+						this.designer.emitHistoryChange()
+					}
+				}
+			},
+			/**
+			 * 
+			 */
+			getFormJson() {
+				return {
+					widgetList: deepClone(this.designer.widgetList),
+					formConfig: deepClone(this.designer.formConfig)
+				}
+			},
+			/**
+			 * 
+			 */
+			clearDesigner() {
+				this.$refs.toolbarRef.clearFormWidget()
+			},
+			/**
+			 * 刷新表单设计器
+			 */
+			refreshDesigner() {
+				//this.designer.loadFormJson( this.getFormJson() )  //只有第一次调用生效？？
+
+				let fJson = this.getFormJson()
+				this.designer.clearDesigner(true) //不触发历史记录变更
+				this.designer.loadFormJson(fJson)
+			},
+			/**
+			 * 预览表单
+			 */
+			previewForm() {
+				this.$refs.toolbarRef.previewForm()
+			},
+
+			/**
+			 * 导入表单JSON
+			 */
+			importJson() {
+				this.$refs.toolbarRef.importJson()
+			},
+
+			/**
+			 * 导出表单JSON
+			 */
+			exportJson() {
+				this.$refs.toolbarRef.exportJson()
+			},
+
+			/**
+			 * 导出Vue/HTML代码
+			 */
+			exportCode() {
+				this.$refs.toolbarRef.exportCode()
+			},
+			/**
+			 * 生成SFC代码
+			 */
+			generateSFC() {
+				this.$refs.toolbarRef.generateSFC()
+			},
+
+			/**
+			 * 获取所有字段组件
+			 * @returns {*[]}
+			 */
+			getFieldWidgets(widgetList = null) {
+				return !!widgetList ? getAllFieldWidgets(widgetList) : getAllFieldWidgets(this.designer.widgetList)
+			},
+
+			/**
+			 * 获取所有容器组件
+			 * @returns {*[]}
+			 */
+			getContainerWidgets(widgetList = null) {
+				return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
+			},
+
+			/**
+			 * 升级表单json，以补充最新的组件属性
+			 * @param formJson
+			 */
+			upgradeFormJson(formJson) {
+				if (!formJson.widgetList || !formJson.formConfig) {
+					this.$message.error('Invalid form json!')
+					return
+				}
+
+				traverseAllWidgets(formJson.widgetList, (w) => {
+					this.designer.upgradeWidgetConfig(w)
+				})
+				this.designer.upgradeFormConfig(formJson.formConfig)
+
+				return formJson
+			},
+
+			getWidgetRef(widgetName, showError = false) {
+				return this.$refs['formRef'].getWidgetRef(widgetName, showError)
+			},
+
+			getSelectedWidgetRef() {
+				return this.$refs['formRef'].getSelectedWidgetRef()
+			},
+
+			//TODO: 增加更多方法！！
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.el-container.one-form-designer-main-container {
+		background: #fff;
+
+		::v-deep aside {
+			/* 防止aside样式被外部样式覆盖！！ */
+			margin: 0;
+			padding: 0;
+			background: inherit;
+		}
+	}
+
+	.el-container.full-height {
+		height: 100%;
+		overflow-y: hidden;
+	}
+
+	.el-container.center-layout-container {
+		min-width: 680px;
+		border-left: 2px dotted #EBEEF5;
+		border-right: 2px dotted #EBEEF5;
+	}
+
+	.el-header.main-header {
+		border-bottom: 2px dotted #EBEEF5;
+		height: 48px !important;
+		line-height: 48px !important;
+		min-width: 800px;
+	}
+
+	div.main-title {
+		font-size: 18px;
+		color: #242424;
+		display: flex;
+		align-items: center;
+		justify-items: center;
+
+		img {
+			cursor: pointer;
+			width: 36px;
+			height: 36px;
+		}
+
+		span.bold {
+			font-size: 20px;
+			font-weight: bold;
+			margin: 0 6px 0 6px;
+		}
+
+		span.version-span {
+			font-size: 14px;
+			color: #101F1C;
+			margin-left: 6px;
+		}
+	}
+
+	.float-left {
+		float: left;
+	}
+
+	.float-right {
+		float: right;
+	}
+
+	.el-dropdown-link {
+		margin-right: 12px;
+		cursor: pointer;
+	}
+
+	div.external-link a {
+		font-size: 13px;
+		text-decoration: none;
+		margin-right: 10px;
+		color: #606266;
+	}
+
+	.el-header.toolbar-header {
+		font-size: 14px;
+		border-bottom: 1px dotted #CCCCCC;
+		height: 42px !important;
+		//line-height: 42px !important;
+	}
+
+	.el-aside.side-panel {
+		width: 260px !important;
+		overflow-y: hidden;
+	}
+
+	.el-main.form-widget-main {
+		padding: 0;
+
+		position: relative;
+		overflow-x: hidden;
+	}
+
+	.container-scroll-bar {
+
+		::v-deep .el-scrollbar__wrap,
+		::v-deep .el-scrollbar__view {
+			overflow-x: hidden;
+		}
+	}
+</style>

package/packages/one-ui-form/form-designer/refMixinDesign.js

@@ -0,0 +1,31 @@
+export default {
+	data() {
+		return {
+			refList: {}
+		}
+	},
+	methods: {
+		initRefList() {
+			if ((this.refList !== null) && this.widget && this.widget.options && !!this.widget.options.name) {
+				this.refList[this.widget.options.name] = this
+			}
+		},
+		getWidgetRef(widgetName, showError = false) {
+			let foundRef = this.refList[widgetName]
+			if (!foundRef && !!showError) {
+				this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
+			}
+			return foundRef
+		},
+		/* 该方法用于组件重名检查！！ */
+		registerToRefList(oldRefName) {
+			if ((this.refList !== null) && !!this.widget.options.name) {
+				if (!!oldRefName) {
+					delete this.refList[oldRefName]
+				}
+				this.refList[this.widget.options.name] = this
+			}
+		},
+
+	}
+}

package/packages/one-ui-form/form-designer/setting-panel/field-setting/editor/color-editor.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-form-item>
+	  <span slot="label">{{i18nt(settingConfig.label)}}
+	  	<el-tooltip v-if="settingConfig.tips" effect="light" :content="i18nt(settingConfig.tips)">
+	  		<i class="el-icon-info"></i>
+	  	</el-tooltip>
+	  </span>
+    <el-color-picker v-model="optionModel[settingConfig.field]"></el-color-picker>
+  </el-form-item>
+</template>
+
+<script>
+  import FieldMixin from '../mixins/field-mixin.js';
+  
+   export default {
+     mixins: [FieldMixin],
+   }
+</script>
+
+<style scoped>
+
+</style>

package/packages/one-ui-form/form-designer/setting-panel/field-setting/editor/customClass-editor.vue

@@ -0,0 +1,39 @@
+<template>
+	<el-form-item :label="i18nt('designer.setting.customClass')">
+		<el-select v-model="optionModel.customClass" multiple filterable allow-create default-first-option>
+			<el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+		</el-select>
+	</el-form-item>
+</template>
+
+<script>
+	import FieldMixin from '../mixins/field-mixin.js';
+	import {
+		deepClone
+	} from "../../../../utils/util";
+
+	export default {
+		mixins: [FieldMixin],
+		props: {
+			designer: Object,
+			selectedWidget: Object,
+			optionModel: Object,
+		},
+		data() {
+			return {
+				cssClassList: [],
+			}
+		},
+		created() {
+			this.cssClassList = deepClone(this.designer.getCssClassList())
+			//监听表单css代码改动事件并重新加载！
+			this.designer.handleEvent('form-css-updated', (cssClassList) => {
+				this.cssClassList = cssClassList
+			})
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

package/packages/one-ui-form/form-designer/setting-panel/field-setting/editor/defaultValue-editor.vue

@@ -0,0 +1,19 @@
+<template>
+	<el-form-item :label="i18nt('designer.setting.defaultValue')">
+		<el-input v-if="!hasConfig('optionItems')" type="text" v-model="optionModel.defaultValue"
+			@change="emitDefaultValueChange"></el-input>
+	</el-form-item>
+</template>
+
+<script>
+	import FieldMixin from '../mixins/field-mixin.js';
+
+	export default {
+		name: "defaultValue-editor",
+		mixins: [FieldMixin],
+	}
+</script>
+
+<style scoped>
+
+</style>

package/packages/one-ui-form/form-designer/setting-panel/field-setting/editor/event-editor.vue

@@ -0,0 +1,41 @@
+<template>
+	<el-form-item label-width="150px">
+		<span slot="label">{{i18nt(settingConfig.label)}}
+			<el-tooltip v-if="settingConfig.tips" effect="light" :content="i18nt(settingConfig.tips)">
+				<i class="el-icon-info"></i>
+			</el-tooltip>
+		</span>
+		
+		<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler(settingConfig.field, settingConfig.eventParams || [])">
+			{{i18nt('designer.setting.addEventHandler')}}
+		</el-button>
+	</el-form-item>
+</template>
+
+<script>
+	import emitter from '../../../../utils/emitter'
+	import FieldMixin from '../mixins/field-mixin.js';
+
+	export default {
+		mixins: [FieldMixin, emitter],
+		props: {
+			designer: Object,
+			selectedWidget: Object,
+			optionModel: Object,
+		},
+		data() {
+			return {
+				eventParams: [],
+			}
+		},
+		methods: {
+			editEventHandler(eventName, eventParams) {
+				this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

package/packages/one-ui-form/form-designer/setting-panel/field-setting/editor/grid-col-span-editor.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.colSpanTitle')" v-if="!optionModel.responsive">
+      <el-input-number v-model.number="optionModel.span" :min="1" :max="24"
+                       style="width: 100%"></el-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(PC)'"
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'PC')">
+      <el-input-number v-model.number="optionModel.md" :min="1" :max="24"
+                       style="width: 100%"></el-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(Pad)'"
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'Pad')">
+      <el-input-number v-model.number="optionModel.sm" :min="1" :max="24"
+                       style="width: 100%"></el-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(H5)'"
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'H5')">
+      <el-input-number v-model.number="optionModel.xs" :min="1" :max="24"
+                       style="width: 100%"></el-input-number>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import FieldMixin from '../mixins/field-mixin.js';
+  
+  export default {
+  	mixins: [FieldMixin],
+    computed: {
+      formConfig() {
+        return this.designer.formConfig
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>