feat: 关联数据集

ui/src/api/dataset.ts

@@ -2,6 +2,7 @@ import { Result } from '@/request/Result'
 import { get, post, del, put } from '@/request/index'
 import type { datasetData } from '@/api/type/dataset'
 import type { pageRequest } from '@/api/type/common'
+import { type Ref } from 'vue'
 const prefix = '/dataset'
 
 /**
@@ -23,8 +24,8 @@ const getDateset: (param: pageRequest) => Promise<Result<any>> = (param) => {
  * 获取全部数据集
  * @param 参数
  */
-const getAllDateset: () => Promise<Result<any[]>> = () => {
+const getAllDateset: (loading?: Ref<boolean>) => Promise<Result<any[]>> = (loading) => {
-  return get(`${prefix}`)
+  return get(`${prefix}`, undefined, loading)
 }
 
 /**

ui/src/components/card-checkbox/index.vue

@@ -1,51 +1,90 @@
 <template>
-  <el-row :gutter="12">
-    <el-col :span="12" v-for="data in dataList" class="mb-16">
   <el-card
     shadow="hover"
-        class="card"
+    class="card-checkbox cursor"
-        :class="modelValue.includes(toModelValue(data)) ? 'active' : ''"
+    :class="modelValue.includes(toModelValue) ? 'active' : ''"
-        @click="checked(data)"
+    @click="checked"
   >
-        <slot v-bind="{ ...data, checked: modelValue.includes(toModelValue(data)) }"></slot>
+    <div class="flex-between">
+      <div class="flex align-center">
+        <slot name="icon">
+          <AppAvatar class="mr-12" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+        </slot>
+        <slot></slot>
+      </div>
+      <input class="checkbox" type="checkbox" id="checkbox" :checked="modelValue.includes(toModelValue)" />
+    </div>
   </el-card>
-    </el-col>
-  </el-row>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
 const props = defineProps<{
-  dataList: Array<any>
+  data: any
 
   modelValue: Array<any>
 
   valueField?: string
 }>()
 
-const toModelValue = (data: any) => {
+const toModelValue = computed(() => (props.valueField ? props.data[props.valueField] : props.data))
-  return props.valueField ? data[props.valueField] : data
+
-}
+// const isChecked = computed({
+//   get: () => props.modelValue.includes(toModelValue.value)),
+//   set: (val) => val
+// })
 
 const emit = defineEmits(['update:modelValue'])
 
-const checked = (data: any) => {
+const checked = () => {
   const value = props.modelValue ? props.modelValue : []
-  if (value.includes(toModelValue(data))) {
+  if (props.modelValue.includes(toModelValue.value)) {
     emit(
       'update:modelValue',
-      value.filter((item) => item !== toModelValue(data))
+      value.filter((item) => item !== toModelValue.value)
     )
   } else {
-    emit('update:modelValue', [...value, toModelValue(data)])
+    emit('update:modelValue', [...value, toModelValue.value])
   }
 }
 </script>
 <style lang="scss" scoped>
-.active {
+.card-checkbox {
-  --el-card-border-color: rgba(51, 112, 255, 1);
+  &.active {
+    border: 1px solid var(--el-color-primary);
   }
-.card {
+  input.checkbox[type='checkbox'] {
-  &:hover {
+    -webkit-appearance: none;
-    cursor: pointer;
+    -moz-appearance: none;
+    appearance: none;
+    height: 14px;
+    width: 14px;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      background-color: white;
+      color: #000;
+      height: 13px;
+      width: 13px;
+      visibility: visible;
+      text-align: center;
+      box-sizing: border-box;
+      border: var(--el-border);
+      border-radius: var(--el-border-radius-small);
+      box-sizing: content-box;
+      content: '';
+    }
+
+    &:checked::after {
+      content: '✓';
+      color: #ffffff;
+      border-color: var(--el-color-primary);
+      background: var(--el-color-primary);
     }
   }
+}
+
 </style>

ui/src/components/dynamics-form/items/radio/RadioCard.vue

@@ -70,8 +70,8 @@ watch(
 
   .active {
     border-radius: 4px;
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--el-color-primary-light-9);
-    color: #3370ff;
+    color: var(--el-color-primary);
   }
   .item {
     cursor: pointer;

ui/src/components/dynamics-form/items/table/TableCheckbox.vue

@@ -205,7 +205,7 @@ const activeText = computed(() => {
   color: rgba(100, 106, 115, 1);
   .active {
     margin-left: 3px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--el-color-primary);
   }
 }
 </style>

ui/src/components/dynamics-form/items/table/TableRadio.vue

@@ -193,7 +193,7 @@ const activeText = computed(() => {
   color: rgba(100, 106, 115, 1);
   .active {
     margin-left: 3px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--el-color-primary);
   }
 }
 </style>

ui/src/stores/modules/dataset.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import type { datasetData } from '@/api/type/dataset'
 import type { UploadUserFile } from 'element-plus'
 import datasetApi from '@/api/dataset'
+import { type Ref } from 'vue'
 
 export interface datasetStateTypes {
   baseInfo: datasetData | null
@@ -21,10 +22,10 @@ const useDatasetStore = defineStore({
     saveDocumentsFile(file: UploadUserFile[]) {
       this.documentsFiles = file
     },
-    async asyncGetAllDateset() {
+    async asyncGetAllDateset(loading?: Ref<boolean>) {
       return new Promise((resolve, reject) => {
         datasetApi
-          .getAllDateset()
+          .getAllDateset(loading)
           .then((data) => {
             resolve(data)
           })

ui/src/views/application/CreateAndSetting.vue

@@ -155,7 +155,14 @@
         </div>
       </el-col>
     </el-row>
-    <AddDatasetDialog ref="AddDatasetDialogRef" @addData="addDataset" :data="datasetList" />
+    {{ datasetLoading }}
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -183,6 +190,7 @@ const applicationFormRef = ref<FormInstance>()
 const AddDatasetDialogRef = ref()
 
 const loading = ref(false)
+const datasetLoading = ref(false)
 const exampleList = ref(['', ''])
 const applicationForm = ref<ApplicationFormType>({
   name: '',
@@ -250,20 +258,13 @@ function getDetail() {
 }
 
 function getDataset() {
-  loading.value = true
   if (id) {
-    applicationApi.getApplicationDataset(id, loading).then((res) => {
+    applicationApi.getApplicationDataset(id, datasetLoading).then((res) => {
       datasetList.value = res.data
     })
   } else {
-    dataset
+    dataset.asyncGetAllDateset(datasetLoading).then((res: any) => {
-      .asyncGetAllDateset()
-      .then((res: any) => {
       datasetList.value = res.data?.filter((v) => v.user_id === user.userInfo?.id)
-        loading.value = false
-      })
-      .catch(() => {
-        loading.value = false
     })
   }
 }
@@ -294,6 +295,10 @@ function getProvider() {
     })
 }
 
+function refresh() {
+  getDataset()
+}
+
 onMounted(() => {
   getProvider()
   getModel()

ui/src/views/application/components/AddDatasetDialog.vue

@@ -1,19 +1,20 @@
 <template>
   <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
-    <CardCheckbox value-field="id" :data-list="data" v-model="checkList">
+    <template #header="{ close, titleId, titleClass }">
-      <template #default="scope">
+      <div class="my-header flex">
-        <div class="title flex-between">
+        <h4 :id="titleId" :class="titleClass">添加关联数据集</h4>
-          <div class="flex align-center">
+        <el-button link class="ml-16" @click="refresh">
-            <AppAvatar class="mr-12" shape="square" :size="32">
+          <el-icon class="mr-4"><Refresh /></el-icon>刷新
-              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+        </el-button>
-            </AppAvatar>
-            <h4 class="ellipsis-1">{{ scope.name }}</h4>
-          </div>
-          <input type="checkbox" id="check1" :checked="scope.checked" />
       </div>
     </template>
+    <el-row :gutter="12" v-loading="loading">
+      <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
+        <CardCheckbox value-field="id" :data="item" v-model="checkList">
+          {{ item.name }}
         </CardCheckbox>
-
+      </el-col>
+    </el-row>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
@@ -29,19 +30,18 @@ const props = defineProps({
   data: {
     type: Array<any>,
     default: () => []
-  }
+  },
+  loading: Boolean
 })
 
-const emit = defineEmits(['addData'])
+const emit = defineEmits(['addData', 'refresh'])
 
-const loading = ref(false)
 const dialogVisible = ref<boolean>(false)
 const checkList = ref([])
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
     checkList.value = []
-    loading.value = false
   }
 })
 
@@ -54,6 +54,10 @@ const submitHandle = () => {
   dialogVisible.value = false
 }
 
+const refresh = () => {
+  emit('refresh')
+}
+
 defineExpose({ open })
 </script>
 <style lang="scss" scope></style>

ui/src/views/template/component/CreateModel.vue

@@ -191,7 +191,7 @@ defineExpose({ open, close })
   line-height: 24px;
   cursor: pointer;
   &:hover {
-    color: rgba(51, 112, 255, 1);
+    color: var(--el-color-primary);
   }
 }
 .active-breadcrumb {