ocpview-plus 0.0.1

package/src/components/masterplate/report.vue

@@ -0,0 +1,357 @@
+<template>
+  <Card :padding="0"    dis-hover :bordered="false"  :style="'background:#fff;overflow:hidden;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>
+    <Tabs v-if="myConfig.tabFlag" class="tabmode" v-model='curTab' @on-click="tabClick">
+            <TabPane v-for="(item,index) in myConfig.tabConfig" :label="item.title"  style="background:#fff" :name="item.code" :key="index">
+                 <SimpleViewGrid :ref="item.code" :config="myConfig[item.gridName]"  :dictData="dictData"  @dbclick="dbclick" />
+            </TabPane>
+        </Tabs>
+    <Card v-else :padding="0"  style="padding:14px 16px;" :bordered="false" dis-hover>
+        <SimpleViewGrid  ref="grid" :config="myConfig.gridConfig"  :dictData="dictData"  @dbclick="dbclick" />
+    </Card>
+  </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:'查询条件',
+                showMaxRow:2,
+                tabFlag:false,
+                showAsyncImportExport:false,
+                tabConfig:[]
+            },
+            curTab:'',
+            menuToolbar:{},
+            gridToolbar:{},
+            hideItems:[],
+            frontBtn: [{
+                name:'searchData',text:'查询',icon:'custom-search'
+            },{
+                name:'clearData',text:'清除',icon:'custom-clean'
+            }]
+        };
+    },
+    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);
+        if (this.myConfig.tabFlag) {
+            this.myConfig.tabConfig.forEach((el,index) => {
+                if (index === 0) {
+                    this.curTab = el.code;
+                }
+                this.initGridConfig(el.gridName);
+            });
+        } else {
+            this.initGridConfig('gridConfig');
+        }
+        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);     
+        } 
+        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'];
+        let lineNum = this.myConfig.formConfig.lineNum;
+        let culLineNum = 0;
+        let flag = true;
+        
+        this.myConfig.formConfig.items.forEach(el => {
+            if (el.colNum) {
+                culLineNum = culLineNum + Number(el.colNum)
+            } else {
+                culLineNum++;
+            }
+            if (flag && culLineNum > Number(lineNum)* Number(this.myConfig.showMaxRow)) {
+                flag = false
+            } 
+            if (!flag){
+                el.visible = false;
+                this.hideItems.push(el);
+            }
+        });
+        if (this.hideItems.length > 0) {
+            this.myConfig.formConfig.items.push({
+                type:'Divider',
+                orientation:'right',
+                hide:true,
+                style: 'margin:2px 0',
+                dividerName:'hidedivider',
+                doHide:this.doHide
+            });
+        }
+    },
+    methods: {
+        doAction (obj) {
+            const method = obj.name;
+            if (this.$parent[method]) {
+                this.$parent[method](obj);
+            } else {
+                if (this[method]) {
+                    this[method](obj);
+                }
+            }
+        },
+        dbclick (e) {
+            let obj = {};
+            obj.name ='gridDbClick';
+            obj.rowinfo = {};
+            obj.rowinfo.row = e;
+            if (this.myConfig.tabFlag) {
+                obj.rowinfo.gridObject = this.$refs[this.curTab][0];
+            } else {
+                  obj.rowinfo.gridObject = this.$refs.grid;
+            }
+          
+            this.doAction(obj);
+        },
+        initGridConfig(name) {
+            if (!this.myConfig[name]) {
+                return;
+            }
+            this.myConfig[name].headStyle='';
+            this.myConfig[name].showCondition = false;
+            this.myConfig[name].onSelectionChange = this.gridOnSelectionChange;
+            if (this.myConfig[name].resources === undefined) {
+                this.myConfig[name].resources =this.config.resources;
+            }
+            if (this.myConfig[name].method === undefined) {
+                this.myConfig[name].method = this.config.classPrefix + '.' +'query';
+            }
+            if (this.myConfig[name].response === undefined) {
+                this.myConfig[name].response =  this.config.response;
+            }
+            this.myConfig[name].height = 1;
+            this.myConfig[name].width = 1;
+            this.myConfig[name].adjustHeight = 0;
+            this.myConfig[name].adjustWidth = 0;
+            this.myConfig[name].pageSize='small'; 
+            
+            if (this.myConfig[name].pageSizeNum === undefined) {
+                this.myConfig[name].pageSizeNum = 20;
+            }
+            this.myConfig[name].items.forEach(el => {
+                if (el.type !== 'CheckBox') {
+                    if (el.tooltip === undefined) {
+                        el.tooltip = true;
+                    }
+                }
+            });
+        },
+        tabClick(e) {
+            if (this.$parent.tabClick) {
+                this.$parent.tabClick(e);
+            }
+        },
+        clearData () {
+            this.$refs.form.clearData();
+            this.$refs.grid.clearSearchBeforeSearchParam();
+            this.$refs.grid.clearData();
+        },
+        doHide(obj) {
+            let items = [];
+            this.hideItems.forEach(el => {
+                let item = {};
+                if (el.sname) {
+                    item.sname = el.sname;
+                }
+                if (el.name) {
+                    item.name = el.name;
+                }
+                el.visible = obj.value;
+                item.visible = obj.value;
+                items.push(item);
+            });
+            this.$refs.form.updateItemsConfig(items);
+        },
+        searchData() {
+            this.$refs.form.checkValidate();
+            let flag = this.$refs.form.isError();
+            if (flag) {
+                this.alert('必填项不允许为空');
+                return false;
+            }
+            if (this.$parent.searchCheck) {
+                let tmpFlag = true;
+                tmpFlag = this.$parent.searchCheck();
+                if (!tmpFlag) {
+                    return false;
+                }
+            }
+            
+            let data = this.$refs.form.getData();
+            let searchParam = {};
+            for (let pro in data) {
+                if (data[pro] || data[pro] === 0) {
+                    searchParam[pro] = data[pro];
+                }
+            }
+            if (this.myConfig.overrideSearchParam) {
+                searchParam =  this.myConfig.overrideSearchParam(searchParam);
+            } 
+            if (this.myConfig.tabFlag) {
+                let gridName = this.myConfig.tabConfig[0].code;
+                if (this.$refs[gridName] && this.$refs[gridName][0]) {
+                    this.$refs[gridName][0].clearSearchBeforeSearchParam();
+                    this.$refs[gridName][0].setSearchBeforeSearchParam(searchParam);
+                    this.$refs[gridName][0].refurbish();
+                    this.curTab = gridName;
+                }
+            } else {
+                this.$refs.grid.clearSearchBeforeSearchParam();
+                this.$refs.grid.setSearchBeforeSearchParam(searchParam);
+                this.$refs.grid.refurbish();
+            }
+           
+        },
+        exportData() {
+            if (this.myConfig.tabFlag) {
+                if (this.$refs[this.curTab] && this.$refs[this.curTab][0]) {
+                    let grid = this.$refs[this.curTab][0];
+                    this.commonExport(grid);
+                }
+            } else {
+               this.commonExport(this.$refs.grid);
+            }
+        },
+        setTab(name) {
+            this.curTab = name;
+        },
+        commonExport(grid) {
+            let data = grid.getData();
+            if (data.length  === 0) {
+                this.alert('请先查询数据');
+                return false;
+            }
+            if (grid.config.dynamicColumnFlag) {
+                 grid.dynamicExportExcel();
+            } else {
+                if (this.myConfig.showAsyncImportExport) {
+                    if (this.$parent.asyncExport) {
+                        this.$parent.asyncExport(grid)
+                        return;
+                    }
+                } else {
+                    if (this.myConfig.defaultExport) {
+                        let _param = grid.getSearchParam();
+                        let  moduleCode = this.getModulecode();
+                        if (moduleCode) {
+                            _param.moduleCode = moduleCode;
+                        } else {
+                            this.alert('模块号不能为空');
+                            return;
+                        }
+                        _param.exporttype = 'excel';
+                        let _baseUrl = grid.config.resources.replace('rest', 'exportReport');
+                        let  _self  = this;
+                        this.doExportReport(_baseUrl, grid.config.method, _param, _self);
+                    } else {
+                        grid.export();
+                    }
+                }
+            }
+           
+           
+        },
+        refurbish () {
+            this.searchData();
+        },
+        getGrid (name) {
+            if (this.myConfig.tabFlag) {
+                if (this.$refs[name] && this.$refs[name][0]) {
+                    return this.$refs[name][0];
+                }
+            } else {
+                return this.$refs.grid;
+            }
+        },
+        getForm () {
+            return this.$refs.form;
+        },
+        setGridHeight() {
+            let height = this.$refs.toolbarcard.offsetHeight  + this.$refs.formcard.offsetHeight + 43;
+            if (this.hideItems && this.hideItems.length > 0) {
+                height = height + 20;
+            }
+            if (this.myConfig.tabFlag) {
+                height = height + 60;
+                this.myConfig.tabConfig.forEach(el => {
+                    if (this.$refs[el.code] && this.$refs[el.code][0]) {
+                        this.$refs[el.code][0].setOutsideHeight(height);
+                    }
+                })
+            } else {
+                if (this.$refs.grid.showSummary) {
+                    height = height + 36;
+                }
+                this.$refs.grid.setOutsideHeight(height);
+            }
+        },
+        setHideDividerValue(value) {
+            this.$refs.form.setHideDividerValue(value);
+        }
+    },
+    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>
+

package/src/components/masterplate/rowbtntoolbar.vue

@@ -0,0 +1,126 @@
+<template>
+    <Row type="flex" :gutter="0" :justify="justify" align="middle"> 
+        <template v-for="(item,index) in btnItems" :key="'btn_' + index">
+        <Col   v-if="!moreFlag || index < showIndex">
+           <Button type="text" :icon="item.icon" size="small" :custom-icon="item.customIcon"   :disabled="!!item.readOnly" @click="action(item.name)"><span :style="fontStyle">{{item.text}}</span></Button>
+        </Col>
+        <Col  v-if="index < showIndex">
+         <Divider  type="vertical"  style=" margin:0 10px 0 10px;height:12px;"/>
+        </Col>
+        </template>
+        <Col v-if="moreFlag">
+            <Dropdown  size="small" :transfer="transferFlag" >
+                 <Button type="text"><span style="color:#AF292E;">更多</span></Button>
+                 <template #list>
+                <DropdownMenu>
+                     <DropdownItem>
+                         <template v-for="(item,index) in btnItems" :key="'btn_' + index">
+                            <Button  v-if="index > showIndex" type="text" size="small" :icon="item.icon" :custom-icon="item.customIcon"  :disabled="!!item.readOnly"  @click="action(item.name)" ><span :style="fontStyle">{{item.text}}</span></Button>
+                         </template>
+                     </DropdownItem>
+                </DropdownMenu>
+                 </template>
+            </Dropdown>
+        </Col>
+    </Row>
+</template>
+
+<script>
+export default {
+    name:'mrowbtntoolbar',
+    data () {
+        return {
+            myConfig:{
+                size:'default',
+                items:[]
+            },
+            moreFlag:false,
+            transferFlag:true,
+            btnItems:[],
+            showNum:3,
+            showIndex:3,
+            colSpan:24,
+            justify:'center',
+            fontStyle:'color:#AF292E'
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        rowIndex: {
+          type:[String,Number],
+          default:null  
+        },
+        rowData: {
+          type:Object,
+          default:null  
+        }
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.myConfig =  Object.assign({},this.myConfig, this.config);
+            // 处理按钮
+            if (this.myConfig.items && this.myConfig.items.length > 0) {
+                 this.btnItems = this.myConfig.items;
+            }
+
+            if (this.myConfig.fontStyle !== undefined) {
+                this.fontStyle = this.myConfig.fontStyle;
+            }
+
+            if (this.myConfig.justify) {
+                this.justify = this.myConfig.justify;
+            }
+
+            if (this.myConfig.showNum) {
+                this.showNum = this.myConfig.showNum;
+            }
+  
+            this.btnItems.forEach(el => {
+                if (el.icon && el.icon.startsWith('custom')) {
+                    el.customIcon='iconfont icon-' + el.icon;
+                    el.icon = null;
+                }
+            });
+            if(this.btnItems.length === 2) {
+                this.colSpan = 12;
+            }
+             if(this.btnItems.length === 3) {
+                this.colSpan = 8;
+            }
+            this.showIndex = this.btnItems.length -1;
+        
+            if (this.btnItems.length > this.showNum){
+                this.moreFlag = true;
+                this.showIndex--;
+                this.colSpan = 8;
+            }
+        },
+        action(name) {
+            let obj = {};
+            obj.name = name;
+            obj.rowinfo ={};
+            obj.rowinfo.index = this.rowIndex;
+            obj.rowinfo.row = this.rowIndex;
+            this.$emit('doAction', obj);
+        },
+    },
+    watch: {
+    config: {
+      handler(data) {
+          this.$nextTick(() =>{
+              this.init();
+          })
+      },
+      deep: true,
+      immediate: true
+    },
+  }
+
+};
+</script>

package/src/components/masterplate/simpletree.vue

@@ -0,0 +1,129 @@
+<template>
+<Card   :padding="0" :bordered="myConfig.bordered" dis-hover style="width:100%;overflow-x:hidden;padding:14px;16px;">
+    <div v-if="showCondition" ref="conditiondiv">
+         <Input ref="condition" :placeholder="searchPlaceholder"  v-model="searchValue"  search style="width: 100%;margin-top:10xp;margin-bottom:10px" @on-search="search" @on-enter="search"/>
+    </div>
+    <div class="customLayout" :style="style">
+        <Tree ref="tree" v-show="showTree" :data="treeData" :class="myConfig.className" :show-checkbox="myConfig.showCheckBox"  @on-select-change="onSelectChange" @on-check-change="onCheckChange" @on-toggle-expand="onToggleExpand" :load-data="loadData"/>
+        <SimpleViewGrid v-show="!showTree" v-if="gridReset" ref="grid"  :config="gridConfig"  :dictData="dictData" @dbclick="dbclick"/>
+    </div>
+</Card>
+</template>
+<script>
+    import Base from '@/components/tree/treedatabase.vue';
+    import elementResizeDetectorMaker from 'element-resize-detector';
+    export default {
+        name:'mtreedata',
+        extends: Base,
+        data () {
+            return {
+                searchPlaceholder:'请输入编码或名称',
+                searchValue:'',
+                gridReset:true
+            }
+        },
+        created () {
+            this.init();
+            if (!this.gridConfig) {
+               this.gridConfig = {};     
+            }
+            if (this.myConfig.multiSelect !== undefined) {
+                this.gridConfig.multiSelect = this.myConfig.multiSelect;
+                if (this.gridConfig.multiSelect) {
+                    this.gridConfig.showCheckBox = true;
+                }
+            } else {
+                this.gridConfig.multiSelect = false;
+            }
+            if (this.myConfig.items) {
+                this.gridConfig.items = this.$Method.copy(this.myConfig.items);
+            } else {
+                if (!this.gridConfig.items) {
+                   this.gridConfig.items = []; 
+                }
+                let code = {
+                    label:'编码',
+                    name:this.myConfig.responseCode,
+                    type:'TextBox',
+                }
+                let name = {
+                    label:'名称',
+                    name:this.myConfig.responseName,
+                    type:'TextBox',
+                }
+                this.gridConfig.items.push(code);
+                this.gridConfig.items.push(name);
+            }
+        },
+        methods: {
+            search () {
+                if (!this.searchValue) {
+                    this.refurbish();
+                    this.showTree = true;
+                } else {
+                    let data = this.$Method.copy(this.data);
+                    let tmp = [];
+                    let flag = true;
+                    if (this.asyncLoad) {
+                       let para = {};
+                       if (this.myConfig.searchValueName) {
+                            para[this.myConfig.searchValueName] = this.searchValue;
+                       }
+                       data = this.getAsyncNode(para);
+                       if (this.myConfig.searchValueName) {
+                           tmp = data;
+                           flag = false;
+                       }
+                    } 
+                    if (flag) {
+                        data.forEach(el => {
+                            if(el[this.myConfig.responseCode].indexOf(this.searchValue) > -1 || el[this.myConfig.responseName].indexOf(this.searchValue) > -1) {
+                                tmp.push(el);
+                            }
+                        });
+                    }    
+                    this.gridReset = false;
+                    this.$nextTick(() => {
+                        this.gridReset = true;
+                        this.$nextTick(() => {
+                            this.$refs.grid.setData(tmp);
+                            this.showTree = false;
+                        });
+                    });
+                   
+                }
+            },
+            setTreeNodeIcon(params,obj) {
+                if (params.node.children.length > 0) {
+                    if (params.data.expand) {
+                        obj.type = '_custom-wenjianzhankai';
+                    } else {
+                        obj.type = '_custom-wenjianshouqi';
+                    }
+                } else {
+                    obj.type = '_custom-yemian';
+                }
+                return obj;
+            }
+        },
+        mounted () {
+            this.observer = elementResizeDetectorMaker();
+            if (this.showCondition && this.$refs.conditiondiv) {
+                this.observer.listenTo(this.$refs.conditiondiv, this.setExtraHeight);
+            }
+        },
+        beforeUnmount() {
+            if (this.showCondition && this.$refs.conditiondiv) {
+                this.observer.removeListener(this.$refs.conditiondiv, this.setExtraHeight);
+            }
+        }
+    };
+</script>
+
+<style>
+.customLayout{
+    OVERFLOW-Y: auto; 
+    /*background: url('./images/bg.jpg') no-repeat 4px 5px;*/
+}
+</style>
+