选择仓库

src/views/modules/warehouse/stock-add-or-update.vue

@@ -1,27 +1,74 @@
 <template>
   <el-dialog
-    :title="!dataForm.id ? '新增' : '修改'"
+    :title="!dataForm.materialId ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
 <!--      <el-form-item label="编码" prop="code">-->
-<!--        <el-input v-model="dataForm.code" placeholder="编码"></el-input>-->
+<!--        <el-input v-model="dataForm.code" placeholder="编码系统自动生成"></el-input>-->
 <!--      </el-form-item>-->
-      <el-form-item label="名称" prop="materialName">
-        <el-input v-model="dataForm.materialName" placeholder="名称"></el-input>
-      </el-form-item>
-      <el-form-item label="类别" prop="materialTypeId">
-        <el-input v-model="dataForm.materialTypeId" placeholder="类别"></el-input>
-      </el-form-item>
-      <el-form-item label="规格" prop="specifications">
-        <el-input v-model="dataForm.specifications" placeholder="规格"></el-input>
-      </el-form-item>
-      <el-form-item label="单位" prop="unitName">
-        <el-input v-model="dataForm.unitName" placeholder="单位"></el-input>
-      </el-form-item>
-      <el-form-item label="数量" prop="cnt">
-        <el-input-number v-model="dataForm.cnt" :min="0" placeholder="数量"></el-input-number>
-      </el-form-item>
+      <el-row class="my-row">
+        <el-col :span="12">
+          <el-form-item label="名称" prop="materialName">
+            <el-input v-model="dataForm.materialName" placeholder="物品（零件）名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="类别" prop="materialTypeId">
+            <el-input v-model="dataForm.materialTypeId" placeholder="物品（零件）类别"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="my-row">
+        <el-col :span="12">
+          <el-form-item label="规格" prop="specifications">
+            <el-input v-model="dataForm.specifications" placeholder="物品（零件）规格"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="单位" prop="unitName">
+            <el-input v-model="dataForm.unitName" placeholder="单位"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="my-row">
+        <el-col :span="12">
+          <el-form-item label="数量" prop="cnt">
+            <el-input-number v-model="dataForm.cnt" :min="0" placeholder="物品（零件）数量"></el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="单价" prop="price">
+            <el-input-number v-model="dataForm.price" :precision="2" :step="0.1" :min="0.0" placeholder="物品（零件）单价"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="my-row">
+        <el-col :span="12">
+          <el-form-item label="金额" prop="amount">
+            <el-input v-model="dataForm.price * dataForm.cnt" :disabled="true" placeholder="物品（零件）总金额"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="my-row">
+        <el-col :span="12">
+          <el-form-item label="存放仓库" prop="warehouseId">
+            <warehouse-select v-model="dataForm.warehouseId"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="存放货架" prop="shelveId">
+            <el-input v-model="dataForm.shelveId" placeholder="请选择存放货架"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="my-row">
+        <el-col :span="24">
+          <el-form-item label="备注" prop="notes">
+            <el-input v-model="dataForm.notes" placeholder="备注"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
@@ -31,8 +78,10 @@
 </template>
 
 <script>
+  import WarehouseSelect from './warehouse-select'
   export default {
     name: 'stock-add-or-update',
+    components: {WarehouseSelect},
     data () {
       return {
         visible: false,

src/views/modules/warehouse/warehouse-select.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-select
+      v-model="value"
+      ref="select"
+      placeholder="请选择存放仓库"
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      @change = "onChange">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+      <el-option v-if="options.length > 0" label="加载更多" style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'warehouse-select',
+    props: {
+      warehouseId: {
+        type: String,
+        default: ''
+      }
+    },
+    model: {
+      prop: 'warehouseId',
+      event: 'select'
+    },
+    data () {
+      return {
+        value: '',
+        current: 1,
+        size: 10,
+        warehouseName: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    mounted () {
+      this.init(this.warehouseId)
+    },
+    watch: {
+      warehouseId: {
+        handler (newVal) {
+          this.options = []
+          this.init(newVal)
+        }
+      }
+    },
+    methods: {
+      async init (id) {
+        this.current = 1
+        this.getList(id)
+      },
+      remoteMethod (query) {
+        console.log('query = ' + query)
+        this.options = []
+        this.current = 1
+        this.warehouseName = query
+        this.getList()
+      },
+      getList (id) {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/stock-mg-ctl/listWarehouses`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'warehouseName': this.warehouseName
+          })
+        }).then(({data}) => {
+          if (data && data.code === '200') {
+            if (this.current > data.data.pages) {
+              return
+            }
+            data.data.records.forEach(item => {
+              this.options.push({
+                label: item.warehouseName,
+                value: item.warehouseId
+              })
+            })
+            if (id) {
+              this.value = id
+            }
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        if (item === 'undefined') {
+          this.value = null
+        }
+        this.$emit('select', item)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>