From 0a2e7ccc8e61fb1c1f3e5c3a6c1538b0aeac6f17 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Wed, 11 Jun 2025 19:02:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BF=90=E7=BB=B4+=E7=9B=98?=
 =?UTF-8?q?=E7=82=B9=E8=AE=A1=E5=88=92+=E7=9B=98=E7=82=B9=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inventorys/stocktaking.vue          | 245 +++++++--
 src/views/maintenance/maintenance_records.vue | 475 +++++++++++++++---
 2 files changed, 619 insertions(+), 101 deletions(-)

diff --git a/src/views/inventorys/stocktaking.vue b/src/views/inventorys/stocktaking.vue
index 471d6f2..8a5642b 100644
--- a/src/views/inventorys/stocktaking.vue
+++ b/src/views/inventorys/stocktaking.vue
@@ -42,9 +42,22 @@
         <template slot="action" slot-scope="{ row }">
           <div style="display: flex; gap: 8px; justify-content: center;">
             <Button type="primary" size="small" style="border-radius: 6px;" @click="showInventorySelectModal(row.id)">选择对象</Button>
-            <Button type="primary" size="small" style="border-radius: 6px;" ghost @click="showPlanModal('edit', row)">编辑</Button>
-            <Button type="error" size="small" style="border-radius: 6px;" ghost @click="deletePlan(row.id)">删除</Button>
-            <Button type="info" size="small" style="border-radius: 6px;" ghost @click="viewPlanDetail(row)">查看</Button>
+            <Button v-if="row.status === 2" type="success" size="small" style="border-radius: 6px;" ghost @click="showSummaryModal(row)">盘点小结</Button>
+            <template v-if="row.status === 2">
+              <el-dropdown trigger="hover" @command="command => handleMoreCommand(command, row)">
+                <Button type="info" size="small" style="border-radius: 6px;" ghost>更多<i class="el-icon-arrow-down el-icon--right"></i></Button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                  <el-dropdown-item command="delete">删除</el-dropdown-item>
+                  <el-dropdown-item command="view">查看</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
+            <template v-else>
+              <Button type="primary" size="small" style="border-radius: 6px;" ghost @click="showPlanModal('edit', row)">编辑</Button>
+              <Button type="error" size="small" style="border-radius: 6px;" ghost @click="deletePlan(row.id)">删除</Button>
+              <Button type="info" size="small" style="border-radius: 6px;" ghost @click="viewPlanDetail(row)">查看</Button>
+            </template>
           </div>
         </template>
       </Table>
@@ -411,12 +424,12 @@
               <Tag :color="getInventoryStatusColor(row.status)">{{ getInventoryStatusText(row.status) }}</Tag>
             </template>
             <template slot="photos" slot-scope="{ row }">
-              <div v-if="row.photos && row.photos.length" class="photo-list">
-                <div v-for="(photo, index) in row.photos.slice(0, 3)" :key="index" class="photo-item">
-                  <img :src="photo" @click="previewImage(photo)" />
+              <div v-if="row.files && row.files.length" class="photo-list">
+                <div v-for="(file, index) in row.files.slice(0, 3)" :key="index" class="photo-item">
+                  <img :src="file.url" @click="previewImage(file.url)" />
                 </div>
-                <div v-if="row.photos.length > 3" class="photo-more">
-                  +{{ row.photos.length - 3 }}
+                <div v-if="row.files.length > 3" class="photo-more">
+                  +{{ row.files.length - 3 }}
                 </div>
               </div>
               <span v-else>-</span>
@@ -439,11 +452,74 @@
         <Button @click="planDetailModal.visible = false">关闭</Button>
       </template>
     </Modal>
+
+    <!-- 盘点小结 Modal -->
+    <Modal v-model="summaryModal.visible" title="盘点小结" width="800">
+      <div>
+        <div id="print-table">
+          <div style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 12px;">盘点小结</div>
+          <table class="summary-table">
+            <tr>
+              <td>盘点计划名称</td>
+              <td>{{ summaryModal.data ? summaryModal.data.name : '' }}</td>
+            </tr>
+            <tr>
+              <td>计划开始日期</td>
+              <td>{{ summaryModal.data ? summaryModal.data.planStart : '' }}</td>
+            </tr>
+            <tr>
+              <td>计划结束日期</td>
+              <td>{{ summaryModal.data ? summaryModal.data.planEnd : '' }}</td>
+            </tr>
+            <tr>
+              <td>实际开始日期</td>
+              <td>{{ summaryModal.data ? summaryModal.data.actualStart : '' }}</td>
+            </tr>
+            <tr>
+              <td>实际结束日期</td>
+              <td>{{ summaryModal.data ? summaryModal.data.actualEnd : '' }}</td>
+            </tr>
+            <tr>
+              <td>计划盘点清单数量</td>
+              <td>{{ summaryModal.data ? summaryModal.data.planCount : '' }}</td>
+            </tr>
+            <tr>
+              <td>实际盘点清单数量</td>
+              <td>{{ summaryModal.data ? summaryModal.data.actualCount : '' }}</td>
+            </tr>
+            <tr>
+              <td>签字区</td>
+              <td class="sign-cell"></td>
+            </tr>
+          </table>
+        </div>
+        <div style="margin: 24px 0 8px 0;">
+          <span style="font-weight: bold;">签字图片上传：</span>
+          <div v-if="summaryModal.signImage" style="margin-top: 8px;">
+            <img :src="summaryModal.signImage" style="max-width: 200px; max-height: 100px; border: 1px solid #eee;" />
+          </div>
+          <div v-else style="margin-top: 8px;">
+            <Upload
+              :before-upload="beforeSignUpload"
+              :on-success="handleSignUpload"
+              :show-upload-list="false"
+              :action="'/api/admin/upload-file'"
+            >
+              <Button type="primary" size="small">上传签字图片</Button>
+            </Upload>
+          </div>
+        </div>
+      </div>
+      <template slot="footer">
+        <Button v-print="'#print-table'">打印</Button>
+        <Button type="primary" @click="handleSummarySubmit" style="margin-left: 8px;">提交</Button>
+      </template>
+    </Modal>
   </div>
 </template>
 
 <script>
-import { saveStocktakingPlan, getStocktakingPlanList, deleteStocktakingPlan, getStocktakingPlanLinkList, getStocktakingPlanLinkDetail, getStocktakingHistoryList } from '@/api/system/stocktaking'
+import { saveStocktakingPlan, getStocktakingPlanList, deleteStocktakingPlan, getStocktakingPlanLinkList, getStocktakingHistoryList } from '@/api/system/stocktaking'
 import { getStorehouseTypeList } from '@/api/system/storehouseType'
 import { getparameteritem } from '@/api/system/dictionary'
 import { index as getWarehouseList } from '@/api/system/baseForm'
@@ -660,27 +736,44 @@ export default {
       planDetailColumns: [
         {
           title: '物资名称',
-          key: 'name',
-          minWidth: 150
+          key: 'zichanmingcheng',
+          minWidth: 150,
+          render: (h, params) => {
+            return h('span', params.row.material_info ? params.row.material_info.zichanmingcheng : '-')
+          }
         },
         {
           title: '物资型号',
-          key: 'spec',
-          width: 120
+          key: 'guigexinghao',
+          width: 120,
+          render: (h, params) => {
+            return h('span', params.row.material_info ? params.row.material_info.guigexinghao : '-')
+          }
         },
         {
           title: '单位',
-          key: 'unit',
-          width: 80
+          key: 'jiliangdanwei',
+          width: 80,
+          render: (h, params) => {
+            return h('span', params.row.material_info ? params.row.material_info.jiliangdanwei : '-')
+          }
+        },
+        {
+          title: '盘点人',
+          key: 'responsible_admin_name',
+          width: 120,
+          render: (h, params) => {
+            return h('span', params.row.responsible_admin ? params.row.responsible_admin.name : '-')
+          }
         },
         {
           title: '盘点数量',
-          key: 'checkQuantity',
+          key: 'check_num',
           width: 100
         },
         {
           title: '盘点日期',
-          key: 'checkDate',
+          key: 'check_date',
           width: 150
         },
         {
@@ -699,7 +792,12 @@ export default {
           slot: 'photos',
           width: 150
         }
-      ]
+      ],
+      summaryModal: {
+        visible: false,
+        data: null,
+        signImage: null
+      }
     }
   },
   watch: {
@@ -712,7 +810,6 @@ export default {
               this.materialList.forEach((item, index) => {
                 if (this.materialModal.selectedMaterialIds.has(item.id)) {
                   this.$refs.materialTable.toggleRowSelection(item, true)
-                  console.log('item.id1111111111111111111111', item.id)
                 }
               })
             }
@@ -1358,33 +1455,26 @@ export default {
       this.planDetailModal.pageIndex = 1
       this.loadPlanDetailData()
     },
-    loadPlanDetailData() {
+    async loadPlanDetailData() {
       this.planDetailModal.loading = true
-      // 模拟数据
-      setTimeout(() => {
-        const mockData = []
-        for (let i = 0; i < 20; i++) {
-          mockData.push({
-            id: i + 1,
-            name: `测试物资${i + 1}`,
-            spec: `规格${i + 1}`,
-            unit: '个',
-            checkQuantity: Math.floor(Math.random() * 100),
-            checkDate: '2024-03-15',
-            status: Math.random() > 0.5 ? 1 : 0,
-            remark: `这是第${i + 1}个物资的备注信息`,
-            photos: [
-              'https://picsum.photos/200/200?random=1',
-              'https://picsum.photos/200/200?random=2',
-              'https://picsum.photos/200/200?random=3',
-              'https://picsum.photos/200/200?random=4'
-            ]
-          })
+      try {
+        const formData = new FormData()
+        formData.append('page', this.planDetailModal.pageIndex)
+        formData.append('page_size', this.planDetailModal.pageSize)
+        formData.append('filter[0][key]', 'material_infos_plan_id')
+        formData.append('filter[0][op]', 'eq')
+        formData.append('filter[0][value]', this.planDetailModal.data.id)
+
+        const res = await getStocktakingPlanLinkList(formData)
+        if (res && res.list) {
+          this.planDetailModal.inventoryList = res.list.data
+          this.planDetailModal.total = res.list.total
         }
-        this.planDetailModal.inventoryList = mockData
-        this.planDetailModal.total = 100 // 模拟总数
+      } catch (e) {
+        this.$Message.error('获取盘点物资列表失败')
+      } finally {
         this.planDetailModal.loading = false
-      }, 500)
+      }
     },
     handlePlanDetailPageChange(page) {
       this.planDetailModal.pageIndex = page
@@ -1394,6 +1484,46 @@ export default {
       this.planDetailModal.pageSize = size
       this.planDetailModal.pageIndex = 1
       this.loadPlanDetailData()
+    },
+    showSummaryModal(row) {
+      // 假设 row 里有计划相关字段，实际/计划数量等
+      this.summaryModal.data = {
+        name: row.name,
+        planStart: row.start_date,
+        planEnd: row.end_date,
+        actualStart: row.actual_start_date || '-', // 你可根据实际数据调整
+        actualEnd: row.actual_end_date || '-',
+        planCount: row.plan_count || '-', // 你可根据实际数据调整
+        actualCount: row.actual_count || '-'
+      }
+      this.summaryModal.signImage = null
+      this.summaryModal.visible = true
+    },
+    beforeSignUpload(file) {
+      // 可加图片类型/大小校验
+      return true
+    },
+    handleSignUpload(response) {
+      // 假设 response.url 是图片地址
+      this.summaryModal.signImage = response.url
+    },
+    handleMoreCommand(command, row) {
+      if (command === 'edit') {
+        this.showPlanModal('edit', row)
+      } else if (command === 'delete') {
+        this.deletePlan(row.id)
+      } else if (command === 'view') {
+        this.viewPlanDetail(row)
+      }
+    },
+    handleSummarySubmit() {
+      if (!this.summaryModal.signImage) {
+        this.$Message.warning('请上传签字图片')
+        return
+      }
+      // TODO: 提交盘点小结逻辑
+      this.$Message.success('提交成功')
+      this.summaryModal.visible = false
     }
   }
 }
@@ -1434,7 +1564,7 @@ export default {
 }
 
 .page-title {
-  font-size: 1.3rem;
+  font-size: 16px;
   font-weight: 600;
   color: #333;
   margin: 0;
@@ -1688,4 +1818,31 @@ export default {
     }
   }
 }
+
+.summary-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 16px;
+  background: #fff;
+  margin-bottom: 16px;
+}
+.summary-table td {
+  border: 1px solid #333;
+  padding: 14px 16px;
+  min-width: 120px;
+  background: #fff;
+  color: #222;
+  font-weight: normal;
+}
+.summary-table .sign-cell {
+  height: 80px;
+  min-height: 80px;
+  line-height: 80px;
+}
+.summary-table td:first-child {
+  background: #fff;
+  color: #111;
+  font-weight: bold;
+  width: 160px;
+}
 </style>
diff --git a/src/views/maintenance/maintenance_records.vue b/src/views/maintenance/maintenance_records.vue
index 8ce1f86..85292aa 100644
--- a/src/views/maintenance/maintenance_records.vue
+++ b/src/views/maintenance/maintenance_records.vue
@@ -32,6 +32,7 @@
             </div>
             <Button type="primary" style="margin-left: 8px;" @click="getList">查询</Button>
             <Button type="primary" style="margin-left: 8px;" @click="resetSearch">重置</Button>
+            <Button type="primary" style="margin-left: 8px;" @click="createMaintenance">新增</Button>
           </div>
         </slot>
       </lx-header>
@@ -69,7 +70,7 @@
             align="center"
           />
           <el-table-column
-            prop="stocks_item.zichanmingcheng"
+            prop="material_info.zichanmingcheng"
             label="维护物资"
             min-width="120"
             align="center"
@@ -101,7 +102,11 @@
             label="负责人"
             min-width="100"
             align="center"
-          />
+          >
+            <template slot-scope="scope">
+              {{ (scope.row.responsible_admin && scope.row.responsible_admin.name) || '-' }}
+            </template>
+          </el-table-column>
           <el-table-column
             label="状态"
             min-width="100"
@@ -142,54 +147,49 @@
     </div>
 
     <!-- 完成维护 Modal -->
-    <div class="modal" :class="{ show: showModal }">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h3 class="modal-title">完成维护</h3>
-            <button class="close-button" @click="closeModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <Form ref="maintenanceForm" :model="form" :rules="formRules" :label-width="120">
-              <FormItem label="实际维护日期" prop="actual_date">
-                <DatePicker v-model="form.actual_date" type="date" placeholder="请选择实际维护日期" style="width: 100%" />
-              </FormItem>
-              <FormItem label="维护备注" prop="notes">
-                <Input v-model="form.notes" type="textarea" :rows="4" placeholder="请输入维护备注" />
-              </FormItem>
-              <FormItem label="上传图片" prop="photos">
-                <Upload
-                  ref="upload"
-                  :before-upload="handleBeforeUpload"
-                  :on-success="handleUploadSuccess"
-                  :on-error="handleUploadError"
-                  :on-remove="handleRemove"
-                  :max-size="2048"
-                  multiple
-                  type="drag"
-                  :action="baseUrl + 'api/admin/upload-file'"
-                >
-                  <div style="padding: 20px 0">
-                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
-                    <p>点击或拖拽文件到此处上传</p>
-                  </div>
-                </Upload>
-              </FormItem>
-              <FormItem label="签名" prop="signature">
-                <div class="signature-pad-wrapper">
-                  <canvas ref="signaturePad" class="signature-canvas" />
-                  <Button size="small" style="margin-top: 8px;" @click="clearSignature">清除签名</Button>
-                </div>
-              </FormItem>
-            </Form>
-          </div>
-          <div class="modal-footer">
-            <Button @click="closeModal">取消</Button>
-            <Button type="primary" @click="submitMaintenance">确认完成</Button>
+    <Modal
+      v-model="showModal"
+      title="完成维护"
+      width="600"
+      :mask-closable="false"
+    >
+      <Form ref="maintenanceForm" :model="form" :rules="formRules" :label-width="120">
+        <FormItem label="实际维护日期" prop="actual_date">
+          <DatePicker v-model="form.actual_date" type="date" placeholder="请选择实际维护日期" style="width: 100%" />
+        </FormItem>
+        <FormItem label="维护备注" prop="notes">
+          <Input v-model="form.notes" type="textarea" :rows="4" placeholder="请输入维护备注" />
+        </FormItem>
+        <FormItem label="上传图片" prop="photos">
+          <Upload
+            ref="upload"
+            :before-upload="handleBeforeUpload"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :on-remove="handleRemove"
+            :max-size="2048"
+            multiple
+            type="drag"
+            :action="baseUrl + 'api/admin/upload-file'"
+          >
+            <div style="padding: 20px 0">
+              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" />
+              <p>点击或拖拽文件到此处上传</p>
+            </div>
+          </Upload>
+        </FormItem>
+        <FormItem label="签名" prop="signature">
+          <div class="signature-pad-wrapper">
+            <canvas ref="signaturePad" class="signature-canvas" />
+            <Button size="small" style="margin-top: 8px;" @click="clearSignature">清除签名</Button>
           </div>
-        </div>
-      </div>
-    </div>
+        </FormItem>
+      </Form>
+      <template slot="footer">
+        <Button @click="closeModal">取消</Button>
+        <Button type="primary" @click="submitMaintenance">确认完成</Button>
+      </template>
+    </Modal>
 
     <!-- 查看详情 Modal -->
     <div class="modal" :class="{ show: showViewModal }">
@@ -239,7 +239,7 @@
                   style="cursor:pointer;"
                   alt="维护图片"
                   @click="previewImage(file.url)"
-                />
+                >
               </div>
               <div v-else class="form-value">-</div>
             </div>
@@ -252,7 +252,7 @@
                   style="cursor:pointer;"
                   alt="签名图片"
                   @click="previewImage(currentRecord.sign.url)"
-                />
+                >
               </div>
               <div v-else class="form-value">-</div>
             </div>
@@ -266,14 +266,97 @@
 
     <!-- 预览弹窗 -->
     <div v-if="previewUrl" class="image-preview-modal" @click="closePreview">
-      <img :src="previewUrl" class="image-preview-large" />
+      <img :src="previewUrl" class="image-preview-large">
     </div>
+
+    <!-- 新增维护记录 Modal -->
+    <Modal
+      v-model="showCreateModal"
+      title="新增维护记录"
+      width="500"
+      :mask-closable="false"
+    >
+      <Form ref="createForm" :model="createForm" :rules="createFormRules" :label-width="120">
+        <FormItem label="维护物资" prop="material_id">
+          <div class="material-select">
+            <Input v-model="createForm.material_name" readonly placeholder="请选择维护物资" style="width: calc(100% - 100px);" />
+            <input v-model="createForm.material_id" type="hidden">
+            <Button type="primary" style="margin-left: 8px;" @click="openMaterialModal">选择物资</Button>
+          </div>
+        </FormItem>
+        <FormItem label="计划维护日期" prop="planned_maintenance_date">
+          <DatePicker v-model="createForm.planned_maintenance_date" type="date" placeholder="请选择计划维护日期" style="width: 100%" />
+        </FormItem>
+      </Form>
+      <template slot="footer">
+        <Button @click="closeCreateModal">取消</Button>
+        <Button type="primary" @click="submitCreateMaintenance">确认创建</Button>
+      </template>
+    </Modal>
+
+    <!-- 关联物资 Modal -->
+    <Modal
+      v-model="showMaterialModal"
+      title="选择物资"
+      width="800"
+      :mask-closable="false"
+      append-to-body
+      class="material-modal-top"
+    >
+      <div class="associate-content">
+        <div class="associate-toolbar">
+          <Input v-model="materialSearch" placeholder="搜索物资名称..." style="width: 250px; margin-right: 10px;" clearable />
+          <Select v-model="select.storehouses_id" style="width: 120px; margin-right: 10px;" clearable placeholder="仓库类型" @on-change="getWarehouseNames">
+            <Option v-for="item in warehouseTypes" :key="item.id" :value="item.id">{{ item.name }}</Option>
+          </Select>
+          <Select v-model="select.area" style="width: 120px; margin-right: 10px;" clearable placeholder="所在区域" @on-change="getWarehouseNames">
+            <Option v-for="item in warehouseAreas" :key="item.id" :value="item.value">{{ item.value }}</Option>
+          </Select>
+          <Select v-model="materialWarehouseName" style="width: 120px; margin-right: 10px;" clearable placeholder="仓库名称">
+            <Option v-for="warehouse in warehouseNames" :key="warehouse.value" :value="warehouse.label">{{ warehouse.label }}</Option>
+          </Select>
+          <Button type="primary" @click="searchMaterials">搜索</Button>
+          <Button style="margin-left: 8px;" @click="resetMaterialSearch">重置</Button>
+        </div>
+        <Table :columns="materialColumns" :data="materialList" :height="400" style="margin-top: 15px;">
+          <template slot="action" slot-scope="{ row }">
+            <div style="display: flex; gap: 8px; justify-content: center;">
+              <Button
+                type="primary"
+                size="small"
+                ghost
+                style="border-radius: 6px;"
+                @click="selectMaterial(row)"
+              >
+                选择
+              </Button>
+            </div>
+          </template>
+        </Table>
+        <div class="pagination-container">
+          <el-pagination
+            :current-page="materialPageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="materialPageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="materialTotal"
+            @size-change="handleMaterialPageSizeChange"
+            @current-change="handleMaterialPageChange"
+          />
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
-import { Button, Select, Option, DatePicker, Input, Form, FormItem, Upload, Icon } from 'view-design'
+import { Button, Select, Option, DatePicker, Input, Form, FormItem, Upload, Icon, Modal, Table } from 'view-design'
 import { getOperationList, saveOperation, getOperationDetail } from '@/api/maintenance/maintenance'
+import { getStorehouseTypeList } from '@/api/system/storehouseType'
+import { getparameteritem } from '@/api/system/dictionary.js'
+import { index } from '@/api/system/baseForm.js'
+import request from '@/utils/request'
+import qs from 'qs'
 
 export default {
   components: {
@@ -285,7 +368,9 @@ export default {
     Form,
     FormItem,
     Upload,
-    Icon
+    Icon,
+    Modal,
+    Table
   },
   data() {
     return {
@@ -307,12 +392,50 @@ export default {
       list: [],
       showModal: false,
       showViewModal: false,
+      showCreateModal: false,
       currentRecord: {},
       form: {
         actual_date: '',
         notes: '',
         photos: []
       },
+      createForm: {
+        material_id: '',
+        material_name: '',
+        planned_maintenance_date: ''
+      },
+      createFormRules: {
+        material_id: [
+          {
+            required: true,
+            message: '请选择维护物资',
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请选择维护物资'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ],
+        planned_maintenance_date: [
+          {
+            required: true,
+            message: '请选择计划维护日期',
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请选择计划维护日期'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ]
+      },
+      materialOptions: [],
+      adminOptions: [],
       formRules: {
         actual_date: [
           {
@@ -363,7 +486,51 @@ export default {
       currentUser: '张三',
       total: 0,
       tableHeight: 550,
-      previewUrl: ''
+      previewUrl: '',
+      showMaterialModal: false,
+      materialSearch: '',
+      materialWarehouseName: '',
+      materialPageSize: 10,
+      materialPageIndex: 1,
+      materialTotal: 0,
+      materialColumns: [
+        {
+          title: '物资名称',
+          key: 'zichanmingcheng',
+          minWidth: 120
+        },
+        {
+          title: '物资代码',
+          key: 'wuzibianma',
+          minWidth: 120
+        },
+        {
+          title: '物资型号',
+          key: 'guigexinghao',
+          minWidth: 120
+        },
+        {
+          title: '仓库名称',
+          key: 'material_info',
+          minWidth: 120,
+          render: (h, params) => {
+            return h('span', params.row.material_info?.suozaicangku || '')
+          }
+        },
+        {
+          title: '操作',
+          slot: 'action',
+          width: 100,
+          fixed: 'right',
+          align: 'center',
+          headerAlign: 'center',
+          className: 'table-col-action'
+        }
+      ],
+      materialList: [],
+      warehouseTypes: [],
+      warehouseAreas: [],
+      warehouseNames: []
     }
   },
   watch: {
@@ -377,6 +544,9 @@ export default {
   },
   created() {
     this.getList()
+    this.getWarehouseTypes()
+    this.getWarehouseAreas()
+    this.getWarehouseNames()
   },
   mounted() {
     this.calcTableHeight()
@@ -424,6 +594,17 @@ export default {
       }
       this.getList()
     },
+    createMaintenance() {
+      this.showCreateModal = true
+    },
+    closeCreateModal() {
+      this.showCreateModal = false
+      this.createForm = {
+        material_id: '',
+        material_name: '',
+        planned_maintenance_date: ''
+      }
+    },
     pageChange(e) {
       this.select.page = e
       this.getList()
@@ -461,7 +642,7 @@ export default {
         // 2. 预处理二级字段为一级
         this.currentRecord = {
           ...detail,
-          stocks_item_name: detail.stocks_item?.zichanmingcheng || '-',
+          stocks_item_name: detail.material_info?.zichanmingcheng || '-',
           responsible_admin_name: detail.responsible_admin?.name || '-'
         }
         // 3. 打开查看窗口
@@ -500,8 +681,9 @@ export default {
       // 假设 response.id 是图片id，response.url 是图片地址
       this.form.photos.push({ id: response.id, url: response.url })
     },
-    handleUploadError(error, file) {
+    handleUploadError(err, file) {
       // 处理上传错误后的逻辑
+      console.error('上传图片失败:', err)
       this.$message.error('上传图片失败')
     },
     handleRemove(file) {
@@ -658,6 +840,154 @@ export default {
     },
     closePreview() {
       this.previewUrl = ''
+    },
+    async submitCreateMaintenance() {
+      try {
+        const valid = await this.$refs.createForm.validate()
+        if (!valid) {
+          return
+        }
+        const data = {
+          material_info_id: this.createForm.material_id,
+          planned_maintenance_date: this.formatDate(this.createForm.planned_maintenance_date)
+        }
+        const res = await saveOperation(data)
+        if (res) {
+          this.$Message.success('创建成功')
+          this.closeCreateModal()
+          this.getList()
+        }
+      } catch (error) {
+        this.$Message.error('创建失败：' + (error.message || '未知错误'))
+      }
+    },
+    openMaterialModal() {
+      this.showMaterialModal = true
+      this.searchMaterials()
+    },
+    async searchMaterials() {
+      try {
+        const data = {
+          page_size: this.materialPageSize,
+          page: this.materialPageIndex,
+          'show_relation[0]': 'equipmentMaintainConfig',
+          'show_relation[1]': 'materialInfo.materialstorage',
+
+          'materialstorages_cangkumingcheng': this.materialWarehouseName ? this.materialWarehouseName : '',
+          'materialstorages_suozaiquyu': this.select.area ? this.select.area : '',
+          'storehouses_id': this.select.storehouses_id ? this.select.storehouses_id : '',
+
+          'filter[0][key]': 'zichanmingcheng',
+          'filter[0][op]': 'like',
+          'filter[0][value]': this.materialSearch ? this.materialSearch : '',
+
+          'filter[1][key]': 'wuzileixing',
+          'filter[1][op]': 'eq',
+          'filter[1][value]': '一物一码'
+        }
+        const res = await request({
+          url: '/api/admin/material-infos/index',
+          method: 'post',
+          data: qs.stringify(data),
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+          }
+        })
+        if (res && res.data) {
+          this.materialList = res.data.map(material => ({
+            ...material,
+            selected: false
+          }))
+          this.materialTotal = res.total
+        }
+      } catch (e) {
+        console.error('获取物资列表失败:', e)
+        this.$Message.error('获取物资列表失败')
+      }
+    },
+    selectMaterial(row) {
+      this.createForm.material_id = row.id
+      this.createForm.material_name = row.zichanmingcheng
+      this.showMaterialModal = false
+    },
+    handleMaterialSubmit() {
+      this.showMaterialModal = false
+    },
+    handleMaterialCancel() {
+      this.showMaterialModal = false
+    },
+    handleMaterialPageChange(page) {
+      this.materialPageIndex = page
+      this.searchMaterials()
+    },
+    handleMaterialPageSizeChange(size) {
+      this.materialPageSize = size
+      this.materialPageIndex = 1
+      this.searchMaterials()
+    },
+    resetMaterialSearch() {
+      this.materialSearch = ''
+      this.select.storehouses_id = ''
+      this.select.area = ''
+      this.materialWarehouseName = ''
+      this.materialPageIndex = 1
+      this.searchMaterials()
+    },
+    async getWarehouseTypes() {
+      try {
+        const res = await getStorehouseTypeList({
+          page: 1,
+          page_size: 999
+        })
+        if (res && res.data) {
+          this.warehouseTypes = res.data
+        }
+      } catch (e) {
+        console.error('获取仓库类型列表失败:', e)
+        this.$Message.error('获取仓库类型列表失败')
+      }
+    },
+    async getWarehouseAreas() {
+      try {
+        const res = await getparameteritem('area')
+        if (res && res.detail) {
+          this.warehouseAreas = res.detail
+        }
+      } catch (e) {
+        console.error('获取仓库区域列表失败:', e)
+        this.$Message.error('获取仓库区域列表失败')
+      }
+    },
+    async getWarehouseNames() {
+      try {
+        const res = await index({
+          page_size: this.select.page_size,
+          page: this.select.page,
+          table_name: 'materialstorages',
+          filter: [{
+            key: 'cangkumingcheng',
+            op: 'like',
+            value: this.select.keyword ? this.select.keyword : ''
+          }, {
+            key: 'quyu_id',
+            op: 'eq',
+            value: this.select.area ? this.select.area : ''
+          }, {
+            key: 'storehouses_id',
+            op: 'eq',
+            value: this.select.storehouses_id ? this.select.storehouses_id : ''
+          }]
+        })
+        if (res && res.data) {
+          this.warehouseNames = res.data.map(warehouse => ({
+            value: warehouse.id,
+            label: warehouse.cangkumingcheng
+          }))
+        }
+      } catch (e) {
+        console.error('获取仓库名称列表失败:', e)
+        this.$Message.error('获取仓库名称列表失败')
+      }
     }
   }
 }
@@ -1127,4 +1457,35 @@ hr {
   border-top: 1.5px solid #e0e3e8;
   margin: 16px 0;
 }
+
+.material-select {
+  display: flex;
+  align-items: center;
+}
+.associate-content {
+  padding: 16px;
+}
+.associate-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+:deep(.material-modal-top .ivu-modal) {
+  z-index: 9999 !important;
+}
+:deep(.material-modal-top .ivu-modal-mask) {
+  z-index: 9998 !important;
+}
+
+.ivu-modal-body {
+  min-height: 0 !important;
+  height: auto !important;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+}
 </style>