单据

src/benyun/compVue/ModuleViewHandle.ts

@@ -10,9 +10,6 @@ export default class ModuleViewHandle extends VueViews{
   time:any;
   timeNum = 0;
 
-  value:any=null;
-  config:any={}
-
   constructor() {
     super()
   }
@@ -120,7 +117,7 @@ export default class ModuleViewHandle extends VueViews{
     if(this.requestConfig?.url){
       let urlArr = this.requestConfig.url.split('/');
       let query = this.getQuery();
-      (this as any).$download(this.requestConfig?.url + '/export',{
+      (this as any).$download(this.requestConfig.url + '/export',{
         ...query
       },urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
     }
@@ -132,18 +129,4 @@ export default class ModuleViewHandle extends VueViews{
     this.$message.error(msg)
   }
 
-  //请求
-  requestHandle(requestParames:any){
-    if(requestParames && requestParames.url){
-      (this as any).$request(requestParames).then((res:any) => {
-        if(requestParames.success){
-          requestParames.success(res)
-        }
-      }).catch((err:any) => {
-        if(requestParames.fail){
-          requestParames.fail(err);
-        }
-      })
-    }
-  }
 }

src/benyun/compVue/VueViews.ts

@@ -49,7 +49,7 @@ export default class VueViews extends Vue{
     if(requestParames && requestParames.url){
       (this as any).$request(requestParames).then((res:any) => {
         if(requestParames.success){
-          requestParames.success(res.data)
+          requestParames.success(res)
         }
       }).catch((err:any) => {
         if(requestParames.fail){

src/benyun/components/byBill/billModule.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="bill-module-box">
+    <div class="bill-module-form" v-if="searchConfig" v-show="!hideSearch">
+      <by-form :propConfig="searchConfig" ref="search" />
+      <div class="search-btn">
+        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button size="mini" icon="el-icon-refresh" @click="resert">重置</el-button>
+      </div>
+    </div>
+    <div class="bill-tool" v-if="toolConfig">
+      <by-tool :propConfig="toolConfig" ref="tool" @clickHandle="clickHandle" />
+    </div>
+    <div class="table" v-if="tableConfig">
+      <by-table :propConfig="tableConfig" ref="table" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class BillModule extends Vue {
+  config:any={}
+  hideSearch = false
+
+  @Prop()
+  propConfig:any
+
+  get searchConfig(){
+    return this.config?.search ? this.config.search : null
+  }
+
+  get toolConfig(){
+    return this.config?.tool ? this.config.tool : null
+  }
+
+  get tableConfig(){
+    return this.config?.table ? this.config.table : null
+  }
+
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+
+  setConfig(c:any){
+    this.config = c?c:{}
+  }
+
+  getConfig(){
+    return (this as any).$lodash.cloneDeep(this.config)
+  }
+
+  clickHandle(n:string){
+    if(n == 'toggleSearch'){
+      this.hideSearch = !this.hideSearch
+    }else{
+      this.$emit('clickHandle',n)
+    }
+  }
+
+  //获取搜索值
+  getSearchValue(){
+    let value:any = {}
+    if(this.$refs.search){
+      value = (this.$refs.search as any).getValue
+    }
+    return value
+  }
+  //获取表格数据
+  getTableValue(){
+    let data:Array<any>=[];
+    if(this.$refs.table){
+      data = (this.$refs.table as any).getValue();
+    }
+    return data;
+  }
+  //获取已选中表格数据
+  getSelectTable(){
+    let data:Array<any>=[];
+    if(this.$refs.table){
+      data = (this.$refs.table as any).getSelectData();
+    }
+    return data;
+  }
+
+  search(){
+
+  }
+  resert(){
+    if(this.$refs.search){
+      (this.$refs.search as any).setValue({})
+    }
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bill-module-box{
+  width: 100%;
+  .bill-tool{
+    width: 100%;
+    padding-bottom: 16px;
+  }
+  .bill-module-form{
+    padding-bottom: 8px;
+    .search-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  
+}
+</style>

src/benyun/components/byBill/byBill.vue

@@ -0,0 +1,203 @@
+<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>
+    <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>
+        <div class="form">
+          <by-form v-if="billConfig.form" ref="bill-form" :propConfig="billConfig.form" />
+        </div>
+      </div>
+
+      <div class="bill-box" v-if="smtConfig" :class="{'on-show':showTab == 'smt'}">
+        <bill-module :propConfig="smtConfig" ref="smt" @clickHandle="clickHandle($event,'clickHandleSmt')" />
+      </div>
+      <div class="bill-box" v-if="draftsBoxConfig" :class="{'on-show':showTab == 'draftsBox'}">
+        <bill-module :propConfig="draftsBoxConfig" ref="draftsBox" @clickHandle="clickHandle($event,'clickHandleDrafts')" />
+      </div>
+      <div class="bill-box" v-if="allConfig" :class="{'on-show':showTab == 'all'}">
+        <bill-module :propConfig="allConfig" ref="all" @clickHandle="clickHandle($event,'clickHandleAll')" />
+      </div>
+      <div class="bill-box" v-if="recycleBinConfig" :class="{'on-show':showTab == 'recycleBin'}">
+        <bill-module :propConfig="recycleBinConfig" ref="recycleBin" @clickHandle="clickHandle($event,'clickHandleRecycle')" />
+      </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>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+/**
+ config:{
+  bill:{ //单据
+    search:{}, //表单配置
+    tool:{},  //工具栏配置
+    table:{} //表格配置
+  },
+  smt:{ //已提交
+    search:{}, //表单配置
+    tool:{},  //工具栏配置
+    table:{} //表格配置
+  },
+  draftsBox:{ //草稿箱
+    search:{}, //表单配置
+    tool:{},  //工具栏配置
+    table:{} //表格配置
+  },
+  all:{}, //综合查询（配置同上）
+  recycleBin:{} //回收站（配置同上）
+ }
+ */
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+import billModule from "./billModule.vue";
+@Component({components:{billModule}})
+export default class ByBill extends VueViews {
+  showTab="bill"
+
+  //单据配置
+  get billConfig(){
+    return this.config?.bill ? this.config.bill : null;
+  }
+  //已提交配置
+  get smtConfig(){
+    return this.config?.smt ? this.config.smt : null;
+  }
+  //草稿箱配置
+  get draftsBoxConfig(){
+    return this.config?.draftsBox ? this.config.draftsBox : null;
+  }
+  //综合查询配置
+  get allConfig(){
+    return this.config?.all ? this.config.all : null;
+  }
+  //回收站配置
+  get recycleBinConfig(){
+    return this.config?.recycleBin ? this.config.recycleBin : null;
+  }
+  //自定义插槽
+  get customs(){
+    return this.config?.customs ? this.config.customs : []
+  }
+
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+  }
+
+  //单据工具栏点击操作
+  billToolHandle(s:string){
+    this.$emit('billToolHandle',s)
+  }
+
+  //左侧tab切换
+  tabChange(t:string){
+    this.showTab = t;
+  }
+
+  //工具栏
+  clickHandle(n1:string,n2:string){
+    this.$emit(n1,n2)
+  }
+
+  //获取表格数据
+  getTableData(n:string){
+    let d:Array<any> = [];
+    if(this.$refs[n]){
+      d = (this.$refs[n] as any).getTableValue()
+    }  
+    return d;
+  }
+  //获取表格选中数据
+  getTableSelectData(n:string){
+    let d:Array<any> = [];
+    if(this.$refs[n]){
+      d = (this.$refs[n] as any).getTableValue()
+    }  
+    return d;
+  }
+  //获取搜索数据数据
+  getSearchValue(n:string){
+    let d:any = {};
+    if(this.$refs[n]){
+      d = (this.$refs[n] as any).getSearchValue()
+    }  
+    return d;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bill{
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  padding: 16px;
+  .bill-left {
+    width: 200px;
+    box-sizing: border-box;
+    height: 100%;
+    border-right: solid #EEE 1px;
+    padding-right:16px;
+    flex-shrink: 0;
+    position: relative;
+    .title{
+      font-size: 16px;
+      padding-bottom: 16px;
+    }
+    .bill-nav{
+      font-size: 14px;
+      height: 30px;
+      line-height: 30px;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 8px;
+      cursor: pointer;
+      margin-bottom: 2px;
+      border-radius: 5px;
+    }
+    .onBill{
+      background-color: #bde3f7;
+    }
+    .bill-nav:hover{
+      background-color: #bde3f7;
+    }
+  }
+  .bill-main{
+    width: calc(100% - 16px);
+    box-sizing: border-box;
+    margin-left: 16px;
+    position: relative;
+    .bill-box{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 0;
+      z-index: -1;
+      transition: all .5s;
+      .bill-tool{
+        width: 100%;
+        padding-bottom: 16px;
+      }
+    }
+    .on-show{
+      opacity: 1;
+      z-index: 1;
+    }
+  }
+}
+</style>

src/benyun/components/byTable/byTable.vue

@@ -51,7 +51,7 @@
         >
           <template #default="{ row }">
             <slot v-if="item.slot" :name='item.field' :row='row'></slot>
-            <component v-else-if="item.component" :is="item.component" :propConfig="item.compConfig" />
+            <component v-else-if="item.component" :is="item.component" :propConfig="item.compConfig" :propValue="row" />
             <span v-else>{{ row[item.field] }}</span>
           </template>
         </vxe-column>

src/benyun/components/byTool/byTool.vue

@@ -50,6 +50,8 @@ export default class GmTools extends Vue {
     { name: '新增', icon: 'el-icon-plus', clickName: 'onAdd', _class: 'add' },
     { name: '修改', icon: 'el-icon-edit', clickName: 'onUpdate', _class: 'edit' },
     { name: '删除', icon: 'el-icon-delete', clickName: 'onDelete', _class: 'delete' },
+    { name: '提交', icon: 'el-icon-finished', clickName: 'onSmt', _class: 'smt' },
+    { name: '取消提交', icon: 'el-icon-refresh-left', clickName: 'onReSmt', _class: 'reSmt' },
     { name: '导出', icon: 'el-icon-download', clickName: 'onExport', _class: 'export' },
     // { name: '刷新', icon: 'el-icon-refresh', clickName: 'onRefresh', _class: 'refresh' }
   ]

src/benyun/components/moduleView/moduleView.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="module-view">
+  <div class="module-view" 
+    v-loading="load"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.5)"
+  >
     <div class="search" v-if="searchConfig" v-show="!hideSearch">
-      <by-form :propConfig="searchConfig" :ref="searchID" />
+      <by-form :propConfig="searchConfig" :ref="searchID">
+      </by-form>
       <div class="search-btn">
         <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
         <el-button size="mini" icon="el-icon-refresh" @click="resert">重置</el-button>
@@ -41,15 +47,10 @@ export default class ModuleView extends ModuleViewHandle {
     return this.config?.table ? this.config.table : null
   }
 
-  constructor() {
-    super()
-  }
-
   created(){
     if(this.propConfig){
       this.setConfig(this.propConfig)
     }
-    
   }
   mounted(){
     this.getList() 
@@ -80,6 +81,7 @@ export default class ModuleView extends ModuleViewHandle {
   padding:  16px;
   .search{
     width: 100%;
+    padding-bottom: 8px;
     .search-btn{
       width: 100%;
       display: flex;
@@ -88,7 +90,7 @@ export default class ModuleView extends ModuleViewHandle {
   }
   .tool-box{
     width: 100%;
-    padding: 8px 0 16px;
+    padding-bottom:16px;
   }
   .module-main{
     width: 100%;

src/benyun/plugins/componentRegister.ts

@@ -31,6 +31,10 @@ const comps: Array<ComBase> = [
     name: "moduleView",
     component: () => import("@/benyun/components/moduleView/moduleView.vue"),
   },
+  {
+    name: "byBill",
+    component: () => import("@/benyun/components/byBill/byBill.vue"),
+  },
 ];
 
 const install = function (Vue: any) {

src/router/index.ts

@@ -74,6 +74,14 @@ export const constantRoutes: Array<any> = [
         meta: {
           title: 'view封装'
         }
+      },
+      {
+        path:'bill',
+        component:()=> import('@/views/demo/bill.vue'),
+        name:'Bill',
+        meta: {
+          title: '单据'
+        }
       }
     ]
   }

src/views/demo/bill.vue

@@ -0,0 +1,145 @@
+<template>
+  <by-bill :propConfig="config">
+    <template v-slot:cus>我是插槽</template>
+  </by-bill>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class BillDemo extends Vue {
+  config:any={
+    bill:{
+      tool:{
+        tools:{
+          add:true,
+          edit:true,
+        }
+      },
+      form:{
+        attr:{
+          size:'small'
+        },
+        columns:[
+          [{
+            span:6,
+            label:'创建时间',
+            prop:'created',
+            component:'by-date-picker',
+            compConfig:{
+              format:'yyyy-MM-dd HH:mm:ss',
+              type:'datetime'
+            }
+          }]
+        ]
+      }
+    },
+    smt:{
+      search:{
+        attr:{
+          size:'mini',
+          rules:{
+            name:[{
+              required: true, message: '请输入名称', trigger: 'blur'
+            }]
+          }
+        },
+        columns:[
+          [{
+            span:6,
+            label:'创建时间',
+            prop:'created',
+            component:'by-date-picker',
+            compConfig:{
+              format:'yyyy-MM-dd',
+              type:'datetime'
+            }
+          }]
+        ]
+      },
+      tool:{
+        tools:{
+          smt:true,
+          export:true,
+          search:true,
+          refresh:true
+        }
+      },
+      table:{
+        attr:{
+          size:'mini',
+          seq:true,
+          align:'center',
+          checkbox:true
+        },
+        columns:[{
+          title:'id',
+          field:'id',
+          width:50
+        },
+        {
+          title:'姓名',
+          field:'name',
+          width:100
+        },
+        {
+          title:'日期',
+          field:'time',
+          // width:200
+        }]
+      }
+    },
+    draftsBox:{
+      search:{
+        attr:{
+          size:'mini',
+          rules:{
+            name:[{
+              required: true, message: '请输入名称', trigger: 'blur'
+            }]
+          }
+        },
+        columns:[
+          [{
+            span:6,
+            label:'名称',
+            prop:'name',
+            component:'by-input'
+          }]
+        ]
+      },
+      tool:{
+        tools:{
+          smt:true,
+          export:true,
+          search:true,
+          refresh:true
+        }
+      },
+      table:{
+        attr:{
+          size:'mini',
+          seq:true,
+          align:'center',
+          checkbox:true
+        },
+        columns:[
+        {
+          title:'姓名',
+          field:'name',
+          width:100
+        },
+        {
+          title:'日期',
+          field:'time',
+          // width:200
+        }]
+      }
+    },
+    customs:[{
+      label:'自定义',
+      name:'cus'
+    }]
+  }
+}
+</script>

src/views/demo/index.vue

@@ -30,6 +30,11 @@ export default class DemoIndex extends Vue {
     click:()=>{
       (this as any).$router.push('/demo/moduleView')
     }
+  },{
+    name:'单据',
+    click:()=>{
+      (this as any).$router.push('/demo/bill')
+    }
   }]
 }
 </script>