Wed Mar 12 17:18:00 CST 2025 inscode

src/components/HelloWorld.vue

@@ -2,13 +2,17 @@
     <div>
         <h1>耗材档案管理</h1>
         <form @submit.prevent="addMaterial">
-            <input v-model="newmaterial.name"
-            type="text" placeholder="耗材名称"
-            required />
-            <input v-model="newMaterial.quantity" type="number" placeholder="数量"  required/>
+            <input v-model="newMaterial.name" type="text" placeholder="耗材名称" required/>
+            <input v-model="newMaterial.quantity" type="number" placeholder="数量" min="1" required />
             <button type="submit">添加耗材</button>
         </form>
-        
+        <ul v-if="materials.length">
+            <li v-for="(material,index) in materials" :key="material.id">
+                {{material.name}}--数量：{{material.quantity}}
+                <button @click="removeMaterial(index)">删除</button>
+                </li>
+        </ul>
+        <p v-else>暂无</p>
     </div>
 </template>
 
@@ -19,18 +23,26 @@ export default {
   name: 'MaterialRecord',
   setup() {
     const materials = ref([]);
-    const newMaterial = ref({ name: '', quantity: 1 });
+    const newMaterial = ref({ name: '', quantity: '' });
 
     const addMaterial = () => {
-      if (newMaterial.value.name && newMaterial.value.quantity) {
+      if (!newMaterial.value.name.trim()) {
+        alert('请输入耗材名称');
+        return;
+      }
+      if (isNaN(newMaterial.value.quantity) || newMaterial.value.quantity < 1) {
+        alert('请输入有效的数量');
+        return;
+      }
+
       materials.value.push({
         id: Date.now(),
-          name: newMaterial.value.name,
-          quantity: newMaterial.value.quantity,
+        name: newMaterial.value.name.trim(),
+        quantity: parseInt(newMaterial.value.quantity),
       });
+      
       newMaterial.value.name = '';
-        newMaterial.value.quantity = 1;
-      }
+      newMaterial.value.quantity = '';
     };
 
     const removeMaterial = (index) => {
@@ -64,4 +76,12 @@ ul {
   list-style-type: none;
   padding: 0;
 }
+
+li {
+  margin-bottom: 5px;
+}
+
+button {
+  margin-left: 10px;
+}
 </style>