vue2-client 1.12.31 → 1.12.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.31",
+  "version": "1.12.33",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XDataCard/XDataCard.vue

@@ -2,7 +2,11 @@
   <div>
     <div v-if="render" class="XCard">
       <template v-for="(card, itemIndex) in data">
-        <a-card :key="'card' + itemIndex" class="data-card">
+        <a-card
+          :key="'card' + itemIndex"
+          class="data-card"
+          :class="{ 'card-clicked': card.isClicked }"
+        >
           <div
             v-if="config && card[config.ribbon]"
             class="ribbon"
@@ -11,7 +15,7 @@
           </div>
           <!-- 自定义标题 -->
           <template #title>
-            <div class="custom-title" @click="clickFooter(card, 'cardclick')">
+            <div class="custom-title" @click="clickFooter(card, 'cardclick', itemIndex)">
               <a-tooltip placement="top">
                 <template #title>{{ card[config.id] }}</template>
                 <div class="title-id" v-if="card[config.id]">{{ card[config.id] }}</div>
@@ -57,18 +61,18 @@
                 <template v-else-if="item.type === 'custom' && tableColumns">
                   <!-- 根据 tableColumns 显示自定义内容 -->
                   <span v-for="column in tableColumns" v-if="column.dataIndex === item.key" :key="column.dataIndex">
-                      <template v-if="column.slotType === 'badge'">
-                        <x-badge
-                          :service-name="serviceName"
-                          :env="env"
-                          :dataCard="true"
-                          :badge-key="column.slotKeyMap"
-                          :value="card[item.key]" />
-                      </template>
-                      <template v-else>
-                        <slot :name="column.slots.customRender">{{ card[item.key] }}</slot>
-                      </template>
-                    </span>
+                    <template v-if="column.slotType === 'badge'">
+                      <x-badge
+                        :service-name="serviceName"
+                        :env="env"
+                        :dataCard="true"
+                        :badge-key="column.slotKeyMap"
+                        :value="card[item.key]" />
+                    </template>
+                    <template v-else>
+                      <slot :name="column.slots.customRender">{{ card[item.key] }}</slot>
+                    </template>
+                  </span>
                 </template>
                 <template v-else>
                   <span class="body-item-value">{{ card[item.key] }}</span>
@@ -85,7 +89,7 @@
           <template #actions>
             <a-row align="middle" class="custom-actions" v-if="config && config.footer && config.footer.length > 0">
               <template v-for="(item, footerIndex) in config.footer">
-                <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit)">
+                <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit, itemIndex)">
                   <span>
                     <a-icon :type="item.icon" class="footer-icon" />
                     <span>{{ item.label }}</span>
@@ -191,7 +195,8 @@ export default {
       // 分页大小选项
       pageSizeOptions: ['4', '6', '8', '10'],
       // 数据总数
-      total: 0
+      total: 0,
+      activeCardIndex: null, // 新增：记录当前激活的卡片索引
     }
   },
   created () {
@@ -301,7 +306,19 @@ export default {
       return result
     },
     // 点击按钮
-    clickFooter (data, eventName) {
+    clickFooter (data, eventName, index) {
+      if (eventName === 'cardclick') {
+        // 清除所有卡片的点击状态
+        if (this.data && Array.isArray(this.data)) {
+          this.data.forEach(item => {
+            if (item.isClicked) {
+              this.$set(item, 'isClicked', false)
+            }
+          })
+        }
+        // 设置当前卡片的点击状态
+        this.$set(data, 'isClicked', true)
+      }
       this.$emit('cardEmit', data, eventName)
     },
     // 获取数据
@@ -457,6 +474,13 @@ export default {
         color: black;
       }
     }
+
+    &.card-clicked {
+      :deep(.ant-card-head) {
+        background-color: #e6f7ff;
+        transition: background-color 0.3s ease;
+      }
+    }
   }
 
   .custom-title {