@lambo-design/variant-form 2.2.9-beta.0

package/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue

@@ -0,0 +1,313 @@
+<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="realUploadURL" :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="handleUploadError">
+      <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="" target="_blank">
+            <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, file.url, file.uid)"></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, evalFn} from "@/utils/util";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/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: [],
+        rules: [],
+
+        uploadHeaders: {},
+        uploadData: {
+          key: '',  //七牛云上传文件名
+          //token: '',  //七牛云上传token
+
+          //policy: '',  //又拍云上传policy
+          //authorization: '',  //又拍云上传签名
+        },
+        fileList: [],  //上传文件列表
+        uploadBtnHidden: false,
+
+        styleVariables: {
+          '--select-file-action': selectFileText,
+        },
+      }
+    },
+    computed: {
+      realUploadURL() {
+        let uploadURL = this.field.options.uploadURL
+        if (!!uploadURL && ((uploadURL.indexOf('DSV.') > -1) || (uploadURL.indexOf('DSV[') > -1))) {
+          let DSV = this.getGlobalDsv()
+          console.log('test DSV: ', DSV)  //防止DSV被打包工具优化！！！
+          return evalFn(this.field.options.uploadURL, DSV)
+        }
+
+        return this.field.options.uploadURL
+      },
+
+    },
+    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
+        this.$message.warning( this.i18nt('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit) )
+      },
+
+      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
+      },
+
+      updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, defaultResult) {
+        let oldValue = deepClone(this.fieldModel)
+        if (!!customResult && !!customResult.name && !!customResult.url) {
+          this.fieldModel.push({
+            name: customResult.name,
+            url: customResult.url
+          })
+        } else if (!!defaultResult && !!defaultResult.name && !!defaultResult.url) {
+          this.fieldModel.push({
+            name: defaultResult.name,
+            url: defaultResult.url
+          })
+        } else {
+          this.fieldModel = deepClone(fileList)
+        }
+
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+
+      handleFileUpload(res, file, fileList) {
+        if (file.status === 'success') {
+          let customResult = null
+          if (!!this.field.options.onUploadSuccess) {
+            let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+            customResult = mountFunc.call(this, res, file, fileList)
+          }
+
+          this.updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, res)
+          if (!!customResult && !!customResult.name) {
+            file.name = customResult.name
+          } else {
+            file.name = file.name || res.name || res.fileName || res.filename
+          }
+          if (!!customResult && !!customResult.url) {
+            file.url = customResult.url
+          } else {
+            file.url = file.url || res.url
+          }
+          this.fileList = deepClone(fileList)
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
+        }
+      },
+
+      updateFieldModelAndEmitDataChangeForRemove(deletedFileIdx, fileList) {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel.splice(deletedFileIdx, 1)
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+      removeUploadFile(fileName, fileUrl, fileUid) {
+        let foundIdx = -1
+        let foundFile = null
+        this.fileList.forEach((file, idx) => {
+          if ((file.name === fileName) && ((file.url === fileUrl) || (!!fileUid && file.uid === fileUid))) {
+            foundIdx = idx
+            foundFile = file
+          }
+        })
+
+        if (foundIdx >= 0) {
+          this.fileList.splice(foundIdx, 1)
+          this.updateFieldModelAndEmitDataChangeForRemove(foundIdx, 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)
+          }
+        }
+      },
+
+      handleUploadError(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: $--color-primary;
+    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: $--color-primary;
+      margin-left: 5px;
+      margin-right: 5px;
+      cursor: pointer;
+    }
+  }
+
+</style>

package/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -0,0 +1,331 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+    <el-form-item v-if="!!field.formItemFlag && (!field.options.hidden || (designState === true))"
+                  :label="label" :label-width="labelWidth + 'px'"
+                  :title="field.options.labelTooltip"
+                  :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) {
+          const fieldRefName = this.designer.selectedWidgetName
+          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)
+            this.designer.setSelected(nextSelected)
+
+            this.designer.formWidget.deleteWidgetRef(fieldRefName)  //删除组件ref！！！
+            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: $--color-primary;
+      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: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        color: #fff;
+        margin: 4px;
+        cursor: move;
+      }
+
+      &:hover {
+        //opacity: 1;
+        background: $--color-primary;
+      }
+    }
+  }
+
+  .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 $--color-primary;
+  }
+
+  ::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>