自适应重量单位

src/components/inventory/StockAdjustmentDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <el-dialog
-    v-model="dialogVisible"
+      v-model="dialogVisible"
-    :title="dialogTitle"
+      :title="dialogTitle"
-    width="400px"
+      width="400px"
-    :close-on-click-modal="false"
+      :close-on-click-modal="false"
-    @close="handleClose"
+      @close="handleClose"
   >
     <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
       <el-form-item label="原料名称">
@@ -18,12 +18,12 @@
       </el-form-item>
       <el-form-item label="变动数量" prop="change_amount">
         <el-input-number
-          v-model="form.change_amount"
+            v-model="form.change_amount"
-          :min="1"
+            :min="1"
-          :precision="0"
+            :precision="0"
-          :step="1000"
+            :step="1000"
-          controls-position="right"
+            controls-position="right"
-          style="width: 100%;"
+            style="width: 100%;"
         ></el-input-number>
       </el-form-item>
       <el-form-item label="备注" prop="remarks">
@@ -40,9 +40,9 @@
 </template>
 
 <script>
-import { ref, reactive, computed, watch } from 'vue';
+import {ref, reactive, computed, watch} from 'vue';
-import { ElMessage } from 'element-plus';
+import {ElMessage} from 'element-plus';
-import { InventoryApi } from '../../api/inventory';
+import {InventoryApi} from '../../api/inventory';
 
 export default {
   name: 'StockAdjustmentDialog',
@@ -61,7 +61,7 @@ export default {
     },
   },
   emits: ['update:visible', 'success'],
-  setup(props, { emit }) {
+  setup(props, {emit}) {
     const formRef = ref(null);
     const dialogVisible = computed({
       get: () => props.visible,
@@ -94,9 +94,9 @@ export default {
 
     const rules = {
       change_amount: [
-        { required: true, message: '请输入变动数量', trigger: 'blur' },
+        {required: true, message: '请输入变动数量', trigger: 'blur'},
-        { type: 'number', message: '数量必须为数字', trigger: 'blur' },
+        {type: 'number', message: '数量必须为数字', trigger: 'blur'},
-        { min: 1, message: '数量必须大于0', trigger: 'blur' },
+        {min: 1, message: '数量必须大于0', trigger: 'blur'},
       ],
     };
 

src/components/inventory/StockListTable.vue

@@ -2,7 +2,11 @@
   <div>
     <el-table :data="stockList" style="width: 100%" v-loading="loading">
       <el-table-column prop="raw_material_name" label="原料名称"></el-table-column>
-      <el-table-column prop="stock" label="当前库存 (g)"></el-table-column>
+      <el-table-column prop="stock" label="当前库存">
+        <template #default="scope">
+          {{ formatWeight(scope.row.stock) }}
+        </template>
+      </el-table-column>
       <el-table-column prop="last_updated" label="最后更新时间">
         <template #default="scope">
           {{ formatRFC3339(scope.row.last_updated) }}
@@ -30,7 +34,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { InventoryApi } from '../../api/inventory';
 import { ElMessage } from 'element-plus';
-import { formatRFC3339 } from '../../utils/format';
+import { formatRFC3339, formatWeight } from '../../utils/format'; // 导入 formatWeight
 
 export default {
   name: 'StockListTable',
@@ -118,6 +122,7 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       formatRFC3339,
+      formatWeight, // 暴露给模板
       handleAdjust, // 暴露给模板
     };
   },

src/utils/format.js

@@ -18,5 +18,21 @@ export function formatRFC3339(rfc3339String) {
   }
 }
 
+/**
+ * 将以克为单位的重量转换为更合适的单位（克或千克）并格式化
+ * @param {number} grams - 以克为单位的重量
+ * @returns {string} - 格式化后的重量字符串 (例如 "1.5 kg" 或 "500 g")
+ */
+export function formatWeight(grams) {
+  if (typeof grams !== 'number' || isNaN(grams)) {
+    return '--';
+  }
+  if (grams >= 1000) {
+    return (grams / 1000).toFixed(2) + ' kg';
+  } else {
+    return grams + ' g';
+  }
+}
+
 // 你未来还可以添加其他全局格式化函数
 // export function formatCurrency(number) { ... }