From fe50d7b3f26a6452517765e15aa3a54d46b3784a Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 30 Nov 2023 12:28:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E9=80=89=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/card-checkbox/index.vue     | 51 +++++++++++++++++++
 .../components/AddDatasetDialog.vue           | 33 ++++++------
 2 files changed, 66 insertions(+), 18 deletions(-)
 create mode 100644 ui/src/components/card-checkbox/index.vue

diff --git a/ui/src/components/card-checkbox/index.vue b/ui/src/components/card-checkbox/index.vue
new file mode 100644
index 00000000..7d4e9f40
--- /dev/null
+++ b/ui/src/components/card-checkbox/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-row :gutter="12">
+    <el-col :span="12" v-for="data in dataList" class="mb-16">
+      <el-card
+        shadow="hover"
+        class="card"
+        :class="modelValue.includes(toModelValue(data)) ? 'active' : ''"
+        @click="checked(data)"
+      >
+        <slot v-bind="{ ...data, checked: modelValue.includes(toModelValue(data)) }"></slot>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  dataList: Array<any>
+
+  modelValue: Array<any>
+
+  valueField?: string
+}>()
+
+const toModelValue = (data: any) => {
+  return props.valueField ? data[props.valueField] : data
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+const checked = (data: any) => {
+  const value = props.modelValue ? props.modelValue : []
+  if (value.includes(toModelValue(data))) {
+    emit(
+      'update:modelValue',
+      value.filter((item) => item !== toModelValue(data))
+    )
+  } else {
+    emit('update:modelValue', [...value, toModelValue(data)])
+  }
+}
+</script>
+<style lang="scss" scoped>
+.active {
+  --el-card-border-color: rgba(51, 112, 255, 1);
+}
+.card {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index 2b32361d..1940357d 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -1,22 +1,19 @@
 <template>
   <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
-    <el-checkbox-group v-model="checkList" class="app-custom-checkbox-group">
-      <el-row :gutter="12" v-loading="loading">
-        <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
-          <el-card shadow="hover">
-            <div class="title flex-between">
-              <div class="flex align-center">
-                <AppAvatar class="mr-12" shape="square" :size="32">
-                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-                </AppAvatar>
-                <h4 class="ellipsis-1">{{ item.name }}</h4>
-              </div>
-              <el-checkbox :label="item.id" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-checkbox-group>
+    <CardCheckbox value-field="id" :data-list="data" v-model="checkList">
+      <template #default="scope">
+        <div class="title flex-between">
+          <div class="flex align-center">
+            <AppAvatar class="mr-12" shape="square" :size="32">
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+            </AppAvatar>
+            <h4 class="ellipsis-1">{{ scope.name }}</h4>
+          </div>
+          <input type="checkbox" id="check1" :checked="scope.checked" />
+        </div>
+      </template>
+    </CardCheckbox>
+
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
@@ -27,7 +24,7 @@
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-
+import CardCheckbox from '@/components/card-checkbox/index.vue'
 const props = defineProps({
   data: {
     type: Array<any>,