ocpview-plus 0.0.1

package/src/components/conditionbox/conditionselectorbox.vue

@@ -0,0 +1,237 @@
+<template> 
+<div>
+    <Row>
+        <Col span='20'>
+           <Row type="flex" justify="start" align="middle"> 
+                  <Col span='24' style="padding-top:4px" >
+                    <template v-if="!isConnector"> 
+                        <FormBox ref="form" :config="form"  @inputValue="formChanged"/>
+                    </template> 
+                    <template v-else> 
+                        <FormBox ref="form" :config="formConnector" @inputValue="formChanged"/>
+                    </template> 
+                </Col>
+            </Row>
+        </Col>
+        <Col v-if='operflag' span='4'>
+          <Row type="flex" justify="end" align="middle" style="padding-top:8px" > 
+                <Button  size='small' type='default' icon="ios-add" style="margin-right:8px" @click="doAdd"></Button>
+                <Button  size='small' type='default' icon="ios-remove"  @click="doDel"></Button>
+         </Row>
+        </Col>
+    </Row>
+</div>
+</template>
+<script>
+    export default {
+        name: 'conditionselector',
+        data () {
+            return {
+                form:{
+                    lineNum:12,
+                    labelWidth:10,
+                    showLabel:false,
+                    items:[{
+                        name:'field',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        valueChanged:this.fieldChanged,
+                        colNum:3,
+                       // size:'small',
+                        isFull:true
+                    },{
+                        name:'oper',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        clearable:false,
+                        //size:'small',
+                        colNum:2,
+                        data:[{
+                            name: '等于',
+                            code: '=='
+                        }],
+                        defaultValue:'==',
+                        isFull:true
+                    },{
+                        name:'value',
+                        type:'TextBox',
+                        //size:'small',
+                        readOnly:true,
+                        colNum:3,
+                        isFull:true
+                    }]
+                },
+                formConnector:{
+                    lineNum:8,
+                    labelWidth:30,
+                    showLabel:false,
+                    items:[{
+                        name:'connector',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        //size:'small',
+                        colNum:2,
+                        data:[{'code':'$or','name':'或'}, {'code':'$and','name':'且'}],
+                        defaultValue:'$and',
+                        style:{
+                            'min-width':'50px'
+                        },
+                        clearable:false
+                    }]
+                },
+                dataType:{}
+            };
+        },
+        created () {
+            this.init();
+        },
+        props:{
+            config: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            setOperData: {
+                type: Function
+            },
+            operflag:{
+                type:Boolean,
+                default:true
+            },
+            isConnector:{
+                type:Boolean,
+                default:true
+            },
+            valueData: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        } ,
+        mounted () {  
+            if (!this.isConnector) {
+                if (this.valueData.field){
+                    this.fieldChanged({value:this.valueData.field});
+                } 
+            }
+            this.$nextTick(() => {
+                this.$refs.form.setData(this.valueData);
+            });
+        },
+        methods:{
+            formChanged(){
+                let form = this.$refs.form.getData();
+                this.$emit('inputValue', form);   
+            },
+            init() {
+                if (!this.isConnector) {
+                    this.initField();
+                }
+            },
+            initField () {
+                let fieldData = [];
+                if (this.config.items && this.config.items.length > 0) {
+                    this.config.items.forEach(el => {
+                        if (el.name && el.label) {
+                            fieldData.push({code:el.name,name:el.label});
+                            this.dataType[el.name] = Object.assign({},el, {name:'value'});
+                            this.dataType[el.name].operData = this.getOperData(el);
+                        }
+                    });
+                }
+                this.form.items[0].data = fieldData;
+
+            },
+            getOperData(el) {
+                let tempData = [];
+                tempData.push({
+                    name: '等于',
+                    code: '=='
+                });
+                if (el.type === 'DateBox' || el.type === 'NumberBox') {
+                    tempData.push({
+                        name: '不小于',
+                        code: '>='
+                    });
+                    tempData.push({
+                        name: '不大于',
+                        code: '<='
+                    });
+                    tempData.push({
+                        name: '不等于',
+                        code: '<>'
+                    });
+                } 
+                if (el.type === 'TextBox') {
+                    tempData.push({
+                        name: '不等于',
+                        code: '<>'
+                    });
+                    tempData.push({
+                        name: '包含',
+                        code: 'LIKE'
+                    });
+                } 
+                if (this.setOperData) {
+                    tempData =  this.setOperData(el, tempData);
+                }
+                return tempData; 
+            },
+            fieldChanged(e) {
+                let self = this;
+                let operValue = '==';
+                let obj = [];
+                let oper = {};
+                oper.name = 'oper';
+                if (e.value) {
+                    let config = Object.assign({},this.dataType[e.value]);
+                    oper.data = this.$Method.copy(config.operData);
+                    oper.readOnly = false;
+                    obj.push(oper);
+                    config.name ='value'; 
+                    config.label = '';
+                    config.readOnly = false;
+                    config.visible = true;
+                    config.valueChanged = '';
+                    obj.push(config);
+                    if (config.operDefaultValue) {
+                        operValue = config.operDefaultValue;
+                    }
+                } else {
+                    oper.data = [{
+                        name: '等于',
+                        code: '=='
+                    }];
+                    oper.readOnly = true;
+                    obj.push(oper);
+                    let valueConfig = {
+                        name:'value',
+                        type:'TextBox',
+                        readOnly:true,
+                        colNum:3,
+                        isFull:true
+                    };
+                    obj.push(valueConfig);
+                }
+                self.$refs.form.updateItemsConfig(obj);
+                self.$nextTick(() => {
+                    self.$refs.form.setValue('oper',operValue); 
+                    self.$refs.form.setValue('value',''); 
+                });
+                return true;
+            },
+            doAdd (){
+                let obj = {};
+                obj.name = 'doAdd';
+                this.$emit('doAction', obj);
+            },
+            doDel (){
+                let obj = {};
+                obj.name = 'doDel';
+                this.$emit('doAction', obj);
+            }
+        }
+    };
+</script>

package/src/components/conditionbox/index.js

@@ -0,0 +1,5 @@
+import ConditionBox from './conditionbox.vue';
+import QueryConditionBoxBase from './queryconditionboxbase.vue';
+import ConditionSelectorBox from './conditionselectorbox.vue';
+import ConditionFilterBox from './conditionfilterbox.vue';
+export {ConditionBox,QueryConditionBoxBase,ConditionSelectorBox,ConditionFilterBox};

package/src/components/conditionbox/queryconditionbox.vue

@@ -0,0 +1,26 @@
+<template> 
+   <div v-show="showCondition" > 
+       <Row v-if="showFormBox" type="flex" justify="start" align="middle" >
+            <Col span='18'>
+                <FormBox ref="form" :config="formConfig" :dictData="dictData"/>
+            </Col>
+            <Col span='6'>
+                <Row type="flex" justify="end" align="middle"  >
+                    <Col>
+                        <Button customIcon="iconfont icon-custom-search" type="primary"  style="width:80px" @click="search">查询</Button>
+                    </COl>
+                    <Col style="margin-left:10px">
+                        <Button  customIcon="iconfont icon-custom-reset"  style="width:80px" @click="doClear">重置</Button>
+                    </Col>
+                </Row>
+            </Col>
+      </Row>   
+  </div>
+</template>
+<script>
+    import Base from './queryconditionboxbase.vue';
+    export default {
+        name: 'queryconditionbox',
+        extends: Base,
+    };
+</script>

package/src/components/conditionbox/queryconditionboxbase.vue

@@ -0,0 +1,124 @@
+<script>
+    import Base from './conditionbase.vue';
+    export default {
+        name: 'queryconditionboxbase',
+        extends: Base,
+        data () {
+            return {
+                myConfig: {
+                },
+                formConfig:{
+                    lineNum:1,
+                    labelWidth:100,
+                    labelPosition:'right',
+                    items:[]
+                },
+                showFormBox:true,
+                showClearBtn:true,
+                maxLineNum:3,
+            };
+        },
+        methods:{
+            customInit() {
+                if (this.myConfig.formConfig !== undefined) {
+                    Object.assign(this.formConfig, this.myConfig.formConfig);
+                } else {
+                    this.initField();
+
+                    this.condition.forEach(el => {
+                        this.formConfig.items.push(this.$Method.copy(el.config));
+                    });
+
+                    if (this.myConfig.labelWidth) {
+                        this.formConfig.labelWidth = this.myConfig.labelWidth;
+                    }
+                    if (this.myConfig.labelPosition) {
+                        this.formConfig.labelPosition = this.myConfig.labelPosition;
+                    }
+                    if (this.myConfig.maxLineNum) {
+                        this.maxLineNum = this.myConfig.maxLineNum;
+                    }
+
+                    if (this.modelType != 'treeSearch') {
+                        if (this.myConfig.lineNum) {
+                            this.formConfig.lineNum = this.myConfig.lineNum;
+                        } else {
+                            let num = this.formConfig.items.length;
+                            if (num > this.maxLineNum) {
+                                this.formConfig.lineNum = this.maxLineNum;
+                            } else {
+                                this.formConfig.lineNum = num;
+                            }
+                        }
+                    }
+                } 
+                if (this.formConfig.items.length === 0) {
+                    this.showFormBox = false;
+                } else {
+                    this.showFormBox = true;
+                }
+            },
+            customClear() {
+                if (this.$refs.form) {
+                    this.$refs.form.clearData();
+                }
+            },
+            customGetQuerySearchParam() {
+                let result={};
+                let form = this.$refs.form.getData();
+                if (this.myConfig.formConfig === undefined) {
+                    for (let temp in this.dataType) {
+                        if (form[temp]) {
+                            if (this.dataType[temp].calculator) {
+                                let obj = this.getConditionValue(temp,form[temp],this.dataType[temp].calculator,this.dataType[temp]);
+                                result = Object.assign({},result,obj);
+                            } else {
+                                result[temp] = form[temp];
+                            }
+                        }
+                    }
+                } else {
+                    let obj = {};
+                    obj['$and'] = [];
+                    this.formConfig.items.forEach(el => {
+                        if (form[el.name]) {
+                            let oper = '==';
+                            if (el.name.indexOf('name') !== -1) {
+                                oper = 'LIKE';
+                            }
+                            if (el.oper) {
+                                oper = el.oper;
+                            } 
+                            let temp = {};
+                            temp[el.name] = {};
+                            if (oper === 'LIKE') {
+                                temp[el.name][oper] = '%' + form[el.name]+'%';
+                            } else {
+                                temp[el.name][oper] = form[el.name];
+                            }
+                            obj['$and'].push(temp);
+                        }
+                    });
+                    if (obj['$and'].length > 0) {
+                        Object.assign(result, obj);
+                    }
+                }
+                return result;
+            },
+            
+            getValue(name) {
+                return this.$refs.form.getValue(name);
+            },
+
+            setValue(name, value) {
+                return this.$refs.form.setValue(name,value);
+            },
+            doClear() {
+                this.clear();
+                this.search();
+            }
+          
+        }
+        
+    };
+</script>

package/src/components/conditionbox/searchconditionbox.vue

@@ -0,0 +1,114 @@
+<template> 
+<div>
+    <Row type="flex"  :gutter="8">
+        <Col span='4'>
+            <ControlBox  ref="field"  :config="fieldConfig"  ></ControlBox>
+        </Col>
+        <Col span='6'>
+            <ControlBox  v-if="hackReset" ref="editors"  :config="editorsConfig"  ></ControlBox>
+        </Col>
+        <Col>
+            <Button icon="ios-search"  @click="search" >查询</Button>
+        </Col>
+        <Col>
+            <Button icon="ios-refresh" @click="clear">{{clearInfo}}</Button>
+        </Col>
+        <Col>
+            <Button icon="ios-search" type="primary" @click="showHighSearch">高级查询</Button>
+        </Col>
+    </Row>
+    <SearchGrid ref="searchgrid" :config="config" :dictData="searchDictData" :dataType="dataType" @search="search"/>
+</div>
+</template>
+<script>
+    import Base from './conditionbase.vue';
+    import SearchGrid from './searchgrid.vue';
+    export default {
+        name: 'searchconditionbox',
+        extends: Base,
+        components:{
+            SearchGrid
+        },
+        data () {
+            return {
+                fieldConfig: {
+                    name:'field',
+                    type:'ComboBox',
+                    codeWithName:false,
+                    valueChanged:this.fieldChanged
+                },
+                editorsConfig:{
+                    name:'editors',
+                    type:'TextBox',
+                    readOnly:true
+                },
+                searchDictData:{}
+            };
+        },
+        methods:{
+            customInit() {
+                this.initField();
+                this.fieldConfig.data = this.conditionPrior;
+                if (this.dictData != null) {
+                    this.searchDictData = this.$Method.copy(this.dictData);
+                }
+                this.searchDictData.FIELD =  this.condition;
+            },
+            
+            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);
+                this.$refs.searchgrid.clearCondition();
+                this.search();
+            },
+            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 = this.$refs.searchgrid.getResultCondition();
+                if (highObj['$and']) {
+                    if (obj !== {}) {
+                        highObj['$and'].push(obj);
+                    }
+                    searchParam = Object.assign({},{},highObj);
+                } else {
+                    searchParam = Object.assign({},obj,highObj);
+                }
+                return searchParam;
+            },
+            showHighSearch() {
+                this.$refs.searchgrid.show();
+            }
+          
+        }
+        
+    };
+</script>