新增库存增加厂家下拉框，并且在其他位置回显

zhangwencui

2026-05-28 f300d2d0d34ec8e6725fb2410ca5465546171a25

 src/views/inventoryManagement/receiptManagement/Record.vue

@@ -110,6 +110,13 @@
        <el-table-column label="入库时间"
                         prop="createTime"
                         show-overflow-tooltip />
        <el-table-column label="厂家"
                         prop="manufacturerId"
                         show-overflow-tooltip>
          <template #default="scope">
            {{ getManufacturerName(scope.row.manufacturerId) }}
          </template>
        </el-table-column>
        <el-table-column label="产品大类"
                         prop="productName"
                         show-overflow-tooltip />
@@ -129,10 +136,9 @@
                         prop="createBy"
                         show-overflow-tooltip />
        <el-table-column label="来源"
                         prop="recordType"
                         show-overflow-tooltip>
          <template #default="scope">
            {{ getRecordType(scope.row.recordType) }}
            {{ scope.row.qualifiedSourceText || scope.row.unQualifiedSourceText || getRecordType(scope.row.recordType) || "--" }}
          </template>
        </el-table-column>
        <el-table-column v-if="showSourceOrderNoColumn"
@@ -162,6 +168,60 @@
                  :limit="page.size"
                  @pagination="pageProductChange" />
    </div>
    <!-- 审批弹窗 -->
    <el-dialog v-model="approveDialogVisible"
               title="审批"
               width="800px"
               append-to-body>
      <el-form :model="approveForm"
               label-width="80px">
        <el-form-item label="审批结果">
          <el-radio-group v-model="approveForm.approvalStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="明细确认"
                      v-if="approveForm.approvalStatus === 1">
          <div class="approve-items-list">
            <div class="list-header">
              <span class="header-product">产品信息</span>
              <span class="header-num">入库数量</span>
            </div>
            <div v-for="item in approveForm.items"
                 :key="item.id"
                 class="approve-item">
              <div class="item-info">
                <div class="product-name"
                     :title="item.productName">{{ item.productName }}</div>
                <div class="product-info-sub">
                  <span class="product-model"
                        :title="item.model">{{ item.model }}</span>
                  <span class="product-batch"
                        v-if="item.batchNo"
                        :title="'批号: ' + item.batchNo"> | 批号: {{ item.batchNo }}</span>
                </div>
              </div>
              <div class="item-input">
                <el-input-number v-model="item.stockInNum"
                                 :min="0"
                                 :precision="2"
                                 controls-position="right"
                                 style="width: 130px" />
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="approveDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitApprove"
                     :loading="approveLoading">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

@@ -186,6 +246,7 @@
    findAllQualifiedStockInRecordTypeOptions,
    // findAllUnQualifiedStockInRecordTypeOptions,
  } from "@/api/basicData/enum.js";
  import { getManufacturerOptions } from "@/api/inspectionManagement/manufacturerManageFile.js";

  const { proxy } = getCurrentInstance();

@@ -206,11 +267,20 @@
  const tableLoading = ref(false);
  // 来源类型选项
  const stockRecordTypeOptions = ref([]);
  const manufacturerOptions = ref([]);
  const page = reactive({
    current: 1,
    size: 10,
  });
  const total = ref(0);

  // 审批相关
  const approveDialogVisible = ref(false);
  const approveLoading = ref(false);
  const approveForm = reactive({
    approvalStatus: 1,
    items: [], // 存储每个选中的条目及其入库数量
  });

  const data = reactive({
    searchForm: {
@@ -234,6 +304,13 @@
    return (
      stockRecordTypeOptions.value.find(item => item.value === recordType)
        ?.label || ""
    );
  };

  const getManufacturerName = manufacturerId => {
    return (
      manufacturerOptions.value.find(item => item.id === manufacturerId)?.name ||
      "--"
    );
  };

@@ -370,6 +447,12 @@
    //     })
  };

  const fetchManufacturerOptions = () => {
    getManufacturerOptions().then(res => {
      manufacturerOptions.value = res.data || [];
    });
  };

  // 表格选择数据
  const handleSelectionChange = selection => {
    selectedRows.value = selection.filter(
@@ -410,36 +493,49 @@
      proxy.$modal.msgWarning("请选择待审批的数据");
      return;
    }
    const ids = selectedRows.value.map(item => item.id);
    ElMessageBox.confirm("请选择审批结果", "审批", {
      confirmButtonText: "通过",
      cancelButtonText: "驳回",
      type: "warning",
      distinguishCancelAndClose: true,
    })
    // 初始化审批表单
    approveForm.approvalStatus = 1;
    approveForm.items = selectedRows.value.map(row => ({
      id: row.id,
      productName: row.productName,
      model: row.model,
      batchNo: row.batchNo,
      stockInNum: row.stockInNum || 0,
    }));
    approveDialogVisible.value = true;
  };

  const submitApprove = () => {
    const params = {
      approvalStatus: approveForm.approvalStatus,
    };

    // 只有在通过时才传包含数量的明细列表，否则仅传 ID 列表
    if (approveForm.approvalStatus === 1) {
      params.items = approveForm.items.map(item => ({
        id: item.id,
        stockInNum: item.stockInNum,
      }));
    } else {
      params.ids = approveForm.items.map(item => item.id);
    }

    approveLoading.value = true;
    batchApproveStockInRecords(params)
      .then(() => {
        batchApproveStockInRecords({ ids, approvalStatus: 1 })
          .then(() => {
            proxy.$modal.msgSuccess("审批通过成功");
            getList();
          })
          .catch(() => {
            proxy.$modal.msgError("审批通过失败");
          });
        proxy.$modal.msgSuccess(
          approveForm.approvalStatus === 1 ? "审批通过成功" : "审批驳回成功"
        );
        approveDialogVisible.value = false;
        getList();
      })
      .catch(action => {
        if (action === "cancel") {
          batchApproveStockInRecords({ ids, approvalStatus: 2 })
            .then(() => {
              proxy.$modal.msgSuccess("审批驳回成功");
              getList();
            })
            .catch(() => {
              proxy.$modal.msgError("审批驳回失败");
            });
          return;
        }
        proxy.$modal.msg("已取消");
      .catch(() => {
        proxy.$modal.msgError(
          approveForm.approvalStatus === 1 ? "审批通过失败" : "审批驳回失败"
        );
      })
      .finally(() => {
        approveLoading.value = false;
      });
  };

@@ -494,6 +590,7 @@
  onMounted(() => {
    getList();
    fetchStockRecordTypeOptions();
    fetchManufacturerOptions();
  });

  watch(
@@ -511,4 +608,81 @@
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .approve-items-list {
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .list-header {
      display: flex;
      background-color: #f5f7fa;
      padding: 8px 12px;
      font-weight: bold;
      border-bottom: 1px solid #ebeef5;
      font-size: 13px;

      .header-product {
        flex: 1;
      }

      .header-num {
        width: 130px;
        text-align: center;
      }
    }

    .approve-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .item-info {
        flex: 1;
        min-width: 0;
        margin-right: 15px;

        .product-name {
          font-weight: bold;
          font-size: 13px;
          color: #303133;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .product-info-sub {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #909399;
          margin-top: 2px;
          white-space: nowrap;
          overflow: hidden;

          .product-model,
          .product-batch {
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .product-batch {
            margin-left: 4px;
            color: #409eff;
          }
        }
      }

      .item-input {
        width: 130px;
      }
    }
  }
</style>