feat: 设置关联应用

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
 

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)
   }
 }

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>,

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
-      })
     }
   },
   {

ui/src/views/document/DatasetSetting.vue

@@ -1,12 +1,35 @@
 <template>
   <LayoutContainer header="设置">
-    <div class="dataset-setting">
+    <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>
+      </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,8 +77,12 @@ function getDetail() {
     .getDatesetDetail(id)
     .then((res) => {
       detail.value = res.data
+      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
     })