ocpview-plus 0.0.1

package/src/components/masterplate/querybar.vue

@@ -0,0 +1,490 @@
+<template> 
+<div class="querybar" >
+    <Row  type="flex" :gutter="0">
+        <Col span='16'>
+            <Row type="flex"  :gutter="0">
+                <Col span='6' style="margin-right:12px">
+                    <ControlBox  ref="field"  :config="fieldConfig"  ></ControlBox>
+                </Col>
+                <Col span='6' style="margin-right:20px">
+                    <ControlBox  v-if="hackReset" ref="editors"  :config="editorsConfig"  ></ControlBox>
+                </Col>
+                <Col style="margin-right:10px">
+                    <Button customIcon="iconfont icon-custom-search"  type="primary" @click="search" >查询</Button>
+                </Col>
+                <Col>
+                    <Button  customIcon="iconfont icon-custom-reset"  @click="clear">重置</Button>
+                </Col>
+                <Col>
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col>
+                    <Dropdown trigger="custom" :visible="filterSceneFlag" @on-click="filterAction" placement="bottom-start" @on-clickoutside="closeFilterScene">
+                       <Badge  class-name="badgeclass" :count="sceneNum">
+                        <ButtonGroup>
+                            <Button  customIcon="iconfont icon-custom-filter"  @click="updataFilterScene">高级查询</Button>  
+                            <Button  v-if="!filterSceneFlag && sceneFlag" icon="ios-arrow-down"  @click="openFilterScene"> </Button>
+                            <Button  v-if="filterSceneFlag && sceneFlag" icon="ios-arrow-up"  @click="closeFilterScene"> </Button>
+                        </ButtonGroup>
+                        </Badge>
+                         <template #list>
+                        <DropdownMenu>
+                            <DropdownItem v-for="(temp,index) in sceneData"  :selected="temp.scenename == selectedScence" :name="temp.scenename" :key="'scene_' + index">{{temp.scenename}}</DropdownItem>
+                        </DropdownMenu>
+                          </template>
+                    </Dropdown>
+                </Col>
+            </Row>
+        </Col>
+        <Col span='8'>
+        <Row type="flex" justify="end"  :gutter="0" >
+            <Col style="padding-right:10px;">
+                <Dropdown trigger="custom" :visible="btnFlag" @on-click="action" placement="bottom-start" @on-clickoutside="closeBtn">
+                    <ButtonGroup>
+                        <Button customIcon="iconfont icon-custom-add"   v-if="addDataBtnFlag"  @click="addData">新增</Button>   
+                        <Button   v-if="!btnFlag && moreBtnFlag" icon="ios-arrow-down"  @click="openBtn"> </Button>
+                        <Button   v-if="btnFlag && moreBtnFlag" icon="ios-arrow-up"  @click="closeBtn"> </Button>
+                    </ButtonGroup>
+                    <template #list>
+                    <DropdownMenu>
+                        <DropdownItem v-for="(item,index) in btnData" style="padding-left:0px;" :key="'btn_' + index">
+                            <Button  :icon="item.icon" type="text" :customIcon="item.customIcon" @click="action(item.name)" >{{item.text}}</Button>
+                        </DropdownItem>
+                    </DropdownMenu>
+                    </template>
+                </Dropdown>
+            </Col>
+            <Col>
+                <PromptMessages style="height:100%"/>
+            </COl> 
+        </Row>
+        </Col>
+    </Row>
+    <div v-show="filterFlag" style="margin-top:20px">
+        <BillConditionsBox ref="filter"  @doAction="doAction"  @conditionAction="conditionAction" :config="config" :dictData="dictData"/>
+    </div>
+</div>
+</template>
+<script>
+    import PromptMessages from './promptmessage.vue';
+    import BillConditionsBox from './billconditionsbox.vue';
+    export default {
+        name: 'mquerybar',
+        components:{
+            BillConditionsBox,PromptMessages
+        },
+        props:{
+            config: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            dictData: {
+                type: Object,
+                default:null
+            },
+            moduleMethod:{
+                type:Array,
+                default: () => {
+                return [];      
+            }
+        }
+        } ,
+        data () {
+            return {
+                globalConfig:{
+                },
+                myConfig: {
+                },
+                conditionPrior:[],
+                condition:[],
+                dataType:{},
+                hackReset:true,
+                addDataBtnFlag:true,
+                enablePermissions:false,
+                showCondition:true,
+                showHelpBtn:false,
+                showbatchBtn:true,
+                btnFlag:false,
+                filterFlag:false,
+                sceneFlag:true,
+                filterSceneFlag:false,
+                fieldConfig: {
+                    name:'field',
+                    type:'ComboBox',
+                    codeWithName:false,
+                    placeholder:'请选择',
+                    valueChanged:this.fieldChanged
+                },
+                editorsConfig:{
+                    name:'editors',
+                    type:'TextBox',
+                    readOnly:true
+                },
+                searchDictData:{},
+                showModuleCode:false,
+                selectedScence:'',
+                sceneData:[],
+                moreBtnFlag:false,
+                btnData:[]
+            };
+        },
+        created () {
+            this.init();
+        },
+        computed:{
+            sceneNum () {
+                return this.sceneData.length;
+            }
+        },
+        methods:{
+            init () {
+                //获取初期默认值
+                this.myConfig = Object.assign({}, this.globalConfig, this.myConfig);
+                //获取配置
+                if (this.config) {
+                    this.myConfig = Object.assign({}, this.myConfig, this.config);
+                }
+                //处理下拉框
+                if (this.myConfig.items) {
+                    this.myConfig.items.forEach(el => {
+                        if (this.dictData) {
+                            this.initDictkey(el);
+                        }
+                        if (el.vtype === 'datetime') {
+                            delete el.vtype;
+                        }
+                    });
+                }
+                
+                if (this.myConfig.btnData !== undefined) {
+                    this.btnData = this.$Method.copy(this.myConfig.btnData);
+                }
+
+                this.btnData.forEach(el => {
+                    if (el.icon && el.icon.startsWith('custom')) {
+                        el.customIcon='iconfont icon-' + el.icon;
+                        el.icon = null;
+                    }
+                });
+                
+                if (this.myConfig.sceneData !== undefined) {
+                    this.sceneData = this.$Method.copy(this.myConfig.sceneData);
+                }
+                if (this.myConfig.enablePermissions  !== undefined) {
+                    this.enablePermissions = this.myConfig.enablePermissions;
+                }
+                this.initField();
+                this.fieldConfig.data = this.conditionPrior;
+                if (this.dictData != null) {
+                    this.searchDictData = this.$Method.copy(this.dictData);
+                }
+                if (this.myConfig.curHelpUrl) {
+                    this.showHelpBtn = true;
+                }
+                if (this.myConfig.modulecode) {
+                    this.showModuleCode = true;
+                }
+                this.searchDictData.FIELD =  this.condition;
+
+                if (this.enablePermissions) {
+                    let temp = this.moduleMethod.find(el => el.name === 'addData');
+                    if (temp) {
+                        this.addDataBtnFlag = true;
+                    } else {
+                        this.addDataBtnFlag = false;
+                    }
+
+                    let btnData = [];
+                    this.moduleMethod.forEach(el => {
+                        let t = this.btnData.find(el2 => el2.name === el.name);
+                        if (t) {
+                            btnData.push(t);
+                        }
+                    });
+                    this.btnData = btnData;
+                }
+                if (this.btnData.length > 0) {
+                    this.moreBtnFlag = true;
+                } else {
+                    this.moreBtnFlag = false;
+                }
+
+                if (this.sceneData.length > 0) {
+                    this.sceneFlag = true;
+                } else {
+                    this.sceneFlag = false;
+                }
+                if (this.myConfig.sceneData) {
+                    this.sceneData = JSON.parse(this.myConfig.sceneData);
+                }
+                if (this.addDataBtnFlag) {
+                    if (this.myConfig.addDataflag !== 'Y') {
+                        this.addDataBtnFlag = false;
+                    }
+                }
+            },
+            initDictkey(el) {
+                if (el.children && el.children.length > 0) {
+                    for (let i=0;i<el.children.length; i++) {
+                        this.initDictkey(el.children[i]);
+                    } 
+                } else {
+                    if (el.dictkey) {
+                        if (el.data === undefined) {
+                            let dictkey = el.dictkey;
+                            if (el.customDictkey) {
+                                dictkey = el.customDictkey;
+                            }
+                            el.data = this.dictData[dictkey];
+                        }
+                    }
+                }
+            },
+            initField() {
+                let condition = [];
+                let datatype = {};
+                let conditionPrior = [];
+                if (this.myConfig.items) {
+                    this.myConfig.items.forEach(el => {
+                        this.initComnonField(el,condition,datatype,conditionPrior);
+                    });
+                }
+                this.condition = condition;
+                this.dataType = datatype;
+                this.conditionPrior = conditionPrior;
+            },
+            initComnonField(el,condition,datatype,conditionPrior) {
+                if (el.children && el.children.length > 0) {
+                    for (let i=0;i<el.children.length; i++) {
+                        this.initComnonField(el.children[i],condition,datatype,conditionPrior);
+                    }
+                } else {
+                    if (el.condition || el.conditionPrior) {
+                        let obj = {};
+                        obj.code = el.name;
+                        if (el.label) {
+                            obj.name = el.label;
+                        } else {
+                            obj.name = el.name;
+                        }
+                        let tempObj = this.$Method.copy(el);
+                        tempObj.readOnly = false;
+                        tempObj.visible = true;
+                        tempObj.defaultValue = '';
+                        tempObj.required = false;
+                        obj.config = tempObj;
+                        datatype[obj.code] = tempObj;
+                        condition.push(obj);
+                        if (el.conditionPrior) {
+                            conditionPrior.push(obj);
+                        }
+                    }
+                }
+            },
+            clear() {
+                this.customClear();
+                let temp = {};
+                temp.name = 'condition_clear';
+                this.$emit('conditionAction',temp);
+            },
+            search() {
+                let temp = {};
+                temp.name = 'condition_search';
+                temp.para = this.getQuerySearchParam();
+                this.closeFilterScene();
+                this.$emit('conditionAction',temp);
+            },
+            conditionAction(obj) {
+                this.filterFlag = false;
+                let data = this.$refs.filter.getData();
+                this.updateScene(data.scenename,data);
+                this.$emit('conditionAction',obj);
+            },
+            getQuerySearchParam() {
+                if (this.customGetQuerySearchParam) {
+                    return this.customGetQuerySearchParam();
+                }
+            },
+            fieldChanged(e) {
+                const index = this.conditionPrior.findIndex(el => el.code === e.value);
+                if (index > -1) {
+                    this.editorsConfig = Object.assign({},{},this.conditionPrior[index].config);
+                } else {
+                    this.editorsConfig = {
+                        name:'editors',
+                        type:'TextBox',
+                        readOnly:true
+                    };
+                }
+                this.hackReset = false;
+                this.$nextTick(() =>{
+                    this.hackReset = true;
+                });
+                
+            },
+            customClear () {
+                this.$refs.field.setValue('');
+                let e = {};
+                e.value = '';
+                this.fieldChanged(e);
+            },
+            customGetQuerySearchParam() {
+                let searchParam = {};
+                let obj = {};
+                let el = {};
+                el.field = this.$refs.field.getValue();
+                el.editors = this.$refs.editors.getValue();
+                el.calculator = '==';
+                if (el.field && el.editors) {
+                    if (this.dataType[el.field].calculator) {
+                        el.calculator = this.dataType[el.field].calculator;
+                    }
+                    obj = this.getConditionValue(el.field,el.editors,el.calculator,this.dataType[el.field]);
+                }
+                let highObj = {};
+                /*let highObj = this.$refs.searchgrid.getResultCondition();
+                if (highObj['$and']) {
+                    if (obj !== {}) {
+                        highObj['$and'].push(obj);
+                    }
+                    searchParam = Object.assign({},{},highObj);
+                } else {
+                    searchParam = Object.assign({},obj,highObj);
+                }*/
+                searchParam = obj;
+                return searchParam;
+            },
+            openHelp () {
+                window.open(this.myConfig.curHelpUrl);
+            },
+            openBtn() {
+                this.btnFlag = true;
+                this.openBtnFlag = true;
+            },
+            closeBtn() {
+                if (!this.openBtnFlag) {
+                    this.btnFlag = false;
+                } else {
+                    this.openBtnFlag = false;
+                }
+            },
+            openFilterScene() {
+                this.filterSceneFlag = true;
+                this.openFilterSceneFlag = true;
+            },
+            closeFilterScene() {
+                if (!this.openFilterSceneFlag) {
+                    this.filterSceneFlag = false;
+                } else {
+                    this.openFilterSceneFlag = false;
+                }
+            },
+            doAction (obj) {
+                if (obj.name == 'saveScene' || obj.name == 'delScene') {
+                    if (obj.para.flag === 'I') {
+                        let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
+                        if (index > -1) {
+                            this.alert('场景名称[' + obj.para.scenename + ']已存在,请检查');
+                            return false;
+                        }  else {
+                            this.sceneData.push(obj.para);
+                            
+                        }
+                    }
+                    if (obj.para.flag === 'U') {
+                        if (this.selectedScence !== obj.para.scenename) {
+                            let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
+                            if (index > -1) {
+                                this.alert('场景名称[' + obj.para.scenename + ']已存在,请检查');
+                                return false;
+                            }
+                        } else {
+                            let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
+                            if (index > -1) {
+                                this.sceneData.splice(index,1,obj.para)
+                            }
+                        }
+                    }
+                    if (obj.para.flag === 'D') {
+                          let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
+                          if (index > -1) {
+                               this.sceneData.splice(index,1)
+                          }
+                          this.filterFlag = false;  
+                    }
+                    if (this.sceneData.length > 0) {
+                        this.sceneFlag = true;
+                    } else {
+                        this.sceneFlag = false;
+                    }
+                    obj.para = this.$Method.copy(this.sceneData);
+                    this.$emit('doAction', obj);
+                } else if (obj.name == 'closeFilter') {
+                    this.closeFilterScene();
+                }
+                else {
+                    this.$emit('doAction', obj);
+                }
+            },
+            action(name) {
+                let para = {};
+                para.name = name;
+                this.$emit('doAction', para);
+                this.btnFlag = false;
+            },
+            addData () {
+                let para = {};
+                para.name = 'addData';
+                this.$emit('doAction', para);
+            },
+            filterAction(name) {
+                let temp = this.sceneData.find(el => el.scenename === name);
+                if (temp) {
+                    this.selectedScence = temp.scenename;
+                    this.$refs.filter.setData(temp);
+                    this.$nextTick(() => {
+                        this.filterFlag = true;
+                        this.filterSceneFlag = false;
+                    });
+                }
+            },
+            updataFilterScene() {
+                this.filterFlag = !this.filterFlag
+                if (!this.selectedScence && this.filterFlag) {
+                    this.$refs.filter.addScene();
+                    this.selectedScence = false;
+                }
+                this.filterSceneFlag = false;
+                this.btnFlag = false;
+            },
+            addScene (tmp) {
+                this.sceneData.push(tmp);
+                this.selectedScence = tmp.scenename;
+            },
+            updateScene(name,tmp) {
+                let index = this.sceneData.findIndex(el => el.scenename === name);
+                if (index > -1) {
+                    this.sceneData.splice(index,1,tmp);
+                    this.selectedScence = tmp.scenename;
+                }
+            },
+            delScence(name) {
+                let index = this.sceneData.findIndex(el => el.scenename === name);
+                if (index > -1) {
+                    this.sceneData.splice(index,1);
+                    this.selectedScence ='';
+                }
+            },
+           
+        }
+        
+    };
+</script>
+<style lang="less" scoped>
+        .dividercommon {
+            margin:1px 12px 0 12px;
+            height:32px;
+        }
+</style>