表单接口对接

src/api/formrender/index.ts

@@ -1,10 +1,16 @@
 import { defHttp } from '@/utils/http/axios';
-import { AccountListGetResultModel, AccountListItem, AccountParams } from './model/index';
+import {
+  AccountListGetResultModel,
+  AccountParams,
+  SaveFormsParams,
+  DeleteFormsParams,
+} from './model/index';
 
 enum Api {
-  ADDFORMDATA = '/api/FormScheme/SaveForm', //获取数据库
   GETDESIGNDATA = '/api/FormModule/GetEntityByCode', //获取设计数据
   GETFORMPAGEDATA = '/api/FormScheme/GetFormDataPage?id=', //获取表单分页数据
+  SAVEFORMDATA = '/api/FormScheme/SaveForm', //新增编辑自定义表单
+  DELFORMSDATA = '/api/FormScheme/DeleteFormData?id=', //删除表单数据
 }
 /**
  * @description: Get sample options value
@@ -13,5 +19,10 @@ export const getFormsDesignData = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel[]>({ url: Api.GETDESIGNDATA, params });
 export const getFormsPageData = (params: AccountParams) =>
   defHttp.post<AccountListGetResultModel[]>({ url: Api.GETFORMPAGEDATA + params.id, params });
-export const addFormData = (params: AccountListItem) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.ADDFORMDATA + params.id, params });
+export const saveFormsData = (params: SaveFormsParams) =>
+  defHttp.post<AccountListGetResultModel[]>({ url: Api.SAVEFORMDATA, params });
+export const delFormsData = (params: DeleteFormsParams) =>
+  defHttp.post<AccountListGetResultModel[]>({
+    url: Api.DELFORMSDATA + params.id + '&key=' + params.key + '&keyValue=' + params.keyValue,
+    params,
+  });

src/api/formrender/model/index.ts

@@ -23,5 +23,17 @@ export interface AccountParams {
   code?: any;
   rows?: string;
 }
+export interface SaveFormsParams {
+  schemeId?: string;
+  isUpdate?: any;
+  data?: any;
+  pkey?: string;
+  pkeyValue?: any;
+}
+export interface DeleteFormsParams {
+  id?: string;
+  key?: string;
+  keyValue?: any;
+}
 
 export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;

src/components/Tree/src/BasicTree.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import type { CSSProperties } from 'vue';
+  import type { CSSProperties , h} from 'vue';
   import type {
     FieldNames,
     TreeState,
@@ -380,7 +380,7 @@
             key: keyField,
             children: childrenField,
           } = unref(getFieldNames);
-
+          
           const icon = getIcon(item, item.icon);
           const title = get(item, titleField);
 
@@ -398,7 +398,6 @@
           ) : (
             title
           );
-
           const iconDom = icon ? (
             <TreeIcon icon={icon} />
           ) : slots.icon ? (

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

@@ -161,13 +161,15 @@
               arr.push({
                 label: item.dbColumnName,
                 value: item.dbColumnName,
+                csType: item.csType,
               });
             });
+            FieldNamesOptions.value = arr;
           }
-          FieldNamesOptions.value = arr;
         });
       };
       const handleFieldTableChange = (e) => {
+        console.log('cccccc', e);
         fieldTableValue.value = e;
         fetch();
         inputOptions.value.forEach((item) => {

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

@@ -81,7 +81,6 @@
       const state = reactive({
         componentMap,
       });
-      console.log('schemaschema111', props.schema);
       const { formModel: formData1, setFormModel } = useFormModelState();
       const colPropsComputed = computed(() => {
         const { colProps = {} } = props.schema;

src/views/demo/h5html/index.vue

@@ -1,116 +1,73 @@
 <template>
-  <BasicTable @register="registerTable">
-    <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),
-              },
-            },
-          ]"
-        />
-      </template>
-    </template>
-    <template #toolbar>
-      <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
-    </template>
-  </BasicTable>
-
-  <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
+  <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, nextTick, unref, reactive } from 'vue';
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { getFormGroupList, getBaseConfigList } from '@/api/formdesign/index';
-  import { columns, 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 { unref, ref } from 'vue';
+  import { FormSchema } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { saveFormsData } from '@/api/formrender/index';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
 
-  const eFormPreview = ref<null | IToolbarMethods>(null);
-  const [registerTable, { reload, getSelectRows }] = useTable({
-    title: '表单列表',
-    api: getFormGroupList,
-    rowKey: 'f_Id',
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    beforeFetch: (data) => {
-      // 接口请求前 参数处理
-      var temp = {
-        page: data.page,
-        limit: data.limit,
-        keyWord: data.key,
-        category: data.f_Category,
-      };
-      return temp;
-    },
-    afterFetch: (data) => {},
-    handleSearchInfoFn(info) {
-      return info;
-    },
-    actionColumn: {
-      width: 180,
-      title: '操作',
-      dataIndex: 'action',
-      // slots: { customRender: 'action' },
-      fixed: undefined,
-    },
-  });
+  const emit = defineEmits(['success']);
+  const route = useRoute();
+  const { createMessage } = useMessage();
+  const formModalVisible = ref(false);
+  const isUpdate = ref(true);
+  const primaryQuery = ref();
+  const addQuery: any = ref([]);
+  const formColumns: FormSchema[] = [];
+  const paramsCode = route.query.code;
 
-  const formConfig = ref<IFormConfig>({
-    // 表单配置
-    schemas: [],
-    layout: 'horizontal',
-    labelLayout: 'flex',
+  function generateUniqueDigits(length: number): number[] {
+    const digits = new Set<number>();
+    while (digits.size < length) {
+      const randomDigit = Math.floor(Math.random() * 20);
+      digits.add(randomDigit);
+    }
+    return Array.from(digits);
+  }
+  const uniqueDigits = generateUniqueDigits(20);
+
+  const [registerForm, { setFieldsValue, validate }] = useForm({
     labelWidth: 100,
-    labelCol: {},
-    wrapperCol: {},
-    currentItem: {
-      component: '',
-      componentProps: {},
-    },
-    activeKey: 1,
+    schemas: formColumns,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 24, md: 24 },
   });
-
-  const handleAddForm = (Modal: IToolbarMethods) => {
-    console.log('formConfig', formConfig);
-    const config = cloneDeep(formConfig.value);
-    Modal?.showModal(config);
-  };
-  function handleEdit(record: Recordable) {}
-  function handleDelete(record: Recordable) {
-    // openAccountModal(true, {
-    //   record,
-    // });
-  }
-  function getPublicForm() {
-    getBaseConfigList({ id: 'ed985a1e-b007-43d1-af14-be4e44018c8b' }).then((res: AreaRespVO[]) => {
-      let obj = JSON.parse(res.scheme.scheme);
-      console.log('res', obj.formInfo);
-      formConfig.value.schemas = obj.formInfo.schemas;
-    });
-  }
   //表单填写数据
-  function renderdata(e) {
-    console.log('renderdata', e);
+  async function ModalSureClick() {
+    try {
+      const values = await validate();
+      let query = values;
+      console.log('query', query);
+      let params: any = {
+        schemeId: primaryQuery.value.id,
+        isUpdate: isUpdate.value,
+        pkey: primaryQuery.value.key,
+      };
+      console.log('params', params);
+      if (unref(isUpdate)) {
+        params.pkeyValue = primaryQuery.value.keyValue;
+      } else {
+        addQuery.value.forEach((item) => {
+          if (item.type == 'main') {
+            params.pkeyValue = item.value;
+          }
+          query[item.field] = item.value;
+        });
+      }
+      params.data = JSON.stringify(query);
+      console.log('query222', query);
+      console.log('params222', params);
+      const data = await saveFormsData(params);
+      if (data) {
+        emit('success');
+        return createMessage.success('操作成功');
+      } else {
+        return createMessage.error('操作失败');
+      }
+    } finally {
+    }
   }
-
-  onMounted(() => {
-    getPublicForm();
-  });
 </script>

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

@@ -4,30 +4,79 @@
     @register="registerModal"
     :canFullscreen="false"
     :draggable="false"
-    title="慧创 表单设计"
+    :showCancelBtn="!isDetail"
+    :showOkBtn="!isDetail"
+    :title="getTitle"
     @ok="ModalSureClick"
   >
     <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { unref, ref } from 'vue';
   import { FormSchema } from '@/components/Table';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
+  import { saveFormsData } from '@/api/formrender/index';
+  import { useMessage } from '@/hooks/web/useMessage';
 
+  const emit = defineEmits(['success']);
+  const { createMessage } = useMessage();
   const formModalVisible = ref(false);
-
+  const isUpdate = ref(true);
+  const isDetail = ref(true);
+  const getTitle = ref();
+  const primaryQuery = ref();
+  const addQuery: any = ref([]);
   const formColumns: FormSchema[] = [];
   const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
     console.log('daaaaa', data);
-    data.record.forEach((item) => {
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.isDetail;
+    data.tab.forEach((item) => {
       formColumns.push(item);
     });
+    if (!unref(isUpdate) && !unref(isDetail)) {
+      getTitle.value = '新增';
+    }
+    if (unref(isUpdate) && !unref(isDetail)) {
+      getTitle.value = '编辑';
+    }
+    if (!unref(isUpdate) && unref(isDetail)) {
+      getTitle.value = '详情';
+    }
     formModalVisible.value = true;
+    primaryQuery.value = data.query;
+    if (data.record) {
+      setTimeout(() => {
+        setFieldsValue({
+          ...data.record,
+        });
+      }, 100);
+    }
+    addQuery.value = [];
+    if (data.addParams) {
+      data.addParams.forEach((item) => {
+        addQuery.value.push({
+          type: item.type,
+          field: item.field,
+          value: generateUniqueDigits(20).join(''),
+        });
+      });
+      console.log('addQuery', addQuery);
+    }
   });
+  function generateUniqueDigits(length: number): number[] {
+    const digits = new Set<number>();
+    while (digits.size < length) {
+      const randomDigit = Math.floor(Math.random() * 20);
+      digits.add(randomDigit);
+    }
+    return Array.from(digits);
+  }
+  const uniqueDigits = generateUniqueDigits(20);
 
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
+  const [registerForm, { setFieldsValue, validate }] = useForm({
     labelWidth: 100,
     schemas: formColumns,
     showActionButtonGroup: false,
@@ -39,6 +88,34 @@
       const values = await validate();
       let query = values;
       console.log('query', query);
+      let params: any = {
+        schemeId: primaryQuery.value.id,
+        isUpdate: isUpdate.value,
+        pkey: primaryQuery.value.key,
+      };
+      console.log('params', params);
+      if (unref(isUpdate)) {
+        params.pkeyValue = primaryQuery.value.keyValue;
+      } else {
+        addQuery.value.forEach((item) => {
+          if (item.type == 'main') {
+            params.pkeyValue = item.value;
+          }
+          query[item.field] = item.value;
+        });
+      }
+      params.data = JSON.stringify(query);
+      console.log('query222', query);
+      console.log('params222', params);
+      const data = await saveFormsData(params);
+      if (data) {
+        setModalProps({ confirmLoading: true });
+        closeModal();
+        emit('success');
+        return createMessage.success('操作成功');
+      } else {
+        return createMessage.error('操作失败');
+      }
     } finally {
       setModalProps({ confirmLoading: false });
     }

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

@@ -18,16 +18,13 @@
     <BasicTable @register="registerTable" class="flex-1">
       <template #toolbar>
         <div v-for="(item, index) in btnArr" :key="index">
-          <a-button
-            v-if="item.isRowBtn"
-            :type="item.class"
-            @click="handleAddForm(item.prop, eFormPreview!)"
-            >{{ item.label }}</a-button
-          >
+          <a-button :type="item.class" @click="handleClickForm(item.prop)">{{
+            item.label
+          }}</a-button>
         </div>
       </template>
     </BasicTable>
-    <CallModal @submitsuccess="submitsuccess" @register="registerModal" />
+    <CallModal @success="submitsuccess" @register="registerModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -35,26 +32,33 @@
   import { useRoute } from 'vue-router';
   import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
   import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
-  import { getFormsDesignData, getFormsPageData } from '@/api/formrender/index';
+  import { getFormsDesignData, getFormsPageData, delFormsData } from '@/api/formrender/index';
   import { searchFormSchema } from './index.data';
   import { PageWrapper } from '@/components/Page';
   import { cloneDeep } from 'lodash-es';
   import { IFormConfig } from '../../form-design/typings/v-form-component';
-  import { IToolbarMethods } from '../../form-design/typings/form-type';
   import { useModal } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
   import CallModal from './CallModal.vue';
 
-  const eFormPreview = ref<null | IToolbarMethods>(null);
+  const { createConfirm, createMessage } = useMessage();
   const route = useRoute();
-  const btnArr: any = [];
+  const btnArr: any = [
+    { label: '新增', prop: 'Add', class: 'primary' },
+    { label: '编辑', prop: 'Edit', class: 'success' },
+    { label: '删除', prop: 'Delete', class: 'error' },
+    { label: '详情', prop: 'Details', class: 'default' },
+  ];
   const treeTitle: any = ref('树形');
   const treeVisible: any = ref(false);
-  const paramsId = route.query.id;
+  const paramsId: any = ref();
+  const designData: any = ref();
+  const addParamsArr: any = ref([]);
+  const primaryKeyFailed: any = ref();
   const paramsCode = route.query.code;
   const callColumns: BasicColumn[] = [];
   const formColumns: FormSchema[] = [];
   console.log('paramsCode', paramsCode);
-  console.log('paramsId', paramsId);
   const treeData = ref<TreeItem[]>([]);
   const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
   const actionList: TreeActionItem[] = [];
@@ -62,12 +66,15 @@
   const [registerTable, { reload, setColumns, getSelectRows }] = useTable({
     title: '表单列表',
     api: getFormsPageData,
-    rowKey: 'f_Id',
+    // rowKey: 'f_Id',
     columns: callColumns,
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
     },
+    rowSelection: {
+      type: 'radio',
+    },
     useSearchForm: true,
     showTableSetting: true,
     bordered: true,
@@ -75,7 +82,7 @@
       console.log('dabefore', data);
       // 接口请求前 参数处理
       var temp = {
-        id: paramsId,
+        id: paramsId.value,
         paginationInputDto: {
           page: data.page,
           rows: data.limit,
@@ -84,6 +91,28 @@
       };
       return temp;
     },
+    afterFetch: () => {
+      console.log('designData.value', designData.value);
+      const rel = designData.value;
+      let arr: any = [];
+      if (rel.primaryKey) {
+        rel.db.forEach((val) => {
+          rel.formInfo.schemas.forEach((item) => {
+            if (
+              item.componentProps.dataTable == val.name &&
+              rel.primaryKey == item.componentProps.fieldName
+            ) {
+              arr.push({
+                type: val.type,
+                field: item.field,
+              });
+            }
+          });
+        });
+      }
+      addParamsArr.value = [...new Set(arr)];
+      console.log('addParamsArr', addParamsArr);
+    },
     handleSearchInfoFn(info) {
       return info;
     },
@@ -105,23 +134,81 @@
     status: 'Add',
   });
 
-  const handleAddForm = (status, Modal: IToolbarMethods) => {
-    console.log('formConfig', formConfig);
-    console.log('status', status);
+  const handleClickForm = (status) => {
     const config = cloneDeep(formConfig.value);
-    config.status = status;
-    console.log('config', config);
+    const rows = getSelectRows();
+    console.log('rows', rows[0]);
+    console.log('primaryKeyFailed', primaryKeyFailed.value);
+    const query: any = ref({
+      id: paramsId.value,
+      key: designData.value.primaryKey,
+      keyValue: null,
+    });
+    const str: any = ref(addParamsArr.value[0].field);
+    addParamsArr.value.forEach((item) => {
+      if (item.type == 'main') {
+        str.value = item.field;
+      }
+    });
+
+    if (rows.length > 0) {
+      query.value.keyValue = rows[0][str.value];
+    }
     switch (status) {
       case 'Add':
-        openModal(true, { record: config.schemas });
+        openModal(true, {
+          isDetail: false,
+          isUpdate: false,
+          tab: config.schemas,
+          query: query.value,
+          addParams: addParamsArr.value,
+        });
         break;
       case 'Edit':
-        openModal(true, { record: config.schemas });
+        if (rows.length == 0) {
+          return createMessage.warn('请选择一条数据进行编辑');
+        }
+        openModal(true, {
+          isDetail: false,
+          isUpdate: true,
+          tab: config.schemas,
+          record: rows[0],
+          query: query.value,
+        });
         break;
       case 'Delete':
+        if (rows.length == 0) {
+          return createMessage.warn('请选择一条数据进行删除');
+        }
+        console.log('rowww', rows);
+        createConfirm({
+          iconType: 'info',
+          title: '删除',
+          content: '确定要删除该条数据？',
+          onOk: async () => {
+            delFormsData(query.value).then((res) => {
+              console.log('rrr', res);
+              if (res) {
+                createMessage.success('删除成功', 2);
+              } else {
+                createMessage.error('删除失败', 2);
+              }
+            });
+            reload();
+          },
+        });
         break;
       case 'Details':
-        Modal?.showModal(config);
+        if (rows.length == 0) {
+          return createMessage.warn('请选择一条数据查看详情');
+        }
+        openModal(true, {
+          isDetail: true,
+          isUpdate: false,
+          tab: config.schemas,
+          record: rows[0],
+          query: query.value,
+        });
         break;
       case 'Import':
         break;
@@ -131,26 +218,10 @@
         break;
     }
   };
-  async function editTreeGroup(record: Recordable) {
-    console.log('record', record);
-  }
   function handleSelect(GroupId = '') {
     console.log('GroupId', GroupId);
     reload();
   }
-  function handleEdit(record: Recordable) {
-    console.log('record', record);
-    let rows = getSelectRows();
-    if (rows.length == 0) {
-      return createMessage.warn('请选择一个职级进行编辑');
-    }
-  }
-  function handleDelete(record: Recordable) {
-    // openAccountModal(true, {
-    //   record,
-    // });
-    console.log('record', record);
-  }
   function getPublicForm() {
     let params = {
       code: paramsCode,
@@ -161,15 +232,12 @@
       let formObj = JSON.parse(res.formScheme.scheme);
       console.log('res222', columnObj);
       console.log('formObj', formObj);
+      paramsId.value = res.formScheme.id;
+      console.log('paramsId', paramsId.value);
       formObj.formInfo.schemas.forEach((item) => {
         formColumns.push(item);
       });
 
-      if (columnObj.btns) {
-        columnObj.btns.forEach((item) => {
-          btnArr.push(item);
-        });
-      }
       if (columnObj.table.columns) {
         columnObj.table.columns.forEach((item) => {
           callColumns.push({
@@ -187,7 +255,7 @@
       } else {
         treeVisible.value = false;
       }
-      console.log('treeTitle', treeTitle);
+      designData.value = formObj;
       // 展开全部
       nextTick(() => {
         unref(asyncExpandTreeRef)?.expandAll(true);
@@ -195,49 +263,10 @@
       formConfig.value.schemas = formObj.formInfo.schemas;
     });
   }
-  //表单填写数据
-  async function ModalSureClick() {
-    try {
-      const values = await validate();
-      let query = values;
-      console.log('query', query);
-    } finally {
-      setModalProps({ confirmLoading: false });
-    }
-  }
   //弹窗确定后返回调用
-  function submitsuccess() {}
-  // async function handleSubmit() {
-  //   try {
-  //     const values = await validate();
-  //     let query = values;
-  //     // 调用接口
-  //     if (!unref(isUpdate)) {
-  //       const data = await addDataBaseInfo(query);
-  //       if (data) {
-  //         setModalProps({ confirmLoading: true });
-  //         closeModal();
-  //         emit('success');
-  //         return createMessage.success('新增成功');
-  //       } else {
-  //         return createMessage.error('新增失败');
-  //       }
-  //     } else {
-  //       query.databaseLinkId = detailValue.value.databaseLinkId
-  //       const data = await editDataBaseInfo(query);
-  //       if (data) {
-  //         setModalProps({ confirmLoading: true });
-  //         closeModal();
-  //         emit('success');
-  //         return createMessage.success('编辑成功');
-  //       } else {
-  //         return createMessage.error('编辑失败');
-  //       }
-  //     }
-  //   } finally {
-  //     setModalProps({ confirmLoading: false });
-  //   }
-  // }
+  function submitsuccess() {
+    reload();
+  }
 
   onMounted(() => {
     getPublicForm();

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

@@ -59,7 +59,12 @@
   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 {
+    getBaseConfigList,
+    addFormDesignData,
+    editFormDesignData,
+    getOutKeyList,
+  } from '@/api/formdesign/index';
 
   defineOptions({ name: 'FormModal' });
 
@@ -69,6 +74,7 @@
   let formScheme = ref();
 
   let saveFormDatas: any = ref({});
+  const primaryKey: any = ref();
   provide(
     'handleNextStepsData',
     computed(() => saveFormDatas.value),
@@ -84,12 +90,27 @@
       if (item.componentProps.defaultValue) {
         item.defaultValue = item.componentProps.defaultValue;
       }
+      if (item.componentProps.fieldName) {
+        let params = {
+          dbCode: schems.dbCode,
+          tableNames: item.componentProps.dataTable,
+        };
+        getOutKeyList(params).then((res: Recordable) => {
+          res[0].db_codecolumnsList.forEach((val) => {
+            if (item.componentProps.fieldName == val.dbColumnName) {
+              item.csType = val.csType;
+            }
+          });
+        });
+      }
       tabArr.push(item.componentProps.fieldName);
       if (!item.componentProps.fieldName) {
         tabLabelArr.push(item.label);
       }
     });
+    schems.primaryKey = primaryKey.value;
     schems.formInfo = designTab;
+    console.log('schemsschems 0000', schems);
     saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
     if (tabArr.includes(undefined)) {
       message.warning('请' + tabLabelArr[0] + '绑定数据表字段！', 2);
@@ -162,6 +183,18 @@
         });
       });
     }
+    console.log('arr0000000', arr);
+    let params = {
+      dbCode: data.form.DbCode,
+      tableNames: data.table[0].name,
+    };
+    getOutKeyList(params).then((res: Recordable) => {
+      res[0].db_codecolumnsList.forEach((item) => {
+        if (item.isPrimaryKey == 1) {
+          primaryKey.value = item.dbColumnName;
+        }
+      });
+    });
     if (isAddVisible.value) {
       //新增
       let schems;
@@ -187,11 +220,8 @@
       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);

src/views/demo/system/databasemanage/DataBaseModal.vue

@@ -1,16 +1,21 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :canFullscreen="false" @ok="handleSubmit">
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    :canFullscreen="false"
+    @ok="handleSubmit"
+  >
     <BasicForm @register="registerForm">
-        <template #dbConnection="{ model, field }">
-          <a-input-search
-            v-model:value="dbConnection"
-            placeholder="请输入"
-            enter-button="测试连接"
-            @change="inputChange"
-            @search="connectClick"
-          >
-          </a-input-search>
-        </template>
+      <template #dbConnection="{ model, field }">
+        <a-input-search
+          v-model:value="dbConnection"
+          placeholder="请输入"
+          enter-button="测试连接"
+          @change="inputChange"
+          @search="connectClick"
+        />
+      </template>
     </BasicForm>
   </BasicModal>
 </template>
@@ -20,8 +25,9 @@
   import { BasicForm, useForm } from '@/components/Form';
   import { formSchema } from './index.data';
 
-  import {addDataBaseInfo,editDataBaseInfo,testDataBaseConnection } from '@/api/database';
+  import { addDataBaseInfo, editDataBaseInfo, testDataBaseConnection } from '@/api/database';
   import { useMessage } from '@/hooks/web/useMessage';
+
   const { createMessage } = useMessage();
   defineOptions({ name: 'DataBaseModal' });
 
@@ -31,7 +37,7 @@
   const dbConnection = ref();
   const detailValue = ref();
 
-  const [registerForm, { resetFields, setFieldsValue,getFieldsValue, validate }] = useForm({
+  const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
     labelWidth: 100,
     baseColProps: { span: 24 },
     schemas: formSchema,
@@ -44,51 +50,48 @@
     isUpdate.value = !!data?.isUpdate;
     detailValue.value = data.record;
     if (unref(isUpdate)) {
-      dbConnection.value = data.record.dbConnection
+      dbConnection.value = data.record.dbConnection;
       setFieldsValue({
         ...data.record,
       });
-    }else{
-      dbConnection.value = null
+    } else {
+      dbConnection.value = null;
     }
-    
   });
 
   const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
 
   async function connectClick() {
-    console.log('click',detailValue)
-    console.log('dbConnection',dbConnection)
-    console.log('click123',getFieldsValue())
-    const formVlaue = getFieldsValue()
-    if(dbConnection.value){
-      if(formVlaue.dbType){
+    console.log('click', detailValue);
+    console.log('dbConnection', dbConnection);
+    console.log('click123', getFieldsValue());
+    const formVlaue = getFieldsValue();
+    if (dbConnection.value) {
+      if (formVlaue.dbType) {
         let param = {
           connection: dbConnection.value,
-          dbType: formVlaue.dbType ,
-        }
-        testDataBaseConnection(param).then( res =>{
-          console.log('rrrreeee',res)
-          if(res){
-            createMessage.success('连接成功',2)
-          }else{
-            createMessage.error('连接失败',2)
+          dbType: formVlaue.dbType,
+        };
+        testDataBaseConnection(param).then((res) => {
+          console.log('rrrreeee', res);
+          if (res) {
+            createMessage.success('连接成功', 2);
+          } else {
+            createMessage.error('连接失败', 2);
           }
-        })
-      }else{
-        createMessage.warning('请先选择数据库类型！',1)
+        });
+      } else {
+        createMessage.warning('请先选择数据库类型！', 1);
       }
-    }else{
-      createMessage.warning('请填写连接串！',1);
+    } else {
+      createMessage.warning('请填写连接串！', 1);
     }
-    
-    
-  };
-  async function inputChange(e){
+  }
+  async function inputChange(e) {
     setFieldsValue({
-      dbConnection: dbConnection.value
-    })
-  };
+      dbConnection: dbConnection.value,
+    });
+  }
 
   async function handleSubmit() {
     try {
@@ -106,7 +109,7 @@
           return createMessage.error('新增失败');
         }
       } else {
-        query.databaseLinkId = detailValue.value.databaseLinkId
+        query.databaseLinkId = detailValue.value.databaseLinkId;
         const data = await editDataBaseInfo(query);
         if (data) {
           setModalProps({ confirmLoading: true });

src/views/demo/system/databasemanage/index.vue

@@ -1,26 +1,24 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicTable
-      @register="registerTable"
-      :searchInfo="searchInfo"
-    >
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
         <PermissionBtn @btn-event="onBtnClicked" />
       </template>
     </BasicTable>
-     <DataBaseModal @register="registerModal" @success="handleSuccess" ></DataBaseModal>
+    <DataBaseModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { reactive, nextTick, ref, onMounted } from 'vue';
-  import  DataBaseModal  from './DataBaseModal.vue';
+  import DataBaseModal from './DataBaseModal.vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { useMessage } from '@/hooks/web/useMessage';
   import PermissionBtn from '@/components/PermissionBtn/index.vue';
   import { useModal } from '@/components/Modal';
   import { columns, searchFormSchema } from './index.data';
-  import {getDataBasePageList,delDataBaseInfo } from '@/api/database';
+  import { getDataBasePageList, delDataBaseInfo } from '@/api/database';
+
   const { createConfirm, createMessage } = useMessage();
   const searchInfo = reactive<Recordable>({});
   // 列表
@@ -48,11 +46,10 @@
       return info;
     },
   });
- 
 
   const [registerModal, { openModal }] = useModal();
-  function handleSuccess(){
-    reload()
+  function handleSuccess() {
+    reload();
   }
   // 表单列表新增和编辑弹窗
   function handleAddForm() {
@@ -62,24 +59,23 @@
   }
   function handleEdit() {
     let rows = getSelectRows();
-    console.log('rows',rows)
+    console.log('rows', rows);
     if (rows.length == 0) {
       return createMessage.warn('请选择一条数据进行编辑');
     }
-    
     openModal(true, {
-      record:rows[0],
+      record: rows[0],
       isUpdate: true,
     });
   }
- 
+
   // 表单-删除
   function handleDelete() {
     let rows = getSelectRows();
     if (rows.length == 0) {
       return createMessage.warn('请选择一条数据进行删除');
     }
-    console.log('rrr',rows)
+    console.log('rrr', rows);
     var query = {
       id: rows[0].databaseLinkId,
     };
@@ -88,13 +84,13 @@
       title: '删除',
       content: '确定要删除该条数据？',
       onOk: async () => {
-        delDataBaseInfo(query).then(res =>{
-          if(res){
-            createMessage.success('删除成功',2);
-          }else{
-            createMessage.error('删除失败',2);
+        delDataBaseInfo(query).then((res) => {
+          if (res) {
+            createMessage.success('删除成功', 2);
+          } else {
+            createMessage.error('删除失败', 2);
           }
-        })
+        });
         reload();
       },
     });

src/views/demo/workflow/create/index.vue

@@ -1,19 +1,32 @@
 <template>
   <PageWrapper :class="prefixCls">
-    <div :class="`${prefixCls}__content`" v-for="(item,index) in cardList" :key="index">
-      <div :class="`${prefixCls}__list-title`">{{item.category}}【{{item.data.length}}】</div>
+    <div :class="`${prefixCls}__content`" v-for="(item, index) in cardList" :key="index">
+      <div :class="`${prefixCls}__list-title`">
+        <a-divider type="vertical" />{{ item.category }}【{{ item.data.length }}】</div
+      >
       <List>
         <Row :gutter="16">
           <template v-for="itemchild in item.data" :key="itemchild.id">
-            <Col :span="6" >
-            <List.Item>
-              <Card :hoverable="true" :class="`${prefixCls}__card`" @click="launch(itemchild.code)">
-                <div :class="`${prefixCls}__card-title`">
-                  <Icon class="icon" v-if="itemchild.icon" :icon="itemchild.icon" :color="itemchild.color" />
-                  {{ itemchild.name }}
-                </div>
-              </Card>
-            </List.Item>
+            <Col :span="6">
+              <List.Item>
+                <Card
+                  :hoverable="true"
+                  :class="`${prefixCls}__card`"
+                  @click="launch(itemchild.code)"
+                >
+                  <div :class="`${prefixCls}__card-title`" :title="itemchild.name">
+                    <Icon
+                      class="icon"
+                      v-if="itemchild.icon"
+                      :icon="itemchild.icon"
+                      :color="itemchild.color"
+                    />
+                    <span>
+                      {{ itemchild.name }}
+                    </span>
+                  </div>
+                </Card>
+              </List.Item>
             </Col>
           </template>
         </Row>
@@ -22,43 +35,50 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue'
-  import {Icon} from '@/components/Icon/index';
+  import { onMounted, ref } from 'vue';
+  import { Icon } from '@/components/Icon/index';
   import { PageWrapper } from '@/components/Page';
   import { Card, Row, Col, List } from 'ant-design-vue';
-  import { getInfoList } from '@/api/sys/WFSchemeInfo'
+  import { getInfoList } from '@/api/sys/WFSchemeInfo';
   import { useGo } from '@/hooks/web/usePage';
   const go = useGo();
   const prefixCls = 'list-card';
-  let cardList = ref()
-  function launch(code){
-    go('/dashboard/create_preview/add?code='+code);
+  let cardList = ref();
+  function launch(code) {
+    go('/dashboard/create_preview/add?code=' + code);
   }
   async function getList() {
-    let data = await getInfoList()
-    let newArr = {}
-    data.map(item => {
+    let data = await getInfoList();
+    let newArr = {};
+    data.map((item) => {
       newArr[item.category] = newArr[item.category] || []; //给category(可自行更换字段如name、sex等，根据自己的数据结构和需求)后加一个[]中括号
       newArr[item.category].push(item); //将所有的item列放入到对应的category中
-    })
+    });
     let list = [];
-    Object.keys(newArr).forEach(v => {
-      let obj:any = {};
+    Object.keys(newArr).forEach((v) => {
+      let obj: any = {};
       obj.category = v;
-      obj.data = newArr[v]
+      obj.data = newArr[v];
       list.push(obj);
-    })
-    cardList.value = list
+    });
+    cardList.value = list;
   }
   onMounted(() => {
-    getList()
-  })
+    getList();
+  });
 </script>
 <style lang="less" scoped>
   .list-card {
-    background-color: @component-background;
+    // background-color: @component-background;
     overflow: scroll;
-
+    &__content {
+      background-color: @component-background;
+      margin-bottom: 20px;
+      padding: 20px 10px;
+    }
+    .ant-list {
+      padding: 10px 20px;
+    }
     &__list-title {
       cursor: default;
       height: 32px;
@@ -67,6 +87,10 @@
       color: @text-color-base;
       font-size: 16px;
       font-weight: 500;
+      .ant-divider-vertical {
+        height: 1.4em;
+        border-inline-start: 3px solid #1f78ff;
+      }
     }
 
     &__card {
@@ -82,11 +106,12 @@
         color: @text-color-base;
         font-size: 16px;
         font-weight: 500;
+        display: flex;
+        align-items: center;
 
         .icon {
-          margin-top: -5px;
           margin-right: 10px;
-          font-size: 38px !important;
+          font-size: 30px !important;
         }
       }
 
@@ -102,4 +127,4 @@
       padding: 12px 2px;
     }
   }
-</style>
+</style>

src/views/demo/workflow/create/preview.vue

@@ -17,7 +17,9 @@
       </a-button>
     </div>
     <a-tabs v-model:activeKey="activeName">
-      <a-tab-pane key="form" tab="表单信息"> </a-tab-pane>
+      <a-tab-pane key="form" tab="表单信息">
+        <VFormCreate ref="eFormPreview" :form-config="formConfig"/>
+      </a-tab-pane>
       <a-tab-pane key="flow" tab="流程信息" force-render>
         <div class="process-design" :style="'display: flex; height:' + designerData.height">
           <process-viewer :key="`designer-${code}`" :xml="flowContent" />
@@ -66,6 +68,7 @@
   import { h, ref, reactive, onBeforeMount } from 'vue';
   import { ProcessViewer } from '@/components/ProcessViewer/index';
   import { PageWrapper } from '@/components/Page';
+  import VFormCreate from '@/views/demo/form-design/components/VFormCreate/index.vue';
 
   import {
     SendOutlined,
@@ -84,8 +87,10 @@
   import { useRouter } from 'vue-router';
   import { useUserStore } from '@/store/modules/user';
   import { buildGUID } from '@/utils/uuid';
+  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
+  import { functionGetSchemePageList } from '@/api/demo/formScheme';
 
   const userStore = useUserStore();
   const userInfo: any = userStore.getUserInfo;
@@ -98,7 +103,23 @@
   const formRef = ref();
   const labelCol = { span: 7 };
   const wrapperCol = { span: 13 };
-
+  // 表单实例
+  const eFormPreview = ref<null | IToolbarMethods>(null);
+  // 表单数据
+  const formConfig = ref<IFormConfig>({
+    // 表单配置
+    schemas: [],
+    layout: 'horizontal',
+    labelLayout: 'flex',
+    labelWidth: 100,
+    labelCol: {},
+    wrapperCol: {},
+    currentItem: {
+      component: '',
+      componentProps: {},
+    },
+    activeKey: 1,
+  });
   const designerData = reactive({
     loading: false,
     xmlString: '',
@@ -113,6 +134,8 @@
 
     isDraft: false,
     delegateUsers: [],
+    formVerison: '',
+    formCode: '',
   });
   const activeName = ref('flow');
   const formData = reactive({
@@ -123,6 +146,20 @@
     title: [{ required: true, message: '请选择流程标题', trigger: 'blur' }],
     userId: [{ required: true, message: '请选择流程发起人', trigger: 'blur' }],
   });
+  async function getForm() {
+    console.log(designerData.formCode)
+    console.log(designerData.formVerison)
+    const list = await functionGetSchemePageList({
+      schemeInfoId: designerData.formCode,
+    });
+    list.items.forEach((element) => {
+      if (element.id == designerData.formVerison) {
+        const scheme = JSON.parse(element.scheme)
+        formConfig.value.schemas = scheme.formInfo.schemas;
+        console.log(formConfig.value);
+      }
+    });
+  }
   async function getDetailInfo() {
     let data = await getDetail({ code: code });
     flowContent.value = data.scheme.flowContent;
@@ -130,7 +167,11 @@
     let content = JSON.parse(data.scheme.content);
     let wfData = content.wfData;
     const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
+    console.log(currentNode)
     designerData.isCustmerTitle = currentNode.isCustmerTitle;
+    designerData.formVerison = currentNode.formVerison;
+    designerData.formCode = currentNode.formCode;
+    getForm()
   }
   async function getDelegateUsers() {
     const data = await getLoadMyUserList({

src/views/demo/workflow/task/process/auditInfo.vue

@@ -3,7 +3,7 @@
     <div class="l-wf-audit-info--item" v-for="item in props.data" :key="item.id">
       <div class="l-wf-audit-info--header">{{ item.name }}</div>
       <div class="l-wf-audit-info--body">
-        <div style="position: relative; z-index: 2">{{ item.des }}</div>
+        <div style="position: relative; z-index: 2;word-wrap:break-word;">{{ item.des }}</div>
         <div class="l-wf-audit-info--imgdiv" v-if="item.img">
           <img
             class="l-wf-audit-info--img"