ocpview-plus 0.0.1

package/src/components/masterplate/billsinglegrid.vue

@@ -0,0 +1,234 @@
+<template>
+  <Card :padding="0"    dis-hover :bordered="false"  :style="'background:#fff;height:' + clientHeight +'px'">
+    <div ref="head">
+        <Card :padding="0" style="padding-top:14px;padding-left:16px;padding-right:16px;border-radius:0px;" :bordered="false" dis-hover>
+            <ListBtnToolbar ref="menutoolbar" :config="menuToolbar"  :moduleMethod="moduleMethod"   @doAction="doAction"/>
+            <Divider style="margin-top:16px;margin-bottom:0px;" />
+        </Card>
+    </div>
+    <Card :padding="0" :bordered="false" dis-hover style="padding-top:0px;padding-left:16px;padding-right:16px;">
+        <EditGridCardS  ref="grid" :config="myConfig.gridConfig"  :dictData="dictData" />
+    </Card>
+  </Card>
+</template>
+
+<script>
+import ListBtnToolbar from './listbtntoolbar.vue';
+import EditGridCardS from './editgridcard.vue';
+export default {
+    name:'mbillsinglegrid',
+    components:{ListBtnToolbar,EditGridCardS},
+    data () {
+        return {
+            myConfig:{
+               billKey:'ph_key',
+               searchParam:{}
+            },
+            menuToolbar:{}
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        },
+        moduleMethod:{
+            type:Array,
+            default: () => {
+                return [];      
+            }
+        }
+    },
+    computed: {
+        clientHeight () {
+            return this.$Store.state.app.clientHeight;
+        }
+    },
+    created () {
+        this.myConfig =  Object.assign({},this.myConfig, this.config);
+        this.myConfig.gridConfig.headStyle='';
+        this.myConfig.gridConfig.showCondition = false;
+        this.myConfig.gridConfig.showAddBtn = false;
+        this.myConfig.gridConfig.showDelBatchBtn = false;
+        this.myConfig.gridConfig.onSelectionChange = this.gridOnSelectionChange;
+        this.myConfig.gridConfig.height = 1;
+        this.myConfig.gridConfig.width = 1;
+        this.myConfig.gridConfig.adjustHeight = 0;
+        this.myConfig.gridConfig.adjustWidth = 0;
+        this.myConfig.gridConfig.modetype = '2';
+        this.myConfig.gridConfig.showTitle = false;
+        this.myConfig.gridConfig.showPage = false;
+        this.myConfig.gridConfig.generalOrientation = true;
+        
+        if (this.myConfig.gridConfig.pageSizeNum === undefined) {
+            this.myConfig.gridConfig.pageSizeNum = 20;
+        }
+        this.myConfig.gridConfig.items.forEach(el => {
+            if (el.type !== 'CheckBox') {
+                if (el.tooltip === undefined) {
+                    el.tooltip = true;
+                }
+                if (el.resizable  === undefined) {
+                    el.resizable  = true;
+                }
+            }
+        });
+        if (this.myConfig.menuToolbar && this.myConfig.menuToolbar.items) {
+            this.menuToolbar = this.$Method.copy(this.myConfig.menuToolbar);     
+        } 
+    },
+    methods: {
+        doMenuToolbar() {
+            if (this.$refs.menutoolbar) {
+                this.$refs.menutoolbar.setAllReadOnly(true);
+                this.$refs.menutoolbar.setReadOnly('addData',false);
+                this.$refs.menutoolbar.setReadOnly('editData',false);
+            }
+        },
+        doAction(obj) {
+            const method = obj.name;
+            const methodBefore = method + 'Before';
+            const methodAfter = method + 'After';
+            if (obj.name === 'addData' || obj.name === 'editData') {
+                let flag =  true;
+                if (this.$parent[methodBefore]) {
+                    flag = this.$parent[methodBefore](obj);
+                }
+                if (flag) {
+                    if (obj.name === 'addData') {
+                        this.$refs.grid.setReadOnly(false);
+                        this.$refs.menutoolbar.setAllReadOnly(true);
+                        this.$refs.menutoolbar.setReadOnly('saveData', false);
+                        if (flag !== true) {
+                            this.$refs.grid.addRow(flag);
+                        } else {
+                             this.$refs.grid.addRow();
+                        }
+                       
+                    }
+                    if (obj.name === 'editData') {
+                        this.$refs.grid.setReadOnly(false);
+                        this.$refs.menutoolbar.setReadOnly('editData', true);
+                        this.$refs.menutoolbar.setReadOnly('saveData', false);
+                    }
+                    if (this.$parent[methodAfter]) {
+                        this.$parent[methodAfter]();
+                    }
+                }
+            } else {
+                if (obj.name === 'saveData') {
+                    let flag = this.checkValidate();
+                    if (flag) {
+                        this.alert('必填项不允许为空');
+                        return false;
+                    }
+                    obj.para = this.$refs.grid.getChangeData();
+                }
+                obj.onOk = this.onOk;
+                let flag =  true;
+                if (this.$parent[methodBefore]) {
+                    flag = this.$parent[methodBefore](obj);
+                }
+                if (!flag) {
+                    return;
+                }
+                if (obj.name === 'delData') {
+                    let text = '删除';
+                    obj.para = this.$refs.grid.getSelection();
+                    let self = this;
+                    self.$Modal.confirm({
+                        title:'确认',
+                        content:'是否确认' + text + '数据？',
+                        onOk:() => {
+                            obj.para.forEach(el => {
+                                if (obj.name === 'delData') {
+                                    el.flag = 'D';
+                                }
+                            });
+                           this.$emit('doAction', obj);
+                        }
+                    });
+                } else {
+                    this.$emit('doAction', obj);
+                }
+            }
+        },
+        onOk(action, data) {
+            if (action.name === 'saveData') {
+                this.refurbish();
+                this.$refs.menutoolbar.setReadOnly('editData', false);
+                this.$refs.menutoolbar.setReadOnly('saveData', true);
+            }
+            if (action.name === 'delData') {
+                this.refurbish();
+                this.$refs.menutoolbar.setAllReadOnly(false);
+                this.$refs.menutoolbar.setReadOnly('saveData', true);
+            }
+        },
+        refurbish () {
+            this.loading = true;
+            let self = this;
+            self.data = [];
+            let para  = {};
+            if (this.myConfig.gridConfig.searchParam) {
+                para = Object.assign({},{}, this.myConfig.gridConfig.searchParam);
+            }
+            if (!para.page_size) {
+                para.page_size = '99999';
+            }
+            self.asyncPost(self.myConfig.resources,self.myConfig.classPrefix+ '.' + 'search' ,para,function(data) {
+                let curlData = [];
+                if (data && data[self.myConfig.response]) {
+                    curlData = self.$Method.copy(data[self.myConfig.response])
+                }
+                if (self.$parent.setBillData) {
+                    curlData = self.$parent.setBillData(curlData);
+                }
+                self.data = curlData;
+                self.$refs.grid.setData(self.data);
+                self.$refs.grid.setReadOnly(true);
+                self.loading = false;   
+            },function() {
+                self.loading = false;
+            });
+        },
+        checkValidate () {
+            return this.$refs.grid.checkValidate();
+        },
+        getGrid () {
+            return this.$refs.grid;
+        },
+        onOpenChange(value) {
+            this.setGridHeight(value);
+        },
+        setGridHeight() {
+            let height =  this.clientHeight -  this.$refs.head.offsetHeight;
+            this.$refs.grid.setCalHeight(height);
+        },
+        gridOnSelectionChange(rows) {
+            let obj = {};
+            obj.name = 'gridOnSelectionChange';
+            obj.para = rows;
+            if (rows.length > 0) {
+                this.$refs.menutoolbar.setReadOnly('delData',false);
+            } else {
+                this.$refs.menutoolbar.setReadOnly('delData',true);
+            }
+        },
+        getChangeData() {
+            return this.$refs.grid.getChangeData();
+        }
+    },
+    mounted () {
+        this.doMenuToolbar();
+        this.setGridHeight();
+        this.refurbish();
+
+    }
+};
+</script>
+

package/src/components/masterplate/birtreport.vue

@@ -0,0 +1,185 @@
+<template>
+  <Card :padding="0"    dis-hover :bordered="false"  :style="'background:#fff;height:' + clientHeight +'px'">
+    <div ref="toolbarcard" >
+         <Card :padding="0"  style="padding-top:14px;padding-left:16px;padding-right:16px;border-radius:0px;" :bordered="false" dis-hover>
+            <ListBtnToolbar ref="menutoolbar" :config="menuToolbar"  :moduleMethod="moduleMethod"   @doAction="doAction"/>
+            <Divider style="margin-top:16px;margin-bottom:0px;" />
+        </Card>
+    </div>
+    <div ref="formcard">
+    <Card :padding="0"  dis-hover :bordered="false"  style="padding-left:14px;padding-right:14px;padding-top:0px;padding-bottom:0px">
+        <Formcards  ref="form"  :config="myConfig.formConfig" :dictData="dictData"/>
+    </Card>
+    </div>
+    <div style="padding:14px 16px;">
+        <iframe v-if="resert" ref="birtreport" :src="iframeUrl" frameborder="0"  style="width: 100%;border:1px solid #DCDFE6"  :height="currentHeight" allowtransparency="true"  @load="load"></iframe>
+    </div>
+  </Card>
+</template>
+
+<script>
+import ListBtnToolbar from './listbtntoolbar.vue';
+import Formcards from './formcard.vue';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+    name:'mreport',
+    components:{ListBtnToolbar,Formcards},
+    data () {
+        return {
+            myConfig:{
+                titleType:2,
+                divStyle:'padding:5px',
+                title:'查询条件'
+            },
+            menuToolbar:{},
+            gridToolbar:{},
+            frontBtn: [{
+                name:'searchData',text:'查询',icon:'custom-search'
+            },{
+                name:'clearData',text:'清除',icon:'custom-clean'
+            }],
+            birtUrl:'',
+            iframeUrl:'',
+            resert:true,
+            outsideheight:0
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        },
+        moduleMethod:{
+            type:Array,
+            default: () => {
+                return [];      
+            }
+        }
+    },
+    computed: {
+        clientHeight () {
+            return this.$Store.state.app.clientHeight;
+        },
+        currentHeight () {
+            let curlheight = this.$Store.state.app.clientHeight - this.outsideheight - 30;
+            return curlheight;
+        }
+    },
+    created () {
+        this.myConfig =  Object.assign({},this.myConfig, this.config);
+        this.myConfig.formConfig.titleType = this.myConfig.titleType;
+        if (this.myConfig.formConfig.title === undefined) {
+            this.myConfig.formConfig.title = this.myConfig.title;
+        }
+        if (this.myConfig.menuToolbar && this.myConfig.menuToolbar.items) {
+            this.menuToolbar = this.$Method.copy(this.myConfig.menuToolbar);     
+        } 
+        if (!this.menuToolbar.items) {
+            this.menuToolbar.items = [];
+        }
+        let frontBtn = []
+        this.frontBtn.forEach(el => {
+            let index = this.menuToolbar.items.findIndex(el2 => el2.name === el);
+            if (index === -1) {
+                frontBtn.push(el);
+            }
+        });
+        this.menuToolbar.items = frontBtn.concat(this.menuToolbar.items);
+        this.menuToolbar.mainButton = 'searchData';
+        this.menuToolbar.mainButtonText ='查询';
+        this.menuToolbar.ignoreModule = ['searchData','clearData'];
+        this.setReportUrl();
+    },
+    methods: {
+        doAction (obj) {
+            const method = obj.name;
+            if (this.$parent[method]) {
+                this.$parent[method]();
+            } else {
+                if (this[method]) {
+                    this[method]();
+                }
+            }
+        },
+        clearData () {
+            this.$refs.form.clearData();
+            this.resert = false;
+            this.iframeUrl = '';
+        },
+        searchData() {
+            this.$refs.form.checkValidate();
+            let flag = this.$refs.form.isError();
+            if (flag) {
+                this.alert('必填项不允许为空');
+                return false;
+            }
+            let data = this.$refs.form.getData();
+
+            let  url = this.birtUrl + '&__masterpage=true&__showtitle=false&__format=html&__page=1';
+            let paramurl = '';
+            for (let key in data) {
+                if (data[key]) {
+                    paramurl += '&' + key + '=' + data[key];
+                }
+            }
+            //url拼上__userid，__postid ，增加数据范围
+            let userid = this.$Method.getUrlParam('userid');
+            if (userid != null && userid != '') {
+                paramurl += '&__userid=' + userid;
+            }
+            let postid = this.$Method.getUrlParam('postid');
+            if (postid != null && postid != '') {
+                paramurl += '&__postid=' + postid;
+            }
+            paramurl += '&__accesstime=' + new Date().getTime();
+
+            url = encodeURI(url + paramurl);
+            this.iframeUrl = url;
+            this.resert = false;
+            this.$nextTick(() => {
+                this.resert = true;
+            });
+        },
+        refurbish () {
+            this.searchData();
+        },
+        getForm () {
+            return this.$refs.form;
+        },
+        load() {
+            if (this.myConfig.onLoad) {
+                let iframe = this.$refs.birtreport.$el;
+                this.myConfig.onLoad(iframe);
+            }
+        },
+        setReportUrl() {
+            this.birtUrl = '';
+            if (!this.birtUrl) {
+                if (this.$parent.getReportConfig) {
+                    this.birtUrl = this.$parent.getReportConfig();
+                }
+            }
+        },
+         setGridHeight() {
+            let height = this.$refs.toolbarcard.offsetHeight  + this.$refs.formcard.offsetHeight;
+            this.outsideheight = height;
+        }
+    },
+    mounted () {
+        this.observer = elementResizeDetectorMaker();
+        if (this.$refs.formcard) {
+            this.observer.listenTo(this.$refs.formcard, this.setGridHeight);
+        }
+    },
+    beforeUnmount() {
+        if (this.$refs.formcard) {
+            this.observer.removeListener(this.$refs.formcard, this.setGridHeight);
+        }
+    }
+};
+</script>
+