ocpview-plus 0.0.1

package/src/components/masterplate/billconditionbox.vue

@@ -0,0 +1,224 @@
+<template> 
+<div style="display: flex; align-items: center;">
+    <Icon custom="iconfont icon-custom-delcond" @click.stop="doDel" size="20" color="#515a6e" style="cursor:pointer;margin-bottom:10px;padding-right:8px"/>
+    <FormBox ref="form" :config="form"  @inputValue="formChanged" style="flex:1"/>
+</div>
+</template>
+<script>
+    export default {
+        name: 'mbillconditionbox',
+        data () {
+            return {
+                form:{
+                    lineNum:12,
+                    labelWidth:10,
+                    showLabel:false,
+                    items:[{
+                        name:'relevance',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        data:[{code:'or',name:'或'}, {code:'and', name:'且'}],
+                        colNum:1.2,
+                        defaultValue:'and',
+                        style:{'margin-bottom':'10px','margin-top':'0px','margin-left':'0px',},
+                        transfer:true
+                    },{
+                        name:'field',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        valueChanged:this.fieldChanged,
+                        transfer:true,
+                        colNum:4,
+                        isFull:true,
+                         style:{'margin-bottom':'10px','margin-top':'0px'}
+                    },{
+                        name:'oper',
+                        type:'ComboBox',
+                        codeWithName:false,
+                        clearable:false,
+                        colNum:2,
+                        data:[{
+                            name: '等于',
+                            code: '=='
+                        }],
+                        defaultValue:'==',
+                        isFull:true,
+                        transfer:true,
+                        style:{'margin-bottom':'10px','margin-top':'0px'}
+                    },{
+                        name:'value',
+                        type:'TextBox',
+                        readOnly:true,
+                        colNum:4,
+                        isFull:true,
+                        style:{'margin-bottom':'10px','margin-top':'0px'}
+                    }]
+                },
+                dataType:{},
+            };
+        },
+        created () {
+            this.init();
+        },
+        props:{
+            config: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            valueData: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            curIndex:{
+                type:String,
+                default:null
+            }
+        } ,
+        mounted () {  
+            this.$nextTick(() => {
+                if (this.valueData) {
+                    if (this.valueData.field){
+                        this.fieldChanged({value:this.valueData.field});
+                    }
+                }
+                this.$nextTick(() => {
+                    let obj = Object.assign({}, {oper:'=='}, this.valueData);
+                    this.$refs.form.setData(obj);
+                    this.$refs.form.setFormReadOnly(false);
+                })
+            });
+        },
+        methods:{
+            formChanged(){
+                let obj = {};
+                obj.index = this.curIndex;
+                obj.form  = this.$refs.form.getData();
+                this.$emit('inputValue', obj);   
+            },
+            init() {
+               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[1].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: '<='
+                    });
+                    tempData.push({
+                        name: '小于',
+                        code: '<'
+                    });
+                    tempData.push({
+                        name: '不等于',
+                        code: '<>'
+                    });
+                } 
+                if (el.type === 'TextBox') {
+                    tempData.push({
+                        name: '不等于',
+                        code: '<>'
+                    });
+                    tempData.push({
+                        name: '包含',
+                        code: 'LIKE'
+                    });
+                } 
+                if (el.setOperData) {
+                    tempData =  el.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 = '';
+                    config.transfer = true;
+                    obj.push(config);
+                    if (e.value.indexOf('name') !== -1) {
+                        operValue = 'LIKE';
+                    }
+                    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,
+                        isFull:true,
+                        transfer: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';
+                obj.index = this.curIndex;
+                this.$emit('doAction', obj);
+            },
+            setRelevanceReadOnly(value) {
+                this.$refs.form.setReadOnly('relevance',value);
+            }
+        }
+    };
+</script>

package/src/components/masterplate/billconditionsbox.vue

@@ -0,0 +1,427 @@
+<template>
+<Card  :padding="0" style="padding:14px 16px;" dis-hover>
+    <Row type="flex" justify="start" align="middle" style="max-height:120px;overflow-y:auto;overflow-x:hidden" >
+        <Col v-for="temp in data" :key="temp.index" span="12">
+            <BillConditionBox v-if="reset" :config="myConfig" :ref="temp.index" :curIndex="temp.index" :valueData="temp.form" @doAction="doAction" @inputValue="input"/>
+        </Col>
+    </Row>
+    <Row type="flex" justify="start" align="middle">
+        <Col span="24"  style="margin-bottom:14px">
+            <p     @click.stop="doAdd" style="cursor:pointer">
+                <Row type="flex" justify="start" align="middle">
+                    <Col>
+                        <Icon custom="iconfont icon-custom-addcond"   size="20" color="#AF292E"/>
+                    </Col>
+                    <Col>
+                        <span style="margin-left:18px;color:#AF292E;font-size:14px"> 添加条件 </span>
+                    </Col>
+                </Row>
+            </p>
+        </Col>
+    </Row>
+    <Row type="flex" justify="start" align="middle">
+        <Col style="margin-right:10px">
+            <Button  type="primary"  @click="searchFilter" >筛选</Button>
+        </Col>
+        <Col >
+            <Button   @click="clearData" >清空筛选值</Button>
+        </Col>
+        <Col>
+            <Divider  type="vertical" class="dividercommon" />
+        </Col>
+        <Col v-if="!delSceneFlag" >
+            <Checkbox v-model="saveSceneFlag"><span style="margin-left: 10px;">保存场景</span></Checkbox>
+        </Col>
+        <Col v-if="saveSceneFlag || delSceneFlag"  style="margin-right:14px">
+            <Input  v-model="scenename"  placeholder="请输入场景名称" style="width: 456px" />
+        </Col>
+        <Col v-if="saveSceneFlag || delSceneFlag" >
+            <Button type="info" @click="saveScene" >保存</Button>
+        </Col>
+        <Col v-if="delSceneFlag">
+            <Divider  type="vertical" class="dividercommon"/>
+        </Col>
+        <Col v-if="delSceneFlag" >
+            <Button @click="delScene" >删除场景</Button>
+        </Col>
+         <Col v-if="delSceneFlag">
+            <Divider  type="vertical" class="dividercommon"/>
+        </Col>
+        <Col v-if="delSceneFlag">
+            <Button @click="addScene">新增</Button>
+        </Col>
+    </Row>
+</Card>
+</template>
+
+<script>
+import BillConditionBox from './billconditionbox';
+export default {
+    name:'mbillconditionsbox',
+    components: {BillConditionBox},
+    data () {
+        return {
+            saveSceneFlag:false,
+            delSceneFlag:false,
+            scenename:'',
+            reset:true,
+            data:[],
+            oldForm:{},
+            selectorConfig:{}
+        };
+    },
+    props:{
+        config: {
+            type: Object,
+            default () {
+                return {};
+            }
+        },
+        dictData: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    created() {
+        this.init();
+    },
+    methods:{
+        init () {
+            this.curlModeType = this.modeType;
+            this.myConfig = Object.assign({}, this.myConfig, this.config);
+            if (this.dictData && this.myConfig.items) {
+                this.myConfig.items.forEach(el => {
+                    if (el.dictkey) {
+                        if (el.data === undefined) {
+                            let dictkey = el.dictkey;
+                            if (el.customDictkey) {
+                                dictkey = el.customDictkey;
+                            }
+                            if (this.dictData[dictkey]) {
+                                el.data = this.dictData[dictkey];
+                            }
+                        }
+                    }
+                });
+            }
+            this.initData();
+        },
+        doAction(obj) {
+            if (obj.name === 'doDel') {
+                let index = this.data.findIndex(el => el.index === obj.index);
+                if (index > -1) {
+                    this.data.splice(index ,1);
+                    this.$nextTick(() => {
+                        if (this.data.length === 0) {
+                            let obj = {};
+                            obj.index ='index_0';
+                            obj.form = {};
+                            this.data.push(obj); 
+                        }
+                    });
+                }
+            }
+        },
+        input(e) {
+            let index = this.data.findIndex(el => el.index === e.index);
+            if (index > -1) {
+                let obj = Object.assign({},this.data[index],{form:e.form});
+                this.data.splice(index,1,obj);
+            }
+        },
+        doAdd() {
+            let num = this.data.length;
+            let index = 'index_' + num;
+            do {
+                let tempIndex = this.data.findIndex(el => el.index === index);
+                if (tempIndex > -1) {
+                    num++;
+                    index = 'index_' + num;
+                } else {
+                    let obj = {};
+                    obj.index = index;
+                    obj.form ={};
+                    this.data.push(obj);
+                    break;
+                }
+            } while (true);
+        },
+        initData() {
+            this.data = [];
+            let obj = {};
+            obj.index ='index_0';
+            obj.form = {};
+            this.data.push(obj); 
+        },
+        clearData() {
+            this.data = [];
+            this.$nextTick(() => {
+                this.initData();
+            });
+        },
+        getCommomParam (obj, para) {
+            let param = {};
+            let config = this.myConfig.items.find(el => el.name === obj.field);
+            if (config) {
+                if (config.type === 'DateBox') {
+                    if (!config.vtype || config.vtype === 'date') {
+                        if (obj.oper === '==') {
+                            let temp = {};
+                            temp[obj.field] ={};
+                            temp[obj.field]['>='] = obj.value +' 00:00:00';
+                            let temp2 = {};
+                            temp2[obj.field] ={};
+                            temp2[obj.field]['<='] = obj.value +' 23:59:59';
+                            let temp3 = {};
+                            temp3['$and'] = [];
+                            temp3['$and'].push(temp);
+                            temp3['$and'].push(temp2);
+                            if (para) {
+                                para.push(temp3);
+                            } else {
+                                Object.assign(param,temp3);
+                            }
+                        } else if (obj.oper === '>' || obj.oper === '>=') {
+                            param[obj.field] = {};
+                            if (obj.oper === '>=') {
+                                param[obj.field][obj.oper] =  obj.value + ' 00:00:00';
+                            } else {
+                                param[obj.field][obj.oper] =  obj.value + ' 23:59:59';
+                            }
+                        } else if  (obj.oper === '<' || obj.oper === '<='){
+                            param[obj.field] = {};
+                            if (obj.oper === '<=') {
+                                param[obj.field][obj.oper] =  obj.value + ' 23:59:59';
+                            } else {
+                                param[obj.field][obj.oper] =  obj.value + ' 00:00:00';
+                            }
+                        } else if (obj.oper === '<>'){
+                            let temp = {};
+                            temp[obj.field] ={};
+                            temp[obj.field]['<'] = obj.value +' 00:00:00';
+                            let temp2 = {};
+                            temp2[obj.field] ={};
+                            temp2[obj.field]['>'] = obj.value +' 23:59:59';
+                            let temp3 = {};
+                            temp3['$or'] = [];
+                            temp3['$or'].push(temp);
+                            temp3['$or'].push(temp2);
+                            if (para) {
+                                para.push(temp3);
+                            } else {
+                                Object.assign(param,temp3);
+                            }
+                        }
+                    } else {  
+                        param[obj.field] = {};
+                        if (obj.value.value !== undefined) {
+                            param[obj.field][obj.oper] = obj.value.value; 
+                        } else {
+                            param[obj.field][obj.oper] = obj.value; 
+                        }
+                    }
+                } else {
+                    if (obj.oper === 'LIKE') {
+                        param[obj.field] = {};
+                        param[obj.field][obj.oper] = '%' + obj.value + '%';
+                    } else  {
+                        param[obj.field] = {};
+                        if (obj.value.value !== undefined) {
+                            param[obj.field][obj.oper] = obj.value.value; 
+                        } else {
+                            param[obj.field][obj.oper] = obj.value; 
+                        }
+                    } 
+                }
+                
+            }
+            
+            if (para === undefined) {
+                return param;
+            } else {
+                para.push(param);
+            }
+           
+        },
+        getQuerySearchParam () {
+            if (this.data.length  === 0) {
+                return {};
+            }
+            if (this.data.length  === 1) {
+                if (this.data[0].form.value  || this.data[0].form.value === 0) {
+                    return this.getCommomParam(this.data[0].form);
+                } else {
+                    return {};
+                }
+            }
+            if (this.data.length > 1) {
+                let obj = {};
+                let paraOr = [];
+                let paraAnd = [];
+                this.data.forEach(el => {
+                    if (el.form.value || el.form.value === 0) {
+                        if (el.form.relevance === 'or') {
+                            this.getCommomParam(el.form, paraOr);
+                        }
+                        if (el.form.relevance === 'and') {
+                            this.getCommomParam(el.form, paraAnd);
+                        }
+                        
+                    }
+                });
+                if (paraOr.length > 0) {
+                    obj['$or'] = paraOr;
+                }
+                if (paraAnd.length > 0) {
+                    obj['$and'] = paraAnd;
+                }
+                let result = {};
+                if (paraOr.length > 0 || paraAnd.length > 0) {
+                    result['$and'] = [];
+                    result['$and'].push(obj);
+                }
+                return result;
+            }
+        },
+        getData() {
+            let tmp = {};
+            tmp.scenename = this.scenename;
+            tmp.data = JSON.stringify(this.$Method.copy(this.data));
+            let result = Object.assign({},this.oldForm,tmp);
+            return result;
+        },
+        setData(obj) {
+            this.data = [];
+            this.scenename = '';
+            if (obj.data) {
+                 this.data = JSON.parse(obj.data);
+            }
+            if (obj.scenename) {
+                this.scenename = obj.scenename;
+            }
+            this.oldForm = this.$Method.copy(obj);
+            this.delSceneFlag = true;
+            this.reset = false;
+            this.$nextTick(() => {
+                this.reset = true;
+            })
+        },
+        searchFilter() {
+            let temp = {};
+            temp.name = 'condition_searchFilter';
+            temp.para = this.getQuerySearchParam();
+            this.$emit('conditionAction',temp);
+        },
+        closeFilter (){
+            let temp = {};
+            temp.name = 'condition_closeFilter';
+            this.$emit('conditionAction',temp);
+        },
+        addScene () {
+            this.delSceneFlag = false;
+            this.saveSceneFlag = false;
+            this.oldForm = {};
+            this.initData();
+            this.reset = false;
+            this.$nextTick(() => {
+                this.reset = true;
+            });
+        },
+        saveScene() {
+            let temp = {};
+            temp.name = 'saveScene';
+            temp.para = Object.assign({},this.oldForm,this.getData());
+            if (this.delSceneFlag) {
+                temp.para.flag = 'U';
+            } else {
+                temp.para.flag = 'I';
+            }
+            this.$emit('doAction',temp);
+            this.$nextTick(() => {
+                if (!this.delSceneFlag) {
+                    this.delSceneFlag = true;
+                }
+            });
+        },
+        delScene() {
+            let temp = {};
+            temp.name = 'saveScene';
+            temp.para = Object.assign({},this.oldForm,this.getData());
+            temp.para.flag ='D';
+            this.$emit('doAction',temp);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.masterplate {
+    .querybar {
+         .ivu-input {
+            height:40px;
+         }
+         .ivu-select-single {
+            .ivu-select-selection {
+                height: 40px;
+                position: relative;
+            }
+         }
+         
+         .ivu-btn {
+             height:40px;
+         }
+        .ivu-btn-red {
+            color: #fff;
+            background-color: #AF292E;
+        }
+        .ivu-btn-red:hover {
+            background-color: #FFB5B8;
+            border-color: #FFB5B8;
+        }
+        .ivu-btn-red :focus {
+            background-color: #7A2531;
+            border-color: #7A2531;
+        }
+        .ivu-btn-black {
+            color: #fff;
+            background-color: #4D4E53;
+        }
+
+        .ivu-btn-black:hover {
+              background-color: #CDD0D6;
+              border-color: #CDD0D6;;
+         }
+         .ivu-btn-black:focus {
+              background-color: #000000;
+              border-color: #000000;;
+         }
+         .ivu-btn-default:hover {
+               color: #EF6E73;
+              background-color: #FFF9F9;
+              border-color: #EF6E73;;
+         }
+        .ivu-btn-default:focus {
+             color: #DF3D43;
+            background-color: #FFF9F9;
+            border-color: #DF3D43;
+        }
+        .modulecodetext {
+            height:40px;
+            text-align:center;
+            vertical-align: middle;
+            background-color: #F5F7FA;
+            line-height: 40px;
+            padding: 0 15px;
+        }
+        .dividercommon {
+            margin:1px 12px 0 12px;
+            height:32px;
+        }
+    }
+ 
+}
+
+
+</style>