质保单上传整体结构

klp-ui/src/views/wms/stock/panels/stockIo.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="单号">
+        <el-input v-model="form.stockIoCode" placeholder="请输入单号" />
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="form.ioType" placeholder="请选择类型">
+          <el-option label="入库" value="in" />
+          <el-option label="出库" value="out" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-select v-model="form.bizType" placeholder="请选择业务类型">
+          <el-option
+            v-for="dict in dict.type.stock_biz_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <el-table :data="stockBoxData" style="width: 100%">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="warehouseName" label="仓库" />
+      <el-table-column prop="itemName" label="物料" />
+      <el-table-column prop="quantity" label="数量" width="200">
+        <template slot-scope="scope">
+          <el-input-number v-model="scope.row.count" :min="0" :step="1" :max="scope.row.quantity" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="unit" label="单位" />
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: right; margin-top: 10px;">
+      <el-button type="danger" @click="handleDeleteAll">清空</el-button>
+      <el-button type="primary" @click="handleGenerateBill">生成单据</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StockIo',
+  dicts: ['stock_biz_type'],
+  data() {
+    return {
+      stockBoxData: [],
+      form: {
+        stockIoCode: '',
+        ioType: 'in',
+        bizType: 'stock_io',
+        remark: '',
+      }
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.stockBoxData = newVal.map(item => ({
+          ...item,
+          count: 0,
+        }));
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    handleDelete(row) {
+      this.stockBoxData = this.stockBoxData.filter(item => item.stockId !== row.stockId);
+    },
+    handleDeleteAll() {
+      this.stockBoxData = [];
+    },
+    handleGenerateBill() {
+      this.$emit('generateBill', {
+        ...this.form,
+        details: this.stockBoxData.map(item => ({
+          ...item,
+          status: 0,
+          quantity: item.count,
+          batchNo: item.batchNo,
+          remark: item.remark
+        }))
+      });
+    }
+  }
+}
+</script>