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

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

klp-ui/package.json

@@ -10,7 +10,7 @@
     "stage": "vue-cli-service serve --mode stage",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
-    "test": "vitest"
+    "test": "jest --maxWorkers=4"
   },
   "husky": {
     "hooks": {
@@ -94,6 +94,7 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "jest": "^30.2.0",
     "lint-staged": "10.5.3",
     "playwright": "^1.57.0",
     "runjs": "4.4.2",

klp-ui/src/utils/klp.test.js

@@ -0,0 +1,12 @@
+// 为日期格式化函数编写测试用例
+import {expect, test} from '@jest/globals';
+import { parseTime } from './klp.js'
+
+test('formatDate', () => {
+  expect(parseTime('2023-12-25', '{y}-{m}-{d}')).toBe('2023-12-25')
+})
+
+test('formatDate with custom format', () => {
+  const date = new Date('2023-12-25')
+  expect(parseTime(date, '{y}年{m}月{d}日')).toBe('2023年12月25日')
+})

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>

klp-ui/vitest.config.js

@@ -1,19 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    // 使用jsdom环境进行测试
-    environment: 'jsdom',
-    // 测试文件匹配模式
-    include: ['src/**/*.test.js'],
-    // 覆盖率配置
-    coverage: {
-      reporter: ['text', 'json', 'html']
-    }
-  },
-  resolve: {
-    alias: {
-      '@': './src'
-    }
-  }
-})