浪潮 1.添加仓库管理页面 2.入库、出库添加新增编辑功能并联调

gaoluyang

2026-05-13 3c6ff4ef9b7cf583371f5769b0820b15d5860149

浪潮
1.添加仓库管理页面
2.入库、出库添加新增编辑功能并联调

 src/views/inventoryManagement/stockManagement/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,168 @@
<template>
  <div>
    <el-dialog v-model="isShow"
               title="编辑库存"
               width="800"
               @close="closeModal">
      <el-form label-width="140px"
               :model="formState"
               label-position="top"
               ref="formRef">
        <el-form-item label="产品名称"
                      prop="productName">
          <el-input v-model="formState.productName" disabled />
        </el-form-item>
        <el-form-item label="规格"
                      prop="model">
          <el-input v-model="formState.model" disabled />
        </el-form-item>
        <el-form-item label="单位"
                      prop="unit">
          <el-input v-model="formState.unit" disabled />
        </el-form-item>
        <el-form-item label="批号"
                      prop="batchNo">
          <el-input v-model="formState.batchNo" disabled />
        </el-form-item>
        <el-form-item label="合格库存数量"
                      prop="qualifiedQuantity">
          <el-input-number v-model="formState.qualifiedQuantity"
                           :step="1"
                           :min="0"
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="不合格库存数量"
                      prop="unQualifiedQuantity">
          <el-input-number v-model="formState.unQualifiedQuantity"
                           :step="1"
                           :min="0"
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="库存预警数量"
                      prop="warnNum">
          <el-input-number v-model="formState.warnNum"
                           :step="1"
                           :min="0"
                           style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="formState.remark"
                    type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, computed, watch, getCurrentInstance } from "vue";
  import { ElMessage } from "element-plus";
  import { updateStockInventory } from "@/api/inventoryManagement/stockInventory.js";

  const { proxy } = getCurrentInstance();

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  });

  const emits = defineEmits(["update:visible", "completed"]);

  const isShow = computed({
    get: () => props.visible,
    set: (val) => emits("update:visible", val),
  });

  const formRef = ref();

  const formState = ref({
    id: undefined,
    productId: undefined,
    productModelId: undefined,
    productName: "",
    model: "",
    unit: "",
    batchNo: "",
    qualifiedQuantity: 0,
    unQualifiedQuantity: 0,
    warnNum: 0,
    remark: "",
  });

  // ç›‘听弹窗显示，回填数据
  watch(
    () => props.visible,
    (val) => {
      if (val && props.record) {
        const row = props.record;
        console.log('编辑数据:', row);
        formState.value.id = row.id;
        formState.value.productId = row.productId;
        formState.value.productModelId = row.productModelId;
        formState.value.productName = row.productName || '';
        formState.value.model = row.model || '';
        formState.value.unit = row.unit || '';
        formState.value.batchNo = row.batchNo || '';
        formState.value.qualifiedQuantity = row.qualifiedQuantity || 0;
        formState.value.unQualifiedQuantity = row.unQualifiedQuantity || 0;
        formState.value.warnNum = row.warnNum || 0;
        formState.value.remark = row.remark || '';
      }
    },
    { immediate: true }
  );

  const closeModal = () => {
    isShow.value = false;
    resetForm();
  };

  const resetForm = () => {
    formState.value = {
      id: undefined,
      productId: undefined,
      productModelId: undefined,
      productName: "",
      model: "",
      unit: "",
      batchNo: "",
      qualifiedQuantity: 0,
      unQualifiedQuantity: 0,
      warnNum: 0,
      remark: "",
    };
  };

  const handleSubmit = () => {
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        const params = { ...formState.value };
        updateStockInventory(params)
          .then(() => {
            ElMessage.success("编辑成功");
            closeModal();
            emits("completed");
          })
          .catch(() => {
            ElMessage.error("编辑失败");
          });
      }
    });
  };
</script>

<style scoped lang="scss"></style>