商品弹窗+仓库弹窗

src/App.vue

@@ -11,14 +11,35 @@ import ThemePicker from "@/components/ThemePicker";
 export default  {
   name: "App",
   components: { ThemePicker },
-    metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
+  metaInfo() {
+    return {
+      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+      titleTemplate: title => {
+        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+      }
     }
+  },
+  mounted(){
+    const debounce = (fn, delay) => {
+      let timer = null;
+      return  () => {
+        let context = this;
+        let args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+          fn.apply(context, args);
+        }, delay);
+      }
+    }
+
+    const _ResizeObserver = window.ResizeObserver;
+    window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
+      constructor(callback) {
+        callback = debounce(callback, 16);
+        super(callback);
+      }
+    }
+  }
 };
 </script>
 <style scoped>

src/benyun/compVue/ModuleViewHandle.ts

@@ -27,7 +27,7 @@ export default class ModuleViewHandle extends VueViews{
   getQuery(){
     let query:any = (this.$refs[this.searchID] as any).getValue();
     const page:any = (this.$refs[this.tableID] as any).getPage();
-    query.pageNum = page.pageNo;
+    query.pageNo = page.pageNo;
     query.pageSize = page.pageSize;
     return query;
   }
@@ -71,37 +71,37 @@ export default class ModuleViewHandle extends VueViews{
   }
 
   //删除
-  onDelete(){
-    let data = (this.$refs[this.tableID] as any).getSelectData();
-    if(!data || data.length == 0){
-      this.$message('请选择数据！')
-      return
-    }
-    let id = '';
-    data.forEach((item:any) => {
-      if(item.id){
-        id = id ? id + ',' + item.id : item.id
-      }
-    });
-    this.requestHandle({
-      url: this.requestConfig.url+'/'+id,
-      method: 'delete',
-      success:(res:any) => {
-        this.load = false;
-        this.getList();
-      },
-      fail:(err:any) => {
-        this.load = false;
-        this.failHandle(err);
-      }
-    })
-  }
+  // onDelete(){
+  //   let data = (this.$refs[this.tableID] as any).getSelectData();
+  //   if(!data || data.length == 0){
+  //     this.$message('请选择数据！')
+  //     return
+  //   }
+  //   let id = '';
+  //   data.forEach((item:any) => {
+  //     if(item.id){
+  //       id = id ? id + ',' + item.id : item.id
+  //     }
+  //   });
+  //   this.requestHandle({
+  //     url: this.requestConfig.url+'/'+id,
+  //     method: 'delete',
+  //     success:(res:any) => {
+  //       this.load = false;
+  //       this.getList();
+  //     },
+  //     fail:(err:any) => {
+  //       this.load = false;
+  //       this.failHandle(err);
+  //     }
+  //   })
+  // }
 
   //刷新
-  onRefresh(){
-    (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0})
-    this.getList();
-  }
+  // onRefresh(){
+  //   (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0})
+  //   this.getList();
+  // }
 
   //搜索
   searchHandle(){
@@ -110,9 +110,10 @@ export default class ModuleViewHandle extends VueViews{
   }
   //重置
   resertHandle(){
-    (this.$refs[this.searchID] as any).setValue({})
+    (this.$refs[this.searchID] as any).setValue({});
     (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0})
-    this.getList();
+    this.$emit('resert')
+    // this.getList();
   }
 
   //导出

src/benyun/components/byForm/byForm.vue

@@ -20,7 +20,7 @@
             :required="item.required"
             :error="item.error"
             :size="item.size"
-            :label-width="item.labelWidth?item.labelWidth:'80px'">
+            :label-width="item.labelWidth?item.labelWidth:'100px'">
             <component v-bind:is="item.component" 
               class="form-comp"
               :propConfig="item.compConfig" 
@@ -113,10 +113,10 @@ export default class ByForm extends VueViews {
     this.clearChildrenComp();
     if(data){
       this.value = (this as any).$lodash.cloneDeep(data);
-      this.setChildrenComValue();
     }else{
       this.value = {};
     }
+    this.setChildrenComValue();
   }
 
   //获取数据

src/benyun/components/byTable/byTable.vue

@@ -21,7 +21,7 @@
       <template v-for="(item,index) in columns">
         <vxe-column
           v-if="item.action"
-          :key="index"
+          :key="'action_'+index"
           :title="item.title"
           :width="item.width"
           fixed="right"
@@ -41,7 +41,7 @@
         </vxe-column>
         <vxe-column
           v-if="!item.action"
-          :key="index"
+          :key="item.field?item.field:index"
           :field="item.field"
           :title="item.title"
           :width="item.width"
@@ -191,10 +191,10 @@ export default class ByTable extends VueViews {
     let data: Array<any> = []
     if (this.$refs.table) {
       if (this.attrs.radio && (this.$refs.table as any).getRadioRecord()) {
-        data = [(this.$refs.table as any).getRadioRecord()]
+        data = (this as any).$lodash.cloneDeep([(this.$refs.table as any).getRadioRecord()]);
       } 
       if(this.attrs.checkbox && (this.$refs.table as any).getCheckboxRecords()){
-        data = (this.$refs.table as any).getCheckboxRecords()
+        data = (this as any).$lodash.cloneDeep((this.$refs.table as any).getCheckboxRecords());
       }
     }
     for(let item of data){

src/benyun/components/moduleView/moduleView.vue

@@ -28,10 +28,14 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch,Mixins } from "vue-property-decorator";
 import ModuleViewHandle from '@/benyun/compVue/ModuleViewHandle'
-
+interface Page{
+  pageNo?:number,
+  pageSize?:number,
+  total?:number
+}
 @Component
 export default class ModuleView extends ModuleViewHandle {
-
+  
   //搜索配置
   get searchConfig(){
     return this.config?.search ? this.config.search : null;
@@ -53,10 +57,11 @@ export default class ModuleView extends ModuleViewHandle {
     }
   }
   mounted(){
-    this.getList() 
+    // this.getList() 
   }
   search(){
-    this.searchHandle()
+    this.$emit('search');
+    // this.searchHandle()
   }
   resert(){
     this.resertHandle()
@@ -68,8 +73,28 @@ export default class ModuleView extends ModuleViewHandle {
       this.$emit('clickHandle',e)
     }
   }
-  paginationChange(){
-    this.getList();
+  getSelectData(){
+    let data:Array<any>=[];
+    if(this.$refs[this.tableID]){
+      data=(this.$refs[this.tableID] as any).getSelectData()
+    }
+    return data;
+  }
+  //设置表格数据
+  setTableValue(data:Array<any>){
+    if(this.$refs[this.tableID]){
+      (this.$refs[this.tableID] as any).setValue(data)
+    }
+  }
+  setPage(page:Page){
+    if(this.$refs[this.tableID]){
+      (this.$refs[this.tableID] as any).setPage(page)
+    }
+  }
+  //分页的变化
+  paginationChange(pageNum:string,pageSize:string){
+    this.$emit('pagination',{pageNum,pageSize})
+    // this.getList();
   }
 }
 </script>

src/components/productDialog/productDialog.vue

@@ -1,10 +1,11 @@
 <template>
-  <vxe-modal v-model="value" id="myModa" :width="width?width+'px':'80%'" :height="height?height+'px':'80%'" min-width="460" min-height="320" show-zoom resize storage transfer>
+  <vxe-modal v-model="value" id="myModa" :width="width?width+'px':'80%'" @show="show" :height="height?height+'px':'80%'" min-width="500" min-height="400" 
+  show-zoom resize transfer show-footer  @confirm="confirm">
     <template #title>
       <span>选择商品</span>
     </template>
     <template #default>
-      <module-view :propConfig="config" ref="view" />
+      <module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList" @clickHandle="clickHandle" />
     </template>
   </vxe-modal>
 </template>
@@ -14,6 +15,9 @@ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class ProductDialog extends Vue {
   value=false
+  time:any;
+  timeNum = 0;
+  data:Array<any>=[]
 
   @Prop()
   width?:number
@@ -29,12 +33,88 @@ export default class ProductDialog extends Vue {
       columns:[
         [{
           span:6,
-          label:'创建时间',
-          prop:'created',
-          component:'by-date-picker',
+          label:'名称',
+          prop:'name',
+          component:'by-input',
           compConfig:{
-            format:'yyyy-MM-dd',
-            type:'datetime'
+            attr:{
+              placeholder:'请输入名称'
+            }
+          }
+        },{
+          span:6,
+          label:'简称',
+          prop:'short_name',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入简称'
+            } 
+          }
+        },{
+          span:6,
+          label:'财务编号',
+          prop:'accounting_code',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入财务编号'
+            }
+          }
+        },{
+          span:6,
+          label:'国际码',
+          prop:'ns_code',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入国际码'
+            }
+          }
+        }],
+        [{
+          span:6,
+          label:'单位',
+          prop:'unit',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入单位'
+            }
+          }
+        },{
+          span:6,
+          label:'保质期（天）',
+          prop:'shelf_life',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入保质期'
+            }
+          }
+        },{
+          span:6,
+          label:'库存',
+          prop:'stock',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入库存'
+            }
+          }
+        },{
+          span:6,
+          label:'品牌',
+          prop:'brand_id',
+          component:'by-select',
+          compConfig:{
+            attr:{
+              label:'name',
+              value:'id',
+              placeholder:'请选择品牌',
+              clearable:true,
+              data:this.getBrandData()
+            }
           }
         }]
       ]
@@ -53,7 +133,7 @@ export default class ProductDialog extends Vue {
         checkbox:true
       },
       columns:[{
-        title:'物料名称',
+        title:'名称',
         field:'name',
         width:150
       },{
@@ -72,27 +152,105 @@ export default class ProductDialog extends Vue {
       },{
         title:'市场价格（统一售价）',
         field:'mark_price'
+      },{
+        title:'单位',
+        field:'unit'
+      },{
+        title:'重量',
+        field:'weight'
+      },{
+        title:'保质期（天）',
+        field:'shelf_life'
+      },{
+        title:'库存',
+        field:'stock'
       }]
     },
     // request:{
     //   url:'/system/maindataMaterial/page'
     // }
   }
+  brandData:Array<any>=[]
+
+  getBrandData(){
+    return this.brandData;
+  }
+
+  clickHandle(n:string){
+    if(n == 'onRefresh'){
+      this.getList()
+    }
+  }
 
   setShow(v:boolean){
     this.value = v;
   }
 
   created(){
-    this.getList();
+    this.getBrand()
+  }
+  mounted(){}
+  //获取品牌数据
+  getBrand(){
+    (this as any).$request({
+      url: '/maindata/maindataMaterialBrand/page',
+      method: 'get',
+      params:{
+        pageNo:1,
+        pageSize:1000
+      }
+    }).then((res:any) => {
+      if(res.data.records){
+        this.brandData = res.data.records;
+      }
+    })
+  }
+  //确定
+  confirm(){
+    let data:Array<any>=this.getSelectdata();
+    this.$emit('confirm',data);
+  }
+  //获取已选中表格数据
+  getSelectdata(){
+    let data:Array<any>=[];
+    if(this.$refs.view){
+      data = (this.$refs.view as any).getSelectData()
+    }
+    return data;
+  }
+  //显示弹窗
+  show(){
+    if(this.data.length ==0){
+      this.time =setInterval(()=>{
+        this.getList()
+      },500) 
+    }
   }
-
   getList(){
+    if(!this.$refs.view){
+      if(this.timeNum > 5){
+        clearInterval(this.time)
+      }
+      this.timeNum ++;
+      return
+    }
+    clearInterval(this.time)
+    let query = (this.$refs.view as any).getQuery();
     (this as any).$request({
       url: '/maindata/maindataMaterial/page',
       method: 'get',
+      params:query
     }).then((res:any) => {
-      console.log('/maindataMaterial/page',res);
+      if(res.data.records){
+        (this.$refs.view as any).setTableValue(res.data.records);
+        this.data = res.data.records;
+        let page={
+          pageNo: res.data.current, //当前页
+          pageSize: res.data.size, //每页条数
+          total: res.data.total //总条数
+        };
+        (this.$refs.view as any).setPage(page)
+      }
     })
   }
 } 

src/components/productStore/productStore.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="input-number">
+    <el-input-number v-model="num" @change="handleChange" :min="1" size="small"></el-input-number>
+    <siv class="icon" title="库存信息">
+      <i class="el-icon-question"></i>
+    </siv>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class ProductStore extends Vue {
+  num:number=1;
+  handleChange(v:number){
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.input-number{
+  min-width: 200px;
+  display: flex;
+  align-items: center;
+  .icon{
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+</style>

src/components/storeDialog/storeDialog.vue

@@ -1,79 +0,0 @@
-<template>
-  <vxe-modal v-model="value" id="myModa" :width="width?width+'px':'80%'" :height="height?height+'px':'80%'" min-width="460" min-height="320" show-zoom resize transfer>
-    <template #title>
-      <span>选择仓库</span>
-    </template>
-    <template #default>
-      <module-view :propConfig="config" ref="view" />
-    </template>
-  </vxe-modal>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class ProductDialog extends Vue {
-  value=false
-
-  @Prop()
-  width?:number
-
-  @Prop()
-  height?:number
-
-  config:any={
-    search:{
-      attr:{
-        size:'mini'
-      },
-      columns:[
-        [{
-          span:6,
-          label:'名称',
-          prop:'created',
-          component:'by-input',
-          compConfig:{
-            placeholder:'请输入名称'
-          }
-        }]
-      ]
-    },
-    tool:{
-      tools:{
-        search:true,
-        refresh:true
-      }
-    },
-    table:{
-      attr:{
-        size:'mini',
-        seq:true,
-        align:'center',
-        checkbox:true
-      },
-      columns:[{
-        title:'名称',
-        field:'name',
-        width:150
-      },{
-        title:'地址',
-        field:'address',
-        width:100
-      },{
-        title:'作坐标',
-        field:'coordinate'
-      }]
-    },
-    // request:{
-    //   url:'/system/maindataMaterial/page'
-    // }
-  }
-
-  setShow(v:boolean){
-    this.value = v;
-  }
-} 
-</script>
-<style lang="scss" scoped>
-
-</style>

src/components/warehouseDialog/warehouseDialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <vxe-modal v-model="value" id="myModa" :width="width?width+'px':'80%'" :height="height?height+'px':'80%'"  @show="show" min-width="460" min-height="320" 
+  show-zoom resize transfer show-footer @confirm="confirm">
+    <template #title>
+      <span>选择仓库</span>
+    </template>
+    <template #default>
+      <module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList" @clickHandle="clickHandle" />
+    </template>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class WarehouseDialog extends Vue {
+  value=false
+  time:any;
+  timeNum = 0;
+  data:Array<any>=[]
+
+  @Prop()
+  width?:number
+
+  @Prop()
+  height?:number
+
+  config:any={
+    search:{
+      attr:{
+        size:'mini'
+      },
+      columns:[
+        [{
+          span:6,
+          label:'名称',
+          prop:'name',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入名称'
+            }
+          }
+        },
+        {
+          span:6,
+          label:'地址',
+          prop:'address',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入地址'
+            }
+          }
+        },
+        {
+          span:6,
+          label:'坐标',
+          prop:'coordinate',
+          component:'by-input',
+          compConfig:{
+            attr:{
+              placeholder:'请输入坐标'
+            }
+          }
+        },
+        {
+          span:6,
+          label:'租户',
+          prop:'tenantId',
+          component:'by-select',
+          compConfig:{
+            attr:{
+              label:'name',
+              value:'id',
+              placeholder:'请选择租户',
+              clearable:true,
+              data:[]
+            }
+          }
+        }]
+      ]
+    },
+    tool:{
+      tools:{
+        search:true,
+        refresh:true
+      }
+    },
+    table:{
+      attr:{
+        size:'mini',
+        seq:true,
+        align:'center',
+        checkbox:true
+      },
+      columns:[{
+        title:'名称',
+        field:'name'
+      },{
+        title:'作坐标',
+        field:'coordinate'
+      },{
+        title:'地址',
+        field:'address'
+      }]
+    },
+    // request:{
+    //   url:'/system/maindataMaterial/page'
+    // }
+  }
+
+  mounted(){}
+
+  setShow(v:boolean){
+    this.value = v;
+  }
+
+  clickHandle(n:string){
+    if(n == 'onRefresh'){
+      this.getList()
+    }
+  }
+
+  //获取已选中表格数据
+  getSelectdata(){
+    let data:Array<any>=[];
+    if(this.$refs.view){
+      data = (this.$refs.view as any).getSelectData()
+    }
+    return data;
+  }
+  //显示弹窗
+  show(){
+    if(this.data.length ==0){
+      this.time =setInterval(()=>{
+        this.getList()
+      },500) 
+    }
+  }
+  getList(){
+    if(!this.$refs.view){
+      if(this.timeNum > 5){
+        clearInterval(this.time)
+      }
+      this.timeNum ++;
+      return
+    }
+    clearInterval(this.time)
+    let query = (this.$refs.view as any).getQuery();
+    (this as any).$request({
+      url: '/maindata/maindataStorehouse/page',
+      method: 'get',
+      params:query
+    }).then((res:any) => {
+      if(res.data.records){
+        (this.$refs.view as any).setTableValue(res.records);
+        this.data = res.data.records;
+        let page={
+          pageNo: res.data.current, //当前页
+          pageSize: res.data.size, //每页条数
+          total: res.data.total //总条数
+        };
+        (this.$refs.view as any).setPage(page)
+      }
+    })
+  }
+  confirm(){
+    let data:Array<any>=this.getSelectdata();
+    this.$emit('confirm',data);
+  }
+} 
+</script>
+<style lang="scss" scoped>
+
+</style>

src/main.ts

@@ -22,7 +22,7 @@ import './assets/styles/element-variables.scss'
 // import VXETable from 'vxe-table'
 import XEUtils from 'xe-utils'
 import 'vxe-table/lib/style.css'
-import { VXETable, Column,Table,Modal } from 'vxe-table'
+import { VXETable, Column,Table,Modal,Button } from 'vxe-table'
 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
  // 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
 VXETable.setup({
@@ -34,13 +34,15 @@ import gmComponent from './benyun/plugins/componentRegister'
 //组件注册
 import productDialog from './components/productDialog/productDialog.vue'
 Vue.component('productDialog', productDialog);
+import warehouseDialog from './components/warehouseDialog/warehouseDialog.vue'
+Vue.component('warehouseDialog', warehouseDialog);
 
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
 
-Vue.use(Column).use(Table).use(Modal);
+Vue.use(Column).use(Table).use(Modal).use(Button);
 Vue.use(gmComponent);
 Vue.use(plugins);
 Vue.use(directive);
@@ -53,6 +55,7 @@ Vue.prototype.$lodash = lodash;
 Vue.prototype.$download = download; //下载
 Vue.prototype.$XModal = VXETable.modal
 
+
 new Vue({
   router,
   store,

src/views/demo/dialogDemo.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <el-button @click="showProduct">商品弹窗</el-button>
+    <el-button @click="showWarehouse">仓库弹窗</el-button>
     <productDialog ref="product" />
+    <warehouseDialog ref="warehouse" />
   </div>
 </template>
 
@@ -13,6 +15,9 @@ export default class DialogDemo extends Vue {
   showProduct(){
     (this.$refs.product as any).setShow(true)
   }
+  showWarehouse(){
+    (this.$refs.warehouse as any).setShow(true)
+  }
 }
 </script>
 

src/views/demo/form.vue

@@ -99,7 +99,8 @@ export default class DemoForm extends Vue {
         }
       },{
         span:6,
-        label:'插槽',
+        // label:'插槽',
+        labelWidth:'0px',
         slot:true,
         prop:'slotField',
       }]

src/views/demo/order.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class=""></div>
+</template>
+<script lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>