ocpview-plus 0.0.1

package/src/components/masterplate/billimport.vue

@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <template v-if="modeltype==='upload'">
+    <Modal  title="上传文件" v-model="showUpload" class-name="vertical-center-modal—bill" :footer-hide="true">
+        <div class="demo-spin-col-bill">
+            <RadioGroup v-if="showType" v-model="type" style="margin-bottom:24px">
+                <Radio v-for="(item,index) in myConfig.typeData" :key="index" :label="item.code">
+                    <span>{{item.name}}</span>
+                </Radio>
+            </RadioGroup>
+            <div style="height:220px;background-color: #F5F7FA;border:1px #DCDFE6 dashed">
+                <Row type="flex" justify="center" >
+                    <Col  style="margin-top:30px;margin-bottom:10px">
+                        <Icon  custom="iconfont icon-custom-excel" size="60"  />
+                    </Col>
+                </Row>
+                <Row type="flex" justify="center">
+                    <Col>
+                        <Input v-model="name" style="width:150px;" :border="false" placeholder="(支持xls、xlsx格式)" clearable disabled/>
+                    </Col>
+                </Row>
+                <Row type="flex" justify="center"  :gutter="10">
+                    <Col>
+                        <Upload ref="upload"
+                            :before-upload="handleUpload"
+                            accept=".xlsx,.xls" 
+                            :format="myConfig.fileType"
+                            :on-format-error="handleFormatError"
+                            :on-success="handleSuccess"
+                            :show-upload-list="false"
+                            :action="url">
+                                <Button  style="width:150px;">选择文件</Button>
+                            </Upload>
+                    </Col>
+                </Row>
+            </div>
+            <Spin v-show="loading" fix>
+                    <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+                    <div>导入中</div>
+            </Spin>
+        </div>
+    </Modal>
+    </template>
+    <template v-if="modeltype === 'down'">
+        <Modal v-model="showUpload" title="选择模版" @on-ok="downTemplate" class-name="vertical-center-modal—bill">
+        <RadioGroup v-model="type">
+            <Radio v-for="(item,index) in myConfig.typeData" :key="index" :label="item.code">
+                    <span>{{item.name}}</span>
+            </Radio>
+        </RadioGroup>
+        </Modal>
+    </template>
+  </div>
+</template>
+<script>
+    export default {
+        name:'mbillimport',
+        data () {
+            return {
+                myConfig:{
+                    typeData:[],
+                    fileType:['xlsx','xls'],
+                    setImportUrl:null    
+                },
+                initConfig:{
+                    typeData:[],
+                    fileType:['xlsx','xls'],
+                    setImportUrl:null    
+                },
+                file: null,
+                name:'',
+                type:'',
+                showType:false,
+                showUpload:false,
+                modeltype:'upload',
+                param:{},
+                curlUrl:'',
+                loading:false,
+                downMethod:'exportTemplate',
+                importMethod:'import'
+            };
+        },
+        props:{
+            config: {
+                type:Object,
+                default () {
+                    return {};
+                }
+            },
+        } ,
+        computed:{
+            filename(){
+                if (this.name) {
+                    return this.name;
+                } else {
+                    return '(支持xls、xlsx格式)';
+                }
+            },
+            url() {
+                let url = this.curlUrl;
+                let para = this.$Method.copy(this.param);
+                if (this.showType) {
+                    if (this.myConfig.typeData.length > 0) {
+                        if (this.type) {
+                            para.billmoduleid = para.billmoduleid+'_' + this.type;
+                        }
+                    }
+                }
+                return url+'&param=' +encodeURI(JSON.stringify(para));
+            }
+        },
+        methods: {
+            init () {
+                this.myConfig = Object.assign({},this.initConfig, this.config);
+                if (this.myConfig.typeData && this.myConfig.typeData.length > 0) {
+                    this.showType = true;
+                    this.type = this.myConfig.typeData[0].code;
+                }
+                if (this.myConfig.importMethod) {
+                    this.importMethod = this.myConfig.importMethod;
+                }
+                 if (this.myConfig.downMethod) {
+                    this.downMethod = this.myConfig.downMethod;
+                }
+            },
+            setModeltype(value) {
+                this.modeltype = value;
+            },
+            setShowUpload(flag) {
+                if (flag) {
+                    this.init ();
+                }
+                this.showUpload = flag;
+            },
+            setUrl(url,method,param) {
+                if (url) {
+                    url = url.replace('rest', this.importMethod);
+                }
+                let self = this;
+                this.curlUrl = this.getResturl(url,method,{},self);
+                if (this.myConfig.setImportUrl) {
+                    this.curlUrl = this.myConfig.setImportUrl(this.curlUrl,'import');
+                }
+                Object.assign(this.param, param);
+
+                if (this.myConfig.typeData.length > 1) {
+                    if (!this.type) {
+                        this.type = this.myConfig.typeData[0].code;
+                    }
+                }
+            },
+            setDownUrl(url,param) {
+                if (url) {
+                    url = url.replace('rest', this.downMethod);
+                }
+                let self = this;
+                this.curlUrl = this.getResturl(url,null,{},self);
+                if (this.myConfig.typeData.length > 1) {
+                    this.param = param;
+                    this.type = this.myConfig.typeData[0].code;
+                    this.showUpload = true;
+                } else {
+                    let temp  = this.curlUrl +'&param=' +encodeURI(JSON.stringify(param));
+                    if (this.myConfig.setImportUrl) {
+                        temp = this.myConfig.setImportUrl(temp,'down');
+                    }
+                    window.open(temp,'_self');
+                } 
+            },
+            handleUpload (file) {
+                if (!this.checkFormat(file)) {
+                    this.handleFormatError(file);
+                    this.file = null;
+                    this.name = '';
+                    return false;
+                } else {
+                    this.file = file;
+                    this.name = file.name;
+                    this.upload();
+                }
+                return false;
+            },
+            checkFormat(file) {
+                const _file_format = file.name.split('.').pop().toLocaleLowerCase();
+                const checked = this.myConfig.fileType.some(item => item.toLocaleLowerCase() === _file_format);
+                return checked;
+            },
+            upload () {
+                if (!this.name) {
+                    this.file = null;
+                }
+                if (this.file !== null) {
+                    this.loading = true;
+                    this.$refs.upload.post(this.file);
+                }
+            },
+            handleFormatError (file) {
+                let type = this.myConfig.fileType.join(',');
+                this.alert('文件[' + file.name + ']的格式不正确，请上传格式为(' + type + ')的文件');
+            },
+            handleSuccess(res) {
+                if (res && Number(res.returncode) !== 0) {
+                    this.showUpload = false;
+                    this.file = null;
+                    this.name = '';
+                    this.alert(res.data);
+                } else {
+                    this.showUpload = false;
+                    this.file = null;
+                    this.name = '';
+                    if (this.myConfig.importSuccess) {
+                        this.myConfig.importSuccess(res);
+                    } else {
+                        if (this.$parent.doImportSuccess) {
+                            this.$parent.doImportSuccess();
+                        }
+                        this.alert(res.elapsed,'导入成功');
+                    }
+                }
+                this.loading = false;
+               
+            },
+            downTemplate() {
+                if (this.type) {
+                    let param = this.$Method.copy(this.param);
+                    if (param.billmoduleid) {
+                        param.billmoduleid =  param.billmoduleid + '_' + this.type;
+                        let temp  = this.url +'&param=' +encodeURI(JSON.stringify(param));
+                        window.open(temp,'_self');
+                        this.showUpload = false;
+                    }
+                    
+                }
+            }
+        }
+    };
+</script>
+<style lang="less" scoped>
+    .ivu-modal-wrap.vertical-center-modal—bill .ivu-modal-header{
+        border-bottom:none;
+        border-radius:10px;
+    }
+    .ivu-modal-wrap.vertical-center-modal—bill .ivu-modal-body{
+        padding-top: 8px;
+        padding-right: 28px;
+        padding-bottom: 32px;
+        padding-left: 28px;
+    }
+    .demo-spin-icon-load{
+        animation: ani-demo-spin 1s linear infinite;
+    }
+    @keyframes ani-demo-spin {
+        from { transform: rotate(0deg);}
+        50%  { transform: rotate(180deg);}
+        to   { transform: rotate(360deg);}
+    }
+    .demo-spin-col-bill{
+        position: relative;
+    }
+</style>
+<style>
+
+</style>

package/src/components/masterplate/billquerygrid.vue

@@ -0,0 +1,316 @@
+<template>
+<div >
+    <Card :padding="0"  dis-hover :bordered="false"  style="background:#fff;padding:14px 16px 14px 16px">
+        <div ref="toolbar" style="padding-bottom:14px">
+            <QueryBar :config="myConfig.queryConfig"  :dictData="dictData" :moduleMethod="moduleMethod" @conditionAction="conditionAction" @doAction="doAction"/>
+        </div>
+        <Card class="billquerygrid" :padding="0" :bordered="false" dis-hover>
+            <Dropdown trigger="custom" :visible="colsetFlag"  style="position:absolute;z-index:99;right:15px;top:1px;padding:7.5px; background-color: #F5F7FA;"  placement="bottom-end" :transfer="transferFlag" @on-clickoutside="closeColset">
+                <Tooltip  placement="top">
+                    <template #content>
+                    <div>
+                        <span style="font-size:12px"> 表头设计 </span>
+                    </div>
+                    </template>
+                    <p  style="cursor:pointer;"  @click.stop="openColSet">
+                        <Icon custom="iconfont icon-custom-colset"  style="margin-top: 4px;" size="16" color="#515a6e"/>
+                    </p>
+                </Tooltip>
+                <template #list>
+                <DropdownMenu>
+                    <GridColSet ref="gridcol"  :config="myConfig.gridConfig" @doAction="doAction" />
+                </DropdownMenu>
+                </template>
+            </Dropdown>
+            <SimpleViewGrid  v-if="reset" ref="grid" :config="changeGridConfig" :dictData="dictData" @dbclick="dbclick" />
+        </Card>
+    </Card>
+</div>
+</template>
+
+<script>
+
+import elementResizeDetectorMaker from 'element-resize-detector';
+import QueryBar from './querybar.vue';
+import GridColSet from './gridcolset.vue';
+import { resolveComponent } from 'vue';
+export default {
+    name:'mbillquerygrid',
+    components:{QueryBar,GridColSet},
+    data () {
+        return {
+            myConfig:{
+            },
+            changeGridConfig:{},
+            reset:true,
+            rowBtnData:[],
+            transferFlag:false,
+            colsetFlag:false,
+            operateFlag:false,
+            enablePermissions:true,
+            actionConfig:{},
+            initRefresh:true, 
+            gridCol:[]
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        },
+        moduleMethod:{
+            type:Array,
+            default: () => {
+                return [];      
+            }
+        }
+    },
+    created () {
+        this.myConfig =  Object.assign({},this.myConfig, this.config);
+        this.myConfig.gridConfig.headStyle='';
+        this.myConfig.gridConfig.showCondition = false;
+        this.myConfig.gridConfig.overrideData = this.gridOverrideData;
+        this.myConfig.gridConfig.onSelectionChange = this.gridOnSelectionChange;
+        this.myConfig.gridConfig.resources = this.config.resources;
+        this.myConfig.gridConfig.height = 1;
+        this.myConfig.gridConfig.adjustHeight = 5;
+        this.myConfig.gridConfig.showBorder = true;
+        this.myConfig.gridConfig.showStripe = true;
+        this.myConfig.gridConfig.method = this.config.classPrefix + '.search';
+        this.myConfig.gridConfig.response = this.config.response;
+        this.myConfig.gridConfig.generalOrientation = true;
+        this.myConfig.gridConfig.pageSize="small";
+        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.gridConfig.initRefresh !== undefined) {
+            this.initRefresh = this.myConfig.gridConfig.initRefresh;
+        }
+        if (this.myConfig.enablePermissions  !== undefined) {
+            this.enablePermissions = this.myConfig.enablePermissions;
+        }
+        if (this.myConfig.rowBtnData) {
+            this.rowBtnData = this.$Method.copy(this.myConfig.rowBtnData);
+        }
+        if (this.rowBtnData.length > 0) {
+            this.initRowBtn();
+        }
+       
+        this.myConfig.queryConfig = {};
+        this.myConfig.queryConfig.curHelpUrl = this.config.curHelpUrl;
+        this.myConfig.queryConfig.items =  this.$Method.copy(this.myConfig.gridConfig.items);
+        this.myConfig.queryConfig.modulecode = this.config.modulecode;
+        this.myConfig.queryConfig.enablePermissions = this.enablePermissions;
+        if (this.myConfig.btnData) {
+            this.myConfig.queryConfig.btnData = this.myConfig.btnData;
+        }
+         if (this.myConfig.addDataflag) {
+            this.myConfig.queryConfig.addDataflag = this.myConfig.addDataflag;
+        }
+        if (this.myConfig.usercustominfo) {
+            if (this.myConfig.usercustominfo.filterscene) {
+                this.myConfig.queryConfig.sceneData = this.$Method.copy(this.myConfig.usercustominfo.filterscene);
+            }
+            if (this.myConfig.usercustominfo.colset) {
+                this.gridCol = JSON.parse(this.$Method.copy(this.myConfig.usercustominfo.colset)) ;
+            }   
+        }
+
+        this.setChangeGridConfig();
+    },
+    methods: {
+        initRowBtn ()  {
+            if (this.enablePermissions) {
+                let btns = [];
+                this.moduleMethod.forEach(el => {
+                    let btn = this.rowBtnData.find(el2 => el.name === el2.name);
+                    if (btn) {
+                        btns.push(btn);     
+                    }
+                });
+                this.rowBtnData = btns;
+            }
+            if (this.rowBtnData.length > 0) {
+                this.actionConfig.label = '操作';
+                this.actionConfig.key = 'actionbtn';
+                this.actionConfig.align = 'center';
+                this.actionConfig.render = this.actionRender;
+                this.actionConfig.fixed= 'right';
+                if (this.rowBtnData.length > 3) {
+                    this.actionConfig.width = 200;
+                } else {
+                    this.actionConfig.width = 68 * this.rowBtnData.length;
+                }
+                this.myConfig.gridConfig.items.push(this.actionConfig);
+                this.operateFlag = true;
+            }
+        },
+        actionRender (h, params) {
+            return h('div', [
+                h(resolveComponent('RowBtnToolbar'), {
+                   config:{items:this.rowBtnData},
+                   onDoAction: (val) => {                       
+                            val.rowinfo = params;
+                            this.$emit('doAction',val);
+                    } 
+                })
+            ]);
+        },
+        doAction (obj) {
+            if (obj.name === 'saveGridCol') {
+                this.gridCol = this.$Method.copy(obj.para);
+                this.colsetFlag = false;
+                this.setChangeGridConfig();
+                this.reset = false;
+                this.$nextTick(() => {
+                    this.reset = true;
+                    this.$nextTick(() => {
+                        this.refurbish();
+                    })
+                })
+            } else if (obj.name === 'closeGridCol') {
+                    this.colsetFlag = false;
+                    return;
+            } else {
+                if (obj.name !== 'saveScene') {
+                    obj.para = this.$refs.grid.getSelection();
+                }
+            }
+            this.$emit('doAction', obj);
+        },
+        gridOverrideData (data) {
+            let self = this;
+            if (data && data.length > 0) {
+                this.$nextTick(() => {
+                    let index = 0;
+                    if (self.ph_key) {
+                        let culIndex = data.findIndex(el => el[self.myConfig.gridConfig.bindSearchParam]=== self.ph_key);
+                        if (culIndex > -1) {
+                            index = culIndex;
+                        }
+                    }
+                    if(this.$refs.grid) {
+                        this.$refs.grid.setRowHighlight(index,true);
+                    }
+                });
+            }
+            return data;
+        },
+        gridOnSelectionChange(rows) {
+            let obj = {};
+            obj.name = 'gridSelectionChange';
+            obj.para = rows;
+            this.$emit('doAction', obj);
+        },
+        clearData () {
+            this.$refs.quick.clearData();
+            this.refurbish();
+        },
+        refurbish (para) {
+            if (!para) {
+                para = {};
+            }
+            this.$refs.grid.clearSearchBeforeSearchParam();
+            this.$refs.grid.setSearchBeforeSearchParam(para);
+            this.$refs.grid.refurbish();
+        },
+        getGrid () {
+            return this.$refs.grid;
+        },
+        getBtnToolbar() {
+            return this.$refs.btn;
+        },
+        getQuick () {
+            return this.$refs.quick;
+        },
+        dbclick (e) {
+            let obj = {};
+            obj.name ='gridDbClick';
+            obj.para = e;
+            this.ph_key = obj.para[this.myConfig.gridConfig.bindSearchParam];
+            this.$emit('doAction', obj);
+        },
+        setPhkey(value) {
+            this.ph_key = value;
+        },
+        quickChagne () {
+            this.refurbish();
+        },
+        setOutsideHeight() {
+            let height = this.$refs.toolbar.offsetHeight  + 30;
+            this.$refs.grid.setOutsideHeight(height);
+        },
+        openColSet() {
+            this.colsetFlag = true;
+        },
+        closeColset() { 
+            this.colsetFlag = false;
+        },
+        setChangeGridConfig() {
+            this.changeGridConfig  = this.$Method.copy(this.myConfig.gridConfig);
+            let isFixed = false;
+            if (this.gridCol.length > 0) {
+                let items = [];
+                this.gridCol.forEach(el => {
+                    if(el.name && el.visible) {
+                        let tmp = this.myConfig.gridConfig.items.find(el2 => el.name === el2.name || el.name === el2.sname);
+                        if (tmp) {
+                            let tmp2 = this.$Method.copy(tmp);
+                            if (el.fixed) {
+                                tmp2.fixed = 'left';
+                                if (!isFixed) {
+                                    isFixed = true;
+                                }
+                            }
+                            items.push(tmp2);
+                        }
+                    }
+                });
+                if (this.operateFlag) {
+                    items.push(this.actionConfig);
+                }
+                this.changeGridConfig.fixedIndex = isFixed;
+                this.changeGridConfig.items = items;
+            }
+        },
+        conditionAction(action) {
+            if (action.name === 'condition_search' || action.name === 'condition_searchFilter') {
+                this.refurbish(action.para);
+            }
+            if (action.name === 'condition_clear') {
+                this.refurbish();
+            }
+        }
+
+    },
+    mounted () {
+        this.observer = elementResizeDetectorMaker();
+        if (this.$refs.toolbar) {
+            this.observer.listenTo(this.$refs.toolbar, this.setOutsideHeight);
+        }
+        if (this.initRefresh) {
+            this.refurbish();
+        }
+        if (this.gridCol.length > 0) {
+            this.$refs.gridcol.setData(this.gridCol);
+        }
+
+    },
+    beforeUnmount() {
+        if (this.$refs.toolbar) {
+            this.observer.removeListener(this.$refs.toolbar, this.setOutsideHeight);
+        }
+    }
+};
+</script>