修改单据

src/benyun/components/byBill/billModule.vue

@@ -51,7 +51,7 @@ export default class BillModule extends Vue {
   getConfig(){
     return (this as any).$lodash.cloneDeep(this.config)
   }
-
+  //工具栏按钮点击操作
   clickHandle(n:string){
     if(n == 'toggleSearch'){
       this.hideSearch = !this.hideSearch
@@ -64,7 +64,7 @@ export default class BillModule extends Vue {
   getSearchValue(){
     let value:any = {}
     if(this.$refs.search){
-      value = (this.$refs.search as any).getValue
+      value = (this.$refs.search as any).getValue()
     }
     return value
   }
@@ -86,13 +86,18 @@ export default class BillModule extends Vue {
   }
 
   search(){
-
+    this.$emit('search',this.getSearchValue());
   }
   resert(){
     if(this.$refs.search){
       (this.$refs.search as any).setValue({})
     }
-    
+  }
+  //设置表格数据
+  setTableValue(data:Array<any>){
+    if(this.$refs.table){
+      (this.$refs.table as any).setValue(data)
+    }
   }
 }
 </script>

src/benyun/components/byBill/byBill.vue

@@ -1,37 +1,53 @@
 <template>
   <div class="bill">
     <div class="bill-left">
-      <div class="title">导航</div>
-
-      <div class="bill-nav" v-if="billConfig" :class="{'onBill':showTab == 'bill'}" @click="tabChange('bill')">单据</div>
-      <div class="bill-nav" v-if="smtConfig" :class="{'onBill':showTab == 'smt'}" @click="tabChange('smt')">已提交</div>
-      <div class="bill-nav" v-if="draftsBoxConfig" :class="{'onBill':showTab == 'drafts'}" @click="tabChange('draftsBox')">草稿箱</div>
-      <div class="bill-nav" v-if="allConfig" :class="{'onBill':showTab == 'all'}" @click="tabChange('all')">综合查询</div>
-      <div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycle'}" @click="tabChange('recycleBin')">回收站</div>
-      <div class="bill-nav" v-for="(item,index) of customs" :class="{'onBill':showTab == item.name}" @click="tabChange(item.name)" :key="index">{{item.label}}</div>
+      <div class="bill-tab" :style="{width:closeTab?0:'200px'}">
+        <div class="title">导航</div>
+        <div class="bill-nav" v-if="billConfig" :class="{'onBill':showTab == 'bill'}" @click="tabChange('bill')">单据</div>
+        <div class="bill-nav" v-if="smtConfig" :class="{'onBill':showTab == 'smt'}" @click="tabChange('smt')">已提交</div>
+        <div class="bill-nav" v-if="draftsBoxConfig" :class="{'onBill':showTab == 'drafts'}" @click="tabChange('draftsBox')">草稿箱</div>
+        <div class="bill-nav" v-if="allConfig" :class="{'onBill':showTab == 'all'}" @click="tabChange('all')">综合查询</div>
+        <div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycle'}" @click="tabChange('recycleBin')">回收站</div>
+        <div class="bill-nav" v-for="(item,index) of customs" :class="{'onBill':showTab == item.name}" @click="tabChange(item.name)" :key="index">{{item.label}}</div>
+      </div>
+      <div class="close" @click="closeTab = !closeTab">
+        <i class="el-icon-back" v-if="!closeTab"></i>
+        <i class="el-icon-right" v-if="closeTab"></i>
+      </div>
     </div>
     <div class="bill-main">
+      <!-- 单据 -->
       <div class="bill-box" v-if="billConfig" :class="{'on-show':showTab == 'bill'}">
-        <div class="bill-tool">
-          <by-tool v-if="billConfig.tool" ref="bill-tool" :propConfig="billConfig.tool" @clickHandle="billToolHandle" />
+        <div class="bill-tool" v-if="billConfig.tool">
+          <by-tool ref="billTool" :propConfig="billConfig.tool" @clickHandle="clickHandle($event,'bill')" />
+        </div>
+        <div class="form" v-if="billConfig.form">
+          <by-form ref="billForm" :propConfig="billConfig.form" />
         </div>
-        <div class="form">
-          <by-form v-if="billConfig.form" ref="bill-form" :propConfig="billConfig.form" />
+        <div class="table-tool" v-if="billConfig.tableTool">
+          <by-tool ref="tableTool" :propConfig="billConfig.tableTool" @clickHandle="clickHandle($event,'billTable')" />
+        </div>
+        <div class="table" v-if="billConfig.table">
+          <by-table :propConfig="billConfig.table" ref="billTable" />
         </div>
       </div>
-
+      <!-- 已提交 -->
       <div class="bill-box" v-if="smtConfig" :class="{'on-show':showTab == 'smt'}">
-        <bill-module :propConfig="smtConfig" ref="smt" @clickHandle="clickHandle($event,'clickHandleSmt')" />
+        <bill-module :propConfig="smtConfig" ref="smt" @clickHandle="clickHandle($event,'smt')" @search="search($event,'smt')" />
       </div>
+      <!-- 草稿箱 -->
       <div class="bill-box" v-if="draftsBoxConfig" :class="{'on-show':showTab == 'draftsBox'}">
-        <bill-module :propConfig="draftsBoxConfig" ref="draftsBox" @clickHandle="clickHandle($event,'clickHandleDrafts')" />
+        <bill-module :propConfig="draftsBoxConfig" ref="draftsBox" @clickHandle="clickHandle($event,'draftsBox')" @search="search($event,'draftsBox')" />
       </div>
+      <!-- 综合查询 -->
       <div class="bill-box" v-if="allConfig" :class="{'on-show':showTab == 'all'}">
-        <bill-module :propConfig="allConfig" ref="all" @clickHandle="clickHandle($event,'clickHandleAll')" />
+        <bill-module :propConfig="allConfig" ref="all" @clickHandle="clickHandle($event,'all')" @search="search($event,'all')" />
       </div>
+      <!-- 回收站 -->
       <div class="bill-box" v-if="recycleBinConfig" :class="{'on-show':showTab == 'recycleBin'}">
-        <bill-module :propConfig="recycleBinConfig" ref="recycleBin" @clickHandle="clickHandle($event,'clickHandleRecycle')" />
+        <bill-module :propConfig="recycleBinConfig" ref="recycleBin" @clickHandle="clickHandle($event,'recycleBin')" @search="search($event,'recycleBin')" />
       </div>
+      <!-- 插槽 -->
       <div class="bill-box" v-for="(item,index) of customs" :key="index" :class="{'on-show':showTab == item.name}">
         <slot :name='item.name'></slot>
       </div>
@@ -42,8 +58,9 @@
 /**
  config:{
   bill:{ //单据
-    search:{}, //表单配置
+    form:{}, //表单配置
     tool:{},  //工具栏配置
+    tableTool:{} //表格工具栏
     table:{} //表格配置
   },
   smt:{ //已提交
@@ -66,6 +83,7 @@ import billModule from "./billModule.vue";
 @Component({components:{billModule}})
 export default class ByBill extends VueViews {
   showTab="bill"
+  closeTab = false
 
   //单据配置
   get billConfig(){
@@ -98,11 +116,6 @@ export default class ByBill extends VueViews {
     }
   }
 
-  //单据工具栏点击操作
-  billToolHandle(s:string){
-    this.$emit('billToolHandle',s)
-  }
-
   //左侧tab切换
   tabChange(t:string){
     this.showTab = t;
@@ -112,6 +125,12 @@ export default class ByBill extends VueViews {
   clickHandle(n1:string,n2:string){
     this.$emit(n1,n2)
   }
+  search(v:any,n:string){
+    this.$emit('search',{
+      type:n,
+      value:v
+    })
+  }
 
   //获取表格数据
   getTableData(n:string){
@@ -137,6 +156,25 @@ export default class ByBill extends VueViews {
     }  
     return d;
   }
+  //设置单据表单数据
+  setBillFormValue(value:any){
+    if(this.$refs['billForm']){
+      (this.$refs['billForm'] as any).setValue(value)
+    }
+  }
+  //设置单据表格数据
+  setBillTableValue(value:any){
+    if(this.$refs.billTable){
+      (this.$refs.billTable as any).setValue(value);
+    }
+  }
+  //设置tab表格数据
+  setTabTableValue(n:string,data:Array<any>){
+    if(this.$refs[n]){
+      (this.$refs[n] as any).setTableValue(data);
+    }
+  }
+
 }
 </script>
 
@@ -147,22 +185,27 @@ export default class ByBill extends VueViews {
   display: flex;
   padding: 16px;
   .bill-left {
-    width: 200px;
-    box-sizing: border-box;
-    height: 100%;
+    position: relative;
     border-right: solid #EEE 1px;
     padding-right:16px;
     flex-shrink: 0;
-    position: relative;
+    // box-sizing: border-box;
+    .bill-tab{
+      width: 200px;
+      height: 100%;
+      transition: all .5s;
+      overflow: hidden;
+    }
     .title{
       font-size: 16px;
       padding-bottom: 16px;
+      width: 200px;
     }
     .bill-nav{
       font-size: 14px;
       height: 30px;
       line-height: 30px;
-      width: 100%;
+      width: 200px;
       box-sizing: border-box;
       padding: 0 8px;
       cursor: pointer;
@@ -175,6 +218,20 @@ export default class ByBill extends VueViews {
     .bill-nav:hover{
       background-color: #bde3f7;
     }
+    .close{
+      height: 22px;
+      width: 22px;
+      border-radius: 50%;
+      border: solid #EEE 1px;
+      position: absolute;
+      top: 30px;
+      right: -11px;
+      background-color: #FFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
   }
   .bill-main{
     width: calc(100% - 16px);
@@ -189,10 +246,13 @@ export default class ByBill extends VueViews {
       opacity: 0;
       z-index: -1;
       transition: all .5s;
-      .bill-tool{
+      .bill-tool,.table-tool{
         width: 100%;
         padding-bottom: 16px;
       }
+      .form{
+        margin-bottom: 8px;
+      }
     }
     .on-show{
       opacity: 1;

src/views/demo/bill.vue

@@ -1,7 +1,14 @@
 <template>
-  <by-bill :propConfig="config">
-    <template v-slot:cus>我是插槽</template>
-  </by-bill>
+  <div>
+    <by-bill :propConfig="config" @search="search" @onSmt="onSmt" ref="bill" @onAdd="onAdd">
+      <template v-slot:cus>我是插槽</template>
+    </by-bill>
+    <div>
+      <el-button type="primary" plain @click="setSmtValue">设置已提交数据</el-button><br/>
+      <el-button type="primary" plain @click="setdraftsBoxValue">设置草稿箱数据</el-button>
+    </div>
+    
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,7 +20,7 @@ export default class BillDemo extends Vue {
       tool:{
         tools:{
           add:true,
-          edit:true,
+          edit:true
         }
       },
       form:{
@@ -32,6 +39,43 @@ export default class BillDemo extends Vue {
             }
           }]
         ]
+      },
+      tableTool:{
+        tools:{
+          add:true
+        }
+      },
+      table:{
+        attr:{
+          size:'mini',
+          height:240,
+          seq:true,
+          align:'center',
+          checkbox:true
+        },
+        columns:[{
+          title:'id',
+          field:'id',
+          width:50
+        },
+        {
+          title:'姓名',
+          field:'name',
+          width:100
+        },{
+          title:'操作',
+          action:true,
+          plugins:[{
+            icon:'el-icon-edit',
+            name:'编辑',
+            audit:'',
+            event:{
+              click:(item:any) => {
+                console.log('该行数据：',item)
+              }
+            }
+          }]
+        }]
       }
     },
     smt:{
@@ -141,5 +185,37 @@ export default class BillDemo extends Vue {
       name:'cus'
     }]
   }
+
+  search(parames:any){
+    console.log('搜索回传参数',parames);
+  }
+  onSmt(n:string){
+    console.log(n+':工具栏执行操作onSmt')
+  }
+  onAdd(n:string){
+    console.log(n);
+  }
+  setSmtValue(){
+    let data:Array<any>=[{
+      id:1,
+      name:'张三',
+      time:'2023-02-02'
+    },{
+      id:2,
+      name:'李四',
+      time:'2023-02-02'
+    }];
+    (this.$refs.bill as any).setTabTableValue('smt',data);
+  }
+  setdraftsBoxValue(){
+    let data:Array<any>=[{
+      name:'王五',
+      time:'2023-02-02'
+    },{
+      name:'赵六',
+      time:'2023-02-02'
+    }];
+    (this.$refs.bill as any).setTabTableValue('draftsBox',data);
+  }
 }
 </script>