shijiplus-web-plugin 0.1.34 → 0.1.36

package/src/components/upload-file/upload-file.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="plus-upload">
+    <div class="i-flex-wrap">
+      <div
+        class="demo-upload-list"
+        :key="item.id"
+        v-for="(item, index) in uploadList"
+      >
+        <template v-if="item.status === 'finished'">
+          <img @click="handleView(item.name)" :src="item.url" />
+          <Icon
+            v-if="!disabled"
+            @click.native="handleRemove(item, index)"
+            type="md-close-circle"
+            size="16"
+            color=""
+          />
+        </template>
+        <template v-else-if="item.showProgress">
+          <p class="f-s-14 f-w-400">上传中</p>
+          <Progress
+            :percent="item.percentage"
+            :stroke-width="4"
+            hide-info
+          ></Progress>
+        </template>
+      </div>
+      <Upload
+        v-if="!disabled"
+        ref="upload"
+        :show-upload-list="false"
+        :default-file-list="defaultFiles"
+        :on-success="handleSuccess"
+        :format="['jpg', 'jpeg', 'png', 'gif']"
+        accept="image/*"
+        :headers="headers"
+        :max-size="fileMaxSize"
+        :on-format-error="handleFormatError"
+        :on-exceeded-size="handleMaxSize"
+        :on-progress="handleProgress"
+        :before-upload="handleBeforeUpload"
+        :disabled="disabled"
+        multiple
+        type="drag"
+        :action="action || baseUrl + 'api/open/common/image/uploadDefaultImage'"
+        :class="{ hideUpload: remainderCount <= 0 }"
+      >
+        <div class="icon-wrap">
+          <Icon :type="'ios-add'" size="40"></Icon>
+          <p class="f-s-14 f-w-400">{{ imgTitle }}</p>
+        </div>
+      </Upload>
+    </div>
+    <p v-if="defaultHint" style="color: #ccc; line-height: 20px">
+      最多上传{{ maxUploadFiles }}张图片，文件格式为png，jepg，jpg，或gif
+    </p>
+    <p v-if="hintText" class="f-s-12 f-w-400 upload-tips">{{ hintText }}</p>
+    <p class="f-s-12 f-w-400 upload-tips">
+      <slot name="tips"></slot>
+    </p>
+    <edit-modal title="查看图片" :show="visible">
+      <img
+        slot="editslot"
+        :src="imgName"
+        v-if="visible"
+        style="max-height: 100%; width: 100%"
+      />
+      <Row slot="bottom" type="flex" justify="center">
+        <Button @click="visible = false">关闭</Button>
+      </Row>
+    </edit-modal>
+  </div>
+</template>
+<script>
+import config from '@/config'
+import store from '@/store'
+import Emitter from 'iview/src/mixins/emitter'
+const baseUrl = config.plusApiV5Domain()
+let authHeader = {}
+authHeader[config.tokenHeaderName] = store.state.user.token
+authHeader['token'] = store.state.user.token
+authHeader['app_name'] = 'op'
+export default {
+  name: 'upload-file',
+  mixins: [Emitter],
+  props: {
+    imgTitle: {
+      type: String,
+      default: '添加图片'
+    },
+    defaultHint: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hintText: {
+      type: String,
+      default: ''
+    },
+    showImgList: {
+      default: () => {
+        return undefined
+      }
+    },
+    imagePath: {
+      default: undefined
+    },
+    addIconType: {
+      default: 'ios-camera'
+    },
+    maxUploadFiles: {
+      default: 1
+    },
+    maxSize: {
+      default: 200
+    },
+    sizeUnit: {
+      default: 1024
+    },
+    sizeUnitStr: {
+      default: 'MB'
+    },
+    action: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      headers: authHeader,
+      baseUrl,
+      imgName: '',
+      visible: false,
+      remainderCount: this.maxUploadFiles,
+      uploadList: [],
+      defaultFiles: []
+    }
+  },
+  computed: {
+    fileMaxSize() {
+      return this.maxSize * this.sizeUnit
+    }
+  },
+  watch: {
+    imagePath(value) {
+      this.uploadList = []
+      this.$refs.upload.clearFiles()
+      this.remainderCount = this.maxUploadFiles
+      if (!this.$isEmpty(value)) {
+        if (!this.$isEmpty(this.uploadList)) {
+          this.uploadList.push({
+            name: value,
+            url: value,
+            status: 'finished'
+          })
+        } else {
+          this.uploadList = [{ name: value, url: value, status: 'finished' }]
+        }
+        this.defaultFiles = this.$deepCopy(this.uploadList)
+        this.remainderCount -= this.uploadList.length
+      }
+    },
+    showImgList: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        this.$nextTick(() => {
+          if (this.$refs.upload && this.$refs.upload.fileList.length > 0) {
+            let uploadingImgs = this.$refs.upload.fileList.filter((item) => {
+              return item.status === 'uploading' // 不用改变status值
+            })
+            if (uploadingImgs.length > 0) {
+              return
+            }
+          }
+          this.remainderCount = this.maxUploadFiles
+          this.uploadList = []
+          if (!this.$isEmpty(value)) {
+            value.forEach((item, index) => {
+              this.uploadList.push({
+                name: item,
+                url: item,
+                status: 'finished'
+              })
+            })
+          }
+          this.defaultFiles = this.$deepCopy(this.uploadList)
+          this.remainderCount -= this.uploadList.length
+        })
+      }
+    }
+  },
+  methods: {
+    handleView(name) {
+      this.imgName = name
+      this.visible = true
+    },
+    handleRemove(file, index) {
+      this.$refs.upload.fileList.splice(index, 1)
+      this.uploadList = this.$refs.upload.fileList
+      this.remainderCount++
+      if (
+        !this.$isEmpty(this._events) &&
+        typeof this._events['on-remove'] === 'object'
+      ) {
+        this.$emit('on-remove', { index: index, target: this })
+      } else {
+        if (
+          this.maxUploadFiles === 1 &&
+          this.$containKey(this.$options.propsData, 'imagePath')
+        ) {
+          this.$emit('on-remove', { index: index, target: this })
+        } else {
+          this.showImgList.splice(index, 1)
+        }
+      }
+      this.dispatch('FormItem', 'on-form-change', this.uploadList)
+    },
+    handleSuccess(res, file) {
+      if (this.action) {
+        // 对新露的上传接口做兼容， 他用的是其他字段
+        res.data.path = res.data.accessURL
+      }
+      if (!res.data) {
+        console.log(res)
+        file.status = 'fail'
+        this.$Notice.error({
+          title: `上传失败`,
+          desc: res.codex + ':' + res.message
+        })
+        this.uploadList.forEach((item, index) => {
+          if (item.status == 'fail') {
+            this.uploadList.splice(index, 1)
+          }
+        })
+        this.remainderCount++
+        return
+      }
+      if (!res.data.path) {
+        console.log(res)
+        file.status = 'fail'
+        this.$Notice.error({
+          title: `上传失败`,
+          desc: res.message
+        })
+        this.uploadList.forEach((item, index) => {
+          if (item.status == 'fail') {
+            this.uploadList.splice(index, 1)
+          }
+        })
+        this.remainderCount++
+        return
+      }
+      file.url = res.data.path
+      file.name = res.data.path
+      file.status = 'finished'
+      this.uploadList = this.$refs.upload.fileList
+      if (
+        !this.$isEmpty(this._events) &&
+        typeof this._events['on-upload-complete'] === 'object'
+      ) {
+        this.$emit('on-upload-complete', { res: res, file: file, target: this })
+      } else {
+        if (this.maxUploadFiles === 1) {
+          if (this.$containKey(this.$options.propsData, 'imagePath')) {
+            this.$emit('on-upload-complete', {
+              res: res,
+              file: file,
+              target: this
+            })
+          } else {
+            this.showImgList.splice(0, this.showImgList.length)
+            this.showImgList.push(res.data.path)
+          }
+        } else {
+          this.showImgList.push(res.data.path)
+        }
+      }
+      this.dispatch('FormItem', 'on-form-change', this.uploadList)
+    },
+    handleFormatError(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: '文件格式错误',
+        desc: '只能上传 jpeg, jpg 或 png 文件.'
+      })
+    },
+    handleMaxSize(file) {
+      this.remainderCount++
+      console.log('-------handleMaxSize----------')
+      this.$Notice.warning({
+        title: `文件超过${this.fileMaxSize / this.sizeUnit}${this.sizeUnitStr}`,
+        desc: `文件不能大于 ${this.fileMaxSize / this.sizeUnit}${
+          this.sizeUnitStr
+        }`
+      })
+    },
+    handleBeforeUpload() {
+      var check = true
+      if (this.remainderCount <= 0) {
+        this.$Notice.warning({
+          title: `只能上传 ${this.maxUploadFiles} 张图片.`
+        })
+        check = false
+      } else {
+        this.remainderCount--
+      }
+      return check
+    },
+    // 图片上传进度
+    handleProgress(event, file, fileList) {
+      if (file) {
+        file.showProgress = true
+        file.status = 'uploading'
+        file.percentage = event.percent || 100
+        const hasThisUrl =
+          this.uploadList.filter((item) => {
+            return item.uid == file.uid
+          }).length > 0
+        if (!hasThisUrl) {
+          // file.url = file.response.result
+          this.uploadList.push(file)
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+.hideUpload {
+  display: none !important;
+}
+.demo-upload-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 112px;
+  height: 112px;
+  border: 1px solid #dcdee2;
+  border-radius: 4px;
+  margin-right: 16px;
+  .f-s-14 {
+    margin-bottom: 12px;
+    color: #515a6e;
+  }
+  .ivu-icon-md-close-circle {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+}
+.demo-upload-list img {
+  display: block;
+  margin: auto;
+  width: 104px;
+  height: 104px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+.plus-upload {
+  .upload-tips {
+    color: #9ea7b4;
+    margin-top: 12px;
+  }
+  .ivu-progress {
+    line-height: 1;
+    width: ~'calc(100% - 16px)';
+  }
+  .ivu-upload {
+    display: inline-block;
+    width: 112px;
+    height: 112px;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+  /deep/.ivu-upload-drag {
+    width: 112px;
+    height: 112px;
+    background: #f8f8f9;
+    .icon-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      width: 112px;
+      height: 112px;
+      .f-s-14 {
+        margin-top: 12px;
+        color: #515a6e;
+      }
+    }
+  }
+}
+</style>

package/src/extentionPlugin/date.js

@@ -17,6 +17,7 @@ const install = (vue, opts = {}) => {
   vue.prototype.$addYears = addYears
   vue.prototype.$getDateFromString = getDateFromString
   vue.prototype.$formatterDateString = formatterDateString
+  vue.prototype.$dealDate = dealDate
   vue.prototype.$dateDiff = dateDiff
   vue.prototype.$beautyWeekDay = beautyWeekDay
   Date.prototype.addDays = function (days) {
@@ -34,6 +35,18 @@ const install = (vue, opts = {}) => {
   }
 }
 
+function dealDate(fromtime) {
+  const myDate = new Date(fromtime)
+  const year = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
+  let month = myDate.getMonth() // 获取当前月份(0-11,0代表1月)         // 所以获取当前月份是myDate.getMonth()+1;
+  let date = myDate.getDate() // 获取当前日(1-31)
+  month = prefixZero(month + 1)
+  date = prefixZero(date)
+  return `${year}-${month}-${(date)}`
+}
+const prefixZero = (num) => {
+  return (Array(2).join(0) + num).slice(-2)
+}
 function formatterDateString(dateStr, fmt = 'yyyy-MM-dd') {
   if (!dateStr) {
     return '--'

package/src/extentionPlugin/object.js

@@ -43,6 +43,7 @@ const install = (vue, opts = {}) => {
     })
     return result
   }
+  vue.prototype.$isEqual = isEqual
 }
 
 function convertNumberToString(obj) {
@@ -57,6 +58,30 @@ function convertNumberToString(obj) {
   })
   return obj
 }
+function isEqual(obj1, obj2) {
+  // 判断类型是否相等
+  if (typeof obj1 !== typeof obj2) {
+    return false
+  }
+  // 如果是基本类型直接比较值
+  if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) {
+    return obj1 === obj2
+  }
+  // 获取两个对象的属性名数组
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+  // 属性数量不相等，返回false
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+  // 比较每个属性的值
+  for (let key of keys1) {
+    if (!isEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+  return true
+}
 function objValueFromArr(arr, key) {
   let tempValues = []
   arr.forEach(item => {

package/src/extentionPlugin/view.js

@@ -23,9 +23,19 @@ const install = (vue, opts = {}) => {
       vComp.$el.parentNode.removeChild(vComp.$el)
     }
   }
-  vue.prototype.$getComponentInstance = (component) => {
+  vue.prototype.$getComponentInstance = (component, options) => {
+    const defaultConfig = {
+      props: {}
+    }
+    const { props } = Object.assign(Object.assign({}, defaultConfig), options)
     const ComponentClass = Vue.extend(component)
-    const instance = new ComponentClass({ store: opts.store })
+    const instance = new ComponentClass({
+      store: opts.store,
+      props,
+      propsData: {
+        props: props
+      }
+    })
     instance.$mount()
     document.body.appendChild(instance.$el)
     return instance

package/src/index.js

@@ -5,6 +5,9 @@ import ExtentionPlugin from './extentionPlugin'
 import importDirective from './directive'
 import PlusComp from './components/plus-comp'
 import BeginEndDatePicker from './components/begin-end-date-picker'
+import UploadFileSingle from './components/upload-file/upload-file-single'
+import UploadFile from './components/upload-file/upload-file'
+import UploadFileInput from './components/upload-file/upload-file-input'
 
 console.log('--------web-tool---index.js----------')
 
@@ -19,6 +22,9 @@ export default {
   install(vue, opts = {}) {
     vue.use(PlusComp)
     vue.component('BeginEndDatePicker', BeginEndDatePicker)
+    vue.component('UploadFileSingle', UploadFileSingle)
+    vue.component('UploadFile', UploadFile)
+    vue.component('UploadFileInput', UploadFileInput)
     /**
      * 注册指令
      */