diff --git a/src/api/system/stocktaking.js b/src/api/system/stocktaking.js
new file mode 100644
index 0000000..b301ff6
--- /dev/null
+++ b/src/api/system/stocktaking.js
@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+// 新建或更新盘点计划
+export function saveStocktakingPlan(data) {
+  return request({
+    url: '/api/admin/material-infos-plan/save',
+    method: 'post',
+    data
+  })
+}
+
+// 获取盘点计划列表
+export function getStocktakingPlanList(data) {
+  return request({
+    url: '/api/admin/material-infos-plan/index',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+}
+
+// 删除盘点计划
+export function deleteStocktakingPlan(params) {
+  return request({
+    url: '/api/admin/material-infos-plan/destroy',
+    method: 'get',
+    params
+  })
+}
+
+// 获取单个盘点计划详情
+export function getStocktakingPlanDetail(params) {
+  return request({
+    url: '/api/admin/material-infos-plan/show',
+    method: 'get',
+    params
+  })
+}
+
+// 获取盘点计划物资关联列表
+export function getStocktakingPlanLinkList(params) {
+  return request({
+    url: '/api/admin/material-infos-plan-link/index',
+    method: 'get',
+    params
+  })
+}
+
+// 获取物资档案管理列表
+export function getMaterialInfoList(params) {
+  return request({
+    url: '/api/admin/material-infos/index',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 5449bad..f2695bb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -92,7 +92,7 @@ export const constantRoutes = [{
         icon: 'dashboard'
       }
     }, ]
-  }
+  },
 ]
 
 
diff --git a/src/views/inventorys/stocktaking.vue b/src/views/inventorys/stocktaking.vue
index 946f237..2000111 100644
--- a/src/views/inventorys/stocktaking.vue
+++ b/src/views/inventorys/stocktaking.vue
@@ -1,38 +1,37 @@
 <template>
   <div>
-    <!-- 盘点计划 Section -->
-    <div class="content-wrapper">
-      <div class="page-header">
-        <h1 class="page-title">盘点计划</h1>
+        <!-- 盘点计划 Section -->
+        <div class="content-wrapper">
+          <div class="page-header">
+            <h1 class="page-title">盘点计划</h1>
         <Button type="primary" @click="showPlanModal('new')">新建计划</Button>
-      </div>
+          </div>
 
-      <!-- Plan Search Filters -->
-      <div class="search-filters">
-        <div class="filter-item">
+          <!-- 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">
+          <Input v-model="planSearch.keyword" style="width: 180px" :clearable="true" 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">
+          <DatePicker v-model="planSearch.dateRange" type="daterange" split-panels style="width: 200px" :clearable="true"></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 v-model="planSearch.status" style="width: 120px" :clearable="true">
+            <Option value="0">未开始</Option>
+            <Option value="1">进行中</Option>
+            <Option value="2">已完成</Option>
           </Select>
-        </div>
-        <div class="filter-item">
+            </div>
+            <div class="filter-item">
           <Button type="primary" @click="searchPlans">查询</Button>
           <Button style="margin-left: 10px" @click="resetPlanSearch">重置</Button>
-        </div>
-      </div>
+            </div>
+          </div>
 
-      <!-- Plan Table -->
+          <!-- Plan Table -->
       <Table :columns="planColumns" :data="planList" :loading="planLoading">
         <template slot-scope="{ row }" slot="status">
           <Tag :color="getStatusColor(row.status)">{{ getStatusText(row.status) }}</Tag>
@@ -46,8 +45,8 @@
         </template>
       </Table>
 
-      <!-- Plan Pagination -->
-      <div class="pagination-container">
+          <!-- Plan Pagination -->
+          <div class="pagination-container">
         <el-pagination
           @size-change="handlePlanPageSizeChange"
           @current-change="handlePlanPageChange"
@@ -57,44 +56,54 @@
           layout="total, sizes, prev, pager, next, jumper"
           :total="planTotal"
         />
-      </div>
-    </div>
+          </div>
+        </div>
 
-    <!-- 盘点列表 Section -->
+        <!-- 盘点列表 Section -->
     <div class="content-wrapper" style="margin-top: 20px">
-      <div class="page-header">
-        <h1 class="page-title">盘点列表</h1>
-      </div>
+          <div class="page-header">
+            <h1 class="page-title">盘点列表</h1>
+          </div>
 
-      <!-- List Search Filters -->
-      <div class="search-filters">
-        <div class="filter-item">
+          <!-- 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">
+          <Input v-model="listSearch.keyword" :clearable="true" 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>
+          <Select v-model="listSearch.planId" style="width: 180px" :clearable="true">
             <Option v-for="plan in planList" :key="plan.id" :value="plan.id">{{ plan.name }}</Option>
           </Select>
-        </div>
-        <div class="filter-item">
+            </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 v-model="listSearch.status" style="width: 120px" :clearable="true">
+            <Option value="0">未盘点</Option>
+            <Option value="1">已盘点</Option>
           </Select>
-        </div>
-        <div class="filter-item">
+            </div>
+            <div class="filter-item">
           <Button type="primary" @click="searchList">查询</Button>
           <Button style="margin-left: 10px" @click="resetListSearch">重置</Button>
-        </div>
-      </div>
+            </div>
+          </div>
 
-      <!-- Inventory List Table -->
+          <!-- Inventory List Table -->
       <Table :columns="listColumns" :data="inventoryList" :loading="listLoading">
+        <template slot-scope="{ row }" slot="planName">
+          {{ row.material_infos_plan ? row.material_infos_plan.name : '-' }}
+        </template>
+        <template slot-scope="{ row }" slot="area">
+          {{ row.material_info ? row.material_info.suozaicangku : '-' }}
+        </template>
+        <template slot-scope="{ row }" slot="startTime">
+          {{ row.material_infos_plan ? row.material_infos_plan.start_date : '-' }}
+        </template>
+        <template slot-scope="{ row }" slot="endTime">
+          {{ row.material_infos_plan ? row.material_infos_plan.end_date : '-' }}
+        </template>
         <template slot-scope="{ row }" slot="status">
           <Tag :color="getInventoryStatusColor(row.status)">{{ getInventoryStatusText(row.status) }}</Tag>
         </template>
@@ -105,8 +114,8 @@
         </template>
       </Table>
 
-      <!-- List Pagination -->
-      <div class="pagination-container">
+          <!-- List Pagination -->
+          <div class="pagination-container">
         <el-pagination
           @size-change="handleListPageSizeChange"
           @current-change="handleListPageChange"
@@ -120,557 +129,952 @@
     </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">
+    <Modal v-model="planModal.visible" :title="planModal.title">
+      <Form ref="planForm" :model="planModal.form" :rules="planModal.rules" width="80">
         <FormItem label="计划名称" prop="name">
-          <Input v-model="planModal.form.name" placeholder="请输入计划名称" />
+          <Input v-model="planModal.form.name" placeholder="请输入计划名称" :clearable="true"/>
         </FormItem>
         <FormItem label="计划日期" prop="dateRange">
-          <DatePicker v-model="planModal.form.dateRange" type="daterange" split-panels style="width: 100%"></DatePicker>
+          <DatePicker
+            v-model="planModal.form.dateRange"
+            type="daterange"
+            split-panels
+            style="width: 100%"
+            @on-clear="handleDateClear"
+            :clearable="true"
+            :editable="false"
+          />
         </FormItem>
         <FormItem label="备注" prop="remark">
           <Input v-model="planModal.form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
         </FormItem>
       </Form>
+      <template slot="footer">
+        <Button @click="planModal.visible = false">取消</Button>
+        <Button type="primary" @click="handlePlanSubmit">确定</Button>
+      </template>
     </Modal>
 
     <!-- Inventory Selection Modal -->
-    <Modal v-model="materialModal.visible" title="选择盘点物资" width="800">
+    <Modal v-model="materialModal.visible" title="选择盘点物资" width="900">
       <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>
+        <Input v-model="materialModal.keyword" placeholder="物资名称" style="width: 180px; margin-right: 10px;" />
+        <Select v-model="materialModal.storehouses_id" @on-change="onStorehouseTypeChange" clearable placeholder="仓库类型" style="width: 120px; margin-right: 10px;">
+          <Option v-for="item in storehouseTypeOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+        </Select>
+        <Select v-model="materialModal.area" @on-change="onAreaChange" clearable placeholder="所在区域" style="width: 120px; margin-right: 10px;">
+          <Option v-for="item in areaOptions" :key="item.value" :value="item.value">{{ item.value }}</Option>
+        </Select>
+        <Select v-model="materialModal.warehouseName" clearable placeholder="仓库名称" style="width: 140px; margin-right: 10px;">
+          <Option v-for="item in warehouseNameOptions" :key="item.value" :value="item.value">{{ item.label }}</Option>
+        </Select>
+        <Button type="primary" style="margin-left: 10px" @click="searchMaterials">查询</Button>
+        <Button style="margin-left: 10px" @click="resetMaterialSearch">重置</Button>
       </div>
       <Table 
+        ref="materialTable"
         :columns="materialColumns" 
         :data="materialList" 
         :loading="materialModal.loading"
-        @on-selection-change="handleMaterialSelectionChange"
+        @on-select="handleSelect"
+        @on-select-all="handleSelectAll"
+        @on-selection-change="handleSelectionChange"
+        row-key="id"
       >
-        <template slot-scope="{ row }" slot="action">
+        <template slot-scope="{ row, index }" slot="action">
           <div style="display: flex; gap: 8px; justify-content: center;">
             <Button 
-              :type="row.selected ? 'warning' : 'success'" 
+              :type="isSelected(row) ? 'warning' : 'success'" 
               size="small"
               style="border-radius: 6px;"
-              @click="toggleMaterialSelection(row)"
+              @click="toggleMaterialSelection(row, index)"
             >
-              {{ row.selected ? '移出计划' : '加入计划' }}
+              {{ isSelected(row) ? '移出计划' : '加入计划' }}
             </Button>
           </div>
         </template>
       </Table>
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleMaterialPageSizeChange"
+          @current-change="handleMaterialPageChange"
+          :current-page="materialModal.pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="materialModal.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="materialModal.total"
+        />
+      </div>
+      <template slot="footer">
+        <Button @click="materialModal.visible = false">取消</Button>
+        <Button type="primary" @click="handleMaterialSubmit">确定</Button>
+      </template>
+    </Modal>
+
+    <!-- 盘点任务详情弹窗 -->
+    <Modal
+      v-model="detailModal.visible"
+      title="盘点任务详情"
+      width="1000"
+      :mask-closable="true"
+    >
+      <div class="detail-content" v-if="detailModal.data">
+        <div class="detail-header">
+          <div class="detail-item">
+            <span class="label">盘点单号：</span>
+            <span class="value">{{ detailModal.data.no }}</span>
+              </div>
+          <div class="detail-item">
+            <span class="label">所属计划：</span>
+            <span class="value">{{ detailModal.data.planName }}</span>
+              </div>
+          <div class="detail-item">
+            <span class="label">盘点区域：</span>
+            <span class="value">{{ detailModal.data.area }}</span>
+            </div>
+          <div class="detail-item">
+            <span class="label">执行人：</span>
+            <span class="value">{{ detailModal.data.executor }}</span>
+            </div>
+          <div class="detail-item">
+            <span class="label">开始时间：</span>
+            <span class="value">{{ detailModal.data.startTime }}</span>
+        </div>
+          <div class="detail-item">
+            <span class="label">完成时间：</span>
+            <span class="value">{{ detailModal.data.endTime || '-' }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">状态：</span>
+            <span class="value">
+              <Tag :color="getInventoryStatusColor(detailModal.data.status)">
+                {{ getInventoryStatusText(detailModal.data.status) }}
+              </Tag>
+            </span>
+      </div>
+    </div>
+
+        <div class="progress-section">
+          <div class="progress-header">
+            <h3>盘点进度</h3>
+            <div class="progress-stats">
+              <span>已盘点：{{ detailModal.data.checked_count || 0 }}</span>
+              <span>总数量：{{ detailModal.data.total_count || 0 }}</span>
+              <span>完成率：{{ detailModal.data.progress || '0%' }}</span>
+          </div>
+              </div>
+          <Progress :percent="detailModal.data.progress_number || 0" :stroke-color="getProgressColor(detailModal.data.progress_number)" />
+            </div>
+
+        <div class="material-section">
+          <h3>盘点物资列表</h3>
+          <Table 
+            :columns="detailColumns" 
+            :data="detailModal.data.materials || []" 
+            :loading="detailModal.loading"
+            border
+          >
+            <template slot-scope="{ row }" slot="status">
+              <Tag :color="getInventoryStatusColor(row.status)">{{ getInventoryStatusText(row.status) }}</Tag>
+            </template>
+            <template slot-scope="{ row }" slot="diff_quantity">
+              <span :style="{ color: row.diff_quantity > 0 ? '#19be6b' : row.diff_quantity < 0 ? '#ed4014' : '#515a6e' }">
+                {{ row.diff_quantity > 0 ? '+' + row.diff_quantity : row.diff_quantity }}
+              </span>
+            </template>
+          </Table>
+          <div class="pagination-container">
+            <el-pagination
+              @size-change="handleDetailPageSizeChange"
+              @current-change="handleDetailPageChange"
+              :current-page="detailModal.pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="detailModal.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="detailModal.total"
+            />
+          </div>
+          </div>
+        </div>
+      <template slot="footer">
+        <Button @click="detailModal.visible = false">关闭</Button>
+      </template>
     </Modal>
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        // 删除不需要的数据
-        planSearch: {
-          keyword: '',
-          dateRange: [],
-          status: '',
-          pageIndex: 1,
-          pageSize: 10
+import { saveStocktakingPlan, getStocktakingPlanList, deleteStocktakingPlan, getStocktakingPlanLinkList } from '@/api/system/stocktaking'
+import { getStorehouseTypeList } from '@/api/system/storehouseType'
+import { getparameteritem } from '@/api/system/dictionary'
+import { index as getWarehouseList } from '@/api/system/baseForm'
+import qs from 'qs'
+import request from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      planSearch: {
+        keyword: '',
+        dateRange: [],
+        status: '',
+        pageIndex: 1,
+        pageSize: 10
+      },
+      planList: [],
+      planTotal: 0,
+      planLoading: false,
+      planColumns: [
+        { title: '计划编号', key: 'no' },
+        { title: '计划名称', key: 'name' },
+        { title: '开始日期', key: 'start_date' },
+        { title: '结束日期', key: 'end_date' },
+        { 
+          title: '状态', 
+          slot: 'status',
+          key: 'status'
         },
-        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
+        {
+          title: '操作',
+          slot: 'action',
+          width: 200
+        }
+      ],
+
+      listSearch: {
+        keyword: '',
+        planId: '',
+        status: '',
+        pageIndex: 1,
+        pageSize: 10
+      },
+      inventoryList: [],
+      listTotal: 0,
+      listLoading: false,
+      listColumns: [
+        { title: '盘点单号', key: 'no' },
+        { 
+          title: '所属计划', 
+          slot: 'planName',
+          key: 'material_infos_plan.name'
         },
-        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' }]
-          }
+        { 
+          title: '盘点区域', 
+          slot: 'area',
+          key: 'material_info.suozaicangku'
         },
-
-        // 物资选择模态框数据
-        materialModal: {
-          visible: false,
-          loading: false,
-          keyword: '',
-          currentPlanId: ''
+        { title: '执行人', key: 'executor' },
+        { 
+          title: '开始时间', 
+          slot: 'startTime',
+          key: 'material_infos_plan.start_date'
         },
-        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'
+        { 
+          title: '完成时间', 
+          slot: 'endTime',
+          key: 'material_infos_plan.end_date'
+        },
+        { 
+          title: '状态', 
+          slot: 'status',
+          key: 'status'
+        },
+        {
+          title: '操作',
+          slot: 'action',
+          width: 100
         }
-        return colors[status] || 'default'
+      ],
+
+      planModal: {
+        visible: false,
+        title: '新建盘点计划',
+        form: {
+        id: '',
+        name: '',
+          dateRange: [],
+        remark: ''
       },
-      getStatusText(status) {
-        const texts = {
-          pending: '未开始',
-          progress: '进行中',
-          completed: '已完成'
+        rules: {
+          name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+          dateRange: [
+            { 
+              required: true, 
+              type: 'array', 
+              min: 2, 
+              message: '请选择计划日期', 
+              trigger: 'change',
+              validator: (rule, value, callback) => {
+                if (!value || value.length !== 2) {
+                  callback(new Error('请选择计划日期'));
+                } else {
+                  callback();
+                }
+              }
+            }
+          ]
         }
-        return texts[status] || status
       },
-      getInventoryStatusColor(status) {
-        const colors = {
-          pending: 'red',
-          completed: 'green'
-        }
-        return colors[status] || 'default'
+
+      materialModal: {
+        visible: false,
+        loading: false,
+        keyword: '',
+        storehouses_id: '',
+        area: '',
+        warehouseName: '',
+        currentPlanId: '',
+        pageIndex: 1,
+        pageSize: 10,
+        total: 0
       },
-      getInventoryStatusText(status) {
-        const texts = {
-          pending: '未盘点',
-          completed: '已盘点'
+      materialList: [],
+      materialColumns: [
+        { type: 'selection', width: 60 },
+        { title: '物资名称', key: 'zichanmingcheng' },
+        { title: '规格型号', key: 'guigexinghao' },
+        { title: '单位', key: 'jiliangdanwei' },
+        { 
+          title: '当前库存', 
+          key: 'inventorys_total',
+          render: (h, params) => {
+            return h('span', params.row.inventorys_total === null ? '0' : params.row.inventorys_total)
+          }
+        },
+        {
+          title: '操作',
+          slot: 'action',
+          width: 100
         }
-        return texts[status] || status
+      ],
+      planMaterials: {
+        'P202504001': ['M002', 'M004'],
+        'P202505001': ['M001', 'M003', 'M006']
+      },
+      storehouseTypeOptions: [],
+      areaOptions: [],
+      warehouseNameOptions: [],
+      selectedRows: [],
+      detailModal: {
+        visible: false,
+        loading: false,
+        data: null,
+        pageIndex: 1,
+        pageSize: 10,
+        total: 0
       },
+      detailColumns: [
+        { title: '物资名称', key: 'zichanmingcheng', minWidth: 150 },
+        { title: '规格型号', key: 'guigexinghao', minWidth: 120 },
+        { title: '单位', key: 'jiliangdanwei', width: 80 },
+        { title: '当前库存', key: 'rukushuliang', width: 100 },
+        { title: '盘点数量', key: 'check_quantity', width: 100 },
+        { 
+          title: '差异数量', 
+          slot: 'diff_quantity',
+          key: 'diff_quantity',
+          width: 100
+        },
+        { 
+          title: '状态', 
+          slot: 'status',
+          key: 'status',
+          width: 100
+        }
+      ],
+      linkedMaterialIds: []
+    }
+  },
+  mounted() {
+    this.searchPlans()
+    this.searchList()
+    this.initMaterialSelectOptions()
+  },
+  methods: {
+    getStatusColor(status) {
+      const colors = {
+        '0': 'red',
+        '1': 'orange',
+        '2': 'green'
+      }
+      return colors[status] || 'default'
+    },
+    getStatusText(status) {
+      const texts = {
+        '0': '未开始',
+        '1': '进行中',
+        '2': '已完成'
+      }
+      return texts[status] || status
+    },
+    getInventoryStatusColor(status) {
+      const colors = {
+        '0': 'red',
+        '1': 'green'
+      }
+      return colors[status] || 'default'
+    },
+    getInventoryStatusText(status) {
+      const texts = {
+        '0': '未盘点',
+        '1': '已盘点'
+      }
+      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
-            )
+    async searchPlans() {
+      this.planLoading = true;
+      try {
+        const formData = new FormData();
+        formData.append('page', this.planSearch.pageIndex);
+        formData.append('page_size', this.planSearch.pageSize);
+        
+        // 只添加非空的搜索条件
+        if (this.planSearch.keyword) {
+          formData.append('keyword', this.planSearch.keyword);
+        }
+        
+        // 添加状态过滤
+        if (this.planSearch.status) {
+          const filterIndex = this.planSearch.keyword ? 1 : 0;
+          formData.append(`filter[${filterIndex}][key]`, 'status');
+          formData.append(`filter[${filterIndex}][op]`, 'eq');
+          formData.append(`filter[${filterIndex}][value]`, this.planSearch.status);
+        }
+        
+        // 确保日期范围有效且不为空
+        if (this.planSearch.dateRange && 
+            this.planSearch.dateRange.length === 2 && 
+            this.planSearch.dateRange[0] && 
+            this.planSearch.dateRange[1]) {
+          const formatDate = (date) => {
+            const d = new Date(date);
+            if (isNaN(d.getTime())) return null; // 检查日期是否有效
+            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}`;
+          };
+
+          const startDate = formatDate(this.planSearch.dateRange[0]);
+          const endDate = formatDate(this.planSearch.dateRange[1]);
+
+          // 只有当两个日期都有效时才添加过滤条件
+          if (startDate && endDate) {
+            const filterIndex = (this.planSearch.keyword ? 1 : 0) + (this.planSearch.status ? 1 : 0);
+            formData.append(`filter[${filterIndex}][key]`, 'start_date');
+            formData.append(`filter[${filterIndex}][op]`, 'range');
+            formData.append(`filter[${filterIndex}][value]`, startDate+','+endDate);
           }
-          
-          this.planList = filteredPlans
-          this.planTotal = filteredPlans.length
-        } finally {
-          this.planLoading = false
         }
-      },
-      resetPlanSearch() {
-        this.planSearch = {
-          keyword: '',
+
+        const res = await getStocktakingPlanList(formData);
+        if (res && res.list) {
+          this.planList = res.list.data;
+          this.planTotal = res.list.total;
+        }
+      } catch (error) {
+        this.$Message.error('获取盘点计划列表失败');
+        console.error('获取盘点计划列表失败:', error);
+      } 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.start_date, plan.end_date],
+          remark: plan.remark
+        }
+        this.planModal.visible = true
+      } else {
+        this.planModal.form = {
+          id: '',
+          name: '',
           dateRange: [],
-          status: '',
-          pageIndex: 1,
-          pageSize: 10
+          remark: ''
         }
-        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
+        this.$nextTick(() => {
+          if (this.$refs.planForm) {
+            this.$refs.planForm.resetFields();
           }
+        });
+      }
+    },
+    handleDateClear() {
+      this.planModal.form.dateRange = null;
+      this.$nextTick(() => {
+        this.planModal.form.dateRange = [];
+        this.$refs.planForm.validateField('dateRange');
+      });
+    },
+    async handlePlanSubmit() {
+      this.$refs.planForm.validateField('dateRange', (errorMessage) => {
+        if (errorMessage) {
+          this.$Message.error(errorMessage);
+          return;
         }
-        this.planModal.visible = true
-      },
-      async handlePlanSubmit() {
-        try {
-          await this.$refs.planForm.validate()
-          // TODO: 调用API保存计划
-          this.planModal.visible = false
-          this.searchPlans()
-        } catch (error) {
-          // 表单验证失败
+      });
+
+      this.$refs.planForm.validate(async (valid) => {
+        if (!valid) {
+          this.$Message.error('请完整填写必填项');
+          return;
         }
-      },
-      async deletePlan(id) {
+
+        const { id, name, dateRange, remark } = this.planModal.form;
+        const formatDate = (date) => {
+          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}`;
+        };
+
+        // 获取当前计划选中的物资ID
+        const selectedMaterialIds = this.planMaterials[id] || [];
+
+        // 构建 formdata 格式的数据
+        const formData = new FormData();
+        formData.append('name', name);
+        formData.append('start_date', formatDate(dateRange[0]));
+        formData.append('end_date', formatDate(dateRange[1]));
+        if (remark) formData.append('remark', remark);
+        if (id) formData.append('id', id);
+
+        // 添加选中的物资ID数组
+        selectedMaterialIds.forEach((materialId, index) => {
+          formData.append(`material_infos_plan_links[${index}][material_info_id]`, materialId);
+        });
+
         try {
-          await this.$Modal.confirm({
-            title: '确认删除',
-            content: '确定要删除该计划吗？'
-          })
-          // TODO: 调用API删除计划
-          this.searchPlans()
-        } catch (error) {
-          // 用户取消删除
+          await saveStocktakingPlan(formData);
+          this.$Message.success('保存成功');
+          this.planModal.visible = false;
+          this.$refs.planForm.resetFields();
+          this.searchPlans();
+        } catch (e) {
+          this.$Message.error('保存失败');
         }
-      },
+      });
+    },
+    deletePlan(id) {
+      this.$confirm('确认要删除该计划吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        await deleteStocktakingPlan({ id })
+        this.$message.success('删除成功')
+        this.searchPlans()
+      }).catch(() => {});
+    },
 
-      // 盘点列表相关方法
-      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
+    async searchList() {
+      this.listLoading = true
+      try {
+        const params = {
+          keyword: this.listSearch.keyword,
+          page: this.listSearch.pageIndex,
+          page_size: this.listSearch.pageSize,
         }
-      },
-      resetListSearch() {
-        this.listSearch = {
-          keyword: '',
-          planId: '',
-          status: '',
-          pageIndex: 1,
-          pageSize: 10
+        // 计划筛选
+        if (this.listSearch.planId) {
+          params.filter = JSON.stringify([{ key: 'material_infos_plan_id', op: 'eq', value: this.listSearch.planId }])
         }
-        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
+        // 状态筛选
+        if (this.listSearch.status) {
+          params.filter = params.filter || '[]'
+          let filterArr = JSON.parse(params.filter)
+          filterArr.push({ key: 'status', op: 'eq', value: this.listSearch.status })
+          params.filter = JSON.stringify(filterArr)
         }
-      },
-      handleMaterialSelectionChange(selection) {
-        // 处理物资选择变化
-      },
-      toggleMaterialSelection(material) {
-        material.selected = !material.selected
-        const planId = this.materialModal.currentPlanId
-        
-        if (!this.planMaterials[planId]) {
-          this.planMaterials[planId] = []
+        const res = await getStocktakingPlanLinkList(params)
+        if (res && res.list.data) {
+          this.inventoryList = res.list.data
+          this.listTotal = res.list.total || 0
         }
-        
-        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)
+      } catch (e) {
+        this.$Message.error('获取盘点列表失败')
+      } 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()
+    },
+    async viewInventoryDetail(id) {
+      this.detailModal.loading = true;
+      this.detailModal.visible = true;
+      this.detailModal.pageIndex = 1;
+      try {
+        // 模拟数据
+        const mockData = {
+          no: 'PD202403150001',
+          planName: '2024年第一季度盘点计划',
+          area: 'A区仓库',
+          executor: '张三',
+          startTime: '2024-03-15 09:00:00',
+          endTime: '2024-03-15 17:00:00',
+          status: '1',
+          checked_count: 8,
+          total_count: 10,
+          progress: '80%',
+          progress_number: 80,
+          materials: Array.from({ length: 25 }, (_, index) => ({
+            id: index + 1,
+            zichanmingcheng: `物资${index + 1}`,
+            guigexinghao: `型号${index + 1}`,
+            jiliangdanwei: '个',
+            rukushuliang: Math.floor(Math.random() * 10) + 1,
+            check_quantity: Math.floor(Math.random() * 10) + 1,
+            diff_quantity: Math.floor(Math.random() * 10) - 5,
+            status: Math.random() > 0.5 ? '1' : '0'
+          }))
+        };
+
+        // 模拟分页
+        const start = (this.detailModal.pageIndex - 1) * this.detailModal.pageSize;
+        const end = start + this.detailModal.pageSize;
+        const pagedMaterials = mockData.materials.slice(start, end);
+
+        this.detailModal.data = {
+          ...mockData,
+          materials: pagedMaterials
+        };
+        this.detailModal.total = mockData.materials.length;
+
+        // 实际接口调用
+        // const res = await getStocktakingPlanLinkList({ 
+        //   id,
+        //   page: this.detailModal.pageIndex,
+        //   page_size: this.detailModal.pageSize
+        // });
+        // if (res && res.data) {
+        //   this.detailModal.data = res.data;
+        //   this.detailModal.total = res.total || 0;
+        // }
+      } catch (error) {
+        this.$Message.error('获取盘点任务详情失败');
+        console.error('获取盘点任务详情失败:', error);
+      } finally {
+        this.detailModal.loading = false;
+      }
+    },
+
+    async showInventorySelectModal(planId) {
+      this.materialModal.currentPlanId = planId
+      this.materialModal.visible = true
+      this.materialModal.pageIndex = 1
+      this.linkedMaterialIds = [] // 重置已关联物资ID
+      this.selectedRows = [] // 重置选中行
+      
+      // 获取已关联的物资ID列表
+      try {
+        const res = await getStocktakingPlanLinkList({ material_infos_plan_id: planId })
+        if (res && res.list && res.list.data) {
+          this.linkedMaterialIds = res.list.data.map(item => item.material_info_id)
         }
-      },
-      async batchAddMaterials() {
-        const selection = this.materialList.filter(m => m.selected)
-        if (selection.length === 0) {
-          this.$Message.warning('请至少选择一项物资')
-          return
+      } catch (error) {
+        console.error('获取已关联物资失败:', error)
+      }
+      
+      // 等待数据加载完成后再搜索物资
+      await this.$nextTick()
+      this.searchMaterials()
+    },
+    isSelected(row) {
+      return this.linkedMaterialIds.includes(row.id)
+    },
+    handleSelectionChange(selection) {
+      this.selectedRows = selection
+    },
+    handleSelect(selection, row) {
+      console.log('handleSelect called', selection, row) // 添加调试日志
+      this.selectedRows = selection
+      // 同步更新 planMaterials
+      const planId = this.materialModal.currentPlanId
+      if (!this.planMaterials[planId]) {
+        this.planMaterials[planId] = []
+      }
+      
+      if (selection.includes(row)) {
+        if (!this.planMaterials[planId].includes(row.id)) {
+          this.planMaterials[planId].push(row.id)
         }
-        
-        const planId = this.materialModal.currentPlanId
-        if (!this.planMaterials[planId]) {
-          this.planMaterials[planId] = []
+      } else {
+        this.planMaterials[planId] = this.planMaterials[planId].filter(id => id !== row.id)
+      }
+    },
+    handleSelectAll(selection) {
+      console.log('handleSelectAll called', selection) // 添加调试日志
+      this.selectedRows = selection
+      const planId = this.materialModal.currentPlanId
+      if (!this.planMaterials[planId]) {
+        this.planMaterials[planId] = []
+      }
+      
+      // 更新 planMaterials
+      this.planMaterials[planId] = selection.map(item => item.id)
+    },
+    toggleMaterialSelection(row, index) {
+      // 确保表格实例存在
+      if (!this.$refs.materialTable) return
+
+      if (this.isSelected(row)) {
+        // 如果当前是"移出计划"状态
+        this.$refs.materialTable.toggleSelect(index)
+        this.selectedRows = this.selectedRows.filter(item => item.id !== row.id)
+        this.linkedMaterialIds = this.linkedMaterialIds.filter(id => id !== row.id)
+      } else {
+        // 如果当前是"加入计划"状态
+        this.$refs.materialTable.toggleSelect(index)
+        this.selectedRows.push(row)
+        this.linkedMaterialIds.push(row.id)
+      }
+    },
+    async searchMaterials() {
+      this.materialModal.loading = true
+      try {
+        const data = {
+          page_size: this.materialModal.pageSize,
+          page: this.materialModal.pageIndex,
+          'materialstorages_cangkumingcheng': this.materialModal.warehouseName || '',
+          'materialstorages_suozaiquyu': this.materialModal.area || '',
+          'storehouses_id': this.materialModal.storehouses_id || '',
+          'filter[0][key]': 'zichanmingcheng',
+          'filter[0][op]': 'like',
+          'filter[0][value]': this.materialModal.keyword || '',
+          'filter[1][key]': 'wuzileixing',
+          'filter[1][op]': 'eq',
+          'filter[1][value]': '一物一码'
         }
-        
-        selection.forEach(material => {
-          if (!this.planMaterials[planId].includes(material.id)) {
-            this.planMaterials[planId].push(material.id)
+        const res = await request({
+          url: '/api/admin/material-infos/index',
+          method: 'post',
+          data: qs.stringify(data),
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
           }
         })
-        
-        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
+        if (res && res.data) {
+          this.materialList = res.data
+          this.selectedRows = [] // 重置选中状态
+          this.materialModal.total = res.total || 0
+          
+          // 等待表格渲染完成后再设置选中状态
+          await this.$nextTick()
+          if (this.$refs.materialTable) {
+            this.materialList.forEach((item, index) => {
+              if (this.linkedMaterialIds.includes(item.id)) {
+                this.$refs.materialTable.toggleSelect(index, true)
+                this.selectedRows.push(item)
+              }
+            })
+          }
         }
-        
-        const planId = this.materialModal.currentPlanId
-        if (this.planMaterials[planId]) {
-          this.planMaterials[planId] = this.planMaterials[planId].filter(
-            id => !selection.some(m => m.id === id)
-          )
+      } finally {
+        this.materialModal.loading = false
+      }
+    },
+    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()
+      })
+      
+      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()
+    },
+    async initMaterialSelectOptions() {
+      // 仓库类型
+      try {
+        const res = await getStorehouseTypeList({ page: 1, page_size: 999 })
+        this.storehouseTypeOptions = (res.data || []).map(item => ({
+          value: item.id,
+          label: item.name
+        }))
+      } catch (e) {
+        this.storehouseTypeOptions = []
+      }
+      // 区域
+      try {
+        const res = await getparameteritem('area')
+        this.areaOptions = (res.detail || []).map(item => ({
+          value: item.value,
+          label: item.label
+        }))
+      } catch (e) {
+        this.areaOptions = []
+      }
+      // 仓库名称
+      try {
+        const res = await getWarehouseList({
+          page: 1,
+          page_size: 999,
+          table_name: 'materialstorages'
+        })
+        this.warehouseNameOptions = (res.data || []).map(item => ({
+          value: item.id,
+          label: item.cangkumingcheng
+        }))
+      } catch (e) {
+        this.warehouseNameOptions = []
+      }
+    },
+    resetMaterialSearch() {
+      this.materialModal.keyword = ''
+      this.materialModal.storehouses_id = ''
+      this.materialModal.area = ''
+      this.materialModal.warehouseName = ''
+      this.materialModal.pageIndex = 1
+      this.searchMaterials()
+    },
+    async onStorehouseTypeChange(val) {
+      this.materialModal.storehouses_id = val
+      await this.updateWarehouseNameOptions()
+    },
+    async onAreaChange(val) {
+      this.materialModal.area = val
+      await this.updateWarehouseNameOptions()
+    },
+    async updateWarehouseNameOptions() {
+      // 联动过滤仓库名称
+      try {
+        const res = await getWarehouseList({
+          page: 1,
+          page_size: 999,
+          table_name: 'materialstorages',
+          filter: [
+            { key: 'storehouses_id', op: 'eq', value: this.materialModal.storehouses_id || '' },
+            { key: 'quyu_id', op: 'eq', value: this.materialModal.area || '' }
+          ]
+        })
+        this.warehouseNameOptions = (res.data || []).map(item => ({
+          value: item.id,
+          label: item.cangkumingcheng
+        }))
+      } catch (e) {
+        this.warehouseNameOptions = []
+      }
+    },
+    handleMaterialPageChange(page) {
+      this.materialModal.pageIndex = page
+      this.searchMaterials()
+    },
+    handleMaterialPageSizeChange(size) {
+      this.materialModal.pageSize = size
+      this.materialModal.pageIndex = 1
+      this.searchMaterials()
+    },
+    async handleMaterialSubmit() {
+      const planId = this.materialModal.currentPlanId;
+      // 直接用当前选中的行
+      const selectedMaterialIds = this.selectedRows.map(row => row.id);
+      if (!planId) {
+        this.$Message.error('未找到计划ID');
+        return;
+      }
+      // 构建 formdata
+      const formData = new FormData();
+      formData.append('id', planId);
+      selectedMaterialIds.forEach((materialId, index) => {
+        formData.append(`material_infos_plan_links[${index}][material_info_id]`, materialId);
+      });
+      try {
+        await saveStocktakingPlan(formData);
+        this.$Message.success('物资关联成功');
+        this.materialModal.visible = false;
+        this.searchPlans();
+      } catch (e) {
+        this.$Message.error('物资关联失败');
+      }
+    },
+    getProgressColor(percent) {
+      if (percent >= 100) return '#19be6b';
+      if (percent >= 60) return '#2d8cf0';
+      if (percent >= 30) return '#ff9900';
+      return '#ed4014';
+    },
+    handleDetailPageChange(page) {
+      this.detailModal.pageIndex = page;
+      this.viewInventoryDetail(this.detailModal.data.id);
+    },
+    handleDetailPageSizeChange(size) {
+      this.detailModal.pageSize = size;
+      this.detailModal.pageIndex = 1;
+      this.viewInventoryDetail(this.detailModal.data.id);
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
@@ -689,45 +1093,45 @@
     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);
-  }
+.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-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;
-  }
+.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;
-  }
+.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;
-  }
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
   .pagination-container {
     display: flex;
@@ -772,99 +1176,35 @@
   }
 
   .material-search {
-    margin-bottom: 15px;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 10px;
   }
 
-  /* 按钮样式优化 */
-  .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-modal {
+    .ivu-modal-content {
+      width: 900px;
+      max-width: 90vw;
+    }
+    
+    .ivu-modal-header {
+      padding: 16px 24px;
+      border-bottom: 1px solid #e8eaec;
       
-      &.ivu-btn-warning {
-        background: #ff9900;
-        border-color: #ff9900;
-        color: #fff;
-        
-        &:hover {
-          background: #ffad33;
-          border-color: #ffad33;
-        }
+      .ivu-modal-header-inner {
+        font-size: 16px;
+  font-weight: 500;
+        color: #17233d;
       }
     }
-  }
-
-  /* 表格操作列样式 */
-  .table-col-action {
-    .ivu-btn {
-      min-width: 80px;
+    
+    .ivu-modal-body {
+      padding: 24px;
     }
   }
 
-  /* 表格样式优化 */
   .ivu-table {
     .ivu-table-cell {
       padding: 8px 16px;
@@ -888,4 +1228,61 @@
       }
     }
   }
-</style>
+
+  .detail-content {
+    padding: 20px;
+    
+    .detail-header {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      margin-bottom: 30px;
+      
+      .detail-item {
+        .label {
+          font-weight: bold;
+  color: #666;
+          margin-right: 10px;
+        }
+        
+        .value {
+          color: #333;
+        }
+      }
+    }
+    
+    .progress-section {
+      margin-bottom: 30px;
+      
+      .progress-header {
+  display: flex;
+  justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        
+        h3 {
+          margin: 0;
+          font-size: 16px;
+          color: #17233d;
+        }
+        
+        .progress-stats {
+  display: flex;
+          gap: 20px;
+          
+          span {
+            color: #666;
+          }
+        }
+      }
+    }
+    
+    .material-section {
+      h3 {
+        margin: 0 0 15px 0;
+        font-size: 16px;
+        color: #17233d;
+      }
+    }
+}
+</style>