kh-one-ui 2.0.0

package/packages/one-ui-form/form-designer/form-widget/field-widget/file-upload-widget.vue

@@ -0,0 +1,301 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <!-- el-upload增加:name="field.options.name"后，会导致又拍云上传失败！故删除之！！ -->
+    <el-upload ref="fieldEditor" :disabled="field.options.disabled"
+               :style="styleVariables" class="dynamicPseudoAfter"
+               :action="uploadAction" :headers="uploadHeaders" :data="uploadData"
+               :with-credentials="field.options.withCredentials"
+               :multiple="field.options.multipleSelect" :file-list="fileList"
+               :show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}"
+               :limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload"
+               :on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove">
+      <div slot="tip" class="el-upload__tip"
+           v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
+      <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
+      <template #file="{ file }">
+        <div class="upload-file-list">
+          <span class="upload-file-name" :title="file.name">{{file.name}}</span>
+          <a :href="file.url" download="">
+            <i class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')"></i></a>
+          <i class="el-icon-delete file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+             @click="removeUploadFile(file.name)"></i>
+        </div>
+      </template>
+    </el-upload>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from '../../../utils/emitter'
+  import i18n, {translate} from "../../../utils/i18n";
+  import {deepClone} from "../../../utils/util";
+  import fieldMixin from "./fieldMixin";
+
+  let selectFileText = "'" + translate('render.hint.selectFile') + "'"
+
+  export default {
+    name: "file-upload-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+        fileList: [],  //上传文件列表
+        uploadBtnHidden: false,
+
+        styleVariables: {
+          '--select-file-action': selectFileText,
+        },
+      }
+    },
+    computed: {
+		uploadAction() {
+			let url = this.$oneUrl.getApiUrl(this.field.options.uploadURL);
+			
+			return url;
+		},
+		uploadHeaders() {
+			
+			let uploadHeaders = this.field.options.uploadHeaders;
+			
+			if (uploadHeaders) {
+				try{
+					uploadHeaders = JSON.parse(uploadHeaders);
+				} catch(e) {
+				}
+			}
+			uploadHeaders = uploadHeaders || {};
+			uploadHeaders.token = this.$oneStorage.getToken();
+			uploadHeaders.version = '1.0.0';
+			uploadHeaders.timeStamp = '';
+			uploadHeaders.sign = '';
+			
+			return uploadHeaders;
+		},
+		uploadData() {
+			let uploadData = {};
+			
+			return uploadData;
+		}
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+      handleFileExceed() {
+        let uploadLimit = this.field.options.limit  /* 此行不能注释，下一行ES6模板字符串需要用到！！ */
+        this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
+      },
+
+      updateUploadFieldModelAndEmitDataChange(fileList) {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel = deepClone(fileList)
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+      beforeFileUpload(file) {
+        let fileTypeCheckResult = false
+        let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1)
+        if (!!this.field.options && !!this.field.options.fileTypes) {
+          let uploadFileTypes = this.field.options.fileTypes
+          if (uploadFileTypes.length > 0) {
+            fileTypeCheckResult = uploadFileTypes.some( (ft) => {
+              return extFileName.toLowerCase() === ft.toLowerCase()
+            })
+          }
+        }
+        if (!fileTypeCheckResult) {
+          this.$message.error(this.i18nt('render.hint.unsupportedFileType') + extFileName)
+          return false;
+        }
+
+        let fileSizeCheckResult = false
+        let uploadFileMaxSize = 5  //5MB
+        if (!!this.field.options && !!this.field.options.fileMaxSize) {
+          uploadFileMaxSize = this.field.options.fileMaxSize
+        }
+        fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
+        if (!fileSizeCheckResult) {
+          this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
+          return false;
+        }
+
+        this.uploadData.key = file.name
+        return this.handleOnBeforeUpload(file)
+      },
+
+      handleOnBeforeUpload(file) {
+        if (!!this.field.options.onBeforeUpload) {
+          let bfFunc = new Function('file', this.field.options.onBeforeUpload)
+          let result = bfFunc.call(this, file)
+          if (typeof result === 'boolean') {
+            return result
+          } else {
+            return true
+          }
+        }
+
+        return true
+      },
+
+      handleFileUpload(res, file, fileList) {
+        if (file.status === 'success') {
+          //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
+          this.updateUploadFieldModelAndEmitDataChange(fileList)
+          this.fileList = deepClone(fileList)
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
+
+          if (!!this.field.options.onUploadSuccess) {
+            let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+            mountFunc.call(this, res, file, fileList)
+          }
+        }
+      },
+
+      handleFileRemove(file, fileList) {
+        this.fileList = deepClone(fileList)  //this.fileList = fileList
+        this.updateUploadFieldModelAndEmitDataChange(fileList)
+        this.uploadBtnHidden = fileList.length >= this.field.options.limit
+
+        if (!!this.field.options.onFileRemove) {
+          let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
+          customFn.call(this, file, fileList)
+        }
+      },
+
+      removeUploadFile(fileName) {
+        let foundIdx = -1
+        let foundFile = null
+        this.fileList.forEach((file, idx) => {
+          if (file.name === fileName) {
+            foundIdx = idx
+            foundFile = file
+          }
+        })
+
+        if (foundIdx >= 0) {
+          this.fileList.splice(foundIdx, 1)
+          this.updateUploadFieldModelAndEmitDataChange(this.fileList)
+          this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
+
+          if (!!this.field.options.onFileRemove) {
+            let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
+            customFn.call(this, foundFile, this.fileList)
+          }
+        }
+      },
+
+      handelUploadError(err, file, fileList) {
+        if (!!this.field.options.onUploadError) {
+          let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
+          customFn.call(this, err, file, fileList)
+        } else {
+          this.$message({
+            message: this.i18nt('render.hint.uploadError') + err,
+            duration: 3000,
+            type: 'error',
+          })
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+  .dynamicPseudoAfter ::v-deep .el-upload.el-upload--text {
+    color: #409EFF;
+    font-size: 12px;
+    .el-icon-plus:after {
+      content: var(--select-file-action);
+    }
+  }
+
+  .hideUploadDiv {
+    ::v-deep div.el-upload--picture-card { /* 隐藏最后的图片上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload--text { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload__tip { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+  }
+
+  .upload-file-list {
+    font-size: 12px;
+
+    .file-action {
+      color: #409EFF;
+      margin-left: 5px;
+      margin-right: 5px;
+      cursor: pointer;
+    }
+  }
+
+</style>

package/packages/one-ui-form/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -0,0 +1,329 @@
+<template>
+	<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+		<el-form-item v-if="!!field.formItemFlag" :label="label" :label-width="labelWidth + 'px'"
+			:title="field.options.labelTooltip" v-show="!field.options.hidden || (designState === true)" :rules="rules"
+			:prop="getPropName()"
+			:class="[selected ? 'selected' : '', labelAlign, customClass, field.options.required ? 'required' : '']"
+			@click.native.stop="selectField(field)">
+
+			<span v-if="!!field.options.labelIconClass" slot="label" class="custom-label">
+				<template v-if="field.options.labelIconPosition === 'front'">
+					<template v-if="!!field.options.labelTooltip">
+						<el-tooltip :content="field.options.labelTooltip" effect="light">
+							<i :class="field.options.labelIconClass"></i>
+						</el-tooltip>{{label}}
+					</template>
+					<template v-else>
+						<i :class="field.options.labelIconClass"></i>{{label}}</template>
+				</template>
+				<template v-else-if="field.options.labelIconPosition === 'rear'">
+					<template v-if="!!field.options.labelTooltip">
+						{{label}}
+						<el-tooltip :content="field.options.labelTooltip" effect="light">
+							<i :class="field.options.labelIconClass"></i>
+						</el-tooltip>
+					</template>
+					<template v-else>
+						{{label}}<i :class="field.options.labelIconClass"></i></template>
+				</template>
+			</span>
+			<slot></slot>
+		</el-form-item>
+
+		<template v-if="!!this.designer">
+			<div class="field-action" v-if="designer.selectedId === field.id">
+				<i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
+					@click.stop="selectParentWidget(field)"></i>
+				<i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)"
+					:title="i18nt('designer.hint.moveUpWidget')" @click.stop="moveUpWidget(field)"></i>
+				<i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)"
+					:title="i18nt('designer.hint.moveDownWidget')" @click.stop="moveDownWidget(field)"></i>
+				<i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
+			</div>
+
+			<div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
+				<i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
+				<i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
+				<i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
+	import i18n from "../../../utils/i18n";
+
+	export default {
+		name: "form-item-wrapper",
+		mixins: [i18n],
+		props: {
+			field: Object,
+			designer: Object,
+			parentWidget: Object,
+			parentList: Array,
+			indexOfParentList: Number,
+
+			designState: {
+				type: Boolean,
+				default: false
+			},
+
+			subFormRowIndex: {
+				/* 子表单组件行索引，从0开始计数 */
+				type: Number,
+				default: -1
+			},
+			subFormColIndex: {
+				/* 子表单组件列索引，从0开始计数 */
+				type: Number,
+				default: -1
+			},
+			subFormRowId: {
+				/* 子表单组件行Id，唯一id且不可变 */
+				type: String,
+				default: ''
+			},
+
+			rules: Array,
+		},
+		inject: ['formConfig'],
+		computed: {
+			selected() {
+				return !!this.designer && this.field.id === this.designer.selectedId
+			},
+
+			label() {
+				if (!!this.field.options.labelHidden) {
+					return ''
+				}
+
+				return this.field.options.label
+			},
+
+			labelWidth() {
+				if (!!this.field.options.labelHidden) {
+					return !!this.designState ? 5 : 0 //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
+				}
+
+				if (!!this.field.options.labelWidth) {
+					return this.field.options.labelWidth
+				}
+
+				if (!!this.designer) {
+					return this.designer.formConfig.labelWidth
+				} else {
+					return this.formConfig.labelWidth
+				}
+			},
+
+			labelAlign() {
+				if (!!this.field.options.labelAlign) {
+					return this.field.options.labelAlign
+				}
+
+				if (!!this.designer) {
+					return this.designer.formConfig.labelAlign || 'label-left-align'
+				} else {
+					return this.formConfig.labelAlign || 'label-left-align'
+				}
+			},
+
+			customClass() {
+				return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
+			},
+
+			subFormName() {
+				return !!this.parentWidget ? this.parentWidget.options.name : ''
+			},
+
+			subFormItemFlag() {
+				return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
+			},
+
+		},
+		created() {
+			//
+		},
+		methods: {
+			selectField(field) {
+				if (!!this.designer) {
+					this.designer.setSelected(field)
+					this.designer.emitEvent('field-selected', this.parentWidget) //发送选中组件的父组件对象
+				}
+			},
+
+			selectParentWidget() {
+				if (this.parentWidget) {
+					this.designer.setSelected(this.parentWidget)
+				} else {
+					this.designer.clearSelected()
+				}
+			},
+
+			moveUpWidget() {
+				this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
+				this.designer.emitHistoryChange()
+			},
+
+			moveDownWidget() {
+				this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
+				this.designer.emitHistoryChange()
+			},
+
+			removeFieldWidget() {
+				if (!!this.parentList) {
+					let nextSelected = null
+					if (this.parentList.length === 1) {
+						if (!!this.parentWidget) {
+							nextSelected = this.parentWidget
+						}
+					} else if (this.parentList.length === (1 + this.indexOfParentList)) {
+						nextSelected = this.parentList[this.indexOfParentList - 1]
+					} else {
+						nextSelected = this.parentList[this.indexOfParentList + 1]
+					}
+
+					this.$nextTick(() => {
+						this.parentList.splice(this.indexOfParentList, 1)
+						//if (!!nextSelected) {
+						this.designer.setSelected(nextSelected)
+						//}
+
+						this.designer.emitHistoryChange()
+					})
+				}
+			},
+
+			getPropName() {
+				if (this.subFormItemFlag && !this.designState) {
+					return this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name + ""
+				} else {
+					return this.field.options.name
+				}
+			},
+
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../../styles/global.scss";
+
+	.design-time-bottom-margin {
+		margin-bottom: 5px;
+	}
+
+	.field-wrapper {
+		position: relative;
+
+		.field-action {
+			position: absolute;
+			//bottom: -24px;
+			bottom: 0;
+			right: -2px;
+			height: 22px;
+			line-height: 22px;
+			background: #409EFF;
+			z-index: 9;
+
+			i {
+				font-size: 14px;
+				color: #fff;
+				margin: 0 5px;
+				cursor: pointer;
+			}
+		}
+
+		.drag-handler {
+			position: absolute;
+			top: 0;
+			//bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
+			left: -1px;
+			height: 20px;
+			line-height: 20px;
+			//background: #409EFF;
+			z-index: 9;
+
+			i {
+				font-size: 12px;
+				font-style: normal;
+				color: #fff;
+				margin: 4px;
+				cursor: move;
+			}
+
+			&:hover {
+				//opacity: 1;
+				background: #409EFF;
+			}
+		}
+	}
+
+	.el-form-item {
+		//margin-bottom: 0 !important;
+		//margin-bottom: 6px;
+
+		//margin-top: 2px;
+		position: relative;
+
+		::v-deep .el-form-item__label {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		::v-deep .el-form-item__content {
+			//position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
+		}
+
+		span.custom-label i {
+			margin: 0 3px;
+		}
+
+		/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
+		::v-deep .hide-spin-button input::-webkit-outer-spin-button,
+		::v-deep .hide-spin-button input::-webkit-inner-spin-button {
+			-webkit-appearance: none !important;
+		}
+
+		/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
+		::v-deep .hide-spin-button input[type="number"] {
+			-moz-appearance: textfield;
+		}
+	}
+
+	.required ::v-deep .el-form-item__label::before {
+		content: '*';
+		color: #F56C6C;
+		margin-right: 4px;
+	}
+
+	.static-content-item {
+		min-height: 20px;
+		display: flex;
+		/* 垂直居中 */
+		align-items: center;
+		/* 垂直居中 */
+
+		::v-deep .el-divider--horizontal {
+			margin: 0;
+		}
+	}
+
+	.el-form-item.selected,
+	.static-content-item.selected {
+		outline: 2px solid #409EFF;
+	}
+
+	::v-deep .label-left-align .el-form-item__label {
+		text-align: left;
+	}
+
+	::v-deep .label-center-align .el-form-item__label {
+		text-align: center;
+	}
+
+	::v-deep .label-right-align .el-form-item__label {
+		text-align: right;
+	}
+</style>

package/packages/one-ui-form/form-designer/form-widget/field-widget/html-text-widget.vue

@@ -0,0 +1,82 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <div ref="fieldEditor" v-html="field.options.htmlContent"></div>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from '../../../utils/emitter'
+  import i18n, {translate} from "../../../utils/i18n";
+  import fieldMixin from "./fieldMixin";
+
+  export default {
+    name: "html-text-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>