添加接口

examples/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <div class="_fc-t-header">
+        <!-- <div class="_fc-t-header">
             <img class="_fc-t-logo" src="https://pro.form-create.com/doc/logo.png">
             <div class="_fc-t-name">FcDesigner Pro | <span style="color: #387BF6;font-size:14px;">Element Plus 版</span>
             </div>
@@ -65,7 +65,7 @@
                     </template>
                 </el-switch>
             </div>
-        </div>
+        </div> -->
         <fc-designer ref="designer" :theme="theme" :list="list" @save="onSave" @switchForm="switchForm" :field="field"
                      :locale="locale" :handle="handle" :config="config">
             <template #block_fff="scope">

package.json

@@ -120,6 +120,7 @@
         "@form-create/element-ui": "^3.2.8",
         "@form-create/utils": "^3.1.23",
         "@form-create/vant": "^3.2.8",
+        "axios": "^1.9.0",
         "dayjs": "^1.11.13",
         "js-beautify": "^1.15.1",
         "jsbarcode": "^3.11.6",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@form-create/vant':
         specifier: ^3.2.8
         version: 3.2.22(vue@3.5.13(typescript@4.9.5))
+      axios:
+        specifier: ^1.9.0
+        version: 1.9.0
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -1635,6 +1638,9 @@ packages:
   aws4@1.13.2:
     resolution: {integrity: sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==}
 
+  axios@1.9.0:
+    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
+
   babel-eslint@10.1.0:
     resolution: {integrity: sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==}
     engines: {node: '>=6'}
@@ -3398,6 +3404,10 @@ packages:
     resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
     engines: {node: '>= 0.12'}
 
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -5564,6 +5574,9 @@ packages:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
@@ -8984,6 +8997,14 @@ snapshots:
 
   aws4@1.13.2: {}
 
+  axios@1.9.0:
+    dependencies:
+      follow-redirects: 1.15.9(debug@4.4.0)
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   babel-eslint@10.1.0(eslint@7.32.0):
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -10985,7 +11006,7 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 2.3.8
 
-  follow-redirects@1.15.9(debug@4.4.0(supports-color@6.1.0)):
+  follow-redirects@1.15.9(debug@4.4.0):
     optionalDependencies:
       debug: 4.4.0(supports-color@6.1.0)
 
@@ -11012,6 +11033,13 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
   forwarded@0.2.0: {}
 
   fraction.js@4.3.7: {}
@@ -11461,9 +11489,9 @@ snapshots:
 
   http-parser-js@0.5.10: {}
 
-  http-proxy-middleware@0.19.1(debug@4.4.0(supports-color@6.1.0))(supports-color@6.1.0):
+  http-proxy-middleware@0.19.1(debug@4.4.0)(supports-color@6.1.0):
     dependencies:
-      http-proxy: 1.18.1(debug@4.4.0(supports-color@6.1.0))
+      http-proxy: 1.18.1(debug@4.4.0)
       is-glob: 4.0.3
       lodash: 4.17.21
       micromatch: 3.1.10(supports-color@6.1.0)
@@ -11474,17 +11502,17 @@ snapshots:
   http-proxy-middleware@1.3.1(debug@4.4.0):
     dependencies:
       '@types/http-proxy': 1.17.16
-      http-proxy: 1.18.1(debug@4.4.0(supports-color@6.1.0))
+      http-proxy: 1.18.1(debug@4.4.0)
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.8
     transitivePeerDependencies:
       - debug
 
-  http-proxy@1.18.1(debug@4.4.0(supports-color@6.1.0)):
+  http-proxy@1.18.1(debug@4.4.0):
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.9(debug@4.4.0(supports-color@6.1.0))
+      follow-redirects: 1.15.9(debug@4.4.0)
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -13362,6 +13390,8 @@ snapshots:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  proxy-from-env@1.1.0: {}
+
   prr@1.0.1: {}
 
   pseudomap@1.0.2: {}
@@ -14997,7 +15027,7 @@ snapshots:
       del: 4.1.1
       express: 4.21.2(supports-color@6.1.0)
       html-entities: 1.4.0
-      http-proxy-middleware: 0.19.1(debug@4.4.0(supports-color@6.1.0))(supports-color@6.1.0)
+      http-proxy-middleware: 0.19.1(debug@4.4.0)(supports-color@6.1.0)
       import-local: 2.0.0
       internal-ip: 4.3.0
       ip: 1.1.9

src/assets/svg/dv-folder.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 3C0.75 2.58579 1.08579 2.25 1.5 2.25H7.78647C8.07055 2.25 8.33025 2.4105 8.45729 2.66459L9 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V15C17.25 15.4142 16.9142 15.75 16.5 15.75H1.5C1.08579 15.75 0.75 15.4142 0.75 15V3Z" fill="#FFA53D"/>
+<path d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V15C17.25 15.4142 16.9142 15.75 16.5 15.75H1.5C1.08579 15.75 0.75 15.4142 0.75 15V4.5Z" fill="#FFC60A"/>
+</svg>

src/assets/svg/icon_dataset.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_181_24877)">
+<path d="M0 4C0 1.79086 2.13127 0 4.76033 0H19.2397C21.8687 0 24 1.79086 24 4V20C24 22.2091 21.8687 24 19.2397 24H4.76033C2.13127 24 0 22.2091 0 20V4Z" fill="#16c0ff"/>
+<path d="M4.66669 9.09589C4.66669 8.83447 4.81949 8.59716 5.05749 8.48898L11.7242 5.45868C11.8994 5.37901 12.1006 5.37901 12.2759 5.45868L18.9426 8.48898C19.1806 8.59716 19.3334 8.83447 19.3334 9.0959V15.5879C19.3334 15.8404 19.1907 16.0713 18.9648 16.1842L12.2982 19.5175C12.1105 19.6114 11.8896 19.6114 11.7019 19.5175L5.03521 16.1842C4.80936 16.0713 4.66669 15.8404 4.66669 15.5879V9.09589ZM16.8119 8.98512L12 6.7979L7.16215 8.99693L11.9733 11.0694L16.8119 8.98512ZM12.6667 12.2225V17.8426L18 15.1759V9.9251L12.6667 12.2225ZM6.00002 9.9481V15.1759L11.3334 17.8426V12.2455L6.00002 9.9481Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_181_24877">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/FcDesigner.vue

@@ -90,7 +90,9 @@
                             </div>
                         </el-tooltip>
                     </el-aside>
+                    <!-- 编辑菜单 -->
                     <el-aside class="_fc-l"  v-show="!hiddenLeft" :width="activeModule === 'language' ? '450px' : '266px'">
+                       
                         <div class="_fc-l-close" @click="hiddenLeft = true"><i class="fc-icon icon-arrow"></i></div>
                         <AiChat v-if="activeModule === 'ai'"></AiChat>
                         <LanguageConfig v-if="activeModule === 'language'"></LanguageConfig>
@@ -200,7 +202,127 @@
                                 </template>
                             </el-main>
                             <el-main v-if="activeMenuTab === 'field'">
-                                <FieldList :field="fieldRef"></FieldList>
+                                <el-select v-model="eventKey" clearable filterable
+                                    style="width: 240px; margin: 12px"  
+                                    @change="dsClick">
+                                    <el-option
+                                        v-for="item in datasetData"
+                                        :key="item.table_id"
+                                        :label="item.group_name"
+                                        :value="item.table_id"
+                                    />
+                                </el-select>
+                                <!-- <el-popover
+                                    ref="datasetSelectorPopover"
+                                    trigger="click"
+                                    placement="bottom-start"
+                                    :width="260"
+                                    popper-class="customDatasetSelect"
+                                    :show-arrow="false"
+                                    @show="onPopoverShow"
+                                    @hide="onPopoverHide"
+                                    :effect="'white'"
+                                    :offset="4"
+                                    >
+                                    <template #reference>
+                                        <el-form ref="formRef" :model="form">
+                                          <el-form-item prop="name" :rules="rules">
+                                            <el-input
+                                            style="width: 90%;margin:10px auto 0"
+                                            size="middle"
+                                            :effect="'white'"
+                                            v-model="selectedNodeName"
+                                            class="data-set-dark"
+                                            @focus="handleFocus"
+                                            :placeholder="'选择数据集'"
+                                            >
+                                            <template #suffix>
+                                                <el-icon
+                                                v-show="!disabled"
+                                                class="input-arrow-icon"
+                                                :class="{ reverse: _popoverShow }"
+                                                >
+                                                <ArrowDown />
+                                                </el-icon>
+                                                <el-icon
+                                                v-show="!disabled"
+                                                v-if="clearShow"
+                                                class="input-custom-clear-icon"
+                                                @click="handleClear"
+                                                >
+                                                <CircleClose />
+                                                </el-icon>
+                                            </template>
+                                            </el-input>
+                                        </el-form-item>
+                                        </el-form>
+                                    </template>
+                                    <template #default>
+                                        <el-container :class="themes">
+                                        <el-header>
+                                            <div class="m-title" :class="{ dark: themes === 'dark' }">
+                                            <div>数据集</div>
+                                            <el-button type="primary" link class="refresh-btn" @click="refresh">
+                                               刷新
+                                            </el-button>
+                                            </div>
+                                            <el-input
+                                            size="middle"
+                                            :effect="themes"
+                                            v-model="searchStr"
+                                            :placeholder="t('dataset.search')"
+                                            :prefix-icon="Search"
+                                            clearable
+                                            />
+                                        </el-header>
+                                        <el-main :class="{ dark: themes === 'dark' }" style="padding:5px">
+                                            <el-scrollbar max-height="252px" always>
+                                            <div class="m-loading" v-if="loadingDatasetTree" v-loading="loadingDatasetTree"></div>
+                                            <div class="empty-info" v-if="showEmptyInfo">{{ emptyMsg }}</div>
+                                         
+                                            <el-tree
+                                                :class="{ dark: themes === 'dark' }"
+                                                ref="datasetSelector"
+                                                node-key="id"
+                                                :data="computedTree"
+                                                :teleported="false"
+                                                :props="dsSelectProps"
+                                                :render-after-expand="false"
+                                                filterable
+                                                @node-click="dsClick"
+                                                :filter-node-method="filterNode"
+                                                empty-text="暂无相关数据"
+                                            >
+                                                <template #default="{ node, data }">
+                                                <div
+                                                    class="tree-row-item"
+                                                    :title="node.label"
+                                                    :class="{ dark: themes === 'dark', active: modelValue === data.id }"
+                                                >
+                                                    <div class="m-icon">
+                
+                                                    <el-icon v-if="!data.leaf">
+                                                        <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
+                                                    </el-icon>
+                                                    <el-icon v-if="data.leaf">
+                                                        <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
+                                                    </el-icon>
+                                                    </div>
+                                                    {{ node.label }}
+
+                                                    <el-icon class="checked-item" v-if="modelValue === data.id">
+                                                    <Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
+                                                    </el-icon>
+                                                </div>
+                                                </template>
+                                            </el-tree>
+                                            </el-scrollbar>
+                                        </el-main>
+                                        </el-container>
+                                    </template>                          
+                                </el-popover>   -->
+                                <!-- <FieldList :field="fieldRef"></FieldList> -->
+                                 <FieldList :field="fieldData"></FieldList>
                             </el-main>
                             <el-main v-if="activeMenuTab === 'tree'">
                                 <el-tree
@@ -615,11 +737,6 @@
         </el-config-provider>
     </el-container>
 </template>
-
-<style>
-
-</style>
-
 <script>
 // +-----------------------------------------------------------------------
 // | FormCreate商业版 [ 让表单设计更简单 ]
@@ -630,7 +747,10 @@
 // +----------------------------------------------------------------------
 // | Author: FormCreate Team <admin@form-create.com>
 // +----------------------------------------------------------------------
+
 import form from '../config/base/form';
+// import dvFolder from '@/assets/svg/dv-folder.svg'
+// import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import field from '../config/base/field';
 import style from '../config/base/style';
 import advanced from '../config/base/advanced';
@@ -710,7 +830,7 @@ import SlotsConfig from './SlotsConfig.vue';
 import QuickLayout from './QuickLayout.vue';
 import PrintForm from './PrintForm.vue';
 import AiChat from './ai/AiChat.vue';
-
+import axios from 'axios'
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml);
 
@@ -758,6 +878,7 @@ export default defineComponent({
     props: {
         menu: Array,
         field: Array,
+        appId: String,
         list: Array,
         theme: String,
         height: [String, Number],
@@ -772,6 +893,23 @@ export default defineComponent({
         locale: Object,
         handle: Array
     },
+    data() {
+        return {
+            value1:'',
+            modelValue: '',
+            selectedNodeName: '',
+            datasetData: [],
+            datasetInfo:{},
+            dsSelectProps: {
+                label: 'name',
+                children: 'children',
+                value: 'id',
+                isLeaf: node => !node.children?.length
+            },
+            fieldData:[]
+   
+        }
+    },
     emits: ['active', 'create', 'copy', 'delete', 'drag', 'inputData', 'inputPageData', 'save', 'clear', 'switchForm', 'copyRule', 'pasteRule', 'sortUp', 'sortDown', 'changeDevice', 'previewSubmit', 'previewReset'],
     setup(props) {
         let onlyPC;
@@ -786,6 +924,7 @@ export default defineComponent({
         provide('fcx', fcx);
         provide('designer', vm);
 
+      
         const configRef = toRef(props, 'config', {});
         const theme = toRef(props, 'theme');
         const fieldRef = toRef(props, 'field', []);
@@ -3264,6 +3403,7 @@ export default defineComponent({
         }
     },
     created() {
+        this.getInit()
         // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         // 本软件商业授权机制，没有任何影响，甲方和第三方不得进行反编译、逆向工程、破解或篡改本软件的授权机制。
         /* eslint-disable */
@@ -3342,6 +3482,128 @@ export default defineComponent({
     unmounted() {
         document.removeEventListener('keydown', this.bindHotkey);
         document.removeEventListener('paste', this.bindPaste);
+    },
+    methods: {
+        onPopoverShow() {
+        },
+        onPopoverHide() {
+        },
+        getInit(){
+            axios.get('http://192.168.1.38:8100/datasetData/getTablesByAppId', { 
+                headers: { 
+                    'X-De-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsIm9pZCI6MX0.i8pMPviPZoQyjXML3dLfLek4XML2acUf-x0K90u9KoY'  
+                },
+                params: {
+                    appid: '1907238244651679745'
+                }
+            }).then(response => { 
+            this.datasetData = response.data.data
+                console.log(this.datasetData);  
+            }).catch(error => { 
+                console.error(' 请求出错:', error); 
+            }); 
+        },
+
+        dsClick(id) {
+            this.onDatasetChange(id)
+            this.datasetData.forEach(element => {
+                if(element.id == id){
+                    this.datasetInfo = element
                 }
             });
+            console.log(data);
+            // if (data.leaf) {
+            //     if (this.modelValue !== data.id) {
+            //      
+            //     }
+            //     //选中赋值
+            //     // _modelValue.value = data.id
+            //     this.modelValue =  data.id
+            //     this.selectedNodeName =  data.name
+            //     // //关闭弹窗
+            //     // datasetSelectorPopover.value?.hide()
+            //     this.$refs.datasetSelectorPopover.hide()
+            // }
+        },
+        onDatasetChange(id){
+            this.fieldData = []
+            axios.post('http://192.168.1.38:8100/chart/listByDQ/'+ id +'/00',  { 
+                type: "table-info",
+            }, { 
+                headers: { 
+                    'X-De-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjEsIm9pZCI6MX0.i8pMPviPZoQyjXML3dLfLek4XML2acUf-x0K90u9KoY'  
+                } 
+            }).then(response => { 
+                if(response.data.data.dimensionList.length>0){
+                    this.fieldData.push({
+                        label:'维度',
+                        children:[]
+                    })
+                    let dimensionList = response.data.data.dimensionList
+                    dimensionList.forEach(element => {
+                        element.label = element.name
+                        element.item =  'input',
+                        element.field =  element.originName
+                        element.update = {
+                            disabled: true
+                        }
+                        this.fieldData[0].children.push(element)
+                    });
+                }
+                if(response.data.data.quotaList.length>0){
+                    this.fieldData.push({
+                        label:'指标',
+                        children:[]
+                    })
+                    let quotaList = response.data.data.quotaList
+                    quotaList.forEach(element => {
+                        element.label = element.name
+                        element.item =  'input',
+                        element.field =  element.originName
+                        element.update = {
+                            disabled: true
+                        }
+                        this.fieldData[1].children.push(element)
+                    });
+                }
+            }).catch(error => { 
+                console.error(' 请求出错:', error); 
+            }); 
+            
+        }
+
+
+       
+
+    },
+});
 </script>
+<style>
+.m-title{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 28px;
+    padding-top: 8px;
+    color: #1f2329;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+ .tree-row-item{
+    display: flex;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    padding-right: 11px;
+}
+</style>

src/locale/zh-cn.js

@@ -558,7 +558,7 @@ const ZhCn = {
         subform: '子表单',
         other: '其他',
         model: '弹窗',
-        field: '字段',
+        field: '数据集',
         variable: '变量',
         disabled: '禁用',
         enable: '启用',