diff --git a/src/api/maintenance/maintenance.js b/src/api/maintenance/maintenance.js
new file mode 100644
index 0000000..64557ac
--- /dev/null
+++ b/src/api/maintenance/maintenance.js
@@ -0,0 +1,67 @@
+import request from '@/utils/request';
+
+// 设备运维规则配置
+export function getMaintainConfigList(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/index',
+    method: 'get',
+    params
+  });
+}
+
+export function getMaintainConfigDetail(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/show',
+    method: 'get',
+    params
+  });
+}
+
+export function saveMaintainConfig(data) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/save',
+    method: 'post',
+    data
+  });
+}
+
+export function deleteMaintainConfig(params) {
+  return request({
+    url: '/api/admin/equipment-maintain-config/destroy',
+    method: 'get',
+    params
+  });
+}
+
+// 设备运维记录
+export function getOperationList(params) {
+  return request({
+    url: '/api/admin/equipment-operation/index',
+    method: 'get',
+    params
+  });
+}
+
+export function getOperationDetail(params) {
+  return request({
+    url: '/api/admin/equipment-operation/show',
+    method: 'get',
+    params
+  });
+}
+
+export function saveOperation(data) {
+  return request({
+    url: '/api/admin/equipment-operation/save',
+    method: 'post',
+    data
+  });
+}
+
+export function deleteOperation(params) {
+  return request({
+    url: '/api/admin/equipment-operation/destroy',
+    method: 'get',
+    params
+  });
+}
diff --git a/src/api/stocks-item.js b/src/api/stocks-item.js
new file mode 100644
index 0000000..a0db1eb
--- /dev/null
+++ b/src/api/stocks-item.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 绑定/更新物资与运维规则的关系
+export function saveStocksItem(data) {
+  return request({
+    url: '/api/admin/stocks-item/save',
+    method: 'post',
+    data
+  });
+} 
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6f749c4..5449bad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,31 +40,31 @@ export const constantRoutes = [{
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
-  },
-  {
-    path: '/stocks',
-    component: () => import('@/views/stocks/index'),
-    hidden: true
-  },
-  {
-    path: '/outbounds',
-    component: () => import('@/views/outbounds/index'),
-    hidden: true
-  },
-  // {
-  //   path: '/inventorys',
-  //   component: () => import('@/views/inventorys/index'),
-  //   hidden: true
-  // },
-  // {
-  //   path: '/inventorys/stocks',
-  //   component: () => import('@/views/inventorys/stocks'),
-  //   hidden: true
-  // },
-  // {
-  //   path: '/inventorys/outbounds',
-  //   component: () => import('@/views/inventorys/outbounds'),
-  //   hidden: true
+  },
+  {
+    path: '/stocks',
+    component: () => import('@/views/stocks/index'),
+    hidden: true
+  },
+  {
+    path: '/outbounds',
+    component: () => import('@/views/outbounds/index'),
+    hidden: true
+  },
+  // {
+  //   path: '/inventorys',
+  //   component: () => import('@/views/inventorys/index'),
+  //   hidden: true
+  // },
+  // {
+  //   path: '/inventorys/stocks',
+  //   component: () => import('@/views/inventorys/stocks'),
+  //   hidden: true
+  // },
+  // {
+  //   path: '/inventorys/outbounds',
+  //   component: () => import('@/views/inventorys/outbounds'),
+  //   hidden: true
   // },
   {
     path: '/info',
@@ -102,8 +102,6 @@ export const constantRoutes = [{
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
-
-
   // 404 page must be placed at the end !!!
   {
     path: '*',
@@ -128,4 +126,4 @@ export function resetRouter() {
   router.matcher = newRouter.matcher // reset router
 }
 
-export default router
+export default router
diff --git a/src/views/inventorys/stocktaking.vue b/src/views/inventorys/stocktaking.vue
new file mode 100644
index 0000000..946f237
--- /dev/null
+++ b/src/views/inventorys/stocktaking.vue
@@ -0,0 +1,891 @@
+<template>
+  <div>
+    <!-- 盘点计划 Section -->
+    <div class="content-wrapper">
+      <div class="page-header">
+        <h1 class="page-title">盘点计划</h1>
+        <Button type="primary" @click="showPlanModal('new')">新建计划</Button>
+      </div>
+
+      <!-- Plan Search Filters -->
+      <div class="search-filters">
+        <div class="filter-item">
+          <span class="selector-item__label">关键词:</span>
+          <Input v-model="planSearch.keyword" style="width: 180px" placeholder="计划名称/编号" />
+        </div>
+        <div class="filter-item">
+          <span class="selector-item__label">计划日期:</span>
+          <DatePicker v-model="planSearch.dateRange" type="daterange" split-panels style="width: 200px"></DatePicker>
+        </div>
+        <div class="filter-item">
+          <span class="selector-item__label">状态:</span>
+          <Select v-model="planSearch.status" style="width: 120px">
+            <Option value="">全部</Option>
+            <Option value="pending">未开始</Option>
+            <Option value="progress">进行中</Option>
+            <Option value="completed">已完成</Option>
+          </Select>
+        </div>
+        <div class="filter-item">
+          <Button type="primary" @click="searchPlans">查询</Button>
+          <Button style="margin-left: 10px" @click="resetPlanSearch">重置</Button>
+        </div>
+      </div>
+
+      <!-- Plan Table -->
+      <Table :columns="planColumns" :data="planList" :loading="planLoading">
+        <template slot-scope="{ row }" slot="status">
+          <Tag :color="getStatusColor(row.status)">{{ getStatusText(row.status) }}</Tag>
+        </template>
+        <template slot-scope="{ row }" slot="action">
+          <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>
+          </div>
+        </template>
+      </Table>
+
+      <!-- Plan Pagination -->
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handlePlanPageSizeChange"
+          @current-change="handlePlanPageChange"
+          :current-page="planSearch.pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="planSearch.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="planTotal"
+        />
+      </div>
+    </div>
+
+    <!-- 盘点列表 Section -->
+    <div class="content-wrapper" style="margin-top: 20px">
+      <div class="page-header">
+        <h1 class="page-title">盘点列表</h1>
+      </div>
+
+      <!-- List Search Filters -->
+      <div class="search-filters">
+        <div class="filter-item">
+          <span class="selector-item__label">关键词:</span>
+          <Input v-model="listSearch.keyword" style="width: 180px" placeholder="单号/计划/区域/执行人" />
+        </div>
+        <div class="filter-item">
+          <span class="selector-item__label">所属计划:</span>
+          <Select v-model="listSearch.planId" style="width: 180px">
+            <Option value="">全部计划</Option>
+            <Option v-for="plan in planList" :key="plan.id" :value="plan.id">{{ plan.name }}</Option>
+          </Select>
+        </div>
+        <div class="filter-item">
+          <span class="selector-item__label">状态:</span>
+          <Select v-model="listSearch.status" style="width: 120px">
+            <Option value="">全部</Option>
+            <Option value="pending">未盘点</Option>
+            <Option value="completed">已盘点</Option>
+          </Select>
+        </div>
+        <div class="filter-item">
+          <Button type="primary" @click="searchList">查询</Button>
+          <Button style="margin-left: 10px" @click="resetListSearch">重置</Button>
+        </div>
+      </div>
+
+      <!-- Inventory List Table -->
+      <Table :columns="listColumns" :data="inventoryList" :loading="listLoading">
+        <template slot-scope="{ row }" slot="status">
+          <Tag :color="getInventoryStatusColor(row.status)">{{ getInventoryStatusText(row.status) }}</Tag>
+        </template>
+        <template slot-scope="{ row }" slot="action">
+          <div style="display: flex; gap: 8px; justify-content: center;">
+            <Button type="primary" size="small" style="border-radius: 6px;" @click="viewInventoryDetail(row.id)">查看</Button>
+          </div>
+        </template>
+      </Table>
+
+      <!-- List Pagination -->
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleListPageSizeChange"
+          @current-change="handleListPageChange"
+          :current-page="listSearch.pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listSearch.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="listTotal"
+        />
+      </div>
+    </div>
+
+    <!-- Plan Create/Edit Modal -->
+    <Modal v-model="planModal.visible" :title="planModal.title" @on-ok="handlePlanSubmit">
+      <Form ref="planForm" :model="planModal.form" :rules="planModal.rules" label-width="80">
+        <FormItem label="计划名称" prop="name">
+          <Input v-model="planModal.form.name" placeholder="请输入计划名称" />
+        </FormItem>
+        <FormItem label="计划日期" prop="dateRange">
+          <DatePicker v-model="planModal.form.dateRange" type="daterange" split-panels style="width: 100%"></DatePicker>
+        </FormItem>
+        <FormItem label="备注" prop="remark">
+          <Input v-model="planModal.form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+        </FormItem>
+      </Form>
+    </Modal>
+
+    <!-- Inventory Selection Modal -->
+    <Modal v-model="materialModal.visible" title="选择盘点物资" width="800">
+      <div class="material-search">
+        <Input v-model="materialModal.keyword" placeholder="物资名称/规格" style="width: 200px" />
+        <Button type="primary" style="margin-left: 10px" @click="searchMaterials">搜索</Button>
+        <div style="float: right">
+          <Button type="success" size="small" @click="batchAddMaterials">批量加入</Button>
+          <Button type="error" size="small" style="margin-left: 5px" @click="batchRemoveMaterials">批量移出</Button>
+        </div>
+      </div>
+      <Table 
+        :columns="materialColumns" 
+        :data="materialList" 
+        :loading="materialModal.loading"
+        @on-selection-change="handleMaterialSelectionChange"
+      >
+        <template slot-scope="{ row }" slot="action">
+          <div style="display: flex; gap: 8px; justify-content: center;">
+            <Button 
+              :type="row.selected ? 'warning' : 'success'" 
+              size="small"
+              style="border-radius: 6px;"
+              @click="toggleMaterialSelection(row)"
+            >
+              {{ row.selected ? '移出计划' : '加入计划' }}
+            </Button>
+          </div>
+        </template>
+      </Table>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        // 删除不需要的数据
+        planSearch: {
+          keyword: '',
+          dateRange: [],
+          status: '',
+          pageIndex: 1,
+          pageSize: 10
+        },
+        planList: [
+          {
+            id: 'P202504001',
+            name: '2025年4月库房盘点',
+            startDate: '2025-04-01',
+            endDate: '2025-04-30',
+            status: 'progress',
+            remark: '全库房范围，月底前完成'
+          },
+          {
+            id: 'P202505001',
+            name: '2025年5月A区耗材盘点',
+            startDate: '2025-05-01',
+            endDate: '2025-05-15',
+            status: 'pending',
+            remark: ''
+          }
+        ],
+        planTotal: 2,
+        planLoading: false,
+        planColumns: [
+          { title: '计划编号', key: 'id' },
+          { title: '计划名称', key: 'name' },
+          { title: '开始日期', key: 'startDate' },
+          { title: '结束日期', key: 'endDate' },
+          { 
+            title: '状态', 
+            slot: 'status',
+            key: 'status'
+          },
+          {
+            title: '操作',
+            slot: 'action',
+            width: 200
+          }
+        ],
+
+        // 盘点列表相关数据
+        listSearch: {
+          keyword: '',
+          planId: '',
+          status: '',
+          pageIndex: 1,
+          pageSize: 10
+        },
+        inventoryList: [
+          {
+            id: 'I202504001',
+            planName: '2025年4月库房盘点',
+            area: 'A栋一层库房',
+            executor: '张三',
+            startTime: '2025-04-10 09:00',
+            endTime: '-',
+            status: 'pending'
+          },
+          {
+            id: 'I202504002',
+            planName: '2025年4月库房盘点',
+            area: 'B栋地下室库房',
+            executor: '李四',
+            startTime: '2025-04-11 10:30',
+            endTime: '2025-04-11 15:45',
+            status: 'completed'
+          },
+          {
+            id: 'I202505001',
+            planName: '2025年5月A区耗材盘点',
+            area: 'A栋二层耗材柜',
+            executor: '王五',
+            startTime: '2025-05-05 14:00',
+            endTime: '-',
+            status: 'pending'
+          }
+        ],
+        listTotal: 3,
+        listLoading: false,
+        listColumns: [
+          { title: '盘点单号', key: 'id' },
+          { title: '所属计划', key: 'planName' },
+          { title: '盘点区域', key: 'area' },
+          { title: '执行人', key: 'executor' },
+          { title: '开始时间', key: 'startTime' },
+          { title: '完成时间', key: 'endTime' },
+          { 
+            title: '状态', 
+            slot: 'status',
+            key: 'status'
+          },
+          {
+            title: '操作',
+            slot: 'action',
+            width: 100
+          }
+        ],
+
+        // 计划模态框数据
+        planModal: {
+          visible: false,
+          title: '新建盘点计划',
+          form: {
+            id: '',
+            name: '',
+            dateRange: [],
+            remark: ''
+          },
+          rules: {
+            name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+            dateRange: [{ required: true, message: '请选择计划日期', trigger: 'change' }]
+          }
+        },
+
+        // 物资选择模态框数据
+        materialModal: {
+          visible: false,
+          loading: false,
+          keyword: '',
+          currentPlanId: ''
+        },
+        materialList: [
+          {
+            id: 'M001',
+            name: '铁锹',
+            spec: '工兵锹',
+            unit: '把',
+            stock: 50,
+            selected: false
+          },
+          {
+            id: 'M002',
+            name: '沙袋',
+            spec: '编织袋 50kg',
+            unit: '个',
+            stock: 2000,
+            selected: true
+          },
+          {
+            id: 'M003',
+            name: '救生衣',
+            spec: '成人款',
+            unit: '件',
+            stock: 100,
+            selected: false
+          },
+          {
+            id: 'M004',
+            name: '发电机',
+            spec: '5kW 汽油',
+            unit: '台',
+            stock: 5,
+            selected: true
+          },
+          {
+            id: 'M005',
+            name: '水泵',
+            spec: '3寸柴油',
+            unit: '台',
+            stock: 10,
+            selected: false
+          },
+          {
+            id: 'M006',
+            name: '照明灯具',
+            spec: '强光手电',
+            unit: '个',
+            stock: 30,
+            selected: false
+          },
+          {
+            id: 'M007',
+            name: '雨衣',
+            spec: '加厚款',
+            unit: '套',
+            stock: 150,
+            selected: false
+          }
+        ],
+        materialColumns: [
+          { type: 'selection', width: 60 },
+          { title: '物资名称', key: 'name' },
+          { title: '规格型号', key: 'spec' },
+          { title: '单位', key: 'unit' },
+          { title: '当前库存', key: 'stock' },
+          {
+            title: '操作',
+            slot: 'action',
+            width: 100
+          }
+        ],
+        // 模拟计划物资关联数据
+        planMaterials: {
+          'P202504001': ['M002', 'M004'], // 计划1有沙袋和发电机
+          'P202505001': ['M001', 'M003', 'M006'] // 计划2有铁锹、救生衣和照明灯具
+        }
+      }
+    },
+    mounted() {
+      this.searchPlans()
+      this.searchList()
+    },
+    methods: {
+      // 状态相关方法
+      getStatusColor(status) {
+        const colors = {
+          pending: 'red',
+          progress: 'orange',
+          completed: 'green'
+        }
+        return colors[status] || 'default'
+      },
+      getStatusText(status) {
+        const texts = {
+          pending: '未开始',
+          progress: '进行中',
+          completed: '已完成'
+        }
+        return texts[status] || status
+      },
+      getInventoryStatusColor(status) {
+        const colors = {
+          pending: 'red',
+          completed: 'green'
+        }
+        return colors[status] || 'default'
+      },
+      getInventoryStatusText(status) {
+        const texts = {
+          pending: '未盘点',
+          completed: '已盘点'
+        }
+        return texts[status] || status
+      },
+
+      // 计划相关方法
+      async searchPlans() {
+        this.planLoading = true
+        try {
+          // 模拟API调用延迟
+          await new Promise(resolve => setTimeout(resolve, 500))
+          
+          // 使用模拟数据
+          let filteredPlans = [...this.planList]
+          
+          // 关键词搜索
+          if (this.planSearch.keyword) {
+            const keyword = this.planSearch.keyword.toLowerCase()
+            filteredPlans = filteredPlans.filter(plan => 
+              plan.name.toLowerCase().includes(keyword) || 
+              plan.id.toLowerCase().includes(keyword)
+            )
+          }
+          
+          // 状态筛选
+          if (this.planSearch.status) {
+            filteredPlans = filteredPlans.filter(plan => 
+              plan.status === this.planSearch.status
+            )
+          }
+          
+          // 日期范围筛选
+          if (this.planSearch.dateRange && this.planSearch.dateRange.length === 2) {
+            const [start, end] = this.planSearch.dateRange
+            filteredPlans = filteredPlans.filter(plan => 
+              plan.startDate >= start && plan.endDate <= end
+            )
+          }
+          
+          this.planList = filteredPlans
+          this.planTotal = filteredPlans.length
+        } finally {
+          this.planLoading = false
+        }
+      },
+      resetPlanSearch() {
+        this.planSearch = {
+          keyword: '',
+          dateRange: [],
+          status: '',
+          pageIndex: 1,
+          pageSize: 10
+        }
+        this.searchPlans()
+      },
+      handlePlanPageChange(page) {
+        this.planSearch.pageIndex = page
+        this.searchPlans()
+      },
+      handlePlanPageSizeChange(size) {
+        this.planSearch.pageSize = size
+        this.planSearch.pageIndex = 1
+        this.searchPlans()
+      },
+      showPlanModal(mode, plan) {
+        this.planModal.title = mode === 'new' ? '新建盘点计划' : '编辑盘点计划'
+        if (mode === 'edit' && plan) {
+          this.planModal.form = {
+            id: plan.id,
+            name: plan.name,
+            dateRange: [plan.startDate, plan.endDate],
+            remark: plan.remark
+          }
+        } else {
+          this.planModal.form = {
+            id: '',
+            name: '',
+            dateRange: [],
+            remark: ''
+          }
+        }
+        this.planModal.visible = true
+      },
+      async handlePlanSubmit() {
+        try {
+          await this.$refs.planForm.validate()
+          // TODO: 调用API保存计划
+          this.planModal.visible = false
+          this.searchPlans()
+        } catch (error) {
+          // 表单验证失败
+        }
+      },
+      async deletePlan(id) {
+        try {
+          await this.$Modal.confirm({
+            title: '确认删除',
+            content: '确定要删除该计划吗？'
+          })
+          // TODO: 调用API删除计划
+          this.searchPlans()
+        } catch (error) {
+          // 用户取消删除
+        }
+      },
+
+      // 盘点列表相关方法
+      async searchList() {
+        this.listLoading = true
+        try {
+          // 模拟API调用延迟
+          await new Promise(resolve => setTimeout(resolve, 500))
+          
+          // 使用模拟数据
+          let filteredList = [...this.inventoryList]
+          
+          // 关键词搜索
+          if (this.listSearch.keyword) {
+            const keyword = this.listSearch.keyword.toLowerCase()
+            filteredList = filteredList.filter(item => 
+              item.id.toLowerCase().includes(keyword) ||
+              item.planName.toLowerCase().includes(keyword) ||
+              item.area.toLowerCase().includes(keyword) ||
+              item.executor.toLowerCase().includes(keyword)
+            )
+          }
+          
+          // 计划筛选
+          if (this.listSearch.planId) {
+            filteredList = filteredList.filter(item => 
+              item.planName === this.planList.find(p => p.id === this.listSearch.planId)?.name
+            )
+          }
+          
+          // 状态筛选
+          if (this.listSearch.status) {
+            filteredList = filteredList.filter(item => 
+              item.status === this.listSearch.status
+            )
+          }
+          
+          this.inventoryList = filteredList
+          this.listTotal = filteredList.length
+        } finally {
+          this.listLoading = false
+        }
+      },
+      resetListSearch() {
+        this.listSearch = {
+          keyword: '',
+          planId: '',
+          status: '',
+          pageIndex: 1,
+          pageSize: 10
+        }
+        this.searchList()
+      },
+      handleListPageChange(page) {
+        this.listSearch.pageIndex = page
+        this.searchList()
+      },
+      handleListPageSizeChange(size) {
+        this.listSearch.pageSize = size
+        this.listSearch.pageIndex = 1
+        this.searchList()
+      },
+      viewInventoryDetail(id) {
+        // TODO: 实现查看详情功能
+      },
+
+      // 物资选择相关方法
+      showInventorySelectModal(planId) {
+        this.materialModal.currentPlanId = planId
+        this.materialModal.visible = true
+        this.searchMaterials()
+      },
+      async searchMaterials() {
+        this.materialModal.loading = true
+        try {
+          // 模拟API调用延迟
+          await new Promise(resolve => setTimeout(resolve, 500))
+          
+          // 使用模拟数据
+          let filteredMaterials = [...this.materialList]
+          
+          // 关键词搜索
+          if (this.materialModal.keyword) {
+            const keyword = this.materialModal.keyword.toLowerCase()
+            filteredMaterials = filteredMaterials.filter(material => 
+              material.name.toLowerCase().includes(keyword) ||
+              material.spec.toLowerCase().includes(keyword)
+            )
+          }
+          
+          // 更新选中状态
+          const planMaterials = this.planMaterials[this.materialModal.currentPlanId] || []
+          filteredMaterials = filteredMaterials.map(material => ({
+            ...material,
+            selected: planMaterials.includes(material.id)
+          }))
+          
+          this.materialList = filteredMaterials
+        } finally {
+          this.materialModal.loading = false
+        }
+      },
+      handleMaterialSelectionChange(selection) {
+        // 处理物资选择变化
+      },
+      toggleMaterialSelection(material) {
+        material.selected = !material.selected
+        const planId = this.materialModal.currentPlanId
+        
+        if (!this.planMaterials[planId]) {
+          this.planMaterials[planId] = []
+        }
+        
+        if (material.selected) {
+          if (!this.planMaterials[planId].includes(material.id)) {
+            this.planMaterials[planId].push(material.id)
+          }
+        } else {
+          this.planMaterials[planId] = this.planMaterials[planId].filter(id => id !== material.id)
+        }
+      },
+      async batchAddMaterials() {
+        const selection = this.materialList.filter(m => m.selected)
+        if (selection.length === 0) {
+          this.$Message.warning('请至少选择一项物资')
+          return
+        }
+        
+        const planId = this.materialModal.currentPlanId
+        if (!this.planMaterials[planId]) {
+          this.planMaterials[planId] = []
+        }
+        
+        selection.forEach(material => {
+          if (!this.planMaterials[planId].includes(material.id)) {
+            this.planMaterials[planId].push(material.id)
+          }
+        })
+        
+        this.$Message.success(`已批量加入 ${selection.length} 项物资`)
+        this.searchMaterials()
+      },
+      async batchRemoveMaterials() {
+        const selection = this.materialList.filter(m => m.selected)
+        if (selection.length === 0) {
+          this.$Message.warning('请至少选择一项物资')
+          return
+        }
+        
+        const planId = this.materialModal.currentPlanId
+        if (this.planMaterials[planId]) {
+          this.planMaterials[planId] = this.planMaterials[planId].filter(
+            id => !selection.some(m => m.id === id)
+          )
+        }
+        
+        this.$Message.success(`已批量移出 ${selection.length} 项物资`)
+        this.searchMaterials()
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .code {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    z-index: 9999
+  }
+
+  #qrCode {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .content-wrapper {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  }
+
+  .page-header {
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e8e8e8;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .page-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+  }
+
+  .search-filters {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 15px 20px;
+  }
+
+  .filter-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  .el-pagination {
+    padding: 0;
+    font-weight: normal;
+    .el-pagination__sizes {
+      margin-right: 16px;
+    }
+    .el-pagination__jump {
+      margin-left: 16px;
+    }
+    .el-pagination__total {
+      margin-right: 16px;
+    }
+    .btn-prev,
+    .btn-next {
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      &:hover {
+        color: #409eff;
+      }
+    }
+    .el-pager li {
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      &:hover {
+        color: #409eff;
+      }
+      &.active {
+        background-color: #409eff;
+        color: #fff;
+        border-color: #409eff;
+      }
+    }
+  }
+
+  .material-search {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* 按钮样式优化 */
+  .ivu-btn {
+    &.ivu-btn-small {
+      padding: 4px 12px;
+      font-size: 13px;
+      height: 28px;
+      line-height: 1.5;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+      }
+      
+      &.ivu-btn-primary {
+        background: #2d8cf0;
+        border-color: #2d8cf0;
+        color: #fff;
+        
+        &:hover {
+          background: #57a3f3;
+          border-color: #57a3f3;
+        }
+        
+        &.ivu-btn-ghost {
+          background: transparent;
+          color: #2d8cf0;
+          border-color: #2d8cf0;
+          
+          &:hover {
+            background: rgba(45,140,240,0.1);
+          }
+        }
+      }
+      
+      &.ivu-btn-error {
+        background: #ed4014;
+        border-color: #ed4014;
+        color: #fff;
+        
+        &:hover {
+          background: #f16643;
+          border-color: #f16643;
+        }
+        
+        &.ivu-btn-ghost {
+          background: transparent;
+          color: #ed4014;
+          border-color: #ed4014;
+          
+          &:hover {
+            background: rgba(237,64,20,0.1);
+          }
+        }
+      }
+      
+      &.ivu-btn-success {
+        background: #19be6b;
+        border-color: #19be6b;
+        color: #fff;
+        
+        &:hover {
+          background: #47cb89;
+          border-color: #47cb89;
+        }
+      }
+      
+      &.ivu-btn-warning {
+        background: #ff9900;
+        border-color: #ff9900;
+        color: #fff;
+        
+        &:hover {
+          background: #ffad33;
+          border-color: #ffad33;
+        }
+      }
+    }
+  }
+
+  /* 表格操作列样式 */
+  .table-col-action {
+    .ivu-btn {
+      min-width: 80px;
+    }
+  }
+
+  /* 表格样式优化 */
+  .ivu-table {
+    .ivu-table-cell {
+      padding: 8px 16px;
+    }
+    
+    .ivu-table-header {
+      th {
+        background: #f8f8f9;
+        font-weight: 600;
+        color: #17233d;
+      }
+    }
+    
+    .ivu-table-tbody {
+      tr {
+        &:hover {
+          td {
+            background: #f5f7fa;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/maintenance/maintenance_records.vue b/src/views/maintenance/maintenance_records.vue
new file mode 100644
index 0000000..499cb2b
--- /dev/null
+++ b/src/views/maintenance/maintenance_records.vue
@@ -0,0 +1,1129 @@
+<template>
+  <div class="table-page-container">
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="维护记录" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <slot>
+          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
+            <div class="search-item">
+              <span>仓库:</span>
+              <Select v-model="select.warehouse" style="width: 120px">
+                <Option value="">全部</Option>
+                <Option value="wt">外塘河仓库</Option>
+                <Option value="xk">胥口仓库</Option>
+              </Select>
+            </div>
+            <div class="search-item">
+              <span>状态:</span>
+              <Select v-model="select.status" style="width: 120px">
+                <Option value="">全部</Option>
+                <Option value="pending">待处理</Option>
+                <Option value="completed">已完成</Option>
+              </Select>
+            </div>
+            <div class="search-item">
+              <span>计划日期:</span>
+              <DatePicker v-model="select.date_start" type="date" placeholder="开始日期" style="width: 120px"></DatePicker>
+              <span>-</span>
+              <DatePicker v-model="select.date_end" type="date" placeholder="结束日期" style="width: 120px"></DatePicker>
+            </div>
+            <div class="search-item">
+              <span>关键词:</span>
+              <Input v-model="select.keyword" placeholder="维护项目/编号/负责人" style="width: 200px"></Input>
+            </div>
+            <Button type="primary" style="margin-left: 8px;" @click="getList">查询</Button>
+            <Button style="margin-left: 8px;" @click="resetSearch">重置</Button>
+          </div>
+        </slot>
+      </lx-header>
+    </div>
+
+    <div class="content-wrapper">
+      <!-- 统计卡片 -->
+      <div class="stats-cards">
+        <div class="card-item total">
+          <div class="card-label">全部记录</div>
+          <div class="card-value">{{ stats.total }}</div>
+        </div>
+        <div class="card-item pending">
+          <div class="card-label">未完成</div>
+          <div class="card-value">{{ stats.pending }}</div>
+        </div>
+        <div class="card-item completed">
+          <div class="card-label">已完成</div>
+          <div class="card-value">{{ stats.completed }}</div>
+        </div>
+      </div>
+
+      <div class="table-flex-content">
+        <el-table
+          :data="list"
+          style="width: 100%"
+          :height="tableHeight"
+          border
+          size="medium"
+        >
+          <el-table-column
+            prop="no"
+            label="记录编号"
+            min-width="120"
+            align="center"
+          />
+          <el-table-column
+            prop="stocks_item.zichanmingcheng"
+            label="维护物资"
+            min-width="120"
+            align="center"
+          />
+          <el-table-column
+            prop="planned_maintenance_date"
+            label="计划维护日期"
+            min-width="120"
+            align="center"
+          />
+          <el-table-column
+            label="实际维护日期/状态"
+            min-width="150"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <template v-if="scope.row.status === 1">
+                {{ scope.row.maintenance_date }}
+              </template>
+              <template v-else>
+                <div :class="['status-badge', getBadgeClass(scope.row.planned_maintenance_date)]" style="display: inline-block;">
+                  {{ getBadgeText(scope.row.planned_maintenance_date) }}
+                </div>
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="responsible_admin.name"
+            label="负责人"
+            min-width="100"
+            align="center"
+          />
+          <el-table-column
+            label="状态"
+            min-width="100"
+            align="center"
+          >
+            <template slot-scope="scope">
+              {{ getStatusText(scope.row.status) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            min-width="200"
+            header-align="center"
+            class-name="table-col-action"
+          >
+            <template slot-scope="scope">
+              <div style="display: flex; gap: 8px; justify-content: center;">
+                <Button v-if="scope.row.status === 1" type="primary" size="small" style="border-radius: 6px;" @click="viewDetail(scope.row)">查看</Button>
+                <Button v-if="scope.row.status === 0" type="primary" size="small" style="border-radius: 6px;" ghost @click="completeMaintenance(scope.row)">完成维护</Button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-container">
+          <el-pagination
+            @size-change="pageSizeChange"
+            @current-change="pageChange"
+            :current-page="select.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="select.page_size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          />
+        </div>
+      </div>
+    </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%"></DatePicker>
+              </FormItem>
+              <FormItem label="维护备注" prop="notes">
+                <Input v-model="form.notes" type="textarea" :rows="4" placeholder="请输入维护备注"></Input>
+              </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"></Icon>
+                    <p>点击或拖拽文件到此处上传</p>
+                  </div>
+                </Upload>
+              </FormItem>
+              <FormItem label="签名" prop="signature">
+                <div class="signature-pad-wrapper">
+                  <canvas ref="signaturePad" class="signature-canvas"></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>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 查看详情 Modal -->
+    <div class="modal" :class="{ show: showViewModal }">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3 class="modal-title">维护记录详情</h3>
+            <button class="close-button" @click="closeViewModal">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>记录编号:</label>
+              <div class="form-value">{{ currentRecord.no }}</div>
+            </div>
+            <div class="form-group">
+              <label>维护物资:</label>
+              <div class="form-value">{{ currentRecord.stocks_item_name }}</div>
+            </div>
+            <div class="form-group">
+              <label>计划维护日期:</label>
+              <div class="form-value">{{ currentRecord.planned_maintenance_date }}</div>
+            </div>
+            <div class="form-group">
+              <label>实际维护日期:</label>
+              <div class="form-value">{{ currentRecord.maintenance_date || '-' }}</div>
+            </div>
+            <div class="form-group">
+              <label>负责人:</label>
+              <div class="form-value">{{ currentRecord.responsible_admin_name }}</div>
+            </div>
+            <div class="form-group">
+              <label>状态:</label>
+              <div class="form-value">{{ getStatusText(currentRecord.status) }}</div>
+            </div>
+            <div class="form-group">
+              <label>维护备注:</label>
+              <div class="form-value">{{ currentRecord.maintenance_notes || '-' }}</div>
+            </div>
+            <div class="form-group">
+              <label>维护照片:</label>
+              <div class="photo-gallery" v-if="currentRecord.files && currentRecord.files.length">
+                <img
+                  v-for="(file, idx) in currentRecord.files"
+                  :key="'file-' + idx"
+                  :src="file.url"
+                  class="photo-preview"
+                  @click="previewImage(file.url)"
+                  style="cursor:pointer;"
+                  alt="维护图片"
+                />
+              </div>
+              <div class="form-value" v-else>-</div>
+            </div>
+            <div class="form-group">
+              <label>签名照片:</label>
+              <div class="photo-gallery" v-if="currentRecord.sign && currentRecord.sign.url">
+                <img
+                  :src="currentRecord.sign.url"
+                  class="sign-preview"
+                  @click="previewImage(currentRecord.sign.url)"
+                  style="cursor:pointer;"
+                  alt="签名图片"
+                />
+              </div>
+              <div class="form-value" v-else>-</div>
+            </div>
+          </div>
+          <div class="modal-footer" style="justify-content: center;">
+            <Button @click="closeViewModal">关闭</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预览弹窗 -->
+    <div v-if="previewUrl" class="image-preview-modal" @click="closePreview">
+      <img :src="previewUrl" class="image-preview-large" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Select, Option, DatePicker, Input, Form, FormItem, Upload, Icon } from 'view-design';
+import { getOperationList, saveOperation, getOperationDetail } from '@/api/maintenance/maintenance';
+
+export default {
+  components: {
+    Button,
+    Select,
+    Option,
+    DatePicker,
+    Input,
+    Form,
+    FormItem,
+    Upload,
+    Icon
+  },
+  data() {
+    return {
+      baseUrl: process.env.VUE_APP_BASE_API || window.location.origin + '/',
+      select: {
+        page: 1,
+        page_size: 10,
+        warehouse: '',
+        status: '',
+        date_start: '',
+        date_end: '',
+        keyword: ''
+      },
+      stats: {
+        total: 0,
+        pending: 0,
+        completed: 0
+      },
+      list: [],
+      showModal: false,
+      showViewModal: false,
+      currentRecord: {},
+      form: {
+        actual_date: '',
+        notes: '',
+        photos: []
+      },
+      formRules: {
+        actual_date: [
+          { 
+            required: true, 
+            message: '请选择实际维护日期', 
+            trigger: 'blur',
+            validator: (rule, value, callback) => {
+              if (!value) {
+                callback(new Error('请选择实际维护日期'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ],
+        notes: [],
+        photos: [
+          { 
+            required: true, 
+            type: 'array', 
+            min: 1, 
+            message: '请上传维护图片', 
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (!value || value.length === 0) {
+                callback(new Error('请上传维护图片'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ],
+        signature: [
+          { 
+            required: true, 
+            message: '请签名', 
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+              if (!this.getSignatureDataUrl()) {
+                callback(new Error('请签名'));
+              } else {
+                callback();
+              }
+            }
+          }
+        ]
+      },
+      currentUser: '张三',
+      total: 0,
+      tableHeight: 550,
+      previewUrl: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.calcTableHeight();
+    window.addEventListener('resize', this.calcTableHeight);
+    this.initSignaturePad();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcTableHeight);
+  },
+  methods: {
+    async getList() {
+      try {
+        const params = {
+          page: this.select.page,
+          page_size: this.select.page_size,
+          warehouse: this.select.warehouse,
+          status: this.select.status,
+          date_start: this.select.date_start,
+          date_end: this.select.date_end,
+          keyword: this.select.keyword
+        };
+        const res = await getOperationList(params);
+        if (res && res.list) {
+          this.list = res.list.data;
+          this.total = res.list.total;
+          this.stats = {
+            total: res.chart.total,
+            pending: res.chart.wait,
+            completed: res.chart.done
+          };
+        }
+      } catch (e) {
+        this.$message.error('获取维护记录失败');
+      }
+    },
+    resetSearch() {
+      this.select = {
+        page: 1,
+        page_size: 10,
+        warehouse: '',
+        status: '',
+        date_start: '',
+        date_end: '',
+        keyword: ''
+      }
+      this.getList()
+    },
+    pageChange(e) {
+      this.select.page = e
+      this.getList()
+    },
+    pageSizeChange(e) {
+      this.select.page_size = e
+      this.getList()
+    },
+    calcTableHeight() {
+      const header = this.$refs.lxHeader ? this.$refs.lxHeader.offsetHeight : 0;
+      const windowHeight = window.innerHeight;
+      const minTableHeight = 600;
+      this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
+    },
+    getDateDifferenceInDays(dateString) {
+      const plannedDate = new Date(dateString);
+      const today = new Date();
+      
+      // 设置时间为当天的 00:00:00
+      today.setHours(0, 0, 0, 0);
+      plannedDate.setHours(0, 0, 0, 0);
+      
+      // 计算日期差值（毫秒）
+      const diffTime = plannedDate - today;
+      
+      // 转换为天数
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      
+      return diffDays;
+    },
+    async viewDetail(item) {
+      try {
+        // 1. 调用接口获取详情
+        const detail = await getOperationDetail({ id: item.id });
+        // 2. 预处理二级字段为一级
+        this.currentRecord = {
+          ...detail,
+          stocks_item_name: detail.stocks_item?.zichanmingcheng || '-',
+          responsible_admin_name: detail.responsible_admin?.name || '-'
+        };
+        // 3. 打开查看窗口
+        this.showViewModal = true;
+      } catch (e) {
+        this.$message.error('获取维护详情失败');
+      }
+    },
+    completeMaintenance(item) {
+      this.showModal = true;
+      this.currentRecord = { ...item };
+      this.form = {
+        actual_date: new Date().toISOString().split('T')[0],
+        notes: '',
+        photos: []
+      };
+      this.$nextTick(() => {
+        if (this.$refs.maintenanceForm) {
+          this.$refs.maintenanceForm.resetFields();
+        }
+      });
+    },
+    closeModal() {
+      this.showModal = false
+      this.form = {
+        actual_date: '',
+        notes: '',
+        photos: []
+      }
+    },
+    handleBeforeUpload(file) {
+      // 处理上传前的逻辑
+      return true; // 返回true表示允许上传
+    },
+    handleUploadSuccess(response, file) {
+      // 假设 response.id 是图片id，response.url 是图片地址
+      this.form.photos.push({ id: response.id, url: response.url });
+    },
+    handleUploadError(error, file) {
+      // 处理上传错误后的逻辑
+      this.$message.error('上传图片失败');
+    },
+    handleRemove(file) {
+      // file.url 是图片地址，找到并移除对应的图片对象
+      const index = this.form.photos.findIndex(photo => photo.url === file.url);
+      if (index !== -1) {
+        this.form.photos.splice(index, 1);
+      }
+    },
+    async submitMaintenance() {
+      try {
+        this.$refs.maintenanceForm.validate(async (valid) => {
+          if (valid) {
+            // 1. 先将签名canvas转为图片并上传，拿到sign_id
+            const signatureDataUrl = this.getSignatureDataUrl();
+            let sign_id = '';
+            if (signatureDataUrl) {
+              // 将base64转为Blob
+              const blob = this.dataURLtoBlob(signatureDataUrl);
+              const formData = new FormData();
+              formData.append('file', blob, 'signature.png');
+              // 调用上传接口
+              const res = await this.$axios.post(this.baseUrl + 'api/admin/upload-file', formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+              });
+              sign_id = res.data?.id || res.id;
+            }
+            // 2. 组装参数并提交
+            const params = {
+              id: this.currentRecord.id,
+              maintenance_date: this.formatDate(this.form.actual_date),
+              maintenance_content: this.form.notes,
+              file_ids: this.form.photos.map(photo => photo.id),
+              sign_id: sign_id,
+              status: 1
+            };
+            await saveOperation(params);
+            this.closeModal();
+            this.getList();
+          }
+        });
+      } catch (e) {
+        this.$message.error('提交维护记录失败');
+      }
+    },
+    formatDate(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    dataURLtoBlob(dataurl) {
+      // 将base64图片转为Blob对象
+      const arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]);
+      let n = bstr.length, u8arr = new Uint8Array(n);
+      while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], {type:mime});
+    },
+    getBadgeClass(planDate) {
+      const diffDays = this.getDateDifferenceInDays(planDate);
+      return diffDays >= 0 ? 'badge-blue' : 'badge-red';
+    },
+    getBadgeText(planDate) {
+      const diffDays = this.getDateDifferenceInDays(planDate);
+      return diffDays >= 0 ? `还有 ${diffDays} 天` : `已超期 ${Math.abs(diffDays)} 天`;
+    },
+    getStatusText(status) {
+      const statusMap = {
+        '0': '待处理',
+        '1': '已完成'
+      };
+      return statusMap[status] || '未知状态';
+    },
+    closeViewModal() {
+      this.showViewModal = false;
+      this.currentRecord = {};
+    },
+    initSignaturePad() {
+      const canvas = this.$refs.signaturePad;
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      // 适配高分屏
+      const dpr = window.devicePixelRatio || 1;
+      const container = canvas.parentNode;
+      const displayWidth = container.offsetWidth || 400;
+      canvas.width = displayWidth * dpr;
+      canvas.height = 120 * dpr;
+      canvas.style.width = displayWidth + 'px';
+      canvas.style.height = '120px';
+      ctx.scale(dpr, dpr);
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      let drawing = false;
+      let lastX = 0, lastY = 0;
+      const getPos = e => {
+        if (e.touches && e.touches.length) {
+          const rect = canvas.getBoundingClientRect();
+          return {
+            x: e.touches[0].clientX - rect.left,
+            y: e.touches[0].clientY - rect.top
+          };
+        } else {
+          const rect = canvas.getBoundingClientRect();
+          return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+          };
+        }
+      };
+      const start = e => {
+        drawing = true;
+        const pos = getPos(e);
+        lastX = pos.x;
+        lastY = pos.y;
+      };
+      const move = e => {
+        if (!drawing) return;
+        const pos = getPos(e);
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+        lastX = pos.x;
+        lastY = pos.y;
+      };
+      const end = () => { drawing = false; };
+      canvas.addEventListener('mousedown', start);
+      canvas.addEventListener('mousemove', move);
+      canvas.addEventListener('mouseup', end);
+      canvas.addEventListener('mouseleave', end);
+      canvas.addEventListener('touchstart', start);
+      canvas.addEventListener('touchmove', move);
+      canvas.addEventListener('touchend', end);
+      this.signaturePadCtx = ctx;
+      this.signaturePadCanvas = canvas;
+    },
+    clearSignature() {
+      if (this.signaturePadCtx && this.signaturePadCanvas) {
+        this.signaturePadCtx.clearRect(0, 0, this.signaturePadCanvas.width, this.signaturePadCanvas.height);
+      }
+    },
+    getSignatureDataUrl() {
+      if (this.signaturePadCanvas) {
+        return this.signaturePadCanvas.toDataURL('image/png');
+      }
+      return '';
+    },
+    previewImage(url) {
+      this.previewUrl = url;
+    },
+    closePreview() {
+      this.previewUrl = '';
+    }
+  },
+  watch: {
+    showModal(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.initSignaturePad();
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.table-page-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
+}
+
+.page-header {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.content-wrapper {
+  background: #f4f6fa !important;
+  border-radius: 10px;
+  border: 1.5px solid #e0e3e8 !important;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  padding: 20px;
+  margin-top: 10px;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.search-item span {
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.search-item .ivu-select,
+.search-item .ivu-date-picker,
+.search-item .ivu-input {
+  margin-right: 8px;
+}
+
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.card-item {
+  background-color: #fff;
+  padding: 15px 20px;
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+  text-align: center;
+  border-left: 4px solid grey;
+}
+
+.card-item.total { border-left-color: #1890ff; }
+.card-item.pending { border-left-color: #faad14; }
+.card-item.completed { border-left-color: #52c41a; }
+
+.card-label {
+  font-size: 0.9rem;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.card-value {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.table-flex-content {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: calc(100vh - 280px);
+}
+
+.el-table {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 10px;
+}
+
+.el-table__body-wrapper {
+  height: calc(100% - 40px);
+  overflow-y: auto;
+}
+
+.el-table__header-wrapper {
+  height: 40px;
+}
+
+.el-table td {
+  font-size: 14px;
+  padding: 12px 0;
+}
+
+.el-table th {
+  background: #f5f7fa !important;
+  color: #333;
+  font-weight: bold;
+  font-size: 15px;
+  padding: 12px 0;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+}
+
+.badge-blue {
+  background-color: #2d8cf0;
+}
+
+.badge-red {
+  background-color: #ed4014;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1050;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.5);
+  align-items: center;
+  justify-content: center;
+}
+
+.modal.show {
+  display: flex;
+}
+
+.modal-dialog {
+  position: relative;
+  margin: auto;
+  pointer-events: none;
+  max-width: 900px;
+  width: 90%;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background: #f7f9fa !important;
+  background-clip: padding-box;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
+  border: 2px solid #e0e3e8 !important;
+  outline: 0;
+}
+
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.2rem 1.5rem;
+  background: #f5f7fa;
+  border-bottom: 1px solid #eaeaea;
+  border-radius: 12px 12px 0 0;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  line-height: 1.5;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #222;
+}
+
+.close-button {
+  padding: 1rem 1rem;
+  margin: -1rem -1rem -1rem auto;
+  background-color: transparent;
+  border: 0;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #888;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.7;
+  cursor: pointer;
+  transition: color 0.2s, opacity 0.2s;
+}
+
+.close-button:hover {
+  color: #ed4014;
+  opacity: 1;
+}
+
+.modal-body {
+  background: #fcfcfd;
+  padding: 2rem 1.5rem 1.5rem 1.5rem;
+  border-radius: 0 0 12px 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 32px;
+}
+
+.form-group {
+  background: #fff !important;
+  border: 1.5px solid #e0e3e8 !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.form-group label {
+  color: #888;
+  font-size: 0.98rem;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.form-group input[type="date"],
+.form-group textarea,
+.form-group input[type="file"] {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff !important;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input[type="file"] {
+  padding: 0.3rem 0.75rem;
+}
+
+.form-text {
+  font-size: 0.8rem;
+  color: #6c757d;
+}
+
+.signature-area {
+  width: 100%;
+  min-width: 0;
+}
+.signature-pad-wrapper {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.signature-canvas {
+  border: 1px dashed #ced4da;
+  background: #fff;
+  border-radius: 4px;
+  width: 100%;
+  height: 120px;
+  cursor: crosshair;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+.form-value {
+  color: #222;
+  font-size: 1.08rem;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  min-height: 32px;
+  padding: 0;
+}
+
+.photo-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 8px;
+  margin-top: 4px;
+}
+
+.photo-preview {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1.5px solid #eaeaea;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.photo-preview:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #f0f0f0;
+  height: 50px;
+}
+
+.el-pagination {
+  padding: 0;
+  font-weight: normal;
+  height: 32px;
+  line-height: 32px;
+  .el-pagination__sizes {
+    margin-right: 16px;
+  }
+  .el-pagination__jump {
+    margin-left: 16px;
+  }
+  .el-pagination__total {
+    margin-right: 16px;
+  }
+  .btn-prev,
+  .btn-next {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    height: 32px;
+    line-height: 32px;
+    &:hover {
+      color: #409eff;
+    }
+  }
+  .el-pager li {
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    height: 32px;
+    line-height: 32px;
+    &:hover {
+      color: #409eff;
+    }
+    &.active {
+      background-color: #409eff;
+      color: #fff;
+      border-color: #409eff;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .modal-dialog {
+    max-width: 98vw;
+  }
+  .modal-body {
+    padding: 1rem 0.5rem 1rem 0.5rem;
+    grid-template-columns: 1fr;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0.75rem;
+  border-top: 1px solid #dee2e6;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
+  gap: 0.5rem;
+}
+
+.image-preview-modal {
+  position: fixed;
+  z-index: 2000;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-preview-large {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+  background: #fff;
+}
+
+.sign-preview {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1.5px solid #eaeaea;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  margin-top: 4px;
+  cursor: pointer;
+  background: #fff;
+}
+
+/* 分割线 */
+hr {
+  border: none;
+  border-top: 1.5px solid #e0e3e8;
+  margin: 16px 0;
+}
+
+.ivu-input, .ivu-select, .ivu-date-picker, .ivu-btn, .el-table {
+  border-color: #bfc8d6 !important;
+  background: #fff !important;
+}
+
+.ivu-btn-primary, .el-button--primary {
+  background: #2d8cf0 !important;
+  border-color: #2d8cf0 !important;
+  color: #fff !important;
+}
+
+/* 主色条 */
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.2rem 1.5rem;
+  background: #f5f7fa;
+  border-bottom: 1px solid #eaeaea;
+  border-radius: 12px 12px 0 0;
+}
+
+/* 分割线 */
+hr {
+  border: none;
+  border-top: 1.5px solid #e0e3e8;
+  margin: 16px 0;
+}
+</style>
diff --git a/src/views/maintenance/maintenance_rules.vue b/src/views/maintenance/maintenance_rules.vue
new file mode 100644
index 0000000..ee9ef36
--- /dev/null
+++ b/src/views/maintenance/maintenance_rules.vue
@@ -0,0 +1,783 @@
+<template>
+  <div class="table-page-container">
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="维护规则" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <slot>
+          <div style="display: flex;justify-content: flex-end;flex-wrap: wrap;">
+            <Button type="primary" @click="showAddRuleModal">新增规则</Button>
+          </div>
+        </slot>
+      </lx-header>
+    </div>
+
+    <div class="table-flex-content">
+      <xy-table :list="list" :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
+        :table-item="table" size="medium" :height="tableHeight" style="border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08); width: 100%;">
+        <template v-slot:btns>
+          <el-table-column label="操作" align="center" min-width="200" header-align="center" class-name="table-col-action">
+            <template slot-scope="scope">
+              <div style="display: flex; gap: 8px; justify-content: center;">
+                <Button type="primary" size="small" style="border-radius: 6px;" @click="handleEdit(scope.row)">编辑</Button>
+                <Button type="primary" size="small" style="border-radius: 6px;" ghost @click="handleDelete(scope.row)">删除</Button>
+                <Button type="primary" size="small" style="border-radius: 6px;" ghost @click="handleAssociate(scope.row)">关联物资</Button>
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+      </xy-table>
+    </div>
+
+    <!-- 新增规则 Modal -->
+    <Modal v-model="showModal" title="新增维护规则" :footer="null" @on-cancel="handleCancel">
+      <Form ref="form" :model="form" :rules="rules" :label-width="120">
+        <FormItem label="规则名称" prop="name">
+          <Input v-model="form.name" placeholder="请输入规则名称"></Input>
+        </FormItem>
+        <FormItem label="重复周期" prop="cycle">
+          <Select v-model="form.cycle">
+            <Option v-for="item in cycleOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="起始日期设定" prop="startSetting">
+          <Select v-model="form.startSetting">
+            <Option v-for="item in startStandardOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="生成计划时机" prop="timing">
+          <div class="timing-controls">
+            <Select v-model="form.timingUnit" style="width: 80px">
+              <Option value="days">提前</Option>
+            </Select>
+            <InputNumber v-model="form.timingValue" :min="1" style="width: 80px"></InputNumber>
+            <Select v-model="form.timingPeriod" style="width: 80px">
+              <Option value="days">天</Option>
+            </Select>
+          </div>
+        </FormItem>
+        <FormItem label="未完成时下次计划" prop="nextPlan">
+          <Select v-model="form.nextPlan">
+            <Option v-for="item in nextPlanOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="备注" prop="notes">
+          <Input v-model="form.notes" type="textarea" :rows="3" placeholder="请输入备注"></Input>
+        </FormItem>
+      </Form>
+      <div slot="footer" style="text-align: right;">
+        <Button @click="handleCancel">取消</Button>
+        <Button type="primary" @click="handleCustomSubmit" style="margin-left: 8px;">确定</Button>
+      </div>
+    </Modal>
+
+    <!-- 编辑规则 Modal -->
+    <Modal v-model="showEditModal" title="编辑维护规则" @on-ok="handleEditSubmit" @on-cancel="handleEditCancel">
+      <Form ref="editForm" :model="editForm" :rules="rules" :label-width="120">
+        <FormItem label="规则名称" prop="name">
+          <Input v-model="editForm.name" placeholder="请输入规则名称"></Input>
+        </FormItem>
+        <FormItem label="重复周期" prop="cycle">
+          <Select v-model="editForm.cycle">
+            <Option v-for="item in cycleOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="起始日期设定" prop="startSetting">
+          <Select v-model="editForm.startSetting">
+            <Option v-for="item in startStandardOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="生成计划时机" prop="timing">
+          <div class="timing-controls">
+            <Select v-model="editForm.timingUnit" style="width: 80px">
+              <Option value="days">提前</Option>
+            </Select>
+            <InputNumber v-model="editForm.timingValue" :min="1" style="width: 80px"></InputNumber>
+            <Select v-model="editForm.timingPeriod" style="width: 80px">
+              <Option value="days">天</Option>
+            </Select>
+          </div>
+        </FormItem>
+        <FormItem label="未完成时下次计划" prop="nextPlan">
+          <Select v-model="editForm.nextPlan">
+            <Option v-for="item in nextPlanOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="备注" prop="notes">
+          <Input v-model="editForm.notes" type="textarea" :rows="3" placeholder="请输入备注"></Input>
+        </FormItem>
+      </Form>
+    </Modal>
+
+    <!-- 关联物资 Modal -->
+    <Modal v-model="showAssociateModal" title="关联物资" @on-ok="handleAssociateSubmit" @on-cancel="handleAssociateCancel" width="1000">
+      <div class="associate-content">
+        <div class="associate-toolbar">
+          <Input v-model="associateSearch" placeholder="搜索物资名称..." style="width: 250px; margin-right: 10px;" clearable></Input>
+          <Select v-model="select.storehouses_id" @on-change="getWarehouseNames" style="width: 120px; margin-right: 10px;" clearable placeholder="仓库类型">
+            <Option v-for="item in warehouseTypes" :key="item.id" :value="item.id">{{ item.name }}</Option>
+          </Select>
+          <Select v-model="select.area" @on-change="getWarehouseNames" style="width: 120px; margin-right: 10px;" clearable placeholder="所在区域">
+            <Option v-for="item in warehouseAreas" :key="item.id" :value="item.value">{{ item.value }}</Option>
+          </Select>
+          <Select v-model="associateWarehouseName" 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="searchMaterialsPost">搜索</Button>
+          <Button style="margin-left: 8px;" @click="resetAssociateSearch">重置</Button>
+        </div>
+        <Table :columns="associateColumns" :data="associateList" :height="400" style="margin-top: 15px;">
+          <template slot-scope="{ row }" slot="action">
+            <div style="display: flex; gap: 8px; justify-content: center;">
+              <Button 
+                v-if="row.equipment_maintain_config && row.equipment_maintain_config.id === currentRule.id"
+                type="error" 
+                size="small" 
+                style="border-radius: 6px;" 
+                @click="toggleAssociation(row)"
+                :title="row.equipment_maintain_config ? `已关联规则: ${row.equipment_maintain_config.name}` : ''"
+              >
+                解除绑定
+              </Button>
+              <Button 
+                v-else-if="row.equipment_maintain_config"
+                type="warning" 
+                size="small" 
+                style="border-radius: 6px;" 
+                @click="toggleAssociation(row)"
+                :title="row.equipment_maintain_config ? `已关联规则: ${row.equipment_maintain_config.name}` : ''"
+              >
+                重新绑定
+              </Button>
+              <Button 
+                v-else
+                type="primary" 
+                size="small" 
+                style="border-radius: 6px;" 
+                @click="toggleAssociation(row)"
+              >
+                绑定
+              </Button>
+            </div>
+          </template>
+        </Table>
+        <div class="pagination-container">
+          <el-pagination
+            @size-change="handleAssociatePageSizeChange"
+            @current-change="handleAssociatePageChange"
+            :current-page="associateCurrentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="associatePageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="associateTotal"
+          />
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { Button, Modal, Form, FormItem, Input, Select, Option, InputNumber, Table, Checkbox, Page } from 'view-design';
+import { getStorehouseTypeList } from '@/api/system/storehouseType';
+import { getparameteritem } from "@/api/system/dictionary.js";
+import { index } from "@/api/system/baseForm.js";
+import { saveMaintainConfig, getMaintainConfigList, deleteMaintainConfig } from '@/api/maintenance/maintenance.js';
+import { saveStocksItem } from '@/api/stocks-item.js';
+import request from '@/utils/request';
+import qs from 'qs';
+
+export default {
+  components: {
+    Button,
+    Modal,
+    Form,
+    FormItem,
+    Input,
+    Select,
+    Option,
+    InputNumber,
+    Table,
+    Checkbox,
+    Page
+  },
+  data() {
+    return {
+      select: {
+        page: 1,
+        page_size: 999,
+        keyword: '',
+        table_name: 'materialstorages',
+        area: '',
+        storehouses_id: ''
+      },
+      total: 0,
+      list: [],
+      cycleOptions: [
+        { value: '1', label: '每月' },
+        { value: '3', label: '每季度' },
+        { value: '6', label: '每半年' },
+        { value: '12', label: '每年' }
+      ],
+      startStandardOptions: [
+        { value: '1', label: '从每年第一天开始运算' },
+        { value: '2', label: '首次关联物资时' }
+      ],
+      nextPlanOptions: [
+        { value: '1', label: '暂停生成（直到上次计划已经执行完成）' },
+        { value: '2', label: '强制生成（忽略未完成状态）' }
+      ],
+      table: [
+        { label: '序号', type: 'index', width: 60 },
+        { label: '规则名称', prop: 'name', minWidth: 160 },
+        { label: '重复周期', prop: 'month_frequency', minWidth: 120, formatter: row => this.cycleOptions.find(opt => opt.value == row.month_frequency)?.label || row.month_frequency },
+        { label: '起始日期设定', prop: 'start_standard', minWidth: 160, formatter: row => this.startStandardOptions.find(opt => opt.value == row.start_standard)?.label || row.start_standard },
+        { label: '生成计划时机(天)', prop: 'advance_days', minWidth: 120 },
+        { label: '已用于物资数', prop: 'stocks_items_count', minWidth: 120 },
+        { label: '未完成时下次计划', prop: 'next_plan_type', minWidth: 160, formatter: row => this.nextPlanOptions.find(opt => opt.value == row.next_plan_type)?.label || row.next_plan_type },
+      ],
+      tableHeight: 550,
+      showModal: false,
+      showEditModal: false,
+      showAssociateModal: false,
+      form: {
+        name: '',
+        cycle: '',
+        startSetting: '',
+        timingUnit: 'days',
+        timingValue: 7,
+        timingPeriod: 'days',
+        nextPlan: '',
+        notes: ''
+      },
+      editForm: {
+        name: '',
+        cycle: '',
+        startSetting: '',
+        timingUnit: 'days',
+        timingValue: 7,
+        timingPeriod: 'days',
+        nextPlan: '',
+        notes: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
+        cycle: [{ required: true, message: '请选择重复周期', trigger: 'change' }],
+        startSetting: [{ required: true, message: '请选择起始日期设定', trigger: 'change' }],
+        nextPlan: [{ required: true, message: '请选择未完成时下次计划', trigger: 'change' }]
+      },
+      associateSearch: '',
+      associateWarehouseName: '',
+      associatePageSize: 100,
+      associateCurrentPage: 1,
+      associateTotal: 0,
+      associateColumns: [
+        {
+          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: 200,
+          fixed: 'right',
+          align: 'center',
+          headerAlign: 'center',
+          className: 'table-col-action'
+        }
+      ],
+      associateList: [],
+      currentRule: null,
+      ruleAssociations: new Map(),
+      warehouseTypes: [],
+      warehouseAreas: [],
+      warehouseNames: [],
+      allWarehouses: [],
+      currentWarehouseNames: []
+    }
+  },
+  created() {
+    this.getList();
+    this.getWarehouseTypes();
+    this.getWarehouseAreas();
+    this.getWarehouseNames();
+  },
+  mounted() {
+    this.calcTableHeight();
+    window.addEventListener('resize', this.calcTableHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcTableHeight);
+  },
+  watch: {
+    associateWarehouseArea(val) {
+      if (val) {
+        this.getWarehouseNames(val);
+      } else {
+        this.warehouseNames = [];
+      }
+    }
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await getMaintainConfigList({
+          page: this.select.page,
+          page_size: this.select.page_size,
+          // 可加其它筛选参数
+        });
+        if (res && res.data) {
+          this.list = res.data;
+          this.total = res.total;
+        }
+      } catch (e) {
+        this.$message.error('获取运维规则列表失败');
+      }
+    },
+    pageChange(e) {
+      this.select.page = e
+      this.getList()
+    },
+    pageSizeChange(e) {
+      this.select.page_size = e
+      this.getList()
+    },
+    calcTableHeight() {
+      const header = this.$refs.lxHeader ? this.$refs.lxHeader.offsetHeight : 0;
+      const windowHeight = window.innerHeight;
+      const minTableHeight = 600;
+      this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
+    },
+    showAddRuleModal() {
+      this.form = {
+        name: '',
+        cycle: '',
+        startSetting: '',
+        timingUnit: 'days',
+        timingValue: 7,
+        timingPeriod: 'days',
+        nextPlan: '',
+        notes: ''
+      };
+      this.showModal = true;
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.resetFields();
+        }
+      });
+    },
+    handleCancel() {
+      this.showModal = false;
+      this.$refs.form.resetFields();
+    },
+    handleEdit(row) {
+      this.currentRule = row;
+      this.editForm = {
+        name: row.name,
+        cycle: String(row.month_frequency),
+        startSetting: String(row.start_standard),
+        timingUnit: 'days',
+        timingValue: row.advance_days,
+        timingPeriod: 'days',
+        nextPlan: String(row.next_plan_type),
+        notes: row.remark || ''
+      };
+      this.showEditModal = true;
+    },
+    handleEditSubmit() {
+      this.$refs.editForm.validate((valid) => {
+        if (valid) {
+          // TODO: 提交编辑表单数据
+          this.$message.success('编辑成功');
+          this.showEditModal = false;
+          this.getList();
+        }
+      });
+    },
+    handleEditCancel() {
+      this.showEditModal = false;
+      this.$refs.editForm.resetFields();
+    },
+    handleDelete(row) {
+      this.currentRule = row;
+      this.$confirm('确认要删除该维护规则吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await deleteMaintainConfig({ id: this.currentRule.id });
+          this.$message.success('删除成功');
+          this.getList();
+        } catch (e) {
+          this.$message.error('删除失败');
+        }
+      });
+    },
+    handleAssociate(row) {
+      this.currentRule = row;
+      // 重置弹窗相关数据
+      this.associateSearch = '';
+      this.select.storehouses_id = '';
+      this.select.area = '';
+      this.associateWarehouseName = '';
+      this.associateCurrentPage = 1;
+      // 先关闭再打开，确保弹窗能弹出
+      this.showAssociateModal = false;
+      this.$nextTick(() => {
+        this.showAssociateModal = true;
+        this.loadAssociations();
+        this.searchMaterialsPost();
+      });
+    },
+    loadAssociations() {
+      // Load saved associations from localStorage
+      const saved = localStorage.getItem('ruleAssociations');
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        Object.entries(parsed).forEach(([ruleId, materials]) => {
+          this.ruleAssociations.set(ruleId, new Set(materials));
+        });
+      }
+    },
+    saveAssociations() {
+      const serialized = {};
+      this.ruleAssociations.forEach((materials, ruleId) => {
+        serialized[ruleId] = Array.from(materials);
+      });
+      localStorage.setItem('ruleAssociations', JSON.stringify(serialized));
+    },
+    async searchMaterialsPost() {
+      try {
+        const data = {
+          page_size: this.associatePageSize,
+          page: this.associateCurrentPage,
+          'show_relation[0]': 'equipmentMaintainConfig',
+          'show_relation[1]': 'materialInfo.materialstorage',
+          
+          'materialstorages_cangkumingcheng': this.associateWarehouseName ? this.associateWarehouseName : '',
+          '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.associateSearch ? this.associateSearch : '',
+
+
+          'filter[1][key]': 'wuzileixing',
+          'filter[1][op]': 'eq',
+          'filter[1][value]': '一物一码'
+        };
+        const res = await request({
+          url: '/api/admin/stocks-item/index',
+          method: 'post',
+          data: qs.stringify(data),
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+          }
+        });
+        if (res && res.data) {
+          this.associateList = res.data.map(material => ({
+            ...material,
+            selected: this.ruleAssociations.get(this.currentRule.id)?.has(material.id) || false
+          }));
+          this.associateTotal = res.total;
+        }
+      } catch (e) {
+        console.error('获取防汛物资列表失败:', e);
+        this.$message.error('获取防汛物资列表失败');
+      }
+    },
+    async toggleAssociation(row) {
+      if (!this.currentRule) return;
+
+      if (row.equipment_maintain_config?.id === this.currentRule.id) {
+        // 解除绑定
+        try {
+          await saveStocksItem({
+            id: row.id,
+            equipment_maintain_config_id: null
+          });
+          this.$message.success(`已解除绑定物资"${row.material_info.suozaicangku}"`);
+          this.searchMaterialsPost();
+        } catch (e) {
+          this.$message.error('解除绑定失败');
+        }
+      } else {
+        // 绑定
+        try {
+          await saveStocksItem({
+            id: row.id,
+            equipment_maintain_config_id: this.currentRule.id
+          });
+          this.$message.success(`已成功绑定物资"${row.material_info.suozaicangku}"`);
+          this.searchMaterialsPost();
+        } catch (e) {
+          this.$message.error('绑定失败');
+        }
+      }
+    },
+    updateMaterialCount() {
+      const count = this.ruleAssociations.get(this.currentRule.id)?.size || 0;
+      const index = this.list.findIndex(item => item.id === this.currentRule.id);
+      if (index !== -1) {
+        this.$set(this.list[index], 'materialCount', count);
+      }
+    },
+    handleAssociatePageChange(page) {
+      this.associateCurrentPage = page;
+      this.searchMaterialsPost();
+    },
+    handleAssociateSubmit() {
+      this.showAssociateModal = false;
+      this.getList();
+    },
+    handleAssociateCancel() {
+      this.showAssociateModal = false;
+    },
+    handleAssociatePageSizeChange(size) {
+      this.associatePageSize = size;
+      this.associateCurrentPage = 1;
+      this.searchMaterialsPost();
+    },
+    resetAssociateSearch() {
+      this.associateSearch = '';
+      this.select.storehouses_id = '';
+      this.select.area = '';
+      this.associateWarehouseName = '';
+      this.associateCurrentPage = 1;
+      this.searchMaterialsPost();
+    },
+    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: this.select.table_name,
+          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('获取仓库名称列表失败');
+      }
+    },
+    
+    clearArea(e) {
+      this.select.area = e || '';
+      this.getWarehouseNames();
+    },
+    
+    clearType(e) {
+      this.select.storehouses_id = e || '';
+      this.getWarehouseNames();
+    },
+    async getAllWarehouses() {
+      try {
+        const formData = new FormData();
+        formData.append('page', 1);
+        formData.append('page_size', 999);
+        formData.append('table_name', 'materialstorages');
+        
+        const res = await index(formData);
+        if (res && res.data) {
+          this.allWarehouses = res.data;
+          this.filterWarehouses();
+        }
+      } catch (e) {
+        console.error('获取仓库列表失败:', e);
+        this.$message.error('获取仓库列表失败');
+      }
+    },
+    
+    filterWarehouses() {
+      let filtered = [...this.allWarehouses];
+      
+      // 按仓库类型筛选
+      if (this.select.storehouses_id) {
+        filtered = filtered.filter(warehouse => 
+          warehouse.storehouses_id === this.select.storehouses_id
+        );
+      }
+      
+      // 按区域筛选
+      if (this.select.area) {
+        filtered = filtered.filter(warehouse => 
+          warehouse.quyu_id === this.select.area
+        );
+      }
+      
+      // 更新仓库名称列表
+      this.warehouseNames = filtered.map(warehouse => ({
+        value: warehouse.id,
+        label: warehouse.cangkumingcheng
+      }));
+    },
+    
+    clearArea(e) {
+      this.select.area = e || '';
+      this.filterWarehouses();
+    },
+    
+    clearType(e) {
+      this.select.storehouses_id = e || '';
+      this.filterWarehouses();
+    },
+    async handleCustomSubmit() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          const data = {
+            name: this.form.name,
+            month_frequency: this.form.cycle,
+            start_standard: this.form.startSetting,
+            advance_days: this.form.timingValue,
+            next_plan_type: this.form.nextPlan,
+            remark: this.form.notes,
+            equipment_maintain_config_stocks_items: this.selectedMaterialIds?.map(id => [ { stocks_item_id: id } ]) || []
+          };
+          try {
+            await saveMaintainConfig(data);
+            this.$message.success('保存成功');
+            this.showModal = false;
+            this.getList();
+          } catch (e) {
+            this.$message.error('保存失败');
+          }
+        } else {
+          this.$message.error('请填写所有必填项');
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style>
+.table-page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  box-sizing: border-box;
+  background: #f5f7fa;
+}
+.table-flex-content {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.el-table th {
+  background: #f5f7fa !important;
+  color: #333;
+  font-weight: bold;
+  font-size: 15px;
+}
+.el-table td {
+  font-size: 14px;
+  height: 48px;
+}
+.el-table {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.timing-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.associate-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 15px;
+}
+/* 确保加载提示显示在模态框之上 */
+.ivu-message {
+  z-index: 9999 !important;
+}
+.ivu-loading-mask {
+  z-index: 9999 !important;
+}
+.ivu-message-notice {
+  z-index: 9999 !important;
+}
+.ivu-message-notice-content {
+  z-index: 9999 !important;
+}
+.ivu-modal-mask {
+  z-index: 1000 !important;
+}
+.ivu-modal-wrap {
+  z-index: 1000 !important;
+}
+</style>
diff --git a/src/views/storages/components/addFixAssets.vue b/src/views/storages/components/addFixAssets.vue
index 1a70304..ea878ca 100644
--- a/src/views/storages/components/addFixAssets.vue
+++ b/src/views/storages/components/addFixAssets.vue
@@ -49,8 +49,8 @@
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">原值：</div>
           <div class="xy-table-item-content"><el-input-number v-model="form.original_value" style="width:100%;" :min="0" :step="0.01" :precision="2" placeholder="请输入原值" /></div>
-        </div>
-      </div>
+          </div>
+          </div>
       <div class="form-row">
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">使用科室：</div>
@@ -59,8 +59,8 @@
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">保管人：</div>
           <div class="xy-table-item-content"><Input v-model="form.keeper" style="width:100%;" placeholder="请输入保管人" /></div>
-        </div>
-      </div>
+          </div>
+          </div>
       <div class="form-row">
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">存放地点：</div>
@@ -70,12 +70,12 @@
           <div class="xy-table-item-label">所属库：</div>
           <div class="xy-table-item-content"><Input v-model="form.warehouse" style="width:100%;" placeholder="请输入所属库" /></div>
         </div>
-      </div>
+          </div>
       <div class="form-row">
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">使用方向：</div>
           <div class="xy-table-item-content"><Input v-model="form.usage_direction" style="width:100%;" placeholder="请输入使用方向" /></div>
-        </div>
+          </div>
         <div class="xy-table-item type-dialog-item">
           <div class="xy-table-item-label">备注：</div>
           <div class="xy-table-item-content"><Input v-model="form.remark" style="width:100%;" placeholder="请输入备注" /></div>