feat: 增加应用模板数据匹配方式 (#17149)

core/core-frontend/src/locales/en.ts

@@ -2941,6 +2941,7 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    data_match_type: 'Data match type',
     select_resource: 'Select {0}',
     change_screen_page: 'Change {0}',
     new_screen_page: 'New page',

core/core-frontend/src/locales/tw.ts

@@ -2860,6 +2860,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    data_match_type: '資料匹配方式',
     select_resource: '請選擇{0}',
     change_screen_page: '更換{0}',
     new_screen_page: '新建分頁',

core/core-frontend/src/locales/zh-CN.ts

@@ -2869,6 +2869,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    data_match_type: '数据匹配方式',
     select_resource: '请选择{0}',
     change_screen_page: '更换{0}',
     new_screen_page: '新建分页',

core/core-frontend/src/views/common/DeAppApply.vue

@@ -8,15 +8,14 @@
     :close-on-press-escape="false"
     size="500px"
     direction="rtl"
-    z-index="1000"
+    :z-index="1000"
   >
     <div class="app-export">
       <el-form
         ref="appSaveForm"
         :model="state.form"
         :rules="state.rule"
-        class="de-form-item app-form create-dialog"
-        size="middle"
+        class="de-form-item app-form"
         label-width="180px"
         label-position="top"
       >
@@ -68,7 +67,6 @@
             :data="state.dsTree"
             :props="state.propsTree"
             @node-click="dsTreeSelect"
-            :filter-method="dsTreeFilterMethod"
             :render-after-expand="false"
             filterable
           >
@@ -82,10 +80,55 @@
             </template>
           </el-tree-select>
         </el-form-item>
+        <el-form-item :label="t('visualization.data_match_type')" prop="dataType">
+          <el-radio-group v-model="state.form.dataType">
+            <el-radio size="small" :label="'datasource'">
+              {{ t('datasource.datasource') }}</el-radio
+            >
+            <el-radio size="small" :label="'dataset'">{{ t('dataset.datalist') }} </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <div class="de-row-rules" style="margin: 0 0 16px">
           <span>{{ t('visualization.datasource_info') }}</span>
         </div>
-        <el-row class="datasource-link">
+        <el-row class="datasource-link" v-if="state.form.dataType === 'datasource'">
+          <el-row class="head">
+            <el-col :span="11">{{ t('visualization.app_datasource') }}</el-col
+            ><el-col :span="2"></el-col
+            ><el-col :span="11">{{ t('visualization.sys_datasource') }}</el-col>
+          </el-row>
+          <el-row
+            :key="index"
+            class="content"
+            v-for="(appDatasource, index) in state.appData.datasourceInfo"
+          >
+            <el-col :span="11">
+              <el-select style="width: 100%" v-model="appDatasource.name" disabled>
+                <el-option
+                  :key="appDatasource.name"
+                  :label="appDatasource.name"
+                  :value="appDatasource.name"
+                >
+                </el-option>
+              </el-select> </el-col
+            ><el-col :span="2" class="icon-center">
+              <Icon name="dv-link-target"
+                ><dvLinkTarget class="svg-icon" style="width: 20px; height: 20px" /></Icon></el-col
+            ><el-col :span="11">
+              <dataset-select
+                ref="datasetSelector"
+                v-model="appDatasource.systemDatasourceId"
+                style="flex: 1"
+                :state-obj="state"
+                themes="light"
+                source-type="datasource"
+                @add-ds-window="addDsWindow"
+                view-id="0"
+              />
+            </el-col>
+          </el-row>
+        </el-row>
+        <el-row class="datasource-link" v-if="state.form.dataType === 'dataset'">
           <el-row class="head">
             <el-col :span="11">{{ t('visualization.app_datasource') }}</el-col
             ><el-col :span="2"></el-col
@@ -160,7 +203,6 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { useCache } from '@/hooks/web/useCache'
 import { isDesktop } from '@/utils/ModelUtil'
 import { filterFreeFolder } from '@/utils/utils'
-const desktop = isDesktop()
 
 const { wsCache } = useCache('localStorage')
 const { t } = useI18n()
@@ -188,7 +230,7 @@ const props = defineProps({
   }
 })
 
-const { componentData, canvasViewInfo, curCanvasType, themes } = toRefs(props)
+const { curCanvasType } = toRefs(props)
 const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
 
 const dvPreName = computed(() =>
@@ -218,7 +260,8 @@ const state = reactive({
     pid: '',
     name: t('visualization.new'),
     datasetFolderPid: null,
-    datasetFolderName: null
+    datasetFolderName: null,
+    dataType: 'datasource'
   },
   rule: {
     name: [
@@ -252,6 +295,11 @@ const state = reactive({
         message: t('visualization.select_ds_group_folder'),
         trigger: 'blur'
       }
+    ],
+    dataType: [
+      {
+        required: true
+      }
     ]
   }
 })
@@ -298,6 +346,7 @@ const dfs = (arr: BusiTreeNode[]) => {
 const init = params => {
   state.appApplyDrawer = true
   state.form = params.base
+  state.form.dataType = 'datasource'
   state.appData.datasourceInfo = deepCopy(appData.value?.datasourceInfo)
   initData()
 }
@@ -384,7 +433,7 @@ defineExpose({
     transform: translateY(-50%);
     height: 14px;
     width: 2px;
-    background: var(--ed-color-primary, #3370ff);
+    background: #3370ff;
   }
 }
 
@@ -404,6 +453,10 @@ defineExpose({
   font-size: 12px;
   font-weight: 500;
   width: 100%;
+  .head_type {
+    width: 100%;
+    margin-bottom: 16px;
+  }
   .head {
     width: 100%;
   }