swordpass-ui 1.0.0

package/packages/picture/src/main.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="cl-picture">
+    <div class="cl-picture__images">
+      <el-card
+        v-for="(item, index) of imgList"
+        :key="index"
+        class="cl-picture__card"
+        :alt="t('cl.picture.viewOriginalImage')"
+        :body-style="bodyStyle"
+      >
+        <el-image
+          :key="index"
+          :src="item.url || getCurrentImgSrc(item)"
+          :style="style"
+          :preview-src-list="srcList"
+          class="cl-picture__item-img"
+        />
+        <div class="cl-picture__footer">
+          <div class="cl-picture__name">
+            <template v-if="openUrl">
+              <a href="javascript:void(0);" @click="hrefClick()">
+                {{ item.fileName }}
+              </a>
+            </template>
+            <template v-else>
+              {{ item.fileName }}
+            </template>
+          </div>
+          <div class="cl-picture__footer-btn">
+            <el-button
+              v-if="uploadType === 'local' && downloadable"
+              icon="el-icon-download"
+              class="cl-picture__download"
+              circle
+              @click="downloadPicture(item)"
+            />
+
+            <el-popconfirm
+              v-if="permission != 'r'"
+              title="确定要删除吗？"
+              @confirm="handleDelete(item)"
+            >
+              <el-button slot="reference" icon="el-icon-delete" circle />
+            </el-popconfirm>
+          </div>
+        </div>
+      </el-card>
+    </div>
+    <file-upload
+      v-if="uploadType === 'local' && isUpload && !userAgentMobile"
+      ref="fileUpload"
+      v-model="inputVal"
+      class="cl-picture-upload"
+      :action-url="actionUrlVal"
+      :header="headerVal"
+      :on-success="handleSuccess"
+      :on-progress="onProgress"
+      :before-upload="beforeImgUpload"
+      :multiple="multiple"
+      :limit="limit"
+      :size="fileSize"
+      :accept="accept"
+      :show-file-list="false"
+      :with-credentials="withCredentials"
+      @clear="handleClear"
+    />
+    <el-button
+      v-if="uploadType == 'web' && isUpload"
+      size="mini"
+      round
+      icon="el-icon-plus"
+      @click="openDialog"
+    >
+      {{ t('cl.picture.uploadButtonText') }}
+    </el-button>
+    <div class="cl-picture__mobile">
+      <input
+        id="upload"
+        ref="mobilePicRef"
+        class="cl-picture__hide-input"
+        type="file"
+        accept="image/*"
+        @change="handlePicChange($event)"
+      />
+      <div class="camera" @click="clickPicture">
+        <el-button
+          v-if="userAgentMobile && uploadType == 'local'"
+          size="mini"
+          round
+          icon="el-icon-plus"
+        >
+          {{ t('cl.picture.uploadButtonText') }}
+        </el-button>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogFormVisible"
+      :title="t('cl.picture.uploadWebImg')"
+      :close-on-click-modal="false"
+      :custom-class="isMobileClass"
+    >
+      <el-form ref="webImgFormRef" :model="webImages">
+        <cl-form-item :label="t('cl.picture.imgName')" label-width="100px">
+          <cl-input
+            v-model="webImages.fileName"
+            style="width: 100%"
+            :placeholder="t('cl.picture.imgNamePlaceHolder')"
+            validate="required"
+          />
+        </cl-form-item>
+        <cl-form-item :label="t('cl.picture.imgUrl')" label-width="100px">
+          <cl-input
+            v-model="webImages.url"
+            style="width: 100%"
+            :placeholder="t('cl.picture.imgUrlPlaceHolder')"
+            validate="required"
+          />
+        </cl-form-item>
+        <div class="cl-dialog-footer">
+          <el-button
+            type="primary"
+            size="small"
+            class="submit-button"
+            @click="handleSubmit"
+          >
+            {{ t('cl.common.confirm') }}
+          </el-button>
+          <el-button size="small" @click="dialogFormVisible = false">
+            {{ t('cl.common.close') }}
+          </el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import locale from '@/mixins/locale.js'
+
+  import fileUpload from '../../FileUpload'
+
+  const { saveAs } = require('file-saver')
+  import { createObjectURL } from '@/util/brower.js'
+  import utils from '@/utils.js'
+  import _ from 'lodash'
+
+  export default {
+    name: 'ClPicture',
+    components: {
+      fileUpload,
+    },
+    mixins: [permission, mobileMode, locale],
+    props: {
+      value: {
+        type: String,
+      },
+      withCredentials: {
+        type: Boolean,
+        default: false,
+      },
+      uploadType: {
+        type: String,
+        default: '',
+        validator: (val) => ['web', 'local'].includes(val),
+      },
+      actionUrl: {
+        type: String,
+        default: '',
+      },
+      headers: Object,
+      imgHeight: [String, Number],
+      imgWidth: [String, Number],
+      limit: Number,
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
+      allowPreview: {
+        type: Boolean,
+        default: true,
+      },
+      allowDownload: {
+        type: Boolean,
+        default: true,
+      },
+      fileSize: {
+        type: Number,
+        default: 6,
+      },
+      bodyStyle: {
+        type: Object,
+        default: () => {
+          return {
+            padding: '10px',
+            cursor: 'pointer',
+          }
+        },
+      },
+      onProgress: Function,
+      openUrl: {
+        type: String,
+        default: '',
+      },
+      flowData: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        imgList: [], //上传成功展示图片列表
+        dialogFormVisible: false,
+        srcList: [], //图片预览url列表
+        webImages: {
+          fileName: '',
+          url: '',
+        },
+        accept: 'jpg,png,gif,ico,jpeg,GPG,PNG,GIF,JPEG',
+        refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 200),
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          let imgValue = []
+          if (utils.isEmpty(this.value)) {
+            imgValue = []
+          } else if (this.value.constructor == String) {
+            imgValue = [...JSON.parse(this.value)]
+          }
+          return imgValue
+        },
+        set() {},
+      },
+      downloadable() {
+        return (
+          this.inputWriteable ||
+          (this.permission_sub === 'r' && this.allowDownload)
+        )
+      },
+      preview() {
+        return (
+          this.inputWriteable ||
+          (this.permission_sub === 'r' && this.allowPreview)
+        )
+      },
+      style() {
+        return {
+          width: `${this.imgWidth || ''}px`,
+          height: `${this.imgHeight || ''}px`,
+        }
+      },
+      isUpload() {
+        return !['r', 'n'].includes(this.permission)
+      },
+      isUploadOne() {
+        return !this.multiple && this.inputVal.length + 1 > 1
+      },
+      isMobileClass() {
+        return this.userAgentMobile ? 'is-mobile' : 'form-dialog'
+      },
+      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.headers
+          ? this.headers
+          : this.$requestConfig.header
+          ? this.$requestConfig.header()
+          : null
+      },
+    },
+    watch: {
+      imgList: {
+        handler() {
+          this.syncSrcList()
+        },
+        deep: true,
+        immediate: true,
+      },
+    },
+    mounted() {
+      if (this.value) {
+        this.initData()
+      }
+    },
+    methods: {
+      initData() {
+        const currentImgList =
+          this.value.constructor == String ? JSON.parse(this.value) : this.value
+        if (currentImgList.length && currentImgList.length > 0) {
+          this.imgList = currentImgList
+        }
+      },
+      getCurrentImgSrc(item) {
+        const this_ = this
+        if (item && item.response.fileId) {
+          this.$requestConfig.getImgSrc(item.response.fileId).then((res) => {
+            if (res.size > 0) {
+              const reader = new FileReader()
+              reader.readAsDataURL(res)
+              reader.onload = function(e) {
+                // this_.$set(item, 'url', e.target.result)
+                item.url = e.target.result
+                if (this_.imgList && this_.imgList.length > 0) {
+                  const firstItem = this_.imgList[0]
+                  this_.$set(this_.imgList, 0, firstItem)
+                  this_.syncSrcList()
+                }
+              }
+            }
+          })
+        }
+      },
+      syncSrcList() {
+        const urlList = this.imgList.map((file) => file.url)
+        this.srcList = this.preview ? urlList : []
+      },
+      downloadPicture(file) {
+        // 组件单独绑定了download事件
+        if (this.$options._parentListeners.download) {
+          this.$emit('download', file)
+        }
+        // 未绑定时触发全局download事件处理函数
+        else if (this.$requestConfig.download) {
+          this.$requestConfig
+            .download(file.fileId || file.response ? file.response.fileId : '')
+            .then(({ 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}`)
+            })
+        }
+      },
+      handleDelete(item) {
+        let currentFileLsit = utils.isEmpty(this.value)
+          ? []
+          : this.value.constructor == String
+          ? JSON.parse(this.value)
+          : this.value
+        const index = currentFileLsit.findIndex((file) => file.uid == item.uid)
+        currentFileLsit.splice(index, 1)
+        this.imgList.splice(index, 1)
+        this.$emit(
+          'input',
+          currentFileLsit.length > 0 ? JSON.stringify(currentFileLsit) : ''
+        )
+        if (this.uploadType === 'local') {
+          this.refreshFileUploadDebounce()
+        }
+      },
+      handlePicChange(e) {
+        const imgData = e.target.files
+        if (this.isPictureType(imgData[0].name)) return this.toast()
+        const url = createObjectURL(imgData[0])
+        this.setImgList({
+          fileName: imgData[0].name,
+          url,
+        })
+        this.webImages.url = url
+      },
+      clickPicture() {
+        this.$refs.mobilePicRef.click()
+      },
+      handleSubmit() {
+        if (this.isUploadOne)
+          return this.$message({
+            type: 'warning',
+            message: this.t('cl.picture.onlyUploadOne'),
+          })
+        if (
+          this.inputVal.length + 1 > this.limit ||
+          this.srcList.length + 1 > this.limit
+        )
+          return this.$message({
+            type: 'warning',
+            message: this.t('cl.picture.limitCountTip', { limit: this.limit }),
+          })
+        this.setImgList(this.webImages)
+        this.dialogFormVisible = false
+      },
+      openDialog() {
+        this.dialogFormVisible = true
+        this.$nextTick(() => {
+          this.$refs.webImgFormRef.resetFields()
+          this.webImages = {
+            fileName: '',
+            url: '',
+          }
+        })
+      },
+      setImgList(files) {
+        this.imgList.push({
+          ...files,
+          uid: `${new Date().getTime()}_${Math.ceil(Math.random() * 10)}`,
+        })
+      },
+      handleSuccess(response, file, fileList) {
+        if (this.isUploadOne) return
+        const url = createObjectURL(file.raw)
+        this.imgList.push({ ...file, url, fileName: file.name })
+        this.$emit('input', JSON.stringify(fileList))
+        this.$emit('on-success', response, file, fileList)
+        this.refreshFileUploadDebounce()
+      },
+      beforeImgUpload(file) {
+        if (this.isPictureType(file.name)) {
+          this.toast()
+          return false
+        }
+        if (this.isUploadOne)
+          return this.$message({
+            type: 'warning',
+            message: this.t('cl.picture.onlyUploadOne'),
+          })
+      },
+      clearForm() {
+        this.webImages.fileName = ''
+        this.webImages.url = ''
+      },
+      isPictureType(name) {
+        const fileType = name.replace(/.+\./, '')
+        const allowedTypeArr = this.accept.split(',')
+        return allowedTypeArr.indexOf(fileType.toLowerCase()) === -1
+      },
+      toast() {
+        this.$message({
+          type: 'warning',
+          message: this.t('cl.picture.limitTypeTip'),
+        })
+      },
+      handleClear() {
+        this.imgList = []
+        this.srcList = []
+      },
+      // 同步附件数据到上传组件
+      refreshFileUpload() {
+        this.$nextTick(() => {
+          this.$refs.fileUpload.reload(this.inputVal)
+        })
+      },
+      hrefClick() {
+        let url = this.openUrl
+          .replaceAll('${mvue}', window.context.manage)
+          .replaceAll('${fvue}', window.context.front)
+          .replaceAll('${front}', window.context.front)
+
+        window.open(url, '_blank')
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .cl-picture {
+    &__images {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 10px;
+    }
+    &__card {
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+    &__item-img {
+      height: 240px;
+      width: 260px;
+      border-radius: 4px;
+    }
+    &__footer {
+      height: 32px;
+      display: flex;
+      justify-content: space-between;
+    }
+    &__name {
+      line-height: 32px;
+      font-size: 12px;
+    }
+    &__hide-input {
+      display: none;
+    }
+    .is-mobile {
+      width: 84% !important;
+      margin-top: 30vh !important;
+    }
+    .cl-picture__download {
+      margin-right: 10px;
+    }
+  }
+  .form-dialog {
+    .cl-dialog-footer {
+      text-align: center;
+      .submit-button {
+        width: unset;
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

package/packages/plugins/Echarts.js

@@ -0,0 +1,30 @@
+import echarts from 'echarts/lib/echarts'
+import ecStat from 'echarts-stat'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/scatter'
+import 'echarts/lib/chart/radar'
+import 'echarts/lib/chart/lines'
+import 'echarts/lib/chart/graph'
+import 'echarts/lib/chart/gauge'
+import 'echarts/lib/chart/funnel'
+import 'echarts/lib/chart/themeRiver'
+
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/markPoint'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markArea'
+import 'echarts/lib/component/timeline'
+import 'echarts/lib/component/toolbox'
+
+const Echarts = {}
+
+Echarts.install = function(Vue) {
+  Vue.prototype.$echarts = echarts
+  Vue.prototype.$ecStat = ecStat
+}
+
+export default Echarts

package/packages/plugins/Map.js

@@ -0,0 +1,29 @@
+import VueAMap from 'vue-amap'
+
+const Map = {}
+const options = {
+  // 高德的key
+  key: '1f8f479e9b787974efaa9bda1bf8ef92',
+  // 插件集合
+  plugin: [
+    'AMap.Autocomplete',
+    'AMap.PlaceSearch',
+    'AMap.OverView',
+    'AMap.MapType',
+    'AMap.PolyEditor',
+    'AMap.CircleEditor',
+    'AMap.Geolocation',
+    'AMap.PlaceSearch',
+    'AMap.Geocoder',
+  ],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4',
+}
+
+Map.install = function(Vue, opts) {
+  Object.assign(options, opts || {})
+  Vue.use(VueAMap)
+  VueAMap.initAMapApiLoader(options)
+}
+
+export default Map

package/packages/plugins/Preview.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import PreviewComponent from '../Preview/src/main.vue'
+
+const PreviewerConstructor = Vue.extend(PreviewComponent)
+const previewId = 'previewEle'
+let instance,
+  options = {}
+
+const initInstance = () => {
+  const ele = document.createElement('div')
+  ele.id = previewId
+
+  instance = new PreviewerConstructor({
+    el: ele,
+    propsData: options,
+  })
+}
+
+const preview = (file) => {
+  if (!instance) {
+    initInstance()
+  }
+  instance.dialogVisible = false
+  instance.mode = null
+  instance.src = null
+  instance.loading = false
+  instance.tempTitle = null
+  instance.errorMessage = null
+
+  if (!document.querySelector(`#${previewId}`)) {
+    document.body.appendChild(instance.$el)
+  }
+
+  if (options.before) {
+    instance.preview(options.before(file), file.name)
+  } else {
+    throw `There must have 'before' fn when use Preview Plugin.`
+  }
+}
+
+const Preview = {}
+
+Preview.install = function(Vue, opts) {
+  Vue.component('ClPreview', PreviewComponent)
+  Object.assign(options, opts || {})
+  Vue.prototype.$preview = preview
+}
+
+export default Preview

package/packages/plugins/Qrcode.js

@@ -0,0 +1,7 @@
+const Qrcode = {}
+
+Qrcode.install = function(Vue) {
+  Vue.prototype.$qrcode = require('qrcode')
+}
+
+export default Qrcode

package/packages/plugins/XLSX.js

@@ -0,0 +1,7 @@
+const XLSX = {}
+
+XLSX.install = function(Vue) {
+  Vue.prototype.$XLSX = require('xlsx/dist/xlsx.core.min.js')
+}
+
+export default XLSX

package/packages/plugins/wangeditor.js

@@ -0,0 +1,19 @@
+const wangeditor = {}
+
+wangeditor.install = function(Vue, config) {
+  Vue.prototype.$WangEditor = require('wangeditor')
+  // 如果提供的token是方法则延迟后执行该方法来获取token值(解决部分情况下，获取token的方法无法获取到值的情况)
+  if (
+    config &&
+    config.uploadImgHeaders &&
+    config.uploadImgHeaders.Authorization &&
+    typeof config.uploadImgHeaders.Authorization == 'function'
+  ) {
+    setTimeout(() => {
+      config.uploadImgHeaders.Authorization = config.uploadImgHeaders.Authorization.apply()
+    }, 300)
+  }
+  Vue.prototype.$WangEditorConfig = config || {}
+}
+
+export default wangeditor