merge

.vscode/extensions.json

@@ -9,6 +9,7 @@
     "antfu.iconify",
     "antfu.unocss",
     "mikestead.dotenv",
-    "vue.vscode-typescript-vue-plugin"
+    "vue.vscode-typescript-vue-plugin",
+    "ms-ceintl.vscode-language-pack-zh-hans"
   ]
 }

src/api/formdesign/index.ts

@@ -1,56 +1,53 @@
 import { defHttp } from '@/utils/http/axios';
-import { DemoOptionsItem, selectParams, AccountListGetResultModel, AccountParams,NoOptionsParam } from './model/index';
+import {
+  DemoOptionsItem,
+  selectParams,
+  AccountListGetResultModel,
+  AccountParams,
+  NoOptionsParam,
+} from './model/index';
 
 enum Api {
   FORMSTYPES_LIST = '/api/SysDataItemDetail/Load', //字典
   GETDATABASETABLE_LIST = '/api/SysDatabaseLink/LoadDataBaseLinkTree', //获取数据库
   FORMS_LIST = '/api/FormScheme/LoadFormPage', //查询表单列表
-  DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage',  //数据对象选择表
+  DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage', //数据对象选择表
-  GETIMPORTDATA_FORM = '/api/FormModule/GetTableList',  // 查询导入数据表列表
+  GETIMPORTDATA_FORM = '/api/FormModule/GetTableList', // 查询导入数据表列表
   IMPORTDATABASE_TABLE = '/api/CodeTable/ImportTable?dbCode=', //导入数据表
-  OUTKEY_LIST = '/api/CodeTable/GetForms',  //获取数据表
+  OUTKEY_LIST = '/api/CodeTable/GetForms', //获取数据表
   GETBASE_LIST = '/api/FormScheme/GetForm', //获取列表详情
-  ADDFORM_DATA = '/api/FormScheme/AddForm',  //新增表单设计
+  ADDFORM_DATA = '/api/FormScheme/AddForm', //新增表单设计
   EDITFORM_DATA = '/api/FormScheme/UpdateForm?id=', //编辑表单设计
-  ADDSql_DATA = '/api/FormScheme/GetDataColName?dbCode=',  // 添加编辑SQL  
+  ADDSql_DATA = '/api/FormScheme/GetDataColName?dbCode=', // 添加编辑SQL
 }
-
-
 /**
  * @description: Get sample options value
  */
 export const getFormsTypeList = (params?: selectParams) =>
   defHttp.get<DemoOptionsItem[]>({ url: Api.FORMSTYPES_LIST, params });
- 
 export const getFormGroupList = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.FORMS_LIST, params });
- 
 export const getDataBaseTableList = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.DATABASE_LIST, params });
-  
 export const getOutKeyList = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.OUTKEY_LIST, params });
-
 export const getBaseConfigList = (params: NoOptionsParam) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.GETBASE_LIST, params });
-
 export const addFormDesignData = (params: NoOptionsParam) =>
   defHttp.post<AccountListGetResultModel>({ url: Api.ADDFORM_DATA, params });
-
 export const editFormDesignData = (params: NoOptionsParam) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.EDITFORM_DATA+params.info.id, params }); 
+  defHttp.post<AccountListGetResultModel>({ url: Api.EDITFORM_DATA + params.info.id, params });
-
 export const addFormSqlData = (params: NoOptionsParam) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.ADDSql_DATA+params.dbCode+"&sql="+params.sql, params }); 
+  defHttp.post<AccountListGetResultModel>({
-
+    url: Api.ADDSql_DATA + params.dbCode + '&sql=' + params.sql,
+    params,
+  });
 export const getImportBaseTableList = (params: NoOptionsParam) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.GETIMPORTDATA_FORM, params });
-
 export const importDataBaseTable = (params: NoOptionsParam) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });  
+  defHttp.post<AccountListGetResultModel>({
-  
+    url: Api.IMPORTDATABASE_TABLE + params.dbCode,
+    params,
+  });
 export const getDataBaseCodeList = (params: NoOptionsParam) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLE_LIST, params });
-
-
- 

src/api/formdesign/model/index.ts

@@ -6,8 +6,11 @@ export interface DemoOptionsItem {
 }
 
 export interface NoOptionsParam {
+  id: string;
   info: string;
   scheme: string;
+  dbCode: string;
+  sql: string;
 }
 
 export interface selectParams {
@@ -28,6 +31,7 @@ export interface AccountListItem {
   icon: string;
   component: string;
   permission: string;
+  scheme: string;
 }
 /**
  * @description: Request list return value

src/api/formrender/index.ts

@@ -0,0 +1,17 @@
+import { defHttp } from '@/utils/http/axios';
+import { AccountListGetResultModel, AccountListItem, AccountParams } from './model/index';
+
+enum Api {
+  ADDFORMDATA = '/api/FormScheme/SaveForm', //获取数据库
+  GETDESIGNDATA = '/api/FormModule/GetEntityByCode', //获取设计数据
+  GETFORMPAGEDATA = '/api/FormScheme/GetFormDataPage?id=fb572b6a-5cfd-4763-bdf5-4aa10fa8edb4', //获取表单分页数据
+}
+/**
+ * @description: Get sample options value
+ */
+export const getFormsDesignData = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel[]>({ url: Api.GETDESIGNDATA, params });
+export const getFormsPageData = (params: AccountParams) =>
+  defHttp.post<AccountListGetResultModel[]>({ url: Api.GETFORMPAGEDATA, params });
+export const addFormData = (params: AccountListItem) =>
+  defHttp.post<AccountListGetResultModel>({ url: Api.ADDFORMDATA + params.id, params });

src/api/formrender/model/index.ts

@@ -0,0 +1,27 @@
+import { BasicFetchResult } from '@/api/model/baseModel';
+
+export interface AccountListItem {
+  databaseLinkId: string;
+  dbName: string;
+  dbAlias: string;
+  dbType: number;
+  serverAddress: string;
+  dbConnection: string;
+  description: string;
+  scheme: string;
+  formScheme: string;
+  id: string;
+}
+/**
+ * @description: Request list return value
+ */
+export interface AccountParams {
+  id?: string;
+  keyword?: string;
+  page?: string;
+  limit?: string;
+  code?: string;
+  rows?: string;
+}
+
+export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;

src/api/model/baseModel.ts

@@ -5,6 +5,7 @@ export interface BasicPageParams {
 
 export interface BasicFetchResult<T> {
   moduleIds?: any;
+  formScheme?: any;
   elementIds?: any;
   items: T[];
   total: number;

src/store/modules/permission.ts

@@ -27,7 +27,6 @@ import { PageEnum } from '@/enums/pageEnum';
 import { router } from '@/router';
 import { LAYOUT } from '@/router/constant';
 
-
 interface PermissionState {
   // Permission code list
   // 权限代码列表
@@ -131,37 +130,47 @@ export const usePermissionStore = defineStore({
             orderNo: data.item.sortNo,
             icon: data.item.iconName,
             title: data.item.name,
-            elements: data.item && data.item.elements || '',
+            elements: (data.item && data.item.elements) || '',
           },
           name: data.item.name,
           hideMenu: false,
-          path: data.item.url || '/formCallPage?id='+data.item.id+'&name='+data.item.name,
+          path:
+            data.item.url ||
+            '/formCallPage?id=' +
+              data.item.id +
+              '&name=' +
+              data.item.name +
+              '&code=' +
+              data.item.code,
           id: data.item.id || '',
           children: [],
-        }
+        };
         if (data.children && data.children.length > 0) {
-          data.children.forEach(element => {
+          data.children.forEach((element) => {
-            newPath.children.push(normalizeMenu(element))
+            newPath.children.push(normalizeMenu(element));
           });
         }
-        return newPath
+        return newPath;
-      }
+      };
       // 注册路由
       const registeredRoute = (data) => {
-        const modules = import.meta.glob("../../views/demo/**/**/index.vue");
+        const modules = import.meta.glob('../../views/demo/**/**/index.vue');
         router.addRoute('Root', {
           path: data.item.url,
           name: data.item.code,
           meta: {
             title: data.item.name,
             icon: data.item.iconName,
-            elements: data.item.elements
+            elements: data.item.elements,
           },
           // component: data.item.parentId == 0 ? LAYOUT : () => import('../../views/demo' + data.item.url + '/index.vue'),
-          component: data.item.parentId == 0 ? LAYOUT : modules['../../views/demo' + data.item.url + '/index.vue'],
+          component:
-        })
+            data.item.parentId == 0
+              ? LAYOUT
+              : modules['../../views/demo' + data.item.url + '/index.vue'],
+        });
         if (data.children && data.children.length > 0) {
-          data.children.forEach(element => {
+          data.children.forEach((element) => {
             if (element.item.code) {
               router.addRoute(element.item.code, {
                 path: element.item.url,
@@ -169,26 +178,26 @@ export const usePermissionStore = defineStore({
                 meta: {
                   title: element.item.name,
                   icon: element.item.iconName,
-                  elements: element.item.elements
+                  elements: element.item.elements,
                 },
                 // component: () => import('../../views/demo' + element.item.url + '/index.vue')
-                component: modules['../../views/demo' + element.item.url + '/index.vue']
+                component: modules['../../views/demo' + element.item.url + '/index.vue'],
-              })
+              });
             }
           });
         }
         // console.log(router.getRoutes())
-      }
+      };
 
       //通过后端获取菜单
-      var _this = this
+      const _this = this;
       async function buildMenusByServer(list) {
-        const data = await getMenuList()
+        const data = await getMenuList();
-        let moduleRoutes = list
+        const moduleRoutes = list;
         await data.forEach((value) => {
-          moduleRoutes.push(normalizeMenu(value))
+          moduleRoutes.push(normalizeMenu(value));
-          registeredRoute(value)
+          registeredRoute(value);
-        })
+        });
 
         await Promise.all(moduleRoutes);
         // 设置菜单列表
@@ -272,10 +281,7 @@ export const usePermissionStore = defineStore({
           menuList.sort((a, b) => {
             return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0);
           });
-          // 设置菜单列表
+          buildMenusByServer(menuList);
-          // this.setFrontMenuList(menuList);
-          //通过后端api获取菜单列表
-          buildMenusByServer(menuList)
 
           // Convert multi-level routing to level 2 routing
           // 将多级路由转换为 2 级路由

src/views/demo/form-design/components/VFormDesign/components/ImportJsonModal.vue

@@ -90,7 +90,7 @@
         // 导入JSON
         try {
           const editorJsonData = JSON.parse(state.json) as IFormConfig;
-          console.log('editorJsonData',editorJsonData)
+          console.log('editorJsonData', editorJsonData);
           editorJsonData.schemas &&
             formItemsForEach(editorJsonData.schemas, (formItem) => {
               generateKey(formItem);

src/views/demo/form-design/components/VFormDesign/index.vue

@@ -92,11 +92,11 @@
 
   import 'codemirror/mode/javascript/javascript';
 
-  import { ref, provide, Ref ,inject ,watch, computed , defineProps} from 'vue';
+  import { ref, provide, Ref, inject, watch, computed, defineProps } from 'vue';
   import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
 
   import { IVFormComponent, IFormConfig, PropsTabKey } from '../../typings/v-form-component';
-  import { formItemsForEach, generateKey,removeAttrs } from '../../utils';
+  import { formItemsForEach, generateKey, removeAttrs } from '../../utils';
   import { cloneDeep } from 'lodash-es';
   import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig';
   import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
@@ -121,8 +121,8 @@
     saveClick: {
       default: false,
       type: Boolean,
-    }
+    },
-  })
+  });
 
   const { prefixCls } = useDesign('form-design');
   // 子组件实例
@@ -150,43 +150,42 @@
     },
     activeKey: 1,
   });
-  const designSendGrandson = inject('designSendGrandson')
+  const designSendGrandson = inject('designSendGrandson');
-  watch(()=>props.saveClick,(newValue,oldValue)=>{
+  watch(
-      if(newValue){
+    () => props.saveClick,
+    (newValue, oldValue) => {
+      if (newValue) {
         const config = cloneDeep(formConfig.value);
         let formJson = JSON.stringify(removeAttrs(config), null, '\t');
-        designSendGrandson(formJson)
+        designSendGrandson(formJson);
       }
-  },{immediate:true,deep:true})
+    },
+    { immediate: true, deep: true },
+  );
 
   let receivedData = ref();
-  const handleNextStepsData = inject('handleNextStepsData')
+  const handleNextStepsData = inject('handleNextStepsData');
 
   watch(
-      () => handleNextStepsData,// 点击下一步按钮传递的参数
+    () => handleNextStepsData, // 点击下一步按钮传递的参数
-      newVal => {
+    (newVal) => {
-        
+      if (newVal.value && newVal.value.scheme && newVal.value.scheme.scheme) {
-        if(newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
+        receivedData.value = JSON.parse(newVal.value.scheme.scheme);
-          receivedData = JSON.parse(newVal.value.scheme.scheme)
+        //渲染表单
-          //渲染表单
+        const editorJsonData = receivedData.value.formInfo as IFormConfig;
-          const editorJsonData = receivedData.formInfo as IFormConfig;
+        editorJsonData.schemas &&
- 
+          formItemsForEach(editorJsonData.schemas, (formItem) => {
-          editorJsonData.schemas &&
+            generateKey(formItem);
-            formItemsForEach(editorJsonData.schemas, (formItem) => {
+          });
-              generateKey(formItem);
+        setFormConfig({
-            });
+          ...editorJsonData,
-            setFormConfig({
+          activeKey: 1,
-              ...editorJsonData,
+          currentItem: { component: '' },
-              activeKey: 1,
+        });
-              currentItem: { component: '' },
+      }
-            });
+    },
-    
+    { deep: true, immediate: true },
-        }
+  );
- 
-
-      },
-      { deep: true, immediate: true },
-  )
 
   const setFormConfig = (config: IFormConfig) => {
     //外部导入时，可能会缺少必要的信息。
@@ -339,7 +338,6 @@
    * @param Modal {IToolbarMethods}
    */
   const handleOpenModal = (Modal: IToolbarMethods) => {
-    console.log('formConfig',formConfig)
     const config = cloneDeep(formConfig.value);
     Modal?.showModal(config);
   };

src/views/demo/form-design/components/VformRender/index.vue

@@ -3,7 +3,7 @@
 -->
 <template>
   <Modal
-    title="新增数据"
+    title="新增"
     :open="visible"
     @ok="handleGetData"
     @cancel="handleCancel"
@@ -77,13 +77,11 @@
       };
       const handleGetData = async () => {
         const _data = await state.fApi.submit?.();
-        console.log('_data',_data)
         emit('renderdata', _data);
         //jsonModal.value?.showModal?.(_data)
       };
 
       const onSubmit = (_data: IAnyObject) => {
-        
         //
       };
       const onCancel = () => {

src/views/demo/form-design/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <PageWrapper dense >
+  <PageWrapper dense>
     <VFormDesign :saveClick="visible" />
   </PageWrapper>
 </template>
 
 <script lang="ts">
-  import { defineComponent, watch,toRefs,reactive } from 'vue';
+  import { defineComponent, watch, toRefs, reactive } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import VFormDesign from './components/VFormDesign/index.vue';
 
@@ -18,24 +18,25 @@
     props: ['isSubmitClick'],
     setup(_props, { emit }) {
       const state = reactive<{
-        visible: boolean
+        visible: boolean;
       }>({
-        visible: false 
+        visible: false,
       });
 
-      watch(()=>_props.isSubmitClick,(newValue,oldValue)=>{
+      watch(
-         state.visible = newValue
+        () => _props.isSubmitClick,
-         setTimeout(()=>{
+        (newValue, oldValue) => {
-          emit('designformback')
+          state.visible = newValue;
-         },1000)
+          setTimeout(() => {
-         
+            emit('designformback');
-      },{immediate:true,deep:true})
+          }, 1000);
+        },
+        { immediate: true, deep: true },
+      );
 
       return { ...toRefs(state) };
-    }
+    },
-  })
+  });
-  
-
 </script>
 
 <style lang="less" scoped></style>

src/views/demo/form-design/utils/index.ts

@@ -25,7 +25,7 @@ export function generateKey(formItem?: IVFormComponent): string | boolean {
   if (formItem && formItem.component) {
     const key = uniqueId(`${toLine(formItem.component)}_`);
     formItem.key = key;
-    formItem.field = key;
+    formItem.field = formItem.field || key;
 
     return true;
   }

src/views/demo/onlineform/formCall/index.data.ts

@@ -3,7 +3,6 @@ import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 
 export const columns: BasicColumn[] = [
-
   {
     title: '名称',
     dataIndex: 'name',
@@ -26,16 +25,12 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '创建人',
-    dataIndex: 'createUserName'
+    dataIndex: 'createUserName',
   },
   {
     title: '创建时间',
-    dataIndex: 'createDate'
+    dataIndex: 'createDate',
   },
-  // {
-  //   title: '备注',
-  //   dataIndex: 'remark',
-  // },
 ];
 
 export const searchFormSchema: FormSchema[] = [
@@ -46,4 +41,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 },
   },
 ];
-  

src/views/demo/onlineform/formCall/index.vue

@@ -1,52 +1,53 @@
 <template>
   <BasicTable @register="registerTable">
-      <template #bodyCell="{ column, record }">
+    <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
+      <template v-if="column.key === 'action'">
-          <TableAction :actions="[
+        <TableAction
-              {
+          :actions="[
-                label: '编辑',
+            {
-                onClick: handleEdit.bind(null, record),
+              label: '编辑',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              color: 'error',
+              popConfirm: {
+                title: '是否删除该数据',
+                confirm: handleDelete.bind(null, record),
               },
-              {
+            },
-                label: '删除',
+          ]"
-                color: 'error',
+        />
-                popConfirm: {
-                  title: '是否删除该数据',
-                  confirm: handleDelete.bind(null, record),
-                },
-              }
-            ]" />
-        </template>
       </template>
-      <template #toolbar>
+    </template>
-        <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
+    <template #toolbar>
-        
+      <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
-      </template>
+    </template>
-    </BasicTable>
+  </BasicTable>
-    
+  <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
-    <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
-
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, nextTick, unref,reactive } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useRoute } from 'vue-router';
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
-  import { getFormGroupList,getBaseConfigList } from '@/api/formdesign/index';
+  import { getFormsDesignData, getFormsPageData } from '@/api/formrender/index';
-  import { columns, searchFormSchema } from './index.data';
+  import { searchFormSchema } from './index.data';
   import { cloneDeep } from 'lodash-es';
   import VformRender from '../../form-design/components/VformRender/index.vue';
-  import {  IFormConfig,IToolbarMethods } from '../../form-design/typings/v-form-component';
+  import { IFormConfig } from '../../form-design/typings/v-form-component';
+  import { IToolbarMethods } from '../../form-design/typings/form-type';
 
   const eFormPreview = ref<null | IToolbarMethods>(null);
-
   const route = useRoute();
   const paramsId = route.query.id;
-  
+  const callColumns: BasicColumn[] = [];
-  const [registerTable, { reload, getSelectRows }] = useTable({
+  console.log('callColumns', callColumns);
+  console.log('paramsId', paramsId);
+  const [registerTable, { reload, setColumns }] = useTable({
     title: '表单列表',
-    api: getFormGroupList,
+    api: getFormsPageData,
     rowKey: 'f_Id',
-    columns,
+    columns: callColumns,
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
@@ -55,17 +56,17 @@
     showTableSetting: true,
     bordered: true,
     beforeFetch: (data) => {
+      console.log('dabefore', data);
       // 接口请求前 参数处理
       var temp = {
-        page: data.page,
+        id: 'fb572b6a-5cfd-4763-bdf5-4aa10fa8edb4',
-        limit: data.limit,
+        paginationInputDto: {
-        keyWord: data.key,
+          page: data.page,
-        category: data.f_Category
+          rows: data.limit,
+          keyWord: data.key,
+        },
       };
       return temp;
-    },
-    afterFetch: (data) => {    
-      
     },
     handleSearchInfoFn(info) {
       return info;
@@ -95,36 +96,49 @@
   });
 
   const handleAddForm = (Modal: IToolbarMethods) => {
-    console.log('formConfig',formConfig)
+    console.log('formConfig', formConfig);
     const config = cloneDeep(formConfig.value);
     Modal?.showModal(config);
-  }
+  };
   function handleEdit(record: Recordable) {
-      
+    console.log('record', record);
   }
   function handleDelete(record: Recordable) {
     // openAccountModal(true, {
     //   record,
     // });
+    console.log('record', record);
   }
-  function getPublicForm(){
+  function getPublicForm() {
-    getBaseConfigList({ id: "e03bd1db-7a4f-43b2-9e8a-f6cd8c2126be" }).then((res: AreaRespVO[]) =>{
+    let params = {
-      let obj = JSON.parse(res.scheme.scheme)
+      code: 'zbzbtest',
-      console.log('res',obj.formInfo)
+    };
-      if(obj.formInfo.schemas){
+    getFormsDesignData(params).then((res: Recordable) => {
-        obj.formInfo.schemas.forEach(item =>{
+      console.log('res', res);
-          
+      let columnObj = JSON.parse(res.entity.scheme);
-        })
+      console.log('res222', columnObj);
+      let formArr = ref([]);
+      if (columnObj.table.columns) {
+        columnObj.table.columns.forEach((item) => {
+          callColumns.push({
+            title: item.label,
+            dataIndex: item.key,
+          });
+        });
       }
-      formConfig.value.schemas = obj.formInfo.schemas
+      setColumns(callColumns);
-    })
+      reload();
+      console.log('formArr', formArr);
+      console.log('callColumns123', callColumns);
+      // formConfig.value.schemas = obj.formInfo.schemas;
+    });
   }
   //表单填写数据
-  function renderdata(e){
+  function renderdata(e) {
-    console.log('renderdata',e)
+    console.log('renderdata', e);
   }
 
   onMounted(() => {
-    getPublicForm()
+    getPublicForm();
-  })
+  });
 </script>

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -1,19 +1,17 @@
 <template>
   <BasicModal
-      v-bind="$attrs"
+    v-bind="$attrs"
-      @register="registerModal"
+    @register="registerModal"
-      :canFullscreen="false"
+    :canFullscreen="false"
-      :defaultFullscreen="true"
+    :defaultFullscreen="true"
-      :showCancelBtn="false"
+    :showCancelBtn="false"
-      :showOkBtn="false"
+    :showOkBtn="false"
-      :draggable="false"
+    :draggable="false"
-      title="慧创 表单设计"
+    title="慧创 表单设计"
-    >
+  >
     <div :class="`${prefixCls}`">
       <div :class="`${prefixCls}-header`">
-        <div :class="`${prefixCls}-header-logo`">
+        <div :class="`${prefixCls}-header-logo`"> 慧创 表单设计 </div>
-          慧创  表单设计
-        </div>
         <div :class="`${prefixCls}-header-stepsBox`">
           <a-steps
             :current="stepsCurrent"
@@ -23,34 +21,45 @@
               },
               {
                 title: '表单设计',
-              }
+              },
             ]"
-          ></a-steps>
+          />
         </div>
         <div :class="`${prefixCls}-header-btnBox`">
-          <a-button :disabled="stepsCurrent!==1" @click="formPrevClick">上一步</a-button>
+          <a-button :disabled="stepsCurrent !== 1" @click="formPrevClick">上一步</a-button>
-          <a-button :disabled="stepsCurrent==1" @click="formNextClick">下一步</a-button>
+          <a-button :disabled="stepsCurrent == 1" @click="formNextClick">下一步</a-button>
-          <a-button :disabled="stepsCurrent!==1" @click="submitClick" type="primary">保存</a-button>
+          <a-button :disabled="stepsCurrent !== 1" @click="submitClick" type="primary"
+            >保存</a-button
+          >
           <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
         </div>
       </div>
       <div :class="`${prefixCls}-content`">
-        <FormDesign v-show="stepsCurrent==1" :isSubmitClick="isSubmitClick" @designformback="designformback"></FormDesign>
+        <FormDesign
-        <FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" @formDataNoBack="formDataNoBack" />
+          v-show="stepsCurrent == 1"
+          :isSubmitClick="isSubmitClick"
+          @designformback="designformback"
+        />
+        <FormPage
+          v-show="stepsCurrent == 0"
+          :formScheme="formScheme"
+          :isNextSteps="isNextSteps"
+          :isAddVisible="isAddVisible"
+          @form-data-back="handleformData"
+          @form-data-no-back="formDataNoBack"
+        />
       </div>
     </div>
-      
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref,provide,computed } from 'vue';
+  import { ref, provide, computed } from 'vue';
   import { message } from 'ant-design-vue';
 
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import FormPage from './form/index.vue';
-  import FormDesign  from '../../form-design/index.vue';
+  import FormDesign from '../../form-design/index.vue';
-  import { getBaseConfigList, addFormDesignData , editFormDesignData } from '@/api/formdesign/index'
+  import { getBaseConfigList, addFormDesignData, editFormDesignData } from '@/api/formdesign/index';
-
 
   defineOptions({ name: 'FormModal' });
 
@@ -60,213 +69,206 @@
   let formScheme = ref();
 
   let saveFormDatas = ref({});
-  provide("handleNextStepsData", computed(() => saveFormDatas.value));
+  provide(
+    'handleNextStepsData',
+    computed(() => saveFormDatas.value),
+  );
 
-  function designSendGrandson(value){
+  function designSendGrandson(value) {
-    let designTab = JSON.parse(value)
+    let designTab = JSON.parse(value);
-    let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
+    let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
-    schems.formInfo = designTab
+    schems.formInfo = designTab;
 
-    saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
+    saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
-    console.log('孙子传值给我', designTab)
+    console.log('孙子传值给我', designTab);
-    submitSaveClick()
+    submitSaveClick();
 
-    console.log('saveschems',schems)
+    console.log('saveschems', schems);
-    designTab.schemas.forEach(item =>{
+    designTab.schemas.forEach((item) => {});
-      
-    })
   }
-  provide('designSendGrandson', designSendGrandson)
+  provide('designSendGrandson', designSendGrandson);
 
-
+  const [registerModal, { closeModal }] = useModalInner((data: any) => {
-  const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
+    stepsCurrent.value = 0;
-    stepsCurrent.value = 0
+    isSubmitClick.value = false;
-    isSubmitClick.value = false
+    if (data.id) {
-    if(data.id){
+      isAddVisible.value = false;
-      isAddVisible.value = false
+      getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) => {
-      getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) =>{
+        formScheme.value = res;
-        formScheme.value = res
+        saveFormDatas.value = res;
-        saveFormDatas.value = res
+        console.log('res');
-        console.log('res',)
+      });
-      })
+    } else {
-    }else{
+      isAddVisible.value = true;
-      isAddVisible.value = true
       formScheme.value = {
-          "info": {},
+        info: {},
-          "scheme": {}
+        scheme: {},
-      }
+      };
       saveFormDatas.value = {
-          "info": {},
+        info: {},
-          "scheme": {}
+        scheme: {},
-      }
+      };
     }
-
   });
 
-  
   let stepsCurrent = ref();
-  let isNextSteps = ref(false)
+  let isNextSteps = ref(false);
-  let isSubmitClick = ref(false)
+  let isSubmitClick = ref(false);
 
-  function formNextClick(){
+  function formNextClick() {
-    isNextSteps.value = true
+    isNextSteps.value = true;
-    isSubmitClick.value = false
+    isSubmitClick.value = false;
+    console.log('saveFormDatas', saveFormDatas.value);
   }
-  function formPrevClick(){
+  function formPrevClick() {
-    isNextSteps.value = false
+    isNextSteps.value = false;
-    stepsCurrent.value = 0
+    stepsCurrent.value = 0;
   }
 
-  function closeModalClick(){
+  function closeModalClick() {
-    stepsCurrent.value = 1
+    stepsCurrent.value = 1;
-    formScheme = ref()
+    formScheme = ref();
-    isNextSteps.value = false
+    isNextSteps.value = false;
-    closeModal()
+    closeModal();
   }
-  function formDataNoBack(){
+  function formDataNoBack() {
-    isNextSteps.value = false
+    isNextSteps.value = false;
   }
-  function handleformData(data){
+  function handleformData(data) {
-    console.log('emitttt',data)
+    console.log('emitttt', data);
-    stepsCurrent.value = 1
+    stepsCurrent.value = 1;
-    let arr: any[] = []
+    let arr: any[] = [];
-    console.log('adddata',data)
+    console.log('adddata', data);
-    if(data.table){
+    if (data.table) {
-      data.table.forEach(item =>{
+      data.table.forEach((item) => {
         arr.push({
           field: item.field,
           name: item.name,
           relationField: item.relationField,
           relationName: item.relationName,
-          type: item.type
+          type: item.type,
-        })
+        });
-      })
+      });
     }
-    if(isAddVisible.value){ //新增
+    if (isAddVisible.value) {
-      let schems
+      //新增
-      if(saveFormDatas.value.scheme.scheme){
+      let schems;
+      if (saveFormDatas.value.scheme.scheme) {
         schems = JSON.parse(saveFormDatas.value.scheme.scheme) || {
           db: arr,
           rdb: data.connect || [],
           dbCode: data.form.DbCode,
-          formInfo:{}
+          formInfo: {},
-        }
+        };
-        
-        schems.db = arr
-        schems.rdb = data.connect || [],
-        schems.dbCode = data.form.DbCode
-      }else{
 
+        schems.db = arr;
+        (schems.rdb = data.connect || []), (schems.dbCode = data.form.DbCode);
+      } else {
         schems = {
-            db: arr,
+          db: arr,
-            rdb: data.connect || [],
+          rdb: data.connect || [],
-            dbCode: data.form.DbCode,
+          dbCode: data.form.DbCode,
-            formInfo:{}
+          formInfo: {},
-        }
+        };
       }
-      let loginUser = localStorage.getItem('fireUserLoginName')
+      let loginUser = localStorage.getItem('fireUserLoginName');
-      saveFormDatas.value.info = data.form
+      saveFormDatas.value.info = data.form;
-      saveFormDatas.value.info.createUserName = loginUser
+      saveFormDatas.value.info.createUserName = loginUser;
-      saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
 
-      console.log('add',saveFormDatas.value.scheme)
+      console.log('add', saveFormDatas.value.scheme);
-    }else{ //编辑
+    } else {
-      console.log('edit')
+      //编辑
-      let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
+      console.log('edit');
-      schems.db = arr
+      let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
-      schems.rdb = data.connect || [],
+      schems.db = arr;
-      saveFormDatas.value.info.category = data.form.category
+      (schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
-      saveFormDatas.value.info.description = data.form.description
+      saveFormDatas.value.info.description = data.form.description;
-      saveFormDatas.value.info.enabledMark = data.form.enabledMark
+      saveFormDatas.value.info.enabledMark = data.form.enabledMark;
-      saveFormDatas.value.info.name = data.form.name
+      saveFormDatas.value.info.name = data.form.name;
-      saveFormDatas.value.info.DbCode = data.form.DbCode
+      saveFormDatas.value.info.DbCode = data.form.DbCode;
-      saveFormDatas.value.info.formType = data.form.formType
+      saveFormDatas.value.info.formType = data.form.formType;
-      saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
     }
-    
   }
 
-  function submitClick(){
+  function submitClick() {
-    isSubmitClick.value = true
+    isSubmitClick.value = true;
-
-    
   }
-  function designformback(){
+  function designformback() {
-    isSubmitClick.value = false
+    isSubmitClick.value = false;
   }
-  function submitSaveClick(){
+  function submitSaveClick() {
     let param = {
       info: saveFormDatas.value.info,
-      scheme: saveFormDatas.value.scheme
+      scheme: saveFormDatas.value.scheme,
-    }
+    };
-    console.log('param',param)
+    console.log('param', param);
-    if(isAddVisible.value){
+    if (isAddVisible.value) {
-      addFormDesignData( param ).then((res: AreaRespVO[]) =>{
+      addFormDesignData(param).then((res: AreaRespVO[]) => {
-        console.log('addsuccess',res)
+        console.log('addsuccess', res);
-        closeModalClick()
+        closeModalClick();
         message.success('操作成功', 2);
-        emit("submitsuccess")
+        emit('submitsuccess');
-      })
+      });
-    }else{
+    } else {
-      editFormDesignData( param ).then((res: AreaRespVO[]) =>{
+      editFormDesignData(param).then((res: AreaRespVO[]) => {
-        closeModalClick()
+        closeModalClick();
         message.success('操作成功', 2);
-        emit("submitsuccess")
+        emit('submitsuccess');
-      })
+      });
     }
   }
 
   const prefixCls = 'form-box';
 </script>
 <style lang="less" scoped>
-  .form-box{
+  .form-box {
+    position: fixed;
+    z-index: 1111;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    position:fixed;
-    top:0;
-    left: 0;
     background-color: @component-background;
-    z-index: 1111;
 
-    &-header{
+    &-header {
       height: 55px;
 
-      &-logo{
+      &-logo {
-        line-height: 55px;
-        font-size: 18px;
         margin-left: 20px;
+        font-size: 18px;
         font-weight: bold;
+        line-height: 55px;
       }
 
-      &-stepsBox{
+      &-stepsBox {
+        display: flex;
+        position: fixed;
+        top: 0;
+        left: 50%;
+        align-items: center;
         width: 320px;
         height: 56px;
-        position: fixed;
-        left: 50%;
         margin-left: -160px;
-        top: 0;
-        display: flex;
-        align-items: center;
       }
 
-      &-btnBox{
+      &-btnBox {
-        width: 310px;
-        height: 56px;
-        position: fixed;
-        right: 10px;
-        top: 0;
         display: flex;
+        position: fixed;
+        top: 0;
+        right: 10px;
         align-items: center;
         justify-content: space-around;
+        width: 310px;
+        height: 56px;
       }
-
     }
 
-    &-content{
+    &-content {
       height: calc(100% - 55px);
       padding: 10px;
       background-color: @component-background;
     }
   }
-
 </style>

src/views/demo/onlineform/formdesign/form/DataObject.vue

@@ -1,58 +1,59 @@
 <template>
   <BasicModal
-      v-bind="$attrs"
+    v-bind="$attrs"
-      @register="registerImportModal"
+    @register="registerImportModal"
-      :canFullscreen="false"
+    :canFullscreen="false"
-      :defaultFullscreen="false"
+    :defaultFullscreen="false"
-      :maskClosable="false"
+    :maskClosable="false"
-      :width="800"
+    :width="800"
-      title="数据表选择"
+    title="数据表选择"
-      @ok="dataBaseClick"
+    @ok="dataBaseClick"
-    >
+  >
-    <BasicTable @register="registerImportTable"></BasicTable>
+    <BasicTable @register="registerImportTable" />
   </BasicModal>
- 
   <BasicModal
-      v-bind="$attrs"
+    v-bind="$attrs"
-      @register="registerModal"
+    @register="registerModal"
-      :canFullscreen="false"
+    :canFullscreen="false"
-      :defaultFullscreen="false"
+    :defaultFullscreen="false"
-      :maskClosable="false"
+    :maskClosable="false"
-      :width="800"
+    :width="800"
-      title="数据对象选择"
+    title="数据对象选择"
-      @ok="modalSuReClick"
+    @ok="modalSuReClick"
-    >
+  >
-    <BasicTable @register="registerDataTable"></BasicTable>
+    <BasicTable @register="registerDataTable" />
     <template #centerFooter>
       <a-button type="success" @click="handleAddForm"> 导入表 </a-button>
     </template>
-    
   </BasicModal>
-
-  
-
 </template>
 <script lang="ts" setup>
-   import {  ref,defineProps,watch } from 'vue';
+  import { ref } from 'vue';
-  import { columns , searchFormSchema,importColumns  } from './dataobject.data';
+  import { columns, searchFormSchema, importColumns } from './dataobject.data';
   import { BasicTable, useTable } from '@/components/Table';
-  import { getDataBaseTableList,getImportBaseTableList,importDataBaseTable } from '@/api/formdesign/index';
+  import {
-  import { BasicModal,useModal, useModalInner } from '/@/components/Modal';
+    getDataBaseTableList,
+    getImportBaseTableList,
+    importDataBaseTable,
+  } from '@/api/formdesign/index';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
   import { message } from 'ant-design-vue';
+
   const emit = defineEmits(['backrows']);
-  const receiceDbCode = ref()
+  const receiceDbCode = ref();
+  const [registerModal, { closeModal: closeBaseModal }] = useModalInner((data: any) => {
+    receiceDbCode.value = data.dbCode;
+    clearBaseSelectedRowKeys();
+    reload();
+  });
 
-  const [registerModal, { closeModal:closeBaseModal }] = useModalInner((data: any) => {
+  const [registerImportModal, { openModal: openImportTableModal, closeModal: closeImportModal }] =
-    receiceDbCode.value = data.dbCode
+    useModal();
-    clearBaseSelectedRowKeys()
-    reload()
-  })
 
-  const [registerImportModal, {openModal:openImportTableModal , closeModal:closeImportModal }] = useModal()
+  const [
-
+    registerDataTable,
-
+    { reload, clearSelectedRowKeys: clearBaseSelectedRowKeys, getSelectRows: getBaseSelectRows },
-  
+  ] = useTable({
-  const [registerDataTable, { reload,clearSelectedRowKeys:clearBaseSelectedRowKeys, getSelectRows:getBaseSelectRows }] = useTable({
     title: '',
     rowKey: 'id',
     api: getDataBaseTableList,
@@ -62,7 +63,8 @@
     },
     columns,
     size: 'small',
-    rowSelection: {//多选框
+    rowSelection: {
+      //多选框
       type: 'checkbox',
       // type: 'radio',
     },
@@ -70,8 +72,8 @@
     showTableSetting: false,
     canResize: false,
     bordered: true,
-    pagination:{
+    pagination: {
-      pageSize: 10
+      pageSize: 10,
     },
     beforeFetch: (data) => {
       // 接口请求前 参数处理
@@ -79,26 +81,25 @@
         page: data.page,
         limit: data.limit,
         keyWord: data.key,
-        dbCode:  receiceDbCode.value
+        dbCode: receiceDbCode.value,
       };
       return temp;
     },
-    afterFetch: (data) => {
-     
-     
-    }
-    
   });
-  const [registerImportTable, { clearSelectedRowKeys:clearImportSelectedRowKeys, getSelectRows:getImportSelectRows }] = useTable({
+  const [
+    registerImportTable,
+    { clearSelectedRowKeys: clearImportSelectedRowKeys, getSelectRows: getImportSelectRows },
+  ] = useTable({
     title: '',
     rowKey: 'name',
     api: getImportBaseTableList,
     formConfig: {
       labelWidth: 80,
     },
-    columns:importColumns,
+    columns: importColumns,
     size: 'small',
-    rowSelection: {//多选框
+    rowSelection: {
+      //多选框
       type: 'checkbox',
       // type: 'radio',
     },
@@ -106,46 +107,42 @@
     showTableSetting: false,
     canResize: false,
     bordered: true,
-    pagination:{
+    pagination: {
-      pageSize: 10
+      pageSize: 10,
     },
-    beforeFetch: (data) => {
+    beforeFetch: () => {
       var temp = {
-        dbCode:  receiceDbCode.value
+        dbCode: receiceDbCode.value,
       };
       return temp;
-    }
+    },
-  })
+  });
 
-  function modalSuReClick(){
+  function modalSuReClick() {
     let rows = getBaseSelectRows();
     emit('backrows', rows);
-    closeBaseModal()
+    closeBaseModal();
   }
 
-  function handleAddForm(){
+  function handleAddForm() {
-    openImportTableModal(true)
+    openImportTableModal(true);
-    setTimeout(()=>{
+    setTimeout(() => {
-      clearImportSelectedRowKeys()
+      clearImportSelectedRowKeys();
-    },200)
+    }, 200);
   }
-  function dataBaseClick(){
+  function dataBaseClick() {
-    let rows = getImportSelectRows()
+    let rows = getImportSelectRows();
-    console.log('rowww',rows)
+    console.log('rowww', rows);
     let param = {
       dbCode: receiceDbCode.value,
-      tableList: rows
+      tableList: rows,
-    }
+    };
-    importDataBaseTable( param ).then((res: AreaRespVO[]) =>{
+    importDataBaseTable(param).then((res: AreaRespVO[]) => {
-      console.log('res',)
+      console.log('res');
-      message.success('导入成功',2);
+      message.success('导入成功', 2);
-      closeImportModal()
+      closeImportModal();
-      reload()
+      reload();
-    })
+    });
   }
-   
-
 </script>
-<style lang="less">
+<style lang="less"></style>
- 
-</style>

src/views/demo/onlineform/formdesign/form/dataobject.data.ts

@@ -1,9 +1,7 @@
-import { BasicColumn,FormSchema } from '@/components/Table';
+import { BasicColumn, FormSchema } from '@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 
- 
-
 export const columns: BasicColumn[] = [
   {
     title: '表名',
@@ -11,24 +9,24 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '备注',
-    dataIndex: 'description'
+    dataIndex: 'description',
   },
   {
     title: '状态',
     dataIndex: 'state',
     customRender: ({ record }) => {
       const status = record.state;
-      let enable 
+      let enable;
-      if(status == "1"){
+      if (status == '1') {
-        enable = true
+        enable = true;
-      }else{
+      } else {
-        enable = false
+        enable = false;
       }
       const color = enable ? '#67c23a' : '#e6a23c';
       const text = enable ? '同步' : '异步';
       return h(Tag, { color: color }, () => text);
     },
-  }
+  },
 ];
 export const searchFormSchema: FormSchema[] = [
   {
@@ -37,7 +35,6 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Input',
     colProps: { span: 8 },
   },
- 
 ];
 
 export const importColumns: BasicColumn[] = [
@@ -47,9 +44,6 @@ export const importColumns: BasicColumn[] = [
   },
   {
     title: '说明',
-    dataIndex: 'description'
+    dataIndex: 'description',
-  }
+  },
 ];
-
- 
-