refactor(wms): 重构发货计划列表为卡片布局并优化选择逻辑

将表格布局改为卡片布局，提升用户体验。修改选择逻辑以适配卡片布局，同时更新相关样式。替换测试框架为Jest并添加日期格式化测试用例。

klp-ui/src/views/wms/delivery/plan/index.vue

@@ -65,39 +65,48 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deliveryPlanList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="计划唯一ID" align="center" prop="planId" v-if="false"/>
-      <el-table-column label="发货计划名称" align="center" prop="planName" />
-      <el-table-column label="计划日期" align="center" prop="planDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-row :gutter="20" v-loading="loading">
+      <el-col :span="6" v-for="(row, index) in deliveryPlanList" :key="row.planId">
+        <el-card shadow="hover" class="delivery-plan-card">
+          <div class="card-header">
+            <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
+            <div class="card-title">{{ row.planName }}</div>
+          </div>
+          <div class="card-content">
+            <div class="content-item">
+              <span class="label">计划日期：</span>
+              <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
+            </div>
+            <div class="content-item">
+              <span class="label">备注：</span>
+              <span>{{ row.remark || '-' }}</span>
+            </div>
+            <div class="content-item">
+              <span class="label">创建人：</span>
+              <span>{{ row.createBy }}</span>
+            </div>
+            <div class="content-item">
+              <span class="label">更新时间：</span>
+              <span>{{ parseTime(row.updateTime, '{y}-{m}-{d}') }}</span>
+            </div>
+          </div>
+          <div class="card-actions">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(row)"
+            >删除</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
 
     <pagination
       v-show="total>0"
@@ -182,9 +191,16 @@ export default {
     getList() {
       this.loading = true;
       listDeliveryPlan(this.queryParams).then(response => {
-        this.deliveryPlanList = response.rows;
+        this.deliveryPlanList = response.rows.map(item => ({
+          ...item,
+          selected: false
+        }));
         this.total = response.total;
         this.loading = false;
+        // 重置选择状态
+        this.ids = [];
+        this.single = true;
+        this.multiple = true;
       });
     },
     // 取消按钮
@@ -217,11 +233,12 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.planId)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+    // 卡片选择处理
+    handleCardSelectionChange(row) {
+      // 重新计算选中的ID数组
+      this.ids = this.deliveryPlanList.filter(item => item.selected).map(item => item.planId);
+      this.single = this.ids.length !== 1;
+      this.multiple = !this.ids.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -294,3 +311,50 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.delivery-plan-card {
+  margin-bottom: 20px;
+  height: 100%;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-content {
+  margin-bottom: 20px;
+}
+
+.content-item {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.content-item:last-child {
+  margin-bottom: 0;
+}
+
+.label {
+  width: 80px;
+  font-weight: 500;
+  color: #606266;
+  margin-right: 10px;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>