批次出库

src/views/device/delivery/batch-out-add.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-dialog :visible.sync="visible" title="批量出库" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'120px'">
+      <el-form-item label="计待出库设备">
+        {{number}}
+      </el-form-item>
+			<el-row>
+				<el-col :span="8">
+					<el-form-item label="厂家" prop="sn">
+						<label>格林美</label>
+					</el-form-item>
+				</el-col>
+				<el-col :span="8">
+					<el-form-item label="型号" prop="sn">
+						<label>磷酸铁锂6060</label>
+					</el-form-item>
+				</el-col>
+				<el-col :span="8">
+					<el-form-item label="类型" prop="sn">
+						<label>二轮车</label>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="设备类型" prop="sn">
+						<label>动力电池</label>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="设备用途" prop="sn">
+						<label>智慧运营 、智能运维</label>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="设备类型" prop="sn">
+						<label>动力电池</label>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="设备用途" prop="sn">
+						<label>智慧运营 、智能运维</label>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="接收人姓名" prop="receiverName">
+						<el-input :maxlength="30" show-word-limit v-model="dataForm.receiverName" placeholder="请输入姓名"></el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="手机号" prop="receiverPhone">
+						<el-input :maxlength="30" show-word-limit v-model="dataForm.receiverPhone" placeholder="请输入手机号"></el-input>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-form-item label="出库类型" prop="outType">
+        <el-select v-model="dataForm.outType">
+					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+				</el-select> 
+      </el-form-item>
+			<el-form-item label="备注" prop="remark">
+        <el-input type="textarea" :maxlength="200" show-word-limit v-model="dataForm.remark" placeholder="备注"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { deliveryAdd } from '@/api/device/delivery'
+export default {
+  data () {
+    return {
+      //是否显示弹窗
+      visible: false,
+      //表单对象
+      dataForm: {
+        sn: [],
+        snStr: '',
+        receiverName: '',
+        receiverPhone: '',
+        remark: '',
+        batchNum: [],
+        outType: null,
+      },
+      number: 0,
+			//出库类型选项
+      options: [
+        {label: '商用', value: 1},
+        {label: '测试', value: 2},
+      ]
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        snStr: [
+          { required: true, message: "电池SN不能为空", trigger: 'blur' }
+        ],
+        receiverName: [
+          { required: true, message: "接收人姓名不能为空", trigger: 'blur' }
+        ],
+        receiverPhone: [
+          { required: true, message: "接收人手机号不能为空", trigger: 'blur' }
+        ],
+        outType: [
+          { required: true, message: "出库类型不能为空", trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    inputHandle() {
+      let sn = []
+      sn.push(this.dataForm.snStr)
+      this.dataForm.sn = sn
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        deliveryAdd(this.dataForm).then(res => {
+          if (res.code !== 200) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: `${this.dataForm.sn} 电池出库成功`,
+            type: 'success',
+            duration: 1000,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+  }
+}
+</script>

src/views/device/delivery/batchOut.vue

@@ -40,6 +40,7 @@
 			:cell-style="{'text-align':'center'}"
       fit
       highlight-current-row
+      @selection-change="handleSelectionChange"
     >
 			<el-table-column
 				type="selection"
@@ -88,13 +89,13 @@
 			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
 			@current-change="pageCurrentChangeHandle">
 		</el-pagination>
-		<Create v-if="addVisible" ref="add" @refreshDataList="getDataList"></Create>
+		<Create v-if="addVisible" ref="create" @refreshDataList="getDataList"></Create>
   </div>
 </template>
 
 <script>
 import { batchStorageOutList } from '@/api/device/delivery'
-import Create from '@/views/device/delivery/delivery-add.vue'
+import Create from '@/views/device/delivery/batch-out-add.vue'
 
 export default {
   components: { Create },
@@ -123,7 +124,8 @@ export default {
         {label: '商用', value: 1},
         {label: '测试', value: 2},
         {label: '试用', value: 3}
-      ]
+      ],
+      multipleSelection: []
     }
   },
   created() {
@@ -164,6 +166,11 @@ export default {
       })
     },
 
+    /**批量选择表格数据 */
+		handleSelectionChange(val) {
+			this.multipleSelection = val
+		},
+
 		// 分页, 每页条数
     pageSizeChangeHandle (val) {
       this.listQuery.index = 1
@@ -183,9 +190,18 @@ export default {
 
 		//打开新增弹窗
 		cerateHandle() {
+      if (this.multipleSelection.length === 0) return this.$message.warning("请选择出库批次")
+      let numbers = []
+      let number = 0
+			this.multipleSelection.forEach(item => {
+				numbers.push(item.operate_id)
+        number += item.transfer
+			})
 			this.addVisible = true
 			this.$nextTick(() => {
-				this.$refs.add.init()
+				this.$refs.create.init()
+        this.$refs.create.dataForm.batchNum = numbers
+				this.$refs.create.number = number
 			});
 		},