ocpview-plus 0.0.1

package/src/components/conditionbox/conditionfilterbox.vue

@@ -0,0 +1,477 @@
+<template>
+<div style="padding-left:10px;padding-right:10px">
+    <Tree v-if="hackReset" :data="data" :render="renderContent" class="demo-tree-render"></Tree>
+</div>
+</template>
+<script>
+import { resolveComponent } from 'vue';
+    export default {
+        name:'conditionfilterbox',
+        props:{
+            config: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            dictData: {
+                type: Object,
+                default:null
+            }
+        } ,
+        data () {
+            return {
+                hackReset:true,
+                myConfig:{
+                    dbtype:'oracle',
+                    rootName:'',
+                    selector:[],
+                    items:[]
+                },
+                root:{
+                    title: '',
+                    isConnector:false,
+                    expand: true,
+                    selectorClass:1,
+                    render:this.renderRootContent
+                },
+                data: [],
+                selectorConfig:{}
+            };
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.myConfig = Object.assign({}, this.myConfig, this.config);
+                if (this.dictData) {
+                    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];
+                                }
+                            }
+                        }
+                    });
+                }
+                if (this.myConfig.selector && this.myConfig.selector.length > 0) {
+                    this.myConfig.selector.forEach(el => {
+                        if (!this.selectorConfig[el.code]) {
+                            this.selectorConfig[el.code] = {};
+                            this.selectorConfig[el.code].items = [];
+                        }
+                        this.myConfig.items.forEach(el2 => {
+                            if (el.code === el2.selector) {
+                                this.selectorConfig[el.code].items.push(el2);
+                            }
+                        });
+                    });
+                } else {
+                    this.myConfig.selector = [];
+                    let  obj = {};
+                    obj.code = '1';
+                    obj.name = '筛选条件';
+                    if (this.myConfig.rootName){
+                        obj.name = this.myConfig.rootName;
+                    }
+                    this.myConfig.selector.push(obj);
+                    this.selectorConfig[obj.code] = {};
+                    this.selectorConfig[obj.code].items = [];
+                    this.myConfig.items.forEach(el2 => {
+                        el2.selector = obj.code;
+                        this.selectorConfig[obj.code].items.push(el2);
+                    });
+                }
+                this.initData();
+            },
+            initData() {
+                this.hackReset = false;
+                this.data = [];
+                let root = {};
+                if (this.myConfig.selector.length === 1) {
+                    root.title =  this.myConfig.selector[0].name;
+                    root.isConnector =false;
+                    root.expand =true;
+                    root.selector = this.myConfig.selector[0].code;
+                    root.selectorClass = 1;
+                    root.render = this.renderRootStaticContent; 
+                    root.children = [];
+                    let obj = {
+                        title:'连接关系',
+                        operflag:true,
+                        selectorClass:2,
+                        selector:this.myConfig.selector[0].code,
+                        isConnector:true,
+                        expand: true,
+                        form:{'connector':'$and'},
+                        render:this.renderContent,
+                        children:[
+                            {
+                                title:'条件',
+                                operflag:true,
+                                isConnector:false,
+                                expand: true,
+                                selector:this.myConfig.selector[0].code,
+                                selectorClass:3,
+                            }
+                        ]
+                    };
+                    root.children.push(obj);
+                }
+                if (this.myConfig.selector.length > 1) {
+                    if (this.myConfig.rootName) {
+                        root.title =  this.myConfig.rootName;
+                    } else {
+                        root.title =  '筛选条件';
+                    }   
+                    root.expand =true;
+                    root.children = [];
+                    root.render = this.renderRootStaticContent;
+                    root.children.push({
+                        title: '连接关系',
+                        isConnector:true,
+                        expand: true,
+                        operflag:false,
+                        selector:'-',
+                        selectorClass:1,
+                        form:{'connector':'$and'},
+                        render:this.renderContent
+                    });
+                    root.children[0].children = [];
+                    this.myConfig.selector.forEach(el => {
+                        let obj = {};
+                        obj.title = el.name,
+                        obj.expand = true;
+                        obj.selectorClass = 2;
+                        obj.selector = el.code;
+                        obj.operflag = false;
+                        obj.render=this.renderRootStaticContent;
+                        obj.children = [];
+                        let temp = {
+                            title:'连接关系',
+                            operflag:true,
+                            selectorClass:3,
+                            selector:el.code,
+                            isConnector:true,
+                            expand: true,
+                            form:{'connector':'$and'},
+                            render:this.renderContent,
+                            children:[
+                                {
+                                    title:'条件',
+                                    operflag:true,
+                                    isConnector:false,
+                                    expand: true,
+                                    selector:el.code,
+                                    selectorClass:4,
+                                }
+                            ]
+                        };
+                        obj.children.push(temp);
+                        root.children[0].children.push(obj);
+                    });
+                }
+                this.data.push(root);
+                this.$nextTick(() =>{
+                    this.hackReset = true;
+                });   
+            },
+                             
+             // eslint-disable-next-line no-unused-vars
+            renderRootContent (h, {root, node, data }) {
+                let buttonConfig = Object.assign({}, this.buttonProps, {icon: 'ios-add',type: 'primary'});
+                buttonConfig.style = { width: '64px'};
+                buttonConfig.onClick = () => { this.append(data); };
+                return h('div', {
+                    style: {
+                        display: 'block',
+                        width: '100%',
+                        'line-height':'34px'
+                    }
+                }, [h('span',data.title),
+                    h('span', {
+                        style: {
+                            display: 'inline-block',
+                            float: 'right',
+                            marginRight: '32px'
+                        }
+                    }, [
+                        h(resolveComponent('Button'), buttonConfig)
+                    ])
+                ]);
+            },
+            renderContent (h, { root, node, data }) {
+                return h('div',{
+                    style: {
+                        display: 'block',
+                        width: '100%',
+                        'line-height':'34px'
+                    }
+                }, [h('span', {
+                    style: {
+                        'vertical-align':'middle'
+                    }
+                },data.title),
+                    h('span',{ 
+                        style: {
+                            display: 'inline-block',
+                            float: 'right',
+                            width:'90%',
+                            marginRight: '32px'
+                        }},[h(resolveComponent('ConditionSelectorBox'),{
+                            isConnector:data.isConnector,
+                            operflag:data.operflag,
+                            config:this.selectorConfig[data.selector],
+                            setOperData:this.setOperData,
+                            valueData:data.form,
+                            onDoAction:(val) =>{
+                                    if (val.name === 'doAdd') {
+                                        this.append(data);
+                                    } 
+                                    if (val.name === 'doDel') {
+                                        this.remove(root, node, data);
+                                    } 
+                            },
+                            onClick:(form) => {
+                                    if (!data.form) {
+                                        data.form = {};
+                                    }
+                                    Object.assign(data.form, form);
+                            }
+                        })])]);
+            },
+            // eslint-disable-next-line no-unused-vars
+            renderRootStaticContent (h, { root, node, data }) {
+                return h('span',{
+                    style: {
+                        display: 'inline-block',
+                        width: '100%',
+                        'line-height':'34px'
+                    }
+                }, [h('span', data.title)]);
+            },
+            append (data) {
+                const children = data.children || [];
+                let nextClass = Number(data.selectorClass) + 1;
+                let isConnector = !data.isConnector;
+                let title ='条件';
+                if (isConnector) {
+                    title = '连接关系';
+                    let flag = false;
+                    for (let i=0; i<children.length; i++) {
+                        if (children[i].isConnector) {
+                            flag = true;
+                            break;
+                        }
+                    }
+                    if (flag) {
+                        return;
+                    }
+                }
+                let obj = {
+                    title:title,
+                    operflag:true,
+                    selectorClass:nextClass,
+                    selector:data.selector,
+                    isConnector:isConnector,
+                    expand: true
+                };
+                if (isConnector) {
+                    obj.form = {'connector':'$and'};
+                }
+                children.push(obj);
+                Object.assign(data,{'children':children});
+            },
+            setOperData (el, tempData) {
+                if (this.myConfig.setOperData) {
+                    return this.myConfig.setOperData(el, tempData);
+                } else {
+                    return tempData;
+                }               
+            },
+            remove (root, node, data) {
+                const parentKey = root.find(el => el === node).parent;
+                const parent = root.find(el => el.nodeKey === parentKey).node;
+                const index = parent.children.indexOf(data);
+                parent.children.splice(index, 1);
+            },
+            getQuerySearchParam () { 
+                let para = {};
+                if (this.myConfig.selector.length === 1){
+                    if (this.data[0].children === undefined) {
+                        return para;
+                    } else {
+                        this.creatSearchParam(this.data[0],para,1);
+                    }    
+                } else {
+                    if (this.data[0].children[0].children === undefined) {
+                        return para;
+                    } else {
+                        this.creatSearchParam(this.data[0].children[0],para,2);
+                    }
+                }
+                let temp = [];
+                this.myConfig.selector.forEach(el=> {
+                    if (para[el.code]) {
+                        temp.push(para[el.code]);
+                    }
+                });
+                if (temp.length === 0) {
+                    return {};
+                } else if (temp.length === 1) {
+                    return this.$Method.copy(temp[0]);
+                } else  {
+                    let  obj = {};
+                    obj[this.data[0].children[0].form.connector] = temp;
+                    return obj;
+                }
+            },
+            getQuerySearchParamToString () {
+                let obj = this.getQuerySearchParam();
+                let str = '';
+                str = this.setParaSring(obj,str);
+                return str;
+            },
+            setParaSring(obj,str) {
+                if (obj.constructor === Array) {
+                    let temp = '';
+                    if (str === '$and') {
+                        str = ' and ';
+                    } else if (str === '$or') {
+                        str = '  or ';
+                    }
+                    obj.forEach(el => {
+                        temp = temp + this.setParaSring(el) + ' ' +str + ' ';
+                    });
+                    if (temp) {
+                        temp = temp.substring(0, temp.length - 5);
+                    }
+                    return temp;
+                } else {
+                    for (let pro in obj) {
+                        let value = this.$Method.copy(obj[pro]);
+                        if (value.constructor === Array){
+                            return '( ' + this.setParaSring(value,pro) + ' )';
+                        } else {
+                            return this.getCommomParamString(pro,value);
+                        }
+                    }
+                }
+            },
+            getCommomParamString (pro,obj) {
+                let str = pro ;
+                for(let temp in obj) {
+                    if (temp === '==') {
+                        str =str + ' = '; 
+                    }  else {
+                        str =str +' ' + temp + ' '; 
+                    }
+                    let v = obj[temp];
+                    let index = this.myConfig.items.findIndex(el => el.name === pro);
+                    if (index > -1) {
+                        if (this.myConfig.dbtype === 'oracle') {
+                            if (this.myConfig.items[index].type === 'DateBox') {
+                                let format = 'yyyy-MM-dd';
+                                if (this.myConfig.items[index].vtype === 'date') {
+                                    format = 'yyyy-MM-dd';
+                                } else if (this.myConfig.items[index].vtype === 'datetime') {
+                                    format = 'yyyy-MM-dd hh:mm:ss';
+                                } else if (this.myConfig.items[index].vtype ==='month') {
+                                    format = 'yyyy-MM';
+                                }
+                                if (this.myConfig.items[index].format) {
+                                    format = this.myConfig.items[index].format;
+                                }
+                                v = 'to_date(\'' + v + '\',\'' +format +'\')';
+                            } else {
+                                v = '\'' + v + '\'';
+                            }
+                        } else {
+                            v = '\'' + v + '\'';
+                        }
+                        str = str  + v;
+                        return str;
+                    }
+                }
+                return '';
+            },
+            getCommomParam (obj) {
+                let param = {};
+                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; 
+                    }
+                } 
+                return param;
+            },
+            creatSearchParam(data,obj,flag) {
+                data.children.forEach(el => {
+                    if (el.children && el.children.length > 0) {
+                        let temp = null;
+                        if (flag === 2) {
+                            temp = el.children[0];
+                        } else {
+                            temp = el;
+                        }
+                        obj[el.selector] = {};
+                        obj[el.selector][temp.form.connector] = [];
+                        this.creatSearchParamCommon(temp.children,obj[el.selector][temp.form.connector]);
+                        if (obj[el.selector][temp.form.connector].length === 0) {
+                            delete obj[el.selector];
+                        }
+                    }
+                });
+            },
+            creatSearchParamCommon(data,obj) {
+                if (data && data.length > 0) {
+                    for (let i=0;i<data.length;i++) {
+                        let temp = {};
+                        if (data[i].isConnector) {
+                            temp[data.form.connector] = [];
+                            this.creatSearchParamCommon(data[i].children,temp[data[i].form.connector]);
+                            if (temp[data.form.connector].length > 0) {
+                                obj.push(temp);
+                            }
+                        } else {
+                            if (data[i].form && data[i].form.value) {
+                                if (data[i].children && data[i].children.length > 0) {
+                                    let temp = {};
+                                    temp[data[i].children[0].form.connector] = [];
+                                    this.creatSearchParamCommon(data[i].children[0].children,temp[data[i].children[0].form.connector]);
+                                    if (temp[data[i].children[0].form.connector].length > 0) {
+                                        temp[data[i].children[0].form.connector].push(this.getCommomParam(data[i].form)); 
+                                        obj.push(temp);
+                                    } else {
+                                        obj.push(this.getCommomParam(data[i].form));
+                                    }
+                                } else {
+                                    obj.push(this.getCommomParam(data[i].form));
+                                }
+                            }
+                        }
+                    }
+                } 
+            },
+            clearData() {
+                this.initData();
+            }
+        }
+    };
+</script>
+<style>
+    .demo-tree-render .ivu-tree-title{
+        width: 98%;
+    }
+</style>