From 511d8fc6f2ecccac035d3e5ccb2ec35ae4acaebb Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 4 Dec 2023 18:28:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E7=BD=AE=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/card-checkbox/index.vue     |  1 +
 ui/src/components/index.ts                    |  3 ++
 .../components/AddDatasetDialog.vue           |  1 -
 ui/src/views/dataset/component/BaseForm.vue   | 36 +------------
 ui/src/views/document/DatasetSetting.vue      | 51 ++++++++++++++++---
 5 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/ui/src/components/card-checkbox/index.vue b/ui/src/components/card-checkbox/index.vue
index cfac7a208..45a7e17f7 100644
--- a/ui/src/components/card-checkbox/index.vue
+++ b/ui/src/components/card-checkbox/index.vue
@@ -20,6 +20,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
+defineOptions({ name: 'CardCheckbox' })
 const props = defineProps<{
   data: any
 
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 3a7288a54..1875fd054 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -14,6 +14,8 @@ import TagEllipsis from './tag-ellipsis/index.vue'
 import CommonList from './common-list/index.vue'
 import MarkdownRenderer from './markdown-renderer/index.vue'
 import dynamicsForm from './dynamics-form'
+import CardCheckbox from './card-checkbox/index.vue'
+
 export default {
   install(app: App) {
     app.component(AppIcon.name, AppIcon)
@@ -31,5 +33,6 @@ export default {
     app.component(CommonList.name, CommonList)
     app.use(dynamicsForm)
     app.component(MarkdownRenderer.name, MarkdownRenderer)
+    app.component(CardCheckbox.name, CardCheckbox)
   }
 }
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/components/AddDatasetDialog.vue
index 5ac362c61..2bdd3c8ce 100644
--- a/ui/src/views/application/components/AddDatasetDialog.vue
+++ b/ui/src/views/application/components/AddDatasetDialog.vue
@@ -27,7 +27,6 @@
 </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>,
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index 120373e23..7c531bf2a 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -25,52 +25,24 @@
         :autosize="{ minRows: 3 }"
       />
     </el-form-item>
-    <el-form-item v-loading="loading">
-      <template #label
-        ><h4 class="title-decoration-1 mb-16" style="color: var(--app-text-color)">
-          关联应用
-        </h4></template
-      >
-      <el-row justify="space-between" style="width: 100%">
-        <el-col :span="11" v-for="(item, index) in application_list" :key="index" class="mb-16">
-          <CardCheckbox value-field="id" :data="item" v-model="form.application_id_list">
-            <template #icon>
-              <AppAvatar
-                v-if="item.name"
-                :name="item.name"
-                pinyinColor
-                class="mr-12"
-                shape="square"
-                :size="32"
-              />
-            </template>
-            {{ item.name }}
-          </CardCheckbox>
-        </el-col>
-      </el-row>
-    </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
 import useStore from '@/stores'
-import DatasetApi from '@/api/dataset'
-import CardCheckbox from '@/components/card-checkbox/index.vue'
-import type { ApplicationFormType } from '@/api/type/application'
+
 const props = defineProps({
   data: {
     type: Object,
     default: () => {}
   }
 })
-const loading = ref<boolean>(false)
 const { dataset } = useStore()
 const baseInfo = computed(() => dataset.baseInfo)
-const application_list = ref<Array<ApplicationFormType>>([])
 const form = ref<any>({
   name: '',
   desc: '',
-  application_id_list: []
+
 })
 
 const rules = reactive({
@@ -85,10 +57,6 @@ watch(
     if (value && JSON.stringify(value) !== '{}') {
       form.value.name = value.name
       form.value.desc = value.desc
-      form.value.application_id_list = value.application_id_list
-      DatasetApi.listUsableApplication(value.id, loading).then((ok) => {
-        application_list.value = ok.data
-      })
     }
   },
   {
diff --git a/ui/src/views/document/DatasetSetting.vue b/ui/src/views/document/DatasetSetting.vue
index 916da45b5..478d79a70 100644
--- a/ui/src/views/document/DatasetSetting.vue
+++ b/ui/src/views/document/DatasetSetting.vue
@@ -1,12 +1,35 @@
 <template>
   <LayoutContainer header="设置">
-    <div class="dataset-setting">
-      <div class="p-24" v-loading="loading">
-        <BaseForm ref="BaseFormRef" :data="detail" />
-        <div class="text-right">
-          <el-button @click="submit" type="primary"> 保存 </el-button>
+    <div class="dataset-setting main-calc-height">
+      <el-scrollbar>
+        <div class="p-24" v-loading="loading">
+          <BaseForm ref="BaseFormRef" :data="detail" />
+
+          <h4 class="title-decoration-1 mb-16">关联应用</h4>
+
+          <el-row :gutter="12">
+            <el-col :span="12" v-for="(item, index) in application_list" :key="index" class="mb-16">
+              <CardCheckbox value-field="id" :data="item" v-model="application_id_list">
+                <template #icon>
+                  <AppAvatar
+                    v-if="item.name"
+                    :name="item.name"
+                    pinyinColor
+                    class="mr-12"
+                    shape="square"
+                    :size="32"
+                  />
+                </template>
+                {{ item.name }}
+              </CardCheckbox>
+            </el-col>
+          </el-row>
+
+          <div class="text-right">
+            <el-button @click="submit" type="primary"> 保存 </el-button>
+          </div>
         </div>
-      </div>
+      </el-scrollbar>
     </div>
   </LayoutContainer>
 </template>
@@ -15,6 +38,7 @@ import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import BaseForm from '@/views/dataset/component/BaseForm.vue'
 import datasetApi from '@/api/dataset'
+import type { ApplicationFormType } from '@/api/type/application'
 import { MsgSuccess } from '@/utils/message'
 const route = useRoute()
 const {
@@ -25,11 +49,18 @@ const BaseFormRef = ref()
 const loading = ref(false)
 const detail = ref({})
 
+const application_list = ref<Array<ApplicationFormType>>([])
+const application_id_list = ref([])
+
 async function submit() {
   if (await BaseFormRef.value?.validate()) {
     loading.value = true
+    const obj = {
+      application_id_list: application_id_list.value,
+      ...BaseFormRef.value.form
+    }
     datasetApi
-      .putDateset(id, BaseFormRef.value.form)
+      .putDateset(id, obj)
       .then((res) => {
         MsgSuccess('保存成功')
         loading.value = false
@@ -46,7 +77,11 @@ function getDetail() {
     .getDatesetDetail(id)
     .then((res) => {
       detail.value = res.data
-      loading.value = false
+      application_id_list.value = res.data?.application_id_list
+      datasetApi.listUsableApplication(id, loading).then((ok) => {
+        application_list.value = ok.data
+        loading.value = false
+      })
     })
     .catch(() => {
       loading.value = false