swordpass-ui 1.0.9 → 1.1.1

package/packages/File/src/main.vue

@@ -98,370 +98,374 @@
   </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')
+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 {}
-        },
+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
       },
     },
-    data() {
-      return {
-        writeable: true,
-        temp: null,
-        refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 200),
-        inputVal: [],
-      }
+    isSimple: {
+      type: Boolean,
+      default: false,
     },
-    computed: {
-      typeVal: function() {
-        return this.isSimple || this.simplicity ? 'list' : this.type
-      },
-      inputsContainerWidth() {
-        return this.typeVal !== 'list' && this.formInputsDisplay !== 'block'
-          ? { width: 'auto' }
-          : {}
+    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 {}
       },
-      actionUrlVal: function() {
-        return this.actionUrl
-          ? this.actionUrl
-          : this.$requestConfig.uploadUrl
-          ? this.handlerUploadUrl
-          : 'https://jsonplaceholder.typicode.com/posts/'
+    },
+    cardBadge: {
+      type: Boolean,
+      default: true,
+    },
+    thumbnail: {
+      type: Function,
+    },
+    flowData: {
+      type: Object,
+      default: () => {
+        return {}
       },
-      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}`
-        }
+    },
+  },
+  data() {
+    return {
+      writeable: true,
+      temp: null,
+      refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 1000),
+      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
-      },
-      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)
-        )
-      },
+      }
+      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
     },
-    watch: {
-      value(val) {
-        if (utils.isEmpty(val)) {
-          this.inputVal = []
-        }
-        if (val.constructor == String) {
+    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) {
+        if (val) {
           this.inputVal = [...JSON.parse(val)]
+        } else {
+          this.inputVal = []
         }
+      }
+    },
+    inputVal: {
+      handler(val) {
+        this.$emit('input', JSON.stringify(val))
       },
-      inputVal: {
-        handler(val) {
-          this.$emit('input', JSON.stringify(val))
-        },
-        deep: true,
-      },
+      deep: true,
     },
-    created() {
-      if (this.value) {
-        this.inputVal = JSON.parse(this.value)
+  },
+  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
     },
-    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) : '')
+    // 对附件对象的操作，包括：添加、更新、删除、清空、调整顺序
+    valueOpration(item, opType = 'update', direct) {
+      if (opType == 'clear') {
+        this.$emit('input', '')
         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)
+        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 {
-            this.$emit('preview', file, this.inputVal)
+            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 {
-          let msg = this.t('cl.file.nopreview')
-          this.$message.warning(msg)
+          this.$emit('preview', file, this.inputVal)
         }
-      },
-      handleSort(data) {
-        this.$emit('input', JSON.stringify(data))
-        this.refreshFileUploadDebounce()
-      },
+      } 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;
-  }
+input[type='hidden'][aria-invalid='true'] + .file-upload-container {
+  outline: 1px solid #f56c6c;
+}
+.upload-tooltip {
+  font-size: 11px;
+  color: #999999;
+  line-height: 14px;
+}
 </style>