ocpview-plus 0.0.1

package/src/components/poptagbox/index.js

@@ -0,0 +1,2 @@
+import PopTagBox from './poptagbox.vue';
+export default PopTagBox;

package/src/components/poptagbox/poptagbox.vue

@@ -0,0 +1,389 @@
+<template> 
+ <div v-show="myConfig.visible" >
+    <Tag  :color="color" :size="myConfig.tagSize"  v-for="(tempItem,index) in data" :key="index + '_edit'"  :closable="tempItem.closable" @on-close="closeTag(index)">{{ tempItem.label}}</Tag>
+    <Button ref="btn" v-show="!myConfig.readOnly" icon="ios-add" type="dashed" :size="myConfig.size" @click="click">{{myConfig.btnText}}</Button>
+    <Modal v-model="popShow" :styles="queryConfig.popStyle" :width="currentWidth" :title="modeTitle" :footer-hide="footerHide" :draggable="draggable" :closable="myConfig.closable" class="efuture-model">
+        <div  style="padding-left:16px;padding-right:16px;"><component :is="pop" ref="popView" :config="queryConfig" :dictData="myConfig.dictData"  @conditionAction="conditionAction" :isPop="true" @dbclick="dbclick"/></div>
+        <template #footer>
+        <div>
+              <Row type="flex" justify="center" align="middle"  :gutter="8">
+                <Col>
+                    <Button  type="primary" style="width:120px" @click="ok" >确认</Button>
+                </Col>
+                </Row>
+        </div>
+        </template>
+    </Modal>
+</div>
+</template>
+<script>
+    import Base from '@/components/base/controlbase.vue';
+    export default {
+        name: 'poptagbox',
+        extends: Base,
+        data () {
+            return {
+                myConfig: {
+                    isTree:false,
+                    selectkey:'',
+                    color:'primary',
+                    closable:true,
+                    tagSize:'default',
+                    size:'small',
+                    clearCondition:true,
+                    btnText:'添加',
+                    popControl:'',
+                    dictData:{}
+                    
+                },
+                queryConfig:{
+                    popStyle:{
+                        top:'20px'
+                    }
+                },
+                popShow:false,
+                data:[],
+                selectTreeData:[],
+                customRows:[],
+                draggable:false,
+                value:[],
+                oldValue:[],
+                color:'default',
+                footerHide:false
+            };
+        },
+        props:{
+            fatherValue: {
+                type: Array,
+                default: () => []
+            }
+        } ,
+        computed: {
+            pop () {
+                if (this.queryConfig.popControl) {
+                    return this.queryConfig.popControl;
+                } else {
+                    if (this.queryConfig.isTree) {
+                        return 'TreeBox';
+                    } else {
+                        return 'ViewGrid';
+                    }
+                }
+            },
+            modeTitle() {
+                let title = this.config.label;
+                if (this.queryConfig.title) {
+                    title = this.queryConfig.title;
+                }
+                if (this.myConfig.curlTitle) {
+                    title = this.myConfig.curlTitle
+                }
+                return title;
+            }
+        },
+        methods:{
+            conditionAction(temp) {
+                switch(temp.action) {
+                    case 'condition_ok':
+                        if (temp.rows) {
+                            this.customRows = [];
+                            let flag = true;
+                            if (temp.rows.length === 0) {
+                                this.$refs.popView.alert('请选择');
+                                this.popShow = true;
+                                return true;
+                            }
+                            if (this.queryConfig.isTree) {
+                                if (this.queryConfig.allowLastNode) {
+                                    temp.rows.some(el => {
+                                        if (this.$refs.popView.isChildren(el)) {
+                                            flag = false;
+                                            return true;
+                                        }
+                                    });
+                                }
+                                if (!flag) {
+                                    this.$refs.popView.alert('选中的节点存在非末级节点，请检查');
+                                    this.popShow = true;
+                                } else {
+                                    if (this.config.allowLastNode === true) {
+                                        let rows = [];
+                                        temp.rows.forEach(el => {
+                                            if (!el.children || el.children.length === 0) {
+                                                rows.push(el);
+                                            }
+                                        });
+                                        this.setCommmonValue(rows);
+                                    } else {
+                                        this.setCommmonValue(temp.rows);
+                                    }
+                                    this.popShow = false;
+                                }
+                            } else {
+                                this.setCommmonValue(temp.rows);
+                                this.popShow = false;
+                            }
+                        }
+                        break;
+                    case 'condition_cancel':
+                        this.popShow = false;
+                        break;
+                }
+                if (!this.popShow) {
+                    document.querySelector('body').removeAttribute("style");
+                }
+            },
+            overrideSearchParam (param) {
+                if (this.myConfig.overrideSearchParam) {
+                    return this.myConfig.overrideSearchParam(param);
+                } else {
+                    return param;
+                }
+            },
+            setCommmonValue(rows) {
+                let that = this;
+                if (this.myConfig.onAddTag) {
+                    let temp = {};
+                    temp.addData = rows;
+                    temp.data = this.$Method.copy(this.data);
+                    temp.control = that;
+                    temp.name =  this.myConfig.name;
+                    let tmp = this.myConfig.onAddTag(temp);
+                    if (tmp && tmp.length > 0) {
+                        tmp.forEach(el => {
+                            if (!el.label) {
+                                if (this.myConfig.setLabel) {
+                                    el.label = this.myConfig.setLabel(el);
+                                }
+                            }
+                            el.closable = true;
+                            this.data.push(el);
+                        });
+                    }
+                } else {
+                    rows.forEach(el => {
+                        if (this.myConfig.setLabel) {
+                            el.label = this.myConfig.setLabel(el);
+                        }
+                        el.closable = true;
+                        this.data.push(el);
+                    });
+                }
+                this.setFatherValue();
+            },
+            setFatherValue() {
+                let para = this.valueToFatherValue();
+                para.name = this.myConfig.name;
+                this.$emit('inputValue', para);
+            },
+
+            customInit () {
+                if (this.config.selectkey) {
+                    Object.assign(this.queryConfig, this.getQueryConfig(this.config.selectkey));
+                    if (!this.queryConfig.isConfig) {
+                        this.queryConfig.resources = this.OmdUrl[this.queryConfig.resources];
+                    }
+                    if (this.queryConfig.draggable) {
+                        this.draggable = this.queryConfig.draggable;
+                    }
+                    this.queryConfig.overrideSearchParam = this.overrideSearchParam;
+                    if (this.config.multiSelect !== undefined) {
+                        this.queryConfig.multiSelect = this.config.multiSelect;
+                    }
+                    if (this.config.showAll !== undefined) {
+                        this.queryConfig.showAll = this.config.showAll;
+                    }
+                    if (this.queryConfig.popControl) {
+                        this.footerHide = true;
+                    }
+
+                    this.setSizeConfig(this.queryConfig);
+                   
+                    if (JSON.stringify(this.myConfig.dictData) === '{}') {
+                        let obj = {};
+                        if (this.queryConfig.items && this.queryConfig.items.length > 0) {
+                            this.queryConfig.items.forEach(el => {
+                                let dictkey = el.dictkey;
+                                if (el.customDictkey) {
+                                    dictkey = el.customDictkey;      
+                                }
+                                if (dictkey) {
+                                    obj[dictkey] = '';  
+                                }
+                            });
+                        }
+                        if (JSON.stringify(obj) !== '{}') {
+                            if (this.myConfig.getDictData) {
+                                obj = this.myConfig.getDictData(obj);
+                            }
+                            this.myConfig.dictData = obj;
+                        }
+                    }
+                    if (this.myConfig.sysDictData !== undefined) {
+                        if (this.myConfig.dictData === undefined) {
+                            this.myConfig.dictData = {};
+                        }
+                        this.myConfig.dictData = Object.assign({}, this.myConfig.sysDictData, this.myConfig.dictData);
+                    }
+                   
+                    if(this.queryConfig.isTree) {
+                        this.queryConfig.showTitle = false;
+                    }
+                } 
+                if (this.myConfig.readOnly) {
+                    this.color = 'default';
+                } else {
+                    this.color = this.myConfig.color;
+                }
+            },
+            valueToFatherValue() {
+                let para= {};
+                para.value = [];
+                if (this.data && this.data.length > 0) {
+                    this.data.forEach(el => {
+                        let temp  = this.$Method.copy(el);
+                        delete temp.label;
+                        delete temp.closable;
+                        para.value.push(temp);
+                    });
+                }
+                return para;
+            },
+            click(){
+                let flag = true;
+                if (!this.queryConfig.isTree) {
+                    if (this.$refs.popView.$children.length > 0) {
+                        if (this.$refs.popView.$children[0].customClear) {
+                            this.$refs.popView.$children[0].customClear();
+                        }
+                        this.$refs.popView.clearData();
+                    }
+                }
+                if (this.myConfig.readOnly) {
+                    return;
+                }
+                if (this.myConfig.searchBefore) {
+                    this.$refs['popView'].clearSearchBeforeSearchParam();
+                    flag = this.myConfig.searchBefore(this,this.$refs['popView']);
+                    if (flag) {
+                        if (this.searchParam !== undefined) {
+                            this.$refs['popView'].setSearchBeforeSearchParam(this.searchParam);
+                        }
+                    }
+                }
+                if (flag) {
+                    if (this.config.selectkey) {
+                        this.popShow = true;
+                        if (this.myConfig.clearCondition) {
+                            if (this.$refs['popView'].clearCondition) {
+                                this.$refs['popView'].clearCondition();
+                            }
+                        }
+                        if (this.queryConfig.manualLoad) {
+                            this.$refs['popView'].refurbish();
+                        } else {
+                            this.$refs['popView'].setData([]);
+                        }
+
+                    }    
+                }
+            },
+          
+            closeTag (index) {
+                let flag = true;
+                let that = this;
+                if (this.myConfig.onDelTag) {
+                    let temp = {};
+                    temp.delIndex = index;
+                    temp.data = this.$Method.copy(this.data);
+                    temp.control = that;
+                    temp.name =  this.myConfig.name;
+                    flag = this.myConfig.onDelTag(temp);
+                }
+                if (flag) {
+                    if (index > -1) {
+                        this.data.splice(index, 1);
+                        this.setFatherValue();
+                    }
+                }
+            },
+            onSelectChange() {
+                return this.$refs.myTreeBox.onSelectChange();
+            },
+            
+            onToggleExpand() {
+                return this.$refs.myTreeBox.onToggleExpand();
+            },
+            dbclick(e) {
+                let temp = {};
+                temp.action= 'condition_ok';
+                temp.rows = [];
+                temp.rows.push(e);
+                this.conditionAction(temp);
+            },
+            ok() {
+                let temp = {};
+                temp.action= 'condition_ok';
+                temp.rows = this.$refs.popView.getSelection();
+                this.conditionAction(temp);
+            },
+            watchCustomFatherValue () {
+                this.data = [];
+                if (this.value && this.value.length > 0) {
+                    this.value.forEach(el => {
+                        let elx = this.$Method.copy(el);
+                        if (this.config.setLabel) {
+                            elx.label = this.config.setLabel(elx);
+                        } else {
+                            elx.label = '';
+                        }
+                        elx.closable = true;
+                        this.data.push(elx);
+                    });
+                } 
+            },
+
+            setCustomPro(obj) {
+                if (obj.readOnly !== undefined) {
+                    let data = this.$Method.copy(this.data);
+                    if (obj.readOnly) {
+                        this.color = 'default';
+                    } else {
+                        this.color = this.myConfig.color;
+                    }
+                    data.forEach((el,index) => {
+                        let temp = this.$Method.copy(el);
+                        if (obj.readOnly === true) {
+                            temp.closable = false;
+                        } else {
+                            temp.closable = true;
+                        }
+                        this.data.splice(index, 1,temp);
+                    });
+                    
+                }
+                return obj;
+            },
+            setFocus(value) {
+                if (value) {
+                    this.$refs.btn.$el.focus();
+                } else {
+                    this.$refs.btn.$el.blur();
+                }
+            }
+        },
+        mounted() {
+            //this._setCustomWidth(this.clientWidth);
+        },
+        watch:{
+            popShow:{
+                handler(newValue)  {
+                    if (this.config.onOpenChange) {
+                        this.config.onOpenChange(newValue);
+                    }
+                },
+                immediate: true
+            }
+        }
+    };
+</script>

package/src/components/poptextbox/index.js

@@ -0,0 +1,2 @@
+import PopTextBox from './poptextbox.vue';
+export default PopTextBox;