custom-variant-form 2.3.1 → 2.3.3

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

@@ -1,313 +0,0 @@
-<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

@@ -1,331 +0,0 @@
-<!--
-/**
- * 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>