feat: 创建应用

ui/src/utils/utils.ts

@@ -34,3 +34,11 @@ export function getImgUrl(name: string) {
   const type = fileType(name) || 'txt'
   return `/src/assets/${type}-icon.svg`
 }
+
+/*
+  从指定数组中过滤出对应的对象
+*/
+export function realatedObject(list: any, val: string | number, attr: string) {
+  const filterData: any = list.filter((item: any) => item[attr] === val)?.[0]
+  return filterData || null
+}

ui/src/views/application/CreateAndSetting.vue

@@ -43,7 +43,7 @@
                   <el-option-group
                     v-for="(value, label) in modelOptions"
                     :key="value"
-                    :label="realatedProvider(label, 'name')"
+                    :label="realatedObject(providerOptions, label, 'provider')?.name"
                   >
                     <el-option
                       v-for="item in value"
@@ -54,7 +54,7 @@
                     >
                       <div class="flex">
                         <span
-                          v-html="realatedProvider(label, 'icon')"
+                          v-html="realatedObject(providerOptions, label, 'provider')?.icon"
                           class="model-icon mr-8"
                         ></span>
                         <span>{{ item.name }}</span>
@@ -84,28 +84,39 @@
                     </el-button>
                   </div>
                 </template>
-                <div>
+                <div v-if="applicationForm.dataset_id_list.length == 0">
                   <el-text type="info">关联的数据集展示在这里</el-text>
                 </div>
-                <!-- <div class="w-full">
+                <div class="w-full" v-else>
                   <el-row :gutter="12">
-                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-8">
+                    <el-col
+                      :xs="24"
+                      :sm="24"
+                      :md="12"
+                      :lg="12"
+                      :xl="12"
+                      class="mb-8"
+                      v-for="(item, index) in applicationForm.dataset_id_list"
+                      :key="index"
+                    >
                       <el-card class="relate-dataset-card" shadow="never">
                         <div class="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>
-                            <div class="ellipsis-1">DataEase 数据集</div>
+                            <div class="ellipsis-1">
+                              {{ realatedObject(datasetList, item, 'id')?.name }}
+                            </div>
                           </div>
-                          <el-button text>
+                          <el-button text @click="removeDataset(item)">
                             <el-icon><Close /></el-icon>
                           </el-button>
                         </div>
                       </el-card>
                     </el-col>
                   </el-row>
-                </div> -->
+                </div>
               </el-form-item>
               <el-form-item label="开场白">
                 <el-input
@@ -142,7 +153,7 @@
         </div>
       </el-col>
     </el-row>
-    <AddDatasetDialog ref="AddDatasetDialogRef" />
+    <AddDatasetDialog ref="AddDatasetDialogRef" @addData="addDataset" :data="datasetList" />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -154,8 +165,9 @@ import AddDatasetDialog from './components/AddDatasetDialog.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { Provider } from '@/api/type/model'
+import { realatedObject } from '@/utils/utils'
 import useStore from '@/stores'
-const { model } = useStore()
+const { model, dataset } = useStore()
 
 const router = useRouter()
 const route = useRoute()
@@ -190,6 +202,7 @@ const rules = reactive<FormRules<ApplicationFormType>>({
 })
 const modelOptions = ref<any>(null)
 const providerOptions = ref<Array<Provider>>([])
+const datasetList = ref([])
 
 watch(exampleList.value, () => {
   applicationForm.example = exampleList.value.filter((v) => v)
@@ -231,8 +244,28 @@ function submit() {
   //     })
   // }
 }
+
+function removeDataset(id: String) {
+  applicationForm.dataset_id_list.splice(applicationForm.dataset_id_list.indexOf(id), 1)
+}
+function addDataset(val: Array<string>) {
+  applicationForm.dataset_id_list = val
+}
 function openDatasetDialog() {
-  AddDatasetDialogRef.value.open()
+  AddDatasetDialogRef.value.open(applicationForm.dataset_id_list)
+}
+
+function getDataset() {
+  loading.value = true
+  dataset
+    .asyncGetAllDateset()
+    .then((res: any) => {
+      datasetList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
 }
 
 function getModel() {
@@ -261,16 +294,10 @@ function getProvider() {
     })
 }
 
-function realatedProvider(val: string | number, attr: string) {
-  const filterProvider: any = providerOptions.value.filter(
-    (item: any) => item.provider === val
-  )?.[0]
-  return filterProvider?.[attr] || ''
-}
-
 onMounted(() => {
   getProvider()
   getModel()
+  getDataset()
 })
 </script>
 <style lang="scss" scoped>

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

@@ -1,17 +1,17 @@
 <template>
   <el-dialog title="添加关联数据集" v-model="dialogVisible" width="600">
     <el-checkbox-group v-model="checkList" class="app-custom-checkbox-group">
-      <el-row :gutter="12">
-        <el-col :span="12">
+      <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">数据集</h4>
+                <h4 class="ellipsis-1">{{ item.name }}</h4>
               </div>
-              <el-checkbox label="Option A" />
+              <el-checkbox :label="item.id" />
             </div>
           </el-card>
         </el-col>
@@ -28,27 +28,33 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const emit = defineEmits(['updateContent'])
+const props = defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  }
+})
 
+const emit = defineEmits(['addData'])
+
+const loading = ref(false)
 const dialogVisible = ref<boolean>(false)
 const checkList = ref([])
 
-const paragraphFormRef = ref()
-
 watch(dialogVisible, (bool) => {
   if (!bool) {
     checkList.value = []
+    loading.value = false
   }
 })
 
-const open = (data: any) => {
+const open = (checked: any) => {
+  checkList.value = checked
   dialogVisible.value = true
 }
-const submitHandle = async () => {
-  if (await paragraphFormRef.value?.validate()) {
-    emit('updateContent', paragraphFormRef.value?.form)
-    dialogVisible.value = false
-  }
+const submitHandle = () => {
+  emit('addData', checkList.value)
+  dialogVisible.value = false
 }
 
 defineExpose({ open })