ymy 2 anos atrás
pai
commit
8e3a09a7be

+ 27 - 2
src/benyun/components/byTool/byTool.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tool">
     <div class="tool-left">
-
+      <el-button v-for="(item,index) of showTools" :icon="item.icon" :key="index" size="small" @click="clickBtn(item)">{{ item.name }}</el-button>
     </div>
   </div>
 </template>
@@ -12,6 +12,9 @@ import { Component, Prop, Vue, Mixins } from 'vue-property-decorator'
   // components: { logDrawer }
 })
 export default class GmTools extends Vue {
+  @Prop()
+  propConfig:any
+
   tools:Array<any>=[
     { name: '新增', icon: 'el-icon-plus', clickName: 'onAdd', _class: 'onAdd' },
     { name: '修改', icon: 'el-icon-edit', clickName: 'onUpdate', _class: 'onUpdate' },
@@ -20,8 +23,27 @@ export default class GmTools extends Vue {
   ]
   showTools:Array<any>=[]
 
+  created(){
+    if(this.propConfig?.tools){
+      this.setTool(this.propConfig?.tools)
+    }
+  }
+
   setTool(data:any){
-    
+    this.showTools = [];
+    for(const item of this.tools){
+      if(data[item._class]){
+        this.showTools.push(item)
+      }
+    }
+  }
+
+  clickBtn(item:any){
+    if(item?.event?.click){
+      item.event.click()
+    }else{
+      this.$emit(item.clickName)
+    }
   }
 }
 </script>
@@ -33,5 +55,8 @@ export default class GmTools extends Vue {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .tool-left{
+    width: 70%;;
+  }
 }
 </style>

+ 4 - 0
src/benyun/plugins/componentRegister.ts

@@ -22,6 +22,10 @@ const comps: Array<comBase> = [
   {
     name: "byTable",
     component: () => import("@/benyun/components/byTable/byTable.vue"),
+  },
+  {
+    name: "byTool",
+    component: () => import("@/benyun/components/byTool/byTool.vue"),
   }
 ];
 

+ 8 - 0
src/views/demo/form.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="form" >
+    <by-tool :propConfig="toolConfig" />
     <by-form :propConfig="config" ref="form" />
     <el-button type="primary" @click="getFormData">获取数据</el-button>
     <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
@@ -93,6 +94,13 @@ export default class DemoForm extends Vue {
     ]
   }
 
+  toolConfig={
+    onAdd:true,
+    onUpdate:true,
+    onDelete:true,
+    onExport:true
+  }
+
   getFormData(){
     let data = (this as any).$refs.form.getValue();
     console.log('表单数据:',data);

+ 5 - 0
src/views/demo/table.vue

@@ -47,6 +47,8 @@ export default class DemoTable extends Vue {
         event:{
           click:(item:any) => {
             console.log('该行数据:',item)
+            this.fun();
+            console.log('this:',this)
           }
         }
       }]
@@ -72,6 +74,9 @@ export default class DemoTable extends Vue {
     },500)
     
   }
+  fun(){
+    console.log('操作00000000')
+  }
   setData(){
     (this as any).$refs.table.setValue(this.data);
   }