维修物料处理

src/locales/en.ts

@@ -866,7 +866,7 @@ export default {
     supplier:'Supplier',
     suppHolder:'Please enter supplier',
     attachment:'Attachment',
-
+    addMaterials:'Add Materials',
     device:'Device',
     repairType:'RepairType',
     shutDown:'ShutDown',

src/locales/zh-CN.ts

@@ -890,6 +890,7 @@ export default {
     operation:'操作',
     remove:'移除',
     selectMaterials:'选择物料',
+    addMaterials:'添加物料',
     viewMaterials:'查看物料',
     save: '保存',
     cancel: '取消',

src/views/pms/maintain/IotMaintainAddEdit.vue

@@ -225,73 +225,6 @@
         </div>
       </el-form>
     </ContentWrap>
-    <ContentWrap>
-      <ContentWrap>
-        <!-- 搜索工作栏 -->
-        <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
-          <el-form-item>
-            <!--          <el-button @click="openMaterialForm" type="primary"-->
-            <!--            ><Icon icon="ep:plus" class="mr-5px" /> 选择物料</el-button>-->
-            <el-button @click="openMaintainForm" type="primary"
-              ><Icon icon="ep:plus" class="mr-5px" />
-              {{ t('iotMaintain.selectMaintenanceItem') }}</el-button
-            >
-            <el-button @click="openMaintainItem" type="warning"
-              ><Icon icon="ep:plus" class="mr-5px" />
-              {{ t('iotMaintain.addMaintenanceItems') }}</el-button
-            >
-            <!--          <el-button @click="handleViewNew" type="warning"-->
-            <!--            ><Icon icon="ep:plus" class="mr-5px" /> 新增物料</el-button>-->
-          </el-form-item>
-        </el-form>
-      </ContentWrap>
-
-      <!-- 列表 -->
-      <ContentWrap>
-        <el-table v-loading="loading" :data="list" class="abc"  @row-click="handleRowClick"
-        :row-class-name="tableRowClassName">
-          <el-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
-          <el-table-column :label="t('iotMaintain.deviceName')" align="center" prop="deviceName" />
-          <el-table-column :label="t('iotMaintain.repairItems')"  align="center" prop="name" />
-          <el-table-column :label="t('iotMaintain.numberOfMaterials')" align="center" prop="materialCount" >
-            <template #default="scope">
-              <el-tag v-if="scope.row.materialCount" type="danger"> {{scope.row.materialCount}}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('iotMaintain.ifNeed')"  align="center" prop="ifNeed">
-            <template #default="scope">
-              <el-switch
-                v-model="scope.row.ifNeed"
-                @change="handleIfNeedChange(scope.row)"
-              />
-            </template>
-
-          </el-table-column>
-          <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
-            <template #default="scope">
-              <div style="display: flex; justify-content: center; align-items: center; width: 100%">
-                <div>
-                  <el-button
-                    style="vertical-align: middle"
-                    link
-                    type="danger"
-                    @click="handleDelete(scope.row.bomNodeId)"
-                  >
-                    <Icon style="vertical-align: middle; color: #ea3434" icon="ep:zoom-out" />
-                    {{ t('iotMaintain.remove') }}
-                  </el-button>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </ContentWrap>
-
-
-      <!-- 表单弹窗：添加/修改 -->
-      <WorkOrderMaterial ref="materialFormRef" @choose="selectChoose" />
-      <ChooseMaintain ref="maintainFormRef" @choose="maintainChoose" />
-    </ContentWrap>
     <DeviceList ref="deviceFormRef" @choose="deviceChoose" />
     <CustomerList ref="customerFormRef" @choose="customerChoose" />
     <MaterialListDrawer
@@ -330,6 +263,76 @@
       </el-form>
     </Dialog>
   </ContentWrap>
+
+
+  <ContentWrap>
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
+        <el-form-item>
+          <!--          <el-button @click="openMaterialForm" type="primary"-->
+          <!--            ><Icon icon="ep:plus" class="mr-5px" /> 选择物料</el-button>-->
+          <el-button @click="openMaintainForm" type="primary"
+          ><Icon icon="ep:plus" class="mr-5px" />
+            {{ t('iotMaintain.selectMaintenanceItem') }}</el-button
+          >
+          <el-button @click="openMaintainItem" type="warning"
+          ><Icon icon="ep:plus" class="mr-5px" />
+            {{ t('iotMaintain.addMaintenanceItems') }}</el-button
+          >
+          <!--          <el-button @click="handleViewNew" type="warning"-->
+          <!--            ><Icon icon="ep:plus" class="mr-5px" /> 新增物料</el-button>-->
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" class="abc"  @row-click="handleRowClick"
+                :row-class-name="tableRowClassName">
+        <el-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
+        <el-table-column :label="t('iotMaintain.deviceName')" align="center" prop="deviceName" />
+        <el-table-column :label="t('iotMaintain.repairItems')"  align="center" prop="name" />
+        <el-table-column :label="t('iotMaintain.numberOfMaterials')" align="center" prop="materialCount" >
+          <template #default="scope">
+            <el-tag v-if="scope.row.materialCount" type="danger"> {{scope.row.materialCount}}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('iotMaintain.ifNeed')"  align="center" prop="ifNeed">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.ifNeed"
+              @change="handleIfNeedChange(scope.row)"
+            />
+          </template>
+
+        </el-table-column>
+        <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
+          <template #default="scope">
+            <div style="display: flex; justify-content: center; align-items: center; width: 100%">
+              <div>
+                <el-button
+                  style="vertical-align: middle"
+                  link
+                  type="danger"
+                  @click="handleDelete(scope.row.bomNodeId)"
+                >
+                  <Icon style="vertical-align: middle; color: #ea3434" icon="ep:zoom-out" />
+                  {{ t('iotMaintain.remove') }}
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </ContentWrap>
+
+
+    <!-- 表单弹窗：添加/修改 -->
+    <WorkOrderMaterial ref="materialFormRef" @choose="selectChoose" />
+    <ChooseMaintain ref="maintainFormRef" @choose="maintainChoose" />
+  </ContentWrap>
+
   <ContentWrap v-if="materialIfShow">
     <ContentWrap>
       <!-- 搜索工作栏 -->
@@ -339,11 +342,9 @@
             <Icon icon="ep:plus" class="mr-5px" />
             {{ t('iotMaintain.selectMaterials') }}
           </el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="success" @click="addMaterial()">
+          <el-button type="success" @click="addMaterial">
             <Icon icon="ep:plus" class="mr-5px" />
-            {{ t('iotMaintain.selectMaterials') }}
+            {{ t('iotMaintain.addMaterials') }}
           </el-button>
         </el-form-item>
       </el-form>
@@ -351,13 +352,76 @@
     <ContentWrap>
       <el-table :data="filteredMaterials" style="width: 100%">
         <el-table-column prop="bomNodeId" :label="t('bomList.bomNode')" width="180" v-if="false"/>
-        <el-table-column prop="factory" :label="t('workOrderMaterial.factory')" width="180" v-if="!hideExtraColumns"/>
-        <el-table-column prop="costCenter" :label="t('workOrderMaterial.costCenter')" width="180" v-if="!hideExtraColumns"/>
-        <el-table-column prop="projectDepartment" :label="t('workOrderMaterial.storageLocation')"  width="180" v-if="!hideExtraColumns"/>
-        <el-table-column prop="materialName" :label="t('workOrderMaterial.materialName')" width="180" />
-        <el-table-column prop="materialCode" :label="t('workOrderMaterial.materialCode')" width="180" />
-        <el-table-column prop="unit" :label="t('workOrderMaterial.unit')" width="180" />
-        <el-table-column prop="unitPrice" :label="t('workOrderMaterial.unitPrice')" width="180" />
+        <el-table-column prop="factory" :label="t('workOrderMaterial.factory')" width="180" v-if="!hideExtraColumns">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.factory"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.factory }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="costCenter" :label="t('workOrderMaterial.costCenter')" width="180" v-if="!hideExtraColumns">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.costCenter"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.costCenter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="projectDepartment" :label="t('workOrderMaterial.storageLocation')"  width="180" v-if="!hideExtraColumns">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.projectDepartment"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.costCenter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="materialName" :label="t('workOrderMaterial.materialName')" width="180" >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.materialName"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.materialName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="materialCode" :label="t('workOrderMaterial.materialCode')" width="180" >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.materialCode"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.materialCode }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="unit" :label="t('workOrderMaterial.unit')" width="180" >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.unit"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.unit }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="unitPrice" :label="t('workOrderMaterial.unitPrice')" width="180" >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.unitPrice"
+              size="small"
+              v-if="scope.row.materialSource === '手动添加'"
+            />
+            <span v-else>{{ scope.row.unitPrice }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="quantity" :label="t('workOrderMaterial.ConsumptionQuantity')" width="180" >
           <template #default="scope">
             <el-input
@@ -524,15 +588,33 @@ const handleIfNeedChange = (row) =>{
 }
 
 const addMaterial = () =>{
-  // 向数组末尾添加新对象
-  filteredMaterials.value.push({
-    id: null,
+  if (selectedRowId.value === null) {
+    message.error('请点击选择维修项');
+    return
+  }
+  const newId = Math.max(...filteredMaterials.value.map(item => item.id), 0) + 1;
+  const newMaterial = {
+    id: newId,
     factory: '',
     costCenter: null,
     projectDepartment: null,
     materialName: null,
-    materialName:null
-  });
+    materialCode:null,
+    bomNodeId: selectedRowId.value,
+    unit: null,
+    unitPrice: null,
+    quantity: null,
+    materialSource: '手动添加'
+  }
+  filteredMaterials.value.push(newMaterial);
+  materialList.value.push(newMaterial);
+  list.value.forEach((item)=>{
+    if (item.bomNodeId === selectedRowId.value) {
+      item.materials = materialList.value.filter((item)=>item.bomNodeId===selectedRowId.value)
+      item.materialCount = item.materials.length;
+    }
+  })
+
 }
 
 const handleQuantityBlur = (event: Event, row: any) => {
@@ -650,7 +732,6 @@ const openForm = () => {
 const materialFormRef = ref()
 const currentBomNodeId = ref() // 当前选中的bom节点
 const openMaterialForm = () => {
-  debugger
   if (selectedRowId.value === null) {
     message.error('请点击选择维修项');
     return
@@ -720,8 +801,9 @@ const handleViewNew = (nodeId) => {
 
 const materialDelete = (row) =>{
   totalFee.value = 0
-  const index = materialList.value.findIndex((item) => item.bomNodeId === bomNodeId.value&&item.materialCode===row.materialCode)
-  const filterIndex = filteredMaterials.value.findIndex((item) => item.bomNodeId === bomNodeId.value&&item.materialCode===row.materialCode)
+  const index = materialList.value.findIndex((item) => item.bomNodeId === selectedRowId.value&&item.materialCode===row.materialCode)
+  const filterIndex = filteredMaterials.value.findIndex((item) => item.bomNodeId === selectedRowId.value&&item.materialCode===row.materialCode)
+  debugger
   if (index>-1) {
     materialList.value.splice(index,1)
   }
@@ -937,15 +1019,15 @@ const handleDelete = async (id: number) => {
 }
 /* 添加绿色行的样式 */
 ::v-deep .abc .el-table__row.green-row {
-  background-color: #6af48f; /* 浅绿色背景 */
+  background-color: #7fc6f3; /* 浅绿色背景 */
 }
 
 ::v-deep .abc .el-table__row.green-row:hover > td {
-  background-color: #6af48f !important; /* 鼠标悬停时的绿色背景 */
+  background-color: #7fc6f3 !important; /* 鼠标悬停时的绿色背景 */
 }
 
 ::v-deep .abc .el-table__row.green-row > td {
-  background-color: #6af48f; /* 选中行的单元格背景 */
+  background-color: #7fc6f3; /* 选中行的单元格背景 */
 }
 
 /* 可选：添加选中行的边框样式 */