swordpass-ui 1.0.0

package/packages/File/src/main.vue

@@ -0,0 +1,467 @@
+<template>
+  <div
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+    :style="inputsContainerWidth"
+  >
+    <input
+      v-model="value"
+      v-validate="inputValidate"
+      type="hidden"
+      :name="inputName"
+    />
+    <file-upload
+      v-if="inputWriteable"
+      ref="fileUpload"
+      v-model="inputVal"
+      :list-type="pictureWall ? 'picture-card' : null"
+      :action-url="actionUrlVal"
+      :multiple="multiple"
+      :accept="acceptType"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="onError"
+      :limit="limit"
+      :header="headerVal"
+      :size="size"
+      :readonly="!inputWriteable"
+      :with-credentials="withCredentials"
+      @on-progress="handleProgress"
+      @handle-error="handleError"
+      @clear="handleClear"
+    >
+      <slot slot="append" name="append"></slot>
+    </file-upload>
+    <div v-if="isMobile && inputWriteable" class="upload-tooltip">
+      支持{{ acceptType ? acceptType : '所有' }}格式，文件大小不超过{{
+        size ? size : '50MB'
+      }}，文件个数不超过{{ limit ? limit : 5 }}个
+    </div>
+    <cl-field-tail
+      :writeable.sync="writeable"
+      :field-name="inputName"
+      :input-value="value"
+    />
+    <!-- 表格模式显示附件 -->
+    <file-table
+      v-if="typeVal == 'table' && value"
+      :data="inputVal"
+      :permission="permission_sub"
+      :size="sizeType"
+      :previewable="previewableVal"
+      :column-show="columnShow"
+      :prop-conf="propConf"
+      :downloadable="downloadableVal"
+      :sortable="sortable"
+      :input-writeable="inputWriteable"
+      @preview="preview"
+      @download="download"
+      @move="move"
+      @remove="removeFile"
+    />
+    <!-- 极简列表模式显示附件 -->
+    <file-list
+      v-else-if="typeVal == 'list'"
+      :data="inputVal"
+      :previewable="previewableVal"
+      :downloadable="downloadableVal"
+      :sortable="sortable"
+      :input-writeable="inputWriteable"
+      @preview="preview"
+      @download="download"
+      @move="move"
+      @remove="removeFile"
+      @sort="handleSort"
+    />
+    <!-- 图片墙模式 -->
+    <file-card
+      v-else-if="typeVal == 'card'"
+      :data="inputVal"
+      :previewable="previewableVal"
+      :downloadable="downloadableVal"
+      :sortable="sortable"
+      :input-writeable="inputWriteable"
+      :headers="headerVal"
+      :action-url="actionUrlVal"
+      :card-badge="cardBadge"
+      :thumbnail="thumbnail"
+      @preview="preview"
+      @download="download"
+      @move="move"
+      @remove="removeFile"
+      @sort="handleSort"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import ClFieldTail from '../../FieldTail/index'
+  import FileUpload from '../../FileUpload/index'
+  import Locale from '@/mixins/locale'
+  import FileTable from './FileTable'
+  import FileList from './FileList'
+  import FileCard from './FileCard.vue'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import _ from 'lodash'
+  const { saveAs } = require('file-saver')
+
+  export default {
+    name: 'ClFile',
+    components: { ClFieldTail, FileUpload, FileTable, FileList, FileCard },
+    mixins: [Locale, permission, inputName, form, mobileMode],
+    props: {
+      type: {
+        type: String,
+        default: 'table',
+        validator: function(value) {
+          return ['table', 'list', 'card'].indexOf(value) !== -1
+        },
+      },
+      isSimple: {
+        type: Boolean,
+        default: false,
+      },
+      simplicity: {
+        type: Boolean,
+        default: false,
+      },
+      withCredentials: {
+        type: Boolean,
+        default: false,
+      },
+      actionUrl: {
+        type: String,
+        default: null,
+      },
+      value: {
+        type: String,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      accept: {
+        type: String,
+      },
+      limit: {
+        type: Number,
+      },
+      pictureWall: {
+        type: Boolean,
+        default: false,
+      },
+      header: {
+        type: Object,
+      },
+      size: {
+        type: Number,
+      },
+      sizeType: {
+        type: String,
+      },
+      previewable: {
+        type: Boolean,
+        default: true,
+      },
+      allowPreview: {
+        type: Boolean,
+        default: true,
+      },
+      downloadable: {
+        type: Boolean,
+        default: true,
+      },
+      allowDownload: {
+        type: Boolean,
+        default: true,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+      propConf: [Array, String],
+      beforeUpload: {
+        type: Function,
+      },
+      onSuccess: {
+        type: Function,
+      },
+      onError: {
+        type: Function,
+      },
+      columnShow: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+      cardBadge: {
+        type: Boolean,
+        default: true,
+      },
+      thumbnail: {
+        type: Function,
+      },
+      flowData: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        writeable: true,
+        temp: null,
+        refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 200),
+        inputVal: [],
+      }
+    },
+    computed: {
+      typeVal: function() {
+        return this.isSimple || this.simplicity ? 'list' : this.type
+      },
+      inputsContainerWidth() {
+        return this.typeVal !== 'list' && this.formInputsDisplay !== 'block'
+          ? { width: 'auto' }
+          : {}
+      },
+      actionUrlVal: function() {
+        return this.actionUrl
+          ? this.actionUrl
+          : this.$requestConfig.uploadUrl
+          ? this.handlerUploadUrl
+          : 'https://jsonplaceholder.typicode.com/posts/'
+      },
+      handlerUploadUrl() {
+        const baseUrl = this.$requestConfig.uploadUrl
+        if (!this.flowData.defId) {
+          return baseUrl
+        }
+        const indexOfMark = baseUrl.indexOf('?')
+        if (indexOfMark == -1) {
+          return `${baseUrl}?defId=${this.flowData.defId}`
+        }
+        if (indexOfMark > -1 && indexOfMark == baseUrl.length - 1) {
+          return `${baseUrl}defId=${this.flowData.defId}`
+        }
+        if (indexOfMark > -1 && indexOfMark < baseUrl.length - 1) {
+          return `${baseUrl}&defId=${this.flowData.defId}`
+        }
+        return baseUrl
+      },
+      headerVal: function() {
+        return this.header
+          ? this.header
+          : this.$requestConfig.header
+          ? this.$requestConfig.header()
+          : null
+      },
+      acceptType: function() {
+        if (this.accept) {
+          const ary = []
+          this.accept.split(',').forEach((m) => {
+            if (m.startsWith('.')) {
+              ary.push(m)
+            } else {
+              ary.push(`.${m}`)
+            }
+          })
+          return ary.join(',')
+        }
+        return null
+      },
+      previewableVal: function() {
+        return (
+          (this.inputWriteable && this.previewable) ||
+          (this.permission_sub === 'r' && this.allowPreview)
+        )
+      },
+      downloadableVal: function() {
+        return (
+          (this.inputWriteable && this.downloadable) ||
+          (this.permission_sub === 'r' && this.allowDownload)
+        )
+      },
+    },
+    watch: {
+      value(val) {
+        if (utils.isEmpty(val)) {
+          this.inputVal = []
+        }
+        if (val.constructor == String) {
+          this.inputVal = [...JSON.parse(val)]
+        }
+      },
+      inputVal: {
+        handler(val) {
+          this.$emit('input', JSON.stringify(val))
+        },
+        deep: true,
+      },
+    },
+    created() {
+      if (this.value) {
+        this.inputVal = JSON.parse(this.value)
+      }
+    },
+    methods: {
+      //获取指定字符串点最后一个字符
+      substringType(str) {
+        let valueArr = str.split('.')
+        return valueArr[valueArr.length - 1]
+      },
+      // 将文件对象转换为附件对象
+      convertFile2Item(file) {
+        const item = {
+          name: file.name,
+          size: file.size,
+          percentage: file.percentage,
+          status: file.status,
+          state: file.status,
+          type:
+            file.name && file.name.split('.')
+              ? this.substringType(file.name)
+              : file.type,
+          uid: file.uid,
+          prop1: '',
+          prop2: '',
+          prop3: '',
+          prop4: '',
+          prop5: '',
+          prop6: '',
+        }
+        if (file.response) {
+          item.response = { ...file.response }
+          item.username = file.response.username || ''
+        }
+        return item
+      },
+      // 对附件对象的操作，包括：添加、更新、删除、清空、调整顺序
+      valueOpration(item, opType = 'update', direct) {
+        if (opType == 'clear') {
+          this.$emit('input', '')
+          this.refreshFileUploadDebounce()
+          return
+        }
+        let ary = utils.isEmpty(this.value) ? [] : JSON.parse(this.value)
+        const index = ary.findIndex((m) => m.uid == item.uid)
+        switch (opType) {
+          case 'update': {
+            if (index > -1) {
+              ary[index] = item
+            } else {
+              ary.push(item)
+            }
+            break
+          }
+          case 'remove':
+            ary.splice(index, 1)
+            break
+          case 'move': {
+            const realItem = ary.find((m) => m.uid == item.uid)
+            ary = utils.arrayMove(ary, realItem, direct)
+            break
+          }
+        }
+        this.$emit('input', ary.length > 0 ? JSON.stringify(ary) : '')
+        this.refreshFileUploadDebounce()
+      },
+      // 同步附件数据到上传组件
+      refreshFileUpload() {
+        this.$nextTick(() => {
+          this.$refs.fileUpload.reload(this.inputVal)
+        })
+      },
+      handleError(err, file) {
+        this.valueOpration(this.convertFile2Item(file))
+        //上传失败的附件在3秒后自动移除
+        setTimeout(() => {
+          this.valueOpration(this.convertFile2Item(file), 'remove')
+        }, 3000)
+      },
+      handleProgress(event, file) {
+        this.valueOpration(this.convertFile2Item(file))
+      },
+      handleClear() {
+        this.valueOpration(null, 'clear')
+      },
+      move(item, direct) {
+        this.valueOpration(item, 'move', direct)
+      },
+      uploadSuccess(response, file, fileList) {
+        this.valueOpration(this.convertFile2Item(file))
+        this.$emit('onSuccess', response, file, fileList)
+      },
+      removeFile(file) {
+        this.$refs.fileUpload.abort(file)
+        this.valueOpration(this.convertFile2Item(file), 'remove')
+        this.$emit('remove', file, this.inputVal)
+      },
+      download(file) {
+        // 组件单独绑定了download事件
+        if (this.$options._parentListeners.download) {
+          this.$emit('download', file, this.inputVal)
+        }
+        // 未绑定时触发全局download事件处理函数
+        else if (this.$requestConfig.download) {
+          this.$requestConfig
+            .download(file.response.fileId)
+            .then(({ data, headers }) => {
+              if (data && headers) {
+                // 附件下载
+                const fileName = decodeURIComponent(
+                  headers['content-disposition']
+                    .split(';')[1]
+                    .split('filename=')[1]
+                )
+                const blob = new Blob([data])
+                saveAs(blob, fileName)
+              }
+            })
+            .catch((err) => {
+              this.$message.error(`附件下载失败：${err}`)
+            })
+        }
+      },
+      preview(file) {
+        if (file.status !== 'success') {
+          this.$message.warning(this.t('cl.file.forbiddenPreview'))
+          return
+        }
+        if (this.previewableVal) {
+          // 当前组件未添加preview事件监听 并且 设置了全局预览方法
+          if (!this._events.preview && this.$preview) {
+            this.$preview(file)
+          } else {
+            this.$emit('preview', file, this.inputVal)
+          }
+        } else {
+          let msg = this.t('cl.file.nopreview')
+          this.$message.warning(msg)
+        }
+      },
+      handleSort(data) {
+        this.$emit('input', JSON.stringify(data))
+        this.refreshFileUploadDebounce()
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  input[type='hidden'][aria-invalid='true'] + .file-upload-container {
+    outline: 1px solid #f56c6c;
+  }
+  .upload-tooltip {
+    font-size: 11px;
+    color: #999999;
+    line-height: 14px;
+  }
+</style>

package/packages/FileUpload/index.js

@@ -0,0 +1,7 @@
+import FileUpload from './src/main.vue'
+
+FileUpload.install = function(Vue) {
+  Vue.component(FileUpload.name, FileUpload)
+}
+
+export default FileUpload

package/packages/FileUpload/src/main.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="file-upload-container">
+    <el-upload
+      ref="elUploadEl"
+      :list-type="listType"
+      :action="actionUrl"
+      :file-list="files"
+      :headers="header"
+      :show-file-list="false"
+      :accept="accept"
+      :limit="limit"
+      :multiple="multiple"
+      :before-upload="handleBeforeUpload"
+      :on-progress="handleProgress"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :with-credentials="withCredentials"
+    >
+      <el-tooltip placement="top" effect="light">
+        <div slot="content">
+          <span>附件格式支持：{{ acceptLabel }}</span>
+          <br />
+          <span>附件大小限制：单个文件不超过{{ size }}MB</span>
+          <br />
+          <span>附件个数限制：最多{{ limit }}个</span>
+        </div>
+        <el-button v-if="!readonly" size="mini" round icon="el-icon-plus">
+          上传
+        </el-button>
+      </el-tooltip>
+    </el-upload>
+
+    <el-button
+      v-if="!readonly && files.length > 0"
+      v-popconfirm="{ content: '确定要清空吗？', confirm: handleClear }"
+      size="mini"
+      round
+      icon="el-icon-delete"
+    >
+      清空
+    </el-button>
+
+    <slot name="append"></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ClFileUpload',
+    props: {
+      withCredentials: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: Array,
+        required: true,
+      },
+      actionUrl: {
+        type: String,
+        required: true,
+      },
+      listType: {
+        type: String,
+      },
+      multiple: {
+        type: Boolean,
+      },
+      accept: {
+        type: String,
+      },
+      limit: {
+        type: Number,
+        default: 5,
+      },
+      header: {
+        type: Object,
+      },
+      size: {
+        type: Number,
+        default: 50,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      beforeUpload: {
+        type: Function,
+      },
+      onSuccess: {
+        type: Function,
+      },
+      onError: {
+        type: Function,
+      },
+    },
+    data() {
+      return {
+        files: [],
+      }
+    },
+    computed: {
+      acceptLabel: function() {
+        return this.accept ? this.accept : '所有格式'
+      },
+    },
+    created() {
+      this.files = this.value || []
+    },
+    methods: {
+      reload(files) {
+        this.files = files
+      },
+      // 附件是否超过最大尺寸
+      exceedFileSize(file) {
+        return file.size > this.size * 1024 * 1024
+      },
+      handleBeforeUpload(file) {
+        let resultVal = false
+        if (this.exceedFileSize(file)) {
+          let computerSize = this.$options.filters['computerSize'](file.size)
+          this.$message({
+            message: `附件的大小为${computerSize}，超过了允许的最大尺寸${this.size}MB.`,
+            type: 'warning',
+          })
+          resultVal = false
+        } else {
+          resultVal = true
+        }
+
+        if (
+          this.beforeUpload &&
+          this.beforeUpload.constructor == Function &&
+          resultVal
+        ) {
+          resultVal = this.beforeUpload(file)
+        }
+
+        if (resultVal) {
+          this.files.push(file)
+        }
+
+        return resultVal
+      },
+      handleProgress(event, file, fileList) {
+        const index = this.files.findIndex((m) => m === file)
+        index > -1 && this.$set(this.files, index, file)
+        this.$emit('on-progress', event, file, fileList)
+      },
+      handleExceed() {
+        this.$message({
+          message: `最多允许上传${this.limit}个附件.`,
+          type: 'warning',
+        })
+      },
+      handleSuccess(response, file, fileList) {
+        if (this.onSuccess && this.onSuccess.constructor == Function) {
+          this.onSuccess(response, file, fileList)
+        }
+        const index = this.files.findIndex((m) => m === file)
+        file.state = 'success'
+        index > -1 && this.$set(this.files, index, file)
+      },
+      handleError(err, file, fileList) {
+        if (this.onError && this.onError.constructor == Function) {
+          this.onError(err, file, fileList)
+        }
+        this.$emit('handle-error', err, file, fileList)
+        const index = this.files.findIndex((m) => m === file)
+        file.state = 'exception'
+        index > -1 && this.$set(this.files, index, file)
+        this.$message({
+          message: `附件${file.name}上传失败.`,
+          type: 'error',
+          onClose: () => {
+            this.files.remove(file)
+          },
+        })
+      },
+      handleClear() {
+        this.files.forEach((m) => {
+          this.abort(m)
+        })
+        this.$refs.elUploadEl.clearFiles()
+        this.files = []
+        this.$emit('clear')
+      },
+      abort(file) {
+        // 附件还在上传中，则中止上传。
+        if (file && file.status === 'uploading') {
+          this.$refs.elUploadEl.abort(file)
+        }
+      },
+      remove(file) {
+        this.abort(file)
+        this.files.remove(file)
+        for (var i = 0; i < this.files.length; i++) {
+          if (this.files[i].uid == file.uid) {
+            this.files.splice(i, 1) //删除数组某一项
+          }
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-upload {
+    display: inline;
+    text-align: center;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .file-upload-container {
+    margin-bottom: 10px;
+  }
+
+  div.file-upload-container > div {
+    display: inline-block;
+    margin-right: 10px;
+  }
+</style>

package/packages/FlowChart/index.js

@@ -0,0 +1,7 @@
+import FlowChart from './src/main.vue'
+
+FlowChart.install = function(Vue) {
+  Vue.component(FlowChart.name, FlowChart)
+}
+
+export default FlowChart