feat(库存管理): 优化新建库存表单布局并添加辅数量字段

张诺

4 小时以前 0711c14f0b42f868e63180b5490e0876b4abc70a

feat(库存管理): 优化新建库存表单布局并添加辅数量字段

- 将新建库存表单重构为响应式网格布局，改善移动端显示
- 新增辅数量输入字段，支持主辅单位库存管理
- 移除低库存行的样式定义，统一交由全局样式处理

 src/views/inventoryManagement/stockManagement/New.vue

@@ -7,83 +7,114 @@
        @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" :rules="rules" label-position="top" ref="formRef">
        <el-form-item
            label="产品名称"
            prop="productModelId"
            :rules="[
                {
                required: true,
                message: '请选择产品',
                trigger: 'change',
              }
            ]"
        >
          <el-button type="primary" @click="showProductSelectDialog = true">
            {{ formState.productName ? formState.productName : '选择产品' }}
          </el-button>
        </el-form-item>
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="产品名称"
                prop="productModelId"
                :rules="[
                    {
                    required: true,
                    message: '请选择产品',
                    trigger: 'change',
                  }
                ]"
            >
              <el-button type="primary" @click="showProductSelectDialog = true">
                {{ formState.productName ? formState.productName : '选择产品' }}
              </el-button>
            </el-form-item>
          </el-col>

        <el-form-item
            label="规格"
            prop="productModelName"
        >
          <el-input v-model="formState.productModelName"  disabled />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="规格"
                prop="productModelName"
            >
              <el-input v-model="formState.productModelName" disabled />
            </el-form-item>
          </el-col>

        <el-form-item
            label="单位(主)"
            prop="unit"
        >
          <el-input v-model="formState.unit"  disabled />
        </el-form-item>
        <el-form-item
            label="单位(辅)"
            prop="subUnit"
        >
          <el-input v-model="formState.subUnit"  disabled />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="单位(主)"
                prop="unit"
            >
              <el-input v-model="formState.unit" disabled />
            </el-form-item>
          </el-col>

        <el-form-item
            label="仓库编码"
            prop="warehouseCode"
        >
          <el-select v-model="formState.warehouseCode" :options="warehouseCode" placeholder="请选择仓库编码" @change="handleWarehouseSelect">
            <el-option v-for="item in warehouseCode" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="单位(辅)"
                prop="subUnit"
            >
              <el-input v-model="formState.subUnit" disabled />
            </el-form-item>
          </el-col>

        <el-form-item
            label="仓库名称"
            prop="warehouseName"
        >
          <el-input v-model="formState.warehouseName"  disabled />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="仓库编码"
                prop="warehouseCode"
            >
              <el-select v-model="formState.warehouseCode" :options="warehouseCode" placeholder="请选择仓库编码" @change="handleWarehouseSelect">
                <el-option v-for="item in warehouseCode" :key="item.value" :label="item.value" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

        <el-form-item
            label="存货编码"
            prop="productCode"
        >
          <el-input v-model="formState.productCode"  />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="仓库名称"
                prop="warehouseName"
            >
              <el-input v-model="formState.warehouseName" disabled />
            </el-form-item>
          </el-col>

        <el-form-item
            label="库存数量"
            prop="qualitity"
        >
          <el-input-number v-model="formState.qualitity" :step="1" :min="1" style="width: 100%" />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="存货编码"
                prop="productCode"
            >
              <el-input v-model="formState.productCode" />
            </el-form-item>
          </el-col>

        <el-form-item
            v-if="type === 'qualified'"
            label="库存预警数量"
            prop="warnNum"
        >
          <el-input-number v-model="formState.warnNum" :step="1" :min="0" :max="formState.qualitity" style="width: 100%" />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="库存(主)数量"
                prop="qualitity"
            >
              <el-input-number v-model="formState.qualitity" :step="1" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="formState.remark" type="textarea" />
        </el-form-item>
          <el-col :xs="24" :sm="12">
            <el-form-item
                label="库存(辅)数量"
                prop="subQualitity"
            >
              <el-input-number v-model="formState.subQualitity" :step="1" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" v-if="type === 'qualified'">
            <el-form-item
                label="库存预警数量"
                prop="warnNum"
            >
              <el-input-number v-model="formState.warnNum" :step="1" :min="0" :max="formState.qualitity" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formState.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 产品选择弹窗 -->
@@ -143,6 +174,7 @@
  warehouseName: "",
  qualitity: 0,
  warnNum: 0,
  subQualitity: 0,
  remark: '',
});

@@ -181,6 +213,7 @@
    warehouseCode: "",
    warehouseName: "",
    warnNum: 0,
    subQualitity: 0,
    remark: '',
  };
  isShow.value = false;

 src/views/inventoryManagement/stockManagement/Qualified.vue

@@ -201,11 +201,9 @@

<style scoped lang="scss">
:deep(.row-low-stock td) {
  background-color: #fde2e2;
  color: #c45656;
}

:deep(.row-low-stock:hover > td) {
  background-color: #fcd4d4;
  // background-color: #fcd4d4;
}
</style>

 src/views/inventoryManagement/stockManagement/Unqualified.vue

@@ -202,11 +202,11 @@

<style scoped lang="scss">
:deep(.row-low-stock td) {
  background-color: #fde2e2;
  color: #c45656;
  // background-color: #fde2e2;
  // color: #c45656;
}

:deep(.row-low-stock:hover > td) {
  background-color: #fcd4d4;
  // background-color: #fcd4d4;
}
</style>

 src/views/inventoryManagement/stockManagement/rawMaterialRecord.vue

@@ -202,11 +202,11 @@

<style scoped lang="scss">
:deep(.row-low-stock td) {
  background-color: #fde2e2;
  color: #c45656;
  // background-color: #fde2e2;
  // color: #c45656;
}

:deep(.row-low-stock:hover > td) {
  background-color: #fcd4d4;
  // background-color: #fcd4d4;
}
</style>