ocpview-plus 0.0.1

package/src/components/videobox/videobox.vue

@@ -0,0 +1,503 @@
+<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="'video_' + 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>
+                <video :src="item.url" :style="imgStyle" controls="controls">您的浏览器不支持视频</video>
+            </Badge> 
+        </Col>
+        <Col :span="colSpan" >   
+        <UploadBox ref="uploadbox" v-show="showUpload" ismultiple :config="myConfig" :readOnly="myConfig.readOnly" @success="handleSuccess" :headers="headers" :style="imgStyle">
+             <template #btn>
+            <Row type="flex" justify="center" align="middle" :style="btnStyle" >
+                <Icon v-if="myConfig.icon" :type="myConfig.icon" :size="myConfig.iconSize" :color="iconColor"></Icon>
+                <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 $ from 'jquery';
+    export default {
+        name: 'videobox',
+        extends: Base,
+        data () {
+            return {
+                myConfig:{
+                    fileNum: 1,
+                    fileSize: 2,
+                    fileType:['mp4','avi'],
+                    icon:'',
+                    iconSize:12,
+                    iconColor:'',
+                    text:'',
+                    imgPath:'',
+                    notdelfile:'N',
+                    downfile:'',
+                    delfile:'',
+                    uploadfile:'',
+                    multiSelect:false,
+                    simpleFlag:false,
+                    childColNum:6,
+                    proName:{
+                        'billmoduleid':'billmoduleid',
+                        'billno':'billno'
+                    },
+                    memo:'',
+                    memoClass:''
+                },
+                rowJustify:'center',
+                visible: false,
+                headers:{
+                    'billmoduleid':'video',
+                    'billno':'video'
+                },
+                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 this.myConfig.iconColor;
+                }    
+            }
+        } ,
+        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 = '100px';
+                    this.style['line-height'] = '100px';
+                    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();
+                    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() + '&billmoduleid=' + this.headers.billmoduleid;
+                    url = url+'&session='+ JSON.stringify(this.getSession());
+                    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();
+                    } else {
+                        this.myConfig.uploadfile  = this.myConfig.uploadfile + '?' + 'ent_id=' + this.getEnt_id();
+                    }
+                }
+                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 = 'video';
+                if (value) {
+                    this.value = value;
+                    this.showUpload = false;
+                    obj.fileKey = this.value;
+                    this.addImgData(obj);  
+                } else {
+                    if (this.config.imgPath) {
+                        let obj = {};
+                        obj.filename = 'video';
+                        obj.imgPath = this.config.imgPath;
+                        this.addImgData (obj);
+                        this.showUpload = false;
+                    } else {
+                        this.showUpload = true;
+                    }
+                }
+            },
+            setImgPath() {
+                this.imgData = [];
+                if (this.config.imgPath) {
+                    let obj = {};
+                    obj.filename = 'video';
+                    obj.imgPath = this.config.imgPath;
+                    this.addImgData (obj);
+                    this.showUpload = false;
+                } else {
+                    this.showUpload = true;
+                }
+            },
+            handleRemove () {
+                this.delFile();
+                this.$refs.upload.clearFiles();
+                this.showUpload = true;
+            },
+            handleSuccess (obj) {
+                if (this.myConfig.multiSelect) {
+                    this.refurbish();
+                } else  {
+                    this.imgData = [];
+                    this.addImgData(obj.data[0]);
+                    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,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);
+                        } 
+                    });
+                }
+            },
+            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  {
+                    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.myConfig.multiSelect) {
+                    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;
+                } else {
+                    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] = '';
+                        }
+                    }
+                }
+                
+            },
+            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>