|
|
@@ -0,0 +1,262 @@
|
|
|
+<template>
|
|
|
+ <el-scrollbar class="w-full box-border p-12px">
|
|
|
+ <div class="view-data-setter">
|
|
|
+ <section class="section-block">
|
|
|
+ <div class="section-title">{{ texts.basicConfig }}</div>
|
|
|
+
|
|
|
+ <el-form label-position="top">
|
|
|
+ <el-form-item :label="texts.code">
|
|
|
+ <VarInput v-model="formData.code" :placeholder="texts.codePlaceholder" class="w-full" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item :label="texts.resultType">
|
|
|
+ <el-select v-model="formData.result_type" class="w-full">
|
|
|
+ <el-option
|
|
|
+ v-for="option in resultTypeOptions"
|
|
|
+ :key="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ :value="option.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item :label="texts.pageSize">
|
|
|
+ <el-input-number
|
|
|
+ v-model="formData.page_size"
|
|
|
+ :min="1"
|
|
|
+ :max="9999"
|
|
|
+ class="w-full"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="分页">
|
|
|
+ <VarInput
|
|
|
+ v-model="formData.index_variable.value"
|
|
|
+ :placeholder="texts.variableValue"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section v-if="formData.result_type === 'tree'" class="section-block">
|
|
|
+ <div class="section-title">{{ texts.treeConfig }}</div>
|
|
|
+
|
|
|
+ <el-form label-position="top">
|
|
|
+ <div class="grid-row">
|
|
|
+ <el-form-item :label="texts.treeFieldId" class="grid-col">
|
|
|
+ <VarInput
|
|
|
+ v-model="tree_config.fields.id"
|
|
|
+ :placeholder="texts.treeFieldIdPlaceholder"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item :label="texts.treeFieldParentId" class="grid-col">
|
|
|
+ <VarInput
|
|
|
+ v-model="tree_config.fields.parentId"
|
|
|
+ :placeholder="texts.treeFieldParentIdPlaceholder"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid-row">
|
|
|
+ <el-form-item :label="texts.treeFieldChildren" class="grid-col">
|
|
|
+ <VarInput
|
|
|
+ v-model="tree_config.fields.children"
|
|
|
+ :placeholder="texts.treeFieldChildrenPlaceholder"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item :label="texts.treeFieldText" class="grid-col">
|
|
|
+ <VarInput
|
|
|
+ v-model="tree_config.fields.text"
|
|
|
+ :placeholder="texts.treeFieldTextPlaceholder"
|
|
|
+ class="w-full"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-block">
|
|
|
+ <InputVariables v-model="formData.variables" />
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section-block">
|
|
|
+ <div class="section-title">{{ texts.outputs }}</div>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li v-for="output in formData.outputs" :key="output.name">
|
|
|
+ <div>
|
|
|
+ <span class="text-#333">{{ output.name }}</span>
|
|
|
+ <span class="text-#999 ml-8px">{{ output.type }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-#666">{{ output.describe }}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="output-preview">
|
|
|
+ <div class="output-preview__title">{{ texts.outputPreview }}</div>
|
|
|
+ <CodeEditor
|
|
|
+ :model-value="preCode"
|
|
|
+ language="json"
|
|
|
+ :tools="false"
|
|
|
+ :copy-code="false"
|
|
|
+ :allow-fullscreen="false"
|
|
|
+ :allow-change-language="false"
|
|
|
+ :read-only="true"
|
|
|
+ :height="220"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed } from 'vue'
|
|
|
+
|
|
|
+import CodeEditor from '@/nodes/_base/CodeEditor.vue'
|
|
|
+import InputVariables from '@/nodes/_base/InputVariables.vue'
|
|
|
+import VarInput from '@/nodes/_base/VarInput.vue'
|
|
|
+import { useI18n } from '@/composables/useI18n'
|
|
|
+import { useSetterModel } from '../_shared/useSetterModel'
|
|
|
+
|
|
|
+import type { ViewDataData, ViewDataResultType } from './index'
|
|
|
+import { createDefaultViewDataTreeConfig } from './index'
|
|
|
+
|
|
|
+interface Emits {
|
|
|
+ (e: 'update', value: ViewDataData): void
|
|
|
+}
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ data: ViewDataData
|
|
|
+}>()
|
|
|
+
|
|
|
+const emit = defineEmits<Emits>()
|
|
|
+const { t } = useI18n()
|
|
|
+const formData = useSetterModel<ViewDataData>(props, emit)
|
|
|
+
|
|
|
+const texts = computed(() => ({
|
|
|
+ basicConfig: t('pages.viewDataSetter.basicConfig'),
|
|
|
+ code: t('pages.viewDataSetter.code'),
|
|
|
+ codePlaceholder: t('pages.viewDataSetter.codePlaceholder'),
|
|
|
+ resultType: t('pages.viewDataSetter.resultType'),
|
|
|
+ pageSize: t('pages.viewDataSetter.pageSize'),
|
|
|
+ treeConfig: t('pages.viewDataSetter.treeConfig'),
|
|
|
+ treeFieldId: t('pages.viewDataSetter.treeFieldId'),
|
|
|
+ treeFieldIdPlaceholder: t('pages.viewDataSetter.treeFieldIdPlaceholder'),
|
|
|
+ treeFieldParentId: t('pages.viewDataSetter.treeFieldParentId'),
|
|
|
+ treeFieldParentIdPlaceholder: t('pages.viewDataSetter.treeFieldParentIdPlaceholder'),
|
|
|
+ treeFieldChildren: t('pages.viewDataSetter.treeFieldChildren'),
|
|
|
+ treeFieldChildrenPlaceholder: t('pages.viewDataSetter.treeFieldChildrenPlaceholder'),
|
|
|
+ treeFieldText: t('pages.viewDataSetter.treeFieldText'),
|
|
|
+ treeFieldTextPlaceholder: t('pages.viewDataSetter.treeFieldTextPlaceholder'),
|
|
|
+ indexVariable: t('pages.viewDataSetter.indexVariable'),
|
|
|
+ indexVariableDefaultDescribe: t('pages.viewDataSetter.indexVariableDefaultDescribe'),
|
|
|
+ variableName: t('pages.viewDataSetter.variableName'),
|
|
|
+ variableDescribe: t('pages.viewDataSetter.variableDescribe'),
|
|
|
+ variableType: t('pages.viewDataSetter.variableType'),
|
|
|
+ variableValue: t('pages.viewDataSetter.variableValue'),
|
|
|
+ outputs: t('pages.viewDataSetter.outputs'),
|
|
|
+ outputPreview: t('pages.viewDataSetter.outputPreview'),
|
|
|
+ resultTypeObject: t('pages.viewDataSetter.resultTypeObject'),
|
|
|
+ resultTypeArray: t('pages.viewDataSetter.resultTypeArray'),
|
|
|
+ resultTypeTree: t('pages.viewDataSetter.resultTypeTree')
|
|
|
+}))
|
|
|
+
|
|
|
+const resultTypeOptions = computed<Array<{ label: string; value: ViewDataResultType }>>(() => [
|
|
|
+ { label: texts.value.resultTypeObject, value: 'object' },
|
|
|
+ { label: texts.value.resultTypeArray, value: 'array' },
|
|
|
+ { label: texts.value.resultTypeTree, value: 'tree' }
|
|
|
+])
|
|
|
+
|
|
|
+const preCode = `{
|
|
|
+ // "数据列表"
|
|
|
+ "viewTable": [],
|
|
|
+ "viewName": "视图名称",
|
|
|
+ "totalCount": 0
|
|
|
+}`
|
|
|
+
|
|
|
+const tree_config = computed({
|
|
|
+ get() {
|
|
|
+ return formData.value.tree_config?.fields
|
|
|
+ ? formData.value.tree_config
|
|
|
+ : createDefaultViewDataTreeConfig()
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ formData.value.tree_config = value
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.view-data-setter {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-block {
|
|
|
+ padding-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-col {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-col--sm {
|
|
|
+ max-width: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.index-variable-card {
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid #eaecf0;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.output-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.output-item {
|
|
|
+ padding: 12px 14px;
|
|
|
+ border: 1px solid #eaecf0;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.output-preview {
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.output-preview__title {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #475467;
|
|
|
+}
|
|
|
+</style>
|