merge

设计器字段乱变修改，表单调用完善
2024-04-03 08:33:07 +08:00 · 2024-04-02 17:03:50 +08:00
17 changed files with 503 additions and 452 deletions
--- a/.vscode/extensions.json
+++ b/.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"
  ]
 }
--- a/src/api/formdesign/index.ts
+++ b/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',  //数据对象选择表
-  GETIMPORTDATA_FORM = '/api/FormModule/GetTableList',  // 查询导入数据表列表
+  DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage', //数据对象选择表
+  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 });  
- 
+  defHttp.get<AccountListGetResultModel>({ url: Api.FORMS_LIST, params });
 export const getDataBaseTableList = (params: AccountParams) =>
-  defHttp.get<AccountListGetResultModel>({ url: Api.DATABASE_LIST, params });   
-  
+  defHttp.get<AccountListGetResultModel>({ url: Api.DATABASE_LIST, params });
 export const getOutKeyList = (params: AccountParams) =>
-  defHttp.get<AccountListGetResultModel>({ url: Api.OUTKEY_LIST, params });    
-
+  defHttp.get<AccountListGetResultModel>({ url: Api.OUTKEY_LIST, params });
 export const getBaseConfigList = (params: NoOptionsParam) =>
-  defHttp.get<AccountListGetResultModel>({ url: Api.GETBASE_LIST, params }); 
-
+  defHttp.get<AccountListGetResultModel>({ url: Api.GETBASE_LIST, params });
 export const addFormDesignData = (params: NoOptionsParam) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.ADDFORM_DATA, params }); 
-
+  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 });
-
-
- 
--- a/src/api/formdesign/model/index.ts
+++ b/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
--- a/src/api/formrender/index.ts
+++ b/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 });
--- a/src/api/formrender/model/index.ts
+++ b/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>;
--- a/src/api/model/baseModel.ts
+++ b/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;
--- a/src/store/modules/permission.ts
+++ b/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 => {
-            newPath.children.push(normalizeMenu(element))
+          data.children.forEach((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()
-        let moduleRoutes = list
+        const data = await getMenuList();
+        const moduleRoutes = list;
        await data.forEach((value) => {
-          moduleRoutes.push(normalizeMenu(value))
-          registeredRoute(value)
-        })
+          moduleRoutes.push(normalizeMenu(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);
          });
-          // 设置菜单列表
-          // this.setFrontMenuList(menuList);
-          //通过后端api获取菜单列表
-          buildMenusByServer(menuList)
+          buildMenusByServer(menuList);

          // Convert multi-level routing to level 2 routing
          // 将多级路由转换为 2 级路由
--- a/src/views/demo/form-design/components/VFormDesign/components/ImportJsonModal.vue
+++ b/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);
--- a/src/views/demo/form-design/components/VFormDesign/index.vue
+++ b/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';
@ -120,9 +120,9 @@
    },
    saveClick: {
      default: false,
-      type: Boolean,  
-    }
-  })
+      type: Boolean,
+    },
+  });

  const { prefixCls } = useDesign('form-design');
  // 子组件实例
@ -150,43 +150,42 @@
    },
    activeKey: 1,
  });
-  const designSendGrandson = inject('designSendGrandson')
-  watch(()=>props.saveClick,(newValue,oldValue)=>{
-      if(newValue){
+  const designSendGrandson = inject('designSendGrandson');
+  watch(
+    () => 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')
- 
-  watch(
-      () => handleNextStepsData,// 点击下一步按钮传递的参数
-      newVal => {
-        
-        if(newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
-          receivedData = JSON.parse(newVal.value.scheme.scheme)
-          //渲染表单
-          const editorJsonData = receivedData.formInfo as IFormConfig;
- 
-          editorJsonData.schemas &&
-            formItemsForEach(editorJsonData.schemas, (formItem) => {
-              generateKey(formItem);
-            });
-            setFormConfig({
-              ...editorJsonData,
-              activeKey: 1,
-              currentItem: { component: '' },
-            });
-    
-        }
- 
+  const handleNextStepsData = inject('handleNextStepsData');

-      },
-      { deep: true, immediate: true },
-  )
+  watch(
+    () => handleNextStepsData, // 点击下一步按钮传递的参数
+    (newVal) => {
+      if (newVal.value && newVal.value.scheme && newVal.value.scheme.scheme) {
+        receivedData.value = JSON.parse(newVal.value.scheme.scheme);
+        //渲染表单
+        const editorJsonData = receivedData.value.formInfo as IFormConfig;
+        editorJsonData.schemas &&
+          formItemsForEach(editorJsonData.schemas, (formItem) => {
+            generateKey(formItem);
+          });
+        setFormConfig({
+          ...editorJsonData,
+          activeKey: 1,
+          currentItem: { component: '' },
+        });
+      }
+    },
+    { 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);
  };
--- a/src/views/demo/form-design/components/VformRender/index.vue
+++ b/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 = () => {
--- a/src/views/demo/form-design/index.vue
+++ b/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)=>{
-         state.visible = newValue
-         setTimeout(()=>{
-          emit('designformback')
-         },1000)
-         
-      },{immediate:true,deep:true})
+      watch(
+        () => _props.isSubmitClick,
+        (newValue, oldValue) => {
+          state.visible = newValue;
+          setTimeout(() => {
+            emit('designformback');
+          }, 1000);
+        },
+        { immediate: true, deep: true },
+      );

      return { ...toRefs(state) };
-    }
-  })
-  
-
+    },
+  });
 </script>

 <style lang="less" scoped></style>
--- a/src/views/demo/form-design/utils/index.ts
+++ b/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;
  }
--- a/src/views/demo/onlineform/formCall/index.data.ts
+++ b/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 },
  },
 ];
-  
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@ -1,52 +1,53 @@
 <template>
  <BasicTable @register="registerTable">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction :actions="[
-              {
-                label: '编辑',
-                onClick: handleEdit.bind(null, record),
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              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>
-        <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
-        
-      </template>
-    </BasicTable>
-    
-    <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
-
+    </template>
+    <template #toolbar>
+      <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
+    </template>
+  </BasicTable>
+  <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 { getFormGroupList,getBaseConfigList } from '@/api/formdesign/index';
-  import { columns, searchFormSchema } from './index.data';
+  import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
+  import { getFormsDesignData, getFormsPageData } from '@/api/formrender/index';
+  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 [registerTable, { reload, getSelectRows }] = useTable({
+  const callColumns: BasicColumn[] = [];
+  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,
-        limit: data.limit,
-        keyWord: data.key,
-        category: data.f_Category
+        id: 'fb572b6a-5cfd-4763-bdf5-4aa10fa8edb4',
+        paginationInputDto: {
+          page: data.page,
+          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(){
-    getBaseConfigList({ id: "e03bd1db-7a4f-43b2-9e8a-f6cd8c2126be" }).then((res: AreaRespVO[]) =>{
-      let obj = JSON.parse(res.scheme.scheme)
-      console.log('res',obj.formInfo)
-      if(obj.formInfo.schemas){
-        obj.formInfo.schemas.forEach(item =>{
-          
-        })
+  function getPublicForm() {
+    let params = {
+      code: 'zbzbtest',
+    };
+    getFormsDesignData(params).then((res: Recordable) => {
+      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){
-    console.log('renderdata',e)
+  function renderdata(e) {
+    console.log('renderdata', e);
  }
-  
+
  onMounted(() => {
-    getPublicForm()
-  })
-</script>
+    getPublicForm();
+  });
+</script>
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@ -1,19 +1,17 @@
 <template>
  <BasicModal
-      v-bind="$attrs"
-      @register="registerModal"
-      :canFullscreen="false"
-      :defaultFullscreen="true"
-      :showCancelBtn="false"
-      :showOkBtn="false"
-      :draggable="false"
-      title="慧创 表单设计"
-    >
+    v-bind="$attrs"
+    @register="registerModal"
+    :canFullscreen="false"
+    :defaultFullscreen="true"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :draggable="false"
+    title="慧创 表单设计"
+  >
    <div :class="`${prefixCls}`">
      <div :class="`${prefixCls}-header`">
-        <div :class="`${prefixCls}-header-logo`">
-          慧创  表单设计
-        </div>
+        <div :class="`${prefixCls}-header-logo`"> 慧创 表单设计 </div>
        <div :class="`${prefixCls}-header-stepsBox`">
          <a-steps
            :current="stepsCurrent"
@ -23,35 +21,46 @@
              },
              {
                title: '表单设计',
-              }
+              },
            ]"
-          ></a-steps>
+          />
        </div>
        <div :class="`${prefixCls}-header-btnBox`">
-          <a-button :disabled="stepsCurrent!==1" @click="formPrevClick">上一步</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="formPrevClick">上一步</a-button>
+          <a-button :disabled="stepsCurrent == 1" @click="formNextClick">下一步</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>
-        <FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" @formDataNoBack="formDataNoBack" />
+        <FormDesign
+          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 { getBaseConfigList, addFormDesignData , editFormDesignData } from '@/api/formdesign/index'
+  import FormDesign from '../../form-design/index.vue';
+  import { getBaseConfigList, addFormDesignData, editFormDesignData } from '@/api/formdesign/index';

- 
  defineOptions({ name: 'FormModal' });

  const emit = defineEmits(['submitsuccess']);
@ -60,213 +69,206 @@
  let formScheme = ref();

  let saveFormDatas = ref({});
-  provide("handleNextStepsData", computed(() => saveFormDatas.value));
+  provide(
+    'handleNextStepsData',
+    computed(() => saveFormDatas.value),
+  );

-  function designSendGrandson(value){
-    let designTab = JSON.parse(value)
-    let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
-    schems.formInfo = designTab
+  function designSendGrandson(value) {
+    let designTab = JSON.parse(value);
+    let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
+    schems.formInfo = designTab;

-    saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
-    console.log('孙子传值给我', designTab)
-    submitSaveClick()
-    
-    console.log('saveschems',schems)
-    designTab.schemas.forEach(item =>{
-      
-    })
+    saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+    console.log('孙子传值给我', designTab);
+    submitSaveClick();
+
+    console.log('saveschems', schems);
+    designTab.schemas.forEach((item) => {});
  }
-  provide('designSendGrandson', designSendGrandson)
-   
+  provide('designSendGrandson', designSendGrandson);

-  const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
-    stepsCurrent.value = 0
-    isSubmitClick.value = false
-    if(data.id){
-      isAddVisible.value = false
-      getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) =>{
-        formScheme.value = res
-        saveFormDatas.value = res
-        console.log('res',)
-      })
-    }else{
-      isAddVisible.value = true
+  const [registerModal, { closeModal }] = useModalInner((data: any) => {
+    stepsCurrent.value = 0;
+    isSubmitClick.value = false;
+    if (data.id) {
+      isAddVisible.value = false;
+      getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) => {
+        formScheme.value = res;
+        saveFormDatas.value = res;
+        console.log('res');
+      });
+    } else {
+      isAddVisible.value = true;
      formScheme.value = {
-          "info": {},
-          "scheme": {}
-      }
+        info: {},
+        scheme: {},
+      };
      saveFormDatas.value = {
-          "info": {},
-          "scheme": {}
-      }
+        info: {},
+        scheme: {},
+      };
    }
-
  });

-  
  let stepsCurrent = ref();
-  let isNextSteps = ref(false)
-  let isSubmitClick = ref(false)
+  let isNextSteps = ref(false);
+  let isSubmitClick = ref(false);

-  function formNextClick(){
-    isNextSteps.value = true
-    isSubmitClick.value = false
+  function formNextClick() {
+    isNextSteps.value = true;
+    isSubmitClick.value = false;
+    console.log('saveFormDatas', saveFormDatas.value);
  }
-  function formPrevClick(){
-    isNextSteps.value = false
-    stepsCurrent.value = 0
+  function formPrevClick() {
+    isNextSteps.value = false;
+    stepsCurrent.value = 0;
  }
-   
-  function closeModalClick(){
-    stepsCurrent.value = 1
-    formScheme = ref()
-    isNextSteps.value = false
-    closeModal()
+
+  function closeModalClick() {
+    stepsCurrent.value = 1;
+    formScheme = ref();
+    isNextSteps.value = false;
+    closeModal();
  }
-  function formDataNoBack(){
-    isNextSteps.value = false
+  function formDataNoBack() {
+    isNextSteps.value = false;
  }
-  function handleformData(data){
-    console.log('emitttt',data)
-    stepsCurrent.value = 1
-    let arr: any[] = []
-    console.log('adddata',data)
-    if(data.table){
-      data.table.forEach(item =>{
+  function handleformData(data) {
+    console.log('emitttt', data);
+    stepsCurrent.value = 1;
+    let arr: any[] = [];
+    console.log('adddata', data);
+    if (data.table) {
+      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){ //新增
-      let schems
-      if(saveFormDatas.value.scheme.scheme){
+    if (isAddVisible.value) {
+      //新增
+      let schems;
+      if (saveFormDatas.value.scheme.scheme) {
        schems = JSON.parse(saveFormDatas.value.scheme.scheme) || {
          db: arr,
          rdb: data.connect || [],
          dbCode: data.form.DbCode,
-          formInfo:{}
-        }
-        
-        schems.db = arr
-        schems.rdb = data.connect || [],
-        schems.dbCode = data.form.DbCode
-      }else{
-       
+          formInfo: {},
+        };
+
+        schems.db = arr;
+        (schems.rdb = data.connect || []), (schems.dbCode = data.form.DbCode);
+      } else {
        schems = {
-            db: arr,
-            rdb: data.connect || [],
-            dbCode: data.form.DbCode,
-            formInfo:{}
-        }
+          db: arr,
+          rdb: data.connect || [],
+          dbCode: data.form.DbCode,
+          formInfo: {},
+        };
      }
-      let loginUser = localStorage.getItem('fireUserLoginName')
-      saveFormDatas.value.info = data.form
-      saveFormDatas.value.info.createUserName = loginUser
-      saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
-       
-      console.log('add',saveFormDatas.value.scheme)
-    }else{ //编辑
-      console.log('edit')
-      let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
-      schems.db = arr
-      schems.rdb = data.connect || [],
-      saveFormDatas.value.info.category = data.form.category
-      saveFormDatas.value.info.description = data.form.description
-      saveFormDatas.value.info.enabledMark = data.form.enabledMark
-      saveFormDatas.value.info.name = data.form.name
-      saveFormDatas.value.info.DbCode = data.form.DbCode
-      saveFormDatas.value.info.formType = data.form.formType
-      saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
+      let loginUser = localStorage.getItem('fireUserLoginName');
+      saveFormDatas.value.info = data.form;
+      saveFormDatas.value.info.createUserName = loginUser;
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+
+      console.log('add', saveFormDatas.value.scheme);
+    } else {
+      //编辑
+      console.log('edit');
+      let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
+      schems.db = arr;
+      (schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
+      saveFormDatas.value.info.description = data.form.description;
+      saveFormDatas.value.info.enabledMark = data.form.enabledMark;
+      saveFormDatas.value.info.name = data.form.name;
+      saveFormDatas.value.info.DbCode = data.form.DbCode;
+      saveFormDatas.value.info.formType = data.form.formType;
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
    }
-    
  }

-  function submitClick(){
-    isSubmitClick.value = true
-
-    
+  function submitClick() {
+    isSubmitClick.value = true;
  }
-  function designformback(){
-    isSubmitClick.value = false
+  function designformback() {
+    isSubmitClick.value = false;
  }
-  function submitSaveClick(){
+  function submitSaveClick() {
    let param = {
      info: saveFormDatas.value.info,
-      scheme: saveFormDatas.value.scheme
-    }
-    console.log('param',param)
-    if(isAddVisible.value){
-      addFormDesignData( param ).then((res: AreaRespVO[]) =>{
-        console.log('addsuccess',res)
-        closeModalClick()
+      scheme: saveFormDatas.value.scheme,
+    };
+    console.log('param', param);
+    if (isAddVisible.value) {
+      addFormDesignData(param).then((res: AreaRespVO[]) => {
+        console.log('addsuccess', res);
+        closeModalClick();
        message.success('操作成功', 2);
-        emit("submitsuccess")
-      })
-    }else{
-      editFormDesignData( param ).then((res: AreaRespVO[]) =>{
-        closeModalClick()
+        emit('submitsuccess');
+      });
+    } else {
+      editFormDesignData(param).then((res: AreaRespVO[]) => {
+        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{
-        line-height: 55px;
-        font-size: 18px;
+      &-logo {
        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{
-        width: 310px;
-        height: 56px;
-        position: fixed;
-        right: 10px;
-        top: 0;
+      &-btnBox {
        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>
+</style>
--- a/src/views/demo/onlineform/formdesign/form/DataObject.vue
+++ b/src/views/demo/onlineform/formdesign/form/DataObject.vue
@ -1,58 +1,59 @@
 <template>
  <BasicModal
-      v-bind="$attrs"
-      @register="registerImportModal"
-      :canFullscreen="false"
-      :defaultFullscreen="false"
-      :maskClosable="false"
-      :width="800"
-      title="数据表选择"
-      @ok="dataBaseClick"
-    >
-    <BasicTable @register="registerImportTable"></BasicTable>
+    v-bind="$attrs"
+    @register="registerImportModal"
+    :canFullscreen="false"
+    :defaultFullscreen="false"
+    :maskClosable="false"
+    :width="800"
+    title="数据表选择"
+    @ok="dataBaseClick"
+  >
+    <BasicTable @register="registerImportTable" />
  </BasicModal>
- 
  <BasicModal
-      v-bind="$attrs"
-      @register="registerModal"
-      :canFullscreen="false"
-      :defaultFullscreen="false"
-      :maskClosable="false"
-      :width="800"
-      title="数据对象选择"
-      @ok="modalSuReClick"
-    >
-    <BasicTable @register="registerDataTable"></BasicTable>
+    v-bind="$attrs"
+    @register="registerModal"
+    :canFullscreen="false"
+    :defaultFullscreen="false"
+    :maskClosable="false"
+    :width="800"
+    title="数据对象选择"
+    @ok="modalSuReClick"
+  >
+    <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 { columns , searchFormSchema,importColumns  } from './dataobject.data';
+  import { ref } from 'vue';
+  import { columns, searchFormSchema, importColumns } from './dataobject.data';
  import { BasicTable, useTable } from '@/components/Table';
-  import { getDataBaseTableList,getImportBaseTableList,importDataBaseTable } from '@/api/formdesign/index';
-  import { BasicModal,useModal, useModalInner } from '/@/components/Modal';
+  import {
+    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 [registerModal, { closeModal:closeBaseModal }] = useModalInner((data: any) => {
-    receiceDbCode.value = data.dbCode
-    clearBaseSelectedRowKeys()
-    reload()
-  })
+  const receiceDbCode = ref();
+  const [registerModal, { closeModal: closeBaseModal }] = useModalInner((data: any) => {
+    receiceDbCode.value = data.dbCode;
+    clearBaseSelectedRowKeys();
+    reload();
+  });

-  const [registerImportModal, {openModal:openImportTableModal , closeModal:closeImportModal }] = useModal()
+  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,
@ -61,8 +62,9 @@
      schemas: searchFormSchema,
    },
    columns,
-    size: 'small', 
-    rowSelection: {//多选框
+    size: 'small',
+    rowSelection: {
+      //多选框
      type: 'checkbox',
      // type: 'radio',
    },
@ -70,8 +72,8 @@
    showTableSetting: false,
    canResize: false,
    bordered: true,
-    pagination:{
-      pageSize: 10
+    pagination: {
+      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,
-    size: 'small', 
-    rowSelection: {//多选框
+    columns: importColumns,
+    size: 'small',
+    rowSelection: {
+      //多选框
      type: 'checkbox',
      // type: 'radio',
    },
@ -106,46 +107,42 @@
    showTableSetting: false,
    canResize: false,
    bordered: true,
-    pagination:{
-      pageSize: 10
+    pagination: {
+      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(){
-    openImportTableModal(true)
-    setTimeout(()=>{
-      clearImportSelectedRowKeys()
-    },200)
+  function handleAddForm() {
+    openImportTableModal(true);
+    setTimeout(() => {
+      clearImportSelectedRowKeys();
+    }, 200);
  }
-  function dataBaseClick(){
-    let rows = getImportSelectRows()
-    console.log('rowww',rows)
+  function dataBaseClick() {
+    let rows = getImportSelectRows();
+    console.log('rowww', rows);
    let param = {
      dbCode: receiceDbCode.value,
-      tableList: rows
-    }
-    importDataBaseTable( param ).then((res: AreaRespVO[]) =>{
-      console.log('res',)
-      message.success('导入成功',2);
-      closeImportModal()
-      reload()
-    })
+      tableList: rows,
+    };
+    importDataBaseTable(param).then((res: AreaRespVO[]) => {
+      console.log('res');
+      message.success('导入成功', 2);
+      closeImportModal();
+      reload();
+    });
  }
-   
-
 </script>
-<style lang="less">
- 
-</style>
+<style lang="less"></style>
--- a/src/views/demo/onlineform/formdesign/form/dataobject.data.ts
+++ b/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 
-      if(status == "1"){
-        enable = true
-      }else{
-        enable = false
+      let enable;
+      if (status == '1') {
+        enable = true;
+      } else {
+        enable = false;
      }
      const color = enable ? '#67c23a' : '#e6a23c';
      const text = enable ? '同步' : '异步';
      return h(Tag, { color: color }, () => text);
    },
-  }
+  },
 ];
 export const searchFormSchema: FormSchema[] = [
  {
@ -37,9 +35,8 @@ export const searchFormSchema: FormSchema[] = [
    component: 'Input',
    colProps: { span: 8 },
  },
- 
 ];
- 
+
 export const importColumns: BasicColumn[] = [
  {
    title: '表名',
@ -47,9 +44,6 @@ export const importColumns: BasicColumn[] = [
  },
  {
    title: '说明',
-    dataIndex: 'description'
-  }
+    dataIndex: 'description',
+  },
 ];
-
- 
-
Author	SHA1	Message	Date
zzq	6b8b1a6715	merge	2024-04-03 08:33:07 +08:00
zzq	82919311e7	设计器字段乱变修改，表单调用完善	2024-04-02 17:03:50 +08:00