feat: 多选框

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>

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">
+    <CardCheckbox value-field="id" :data-list="data" v-model="checkList">
-      <el-row :gutter="12" v-loading="loading">
+      <template #default="scope">
-        <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
+        <div class="title flex-between">
-          <el-card shadow="hover">
+          <div class="flex align-center">
-            <div class="title flex-between">
+            <AppAvatar class="mr-12" shape="square" :size="32">
-              <div class="flex align-center">
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-                <AppAvatar class="mr-12" shape="square" :size="32">
+            </AppAvatar>
-                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+            <h4 class="ellipsis-1">{{ scope.name }}</h4>
-                </AppAvatar>
+          </div>
-                <h4 class="ellipsis-1">{{ item.name }}</h4>
+          <input type="checkbox" id="check1" :checked="scope.checked" />
-              </div>
+        </div>
-              <el-checkbox :label="item.id" />
+      </template>
-            </div>
+    </CardCheckbox>
-          </el-card>
+
-        </el-col>
-      </el-row>
-    </el-checkbox-group>
     <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>,