ocpview-plus 0.0.1

package/src/components/masterplate/listbtntoolbar.vue

@@ -0,0 +1,257 @@
+<template>
+   <Row type="flex" :gutter="0" justify="start" align="middle"> 
+    <Col span="18">
+        <Row v-if="!notpowerFlag" type="flex" :gutter="0" justify="start" align="middle"> 
+            <Col  v-if="addDataBtnFlag">
+                <Button  :custom-icon="mainButtonCustomIcon" :icon="mainButtonIcon"  type="primary" class="mainBtn" :disabled="!!addReadOnly"  @click="addData" >{{myConfig.mainButtonText}}</Button>   
+            </Col>
+            <Col v-if="addDataBtnFlag">
+                <Divider  type="vertical" class="dividercommon"/>
+            </Col>
+            <template v-for="(item,index) in btnItems"  :key="'btn_' + index">
+            <Col  v-if="!moreFlag || index < myConfig.showNum"  style="margin-right:10px">
+            <Button :icon="item.icon" :custom-icon="item.customIcon"   @click="action(item.name)" :disabled="!!item.readOnly">{{item.text}}</Button>
+            </Col>
+            </template>
+            <Col v-if="moreFlag">
+                <Dropdown>
+                    <Button type="info" icon="ios-arrow-down"  > </Button>
+                     <template #list>
+                    <DropdownMenu>
+                        <template  v-for="(item,index) in btnItems" :key="'btn_' + index">
+                        <DropdownItem v-if="index > myConfig.showNum" :disabled="item.readOnly">
+                            <Button :type="item.type" :icon="item.icon" :custom-icon="item.customIcon" :size="item.size" @click="action(item.name)" :disabled="!!item.readOnly">{{item.text}}</Button>
+                        </DropdownItem>
+                        </template>
+                    </DropdownMenu>
+                     </template>
+                </Dropdown>
+            </Col>
+        </Row>
+        <Row v-else type="flex" :gutter="0" justify="start" align="middle"> 
+              <Icon custom="iconfont icon-custom-tishi"   size="20" color="#F3B352"/> <span style="margin-left: 12px;font-size:18px;color:#F3B352;font-weight:bold">注意：当前页面您没有操作权限</span>
+        </Row>    
+    </Col>
+    <Col span="6">
+        <PromptMessages modetype="2"  style="height:100%"/>
+    </Col>
+    </Row>
+</template>
+
+<script>
+import PromptMessages from './promptmessage.vue';
+export default {
+    name:'listbtntoolbar',
+    components:{
+        PromptMessages
+    },
+    data () {
+        return {
+            myConfig:{
+                showNum:10,
+                enablePermissions:true,
+                curHelpUrl:'',
+                modulecode:'',
+                items:[],
+                mainButton:'addData',
+                mainButtonText:'新增',
+                mainButtonIcon:null,
+                mainButtonCustomIcon:'iconfont icon-custom-add'
+            },
+            addDataBtnFlag:true,
+            addReadOnly:false,
+            showHelpBtn:false,
+            showModuleCode:false,
+            moreFlag:false,
+            btnItems:[],
+            ignoreModule:['downTemplate'],
+            notpowerFlag:true
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        moduleMethod:{
+            type:Array,
+            default: () => {
+                return [];      
+            }
+        },
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.myConfig =  Object.assign({},this.myConfig, this.config);
+            if (this.myConfig.ignoreModule) {
+                let ignoreModule = this.$Method.copy(this.ignoreModule);
+                let flag = true;
+                this.myConfig.ignoreModule.forEach(el => {
+                    flag = false;
+                    this.ignoreModule.some(el2 => {
+                        if (el2 == el) {
+                            flag = true;
+                            return true;
+                        }
+                    });
+                    if (!flag) {
+                        ignoreModule.push(el);
+                    }
+                });
+            }
+            if (this.myConfig.items && this.myConfig.items.length > 0) {
+                    this.myConfig.items.forEach(el => {
+                        if (el.name !== this.myConfig.mainButton) {
+                            let tmp = this.$Method.copy(el);
+                            if (tmp.readOnly === undefined) {
+                                tmp.readOnly = false;
+                            }
+                            if (tmp.icon && tmp.icon.startsWith('custom')) {
+                               tmp.customIcon='iconfont icon-' + tmp.icon;
+                               tmp.icon = null;
+                            }
+                            this.btnItems.push(tmp);
+                        } else {
+                            if (el.icon && el.icon.startsWith('custom')) {
+                                this.mainButtonCustomIcon = 'iconfont icon-' + el.icon;
+                                this.mainButtonIcon = null;
+                            } else {
+                                this.mainButtonIcon = el.icon;
+                                this.mainButtonCustomIcon = null;
+                            }
+                           
+                        }
+                    });
+            }
+
+            if (this.myConfig.curHelpUrl) {
+                this.showHelpBtn = true;
+            }
+            if (this.myConfig.modulecode) {
+                this.showModuleCode = true;
+            }
+
+            if (this.myConfig.enablePermissions) {
+                if (this.moduleMethod && this.moduleMethod.length > 0) {
+                    let addIndex = this.moduleMethod.findIndex(el => el.name === this.myConfig.mainButton);
+                    if (addIndex === -1) {
+                        this.addDataBtnFlag = false;
+                    } else {
+                        this.addDataBtnFlag = true;
+                    }
+                    let btnItems = [];
+                    this.moduleMethod.forEach(el =>{
+                        let tmp = this.btnItems.find(el2 => el.name === el2.name); 
+                        if (tmp) {
+                            btnItems.push(tmp);
+                        }
+                    });
+                    if (btnItems.length === 0) {
+                        this.btnItems = [];
+                        this.notpowerFlag = true;
+                    } else{
+                        this.ignoreModule.forEach(el => {
+                            let tmp = btnItems.find(el2 => el2.name === el)
+                            if (!tmp) {
+                                let tmp2 = this.btnItems.find(el3 => el3.name === el);
+                                if (tmp2) {
+                                    btnItems.push(tmp2);
+                                }
+                            }
+                        });
+                        let mainIndex = this.ignoreModule.findIndex(el => el === this.myConfig.mainButton);
+                        if (mainIndex > -1) {
+                            this.addDataBtnFlag = true;
+                        }
+                        this.btnItems = btnItems;
+                        this.notpowerFlag = false;
+                    }
+                } else {
+                    this.notpowerFlag = true;
+                }
+            } else {
+                this.notpowerFlag = false;
+            }
+            if (this.btnItems.length > this.myConfig.showNum){
+                this.moreFlag = true;
+            }
+        },
+        action(name) {
+            let obj = {};
+            obj.name = name;
+            this.$emit('doAction', obj);
+        },
+
+        setAllReadOnly (value) {
+            let btn = this.$Method.copy(this.btnItems);
+            this.addReadOnly = value;
+            btn.forEach(el => {
+                this.doCommonPro(el.name,'readOnly', value);
+            });
+        },
+        setReadOnly (obj, value) {
+            if (obj) {
+                if (obj instanceof Array) {
+                    obj.forEach(el => {
+                        if (el === this.myConfig.mainButton) {
+                            this.addReadOnly = value;
+                        } else {
+                            this.doCommonPro(el,'readOnly', value);
+                        } 
+                    });
+                } else {
+                    if (obj === this.myConfig.mainButton) {
+                        this.addReadOnly = value;
+                    } else {
+                        this.doCommonPro(obj,'readOnly', value);
+                    } 
+                }
+            }
+        },
+        doCommonPro (btnName, proName, value) {
+            let index = this.btnItems.findIndex(el => el.name === btnName);
+            if (index > -1) {
+                let pro = {};
+                pro[proName] = value;
+                let temp = Object.assign({},this.btnItems[index], pro);
+                this.btnItems.splice(index,1,temp);
+            }
+        },
+        addData() {
+            this.doBtn(this.myConfig.mainButton);
+        },
+        doBtn(name) {
+            let obj = {};
+            obj.name = name;
+            this.$emit('doAction', obj);
+        },
+        changedStatus(value) {
+            if (this.myConfig.status && this.myConfig.status[value]) {
+                let btn = this.$Method.copy(this.btnItems);
+                btn.forEach(el => {
+                    let tmp = this.myConfig.status[value].find(el2 => el2 === el.name);
+                    if (tmp) {
+                        if (el.readOnly !== false) {
+                            this.doCommonPro(el.name,'readOnly', false);
+                        }
+                    } else {
+                        if (el.readOnly !== true) {
+                            this.doCommonPro(el.name,'readOnly', true);
+                        }
+                    }
+                });
+            }
+        }
+    }
+
+};
+</script>
+<style lang="less" scoped>
+        .dividercommon {
+            margin:1px 12px 0 12px;
+            height:32px;
+        }
+</style>