|
|
@@ -1,93 +1,94 @@
|
|
|
<template>
|
|
|
- <div class="ibps-image">
|
|
|
- <!--展示-->
|
|
|
- <ul class="ibps-p-0">
|
|
|
- <li
|
|
|
- v-for="(item, index) in fileList"
|
|
|
- :key="index"
|
|
|
- class="image-reader-item"
|
|
|
- :style="{
|
|
|
- 'backgroundImage': 'url(' + getImageUrl(item.id) + ')' ,
|
|
|
- 'backgroundPosition': 'center center',
|
|
|
- 'backgroundRepeat': 'no-repeat',
|
|
|
- 'backgroundSize': 'cover',
|
|
|
- 'width':`${$utils.isEmpty(width)?100:width}px`,
|
|
|
- 'height':`${$utils.isEmpty(height)?100:height}px`
|
|
|
- }"
|
|
|
- @click="clickHandler(item, index)"
|
|
|
- @mouseover="showTips(item, index)"
|
|
|
- @mouseout="hideTips(item, index)"
|
|
|
- >
|
|
|
- <el-tag
|
|
|
- v-if="!disabled"
|
|
|
- class="image-reader-item-tag"
|
|
|
- @click.stop="onDeleteImage(index)"
|
|
|
- >
|
|
|
- <i class="el-icon-delete" />
|
|
|
- </el-tag>
|
|
|
- <el-tag
|
|
|
- v-if="!disabled"
|
|
|
- class="image-reader-item-tag"
|
|
|
- @click.stop="onDownloadImage(index)"
|
|
|
- >
|
|
|
- <i class="el-icon-download" />
|
|
|
- </el-tag>
|
|
|
- <div
|
|
|
- :class="{'image-tip-visible':item.uid !== uid,'image-tip':item.uid === uid}"
|
|
|
- v-text="tip"
|
|
|
+ <div class="ibps-image">
|
|
|
+ <!--展示-->
|
|
|
+ <ul class="ibps-p-0">
|
|
|
+ <vue-draggable
|
|
|
+ v-if="fileList && fileList.length"
|
|
|
+ v-model="fileList"
|
|
|
+ v-bind="draggableOptions"
|
|
|
+ class="list-group"
|
|
|
+ @start="isDragging = true"
|
|
|
+ @end="()=>{isDragging= false}"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in fileList"
|
|
|
+ :key="index"
|
|
|
+ class="image-reader-item"
|
|
|
+ :style="{
|
|
|
+ 'backgroundImage': 'url(' + getImageUrl(item.id) + ')',
|
|
|
+ 'backgroundPosition': 'center center',
|
|
|
+ 'backgroundRepeat': 'no-repeat',
|
|
|
+ 'backgroundSize': 'cover',
|
|
|
+ 'width': `${$utils.isEmpty(width) ? 100 : width}px`,
|
|
|
+ 'height': `${$utils.isEmpty(height) ? 100 : height}px`
|
|
|
+ }"
|
|
|
+ @click="clickHandler(item, index)"
|
|
|
+ @mouseover="showTips(item, index)"
|
|
|
+ @mouseout="hideTips(item, index)"
|
|
|
+ >
|
|
|
+ <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDeleteImage(index)">
|
|
|
+ <i class="el-icon-delete" />
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDownloadImage(index)">
|
|
|
+ <i class="el-icon-download" />
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-if="!disabled" class="image-reader-item-tag draggable" @click.stop="onDownloadImage(index)">
|
|
|
+ <i class="el-icon-rank" />
|
|
|
+ </el-tag>
|
|
|
+ <div :class="{ 'image-tip-visible': item.uid !== uid, 'image-tip': item.uid === uid }" v-text="tip" />
|
|
|
+ </li>
|
|
|
+ </vue-draggable>
|
|
|
+ </ul>
|
|
|
+ <template v-if="!disabled && (isBuilder || fileList.length < limit || !limit)">
|
|
|
+ <!--ibps 附件上传方式-->
|
|
|
+ <el-upload
|
|
|
+ v-if="uploadType === 'attachment'"
|
|
|
+ :style="uploadStyle"
|
|
|
+ :action="action"
|
|
|
+ :disabled="true"
|
|
|
+ :file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ @click.native="clickAttachmentUpload"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </el-upload>
|
|
|
+ <!--默认附件上传方式-->
|
|
|
+ <el-upload
|
|
|
+ v-else
|
|
|
+ :style="uploadStyle"
|
|
|
+ action="action"
|
|
|
+ list-type="picture-card"
|
|
|
+ :http-request="httpRequest"
|
|
|
+ :file-list="fileList"
|
|
|
+ :multiple="multiple"
|
|
|
+ :accept="fileAccept"
|
|
|
+ :limit="flieLimit"
|
|
|
+ :disabled="disabled"
|
|
|
+ :on-exceed="handlePicAmount"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </el-upload>
|
|
|
+ </template>
|
|
|
+ <!--图片预览-->
|
|
|
+ <ibps-image-viewer
|
|
|
+ v-if="showViewer"
|
|
|
+ :z-index="zIndex"
|
|
|
+ :initial-index="initialIndex"
|
|
|
+ :on-close="closeViewer"
|
|
|
+ :url-list="previewSrcList"
|
|
|
/>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <template v-if="!disabled&&(isBuilder||fileList.length<limit||!limit)">
|
|
|
- <!--ibps 附件上传方式-->
|
|
|
- <el-upload
|
|
|
- v-if="uploadType === 'attachment'"
|
|
|
- :style="uploadStyle"
|
|
|
- :action="action"
|
|
|
- :disabled="true"
|
|
|
- :file-list="fileList"
|
|
|
- list-type="picture-card"
|
|
|
- @click.native="clickAttachmentUpload"
|
|
|
- >
|
|
|
- <i class="el-icon-plus" />
|
|
|
- </el-upload>
|
|
|
- <!--默认附件上传方式-->
|
|
|
- <el-upload
|
|
|
- v-else
|
|
|
- :style="uploadStyle"
|
|
|
- action="action"
|
|
|
- list-type="picture-card"
|
|
|
- :http-request="httpRequest"
|
|
|
- :file-list="fileList"
|
|
|
- :multiple="multiple"
|
|
|
- :accept="fileAccept"
|
|
|
- :limit="flieLimit"
|
|
|
- :disabled="disabled"
|
|
|
- :on-exceed="handlePicAmount"
|
|
|
- :before-upload="beforeUpload"
|
|
|
- >
|
|
|
- <i class="el-icon-plus" />
|
|
|
- </el-upload>
|
|
|
- </template>
|
|
|
- <!--图片预览-->
|
|
|
- <ibps-image-viewer
|
|
|
- v-if="showViewer"
|
|
|
- :z-index="zIndex"
|
|
|
- :initial-index="initialIndex"
|
|
|
- :on-close="closeViewer"
|
|
|
- :url-list="previewSrcList"
|
|
|
- />
|
|
|
|
|
|
- <ibps-uploader-selector-dialog
|
|
|
- :visible="uploaderSelectorVisible"
|
|
|
- :value="selectorValue"
|
|
|
- :multiple="multiple"
|
|
|
- :accept="accept"
|
|
|
- :file-size="size"
|
|
|
- @close="visible => uploaderSelectorVisible = visible"
|
|
|
- @action-event="handleUpload"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <ibps-uploader-selector-dialog
|
|
|
+ :visible="uploaderSelectorVisible"
|
|
|
+ :value="selectorValue"
|
|
|
+ :multiple="multiple"
|
|
|
+ :accept="accept"
|
|
|
+ :file-size="size"
|
|
|
+ @close="visible => uploaderSelectorVisible = visible"
|
|
|
+ @action-event="handleUpload"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -101,457 +102,474 @@ import PopupManager from '@/utils/popup'
|
|
|
import IbpsUploaderSelectorDialog from '@/business/platform/file/uploader'
|
|
|
import IbpsImageViewer from '@/components/ibps-file-viewer/image'
|
|
|
import { TRANSFER_DATA } from '@/constant'
|
|
|
+import VueDraggable from 'vuedraggable'
|
|
|
|
|
|
export default {
|
|
|
- name: 'ibps-image',
|
|
|
- components: {
|
|
|
- IbpsUploaderSelectorDialog,
|
|
|
- IbpsImageViewer
|
|
|
- },
|
|
|
- mixins: [emitter],
|
|
|
- props: {
|
|
|
- value: {
|
|
|
- type: [String, Number, Array, Object]
|
|
|
- },
|
|
|
- size: [Number, String], // 限制大小
|
|
|
- accept: String, // 限制图片类型
|
|
|
- tip: String, // 提示消息
|
|
|
- limit: [Number, String], // 上传数量
|
|
|
- // quality: Number, // 压缩质量
|
|
|
- width: { // 宽
|
|
|
- type: String,
|
|
|
- default: '150'
|
|
|
- },
|
|
|
- height: { // 高
|
|
|
- type: String,
|
|
|
- default: '150'
|
|
|
- },
|
|
|
- disabled: { // 是否禁用
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- isBuilder: { // 是否表单设计
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- multiple: { // 是否支持选择多张
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
|
|
|
- type: String,
|
|
|
- default: 'attachment'
|
|
|
- },
|
|
|
- store: {
|
|
|
- type: String,
|
|
|
- default: 'json',
|
|
|
- validator: function(value) {
|
|
|
- return ['id', 'json', 'array', 'arrayId', 'bind'].indexOf(value) !== -1
|
|
|
- }
|
|
|
- },
|
|
|
- labelKey: { // 展示的值
|
|
|
- type: String,
|
|
|
- default: 'fileName'
|
|
|
- },
|
|
|
- valueKey: { // 存储唯一值
|
|
|
- type: String,
|
|
|
- default: 'id'
|
|
|
- }
|
|
|
- },
|
|
|
- inject: {
|
|
|
- elForm: {
|
|
|
- default: ''
|
|
|
- },
|
|
|
- elFormItem: {
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- action: 'https://www.bpmhome.cn/post',
|
|
|
- fileList: [],
|
|
|
- realFileList: [],
|
|
|
- selectorValue: this.multiple ? [] : {},
|
|
|
- cacheData: {}, // 缓存数据
|
|
|
- initialIndex: 0,
|
|
|
- showViewer: false,
|
|
|
- zIndex: 2000,
|
|
|
- uploaderSelectorVisible: false,
|
|
|
- isActive: false,
|
|
|
- uid: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- flieLimit() {
|
|
|
- return this.$utils.isNotEmpty(this.limit) ? parseInt(this.limit) : null
|
|
|
- },
|
|
|
- fileAccept() {
|
|
|
- if (this.$utils.isEmpty(this.accept) || this.accept === '*') {
|
|
|
- return 'image/*'
|
|
|
- }
|
|
|
- return this.converImageAccept(this.accept)
|
|
|
- },
|
|
|
- previewSrcList() {
|
|
|
- const list = []
|
|
|
- this.fileList.forEach(file => {
|
|
|
- list.push(previewFile(file.id))
|
|
|
- })
|
|
|
- return list
|
|
|
- },
|
|
|
- uploadStyle() {
|
|
|
- const { width, height } = this
|
|
|
- return {
|
|
|
- 'width': `${this.$utils.isEmpty(width) ? 100 : width}px`,
|
|
|
- 'height': `${this.$utils.isEmpty(height) ? 100 : height}px`,
|
|
|
- 'lineHeight': `${this.$utils.isEmpty(height) ? 100 : height}px`,
|
|
|
- 'display': 'inline'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- value(val, oldVal) {
|
|
|
- this.setValue()
|
|
|
- if (!valueEquals(val, oldVal)) {
|
|
|
- this.dispatch('ElFormItem', 'el.form.change', val)
|
|
|
- }
|
|
|
- },
|
|
|
- fileList: {
|
|
|
- handler(val, oldVal) {
|
|
|
- this.$emit('input', this.getValue())
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.setValue()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * zxh 修复zindex 不是最高的被遮住
|
|
|
- */
|
|
|
- fixZIndex() {
|
|
|
- return PopupManager.getZIndex()
|
|
|
- },
|
|
|
- converImageAccept(accept) {
|
|
|
- const accepts = accept.split(',')
|
|
|
- const fileAccept = []
|
|
|
- accepts.forEach((item) => {
|
|
|
- let type = item
|
|
|
- if (item.substr(0, 1) === '.') {
|
|
|
- type = item.substr(1)
|
|
|
+ name: 'ibps-image',
|
|
|
+ components: {
|
|
|
+ IbpsUploaderSelectorDialog,
|
|
|
+ IbpsImageViewer,
|
|
|
+ VueDraggable
|
|
|
+ },
|
|
|
+ mixins: [emitter],
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: [String, Number, Array, Object]
|
|
|
+ },
|
|
|
+ size: [Number, String], // 限制大小
|
|
|
+ accept: String, // 限制图片类型
|
|
|
+ tip: String, // 提示消息
|
|
|
+ limit: [Number, String], // 上传数量
|
|
|
+ // quality: Number, // 压缩质量
|
|
|
+ width: { // 宽
|
|
|
+ type: String,
|
|
|
+ default: '150'
|
|
|
+ },
|
|
|
+ height: { // 高
|
|
|
+ type: String,
|
|
|
+ default: '150'
|
|
|
+ },
|
|
|
+ disabled: { // 是否禁用
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ isBuilder: { // 是否表单设计
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ multiple: { // 是否支持选择多张
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
|
|
|
+ type: String,
|
|
|
+ default: 'attachment'
|
|
|
+ },
|
|
|
+ store: {
|
|
|
+ type: String,
|
|
|
+ default: 'json',
|
|
|
+ validator: function (value) {
|
|
|
+ return ['id', 'json', 'array', 'arrayId', 'bind'].indexOf(value) !== -1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelKey: { // 展示的值
|
|
|
+ type: String,
|
|
|
+ default: 'fileName'
|
|
|
+ },
|
|
|
+ valueKey: { // 存储唯一值
|
|
|
+ type: String,
|
|
|
+ default: 'id'
|
|
|
}
|
|
|
- fileAccept.push('.' + type)
|
|
|
- })
|
|
|
- return fileAccept.join(',')
|
|
|
},
|
|
|
- converFileAccept(accept) {
|
|
|
- const accepts = accept.split(',')
|
|
|
- const fileAccept = []
|
|
|
- accepts.forEach((item) => {
|
|
|
- let type = item
|
|
|
- if (item.substr(0, 1) === '.') {
|
|
|
- type = item.substr(1)
|
|
|
+ inject: {
|
|
|
+ elForm: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ elFormItem: {
|
|
|
+ default: ''
|
|
|
}
|
|
|
- fileAccept.push(imageAccept[type])
|
|
|
- })
|
|
|
- return fileAccept
|
|
|
},
|
|
|
- setValue() {
|
|
|
- if (this.$utils.isEmpty(this.value)) {
|
|
|
- this.fileList = []
|
|
|
- return
|
|
|
- }
|
|
|
- // TODO: id展示问题
|
|
|
- this.fileList = this.getArrayValue(this.value)
|
|
|
- this.initRealFileList()
|
|
|
- },
|
|
|
- initRealFileList() {
|
|
|
- this.realFileList = []
|
|
|
- this.fileList.forEach(v => {
|
|
|
- const id = v[this.valueKey]
|
|
|
- if (this.cacheData[id]) {
|
|
|
- this.setRealFileList(id)
|
|
|
- } else {
|
|
|
- this.getDataInfo(id)
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ action: 'https://www.bpmhome.cn/post',
|
|
|
+ fileList: [],
|
|
|
+ realFileList: [],
|
|
|
+ selectorValue: this.multiple ? [] : {},
|
|
|
+ cacheData: {}, // 缓存数据
|
|
|
+ initialIndex: 0,
|
|
|
+ showViewer: false,
|
|
|
+ zIndex: 2000,
|
|
|
+ uploaderSelectorVisible: false,
|
|
|
+ isActive: false,
|
|
|
+ uid: '',
|
|
|
+ isDragging: false,
|
|
|
+ draggableOptions: {
|
|
|
+ handle: '.draggable',
|
|
|
+ ghostClass: 'sortable-ghost',
|
|
|
+ distance: 1,
|
|
|
+ disabled: false,
|
|
|
+ animation: 200,
|
|
|
+ axis: 'y'
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- setCacheData(v) {
|
|
|
- this.cacheData[v[this.valueKey]] = v
|
|
|
- },
|
|
|
- setRealFileList(v) {
|
|
|
- this.realFileList.push(this.cacheData[v])
|
|
|
- },
|
|
|
- /**
|
|
|
- * 通过ID获取数据
|
|
|
- */
|
|
|
- getDataInfo(id) {
|
|
|
- if (TRANSFER_DATA === 'transfer') {
|
|
|
- this.getTransferData(id)
|
|
|
- } else {
|
|
|
- this.getRemoteData(id)
|
|
|
- }
|
|
|
- },
|
|
|
- getTransferData(id) {
|
|
|
- remoteTransRequest('attachment', id).then(idset => {
|
|
|
- const ids = Array.from(idset)
|
|
|
- remoteRequest('attachmentIds', ids, () => {
|
|
|
- return this.getRemoteTransFunc(ids)
|
|
|
- }).then(response => {
|
|
|
- const responseData = response.data
|
|
|
- const data = responseData[id]
|
|
|
- this.setRemoteData(data)
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getRemoteTransFunc(ids) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- transfer({
|
|
|
- 'ids': ids
|
|
|
- }).then(response => {
|
|
|
- resolve(response)
|
|
|
- }).catch((error) => {
|
|
|
- reject(error)
|
|
|
- })
|
|
|
- })
|
|
|
},
|
|
|
-
|
|
|
- getRemoteData(id) {
|
|
|
- remoteRequest('attachment' + this.valueKey, id, () => {
|
|
|
- return this.getRemoteByIdFunc(id)
|
|
|
- }).then(response => {
|
|
|
- const data = response.data
|
|
|
- this.setRemoteData(data)
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- },
|
|
|
- getRemoteByIdFunc(id) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- get({
|
|
|
- attachmentId: id
|
|
|
- }).then(response => {
|
|
|
- resolve(response)
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- setRemoteData(data) {
|
|
|
- if (this.$utils.isNotEmpty(data)) {
|
|
|
- this.cacheData[data[this.valueKey]] = data
|
|
|
- this.setSelectorValue(data[this.valueKey])
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获得数组数据
|
|
|
- */
|
|
|
- getArrayValue(value) {
|
|
|
- if (this.$utils.isEmpty(value)) {
|
|
|
- return []
|
|
|
- }
|
|
|
- if (this.store === 'json') { // json
|
|
|
- try {
|
|
|
- return this.$utils.parseData(value)
|
|
|
- } catch (error) {
|
|
|
- console.error(error)
|
|
|
- return []
|
|
|
+ computed: {
|
|
|
+ flieLimit () {
|
|
|
+ return this.$utils.isNotEmpty(this.limit) ? parseInt(this.limit) : null
|
|
|
+ },
|
|
|
+ fileAccept () {
|
|
|
+ if (this.$utils.isEmpty(this.accept) || this.accept === '*') {
|
|
|
+ return 'image/*'
|
|
|
+ }
|
|
|
+ return this.converImageAccept(this.accept)
|
|
|
+ },
|
|
|
+ previewSrcList () {
|
|
|
+ const list = []
|
|
|
+ this.fileList.forEach(file => {
|
|
|
+ list.push(previewFile(file.id))
|
|
|
+ })
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ uploadStyle () {
|
|
|
+ const { width, height } = this
|
|
|
+ return {
|
|
|
+ 'width': `${this.$utils.isEmpty(width) ? 100 : width}px`,
|
|
|
+ 'height': `${this.$utils.isEmpty(height) ? 100 : height}px`,
|
|
|
+ 'lineHeight': `${this.$utils.isEmpty(height) ? 100 : height}px`,
|
|
|
+ 'display': 'inline'
|
|
|
+ }
|
|
|
}
|
|
|
- } else if (this.store === 'id') { // id
|
|
|
- return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
|
|
|
- } else { // array
|
|
|
- return value.map((d) => {
|
|
|
- return d[this.valueKey]
|
|
|
- })
|
|
|
- }
|
|
|
},
|
|
|
- getStoreValue(value) {
|
|
|
- const res = []
|
|
|
- if (this.store === 'json') { // json
|
|
|
- if (this.$utils.isEmpty(value)) {
|
|
|
- return ''
|
|
|
+ watch: {
|
|
|
+ value (val, oldVal) {
|
|
|
+ this.setValue()
|
|
|
+ if (!valueEquals(val, oldVal)) {
|
|
|
+ this.dispatch('ElFormItem', 'el.form.change', val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fileList: {
|
|
|
+ handler (val, oldVal) {
|
|
|
+ console.log(val)
|
|
|
+ this.$emit('input', this.getValue())
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
- value.forEach(v => {
|
|
|
- const o = {}
|
|
|
- o[this.valueKey] = v[this.valueKey]
|
|
|
- o[this.labelKey] = v[this.labelKey]
|
|
|
- res.push(o)
|
|
|
- })
|
|
|
- return JSON.stringify(res)
|
|
|
- } else if (this.store === 'id') { // id
|
|
|
- if (this.$utils.isEmpty(value)) {
|
|
|
- return ''
|
|
|
- }
|
|
|
- value.forEach(v => {
|
|
|
- res.push(v[this.valueKey])
|
|
|
- })
|
|
|
- return res.join(this.storeSeparator)
|
|
|
- } else { // 数组 array
|
|
|
- return value || []
|
|
|
- }
|
|
|
- },
|
|
|
- getValue() {
|
|
|
- return this.getStoreValue(this.fileList)
|
|
|
- },
|
|
|
- showTips(item, index) {
|
|
|
- this.uid = item.uid
|
|
|
- // item.isActive = true
|
|
|
- },
|
|
|
- hideTips(item, index) {
|
|
|
- this.uid = ''
|
|
|
- },
|
|
|
- /**
|
|
|
- * 文件上传
|
|
|
- */
|
|
|
- httpRequest(options) {
|
|
|
- return uploadFile(options.file, {}).then((response) => {
|
|
|
- const data = response.data
|
|
|
- this.setCacheData(data)
|
|
|
- this.fileList.push(data)
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 上传方式为ibps附件上传时
|
|
|
- */
|
|
|
- clickAttachmentUpload() {
|
|
|
- this.uploaderSelectorVisible = true
|
|
|
- },
|
|
|
- handleSuccess(response, file, fileList) {
|
|
|
- if (!this.disabled) {
|
|
|
- this.fileList = fileList.map(item => {
|
|
|
- item.isActive = false
|
|
|
- return item
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // handleChange(file, fileList) {
|
|
|
- // this.fileList = fileList
|
|
|
- // },
|
|
|
- // handleRemove(file, fileList) {
|
|
|
- // this.fileList = fileList
|
|
|
- // },
|
|
|
- // 预览
|
|
|
- clickHandler(file, index) {
|
|
|
- this.zIndex = this.fixZIndex()
|
|
|
- this.initialIndex = index
|
|
|
- this.showViewer = true
|
|
|
- },
|
|
|
- closeViewer() {
|
|
|
- this.showViewer = false
|
|
|
- },
|
|
|
- /**
|
|
|
- * 删除图片
|
|
|
- */
|
|
|
- onDeleteImage(index) {
|
|
|
- // if (this.uploadType === 'default') {
|
|
|
- // TODD:删除同时删除数据库的
|
|
|
- // } else {
|
|
|
- this.fileList.splice(index, 1)
|
|
|
- // }
|
|
|
},
|
|
|
- // 下载
|
|
|
- onDownloadImage(index) {
|
|
|
- this.setRealFileList(this.fileList[index][this.valueKey])
|
|
|
- this.$nextTick(() => {
|
|
|
- downloadFile(this.realFileList[index])
|
|
|
- })
|
|
|
- },
|
|
|
- // 图片上传数量限制
|
|
|
- handlePicAmount(files, fileList) {
|
|
|
- if (this.multiple && this.limit) {
|
|
|
- this.$message.closeAll()
|
|
|
- this.$message({
|
|
|
- message: `图片上传上限${this.limit}张`,
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 格式、大小限制
|
|
|
- beforeUpload(file) {
|
|
|
- let isType = true
|
|
|
- if (this.$utils.isNotEmpty(this.accept) && this.accept !== '*') {
|
|
|
- const acceptType = this.converFileAccept(this.accept)
|
|
|
- isType = this.accept ? acceptType.includes(file.type) : true
|
|
|
- if (!isType) {
|
|
|
- this.$message.closeAll()
|
|
|
- this.$message.error(`上传图片的格式必须为【${this.accept}】`)
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
+ mounted () {
|
|
|
+ this.setValue()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * zxh 修复zindex 不是最高的被遮住
|
|
|
+ */
|
|
|
+ fixZIndex () {
|
|
|
+ return PopupManager.getZIndex()
|
|
|
+ },
|
|
|
+ converImageAccept (accept) {
|
|
|
+ const accepts = accept.split(',')
|
|
|
+ const fileAccept = []
|
|
|
+ accepts.forEach((item) => {
|
|
|
+ let type = item
|
|
|
+ if (item.substr(0, 1) === '.') {
|
|
|
+ type = item.substr(1)
|
|
|
+ }
|
|
|
+ fileAccept.push('.' + type)
|
|
|
+ })
|
|
|
+ return fileAccept.join(',')
|
|
|
+ },
|
|
|
+ converFileAccept (accept) {
|
|
|
+ const accepts = accept.split(',')
|
|
|
+ const fileAccept = []
|
|
|
+ accepts.forEach((item) => {
|
|
|
+ let type = item
|
|
|
+ if (item.substr(0, 1) === '.') {
|
|
|
+ type = item.substr(1)
|
|
|
+ }
|
|
|
+ fileAccept.push(imageAccept[type])
|
|
|
+ })
|
|
|
+ return fileAccept
|
|
|
+ },
|
|
|
+ setValue () {
|
|
|
+ if (this.$utils.isEmpty(this.value)) {
|
|
|
+ this.fileList = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // TODO: id展示问题
|
|
|
+ this.fileList = this.getArrayValue(this.value)
|
|
|
+ this.initRealFileList()
|
|
|
+ },
|
|
|
+ initRealFileList () {
|
|
|
+ this.realFileList = []
|
|
|
+ this.fileList.forEach(v => {
|
|
|
+ const id = v[this.valueKey]
|
|
|
+ if (this.cacheData[id]) {
|
|
|
+ this.setRealFileList(id)
|
|
|
+ } else {
|
|
|
+ this.getDataInfo(id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setCacheData (v) {
|
|
|
+ this.cacheData[v[this.valueKey]] = v
|
|
|
+ },
|
|
|
+ setRealFileList (v) {
|
|
|
+ this.realFileList.push(this.cacheData[v])
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 通过ID获取数据
|
|
|
+ */
|
|
|
+ getDataInfo (id) {
|
|
|
+ if (TRANSFER_DATA === 'transfer') {
|
|
|
+ this.getTransferData(id)
|
|
|
+ } else {
|
|
|
+ this.getRemoteData(id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTransferData (id) {
|
|
|
+ remoteTransRequest('attachment', id).then(idset => {
|
|
|
+ const ids = Array.from(idset)
|
|
|
+ remoteRequest('attachmentIds', ids, () => {
|
|
|
+ return this.getRemoteTransFunc(ids)
|
|
|
+ }).then(response => {
|
|
|
+ const responseData = response.data
|
|
|
+ const data = responseData[id]
|
|
|
+ this.setRemoteData(data)
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRemoteTransFunc (ids) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ transfer({
|
|
|
+ 'ids': ids
|
|
|
+ }).then(response => {
|
|
|
+ resolve(response)
|
|
|
+ }).catch((error) => {
|
|
|
+ reject(error)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
|
|
|
- if (!isLimitSize) {
|
|
|
- this.$message.closeAll()
|
|
|
- this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
|
|
|
- return false
|
|
|
- }
|
|
|
- return isLimitSize && isType
|
|
|
- },
|
|
|
- handleUpload(buttonKey, data) {
|
|
|
- const limit = parseInt(this.limit)
|
|
|
- if (this.$utils.isNotEmpty(this.limit) && data.length > limit) {
|
|
|
- this.$message.closeAll()
|
|
|
- this.$message.error(`图片上传上限${this.limit}张`)
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.$utils.isNotEmpty(this.fileList) && (this.fileList.length >= limit || this.fileList.length + data.length > limit)) {
|
|
|
- this.$message.closeAll()
|
|
|
- this.$message.error(`图片数量上限为${this.limit}张`)
|
|
|
- return
|
|
|
- }
|
|
|
- data.forEach(d => {
|
|
|
- this.setCacheData(d)
|
|
|
- this.fileList.push(d)
|
|
|
- })
|
|
|
- this.uploaderSelectorVisible = false
|
|
|
- },
|
|
|
- getImageUrl(id) {
|
|
|
- return previewFile(id)
|
|
|
+ getRemoteData (id) {
|
|
|
+ remoteRequest('attachment' + this.valueKey, id, () => {
|
|
|
+ return this.getRemoteByIdFunc(id)
|
|
|
+ }).then(response => {
|
|
|
+ const data = response.data
|
|
|
+ this.setRemoteData(data)
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRemoteByIdFunc (id) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ get({
|
|
|
+ attachmentId: id
|
|
|
+ }).then(response => {
|
|
|
+ resolve(response)
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setRemoteData (data) {
|
|
|
+ if (this.$utils.isNotEmpty(data)) {
|
|
|
+ this.cacheData[data[this.valueKey]] = data
|
|
|
+ this.setSelectorValue(data[this.valueKey])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获得数组数据
|
|
|
+ */
|
|
|
+ getArrayValue (value) {
|
|
|
+ if (this.$utils.isEmpty(value)) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ if (this.store === 'json') { // json
|
|
|
+ try {
|
|
|
+ return this.$utils.parseData(value)
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ } else if (this.store === 'id') { // id
|
|
|
+ return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
|
|
|
+ } else { // array
|
|
|
+ return value.map((d) => {
|
|
|
+ return d[this.valueKey]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getStoreValue (value) {
|
|
|
+ const res = []
|
|
|
+ if (this.store === 'json') { // json
|
|
|
+ if (this.$utils.isEmpty(value)) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ value.forEach(v => {
|
|
|
+ const o = {}
|
|
|
+ o[this.valueKey] = v[this.valueKey]
|
|
|
+ o[this.labelKey] = v[this.labelKey]
|
|
|
+ res.push(o)
|
|
|
+ })
|
|
|
+ return JSON.stringify(res)
|
|
|
+ } else if (this.store === 'id') { // id
|
|
|
+ if (this.$utils.isEmpty(value)) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ value.forEach(v => {
|
|
|
+ res.push(v[this.valueKey])
|
|
|
+ })
|
|
|
+ return res.join(this.storeSeparator)
|
|
|
+ } else { // 数组 array
|
|
|
+ return value || []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getValue () {
|
|
|
+ return this.getStoreValue(this.fileList)
|
|
|
+ },
|
|
|
+ showTips (item, index) {
|
|
|
+ this.uid = item.uid
|
|
|
+ // item.isActive = true
|
|
|
+ },
|
|
|
+ hideTips (item, index) {
|
|
|
+ this.uid = ''
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 文件上传
|
|
|
+ */
|
|
|
+ httpRequest (options) {
|
|
|
+ return uploadFile(options.file, {}).then((response) => {
|
|
|
+ const data = response.data
|
|
|
+ this.setCacheData(data)
|
|
|
+ this.fileList.push(data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 上传方式为ibps附件上传时
|
|
|
+ */
|
|
|
+ clickAttachmentUpload () {
|
|
|
+ this.uploaderSelectorVisible = true
|
|
|
+ },
|
|
|
+ handleSuccess (response, file, fileList) {
|
|
|
+ if (!this.disabled) {
|
|
|
+ this.fileList = fileList.map(item => {
|
|
|
+ item.isActive = false
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // handleChange(file, fileList) {
|
|
|
+ // this.fileList = fileList
|
|
|
+ // },
|
|
|
+ // handleRemove(file, fileList) {
|
|
|
+ // this.fileList = fileList
|
|
|
+ // },
|
|
|
+ // 预览
|
|
|
+ clickHandler (file, index) {
|
|
|
+ this.zIndex = this.fixZIndex()
|
|
|
+ this.initialIndex = index
|
|
|
+ this.showViewer = true
|
|
|
+ },
|
|
|
+ closeViewer () {
|
|
|
+ this.showViewer = false
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 删除图片
|
|
|
+ */
|
|
|
+ onDeleteImage (index) {
|
|
|
+ // if (this.uploadType === 'default') {
|
|
|
+ // TODD:删除同时删除数据库的
|
|
|
+ // } else {
|
|
|
+ this.fileList.splice(index, 1)
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 下载
|
|
|
+ onDownloadImage (index) {
|
|
|
+ this.setRealFileList(this.fileList[index][this.valueKey])
|
|
|
+ this.$nextTick(() => {
|
|
|
+ downloadFile(this.realFileList[index])
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 图片上传数量限制
|
|
|
+ handlePicAmount (files, fileList) {
|
|
|
+ if (this.multiple && this.limit) {
|
|
|
+ this.$message.closeAll()
|
|
|
+ this.$message({
|
|
|
+ message: `图片上传上限${this.limit}张`,
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 格式、大小限制
|
|
|
+ beforeUpload (file) {
|
|
|
+ let isType = true
|
|
|
+ if (this.$utils.isNotEmpty(this.accept) && this.accept !== '*') {
|
|
|
+ const acceptType = this.converFileAccept(this.accept)
|
|
|
+ isType = this.accept ? acceptType.includes(file.type) : true
|
|
|
+ if (!isType) {
|
|
|
+ this.$message.closeAll()
|
|
|
+ this.$message.error(`上传图片的格式必须为【${this.accept}】`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
|
|
|
+ if (!isLimitSize) {
|
|
|
+ this.$message.closeAll()
|
|
|
+ this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return isLimitSize && isType
|
|
|
+ },
|
|
|
+ handleUpload (buttonKey, data) {
|
|
|
+ const limit = parseInt(this.limit)
|
|
|
+ if (this.$utils.isNotEmpty(this.limit) && data.length > limit) {
|
|
|
+ this.$message.closeAll()
|
|
|
+ this.$message.error(`图片上传上限${this.limit}张`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.$utils.isNotEmpty(this.fileList) && (this.fileList.length >= limit || this.fileList.length + data.length > limit)) {
|
|
|
+ this.$message.closeAll()
|
|
|
+ this.$message.error(`图片数量上限为${this.limit}张`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ data.forEach(d => {
|
|
|
+ this.setCacheData(d)
|
|
|
+ this.fileList.push(d)
|
|
|
+ })
|
|
|
+ this.uploaderSelectorVisible = false
|
|
|
+ },
|
|
|
+ getImageUrl (id) {
|
|
|
+ return previewFile(id)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-.ibps-image {
|
|
|
- .el-upload-list--picture-card {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-upload--picture-card{
|
|
|
- width: inherit;
|
|
|
- height: inherit;
|
|
|
- line-height: inherit;
|
|
|
- }
|
|
|
- .image-reader-item {
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- width: 23.5%;
|
|
|
- margin-bottom: 2%;
|
|
|
- margin-right: 2%;
|
|
|
- background: #FFF;
|
|
|
- box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
|
|
|
- box-sizing: border-box;
|
|
|
- list-style: none;
|
|
|
- border-radius: 4px;
|
|
|
- background-size: cover;
|
|
|
- overflow: hidden;
|
|
|
- .image-reader-item-tag{
|
|
|
- background: #111A34;
|
|
|
- color: #fff;
|
|
|
- float: right;
|
|
|
- border-radius: 0;
|
|
|
- padding: 0 10px;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- .image-tip-visible {
|
|
|
- display: none
|
|
|
- }
|
|
|
- .image-tip {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- color: #fff;
|
|
|
- background: #111A34;
|
|
|
- font-size: 12px;
|
|
|
- width: 100%;
|
|
|
+ .ibps-image {
|
|
|
+ font-size: 28px;
|
|
|
+ .el-upload-list--picture-card {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-upload--picture-card {
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ line-height: inherit;
|
|
|
+ }
|
|
|
+ .image-reader-item {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 23.5%;
|
|
|
+ margin-bottom: 2%;
|
|
|
+ margin-right: 2%;
|
|
|
+ background: #FFF;
|
|
|
+ box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
|
|
|
+ box-sizing: border-box;
|
|
|
+ list-style: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-size: cover;
|
|
|
+ overflow: hidden;
|
|
|
+ .image-reader-item-tag {
|
|
|
+ background: #111A34;
|
|
|
+ color: #fff;
|
|
|
+ float: right;
|
|
|
+ border-radius: 0;
|
|
|
+ padding: 0 10px;
|
|
|
+ border: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .draggable {
|
|
|
+ cursor: move;
|
|
|
+ }
|
|
|
+ .image-tip-visible {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+ .image-tip {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ color: #fff;
|
|
|
+ background: #111A34;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
liujiayin