仓库仓位组件

src/benyun/components/bySelect/bySelect.vue

@@ -7,6 +7,7 @@
     :clearable="attrs.clearable"
     @clear="onChange"
     @change="onChange"
+    :filterable="attrs.filterable"
   >
       <el-option
         v-for="item in options"
@@ -22,6 +23,7 @@
   配置说明
   config:{
     attrs:{
+      filterable:true/false  //搜索功能快速查找选项
       itemLabel:''  //选项的标签
       itemValue:''  //选项的值
       disabled：true/false  //是否禁用

src/components/warehouse/warehouse.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-select 
+    v-model="value"
+    :placeholder="attrs.placeholder?attrs.placeholder:'请选择'"
+    :disabled="attrs.disabled"
+    :size="attrs.size"
+    :clearable="attrs.clearable"
+    @clear="onChange"
+    @change="onChange"
+    filterable
+  >
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id">
+      </el-option>
+  </el-select>
+</template>
+
+<script lang="ts">
+/*
+  配置说明
+  config:{
+    attrs:{
+      disabled：true/false  //是否禁用
+      size：medium/small/mini //尺寸
+      clearable：true/false  //是否清空
+      placeholder：''  //占位符
+    },
+    request:{}
+  }
+*/
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+@Component
+export default class Warehouse extends VueViews {
+  value:any='';
+  options:Array<any>=[]
+
+  @Watch('propValue')
+  propValueChange(v:any){
+    this.setValue(v);
+  }
+
+
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+    if(this.propValue){
+      this.setValue(this.propValue)
+    }
+  }
+
+  mounted(){
+    this.request();
+  }
+
+  setValue(data:any){
+    if(data){
+      this.value = (this as any).$lodash.cloneDeep(data);
+    }else{
+      this.value = '';
+    }
+  }
+
+  getValue(){
+    return (this as any).$lodash.cloneDeep(this.value);
+  }
+
+  setOptions(data:Array<any>){
+    this.options = data;
+    if(!this.value && this.attrs.defaultIndex >= 0 && this.options[this.attrs.defaultIndex]){
+      this.value = this.options[this.attrs.defaultIndex].id;
+      this.onChange();
+    }
+  }
+
+  onChange(){
+    this.$emit('onChange',this.value);
+    let currentItem:any=null;
+    for(const item of this.options){
+      if(item.id == this.value){
+        currentItem = item
+      }
+    }
+    (this.$root as any).eventHub.$emit('warehouseChange',currentItem)
+  }
+
+  // 清空数据
+  clearValue(){
+    this.value = ''
+  }
+
+  //请求url
+  request(){
+    let parame:any = {
+      url:'/maindata/maindataStorehouse/page',
+      method: 'GET',
+		  params: {
+        pageNo:1,
+        pageSize:1000
+      }
+    };
+    parame.success = (res:any) => {
+      if(res.data && res.data.records){
+        this.setOptions(res.data.records);
+      }
+    }
+    parame.fail = (err:any) => {}
+    this.requestHandle(parame);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/warehouseDialog/warehouseDialog.vue

@@ -1,173 +0,0 @@
-<template>
-  <vxe-modal v-model="value" id="warehouseDialogModal" :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',
-        radio:true
-      },
-      columns:[{
-        title:'名称',
-        field:'name'
-      },{
-        title:'坐标',
-        field:'coordinate'
-      },{
-        title:'地址',
-        field:'address'
-      }]
-    }
-  }
-
-  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.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)
-      }
-    })
-  }
-  confirm(){
-    let data:Array<any>=this.getSelectdata();
-    this.$emit('confirm',data);
-  }
-} 
-</script>
-<style lang="scss" scoped>
-
-</style>

src/components/warehousePosition/warehousePosition.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-select 
+    v-model="value"
+    :placeholder="attrs.placeholder?attrs.placeholder:'请选择'"
+    :disabled="attrs.disabled"
+    :size="attrs.size"
+    :clearable="attrs.clearable"
+    @clear="onChange"
+    @change="onChange"
+    filterable
+  >
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id">
+      </el-option>
+  </el-select>
+</template>
+
+<script lang="ts">
+/*
+  配置说明
+  config:{
+    attrs:{
+      disabled：true/false  //是否禁用
+      size：medium/small/mini //尺寸
+      clearable：true/false  //是否清空
+      placeholder：''  //占位符
+    },
+    request:{}
+  }
+*/
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import VueViews from '@/benyun/compVue/VueViews'
+@Component
+export default class Warehouse extends VueViews {
+  value:any='';
+  options:Array<any>=[]
+
+  @Watch('propValue')
+  propValueChange(v:any){
+    this.setValue(v);
+  }
+
+
+  created(){
+    if(this.propConfig){
+      this.setConfig(this.propConfig)
+    }
+    if(this.propValue){
+      this.setValue(this.propValue)
+    }
+  }
+
+  mounted(){
+    (this.$root as any).eventHub.$on('warehouseChange',(data:any) => {
+      this.value='';
+      this.onChange();
+      if(data && data.subList){
+        this.setOptions(data.subList)
+      }
+    });
+  }
+
+  setValue(data:any){
+    if(data){
+      this.value = (this as any).$lodash.cloneDeep(data);
+    }else{
+      this.value = '';
+    }
+  }
+
+  getValue(){
+    return (this as any).$lodash.cloneDeep(this.value);
+  }
+
+  setOptions(data:Array<any>){
+    this.options = data;
+  }
+
+  onChange(){
+    this.$emit('onChange',this.value);
+  }
+
+  // 清空数据
+  clearValue(){
+    this.value = ''
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/main.ts

@@ -34,8 +34,6 @@ 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);
 import productStore from './components/productStore/productStore.vue'
 Vue.component('productStore', productStore);
 import buyer from './components/buyer/buyer.vue'
@@ -44,6 +42,10 @@ import productSkuModal from './components/skuModal/productModal.vue';
 Vue.component('product-sku-modal', productSkuModal);
 import supplierModal from './components/supplierModal/supplierModal.vue';
 Vue.component('supplier-modal', supplierModal);
+import warehouse from './components/warehouse/warehouse.vue';
+Vue.component('warehouse', warehouse);
+import warehousePosition from './components/warehousePosition/warehousePosition.vue';
+Vue.component('warehousePosition', warehousePosition);
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
@@ -66,5 +68,8 @@ Vue.prototype.$XModal = VXETable.modal
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  data: {
+    eventHub: new Vue()
+  }
 }).$mount('#app')

src/views/audit/synchronous/index.vue

@@ -43,7 +43,7 @@ export default class SynchronousProduct extends Vue {
           }
         },{
           span:6,
-          label:'关联商品',
+          label:'关联sku',
           prop:'materialField',
           component:'by-input',
           compConfig:{
@@ -75,7 +75,7 @@ export default class SynchronousProduct extends Vue {
         title:'商品名称',
         field:'goodsName'
       },{
-        title:'关联的sku',
+        title:'关联sku',
         field:'materialField'
       },{
         title:'关联的skuID',

src/views/demo/form.vue

@@ -128,6 +128,28 @@ export default class DemoForm extends Vue {
             url:'/maindata/maindataMaterialOrganizationCategory/treeList'
           }
         }
+      },{
+        span:6,
+        label:'仓库',
+        prop:'warehouse',
+        component:'warehouse',
+        compConfig:{
+          attr:{
+            placeholder:'请选择仓库',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'仓位',
+        prop:'warehousePosition',
+        component:'warehouse-position',
+        compConfig:{
+          attr:{
+            placeholder:'请选择仓位',
+            clearable:true
+          }
+        }
       }]
     ]
   }