ocpview-plus 0.0.1

package/src/components/picturebox/picturebox.vue

@@ -0,0 +1,541 @@
+<template>
+  <div v-show="myConfig.visible"  ref="preview" :style="divStyle">
+    <Row type="flex" :justify="rowJustify" align="middle" :gutter="16"> 
+        <Col v-for="(item,index) in imgData" :key="'pic_' + index" :span="colSpan">
+        <Badge>
+            <template #count>
+                <div style="text-align: center;">
+                    <a v-if="!myConfig.readOnly && (showDelBtn || item.delUrl !== undefined)" href="#" @click.prevent="delFile(index)" style="display:block; height: 50%;">
+                        <Icon type="md-close-circle" color="#ed4014" size="16"  />
+                    </a>
+                    <a v-if="showDownBtn && item.url !== undefined" href="#"    @click.prevent="downFile(index)" style="display:block; height: 50%;">
+                        <Icon type="md-cloud-download" color="#ed4014" size="16" />
+                    </a>
+                </div>
+             </template>
+            <a href="#"  @click.prevent="preview()" >
+                <img :ref="'img_'+item.fileKey" :src="item.url" :data-original="`${item.url}`" :style="imgStyle"  />
+            </a>
+        </Badge> 
+        </Col>
+        <Col :span="colSpan">   
+        <UploadBox ref="uploadbox" v-show="showUpload" :config="myConfig" :readOnly="myConfig.readOnly" @success="handleSuccess" :headers="headers" :style="imgStyle">
+            <template #btn>
+            <Row type="flex" justify="center" align="middle" :style="btnStyle">
+                <Icon :custom="myConfig.defaultIcon"  :size="myConfig.iconSize" :color="iconColor"/>
+                <span v-if="myConfig.text">{{myConfig.text}}</span>
+            </Row>
+            </template>
+        </UploadBox>
+        </Col>
+    </Row>
+    <Row v-show="showMemo" type="flex" justify="start" align="middle" :gutter="16">
+        <Col span='24'>
+           <ShowText :label="myConfig.memo"  contentAlign="left"  :class="myConfig.memoClass"></ShowText>
+        </Col>
+    </Row>
+ </div>
+</template>
+<script>
+    import Base from '@/components/base/controlbase.vue';
+    import UploadBox from './uploadbox.vue';
+    import Viewer from 'viewerjs';
+    import $ from 'jquery';
+    export default {
+        name: 'picturebox',
+        extends: Base,
+        data () {
+            return {
+                myConfig:{
+                    fileNum: 1,
+                    fileSize: 2,
+                    fileType:['jpg','jpeg','png','gif'],
+                    icon:'',
+                    iconSize:18,
+                    iconColor:'',
+                    text:'',
+                    imgPath:'',
+                    notdelfile:'N',
+                    downfile:'',
+                    delfile:'',
+                    uploadfile:'',
+                    multiSelect:false,
+                    simpleFlag:false,
+                    childColNum:6,
+                    proName:{
+                        'billmoduleid':'billmoduleid',
+                        'billno':'billno'
+                    },
+                    memo:'',
+                    memoClass:'',
+                    defaultIcon:'iconfont icon-custom-shangchuanlogo'
+                },
+                rowJustify:'center',
+                visible: false,
+                headers:{
+                    'billmoduleid':'',
+                    'billno':''
+                },
+                imgData:[],
+                userInfo:'',
+                value:'',
+                fileSize:2048,
+                showUpload:true,
+                showDelBtn:true,
+                showDownBtn:true,
+                showPreview:true,
+                uploadFlag:false,
+                showMemo:false,
+                prefixCls:'demo-upload',
+                imgStyle:{},
+                style: {},
+                btnStyle:{},
+                defaultvalue:'',
+                divStyle:{}
+            };
+        },
+        components:{
+          UploadBox
+        },
+        computed:{
+            colSpan () {
+                return this.getSpan();
+            },
+            iconColor () {
+                if (this.myConfig.readOnly) {
+                    return '#e3e5e8';
+                } else {
+                    return '#f3b352'
+                }    
+            }
+        } ,
+        props:{
+            showStyle: {
+                type:String,
+                default:'FormItem'
+            },
+            fileKey:{
+                type:String,
+                default:''
+            }
+        },
+        methods: {
+            customInit() {
+                if (this.myConfig.fileSize) {
+                    this.fileSize = Number(this.myConfig.fileSize) * 1024;
+                }
+                if (this.myConfig.showDelBtn !== undefined) {
+                    this.showDelBtn = this.myConfig.showDelBtn;
+                }
+                if (this.myConfig.showDownBtn !== undefined) {
+                    this.showDownBtn = this.myConfig.showDownBtn;
+                }
+                if (this.myConfig.showPreview !== undefined) {
+                    this.showPreview = this.myConfig.showPreview;
+                }
+                if (this.myConfig.headers !== undefined) {
+                    this.headers = Object.assign({},this.headers,this.myConfig.headers);
+                }
+            
+                if (this.myConfig.width) {
+                    this.style.width = (Number(this.myConfig.width) -2) + 'px';
+                    this.btnStyle.width = (Number(this.myConfig.width) -2) + 'px';
+                }  else {
+                    this.style.width = '98%';
+                    this.btnStyle.width = '98%';
+                }
+                if (this.myConfig.height) {
+                    this.style.height = this.myConfig.height + 'px';
+                    this.style['line-height'] = this.myConfig.height + 'px';
+                    this.btnStyle.height = (Number(this.myConfig.height) -2) + 'px';
+                    this.btnStyle['line-height'] = (Number(this.myConfig.height) -2) + 'px';
+                    
+                } else {
+                    this.style.height = '60px';
+                    this.style['line-height'] = '60px';
+                    this.btnStyle.height = '58px';
+                    this.btnStyle['line-height'] = '58px';
+                }
+                Object.assign(this.imgStyle , this.style);
+
+                if (this.myConfig.imgWidth) {
+                    this.imgStyle.width = this.myConfig.imgWidth+ 'px';
+                    this.btnStyle.width = this.myConfig.imgWidth+ 'px';
+                }
+
+                if (this.myConfig.imgHeight) {
+                    this.imgStyle.height = this.myConfig.imgHeight+ 'px';
+                    this.imgStyle['line-height'] = this.myConfig.imgHeight + 'px';
+                    this.btnStyle.height = (Number(this.myConfig.imgHeight) -2) + 'px';
+                    this.btnStyle['line-height'] = (Number(this.myConfig.imgHeight) -2) + 'px';
+                }
+                if (this.myConfig.divStyle) {
+                    Object.assign(this.divStyle , this.myConfig.divStyle);
+                }
+              
+                if (!this.myConfig.simpleFlag) {
+                    if (!this.myConfig.downfile) {
+                        this.myConfig.downfile =  this.OmdUrl.downfile;
+                    }
+                    if (!this.myConfig.delfile) {
+                        this.myConfig.delfile =  this.OmdUrl.delfile;
+                    }
+                    if (!this.myConfig.uploadfile) {
+                        this.myConfig.uploadfile =  this.OmdUrl.uploadfile;
+                    }
+                    let usercode = this.getUserCode();
+                    let username = this.getUserName();
+                   
+                    let userInfo = '&usercode=' + usercode + '&username=' + username + '&ent_id=' + this.getEnt_id() +'&token=' + this.getToken();
+                    let notdelfile = this.myConfig.notdelfile;
+                    if  (this.myConfig.notdelfile !== undefined) {
+                        notdelfile = this.myConfig.notdelfile;
+                    }
+                    if (notdelfile !== 'Y') {
+                        userInfo = userInfo + '&notdelfile=N';
+                    } else  {
+                        userInfo = userInfo + '&notdelfile=Y';
+                    }
+                    this.userInfo = encodeURI(userInfo);
+                } else {
+                     this.userInfo = this.userInfo + '&ent_id=' + this.getEnt_id();
+                }
+                if (this.myConfig.uploadfile.indexOf('uploadFile') !=-1) {
+                    let url = 'ent_id=' + this.getEnt_id() +'&token=' + this.getToken();
+                    if (this.myConfig.uploadfile.indexOf('?') != -1) {
+                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '&' + encodeURI(url);
+                    } else {
+                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '?' + encodeURI(url);
+                    }
+                    this.headers = {};
+                }  else {
+                    if (this.myConfig.uploadfile.indexOf('?') != -1) {
+                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '&' + 'ent_id=' + this.getEnt_id() +'&token=' + this.getToken();
+                    } else {
+                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '?' + 'ent_id=' + this.getEnt_id() +'&token=' + this.getToken();
+                    }
+                }
+                if (this.myConfig.memo) {
+                    this.showMemo = true;
+                } else {
+                    this.showMemo = false;
+                }
+                if (!this.myConfig.multiSelect) {
+                    this.initFile();
+                } else {
+                    this.rowJustify = 'start';
+                }
+            },
+            initFile() {
+                let value  = this.fatherValue;
+                if (this.fileKey) {
+                    value = this.fileKey;
+                }
+                this.imgData = [];
+                let obj = {};
+                obj.filename = 'img';
+                if (value) {
+                    this.value = value;
+                    this.showUpload = false;
+                    obj.fileKey = this.value;
+                    this.addImgData(obj);  
+                } else {
+                    if (this.config.imgPath) {
+                        let obj = {};
+                        obj.filename = 'img';
+                        obj.imgPath = this.config.imgPath;
+                        this.addImgData (obj);
+                        this.showUpload = false;
+                    } else {
+                        this.showUpload = true;
+                    }
+                }
+                if(this.showUpload) {
+                    if (this.$refs.uploadbox) {
+                        this.$refs.uploadbox.clearData();
+                    }
+                }
+            },
+            setImgPath() {
+                this.imgData = [];
+                if (this.config.imgPath) {
+                    let obj = {};
+                    obj.filename = 'img';
+                    obj.imgPath = this.config.imgPath;
+                    this.addImgData (obj);
+                    this.showUpload = false;
+                } else {
+                    this.showUpload = true;
+                }
+            },
+            handleView () {
+                this.preview();
+            },
+            handleRemove () {
+                this.delFile();
+                this.$refs.upload.clearFiles();
+                this.showUpload = true;
+            },
+            handleSuccess (obj) {
+                if (this.myConfig.multiSelect) {
+                    this.refurbish();
+                } else  {
+                    this.imgData = [];
+                    let data = obj.data;
+                    if (obj.data instanceof Array) {
+                        data = obj.data[0]
+                    }
+                    this.addImgData(data);
+                    this.setFatherValue();
+                    this.showUpload = false;
+                } 
+                if (this.config.onOpenChange) {
+                    this.config.onOpenChange(false);
+                }
+            },
+            refurbish() {
+                if (this.headers.billno && this.headers.billmoduleid) {
+                    this.getFilesInfo(this.headers.billno,this.headers.billmoduleid,this.myConfig.notdelfile,'2',this.setImgData);
+                } else {
+                    this.imgData = [];
+                }
+            },
+            addImgData(temp) {
+                let fileKey = '';
+                if (temp.fileKey !== undefined) {
+                    fileKey = temp.fileKey;
+                }
+                if (temp.filekey !== undefined) {
+                    fileKey = temp.filekey;
+                }
+                if (fileKey) {
+                    let obj = {};
+                    if (this.config.customImgPath) {
+                        obj = this.config.customImgPath(temp);
+                    } else {
+                        this.value = fileKey;
+                        if (!this.myConfig.downfile) {
+                            return;
+                        }
+                        obj.downUrl = this.myConfig.downfile + fileKey + this.userInfo;
+                        if (temp.filename) {
+                            obj.title = temp.filename;
+                        } else {
+                            obj.title = '';
+                        }
+                        obj.url = obj.downUrl;
+                    }
+                    obj.filekey = fileKey;
+                    this.imgData.push(obj);
+                } else {
+                    let obj = {};
+                    if (temp.url !== undefined) {
+                        let list = temp.url.split('/');
+                        this.value = list[list.length - 1];
+                        obj.title = temp.file;
+                        obj.url = temp.url;
+                        obj.downUrl = temp.url;
+                        obj.filekey = this.value;
+                    } else {
+                        obj.title =temp.filename;
+                        obj.url = temp.imgPath;
+                        obj.downUrl = temp.imgPath;
+                    }
+                    this.imgData.push(obj);
+                }        
+            },
+            setImgData (data) {
+                this.imgData = [];
+                let notdelfile = this.myConfig.notdelfile;
+                if  (this.config.notdelfile !== undefined) {
+                    notdelfile = this.config.notdelfile;
+                }
+                let addflag = false;
+                if (data && data.length > 0) {
+                    data.forEach(el => {
+                        addflag = false;
+                        let obj = {};
+                        Object.assign(obj, el);
+                        if (obj.modflag) {
+                            if (notdelfile === 'Y' && obj.modflag === 'M') {
+                                addflag = true;  
+                            }
+                        }
+                        if (!addflag) {
+                            this.imgData.push(obj);
+                        } 
+                    });
+                }
+            },
+            preview () {
+                if (!this.showPreview) {
+                    return;
+                }
+                
+                if (this.viewer == undefined) {
+                    this.viewer =  new Viewer(this.$refs.preview, {
+                        url: "data-original",
+                        show: function () {
+                        this.viewer.update();
+                    },
+                });
+                   // this.viewer = new Viewer(this.$refs.preview, {
+                     //   'url': 'original'
+                   // });
+                }
+                this.viewer.show();
+            },
+            delFile(index) {
+                let delUrl = '';
+                if (index || index === 0) {
+                    if (this.imgData[index].filekey) {
+                        if (this.myConfig.delfile) {
+                            delUrl = this.myConfig.delfile + this.imgData[index].filekey + this.userInfo;
+                        }
+                    }
+                    if (delUrl) {
+                        if (delUrl.indexOf('deleteFile') !=-1) {
+                            $.ajax({
+                                type : 'POST',
+                                url : encodeURI(delUrl),
+                                async : true,
+                                dataType : 'json'
+                            });
+                        } else {
+                            this.asyncPost(encodeURI(delUrl),'',{},null,null,null,'get');
+                        }
+                    } 
+                    if (this.imgData[index].filekey) {
+                        if (this.$refs.uploadbox) {
+                            this.$refs.uploadbox.delFile(this.imgData[index].filekey);
+                        }   
+                    } 
+                    this.imgData.splice(index,1);
+                } else {
+                    let  self = this;
+                    this.imgData.forEach(el => {
+                        let tempDelUrl = '';
+                        if (self.myConfig.delfile && el.filekey) {
+                            delUrl = self.myConfig.delfile + el.filekey + self.userInfo;
+                        }
+                        if (tempDelUrl) {
+                            if (tempDelUrl.indexOf('deleteFile') !=-1) {
+                                this.asyncPost(encodeURI(el.delUrl),'',null,null,null,null,'post');
+                            } else {
+                                this.asyncPost(encodeURI(el.delUrl),'',{},null,null,null,'get');
+                            }
+                        }
+                    });
+                    this.imgData = [];
+                }
+                if (!this.myConfig.multiSelect)	{
+                    this.value = '';
+                    this.showUpload = true;
+                    this.setFatherValue();
+                }
+                
+            },
+            downFile (index) {
+                window.open(encodeURI(this.imgData[index].url), '_self');
+            },
+            valueToFatherValue() {
+                let para= {};
+                if (!this.value) {
+                    para.value = '';
+                } else {
+                    para.value = this.value;
+                }
+                return para;
+            },
+            setFatherValue() {
+                let para = this.valueToFatherValue();
+                para.name = this.myConfig.name;
+                this.$emit('inputValue', para);
+            },
+            watchCustomFatherValue() {
+                this.initFile();
+            },
+            getSpan() {
+                if (this.myConfig.multiSelect) {
+                    return 24/Number(this.myConfig.childColNum);
+                } else  {
+                    if (this.myConfig.isGrid) {
+                        return null;
+                    } else {
+                        return 24;
+                    }
+                } 
+            },
+            setReadOnly(value) {
+                let obj = {};
+                obj.readOnly = value;
+                if (obj.readOnly === false) {
+                    if (this.config.readOnly !== true) {
+                        this.setPro(obj);
+                    } 
+                } else {
+                    this.setPro(obj);
+                }
+            },
+            checkPara () {
+                if (this.$parent && this.$parent.valueData) {
+                    this.setHeaders(this.$parent.valueData);
+                }
+                if (!this.isHeadersOk()) {
+                    if (this.myConfig.paraErrorInfo) {
+                        this.alert(this.myConfig.paraErrorInfo);
+                        return false;
+                    }
+                }
+                return true;
+            },
+            setHeaders(data) {
+                for (let temp in this.headers) {
+                    this.headers[temp] = '';
+                }
+                if (data) {
+                    for (let pro in this.myConfig.proName) {
+                        if (data[this.myConfig.proName[pro]]) {
+                            this.headers[pro] = data[this.myConfig.proName[pro]];
+                        } else {
+                            this.headers[pro] = '';
+                        }
+                    }
+                }
+                this.headers.scenetype = '1';
+                if (this.myConfig.multiSelect) {
+                    this.headers.scenetype = '2';
+                }
+                this.headers.usercode = this.getUserCode();
+                this.headers.username = this.getUserName();
+                
+            },
+            isHeadersOk() {
+                let flag = true;
+                for (let pro in this.headers) {
+                    if (!this.headers[pro]) {                          
+                        flag = false;
+                        break;
+                    }
+                }
+                return flag;
+            },
+            setProValue(data) {
+                if (this.myConfig.multiSelect) {
+                    if (data) {
+                        this.setHeaders(data);
+                        if (this.isHeadersOk()) {
+                            this.refurbish();
+                        } else {
+                            this.imgData = [];
+                        }
+                    }
+                    
+                }
+            }
+        },
+        mounted () {
+            //this.uploadList = this.$refs.upload.fileList;
+        }
+    };
+</script>

package/src/components/picturebox/uploadbox.vue

@@ -0,0 +1,164 @@
+<template>
+  <Upload
+    ref="upload"
+    :show-upload-list="false"
+    :default-file-list="defaultList"
+    :on-success="handleSuccess"
+    :format="myConfig.fileType"
+    :disabled="disabled"
+    :max-size="fileSize"
+    :data="headers"
+    :on-format-error="handleFormatError"
+    :on-exceeded-size="handleMaxSize"
+    :before-upload="handleBeforeUpload"
+    :multiple="multiSelect"
+    type="drag"
+    :class="uploadClass"
+    :action="uploadUrl"
+  >
+    <slot name="btn"></slot>
+  </Upload>
+</template>
+<script>
+export default {
+    name: 'uploadbox',
+    data() {
+        return {
+            defaultList: [],
+            fileSize: 2048,
+            myConfig: {},
+            uploadUrl: '',
+            disabled: false,
+        };
+    },
+    props: {
+        config: {
+            type: Object,
+            default: null,
+        },
+        headers: {
+            type: Object,
+            default: null,
+        },
+        readOnly:{
+            type:Boolean,
+            default:false
+        },
+        multiSelect:{
+            type:Boolean,
+            default:true
+        }
+    },
+    computed: {
+        uploadClass () {
+            if (this.disabled) {
+                return 'efuture-upload-disabled';
+            } else {
+                return '';
+            }
+        }
+    },
+    created() {
+        this.myConfig = Object.assign({}, this.myConfig, this.config);
+        if (this.myConfig.fileSize !== undefined) {
+            this.fileSize = 1024 * Number(this.myConfig.fileSize);
+        }
+        this.uploadUrl = this.myConfig.uploadfile;
+    },
+    methods: {
+        handleSuccess(res, file) {
+            if (res.data && res.data.length > 0) {
+                if (res.data[0].filekey) {
+                    file.filekey = res.data[0].filekey;
+                } else {
+                    if (res.data[0].fileKey) {
+                        file.filekey = res.data[0].fileKey;
+                    } else {
+                        if (res.data[0].url !== undefined) {
+                            let list = res.data[0].url.split('/');
+                            file.filekey = list[list.length - 1];
+                        } 
+                    }
+                }
+            }
+            this.$emit('success', res);
+        },
+        handleFormatError(file) {
+            let type = this.myConfig.fileType.join(',');
+            this.alert('文件[' + file.name + ']的格式不正确，请上传格式为(' + type + ')的文件');
+        },
+        handleMaxSize(file) {
+            let error = '';
+            let size = Number(this.myConfig.fileSize);
+            if (size > 1024) {
+                let size_G = size / 1024;
+                error = size_G.toFixed(2) + 'G';
+            } else if (size < 1) {
+                let size_k = size * 1024;
+                error = size_k.toFixed(2) + 'K';
+            } else {
+                error = size + 'M';
+            }
+            this.alert('文件[' +file.name +']的文件大小不允许超过' + error);
+        },
+        handleBeforeUpload() {
+            if (!this.myConfig.multiSelect) {
+                const check = this.$refs.upload.fileList.length < this.myConfig.fileNum;
+                if (!check) {
+                    this.alert('上传的文件数量过多，请先删除部分已上传文件再上传');
+                }
+                return check;
+            } else {
+                return true;
+            }
+        },
+        delFile(filekey) {
+            const index = this.$refs.upload.fileList.findIndex(el => el.filekey === filekey);
+            if (index > -1) {
+                this.$refs.upload.fileList.splice(index, 1);
+            }
+        },
+        onClick() {
+            let flag = true;
+            if (this.$parent.$parent.$parent.checkPara) {
+                flag = this.$parent.$parent.$parent.checkPara();
+            }
+            if (flag) {
+                if (this.config.onOpenChange) {
+                    this.config.onOpenChange(true);
+                }
+            }
+           
+            if (flag) {
+                if (this.$refs.upload.$refs && this.$refs.upload.$refs.input) {
+                     this.$refs.upload.$refs.input.click();
+                }
+            } 
+            return flag;
+        },
+        clearData () {
+            this.$refs.upload.clearFiles();
+        }
+    },
+    watch: {
+        config: {
+            handler(data) {
+                if (this.readOnly || data.readOnly) {
+                    this.disabled = true;
+                } else {
+                    this.disabled = false;
+                }
+            },
+            deep: true,
+            immediate: true,
+        },
+        readOnly(value) {
+            if (value || this.config.readOnly) {
+                this.disabled = true;
+            } else {
+                this.disabled = false;
+            }
+        }
+    },
+};
+</script>