完成盘点计划进度+详情

src/views/inventorys/stocktaking.vue

@@ -36,11 +36,15 @@
         <template slot-scope="{ row }" slot="status">
           <Tag :color="getStatusColor(row.status)">{{ getStatusText(row.status) }}</Tag>
         </template>
+        <template slot-scope="{ row }" slot="progress">
+          <Progress :percent="getPlanProgress(row)" :stroke-width="15" />
+        </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>
+            <Button type="info" size="small" style="border-radius: 6px;" ghost @click="viewPlanDetail(row)">查看</Button>
           </div>
         </template>
       </Table>
@@ -353,6 +357,86 @@
     <div v-if="previewUrl" class="image-preview-modal" @click="closePreview">
       <img :src="previewUrl" class="image-preview-large" />
     </div>
+
+    <!-- Plan Detail Modal -->
+    <Modal
+      v-model="planDetailModal.visible"
+      title="盘点计划详情"
+      width="1000"
+      :mask-closable="true"
+    >
+      <div class="plan-detail-content" v-if="planDetailModal.data">
+        <div class="detail-header">
+          <div class="detail-item">
+            <span class="label">计划编号：</span>
+            <span class="value">{{ planDetailModal.data.no }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">计划名称：</span>
+            <span class="value">{{ planDetailModal.data.name }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">开始日期：</span>
+            <span class="value">{{ planDetailModal.data.start_date }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">结束日期：</span>
+            <span class="value">{{ planDetailModal.data.end_date }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">状态：</span>
+            <span class="value">
+              <Tag :color="getStatusColor(planDetailModal.data.status)">
+                {{ getStatusText(planDetailModal.data.status) }}
+              </Tag>
+            </span>
+          </div>
+          <div class="detail-item">
+            <span class="label">备注：</span>
+            <span class="value">{{ planDetailModal.data.remark || '-' }}</span>
+          </div>
+        </div>
+
+        <div class="inventory-list-section">
+          <h3>盘点物资列表</h3>
+          <Table 
+            :columns="planDetailColumns" 
+            :data="planDetailModal.inventoryList" 
+            :loading="planDetailModal.loading"
+            border
+          >
+            <template slot-scope="{ row }" slot="status">
+              <Tag :color="getInventoryStatusColor(row.status)">{{ getInventoryStatusText(row.status) }}</Tag>
+            </template>
+            <template slot-scope="{ row }" slot="photos">
+              <div class="photo-list" v-if="row.photos && row.photos.length">
+                <div class="photo-item" v-for="(photo, index) in row.photos.slice(0, 3)" :key="index">
+                  <img :src="photo" @click="previewImage(photo)" />
+                </div>
+                <div class="photo-more" v-if="row.photos.length > 3">
+                  +{{ row.photos.length - 3 }}
+                </div>
+              </div>
+              <span v-else>-</span>
+            </template>
+          </Table>
+          <div class="pagination-container">
+            <el-pagination
+              @size-change="handlePlanDetailPageSizeChange"
+              @current-change="handlePlanDetailPageChange"
+              :current-page="planDetailModal.pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="planDetailModal.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="planDetailModal.total"
+            />
+          </div>
+        </div>
+      </div>
+      <template slot="footer">
+        <Button @click="planDetailModal.visible = false">关闭</Button>
+      </template>
+    </Modal>
   </div>
 </template>
 
@@ -387,10 +471,15 @@ export default {
           slot: 'status',
           key: 'status'
         },
+        {
+          title: '进度',
+          slot: 'progress',
+          width: 200
+        },
         {
           title: '操作',
           slot: 'action',
-          width: 200
+          width: 280
         }
       ],
 
@@ -556,7 +645,59 @@ export default {
           align: 'center'
         }
       ],
-      previewUrl: ''
+      previewUrl: '',
+      planDetailModal: {
+        visible: false,
+        loading: false,
+        data: null,
+        pageIndex: 1,
+        pageSize: 10,
+        total: 0,
+        inventoryList: []
+      },
+      planDetailColumns: [
+        { 
+          title: '物资名称', 
+          key: 'name',
+          minWidth: 150
+        },
+        { 
+          title: '规格型号', 
+          key: 'spec',
+          width: 120
+        },
+        { 
+          title: '单位', 
+          key: 'unit',
+          width: 80
+        },
+        { 
+          title: '盘点数量', 
+          key: 'checkQuantity',
+          width: 100
+        },
+        { 
+          title: '盘点日期', 
+          key: 'checkDate',
+          width: 150
+        },
+        { 
+          title: '状态', 
+          slot: 'status',
+          width: 100
+        },
+        {
+          title: '备注',
+          key: 'remark',
+          minWidth: 150,
+          tooltip: true
+        },
+        {
+          title: '照片',
+          slot: 'photos',
+          width: 150
+        }
+      ]
     }
   },
   mounted() {
@@ -1177,6 +1318,61 @@ export default {
     },
     closePreview() {
       this.previewUrl = '';
+    },
+    getPlanProgress(row) {
+      // 根据状态值判断进度
+      const status = row.status;
+      if (status === 0) { // 未开始
+        return 0;
+      } else if (status === 1) { // 进行中
+        return 50;
+      } else if (status === 2) { // 已完成
+        return 100;
+      }
+      return 0;
+    },
+    viewPlanDetail(row) {
+      this.planDetailModal.visible = true;
+      this.planDetailModal.data = row;
+      this.planDetailModal.pageIndex = 1;
+      this.loadPlanDetailData();
+    },
+    loadPlanDetailData() {
+      this.planDetailModal.loading = true;
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [];
+        for (let i = 0; i < 20; i++) {
+          mockData.push({
+            id: i + 1,
+            name: `测试物资${i + 1}`,
+            spec: `规格${i + 1}`,
+            unit: '个',
+            checkQuantity: Math.floor(Math.random() * 100),
+            checkDate: '2024-03-15',
+            status: Math.random() > 0.5 ? 1 : 0,
+            remark: `这是第${i + 1}个物资的备注信息`,
+            photos: [
+              'https://picsum.photos/200/200?random=1',
+              'https://picsum.photos/200/200?random=2',
+              'https://picsum.photos/200/200?random=3',
+              'https://picsum.photos/200/200?random=4'
+            ]
+          });
+        }
+        this.planDetailModal.inventoryList = mockData;
+        this.planDetailModal.total = 100; // 模拟总数
+        this.planDetailModal.loading = false;
+      }, 500);
+    },
+    handlePlanDetailPageChange(page) {
+      this.planDetailModal.pageIndex = page;
+      this.loadPlanDetailData();
+    },
+    handlePlanDetailPageSizeChange(size) {
+      this.planDetailModal.pageSize = size;
+      this.planDetailModal.pageIndex = 1;
+      this.loadPlanDetailData();
     }
   },
   watch: {
@@ -1457,4 +1653,37 @@ export default {
   box-shadow: 0 4px 24px rgba(0,0,0,0.3);
   background: #fff;
 }
+
+.plan-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;
+      }
+    }
+  }
+  
+  .inventory-list-section {
+    margin-bottom: 30px;
+    
+    h3 {
+      margin: 0 0 15px 0;
+      font-size: 16px;
+      color: #17233d;
+    }
+  }
+}
 </style>